/* ==========================================================================
   雷火电竞看台 · 共享样式表 /assets/site.css
   电光紫底 · 熔岩橙（结果类数字）与荧光青（过程类数据）双语义高亮
   粗边框 · 硬阴影 · 0 圆角 · 闪电折线分区边缘
   ========================================================================== */

/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,pre{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0}
[id]{scroll-margin-top:118px}

/* ---------- 2. 设计令牌 ---------- */
:root{
  --purple-900:#180A2E;
  --purple-700:#2E1263;
  --purple-500:#6E2BFF;
  --orange-500:#FF6A1A;
  --orange-700:#B84A0C;
  --cyan-400:#22E0D2;
  --ink-950:#0B0B10;
  --paper-050:#F6F4FB;
  --ink-900:#171325;
  --fog-500:#9A95AE;

  --font-display:'Arial Black','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,'JetBrains Mono','Courier New',monospace;

  --header-h:80px;
  --shadow-hard:6px 6px 0 var(--ink-950);
  --shadow-soft:4px 4px 0 rgba(11,11,16,.55);
  --ease:.18s ease;
}

/* ---------- 3. 中文排版与基础 ---------- */
html,body{background:var(--purple-900)}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--paper-050);
  letter-spacing:.01em;
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
  min-height:100%;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.06;
  text-wrap:balance;
}
h1{font-size:clamp(34px,5.4vw,72px)}
h2{font-size:clamp(25px,3.2vw,40px)}
h3{font-size:clamp(19px,2.2vw,26px)}
h4{font-size:17px;letter-spacing:0}
p{max-width:68ch}
strong{font-weight:800}
small{font-size:13px}

:focus-visible{outline:2px solid var(--cyan-400);outline-offset:2px}

/* ---------- 4. 布局工具 ---------- */
.tf-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 28px}

.tf-section{position:relative;padding:76px 0;background:var(--purple-900);color:var(--paper-050)}
.tf-section--tight{padding:44px 0}
.tf-section--deeper{background:var(--ink-950);color:var(--paper-050)}
.tf-section--mid{background:var(--purple-700);color:var(--paper-050)}
.tf-section--paper{background:var(--paper-050);color:var(--ink-900)}
.tf-section--paper h1,.tf-section--paper h2,.tf-section--paper h3,.tf-section--paper h4{color:var(--ink-900)}
.tf-section--paper .tf-eyebrow{color:var(--orange-700)}
.tf-section--paper .tf-rule{background:var(--ink-900)}
.tf-section--paper .tf-note{color:#4b4560;border-left-color:var(--orange-500)}
.tf-section--paper .tf-panel{background:#fff;border-color:var(--ink-900);color:var(--ink-900);box-shadow:var(--shadow-soft)}
.tf-section--paper .tf-card{background:#fff;border-color:var(--ink-900);color:var(--ink-900);box-shadow:var(--shadow-soft)}
.tf-section--paper .tf-card:hover{border-color:var(--orange-700)}
.tf-section--paper .tf-tag{color:var(--orange-700);border-color:var(--orange-700)}

.tf-split{display:grid;gap:36px;align-items:start;grid-template-columns:minmax(0,38%) minmax(0,1fr)}
.tf-split--a{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
.tf-split--b{grid-template-columns:minmax(0,30%) minmax(0,1fr)}
.tf-split--c{grid-template-columns:minmax(0,45%) minmax(0,1fr)}

.tf-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tf-stack{display:flex;flex-direction:column;gap:18px}
.tf-rule{height:3px;background:var(--purple-500);width:100%}

/* ---------- 5. 文字与数据组件 ---------- */
.tf-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan-400);
  margin-bottom:14px;
}
.tf-data{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tf-accent,var(--orange-500));
}
.tf-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  padding:3px 9px;
  color:var(--cyan-400);
  border:2px solid var(--cyan-400);
  border-radius:0;
}
.tf-note{
  font-size:14px;
  line-height:1.7;
  color:var(--fog-500);
  border-left:3px solid var(--cyan-400);
  padding-left:14px;
  max-width:60ch;
}
.tf-prose{max-width:68ch;font-size:17px;line-height:1.75}
.tf-prose > * + *{margin-top:18px}
.tf-prose h2{margin-top:44px;font-size:clamp(22px,2.6vw,30px)}
.tf-prose h3{margin-top:32px}
.tf-prose ul li{position:relative;padding-left:22px}
.tf-prose ul li + li{margin-top:8px}
.tf-prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:3px;background:var(--orange-500)}

.tf-panel{
  border:3px solid var(--purple-500);
  background:var(--purple-700);
  padding:22px;
  border-radius:0;
  box-shadow:var(--shadow-soft);
}
.tf-card{
  display:block;
  border:3px solid var(--purple-500);
  background:var(--ink-950);
  padding:20px;
  border-radius:0;
  box-shadow:var(--shadow-soft);
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease),background-color var(--ease);
}
.tf-card:hover,.tf-card:focus-visible{
  border-color:var(--orange-500);
  box-shadow:8px 8px 0 var(--ink-950);
  transform:translate(-2px,-2px);
}

/* ---------- 6. 图片容器基础规则 ---------- */
.tf-media{
  position:relative;
  display:block;
  overflow:hidden;
  border:3px solid var(--purple-500);
  background:var(--ink-950);
  aspect-ratio:16 / 9;
  border-radius:0;
}
.tf-media img{width:100%;height:100%;object-fit:cover;display:block}
.tf-media--wide{aspect-ratio:21 / 9}
.tf-media--tall{aspect-ratio:3 / 4}
.tf-media--square{aspect-ratio:1 / 1}
.tf-media__scrim{position:absolute;inset:0;background:rgba(11,11,16,.44);pointer-events:none}
.tf-media__label{
  position:absolute;left:0;bottom:0;
  background:var(--orange-500);
  color:var(--ink-950);
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:6px 10px;
}
.tf-media__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(34,224,210,.28) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(34,224,210,.2) 0 1px,transparent 1px 48px);
}

/* ---------- 7. 面包屑 ---------- */
.tf-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:18px 0;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--fog-500);
}
.tf-breadcrumb a{border-bottom:2px solid transparent;transition:color var(--ease),border-color var(--ease)}
.tf-breadcrumb a:hover{color:var(--cyan-400);border-bottom-color:var(--cyan-400)}
.tf-breadcrumb__sep{color:var(--purple-500)}
.tf-breadcrumb [aria-current="page"]{color:var(--paper-050)}
.tf-section--paper .tf-breadcrumb{color:#5b5573}
.tf-section--paper .tf-breadcrumb [aria-current="page"]{color:var(--ink-900)}

/* ---------- 8. 按钮 ---------- */
.tf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;
  font-family:var(--font-body);
  font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1;
  color:var(--paper-050);
  background:transparent;
  border:2px solid var(--paper-050);
  border-radius:0;
  white-space:nowrap;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.tf-btn--ghost{border-color:var(--purple-500);color:var(--paper-050);background:rgba(24,10,46,.35)}
.tf-btn--ghost:hover,.tf-btn--ghost:focus-visible{border-color:var(--cyan-400);color:var(--cyan-400)}
.tf-btn--solid{
  background:var(--orange-500);
  border-color:var(--orange-500);
  color:var(--ink-950);
  box-shadow:4px 4px 0 var(--ink-950);
}
.tf-btn--solid:hover,.tf-btn--solid:focus-visible{
  background:var(--orange-700);
  border-color:var(--orange-700);
  color:var(--paper-050);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink-950);
}

/* ---------- 9. 头部 ---------- */
.tf-skip{
  position:absolute;left:14px;top:-72px;z-index:120;
  background:var(--cyan-400);color:var(--ink-950);
  font-family:var(--font-body);font-size:14px;font-weight:800;
  padding:11px 16px;border:2px solid var(--ink-950);border-radius:0;
  transition:top var(--ease);
}
.tf-skip:focus{top:14px}

.tf-header{
  --h:80px;
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(24,10,46,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.tf-header[data-scrolled]{
  --h:62px;
  background:var(--ink-950);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 4px 0 var(--purple-500);
}
.tf-header__inner{
  max-width:1440px;margin:0 auto;
  height:var(--h);
  padding:0 28px;
  display:flex;align-items:center;gap:20px;
  border-bottom:2px solid transparent;
  transition:height .25s ease,border-color .25s ease;
}
.tf-header[data-scrolled] .tf-header__inner{border-bottom-color:var(--purple-700)}

.tf-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.tf-brand__mark{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:40px;height:40px;
  background:var(--orange-500);
  color:var(--ink-950);
  font-family:var(--font-display);
  font-size:20px;line-height:1;font-weight:900;
  clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);
}
.tf-brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.tf-brand__name{
  font-family:var(--font-display);
  font-size:19px;font-weight:900;letter-spacing:-.02em;
  color:var(--paper-050);
}
.tf-brand__tagline{
  font-family:var(--font-mono);
  font-size:10px;font-weight:700;letter-spacing:.16em;
  color:var(--cyan-400);
}

.tf-nav{margin-left:auto}
.tf-nav__list{display:flex;align-items:center;gap:2px}
.tf-nav__item{display:block}
.tf-nav__link{
  display:block;
  padding:9px 12px;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--paper-050);
  border-bottom:2px solid transparent;
  transition:color var(--ease),border-color var(--ease),background-color var(--ease);
}
.tf-nav__link:hover,.tf-nav__link:focus-visible{
  color:var(--orange-500);
  border-bottom-color:var(--orange-500);
  background:rgba(110,43,255,.22);
}
.tf-nav__link[aria-current="page"]{
  color:var(--cyan-400);
  border-bottom-color:var(--cyan-400);
}
.tf-nav__cta{display:none}

.tf-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.tf-nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  width:44px;height:40px;
  padding:0 8px;
  border:2px solid var(--purple-500);
  background:rgba(11,11,16,.5);
  border-radius:0;
}
.tf-nav-toggle__bar{
  display:block;width:22px;height:2px;
  background:var(--paper-050);
  transition:transform .2s ease,background-color .2s ease;
}
.tf-nav-toggle[aria-expanded="true"]{border-color:var(--orange-500)}
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bar{background:var(--orange-500)}
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bar:nth-child(2){opacity:0}
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.tf-header__progress{
  position:absolute;left:0;bottom:0;
  width:100%;height:3px;
  background:var(--cyan-400);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
  pointer-events:none;
}

html[data-nav-open]{overflow:hidden}
html[data-nav-open] .tf-header{background:var(--purple-900);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-nav-open] .tf-header__progress{opacity:0}

/* ---------- 10. 页脚 ---------- */
.tf-footer{
  position:relative;
  margin-top:96px;
  padding:0 0 30px;
  background:var(--ink-950);
  color:var(--paper-050);
}
.tf-footer__edge{
  position:absolute;left:0;right:0;bottom:100%;
  height:30px;
  background:var(--ink-950);
  clip-path:polygon(0 100%,0 78%,6% 26%,13% 72%,22% 8%,31% 62%,40% 20%,50% 76%,60% 14%,70% 66%,79% 30%,88% 82%,95% 22%,100% 56%,100% 100%);
}
.tf-footer__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,2fr);
  gap:44px;
  padding-top:66px;
}
.tf-footer__brand{display:flex;flex-direction:column;gap:12px;max-width:38ch}
.tf-footer__logo{
  font-family:var(--font-display);
  font-size:26px;font-weight:900;letter-spacing:-.02em;
  color:var(--paper-050);
  border-bottom:3px solid var(--orange-500);
  align-self:flex-start;
  padding-bottom:4px;
  transition:color var(--ease),border-color var(--ease);
}
.tf-footer__logo:hover,.tf-footer__logo:focus-visible{color:var(--orange-500);border-color:var(--cyan-400)}
.tf-footer__tagline{
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--cyan-400);
}
.tf-footer__note{font-size:14px;line-height:1.7;color:var(--fog-500);max-width:44ch}

.tf-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tf-footer__col{min-width:0}
.tf-footer__col-title{
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.2em;
  color:var(--cyan-400);
  margin-bottom:14px;
}
.tf-footer__list{display:grid;gap:2px}
.tf-footer__item{display:block}
.tf-footer__link{
  display:inline-block;
  padding:5px 0;
  font-size:15px;
  color:var(--paper-050);
  border-bottom:2px solid transparent;
  transition:color var(--ease),border-color var(--ease),transform var(--ease);
}
.tf-footer__link:hover,.tf-footer__link:focus-visible{
  color:var(--orange-500);
  border-bottom-color:var(--orange-500);
  transform:translateX(3px);
}

.tf-footer__contact{
  margin-top:52px;
  padding-top:30px;
  border-top:2px solid var(--purple-700);
}
.tf-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 34px}
.tf-contact-list__item{display:flex;flex-direction:column;gap:6px;min-width:0}
.tf-contact-list__key{
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--fog-500);
}
.tf-contact-list__val{
  font-size:15px;line-height:1.6;
  color:var(--paper-050);
  overflow-wrap:anywhere;
}

.tf-footer__bottom{
  margin-top:34px;
  padding-top:20px;
  border-top:2px solid var(--purple-700);
  display:flex;flex-wrap:wrap;
  gap:12px 32px;
  justify-content:space-between;
  align-items:baseline;
}
.tf-footer__bottom-note{font-size:13px;line-height:1.7;color:var(--fog-500);max-width:62ch}
.tf-footer__legal{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--fog-500);
  max-width:none;
}
.tf-footer__legal-item{display:inline-block}

/* ---------- 11. 响应式 ---------- */
@media (max-width:1240px){
  .tf-nav__link{padding:9px 10px;font-size:13px}
  .tf-btn{padding:10px 15px;font-size:13px}
}

@media (max-width:1080px){
  .tf-header__actions{display:none}
  .tf-nav-toggle{display:flex}
  .tf-header__inner{gap:14px;padding:0 22px}

  .tf-nav{
    position:fixed;
    inset:0;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:104px 26px 48px;
    background:var(--purple-900);
    border-top:3px solid var(--purple-500);
    clip-path:polygon(0 0,100% 0,100% 86%,88% 100%,74% 90%,60% 98%,42% 88%,26% 97%,0 88%);
    transform:translateY(-102%);
    visibility:hidden;
    opacity:0;
    overflow-y:auto;
    transition:transform .3s ease,opacity .25s ease,visibility .3s;
  }
  .tf-nav[data-open]{transform:translateY(0);visibility:visible;opacity:1}
  .tf-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .tf-nav__item + .tf-nav__item{border-top:2px solid var(--purple-700)}
  .tf-nav__link{
    font-family:var(--font-display);
    font-size:26px;
    letter-spacing:-.01em;
    padding:16px 6px 16px 14px;
    border-bottom:0;
    border-left:4px solid transparent;
  }
  .tf-nav__link:hover,.tf-nav__link:focus-visible{
    background:rgba(110,43,255,.28);
    border-left-color:var(--orange-500);
  }
  .tf-nav__link[aria-current="page"]{
    border-left-color:var(--cyan-400);
    background:rgba(34,224,210,.1);
  }
  .tf-nav__cta{display:flex;flex-direction:column;gap:12px;margin-top:34px}
  .tf-nav__cta .tf-btn{width:100%;padding:15px 18px;font-size:15px}

  html[data-nav-open] .tf-header{--h:80px;box-shadow:none}
}

@media (max-width:900px){
  .tf-wrap{padding:0 20px}
  .tf-section{padding:56px 0}
  .tf-section--tight{padding:34px 0}
  .tf-split,.tf-split--a,.tf-split--b,.tf-split--c{grid-template-columns:minmax(0,1fr);gap:26px}
  .tf-footer{margin-top:64px}
  .tf-footer__inner{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:52px}
  .tf-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .tf-footer__contact{margin-top:36px}
}

@media (max-width:560px){
  .tf-wrap{padding:0 16px}
  .tf-header__inner{padding:0 16px}
  .tf-brand__mark{width:34px;height:34px;font-size:17px}
  .tf-brand__name{font-size:16px}
  .tf-brand__tagline{font-size:9px;letter-spacing:.1em}
  .tf-nav__link{font-size:22px;padding:14px 6px 14px 12px}
  .tf-footer__cols{grid-template-columns:minmax(0,1fr)}
  .tf-footer__bottom{flex-direction:column;align-items:flex-start}
  .tf-btn{padding:11px 14px;font-size:13px}
}

/* ---------- 12. 无障碍与降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tf-card:hover,.tf-card:focus-visible{transform:none}
  .tf-footer__link:hover,.tf-footer__link:focus-visible{transform:none}
  .tf-btn--solid:hover,.tf-btn--solid:focus-visible{transform:none}
}

@media print{
  .tf-header,.tf-footer__edge,.tf-header__progress{display:none}
  body{background:#fff;color:#000}
}