/* ============================================================
   悟空体育主站 · 共享样式 /assets/site.css
   赛博竞技场：暗夜黑 × 电竞紫 × 荧光绿 × 闪电黄 × 悟空金橙
   ============================================================ */

/* ── 0. Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
:where(h1,h2,h3,h4){line-height:1.15;letter-spacing:-.01em}

/* ── 1. 变量 ──────────────────────────────────────────────── */
:root{
  --wk-night:#0A0A12;
  --wk-purple:#6C3BFF;
  --wk-deep:#1B1035;
  --wk-green:#39FF88;
  --wk-yellow:#FFE93B;
  --wk-orange:#FF8A1F;
  --wk-mist:#F4F5FF;
  --wk-steel:#7A7F9A;
  --wk-card:#141422;
  --wk-gradient:#2E1A5E;

  --wk-font-body:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wk-font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono",monospace;

  --wk-gutter:clamp(1rem,4vw,2.5rem);
  --wk-radius:18px;
  --wk-radius-sm:12px;
  --wk-line:rgba(122,127,154,.24);
  --wk-line-strong:rgba(122,127,154,.42);
  --wk-ease:cubic-bezier(.22,.9,.24,1);
  --wk-shadow:0 14px 40px rgba(4,4,12,.55);
}

/* ── 2. 基础排版 ──────────────────────────────────────────── */
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(108,59,255,.30), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(57,255,136,.10), transparent 58%),
    var(--wk-night);
  color:var(--wk-mist);
  font-family:var(--wk-font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:768px){body{font-size:17px}}
@media (min-width:1100px){body{font-size:18px}}
@media (max-width:640px){:root{--wk-gutter:1.1rem}}

::selection{background:var(--wk-purple);color:#fff}
:focus-visible{outline:2px solid var(--wk-green);outline-offset:3px;border-radius:8px}

.wk-mono,.wk-eyebrow,.wk-footer__title,.wk-quickrail__label,.wk-contact__key,.wk-footer__base,.wk-nav__link,.wk-navtoggle,.wk-breadcrumb,.wk-filter__btn,.wk-chip{
  font-family:var(--wk-font-mono);
}
.wk-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wk-green);
}
.wk-eyebrow::before{content:"";width:1.6rem;height:1px;background:linear-gradient(90deg,var(--wk-green),transparent)}
.wk-lead{font-size:clamp(1rem,2.2vw,1.15rem);line-height:1.9;color:rgba(244,245,255,.78);max-width:58ch}
.wk-mono{font-weight:700;letter-spacing:.02em}

/* ── 3. 容器与网格 ────────────────────────────────────────── */
.wk-container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--wk-gutter)}
.wk-container--narrow{max-width:920px}
.wk-section{padding-block:clamp(2.4rem,6vw,5rem)}
.wk-grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.wk-grid--cards{grid-template-columns:1fr}
@media (min-width:620px){.wk-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.wk-grid--cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wk-divider{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--wk-line-strong),transparent);margin-block:clamp(1.6rem,4vw,3rem)}

/* ── 4. 组件：卡片 / 标签 / 统计 ──────────────────────────── */
.wk-card{
  position:relative;
  padding:clamp(1.1rem,2.6vw,1.6rem);
  border:1px solid var(--wk-line);
  border-radius:var(--wk-radius);
  background:linear-gradient(160deg,rgba(27,16,53,.85),rgba(20,20,34,.92));
  box-shadow:var(--wk-shadow);
  transition:transform .28s var(--wk-ease),border-color .28s,box-shadow .28s;
}
.wk-card:hover{transform:translateY(-3px);border-color:rgba(108,59,255,.6);box-shadow:0 20px 48px rgba(108,59,255,.26)}
.wk-card::before{
  content:"";position:absolute;top:0;left:1.2rem;right:1.2rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--wk-purple),var(--wk-green),transparent);
  opacity:.55;
}
.wk-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .7rem;border-radius:999px;
  border:1px solid var(--wk-line-strong);
  background:rgba(20,20,34,.72);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;color:rgba(244,245,255,.8);
}
.wk-tag{
  display:inline-block;padding:.2rem .6rem;border-radius:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:#101020;background:var(--wk-yellow);
}
.wk-stat{display:grid;gap:.15rem;padding:.9rem 1rem;border-radius:var(--wk-radius-sm);border:1px solid var(--wk-line);background:rgba(10,10,18,.6)}
.wk-stat__num{font-family:var(--wk-font-mono);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.05;color:var(--wk-green);letter-spacing:.02em}

/* ── 5. 组件：按钮 ────────────────────────────────────────── */
.wk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border-radius:999px;
  font-size:.92rem;font-weight:800;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--wk-ease),box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.wk-btn--primary{background:linear-gradient(100deg,var(--wk-purple),#3E1FA8 92%);color:#fff;box-shadow:0 12px 32px rgba(108,59,255,.42)}
.wk-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(108,59,255,.55)}
.wk-btn--accent{background:var(--wk-green);color:#04140C;box-shadow:0 12px 30px rgba(57,255,136,.28)}
.wk-btn--accent:hover{transform:translateY(-2px)}
.wk-btn--ghost{background:rgba(244,245,255,.04);border-color:var(--wk-line-strong);color:var(--wk-mist)}
.wk-btn--ghost:hover{border-color:var(--wk-green);color:var(--wk-green)}

/* ── 6. 组件：面包屑 ──────────────────────────────────────── */
.wk-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:var(--wk-steel);
}
.wk-breadcrumb a{color:rgba(244,245,255,.7);transition:color .2s}
.wk-breadcrumb a:hover{color:var(--wk-green)}
.wk-breadcrumb__sep{color:rgba(122,127,154,.55)}

/* ── 7. 组件：图片占位容器 ───────────────────────────────── */
.wk-media{
  position:relative;overflow:hidden;
  border-radius:var(--wk-radius);
  border:1px solid var(--wk-line);
  background:linear-gradient(135deg,rgba(46,26,94,.92),rgba(20,20,34,.96));
  box-shadow:var(--wk-shadow);
}
.wk-media>img{width:100%;height:100%;object-fit:cover}
.wk-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,18,0) 42%,rgba(10,10,18,.68));
}
.wk-media--wide{aspect-ratio:16/9}
.wk-media--square{aspect-ratio:1/1}
.wk-media--tall{aspect-ratio:4/5}

/* ── 8. 组件：筛选 ────────────────────────────────────────── */
.wk-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.wk-filter__btn{
  padding:.45rem .95rem;border-radius:999px;cursor:pointer;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--wk-line-strong);
  background:rgba(20,20,34,.68);color:rgba(244,245,255,.76);
  transition:border-color .22s,color .22s,background .22s,transform .22s;
}
.wk-filter__btn:hover{transform:translateY(-1px);border-color:var(--wk-green);color:var(--wk-green)}
.wk-filter__btn[aria-pressed="true"]{
  border-color:var(--wk-yellow);background:rgba(255,233,59,.14);color:var(--wk-yellow);
  box-shadow:0 0 0 1px rgba(255,233,59,.28);
}
.wk-filter__count{font-family:var(--wk-font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--wk-steel)}
[data-filter-item][hidden]{display:none !important}

/* ── 9. 组件：入场动效 ────────────────────────────────────── */
.wk-reveal,[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--wk-ease),transform .55s var(--wk-ease);
}
.wk-reveal.is-visible,[data-reveal].is-visible{opacity:1;transform:none}

/* ── 10. 跳转链接 ─────────────────────────────────────────── */
.wk-skip{
  position:fixed;top:.6rem;left:50%;z-index:120;
  transform:translate(-50%,-180%);
  padding:.7rem 1.3rem;border-radius:999px;
  background:var(--wk-green);color:#04140C;
  font-family:var(--wk-font-mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;
  transition:transform .25s var(--wk-ease);
}
.wk-skip:focus,.wk-skip:focus-visible{transform:translate(-50%,0)}

/* ── 11. 头部：悬浮胶囊浮岛 ───────────────────────────────── */
.wk-header{
  position:sticky;top:0;z-index:90;
  padding:.9rem var(--wk-gutter) .45rem;
  background:linear-gradient(180deg,rgba(10,10,18,.97) 0%,rgba(10,10,18,.86) 58%,rgba(10,10,18,0) 100%);
}
.wk-header__inner{
  max-width:1280px;margin-inline:auto;
  display:flex;align-items:center;gap:.7rem;
}
.wk-capsule{
  border:1px solid var(--wk-line);
  border-radius:999px;
  background:rgba(20,20,34,.72);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 12px 34px rgba(4,4,12,.55),inset 0 1px 0 rgba(244,245,255,.06);
}
.wk-capsule--brand{display:inline-flex;flex:0 0 auto}
.wk-capsule--nav{
  flex:1 1 auto;min-width:0;
  display:flex;justify-content:flex-end;
  padding:.3rem .4rem;
}
.wk-brand{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .7rem}
.wk-brand__mark{
  position:relative;flex:0 0 auto;width:1.7rem;height:1.7rem;border-radius:9px;
  background:linear-gradient(135deg,var(--wk-purple),var(--wk-gradient) 58%,var(--wk-green));
  box-shadow:0 0 0 1px rgba(244,245,255,.16),0 0 18px rgba(108,59,255,.55);
}
.wk-brand__mark::after{
  content:"";position:absolute;inset:36%;border-radius:3px;
  background:var(--wk-yellow);box-shadow:0 0 10px rgba(255,233,59,.85);
}
.wk-brand__text{
  font-size:1.05rem;font-weight:900;letter-spacing:.02em;
  transform:skewX(-5deg);
}
.wk-brand__badge{
  padding:.16rem .5rem;border-radius:999px;
  font-family:var(--wk-font-mono);font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1B1035;background:linear-gradient(90deg,var(--wk-yellow),var(--wk-orange));
}
.wk-nav{display:flex;align-items:center;gap:.12rem;overflow-x:auto;scrollbar-width:none}
.wk-nav::-webkit-scrollbar{display:none}
.wk-nav__link{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.5rem .8rem;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:rgba(244,245,255,.74);
  transition:color .2s,background .25s;
}
.wk-nav__link::before{
  content:"";width:.34rem;height:.34rem;border-radius:50%;
  background:currentColor;opacity:.32;transition:opacity .2s,box-shadow .2s;
}
.wk-nav__link:hover{color:var(--wk-mist);background:rgba(108,59,255,.22)}
.wk-nav__link[aria-current="page"]{
  color:var(--wk-green);background:rgba(57,255,136,.12);
  box-shadow:inset 0 0 0 1px rgba(57,255,136,.34);
}
.wk-nav__link[aria-current="page"]::before{opacity:1;background:var(--wk-green);box-shadow:0 0 10px var(--wk-green)}
.wk-navtoggle{
  display:none;align-items:center;gap:.55rem;cursor:pointer;
  padding:.6rem 1rem;border-radius:999px;
  border:1px solid rgba(255,233,59,.4);
  background:rgba(255,233,59,.1);color:var(--wk-yellow);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;
  transition:background .25s,border-color .25s,color .25s;
}
.wk-navtoggle:hover{background:rgba(255,233,59,.2)}
.wk-navtoggle__bars{position:relative;display:block;width:1.05rem;height:.68rem}
.wk-navtoggle__bars::before,
.wk-navtoggle__bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .25s var(--wk-ease);
}
.wk-navtoggle__bars::before{top:0}
.wk-navtoggle__bars::after{bottom:0}
.wk-header[data-open] .wk-navtoggle__bars::before{transform:translateY(.33rem) rotate(45deg)}
.wk-header[data-open] .wk-navtoggle__bars::after{transform:translateY(-.33rem) rotate(-45deg)}

/* 导航第二栏：快捷入口 */
.wk-quickrail{
  max-width:1280px;margin:.5rem auto 0;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.wk-quickrail__label{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wk-steel);
}
.wk-quick{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .82rem;border-radius:999px;
  border:1px solid var(--wk-line-strong);
  background:rgba(27,16,53,.72);
  font-size:.78rem;font-weight:600;color:rgba(244,245,255,.88);
  transition:border-color .22s,color .22s,background .22s,transform .22s;
}
.wk-quick::after{content:"↗";font-family:var(--wk-font-mono);font-size:.85em;color:var(--wk-green)}
.wk-quick:hover{transform:translateY(-1px);border-color:var(--wk-green);color:var(--wk-green)}
.wk-quick--accent{border-color:rgba(255,138,31,.55);color:var(--wk-mist)}
.wk-quick--accent::after{color:var(--wk-orange)}

/* 滚动进度 */
.wk-progress{
  max-width:1280px;margin:.6rem auto 0;height:2px;border-radius:2px;
  background:rgba(122,127,154,.18);overflow:hidden;
}
.wk-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--wk-purple),var(--wk-green) 68%,var(--wk-yellow));
  box-shadow:0 0 12px rgba(57,255,136,.6);
  transition:width .12s linear;
}

/* ── 12. 头部：移动与平板 ─────────────────────────────────── */
@media (max-width:960px){
  .wk-header{padding:.75rem var(--wk-gutter) .4rem}
  .wk-header__inner{flex-wrap:nowrap;gap:.5rem}
  .wk-capsule--brand{flex:1 1 auto;min-width:0}
  .wk-capsule--brand .wk-brand{padding:.45rem .8rem .45rem .6rem}
  .wk-navtoggle{display:inline-flex;flex:0 0 auto}
  .wk-capsule--nav{
    position:absolute;left:var(--wk-gutter);right:var(--wk-gutter);
    top:calc(100% - .1rem);
    display:block;padding:.6rem;
    border-radius:24px;
    border-color:rgba(108,59,255,.4);
    background:rgba(11,11,22,.97);
    box-shadow:0 26px 64px rgba(0,0,0,.65);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-.7rem) scale(.98);
    transition:opacity .28s var(--wk-ease),transform .28s var(--wk-ease),visibility .28s;
    max-height:min(72vh,32rem);overflow-y:auto;
  }
  .wk-header[data-open] .wk-capsule--nav{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .wk-nav{flex-direction:column;align-items:stretch;gap:.15rem;overflow:visible}
  .wk-nav__link{
    width:100%;justify-content:flex-start;
    padding:.72rem .9rem;border-radius:14px;font-size:.85rem;
  }
  .wk-nav__link[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(57,255,136,.4)}
  .wk-quickrail{margin-top:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
  .wk-quickrail::-webkit-scrollbar{display:none}
  .wk-quick{flex:0 0 auto}
}
@media (max-width:520px){
  .wk-brand__badge{display:none}
  .wk-brand__text{font-size:.98rem}
  .wk-quickrail__label{display:none}
}

/* ── 13. 页脚 ─────────────────────────────────────────────── */
.wk-footer{
  position:relative;overflow:hidden;
  margin-top:clamp(3.6rem,9vw,7rem);
  padding:clamp(2.6rem,6vw,4.5rem) var(--wk-gutter) 1.6rem;
  border-top:1px solid var(--wk-line);
  background:
    radial-gradient(760px 340px at 8% 0%, rgba(108,59,255,.32), transparent 68%),
    linear-gradient(180deg,rgba(27,16,53,.92),rgba(10,10,18,.99));
}
.wk-footer__glow{
  position:absolute;left:38%;right:-14%;bottom:-70%;height:340px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(57,255,136,.18),transparent 72%);
  filter:blur(8px);
}
.wk-footer__inner{
  position:relative;max-width:1280px;margin-inline:auto;
  display:grid;gap:2.2rem;grid-template-columns:1fr;
}
@media (min-width:760px){.wk-footer__inner{grid-template-columns:1.5fr 1fr 1.4fr;gap:2.6rem}}
.wk-footer__brand .wk-brand--footer{padding:0}
.wk-brand--footer .wk-brand__text{font-size:1.15rem}
.wk-footer__tagline{margin-top:1rem;font-size:1.1rem;font-weight:800;letter-spacing:.01em}
.wk-footer__note{margin-top:.5rem;max-width:34ch;font-size:.9rem;line-height:1.8;color:var(--wk-steel)}
.wk-footer__col{min-width:0}
.wk-footer__title{
  margin-bottom:.9rem;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wk-yellow);
}
.wk-footer__list{display:grid;gap:.55rem}
.wk-footer__link{
  display:inline-block;padding-bottom:2px;
  font-size:.95rem;color:rgba(244,245,255,.8);
  border-bottom:1px solid transparent;
  transition:color .22s,border-color .22s;
}
.wk-footer__link:hover{color:var(--wk-green);border-color:var(--wk-green)}
.wk-contact{display:grid;gap:.85rem}
.wk-contact__item{display:grid;gap:.15rem}
.wk-contact__key{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--wk-steel)}
.wk-contact__val{font-size:.92rem;color:rgba(244,245,255,.86);word-break:break-word}
.wk-footer__base{
  position:relative;max-width:1280px;margin:2.4rem auto 0;padding-top:1.2rem;
  border-top:1px solid var(--wk-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--wk-steel);
}
.wk-footer__icp{color:rgba(122,127,154,.9)}
.wk-footer__copy{color:rgba(122,127,154,.9)}

/* ── 14. 动效降级 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .wk-reveal,[data-reveal]{opacity:1 !important;transform:none !important}
  .wk-progress__bar{transition:none !important}
  .wk-card:hover,.wk-btn:hover,.wk-quick:hover{transform:none !important}
}