﻿<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head> <meta name="keywords" content="keywords_temp" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0a0e14">
<title>六二八电子竞技 · 深圳STE</title>
<meta name="description" content="深圳市前海六二八文化传媒有限公司 —— 世界大学生电子竞技联赛WUCG / 和平精英职业战队深圳STE / 不鸽电竞">
<link rel="icon" href="http://cdnsource.bugegaming.com/steclub/img/buge.ico">
<style>
/* ============ tokens ============ */
:root{
  --bg:#080b10; --bg2:#0d1219; --card:#131a24; --card2:#182130;
  --text:#e9eef6; --muted:#93a0b3; --line:rgba(255,255,255,.09);
  --accent:#21e07c; --accent-dim:rgba(33,224,124,.14);
  --accent2:#ff4d94; --accent2-dim:rgba(255,77,148,.14);
  --shadow:0 18px 50px -20px rgba(0,0,0,.75);
  --nav-h:clamp(56px,2.4vw + 26px,78px);
  --r:clamp(12px,1.1vw,20px);
  --maxw:clamp(1180px,86vw,1680px);
  --fs-mini:clamp(10px,.68vw,11.5px);
  --fs-xs:clamp(11.5px,.76vw,13px);
  --fs-sm:clamp(12.5px,.84vw,14px);
  --fs-md:clamp(13.5px,.92vw,15.5px);
  --fs-lg:clamp(14.5px,1.02vw,17px);
}
html[data-theme="light"]{
  --bg:#f4f7fa; --bg2:#ffffff; --card:#ffffff; --card2:#f0f4f9;
  --text:#101722; --muted:#5d6a7c; --line:rgba(16,24,40,.10);
  --accent:#0aa866; --accent-dim:rgba(10,168,102,.10);
  --accent2:#d92e77; --accent2-dim:rgba(217,46,119,.10);
  --shadow:0 18px 44px -24px rgba(16,30,60,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  background:var(--bg);color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:var(--fs-md);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent);color:#04120b}

.wrap{width:min(var(--maxw),94vw);margin:0 auto}
section{padding:clamp(52px,7.6vw,116px) 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:clamp(6px,.55vw,10px);font-size:clamp(10.5px,.72vw,12.5px);letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:clamp(10px,1.1vw,16px);
}
.eyebrow::before{content:"";width:clamp(16px,1.6vw,26px);height:2px;background:var(--accent);border-radius:2px}
h2.title{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:.02em;line-height:1.25}
.sub{color:var(--muted);margin-top:clamp(10px,1.2vw,14px);max-width:clamp(320px,48vw,700px);font-size:var(--fs-lg)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============ nav ============ */
header{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.scrolled{border-bottom-color:var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,1.6vw,26px)}
.brand{display:flex;align-items:center;gap:clamp(8px,.7vw,13px);font-weight:800;font-size:clamp(15px,1.05vw,18px);letter-spacing:.06em}
.brand .mark{
  width:clamp(28px,2.1vw,38px);height:clamp(28px,2.1vw,38px);border-radius:clamp(8px,.6vw,10px);display:grid;place-items:center;
  object-fit:contain;
}
.brand small{display:block;font-size:clamp(9px,.6vw,10.5px);font-weight:500;letter-spacing:.22em;color:var(--muted)}
.navlinks{display:flex;align-items:center;gap:clamp(2px,.3vw,6px)}
.navlinks a{
  padding:clamp(7px,.6vw,10px) clamp(10px,.85vw,15px);border-radius:clamp(8px,.7vw,11px);font-size:clamp(12.5px,.85vw,14.5px);color:var(--muted);
  transition:color .2s,background .2s;white-space:nowrap;
}
.navlinks a:hover{color:var(--text);background:var(--accent-dim)}
.navlinks a.on{color:var(--text);background:var(--accent-dim)}
.navright{display:flex;align-items:center;gap:clamp(6px,.7vw,12px)}
.iconbtn{
  width:clamp(32px,2.3vw,40px);height:clamp(32px,2.3vw,40px);border-radius:clamp(9px,.75vw,12px);border:1px solid var(--line);
  display:grid;place-items:center;background:var(--card);transition:.2s;
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.burger{display:none}
.sheet{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;background:var(--bg2);
  border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:10px 4vw 18px;
}
.sheet.open{display:flex}
.sheet a{padding:clamp(11px,1.3vh,15px) clamp(6px,1vw,12px);border-bottom:1px solid var(--line);font-size:clamp(14px,1vw,16px)}
.sheet a:last-child{border-bottom:none}

/* ============ hero ============ */
.hero{min-height:clamp(460px,100svh,1120px);display:grid;position:relative;overflow:hidden;padding:0}
.slides{position:absolute;inset:0}
.slides .slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  background-size:cover;background-position:center;
  transform:scale(1.06);transition:opacity 1.1s ease,transform 7s linear;
}
.slides .slide.on{opacity:1;transform:scale(1)}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,12,.72) 0%,rgba(5,8,12,.25) 42%,var(--bg) 100%);
}
.hero .wrap{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(10px,1.9vh,20px);
  padding-top:var(--nav-h);padding-bottom:clamp(72px,13vh,130px);
}
.hero .kick{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:clamp(6px,.45vw,9px) clamp(12px,1.05vw,18px);border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  color:#fff;font-size:clamp(11.5px,.78vw,13px);letter-spacing:.2em;
}   
.hero .kick i{width:clamp(6px,.45vw,8px);height:clamp(6px,.45vw,8px);border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.hero h1{
  color:#fff;font-size:clamp(32px,min(7.2vw,9.4vh),82px);line-height:1.06;font-weight:900;letter-spacing:.01em;
  text-shadow:0 12px 44px rgba(0,0,0,.5);max-width:14em;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:#c6d2e2;max-width:clamp(20em,42vw,40em);font-size:clamp(13.5px,min(1.5vw,2.5vh),17px)}
.hero .cta{display:flex;gap:clamp(9px,.8vw,14px);flex-wrap:wrap;margin-top:clamp(4px,.8vh,10px)}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:clamp(10px,.8vw,14px) clamp(17px,1.7vw,28px);border-radius:clamp(10px,.85vw,13px);
  font-size:clamp(13.5px,.92vw,15.5px);font-weight:600;transition:.22s;border:1px solid transparent;
}
.btn.pri{background:var(--accent);color:#04120b}
.btn.pri:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 30px -10px var(--accent)}
.btn.ghost{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn.ghost:hover{border-color:#fff;transform:translateY(-2px)}
.dots{position:absolute;bottom:clamp(18px,3.6vh,38px);left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:clamp(6px,.6vw,10px)}
.dots button{width:clamp(20px,1.6vw,28px);height:clamp(3px,.28vw,5px);border-radius:4px;background:rgba(255,255,255,.32);transition:.3s}
.dots button.on{background:var(--accent);width:clamp(32px,2.6vw,44px)}
.scrollcue{
  position:absolute;bottom:clamp(18px,3.4vh,34px);right:4vw;z-index:3;color:#9fb0c4;font-size:clamp(10px,.7vw,11.5px);
  letter-spacing:.3em;writing-mode:vertical-rl;display:flex;align-items:center;gap:8px;
}
.scrollcue::after{content:"";width:1px;height:clamp(28px,5vh,48px);background:linear-gradient(#fff0,rgba(255,255,255,.6));animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:.2;transform:translateY(-6px)}50%{opacity:1}100%{opacity:.2;transform:translateY(6px)}}

/* ============ about ============ */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(clamp(240px,22vw,420px),.85fr);gap:clamp(24px,4.4vw,64px);align-items:start}
.about-txt p{color:var(--muted);font-size:var(--fs-lg);margin-bottom:clamp(12px,1.5vh,20px);text-align:justify}
.about-txt p strong{color:var(--text);font-weight:600}
.ste-letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(96px,9vw,150px),1fr));gap:clamp(8px,.9vw,14px);margin:clamp(18px,2.4vw,30px) 0 4px}
.ste-letters div{
  background:var(--card);border:1px solid var(--line);border-radius:clamp(11px,1vw,15px);padding:clamp(12px,1.2vw,18px) clamp(11px,1vw,16px);
  transition:.25s;
}
.ste-letters div:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.ste-letters b{display:block;font-size:clamp(20px,1.9vw,27px);color:var(--accent);font-weight:900;line-height:1.2}
.ste-letters span{display:block;font-size:clamp(10.5px,.7vw,12px);letter-spacing:.12em;color:var(--muted);margin-top:2px;text-transform:uppercase}
.ste-letters em{display:block;font-style:normal;font-size:clamp(13px,.9vw,15px);color:var(--text);margin-top:clamp(6px,.6vw,9px);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(130px,12vw,220px),1fr));gap:clamp(10px,1.1vw,16px)}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.9vw,26px) clamp(16px,1.8vw,26px);position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85}
.stat:nth-child(2)::after,.stat:nth-child(3)::after{background:var(--accent2)}
.stat b{display:block;font-size:clamp(26px,3.2vw,36px);font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums}
.stat b i{font-style:normal;font-size:.5em;font-weight:700;color:var(--muted);margin-left:3px}
.stat span{display:block;color:var(--muted);font-size:clamp(12px,.8vw,13.5px);margin-top:6px;letter-spacing:.06em}
.mv{margin-top:clamp(34px,5vw,60px);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2.4vw,40px);display:grid;place-items:center}
.mv img{width:100%;max-width:min(1040px,100%)}

/* ============ STE ============ */
#ste{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ste-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(clamp(260px,23vw,440px),.95fr);gap:clamp(22px,4.4vw,58px);align-items:start;margin-top:clamp(24px,3.4vw,42px)}
.ste-left{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px);min-width:0}
.video-shell{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:#000;box-shadow:var(--shadow);
}
.video-shell video{width:100%;height:100%;object-fit:cover;display:block}
.ste-desc p{color:var(--muted);font-size:clamp(13px,1.02vw,15.8px);text-align:justify}
.honors{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(180px,14.5vw,240px),1fr));gap:clamp(8px,.9vw,12px)}
.honor-item{
  display:flex;align-items:center;gap:clamp(9px,.8vw,13px);background:var(--card);border:1px solid var(--line);
  border-radius:clamp(10px,.9vw,14px);padding:clamp(10px,1vw,15px) clamp(12px,1.1vw,17px);transition:.22s;
}
.honor-item:hover{border-color:var(--accent);transform:translateY(-3px)}
.honor-item .ico{
  flex:0 0 clamp(28px,2.2vw,38px);height:clamp(28px,2.2vw,38px);border-radius:clamp(7px,.6vw,10px);display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);font-size:clamp(12px,.85vw,15px);font-weight:800;
}
.honor-item span{font-size:clamp(12.5px,.85vw,14.5px);line-height:1.5}
.honor-item.intl .ico{background:var(--accent2-dim);color:var(--accent2)}

/* honor wall */
.wall{margin-top:clamp(40px,5.2vw,72px)}
.years{display:flex;gap:clamp(7px,.7vw,12px);flex-wrap:wrap;margin-bottom:clamp(14px,1.8vw,22px)}
.years button{
  padding:clamp(8px,.75vw,12px) clamp(15px,1.5vw,24px);border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:clamp(13px,.86vw,15px);font-weight:600;color:var(--muted);transition:.2s;
}
.years button:hover{color:var(--text)}
.years button.on{background:var(--accent);border-color:var(--accent);color:#04120b}
.wall-pic{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;padding:clamp(10px,2vw,26px);
}
.wall-pic img{width:100%;max-width:960px;transition:opacity .3s}
.wall-pic img.fade{opacity:0}

/* players */
.players{margin-top:clamp(44px,5.5vw,76px)}
.player-stage{
  position:relative;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(60% 70% at 78% 12%,rgba(33,224,124,.13),transparent 60%),
    radial-gradient(55% 65% at 12% 90%,rgba(255,77,148,.11),transparent 60%),
    #0b0f15;
  min-height:clamp(280px,44vh,540px);display:grid;place-items:center;padding:clamp(16px,3.4vw,48px);
}
html[data-theme="light"] .player-stage{background:
    radial-gradient(60% 70% at 78% 12%,rgba(10,168,102,.10),transparent 60%),
    radial-gradient(55% 65% at 12% 90%,rgba(217,46,119,.08),transparent 60%),#0e141c}
.player-stage img{max-height:clamp(200px,min(58vh,40vw),520px);width:auto;max-width:100%;transition:opacity .35s}
.player-stage img.fade{opacity:0}
.pname{
  position:absolute;left:clamp(16px,3vw,34px);bottom:clamp(14px,3vw,28px);
  font-size:clamp(20px,3.4vw,36px);font-weight:900;letter-spacing:.06em;
}
.pname small{display:block;font-size:clamp(9.5px,.65vw,11.5px);letter-spacing:.3em;color:var(--accent);font-weight:700;margin-bottom:4px}
.avatars{display:flex;gap:clamp(8px,.9vw,14px);flex-wrap:wrap;margin-top:clamp(16px,2.2vw,26px);justify-content:center}
.avatars button{
  border-radius:clamp(10px,.9vw,15px);padding:clamp(4px,.4vw,6px);border:1px solid var(--line);background:var(--card);
  transition:.22s;line-height:0;position:relative;
}
.avatars button img{width:clamp(44px,4.2vw,68px);height:clamp(44px,4.2vw,68px);border-radius:clamp(8px,.7vw,11px)}
.avatars button:hover{transform:translateY(-3px);border-color:var(--accent)}
.avatars button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
.avatars button span{
  position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
  font-size:clamp(10px,.7vw,12px);color:var(--muted);white-space:nowrap;opacity:0;transition:.2s;
}
.avatars button.on span,.avatars button:hover span{opacity:1;color:var(--text)}

/* ============ biz cards (WUCG / BUGE) ============ */
.biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(280px,26vw,520px),1fr));gap:clamp(16px,2.6vw,30px);margin-top:clamp(26px,3.2vw,46px);align-items:stretch}
.bizcard{
  position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  overflow:hidden;display:flex;flex-direction:column;transition:.28s;box-shadow:var(--shadow);
}
.bizcard:hover{transform:translateY(-6px);border-color:var(--accent)}
.bizcard .art{position:relative;aspect-ratio:16/8.4;overflow:hidden;background:#0c1016;display:grid;place-items:center}
.bizcard .art img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bizcard:hover .art img{transform:scale(1.05)}
/* portrait：盒子高度不变；图片绝对铺满后 contain 缩小，整图塞进盒子 */
.bizcard .art.portrait img{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:clamp(8px,1vw,14px);
  object-fit:contain!important;
  object-position:center;
}
.bizcard:hover .art.portrait img{transform:none}
.buge-art{
  background:
    radial-gradient(520px 240px at 76% 22%,rgba(33,224,124,.28),transparent 65%),
    radial-gradient(420px 260px at 14% 88%,rgba(255,77,148,.22),transparent 65%),
    linear-gradient(140deg,#0e1a14,#0a0f16 62%);
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.buge-glow{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.022) 5px 6px)}
.bizcard .art img.buge-logo{width:clamp(52px,5.4vw,86px);height:clamp(52px,5.4vw,86px);border-radius:clamp(12px,1.2vw,18px);position:static;
  filter:drop-shadow(0 10px 26px rgba(33,224,124,.35));object-fit:contain}
.buge-word{position:relative;color:#eaf6ef;font-weight:900;font-size:clamp(24px,3vw,34px);
  letter-spacing:.08em;display:flex;flex-direction:column;line-height:1.2}
.buge-word small{font-size:clamp(9.5px,.66vw,11.5px);letter-spacing:.42em;color:var(--accent);font-weight:700;margin-top:4px}
.bizcard .art .badge{
  position:absolute;top:clamp(10px,1.1vw,16px);left:clamp(10px,1.1vw,16px);padding:clamp(4px,.35vw,6px) clamp(10px,.9vw,14px);border-radius:999px;
  background:rgba(4,10,8,.72);color:var(--accent);font-size:var(--fs-xs);letter-spacing:.18em;
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);
}
.bizcard .body{padding:clamp(18px,2.4vw,32px);display:flex;flex-direction:column;gap:clamp(8px,.8vw,12px);flex:1}
.bizcard h3{font-size:clamp(18px,2.2vw,25px);font-weight:800;display:flex;align-items:center;gap:clamp(7px,.7vw,11px)}
.bizcard h3 img{height:clamp(18px,1.6vw,24px);width:clamp(18px,1.6vw,24px);border-radius:5px;object-fit:cover}
.bizcard p{color:var(--muted);font-size:var(--fs-lg);flex:1}
.bizcard .go{
  display:inline-flex;align-items:center;gap:8px;font-size:clamp(13px,.9vw,15px);font-weight:600;color:var(--accent);margin-top:clamp(4px,.5vw,8px);
}
.bizcard .go svg{transition:transform .25s}
.bizcard:hover .go svg{transform:translateX(5px)}

/* ============ talent ============ */
#talent{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(12px,1.6vw,24px);flex-wrap:wrap}
.chips{display:flex;gap:clamp(7px,.7vw,11px);flex-wrap:wrap;margin-top:clamp(18px,2.2vw,28px)}
.chips button{
  padding:clamp(7px,.7vw,11px) clamp(14px,1.4vw,22px);border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:clamp(12.5px,.85vw,14px);color:var(--muted);transition:.2s;
}
.chips button:hover{color:var(--text)}
.chips button.on{background:var(--accent);border-color:var(--accent);color:#04120b;font-weight:600}
.tal-grid.empty{display:block}
.tal-empty{
  border:1px dashed var(--line);border-radius:var(--r);
  padding:clamp(26px,4vw,52px);margin-top:clamp(16px,2vw,24px);
  text-align:center;color:var(--muted);font-size:clamp(13px,1.05vw,15px);background:var(--card);
}
.tal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(148px,13.5vw,215px),1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(16px,2vw,24px)}
.tcard{
  position:relative;border-radius:clamp(11px,1vw,16px);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:9/14.6;background:var(--card);cursor:pointer;transition:.28s;
}
.tcard:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tcard:hover img{transform:scale(1.06)}
.tcard .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,10,.05) 34%,rgba(3,6,10,.88) 100%)}
.tcard .meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(11px,1.1vw,17px) clamp(11px,1.05vw,16px);color:#fff}
.tcard .meta b{display:block;font-size:clamp(12.5px,.9vw,15px);font-weight:700;line-height:1.4}
.tcard .meta span{font-size:clamp(10.5px,.72vw,12.5px);color:#a9b7c9}
.tcard .tag{
  position:absolute;top:clamp(8px,.85vw,13px);left:clamp(8px,.85vw,13px);padding:clamp(3px,.35vw,5px) clamp(8px,.8vw,12px);border-radius:999px;font-size:var(--fs-mini);
  background:rgba(4,10,8,.7);border:1px solid rgba(255,255,255,.16);color:#eaf3ec;backdrop-filter:blur(5px);
}
.tcard .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);
  width:clamp(40px,3.4vw,58px);height:clamp(40px,3.4vw,58px);border-radius:50%;display:grid;place-items:center;
  background:rgba(33,224,124,.92);color:#04120b;opacity:0;transition:.28s;
}
.tcard:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 触屏设备无 hover：播放按钮常显，提示可点 */
@media (hover:none){
  .tcard .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .tcard{cursor:pointer}
}
.tnote{color:var(--muted);font-size:clamp(12px,.82vw,13.5px);margin-top:clamp(14px,1.8vw,22px);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tnote code{background:var(--card);border:1px solid var(--line);padding:2px 8px;border-radius:6px;font-size:var(--fs-xs);color:var(--accent)}

/* ============ footer ============ */
footer{padding:clamp(28px,3.4vw,48px) 0 clamp(26px,3.2vw,44px);border-top:1px solid var(--line)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;color:var(--muted);font-size:clamp(12px,.8vw,13.5px)}
.foot a{color:var(--muted);transition:.2s}
.foot a:hover{color:var(--accent)}
.fbrand{display:flex;align-items:center;gap:clamp(8px,.7vw,11px);font-weight:700;color:var(--text);font-size:clamp(13px,.9vw,15px)}
.fbrand .mark{width:clamp(24px,1.9vw,34px);height:clamp(24px,1.9vw,34px);object-fit:contain}

/* ============ modal ============ */
.modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(3,6,10,.86);backdrop-filter:blur(8px);padding:clamp(12px,3.2vw,40px);
}
.modal.open{display:flex}
.modal video{
  width:auto;height:auto;max-width:min(94vw,clamp(360px,34vw,620px));max-height:86vh;
  border-radius:clamp(12px,1.2vw,18px);background:#000;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px #000;
}
.mclose{
  position:absolute;top:clamp(12px,2.4vh,26px);right:clamp(12px,2.4vw,28px);width:clamp(38px,2.9vw,46px);height:clamp(38px,2.9vw,46px);border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:clamp(16px,1.3vw,20px);display:grid;place-items:center;transition:.2s;
}
.mclose:hover{background:rgba(255,255,255,.2)}

/* ============ responsive ============ */
@media (max-width:1080px){
  .about-grid,.ste-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .navlinks{display:none}
  .burger{display:grid}
  .biz{grid-template-columns:1fr}
  /* 移动端加大触摸目标（≥44px） */
  .iconbtn{width:44px;height:44px}
  .chips button{padding:11px 22px}
  .years button{padding:11px 24px}
}
@media (max-width:430px){
  .brand small{display:none}
  .foot{flex-direction:column;align-items:flex-start}
  .scrollcue{display:none}
}
/* 矮窗口：给首屏留足高度，避免文字被裁切 */
@media (max-height:640px){
  .hero{min-height:clamp(500px,100svh,900px)}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
</style>
</head>
<body>


<header id="hd"> <meta name="keywords" content="keywords_temp" />

  <div class="wrap nav">
    <a class="brand" href="#top">
      <img class="mark" src="http://cdnsource.bugegaming.com/steclub/img/ste-logo.webp" alt="STE 628">
      <span>深圳STE电子竞技<small>SIX TWO EIGHT</small></span>
    </a>
    <nav class="navlinks" id="navlinks">
      <a href="#about">公司简介</a>
      <a href="#ste">深圳STE</a>
      <a href="#wucg">WUCG</a>
      <a href="#buge">不鸽电竞</a>
      <a href="#talent">才艺展示</a>
    </nav>
    <div class="navright">
      <button class="iconbtn" id="themeBtn" aria-label="切换深浅色" title="切换深浅色">
        <svg id="thIcon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
      </button>
      <button class="iconbtn burger" id="burger" aria-label="菜单">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>
    </div>
  </div>
</header>
<div class="sheet" id="sheet">
  <a href="#about">公司简介</a>
  <a href="#ste">深圳STE</a>
  <a href="#wucg">WUCG</a>
  <a href="#buge">不鸽电竞</a>
  <a href="#talent">才艺展示</a>
</div>


<section class="hero" id="top">
  <div class="slides" id="slides">
    <div class="slide on" style="background-image:url('http://cdnsource.bugegaming.com/steclub/img/topSliderA-v2.webp')"></div>
    <div class="slide" style="background-image:url('http://cdnsource.bugegaming.com/steclub/img/topSliderB.webp')"></div>
    <div class="slide" style="background-image:url('http://cdnsource.bugegaming.com/steclub/img/topSliderC.webp')"></div>
  </div>
  <div class="wrap">
    <span class="kick"><i></i>PEL 和平精英职业联赛 · 深圳STE</span>
    <h1>敢闯 敢干 创新<br>这里是 <em>深圳STE</em></h1>
    <p>SIX TWO EIGHT —— 2020年6月28日创立于深圳。PEL职业联赛黑马战队，立足深圳，奋斗中国，奔向全球。</p>
    <div class="cta">
      <a class="btn pri" href="#ste">了解深圳STE</a>
      <a class="btn ghost" href="#talent">才艺展示</a>
    </div>
  </div>
  <div class="dots" id="dots"></div>
  <div class="scrollcue">SCROLL</div>
</section>


<section id="about">
  <div class="wrap">
    <div class="rv">
      <span class="eyebrow">Company Profile</span>
      <h2 class="title">公司简介</h2>
    </div>
    <div class="about-grid" style="margin-top:clamp(22px,3vw,40px)">
      <div class="about-txt rv">
        <p>深圳市前海六二八文化传媒有限公司，是一家专业运营<strong>电子竞技赛事、职业电子竞技俱乐部、高校电子竞技社交平台、活动策划执行</strong>等的综合性文化传媒企业。旗下拥有"世界大学生电子竞技联赛 WUCG"、"和平精英职业战队 STE电子竞技俱乐部"、"海外职业战队 香港超级电子竞技人 HKSTE"三个业务板块。</p>
        <p>2020年6月28日，STE电子竞技俱乐部正式在深圳创建，STE全称：<strong>SIX TWO EIGHT（628）</strong>，隶属于深圳市前海六二八文化传媒有限公司。"STE"除了"628"这个具有特殊含义日期的释义，更蕴含着深层的精神内涵——</p>
        <div class="ste-letters">
          <div><b>S</b><span>Struggle</span><em>奋斗</em></div>
          <div><b>T</b><span>Time</span><em>时光</em></div>
          <div><b>E</b><span>Excellent</span><em>卓越</em></div>
        </div>
        <p>8月26日是深圳经济特区成立日，因此深圳STE更代表<strong>"敢闯、敢干、创新"的深圳精神</strong>，凭借着实干兴邦这股精神和势如破竹的深圳速度立足深圳，奋斗中国，奔向全球。</p>
      </div>
      <div class="stats rv">
        <div class="stat"><b data-count="520">0</b><i>万+</i><span>全网粉丝</span></div>
        <div class="stat"><b data-count="10">0</b><i>亿+</i><span>全网曝光</span></div>
        <div class="stat"><b data-count="1">0</b><i>次</i><span>夺冠次数</span></div>
        <div class="stat"><b data-count="100">0</b><i>人+</i><span>全职员工</span></div>
      </div>
    </div>
    <div class="mv rv">
      <img src="http://cdnsource.bugegaming.com/steclub/img/missionVisionPic.webp" alt="使命与愿景：让电竞触达世界每个角落。价值观：实事求是、专业立身、开放协作、始终创业。愿景：打造全球专业化电竞品牌，连接世界各地电竞爱好者，助力每一个电竞梦想。" loading="lazy">
    </div>
  </div>
</section>


<section id="ste">
  <div class="wrap">
    <div class="rv">
      <span class="eyebrow">STE Esport</span>
      <h2 class="title">深圳STE电子竞技俱乐部</h2>
    </div>

    <div class="ste-top rv">
      <div class="ste-left">
        <div class="ste-desc">
          <p>作为PEL和平精英职业联赛当中的黑马战队，深圳STE曾先后斩获2021 S4赛季总冠军、2021PEN S1赛季总冠军、PSC超级杯四排亚军、2020-2021微博杯蝉联总冠军、2022PEL夏季赛常规赛第五周周冠军、2023春季赛总决赛亚军、2024和平精英区域对抗赛总冠军、2025PEL夏季赛首周周冠军、2026PEL夏季赛第五周周冠军等荣誉。国际赛事中STE也斩下2023和平精英世界特邀赛亚军。</p>
        </div>
        <div class="video-shell">
          <video src="http://s.chinaesport.com/video/homePageVideo/17207662341361.mp4"
                 controls playsinline preload="metadata" poster="http://cdnsource.bugegaming.com/steclub/img/topSliderA.webp"></video>
        </div>
      </div>
      <div class="honors">
        <div class="honor-item"><span class="ico">1st</span><span>2021 PEL S4赛季总冠军</span></div>
        <div class="honor-item"><span class="ico">1st</span><span>2021 PEN S1赛季总冠军</span></div>
        <div class="honor-item"><span class="ico">W</span><span>2020-2021 微博杯蝉联总冠军</span></div>
        <div class="honor-item"><span class="ico">W</span><span>2022 PEL夏季赛常规赛第五周周冠军</span></div>
        <div class="honor-item"><span class="ico">2nd</span><span>PSC超级杯四排亚军</span></div>
        <div class="honor-item"><span class="ico">2nd</span><span>2023 春季赛总决赛亚军</span></div>
        <div class="honor-item intl"><span class="ico">INTL</span><span>2023 和平精英世界特邀赛亚军</span></div>
        <div class="honor-item"><span class="ico">1st</span><span>2024 和平精英区域对抗赛总冠军</span></div>
        <div class="honor-item"><span class="ico">1st</span><span>2025 PEL夏季赛首周周冠军</span></div>
        <div class="honor-item"><span class="ico">1st</span><span>2026 PEL夏季赛第五周周冠军</span></div>
      </div>
    </div>

    <div class="wall rv">
      <div class="years" id="years"></div>
      <div class="wall-pic"><img id="wallImg" src="http://cdnsource.bugegaming.com/steclub/img/szSte2026.webp" alt="深圳STE年度荣誉"></div>
    </div>

    <div class="players rv">
      <span class="eyebrow">Roster · 主队</span>
      <h2 class="title" style="font-size:clamp(19px,2.6vw,30px)">现役选手</h2>
      <div class="player-stage" style="margin-top:clamp(14px,2vw,26px)">
        <img id="playerImg" src="http://cdnsource.bugegaming.com/steclub/img/86.webp" alt="深圳STE选手86">
        <div class="pname" id="playerName"><small>STE ESPORT</small>86</div>
      </div>
      <div class="avatars" id="avatars"></div>
    </div>
  </div>
</section>


<section id="wucg">
  <div class="wrap">
    <div class="rv">
      <span class="eyebrow">Our Business</span>
      <h2 class="title">业务生态</h2>
      <p class="sub">高校电竞联赛 × 职业俱乐部 × 全民电竞平台，三条线互相导流、协同生长。</p>
    </div>
    <div class="biz">
      <article class="bizcard rv" id="wucgCard">
        <div class="art portrait"><img src="http://cdnsource.bugegaming.com/steclub/img/wucg628.webp" alt="WUCG 世界大学生电子竞技联赛"></div>
        <div class="body">
          <h3>世界大学生电子竞技联赛<span style="font-size:12px;color:var(--muted);letter-spacing:.18em;font-weight:600">WUCG</span></h3>
          <p>面向全球高校的电子竞技联赛，覆盖赛事运营、高校电竞社交与校园内容生态，是六二八旗下连接年轻电竞人群的核心业务板块。</p>
          <a class="go" href="http://xflt.cn/" target="_blank" rel="noopener">
            访问 WUCG 官网
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>

      <article class="bizcard rv" id="buge">
        <div class="art buge-art">
          <div class="buge-glow"></div>
          <img class="buge-logo" src="http://cdnsource.bugegaming.com/steclub/img/buge.ico" alt="不鸽电竞logo">
          <div class="buge-word">不鸽电竞<small>BUGE GAMING</small></div>
          <span class="badge">NEW</span>
        </div>
        <div class="body">
          <h3><img src="http://cdnsource.bugegaming.com/steclub/img/buge.ico" alt="">不鸽电竞</h3>
          <p>六二八旗下电竞平台，点击即可跳转不鸽电竞官方网站，获取最新赛事与内容动态。</p>
          <a class="go" href="http://bugegaming.com/home?from=index" target="_blank" rel="noopener">
            前往不鸽电竞
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </article>
    </div>
  </div>
</section>


<section id="talent">
  <div class="wrap">
    <div class="tal-head rv">
      <div>
        <span class="eyebrow">Talent Show</span>
        <h2 class="title">才艺展示</h2>
        <p class="sub">选手与主播的短视频才艺内容，点击卡片播放。</p>
      </div>
      <div class="chips" id="chips"></div>
    </div>
    <div class="tal-grid" id="talGrid"></div>
    
  </div>
</section>


<footer>
  <div class="wrap foot">
    <div class="fbrand"><img class="mark" src="http://cdnsource.bugegaming.com/steclub/img/ste-logo.webp" alt="628">深圳STE电子竞技</div>
    <div>
      <a href="http://beian.miit.gov.cn" target="_blank" rel="noopener">粤ICP备2023100762号</a>
      &nbsp;|&nbsp; 深圳市前海六二八文化传媒有限公司@版权所有
    </div>
  </div>
</footer>


<div class="modal" id="modal">
  <button class="mclose" id="mclose" aria-label="关闭">✕</button>
  <video id="modalVideo" controls playsinline></video>
</div>

<script>
/* =========================================================
   才艺展示数据 —— 在这里维护短视频内容
   src   : 视频地址（本地 mp4 路径或外链）
   cover : 封面图（建议 9:16 竖图）
   tag   : 分类（官方 / 才艺 / 高光 / 任意）
   ========================================================= */
/* 每条视频只需一个 tag（主分类），决定它出现在哪个筛选里：
   "官方" | "才艺" | "高光" | "日常" —— 带该 tag 的视频会自动出现在「全部」里，
   但不会串到其它分类（例：tag:"高光" 只在 全部 / 高光 出现，不进 官方）。 */
const TALENT_VIDEOS = [
  { title:"俱乐部宣传片",   author:"深圳STE官方", tag:"官方", src:"http://s.chinaesport.com/video/homePageVideo/17207662341361.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/topSliderA.webp" },
  { title:"2026PELSTE战队纪录片 #PEL夏决热血全记录 #2026PEL夏季赛总决赛 #2026PEL夏季赛 #青岛逐锋鼠定乾坤", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o01.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to01.webp" },
  { title:"STE幕后小剧场，猫king采访语无伦次 #2026PEL夏季赛 #和平精英 #2026pel #ste和平精英", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o02.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to02.webp" },
  { title:"Time is due 看清楚 我会出现在大荧幕 #2026PEL夏季赛#2026PEL夏季转会期#STE盛夏逐锋#群像#转场", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o03.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to03.webp" },
  { title:"哥几个套公式来的就是快！🤔 #抽象#整活#小游戏#PEL#STE", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o04.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to04.webp" },
  { title:"夏决拍摄小花絮来啦~ #vlog #花絮 #2026PEL夏季赛 #2026PEL夏季赛总决赛 #青岛逐锋鼠定乾坤", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o05.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to05.webp" },
  { title:"夏季赛定妆花絮来咯😊 #PEL2026夏季赛 #STE和平精英 #抽象 #花絮", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o06.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to06.webp" },
  { title:"季后赛幕后VLOG来啦，休息室调戏野猫的来 #2026PEL夏季赛 #vlog日常", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o07.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to07.webp" },
  { title:"幕后小花絮来啦，鼠妹在猛猛偷拍~ #2026PEL夏季赛 #pel职业联赛 #日常vlog", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o08.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to08.webp" },
  { title:"斩断昔日旧枷锁，今日方知我是我！ 当所有人都不看好我们的时候，偏偏我们最争气！#STE夏季赛第五周冠军 #2026PEL夏季赛 #pel职业联赛 #和平精英", author:"深圳STE官方", tag:"官方", src:"http://cdnsource.bugegaming.com/steclub/video/o09.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/to09.webp" },
  { title:"#嘉桐摇#多幸运#手势舞", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v01.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv01.webp" },
  { title:"ᶻz ₍^_ ̫ _^₎ #比昨天更想你 #nana摇 #手势舞 #转场 #理想型", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v02.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv02.webp" },
  { title:"两颗心在靠近(^⎚-⎚^)🖤🖤 #嘉桐摇 #多幸运 #冷脸萌 #手势舞 #黑框", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v03.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv03.webp" },
  { title:"你的队友就交给我 会处理 #手势舞 #冷脸萌 #男大 #高阶萌妹成长指南", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v04.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv04.webp" },
  { title:"师傅我坚持不住了👊🏻 #学功夫练武术 #kungfujumpstyle #手势舞 #学功夫练武术舞蹈挑战", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v05.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv05.webp" },
  { title:"并不是每个男孩都想变得很可爱～ #奇不奇怪 #手势舞 #笑容杀 #少年感 #黑框眼镜", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v06.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv06.webp" },
  { title:"收到需要赶快回复的信息 你说我要不要回应你～ #东西 #手势舞 #甜甜的手势舞 #少年感", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v07.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv07.webp" },
  { title:"是不是嘛… #理想型 #是不是嘛对不对嘛 #泡泡 #手势舞 #冷脸萌", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v08.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv08.webp" },
  { title:"表白 #理想型 #男大 #手势舞 #小咪子摇 #好想跟你表白手势舞", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v09.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv09.webp" },
  { title:"逼我们视线交错", tag:"才艺", src:"http://cdnsource.bugegaming.com/steclub/video/v10.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tv10.webp" },
  { title:"大王画的不差，不差~真不是故意画花卷的……#2026PEL夏季赛 #深圳ste #搞笑", author:"深圳STE官方", tag:"日常", src:"http://cdnsource.bugegaming.com/steclub/video/d01.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/td01.webp" },
  { title:"枫栩被奇袭！休息室小花絮！ #2026PEL夏季赛 #日常vlog #搞笑 #和平精英", author:"深圳STE官方", tag:"日常", src:"http://cdnsource.bugegaming.com/steclub/video/d02.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/td02.webp" },
  { title:"猫哥还是太有素质了~ #2026PEL夏季赛 #2026PEL夏季赛总决赛 #2026PEL夏决今日开赛#青岛逐锋鼠定乾坤", author:"深圳STE官方", tag:"日常", src:"http://cdnsource.bugegaming.com/steclub/video/d03.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/td03.webp" },
  { title:"猫式英语你怕不怕~ #2026PEL夏季赛 #pel职业联赛 #和平精英 #搞笑", author:"深圳STE官方", tag:"日常", src:"http://cdnsource.bugegaming.com/steclub/video/d04.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/td04.webp" },
  { title:"你也为我着迷吗 #野猫 #2026PEL春季赛 #抽象 #腹肌男", author:"深圳STE官方", tag:"日常", src:"http://cdnsource.bugegaming.com/steclub/video/d05.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/td05.webp" },
  { title:"古有诸葛亮七擒孟获，今有野猫四顾白小纯", author:"深圳STE官方", tag:"高光", src:"http://cdnsource.bugegaming.com/steclub/video/g01.mp4", cover:"http://cdnsource.bugegaming.com/steclub/img/covers/tg01.webp" },
];

/* ---------- 选手 ---------- */
const PLAYERS = [
  { name:"86",     img:"http://cdnsource.bugegaming.com/steclub/img/86.webp",          avatar:"http://cdnsource.bugegaming.com/steclub/img/avatar-86.webp" },
  { name:"野猫",   img:"http://cdnsource.bugegaming.com/steclub/img/player-yemao.webp?v=3",  avatar:"http://cdnsource.bugegaming.com/steclub/img/avatar-yemao.webp" },
  { name:"自然灿", img:"http://cdnsource.bugegaming.com/steclub/img/player-zircan.webp", avatar:"http://cdnsource.bugegaming.com/steclub/img/avatar-zircan.webp" },
  { name:"芷田",   img:"http://cdnsource.bugegaming.com/steclub/img/player-zhitian.webp?v=3",avatar:"http://cdnsource.bugegaming.com/steclub/img/avatar-zhitian.webp" },
];

/* ---------- 荣誉墙 ---------- */
const HONOR_WALL = [
  { year:"2026", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2026.webp" },
  { year:"2025", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2025.webp" },
  { year:"2024", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2024.webp" },
  { year:"2023", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2023.webp" },
  { year:"2022", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2022.webp" },
  { year:"2021", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2021.webp" },
  { year:"2020", img:"http://cdnsource.bugegaming.com/steclub/img/szSte2020.webp" },
];

/* ============ theme ============ */
const root = document.documentElement;
const saved = localStorage.getItem("628-theme");
if (saved) root.dataset.theme = saved;
const sunIcon  = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>';
const moonIcon = '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>';
function paintTheme(){
  const dark = root.dataset.theme === "dark";
  document.getElementById("thIcon").innerHTML = dark ? sunIcon : moonIcon;
}
paintTheme();
document.getElementById("themeBtn").onclick = () => {
  root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
  localStorage.setItem("628-theme", root.dataset.theme);
  paintTheme();
};

/* ============ nav ============ */
const hd = document.getElementById("hd");
addEventListener("scroll", () => hd.classList.toggle("scrolled", scrollY > 20), {passive:true});
const sheet = document.getElementById("sheet");
document.getElementById("burger").onclick = () => sheet.classList.toggle("open");
sheet.querySelectorAll("a").forEach(a => a.onclick = () => sheet.classList.remove("open"));
const links = [...document.querySelectorAll("#navlinks a")];
const secs = links.map(a => document.querySelector(a.getAttribute("href")));
addEventListener("scroll", () => {
  let i = secs.length - 1;
  while (i > 0 && secs[i].getBoundingClientRect().top > 140) i--;
  links.forEach((a, k) => a.classList.toggle("on", k === i));
}, {passive:true});

/* ============ hero slider ============ */
const slides = [...document.querySelectorAll(".slide")];
const dots = document.getElementById("dots");
let cur = 0, timer;
slides.forEach((_, i) => {
  const b = document.createElement("button");
  b.onclick = () => go(i);
  dots.appendChild(b);
});
function go(i){
  slides[cur].classList.remove("on"); dots.children[cur].classList.remove("on");
  cur = i;
  slides[cur].classList.add("on"); dots.children[cur].classList.add("on");
  clearInterval(timer);
  timer = setInterval(() => go((cur + 1) % slides.length), 5200);
}
go(0);

/* ============ reveal ============ */
const io = new IntersectionObserver(es => es.forEach(e => {
  if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
}), { threshold: .12 });
document.querySelectorAll(".rv").forEach(el => io.observe(el));

/* ============ stat counter ============ */
const cio = new IntersectionObserver(es => es.forEach(e => {
  if (!e.isIntersecting) return;
  const el = e.target, end = +el.dataset.count, t0 = performance.now(), dur = 1300;
  const step = now => {
    const p = Math.min((now - t0) / dur, 1);
    el.textContent = Math.round(end * (1 - Math.pow(1 - p, 3)));
    if (p < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
  cio.unobserve(el);
}), { threshold: .5 });
document.querySelectorAll("[data-count]").forEach(el => cio.observe(el));

/* ============ honor wall ============ */
const yearsEl = document.getElementById("years");
const wallImg = document.getElementById("wallImg");
HONOR_WALL.forEach((h, i) => {
  const b = document.createElement("button");
  b.textContent = h.year;
  if (i === 0) b.classList.add("on");
  b.onclick = () => {
    yearsEl.querySelectorAll("button").forEach(x => x.classList.remove("on"));
    b.classList.add("on");
    wallImg.classList.add("fade");
    setTimeout(() => { wallImg.src = h.img; wallImg.alt = "深圳STE " + h.year + "年度荣誉"; wallImg.classList.remove("fade"); }, 180);
  };
  yearsEl.appendChild(b);
});

/* ============ players ============ */
const av = document.getElementById("avatars");
const pImg = document.getElementById("playerImg");
const pName = document.getElementById("playerName");
PLAYERS.forEach((p, i) => {
  const b = document.createElement("button");
  b.innerHTML = `<img src="${p.avatar}" alt="${p.name}"><span>${p.name}</span>`;
  if (i === 0) b.classList.add("on");
  b.onclick = () => {
    av.querySelectorAll("button").forEach(x => x.classList.remove("on"));
    b.classList.add("on");
    pImg.classList.add("fade");
    setTimeout(() => {
      pImg.src = p.img; pImg.alt = "深圳STE选手" + p.name;
      pName.innerHTML = `<small>STE ESPORT</small>${p.name}`;
      pImg.classList.remove("fade");
    }, 180);
  };
  av.appendChild(b);
});

/* ============ talent ============ */
const TAGS = ["全部", "官方", "才艺", "高光", "日常"];
const chips = document.getElementById("chips");
const grid = document.getElementById("talGrid");
let curTag = "全部";
TAGS.forEach(t => {
  const b = document.createElement("button");
  b.textContent = t;
  if (t === "全部") b.classList.add("on");
  b.onclick = () => {
    curTag = t;
    chips.querySelectorAll("button").forEach(x => x.classList.remove("on"));
    b.classList.add("on");
    renderTal();
  };
  chips.appendChild(b);
});
function renderTal(){
  grid.innerHTML = "";
  const list = TALENT_VIDEOS.filter(v => curTag === "全部" || (v.tags || [v.tag]).includes(curTag));
  if(!list.length){
    grid.classList.add("empty");
    grid.innerHTML = `<div class="tal-empty">「${curTag}」分类还没有视频，素材补充后会自动出现在这里</div>`;
    return;
  }
  grid.classList.remove("empty");
  list.forEach(v => {
    const d = document.createElement("div");
    d.className = "tcard";
    d.innerHTML = `
      <img src="${v.cover}" alt="${v.title}" loading="lazy">
      <div class="shade"></div>
      <span class="tag">${v.tag}</span>
      <span class="play"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
      <div class="meta"><b>${v.title}</b>${v.author ? `<span>${v.author}</span>` : ""}</div>`;
    d.onclick = () => openModal(v);
    grid.appendChild(d);
  });
}
renderTal();

/* ============ modal ============ */
const modal = document.getElementById("modal");
const mVideo = document.getElementById("modalVideo");
function openModal(v){
  mVideo.src = v.src;
  modal.classList.add("open");
  document.body.style.overflow = "hidden";
  mVideo.play().catch(()=>{});
}
function closeModal(){
  mVideo.pause(); mVideo.src = "";
  modal.classList.remove("open");
  document.body.style.overflow = "";
}
document.getElementById("mclose").onclick = closeModal;
modal.onclick = e => { if (e.target === modal) closeModal(); };
addEventListener("keydown", e => { if (e.key === "Escape") closeModal(); });
</script>
</body>
</html>
