/* =========================================================
   开云体育手机 — /assets/site.css
   夜场记分牌：深青绿结构面 + 荧光草绿状态线 + 琥珀补时刻度
   ========================================================= */

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

/* ---------- 2. Tokens ---------- */
:root{
  --ink-field:#05191A;
  --pitch-teal:#0B3A38;
  --deep-teal:#0F4B47;
  --neon-grass:#35F0A0;
  --electric-cyan:#19D7C8;
  --stoppage-amber:#FFA33B;
  --card-ivory:#F2F4F1;
  --hairline-cool:#CBD3CF;
  --slate-green:#6E7C79;
  --ink-black:#0A0F0F;
  --card-red:#E5484D;
  --muted-on-dark:#9FB0AC;

  --rail-w:168px;
  --cmdbar-h:44px;
  --gutter:clamp(16px,4vw,40px);
  --measure:680px;

  --hair-dark:rgba(203,211,207,.28);
  --hair-dark-strong:rgba(203,211,207,.5);

  --font-cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --font-narrow:"Arial Narrow","Helvetica Neue Condensed","PingFang SC",system-ui,sans-serif;
}

/* ---------- 3. Base typography ---------- */
body{
  background:var(--ink-field);
  color:var(--card-ivory);
  font-family:var(--font-cn);
  font-size:17px;
  line-height:1.75;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  padding-top:var(--cmdbar-h);
}
main{ display:block; }
#main-content{ scroll-margin-top:calc(var(--cmdbar-h) + 8px); }

.h-display{
  font-family:var(--font-narrow);
  font-size:clamp(34px,7vw,60px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0;
}
.h-page{ font-size:clamp(26px,4vw,32px); font-weight:800; letter-spacing:-.01em; line-height:1.25; margin:0; }
.h-sub{ font-size:22px; font-weight:700; letter-spacing:-.005em; line-height:1.4; margin:0; }
.lede{ font-size:17px; line-height:1.75; max-width:var(--measure); color:var(--muted-on-dark); margin:16px 0 0; }
.note{ font-size:14px; line-height:1.75; color:var(--muted-on-dark); margin:0; }
.annot{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-green);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--electric-cyan);
  margin:0 0 12px;
}
.num,.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.rule{ height:1px; background:var(--hair-dark); margin:24px 0; }

/* ---------- 4. Focus & skip link ---------- */
:focus-visible{ outline:2px solid var(--neon-grass); outline-offset:2px; }
.skip-link{
  position:absolute; left:0; top:0; z-index:120;
  transform:translateY(-150%);
  background:var(--neon-grass);
  color:var(--ink-black);
  font-size:13px; font-weight:700;
  padding:10px 14px;
  border:1px solid var(--neon-grass);
  transition:transform .16s ease;
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- 5. Layout helpers ---------- */
.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 var(--gutter); }
.section{ padding:clamp(36px,6vw,76px) 0; border-bottom:1px solid var(--hair-dark); }
.section--ivory{ background:var(--card-ivory); color:var(--ink-black); border-bottom-color:var(--hairline-cool); }
.section--teal{ background:var(--pitch-teal); border-bottom-color:var(--hair-dark-strong); }

.sec-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 24px;
  align-items:start;
  border-top:1px solid var(--hair-dark-strong);
  padding-top:16px;
}
.sec-num{
  font-family:var(--font-narrow);
  font-size:clamp(32px,5vw,48px);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--neon-grass);
  font-variant-numeric:tabular-nums;
}
.sec-title{ font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.3; margin:0; }
.sec-lede{ max-width:var(--measure); font-size:17px; line-height:1.75; color:var(--muted-on-dark); margin:8px 0 0; grid-column:2; }

.section--ivory .sec-head{ border-top-color:var(--hairline-cool); }
.section--ivory .sec-num{ color:var(--deep-teal); }
.section--ivory .sec-lede,
.section--ivory .lede,
.section--ivory .note,
.section--ivory .stat__label,
.section--ivory .crumbs{ color:var(--slate-green); }
.section--ivory .eyebrow{ color:var(--deep-teal); }
.section--ivory .stat__num{ color:var(--deep-teal); }
.section--ivory .rule{ background:var(--hairline-cool); }

.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid--12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.grid--12 > *{ min-width:0; }
.col-4{ grid-column:span 4; }
.col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; }
.col-7{ grid-column:span 7; }
.col-8{ grid-column:span 8; }
.col-12{ grid-column:span 12; }

.prose{ max-width:640px; font-size:17px; line-height:1.75; }
.prose p{ margin:0 0 1.1em; }
.prose h2{ font-size:22px; font-weight:800; margin:1.6em 0 .6em; letter-spacing:-.01em; }
.prose h3{ font-size:17px; font-weight:700; margin:1.4em 0 .5em; }
.prose ul,.prose ol{ padding-left:1.3em; margin:0 0 1.1em; }
.prose ul{ list-style:square; }
.prose ol{ list-style:decimal; }
.prose li{ margin:0 0 .4em; }
.prose a{ color:var(--electric-cyan); border-bottom:1px solid currentColor; }
.section--ivory .prose a{ color:var(--deep-teal); }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--muted-on-dark);
  padding:16px 0;
}
.crumbs a{ border-bottom:1px solid transparent; transition:color .16s ease,border-color .16s ease; }
.crumbs a:hover{ color:var(--neon-grass); border-bottom-color:var(--neon-grass); }
.crumbs__sep{ color:var(--slate-green); }

/* ---------- 6. Header : 左侧纵向时间轴 ---------- */
.site-head{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  background:var(--pitch-teal);
  border-bottom:1px solid var(--hair-dark-strong);
}
.cmdbar{
  height:var(--cmdbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  background:var(--pitch-teal);
  border-bottom:1px solid var(--hair-dark);
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--card-ivory);
}
.brand__short{ font-size:14px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.brand__mark{ display:none; }
.brand:hover .brand__short{ color:var(--neon-grass); }

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid var(--hairline-cool);
  color:var(--card-ivory);
  font-size:12px;
  letter-spacing:.14em;
  transition:border-color .16s ease,color .16s ease;
}
.nav-toggle:hover{ border-color:var(--neon-grass); color:var(--neon-grass); }
.nav-toggle__label{ font-family:var(--font-mono); }
.nav-toggle__glyph{
  display:block;
  width:8px; height:8px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .16s ease;
}
.site-head[data-open] .nav-toggle__glyph{ transform:translateY(1px) rotate(225deg); }

.rail{
  display:none;
  flex-direction:column;
  background:var(--pitch-teal);
  border-top:1px solid var(--hair-dark);
  max-height:calc(100vh - var(--cmdbar-h));
  overflow-y:auto;
}
.site-head[data-open] .rail{ display:block; }

.nav{ display:block; }
.nav__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.nav__item{ border-bottom:1px solid var(--hair-dark); }
.nav__item:nth-child(odd){ border-right:1px solid var(--hair-dark); }
.nav__link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:12px;
  font-size:14px;
  color:var(--card-ivory);
  border-left:2px solid transparent;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.nav__link:hover{ border-left-color:var(--neon-grass); color:var(--neon-grass); }
.nav__link[aria-current="page"]{ border-left-color:var(--neon-grass); background:var(--deep-teal); }
.nav__idx{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted-on-dark);
}
.nav__link[aria-current="page"] .nav__idx{ color:var(--neon-grass); }
.nav__label{ white-space:nowrap; }
.nav__dot{
  width:6px; height:6px;
  border:1px solid var(--muted-on-dark);
  background:transparent;
}
.nav__link[aria-current="page"] .nav__dot{ background:var(--neon-grass); border-color:var(--neon-grass); }

.rail__meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border-bottom:1px solid var(--hair-dark);
}
.status-chip{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--card-ivory);
}
.status-chip__tag{ color:var(--neon-grass); }
.status-chip__sep{ color:var(--slate-green); }
.status-chip__time{ color:var(--stoppage-amber); }
.status-chip--live{
  font-family:var(--font-cn);
  color:var(--muted-on-dark);
  gap:8px;
}
.status-chip--live::before{
  content:"";
  width:6px; height:6px;
  background:var(--electric-cyan);
  flex:0 0 auto;
}

.rail__ticks{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  padding:0;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-on-dark);
  white-space:nowrap;
}
.rail__ticks-label{
  flex:0 0 auto;
  padding:0 12px 0 12px;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--slate-green);
}
.rail__tick{
  flex:0 0 auto;
  padding:10px 12px;
  border-left:1px solid var(--hair-dark);
}
.rail__tick--y{ color:var(--card-ivory); font-size:15px; }
.rail__tick--end{ color:var(--stoppage-amber); }

.progress{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:90;
  pointer-events:none;
  background:transparent;
}
.progress__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--electric-cyan),var(--neon-grass));
}

/* ---------- 7. Buttons / chips / panels / data ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid var(--neon-grass);
  color:var(--neon-grass);
  background:transparent;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--neon-grass); color:var(--ink-black); }
.btn--solid{ background:var(--neon-grass); color:var(--ink-black); }
.btn--solid:hover,.btn--solid:focus-visible{ background:transparent; color:var(--neon-grass); }
.btn--ghost{ border-color:var(--hairline-cool); color:var(--card-ivory); }
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--neon-grass); color:var(--neon-grass); background:transparent; }
.btn--ink{ border-color:var(--ink-black); color:var(--ink-black); }
.btn--ink:hover,.btn--ink:focus-visible{ background:var(--ink-black); color:var(--card-ivory); }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid var(--hairline-cool);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted-on-dark);
}
.chip--grass{ border-color:var(--neon-grass); color:var(--neon-grass); }
.chip--amber{ border-color:var(--stoppage-amber); color:var(--stoppage-amber); }
.chip--red{ border-color:var(--card-red); color:var(--card-red); }

.panel{
  background:var(--deep-teal);
  border:1px solid var(--hair-dark-strong);
  padding:20px;
}
.panel--ivory{ background:var(--card-ivory); color:var(--ink-black); border-color:var(--hairline-cool); }
.panel__label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--electric-cyan);
  margin-bottom:8px;
}
.panel--ivory .panel__label{ color:var(--deep-teal); }

.card{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--deep-teal);
  border:1px solid var(--hair-dark);
  padding:16px;
  transition:border-color .16s ease;
}
.card--active{ border-color:var(--neon-grass); }
.hscroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}
.hscroll > *{ flex:0 0 min(280px,78vw); scroll-snap-align:start; }

.stat{ border-top:1px solid var(--hair-dark-strong); padding-top:12px; }
.stat__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--electric-cyan);
}
.stat__unit{ font-size:14px; color:var(--muted-on-dark); margin-left:4px; }
.stat__label{ display:block; font-size:14px; color:var(--muted-on-dark); margin-top:4px; }

.table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--hairline-cool);
}
table.data{
  width:100%;
  font-size:14px;
  background:var(--card-ivory);
  color:var(--ink-black);
}
table.data th,
table.data td{
  padding:8px 12px;
  border-bottom:1px solid var(--hairline-cool);
  text-align:left;
  white-space:nowrap;
}
table.data thead th{
  background:var(--deep-teal);
  color:var(--card-ivory);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
}
table.data tbody tr:hover{ background:#E4E9E4; }
table.data th[scope="row"],
table.data td:first-child{
  position:sticky;
  left:0;
  background:var(--card-ivory);
}

.figure{ display:grid; gap:8px; margin:0; }
.figure__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid var(--hair-dark-strong);
  background:linear-gradient(150deg,var(--deep-teal) 0%,var(--ink-field) 72%);
}
.figure__frame img,
.figure__frame svg,
.figure__frame video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.figure__frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 82% 0%,rgba(53,240,160,.12),transparent 60%),
    linear-gradient(180deg,transparent 52%,rgba(5,25,26,.58));
}
.figure__cap{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--slate-green);
}
.figure--wide .figure__frame{ aspect-ratio:16/9; }
.figure--tall .figure__frame{ aspect-ratio:3/5; }
.figure--square .figure__frame{ aspect-ratio:1/1; }

details.fold{ border-top:1px solid var(--hair-dark); padding:12px 0; }
details.fold summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  list-style:none;
}
details.fold summary::-webkit-details-marker{ display:none; }
details.fold summary::after{
  content:"+";
  font-family:var(--font-mono);
  color:var(--neon-grass);
}
details.fold[open] summary::after{ content:"–"; }
.section--ivory details.fold{ border-top-color:var(--hairline-cool); }
.section--ivory details.fold summary::after{ color:var(--deep-teal); }

/* ---------- 8. Footer ---------- */
.site-foot{
  background:var(--pitch-teal);
  border-top:1px solid var(--hair-dark-strong);
  color:var(--card-ivory);
}
.site-foot__inner{
  max-width:1240px;
  margin:0 auto;
  padding:clamp(32px,5vw,56px) var(--gutter) 24px;
}
.foot__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
}
.foot__lockup{
  font-family:var(--font-narrow);
  font-size:clamp(18px,3vw,22px);
  font-weight:800;
  letter-spacing:.01em;
  color:var(--card-ivory);
}
.foot__closing{ font-size:14px; letter-spacing:.02em; color:var(--neon-grass); }

.foot__cols{
  display:grid;
  gap:28px 32px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--hair-dark);
}
.foot__col{ min-width:0; }
.foot__title{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-on-dark);
}
.foot__title-idx{ color:var(--neon-grass); }
.foot__list{
  display:grid;
  gap:8px;
  font-size:14px;
  color:var(--card-ivory);
}
.foot__list--mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  letter-spacing:.02em;
}
.foot__list--nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.foot__list--nav a{
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.foot__list--nav a:hover{ color:var(--neon-grass); border-bottom-color:var(--neon-grass); }
.foot__list--note{ color:var(--muted-on-dark); font-size:13px; }
.foot__mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.foot__key{
  display:inline-block;
  min-width:3.4em;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--slate-green);
}
.foot__note{
  margin:12px 0 0;
  font-size:12px;
  line-height:1.7;
  color:var(--muted-on-dark);
}
.foot__base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--hair-dark);
  font-size:12px;
  color:var(--muted-on-dark);
}
.foot__base-line{ margin:0; }
.foot__base-line--muted{ color:var(--slate-green); }

/* ---------- 9. Tablet & desktop ---------- */
@media (min-width:900px){
  body{ padding-top:0; padding-left:var(--rail-w); }
  #main-content{ scroll-margin-top:24px; }

  .site-head{
    right:auto;
    bottom:0;
    width:var(--rail-w);
    display:flex;
    flex-direction:column;
    border-bottom:0;
    border-right:1px solid var(--hair-dark-strong);
  }
  .cmdbar{ flex:0 0 auto; }
  .nav-toggle{ display:none; }
  .brand{ display:block; }
  .brand__short{ display:none; }
  .brand__mark{
    display:block;
    font-family:var(--font-narrow);
    font-size:11px;
    line-height:1.35;
    letter-spacing:.06em;
    color:var(--card-ivory);
  }
  .brand:hover .brand__mark{ color:var(--neon-grass); }

  .site-head[data-open] .rail,
  .rail{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    border-top:0;
  }

  .nav__list{ grid-template-columns:minmax(0,1fr); }
  .nav__item:nth-child(odd){ border-right:0; }
  .nav__link{ padding:10px 12px; }

  .rail__ticks{
    flex-direction:column;
    align-items:stretch;
    overflow-x:visible;
    white-space:normal;
    padding:12px 0 20px;
  }
  .rail__ticks-label{ padding:0 12px; margin-bottom:8px; }
  .rail__tick{
    padding:5px 12px;
    border-left:0;
    border-top:1px solid var(--hair-dark);
  }
  .rail__tick--y{ font-size:18px; padding-top:8px; padding-bottom:8px; }

  .progress{ left:0; right:0; }
}

@media (max-width:899px){
  .section{ padding:36px 0; }
  .sec-head{ grid-template-columns:auto 1fr; }
  .sec-lede{ grid-column:1 / -1; }
  .col-4,.col-5,.col-6,.col-7,.col-8{ grid-column:span 12; }
  .foot__cols{ grid-template-columns:minmax(0,1fr); }
}

@media (min-width:640px) and (max-width:899px){
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:900px){
  .foot__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}