/* ==========================================================
   BOWAN赛场 · 共享外壳样式 /assets/site.css
   夜间赛场控制室：深墨绿底 / 荧光青数据 / 信号橙动作
   ========================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd,hr{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg,video{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
hr{border:0;border-top:1px solid var(--line);}
table{border-collapse:collapse;width:100%;}

:root{
  --ink:#04140F;
  --section:#0A241C;
  --deck:#123328;
  --line:#1E4A3A;
  --mid:#2F6E57;
  --cyan:#7FE7D0;
  --cyan-deep:#39D2B4;
  --orange:#FF7A2F;
  --white:#E8F5F1;
  --mist:#9BB8AE;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --f-12:12px;--f-14:14px;--f-15:15px;--f-18:18px;--f-24:24px;
  --f-32:32px;--f-48:48px;--f-96:96px;--f-160:160px;

  --wrap:min(1280px,88vw);
  --gutter:24px;
  --r:2px;
  --header-pad:14px;
  --shadow:0 18px 42px rgba(0,0,0,.48);
}

body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--sans);
  font-size:var(--f-15);
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(127,231,208,.28);color:var(--white);}

h1,h2,h3,h4{line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--white);}
h1{font-size:clamp(32px,4.6vw,48px);}
h2{font-size:clamp(24px,3.2vw,32px);}
h3{font-size:var(--f-18);font-weight:700;}
p{color:var(--white);}

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

/* ---------- 通用工具 ---------- */
.wrap{width:var(--wrap);margin:0 auto;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.05em;}
.display{font-size:clamp(42px,9vw,160px);font-weight:900;line-height:.92;letter-spacing:-.03em;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--f-12);letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--cyan);}
.annotation{font-family:var(--mono);font-size:var(--f-12);letter-spacing:.18em;color:var(--mist);writing-mode:vertical-rl;text-orientation:mixed;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.link{color:var(--cyan);border-bottom:1px solid rgba(127,231,208,.35);transition:border-color .15s ease,color .15s ease;}
.link:hover{border-color:var(--cyan);color:var(--white);}
.guide-line{height:1px;background:linear-gradient(90deg,rgba(30,74,58,0) 0%,var(--line) 22%,var(--line) 78%,rgba(30,74,58,0) 100%);transform:rotate(-15deg);transform-origin:left center;}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;left:6vw;top:-80px;z-index:200;
  display:inline-flex;align-items:center;
  padding:10px 18px;border-radius:999px;
  background:var(--cyan);color:#04140F;font-weight:700;font-size:var(--f-14);
  transition:top .16s ease;
}
.skip-link:focus{top:12px;}

/* ---------- 顶部悬浮外壳 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  padding:var(--header-pad) 0 10px;
  background:linear-gradient(180deg,rgba(4,20,15,.97) 0%,rgba(4,20,15,.86) 62%,rgba(4,20,15,0) 100%);
  transition:padding .2s ease,background .2s ease;
}
.site-header[data-scrolled="true"]{
  --header-pad:8px;
  background:linear-gradient(180deg,rgba(4,20,15,.99) 0%,rgba(4,20,15,.9) 74%,rgba(4,20,15,0) 100%);
}
.site-header[data-scrolled="true"] .brand__sub{opacity:0;}

.scroll-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(30,74,58,.55);}
.scroll-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mid),var(--cyan));transition:width .08s linear;}

.header-bar{
  width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:8px 10px 8px 16px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(10,36,28,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.38);
}

.brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto;padding:2px 4px;border-radius:999px;}
.brand__mark{font-size:var(--f-18);font-weight:900;letter-spacing:-.01em;color:var(--white);}
.brand__mark::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--orange);vertical-align:middle;}
.brand__sub{font-family:var(--mono);font-size:var(--f-12);letter-spacing:.12em;color:var(--mist);transition:opacity .2s ease;}
.brand:hover .brand__mark{color:var(--cyan);}

.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:auto;
  padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--white);font-size:var(--f-14);
  transition:border-color .15s ease,color .15s ease;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.nav-toggle__bars{display:block;width:16px;height:2px;background:var(--cyan);box-shadow:0 -5px 0 var(--cyan),0 5px 0 var(--cyan);transition:background .15s ease,box-shadow .15s ease;}
.nav-toggle__label{font-family:var(--mono);font-size:var(--f-12);letter-spacing:.1em;color:var(--mist);}
.nav-toggle[aria-expanded="true"]{border-color:var(--orange);color:var(--orange);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:var(--orange);box-shadow:0 -5px 0 var(--orange),0 5px 0 var(--orange);}

.site-nav{display:none;}
.site-nav[data-open]{
  display:block;position:absolute;left:6vw;right:6vw;top:calc(100% - 8px);
  padding:10px;
  background:rgba(18,51,40,.98);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);
}
.site-nav__list{display:flex;flex-direction:column;gap:2px;}
.site-nav__list a{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:10px;
  color:var(--white);font-size:var(--f-15);
  transition:background .15s ease,color .15s ease;
}
.site-nav__list a:hover{background:rgba(127,231,208,.08);color:var(--cyan);}
.site-nav__list a[aria-current="page"]{color:var(--cyan);background:rgba(127,231,208,.10);}
.site-nav__list a[aria-current="page"]::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(127,231,208,.16);}

.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;
  border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--white);
  font-size:var(--f-14);font-weight:600;letter-spacing:.01em;
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan);}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#1A0C04;font-weight:700;}
.btn--primary:hover{background:#FF9250;border-color:#FF9250;color:#1A0C04;transform:translateY(-1px);}
.btn--ghost{color:var(--mist);}
.btn--block{width:100%;}

/* ---------- 横向比分条 ---------- */
.ticker{
  width:var(--wrap);margin:8px auto 0;
  display:flex;align-items:center;gap:12px;
  padding:6px 14px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(4,20,15,.72);
}
.ticker__label{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:var(--f-12);letter-spacing:.14em;color:var(--mist);text-transform:uppercase;
}
.ticker__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);animation:bowan-pulse 2.2s ease-in-out infinite;}
.ticker__viewport{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:bowan-ticker 48s linear infinite;}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused;}
.ticker__group{display:flex;align-items:center;gap:28px;padding-right:28px;}
.ticker__item{display:inline-flex;align-items:center;gap:8px;font-size:var(--f-14);white-space:nowrap;}
.ticker__team{color:var(--white);}
.ticker__score{font-family:var(--mono);font-weight:700;font-size:var(--f-14);color:var(--cyan);letter-spacing:.06em;}
.ticker__state{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--f-12);color:var(--mist);}
.ticker__dot{width:6px;height:6px;border-radius:50%;background:var(--orange);}
.ticker__item[data-state="soon"] .ticker__dot{background:var(--mid);}
.ticker__item[data-state="final"] .ticker__dot{background:var(--mist);}

@keyframes bowan-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes bowan-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---------- 轮次 / 筛选标签 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;
  font-family:var(--mono);font-size:var(--f-12);letter-spacing:.06em;
  color:var(--cyan);
  background:rgba(127,231,208,.10);
  border:1px solid rgba(127,231,208,.28);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.chip--action{cursor:pointer;color:var(--mist);background:rgba(30,74,58,.35);border-color:var(--line);transition:color .15s ease,border-color .15s ease,background .15s ease;}
.chip--action:hover{color:var(--white);border-color:var(--cyan);}
.chip--action[aria-pressed="true"],.chip.is-active{color:var(--ink);background:var(--cyan);border-color:var(--cyan);}

/* ---------- 章节与网格 ---------- */
.section{padding:clamp(56px,8vw,110px) 0;}
.section--band{background:var(--section);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section--deck{background:var(--deck);}
.section__head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-bottom:32px;}
.section__index{font-family:var(--mono);font-size:var(--f-14);letter-spacing:.16em;color:var(--cyan);padding-top:4px;}
.section__title{font-size:clamp(24px,3.4vw,40px);line-height:1.2;font-weight:800;}
.section__sub{margin-top:8px;max-width:36em;color:var(--mist);font-size:var(--f-15);}

.grid{display:grid;gap:var(--gutter);}
.grid--12{grid-template-columns:1fr;}
.grid--7-4{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
@media (min-width:601px){
  .grid--3{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:901px){
  .grid--12{grid-template-columns:repeat(12,1fr);}
  .grid--7-4{grid-template-columns:7fr 4fr;gap:32px;}
  .grid--3{grid-template-columns:repeat(3,1fr);}
}

/* ---------- 说明牌卡片 ---------- */
.card{
  position:relative;
  padding:24px 22px 20px;
  background:var(--deck);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.card:hover,.card:focus-within{border-color:var(--cyan);transform:translateY(-2px);background:#14392C;}
.card__index{position:absolute;top:10px;right:14px;font-family:var(--mono);font-size:var(--f-12);letter-spacing:.1em;color:var(--mist);}
.card__title{font-size:var(--f-18);font-weight:700;margin-bottom:8px;padding-right:44px;}
.card__text{color:var(--mist);font-size:var(--f-14);}
.card__meta{margin-top:12px;font-family:var(--mono);font-size:var(--f-12);color:var(--mist);letter-spacing:.06em;}
.card--offset{margin-top:28px;}

/* ---------- 数据条 ---------- */
.meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;}
.meter__track{height:8px;border-radius:999px;background:rgba(30,74,58,.55);overflow:hidden;}
.meter__fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mid),var(--cyan));}
.meter__value{font-family:var(--mono);font-size:var(--f-12);color:var(--cyan);letter-spacing:.06em;}

/* ---------- 表格 ---------- */
.table{width:100%;border-collapse:collapse;font-size:var(--f-14);}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.table th{font-family:var(--mono);font-size:var(--f-12);font-weight:500;letter-spacing:.1em;color:var(--mist);}
.table td.mono{color:var(--cyan);}

/* ---------- 图片容器 ---------- */
.figure{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--section);overflow:hidden;}
.figure__frame{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--deck) 0%,var(--ink) 72%);}
.figure__frame--wide{aspect-ratio:21/9;}
.figure__frame--tall{aspect-ratio:4/5;}
.figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.06);}
.figure__caption{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:10px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--f-12);letter-spacing:.05em;color:var(--mist);}

/* ---------- 正文与面包屑 ---------- */
.article{max-width:36em;}
.article p + p{margin-top:1em;}
.article h2{margin:1.6em 0 .6em;}
.breadcrumbs{font-size:var(--f-12);color:var(--mist);}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);letter-spacing:.06em;}
.breadcrumbs__list a{color:var(--mist);}
.breadcrumbs__list a:hover{color:var(--cyan);}
.breadcrumbs__sep{color:var(--line);}
.breadcrumbs__current{color:var(--white);}

/* ---------- 色带 ---------- */
.band{padding:14px 0;background:var(--section);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.band__inner{display:flex;align-items:center;gap:36px;width:max-content;font-family:var(--mono);font-size:var(--f-12);letter-spacing:.16em;color:var(--mist);animation:bowan-band 56s linear infinite;}
@keyframes bowan-band{from{transform:translateX(0);}to{transform:translateX(-32px);}}

/* ---------- 显现 ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(12px);}
.reveal-ready .reveal.is-visible{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}

/* ---------- 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(40px,6vw,72px) 0 28px;
  background:var(--section);
  border-top:1px solid var(--line);
  color:var(--mist);
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
.footer-brand__mark{font-size:var(--f-24);font-weight:900;letter-spacing:-.01em;color:var(--white);}
.footer-brand__mark::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--cyan);vertical-align:middle;}
.footer-brand__text{margin-top:12px;max-width:30em;font-size:var(--f-14);line-height:1.8;color:var(--mist);}
.footer-col__title{margin-bottom:14px;font-family:var(--mono);font-size:var(--f-12);font-weight:500;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;}
.footer-list{display:flex;flex-direction:column;gap:10px;font-size:var(--f-14);}
.footer-list a{color:var(--mist);transition:color .15s ease;}
.footer-list a:hover{color:var(--cyan);}
.footer-list--plain li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;line-height:1.7;color:var(--white);}
.footer-contact__label{flex:0 0 auto;min-width:3em;font-family:var(--mono);font-size:var(--f-12);letter-spacing:.08em;color:var(--cyan);}
.footer-note{margin-top:14px;max-width:32em;font-size:var(--f-12);line-height:1.85;color:var(--mist);opacity:.85;}
.footer-bottom{margin-top:clamp(32px,5vw,56px);padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:var(--f-12);}
.footer-legal{color:var(--mist);}
.footer-meta{color:var(--mid);font-size:var(--f-12);}

@media (min-width:701px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1001px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:40px;}
}

/* ---------- 响应式外壳 ---------- */
.header-actions .btn--ghost{display:none;}
@media (min-width:701px){
  .header-actions .btn--ghost{display:inline-flex;}
}
@media (max-width:900px){
  .site-header{--header-pad:10px;}
  .header-bar{gap:10px;padding:7px 8px 7px 14px;}
  .ticker{margin-top:6px;padding:5px 12px;}
  .ticker__group{gap:20px;padding-right:20px;}
}
@media (max-width:600px){
  .brand__sub{display:none;}
  .nav-toggle{padding:8px 10px;}
  .nav-toggle__label{display:none;}
  .header-actions .btn{padding:8px 12px;font-size:13px;}
  .section__head{grid-template-columns:1fr;gap:8px;}
  .section__index{padding-top:0;}
}
@media (min-width:901px){
  .nav-toggle{display:none;}
  .site-nav,.site-nav[data-open]{
    display:block;position:static;
    margin:0 auto;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;
  }
  .site-nav__list{flex-direction:row;align-items:center;gap:2px;}
  .site-nav__list a{padding:8px 14px;border-radius:999px;font-size:var(--f-14);color:var(--mist);}
  .site-nav__list a[aria-current="page"]{background:rgba(127,231,208,.10);}
  .site-nav__list a[aria-current="page"]::before{width:5px;height:5px;box-shadow:none;}
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .ticker__track{animation:none;width:auto;}
  .ticker__group[aria-hidden="true"]{display:none;}
  .ticker__viewport{overflow-x:auto;}
  .band__inner{animation:none;}
  .reveal-ready .reveal,.reveal-ready .reveal.is-visible{opacity:1;transform:none;}
  .card:hover,.btn--primary:hover{transform:none;}
}
