/* /assets/site.css — 乐鱼赛事 共享外壳（重制） */

/* ---------- 01 reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dt,dd,fieldset,legend{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
::selection{background:#FF7A2F;color:#061826}
:focus-visible{outline:2px solid var(--lime,#C8F04A);outline-offset:3px}

/* ---------- 02 tokens ---------- */
:root{
  --deep:#061826;
  --panel:#0C2C44;
  --panel-2:#0A2436;
  --grid:#14405E;
  --cyan:#23C7C0;
  --orange:#FF7A2F;
  --amber:#FFB45C;
  --lime:#C8F04A;
  --mist:#E8F1F7;
  --haze:#93AEC2;
  --indigo:#453A8F;
  --wine:#7A2B3F;
  --edge:#020E18;

  --cut:12px;
  --shell-w:1320px;
  --pad:24px;
  --gap:24px;

  --font-head:"Inter Tight","HarmonyOS Sans SC","Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","HarmonyOS Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (min-width:960px){:root{--pad:48px;--gap:32px}}

/* ---------- 03 base ---------- */
html,body{background-color:#061826}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:#E8F1F7;
  padding:0;
  background-image:
    radial-gradient(circle at 84% -12%, rgba(35,199,192,.10), transparent 44%),
    radial-gradient(circle at 4% 2%, rgba(255,122,47,.07), transparent 38%),
    repeating-linear-gradient(0deg, rgba(20,64,94,.34) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(20,64,94,.34) 0 1px, transparent 1px 72px);
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--mist);letter-spacing:-.01em;line-height:1.14;font-weight:800}
h1{font-size:clamp(34px,6vw,68px)}
h2{font-size:clamp(24px,3.4vw,40px)}
h3{font-size:22px;font-weight:700;line-height:1.3}
p{font-size:16px;line-height:1.7}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.label{
  display:inline-block;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--haze);
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shell{width:100%;max-width:var(--shell-w);margin:0 auto;padding:0 var(--pad)}

/* ---------- 04 切角工具 ---------- */
.cut,.panel,.btn,.chip,.copy-btn,.fig-frame,.masthead__toggle,.segmented label{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}

/* ---------- 05 skip link ---------- */
.skip-link{
  position:absolute;left:16px;top:-72px;z-index:120;
  --cut:8px;
  padding:11px 18px;background:var(--lime);color:var(--deep);
  font:700 13px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:top 140ms ease;
}
.skip-link:focus{top:14px}

/* ---------- 06 滚动进度 ---------- */
.scroll-meter{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:90;
  pointer-events:none;opacity:0;background:rgba(2,14,24,.7);
  transition:opacity 160ms ease;
}
.scroll-meter.is-active{opacity:1}
.scroll-meter__fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--amber) 58%,var(--lime));
}

/* ---------- 07 masthead ---------- */
.masthead{
  position:relative;
  background:linear-gradient(180deg,#0A2A42 0%,#08202F 58%,#061826 100%);
  border-bottom:1px solid var(--grid);
  box-shadow:0 22px 44px -30px rgba(2,14,24,.95);
}
.masthead__rail{
  background:rgba(2,14,24,.38);
  border-bottom:1px solid rgba(20,64,94,.7);
}
.rail{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:42px;padding-top:7px;padding-bottom:7px;
}
.rail__status{display:flex;align-items:center;gap:10px;min-width:0}
.rail__dot{
  width:8px;height:8px;flex:none;background:var(--lime);
  box-shadow:0 0 0 3px rgba(200,240,74,.18);
  animation:pulse 2.6s ease-in-out infinite;
}
.rail__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__quick{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rail__link{
  display:inline-block;padding-bottom:2px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--haze);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 120ms ease,border-color 120ms ease;
}
.rail__link:hover{color:var(--amber);border-bottom-color:var(--amber)}

.masthead__core{
  position:relative;
  padding:36px 0 26px;
  text-align:center;
}
.masthead__kicker{color:var(--cyan);margin-bottom:12px}
.masthead__brand{
  display:inline-block;
  font-family:var(--font-head);
  font-size:clamp(34px,6vw,64px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--mist);
  text-shadow:0 0 34px rgba(35,199,192,.22);
  transition:color 120ms ease;
}
.masthead__brand:hover{color:var(--amber)}
.masthead__sub{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:14px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--haze);
}
.masthead__sub::before,.masthead__sub::after{content:"";width:32px;height:1px;background:var(--grid)}

.masthead__toggle{
  --cut:8px;
  position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  display:none;align-items:center;gap:10px;z-index:5;
  padding:10px 16px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--grid);
  color:var(--mist);
  font:700 12px/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;
  transition:color 120ms ease,box-shadow 120ms ease;
}
.masthead__toggle:hover{color:var(--lime);box-shadow:inset 0 0 0 1px rgba(200,240,74,.5)}
.masthead__toggle-bars{position:relative;display:block;width:16px;height:2px;background:currentColor}
.masthead__toggle-bars::before,.masthead__toggle-bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
  transition:transform 160ms ease,top 160ms ease;
}
.masthead__toggle-bars::before{top:-5px}
.masthead__toggle-bars::after{top:5px}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bars{background:transparent}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bars::before{top:0;transform:rotate(45deg)}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bars::after{top:0;transform:rotate(-45deg)}
.masthead__toggle-text{white-space:nowrap}

.masthead__nav{
  background:rgba(6,24,38,.66);
  border-top:1px solid rgba(20,64,94,.55);
}
.nav-list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 32px;padding:8px 0;
}
.nav-link{
  position:relative;display:inline-block;padding:14px 2px;
  font-family:var(--font-head);font-size:14px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;
  transition:color 120ms ease;
}
.nav-link::after{
  content:"";position:absolute;left:50%;right:50%;bottom:7px;height:2px;
  background:var(--orange);
  transition:left 140ms ease,right 140ms ease,background-color 140ms ease;
}
.nav-link:hover{color:var(--amber)}
.nav-link:hover::after{left:0;right:0}
.nav-link[aria-current="page"]{color:var(--orange)}
.nav-link[aria-current="page"]::after{left:0;right:0;background:var(--lime)}

/* ---------- 08 buttons / chips ---------- */
.btn{
  --cut:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--deep);background:var(--orange);
  box-shadow:inset 0 0 0 1px rgba(2,14,24,.35);
  transition:transform 120ms ease,background-color 120ms ease,color 120ms ease,box-shadow 120ms ease;
}
.btn:hover{transform:translateY(-2px);background:var(--amber)}
.btn--ghost{background:rgba(12,44,68,.6);color:var(--mist);box-shadow:inset 0 0 0 1px var(--grid)}
.btn--ghost:hover{color:var(--lime);background:rgba(12,44,68,.9);box-shadow:inset 0 0 0 1px rgba(200,240,74,.55)}
.btn--signal{background:var(--lime);color:var(--deep)}
.btn--signal:hover{background:#D8FF72}
.btn--line{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(35,199,192,.5)}
.btn--line:hover{background:var(--cyan);color:var(--deep)}

.chip{
  --cut:6px;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:rgba(12,44,68,.65);
  box-shadow:inset 0 0 0 1px var(--grid);
  color:var(--haze);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.chip--live{color:var(--lime);box-shadow:inset 0 0 0 1px rgba(200,240,74,.5)}
.chip--replay{color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(35,199,192,.5)}
.chip--warn{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,180,92,.5)}

/* ---------- 09 panels / bands / chapters ---------- */
.panel{
  position:relative;overflow:hidden;
  padding:var(--gap);
  background:linear-gradient(152deg,#0E3149 0%,#0A2436 72%);
  box-shadow:inset 0 0 0 1px rgba(35,199,192,.10);
  --state:var(--grid);
}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--state)}
.panel[data-state="live"]{--state:var(--lime)}
.panel[data-state="replay"]{--state:var(--cyan)}
.panel[data-state="done"]{--state:var(--grid)}
.panel[data-state="alert"]{--state:var(--orange)}

.band{height:4px;width:100%;background:var(--grid);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.band--euro{background:var(--indigo)}
.band--cup{background:var(--wine)}
.band--replay{background:var(--cyan)}
.band--signal{background:var(--orange)}
.band--grid{background:linear-gradient(90deg,var(--grid),rgba(20,64,94,0))}

.chapter{position:relative;padding:0 0 96px}
.chapter-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:8px 20px;align-items:start;
  margin-bottom:var(--gap);
}
.chapter-num{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(20px,2.4vw,28px);line-height:1;
  color:var(--orange);font-variant-numeric:tabular-nums;
}
.chapter-title{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:1.12;color:var(--mist)}
.chapter-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--haze);
}

/* ---------- 10 grids ---------- */
.deck{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:start}
.deck--wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

/* ---------- 11 figure frames ---------- */
.fig-frame{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  background-color:var(--panel-2);
  background-image:
    linear-gradient(150deg,rgba(35,199,192,.12),rgba(6,24,38,0) 62%),
    repeating-linear-gradient(0deg,rgba(20,64,94,.55) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(20,64,94,.55) 0 1px,transparent 1px 48px);
  box-shadow:inset 0 0 0 1px rgba(20,64,94,.9);
}
.fig-frame img{width:100%;height:100%;object-fit:cover}
.fig-frame__ph{
  position:absolute;inset:0;display:grid;place-items:center;padding:20px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(147,174,194,.75);text-align:center;
}
.fig-frame__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  padding:6px 12px;
  background:rgba(6,24,38,.88);
  color:var(--mist);
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.fig-frame--wide{aspect-ratio:21/9}
.fig-frame--tall{aspect-ratio:3/4}
.fig-frame--square{aspect-ratio:1/1}
.fig-frame--pitch{aspect-ratio:4/5}

/* ---------- 12 crumbs / prose / segmented ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:18px 0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--haze);
}
.crumbs li::after{content:"/";margin-left:6px;color:var(--grid)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--haze);text-decoration:none}
.crumbs a:hover{color:var(--amber)}

.prose{max-width:68ch;font-size:16px;line-height:1.7;color:var(--mist)}
.prose p+p{margin-top:1em}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:1.6em 0 .55em}
.prose h3{margin:1.4em 0 .45em}
.prose ul{list-style:disc;padding-left:1.25em;margin:.9em 0}
.prose li{margin:.35em 0}
.prose a{color:var(--cyan);text-underline-offset:3px}
.prose strong{color:var(--amber)}

.segmented{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--grid)}
.segmented input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.segmented label{
  --cut:8px;
  display:inline-flex;align-items:center;
  padding:9px 16px;
  background:rgba(12,44,68,.55);
  box-shadow:inset 0 0 0 1px var(--grid);
  color:var(--haze);
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  transition:color 120ms ease,background-color 120ms ease,box-shadow 120ms ease;
}
.segmented label:hover{color:var(--mist)}
.segmented input:checked+label{background:var(--orange);color:var(--deep);box-shadow:inset 0 0 0 1px var(--orange)}
.segmented input:focus-visible+label{outline:2px solid var(--lime);outline-offset:3px}

/* ---------- 13 reveal ---------- */
.has-js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 300ms ease,transform 300ms ease}
.has-js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 14 footer ---------- */
.site-foot{
  position:relative;margin-top:120px;
  padding:64px 0 30px;
  background:linear-gradient(180deg,#0A2436 0%,#05131F 100%);
  border-top:1px solid var(--grid);
}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--cyan) 34%,var(--orange) 68%,var(--lime));
}
.foot__grid{display:grid;gap:44px 32px;grid-template-columns:1fr}
.foot__logo{
  display:inline-block;
  font-family:var(--font-head);font-size:26px;font-weight:800;line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--mist);text-decoration:none;
  transition:color 120ms ease;
}
.foot__logo:hover{color:var(--amber)}
.foot__note{margin-top:14px;max-width:36ch;font-size:14px;line-height:1.7;color:var(--haze)}
.foot__marks{display:flex;gap:8px;margin-top:20px}
.mark{width:14px;height:14px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mark--cyan{background:var(--cyan)}
.mark--orange{background:var(--orange)}
.mark--lime{background:var(--lime)}
.mark--indigo{background:var(--indigo)}

.foot__head{
  display:block;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--grid);
  color:var(--haze);
}
.foot__list li+li{margin-top:10px}
.foot__link{
  position:relative;display:inline-block;padding-left:14px;
  font-size:14px;color:var(--mist);text-decoration:none;
  transition:color 120ms ease,padding-left 120ms ease;
}
.foot__link::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:2px;background:var(--grid);
  transition:background-color 120ms ease,width 120ms ease;
}
.foot__link:hover{color:var(--amber);padding-left:18px}
.foot__link:hover::before{width:10px;background:var(--lime)}

.contact-row{
  display:flex;gap:12px;align-items:baseline;
  padding:9px 0;
  border-bottom:1px dashed rgba(20,64,94,.75);
  font-size:14px;line-height:1.6;
}
.contact-key{flex:0 0 42px;font-family:var(--font-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
.contact-val{color:var(--mist);word-break:break-word}
.contact-note{margin-top:14px;font-size:13px;line-height:1.7;color:var(--haze)}
.copy-btn{
  --cut:8px;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;padding:10px 16px;
  background:rgba(200,240,74,.08);
  box-shadow:inset 0 0 0 1px rgba(200,240,74,.45);
  color:var(--lime);
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  transition:background-color 120ms ease,color 120ms ease;
}
.copy-btn:hover{background:rgba(200,240,74,.2)}

.foot__legal{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  margin-top:56px;padding-top:20px;
  border-top:1px solid rgba(20,64,94,.75);
}
.foot__legal-line,.foot__legal-meta{font-size:12px;letter-spacing:.06em;color:var(--haze)}

/* ---------- 15 keyframes ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 16 responsive ---------- */
@media (max-width:899px){
  .masthead__core{padding:28px 0 22px}
  .masthead__toggle{display:inline-flex}
  .masthead__nav{display:none}
  .masthead__nav[data-open]{display:block;animation:navDrop 220ms ease both}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:10px 0 20px}
  .nav-item{border-bottom:1px solid rgba(20,64,94,.6)}
  .nav-item:last-child{border-bottom:0}
  .nav-link{display:block;padding:15px 44px 15px 6px;font-size:13px}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{padding-left:18px}
  .nav-link[aria-current="page"]::before{
    content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;
    background:var(--lime);transform:translateY(-50%);
  }
}
@media (max-width:719px){
  .rail__quick{display:none}
  .masthead__brand{font-size:clamp(30px,9vw,44px)}
  .foot__grid{gap:36px 24px}
  .site-foot{padding-top:48px;margin-top:96px}
  .chapter{padding-bottom:72px}
}
@media (min-width:560px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}
@media (min-width:1000px){
  .foot__grid{grid-template-columns:1.5fr .85fr .85fr .8fr 1.4fr}
  .foot__brand{grid-column:auto}
}
@media (min-width:900px){
  .masthead__nav{display:block}
  .masthead__toggle{display:none}
}

/* ---------- 17 motion / contrast preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .has-js [data-reveal]{opacity:1 !important;transform:none !important}
  .masthead__nav[data-open]{animation:none}
  .masthead__brand:hover,.btn:hover,.foot__link:hover{transform:none}
}