/* ============================================================
   ACID BRUTALIST — Champions of the Sun
   Shared stylesheet for leaderboards.html + live.html.
   Faithful to sketches/06-acid-brutalist; responsive three-tier
   follows sketches/02-broadcast-condensed's pattern:
   mobile-first -> >=768px app column -> >=1000px desktop app.
   ============================================================ */

:root{
  --bg:#0b0b0b;
  --ink:#f5f5f5;
  --dim:#777;
  --acc:#ccff00;
  --line:#262626;
  --gold:#ffc531;   /* PROVISIONAL pill */
  --red:#ff5555;    /* movement down + staleness */
  --mono:ui-monospace,'Cascadia Mono','Courier New',monospace;
}

/* Web font served from OUR server (fonts/archivo-var.woff2, variable
   weight 400-900). Google Fonts was a single point of failure: if it
   stalls or gets blocked on a phone, fallback glyphs (wider + taller
   line boxes) silently break every measured alignment. font-display
   block = never lay out with fallback glyphs. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:100%;
  font-display:block;
  src:url('../fonts/archivo-var.woff2') format('woff2');
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scrollbar-gutter:stable} /* no horizontal wobble when a short page drops the scrollbar */
html,body{background:var(--bg)}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--ink);
  display:flex;justify-content:center;
  min-height:100vh;
}
::selection{background:var(--acc);color:#000}

/* app column (mobile-first: full width up to 430px) */
.app{
  width:100%;max-width:430px;
  min-height:100vh;position:relative;
  background:var(--bg);
  padding-bottom:86px; /* footer clearance */
}

/* ---------------- header ---------------- */
header{padding:20px 0 12px;border-bottom:2px solid var(--ink)}
.brand{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 18px;
  font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--dim);text-transform:uppercase;
}
.hnav{display:none;gap:18px}
.hnav a,.hnav span{
  color:var(--dim);text-decoration:none;
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}
.hnav a.on{color:var(--acc)}
.hnav .dis{color:#3d3d3d}
h1{
  font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.02em;text-transform:uppercase;
  padding:10px 18px 0;
  white-space:nowrap; /* titles NEVER wrap: header stack identical at every width */
}
h1 b{color:var(--acc)}
/* one scale for BOTH pages: single-line titles on phones, big on desktop */
@media (min-width:768px){h1{font-size:40px}}
.meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding:0 18px;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;
}
.pill{
  font-weight:900;font-size:11px;letter-spacing:.16em;
  padding:4px 10px;border:2px solid;text-transform:uppercase;
  white-space:nowrap;
}
.pill.prov{color:var(--gold);border-color:var(--gold)}
.pill.final{background:var(--acc);border-color:var(--acc);color:#000}
.pill.live{background:var(--acc);border-color:var(--acc);color:#000}

/* ---------------- marquee ticker ---------------- */
/* REMOVED (commissioner: fluff wasting space) — js/marquee.js kept on disk
   in case it returns. */

/* ---------------- board rail / chips ---------------- */
/* sticky: tabs stay visible while scrolled (commissioner fix) */
.chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:14px 18px 12px;scrollbar-width:none;
  position:sticky;top:0;z-index:25;
  background:var(--bg);
  border-bottom:2px solid var(--ink);
}
.chips::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:var(--bg)}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;cursor:pointer;white-space:nowrap;
  font-family:inherit;
  font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--line);color:var(--dim);
  padding:9px 13px;background:transparent;
}
.chip.on{background:var(--acc);color:#000;border-color:var(--acc)}

/* ---------------- rank rows (leaderboards) ---------------- */
main{padding:8px 18px}
/* HARD height: text metrics must never decide row geometry. Every row on
   the site is exactly 53px on phones/tablet, 55px tablet-tier, 49px desktop
   — identical in BOARDS and LIVE, on every engine, on every device. */
.row{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
  height:53px;min-height:53px;max-height:53px;
}
.rk{font-weight:900;font-size:13px;line-height:16px;color:var(--dim);font-variant-numeric:tabular-nums}
/* rank-1 accent only on BOARDS rows; LIVE never colors the leader rank */
.row.r1 .rk{color:var(--acc)}
/* survivor status dots (alive=acid, eliminated=red) */
.rk .dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.rk .dot.alive{background:var(--acc)}
.rk .dot.out{background:var(--red)}
.tt{min-width:0}
.tn{
  font-weight:800;font-size:clamp(11px, 3.6vw, 15px);line-height:16px;
  letter-spacing:-.01em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vt{text-align:right}
.v1{font-weight:900;font-size:18px;line-height:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.r1 .tn{color:var(--acc)}
.v2{
  font-size:10px;color:var(--gold);font-weight:700;margin-top:1px;
  font-family:var(--mono);letter-spacing:.02em;
}
.row.out .tn,.row.out .v1{color:var(--dim)}

/* ---------------- empty / loading ---------------- */
.empty{
  border:2px dashed var(--acc);
  padding:28px 24px;margin:10px 0;text-align:center;
  color:var(--dim);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;
}
.empty b{color:var(--acc);font-weight:900}
.loading{
  padding:24px 0;color:var(--dim);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:12px;
}

/* ---------------- updated stamp ---------------- */
.updated{
  padding:12px 18px;
  font-size:11px;color:var(--dim);font-weight:600;
  letter-spacing:.06em;font-family:var(--mono);
}

/* ---------------- bottom tab bar ---------------- */
footer{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;background:var(--bg);
  border-top:2px solid var(--ink);
  display:flex;z-index:30;
  padding:10px 0 calc(12px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;text-align:center;cursor:pointer;text-decoration:none;
  font-weight:800;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.tab .ic{display:block;font-size:17px;margin-bottom:3px}
.tab.on{color:var(--acc)}
.tab .soon{display:block;font-size:8px;letter-spacing:.3em;color:var(--acc);margin-top:2px}
.tab.dis{color:#3d3d3d;cursor:default}

/* ---------------- live page: section views (tab-swapped) ---------------- */
.livemain .view{display:none}
.livemain .view.on{display:block}
.sechead{
  font-size:11px;font-weight:800;letter-spacing:.2em;
  color:var(--dim);text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:8px;
}
/* score-list rows (PROJECTED/ACTUAL): rank | name+meter | score */
#projected-list .srow,#actual-list .srow{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
  height:53px;min-height:53px;max-height:53px;
}
/* standings rows: rank | name(+reserved subtext) | movement | record-stack */
#standings-list .srow{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--line);
  height:53px;min-height:53px;max-height:53px;
}
/* ALL live rows share the boards' roomy row height */
@media (min-width:1000px){
  #projected-list .srow,#actual-list .srow,#standings-list .srow{
    height:49px;min-height:49px;max-height:49px;padding:7px 0;
  }
  .row{height:49px;min-height:49px;max-height:49px;padding:7px 0}
}
/* tablet tier: BOARDS' two-line rows compute 55px here — LIVE matches */
@media (min-width:768px) and (max-width:999px){
  .row,#projected-list .srow,#actual-list .srow,#standings-list .srow{
    height:55px;min-height:55px;max-height:55px;
  }
}
.smain{min-width:0}
.sname{
  font-weight:800;font-size:clamp(11px, 3.6vw, 15px);line-height:16px;
  letter-spacing:-.01em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sval{font-weight:900;font-size:18px;line-height:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.srow>.sval{
  text-align:right;white-space:nowrap;
  /* no extra padding: same value-column width as BOARDS' .vt so names get
     identical room (the grid's 10px gap is the separation, as on BOARDS) */
}
.ts{
  font-size:10px;color:var(--gold);font-weight:600;margin-top:2px;
  line-height:11px;font-family:var(--mono);letter-spacing:.02em;
}
/* starter meter: played=blue, playing=green(acid), yet=gray — 9 segments.
   Box geometry MUST equal .ts (2px margin + 11px line) so the team name
   lands on the same pixel in every list on the site. */
.meter{
  display:flex;align-items:center;gap:3px;margin-top:2px;height:11px;
  margin-right:18px; /* breathing room before the score column; comes off the
                        meter, never off the team-name width */
}
.meter i{height:5px;flex:1;border-radius:1px}
.meter .s-played{background:#4da3ff}
.meter .s-playing{background:var(--acc)}
.meter .s-yet{background:#2a2a2a}
/* standings: rank-change column before the record/points stack */
.smv{
  width:36px;text-align:right;margin-right:22px;
  font-weight:800;font-size:12px;letter-spacing:.04em;
}
.srec{text-align:right}
.srec .sval{font-size:17px}
.srec .ts{margin-top:1px}
/* bottom-half cut line (mirrors the bot's live PNG divider) */
.halfdiv{
  display:flex;align-items:center;gap:12px;
  padding:9px 0 8px;margin:2px 0;
  color:var(--dim);
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
}
.halfdiv::before,.halfdiv::after{content:"";flex:1;height:1px;background:var(--line)}
.mv-up{color:var(--acc)}
.mv-dn{color:var(--red)}
.mv-fl{color:var(--dim)}

/* ---------------- staleness banner (live) ---------------- */
.stale{
  display:none;margin:10px 18px 0;
  border:2px solid var(--red);color:var(--red);
  padding:12px 14px;font-weight:800;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  animation:blink 1.2s steps(2,start) infinite;
}
.stale.on{display:block}
@keyframes blink{to{visibility:hidden}}

/* ============================================================
   TIER 2 — TABLET (>=768px): wider app column, larger type
   ============================================================ */
@media (min-width:768px){
  .app{max-width:700px}
  header{padding:22px 0 14px}
  .brand,.meta{padding-left:30px;padding-right:30px}
  h1{font-size:52px;padding:10px 30px 0}
  .chips{padding:16px 30px 14px}
  main{padding:12px 30px}
  .updated{padding:12px 30px}
  .stale{margin:12px 30px 0}
  footer{max-width:700px}
  .tn{font-size:17px}
  .v1{font-size:21px}
  .sname{font-size:16px}
  .sval{font-size:19px}
}

/* ============================================================
   TIER 3 — DESKTOP (>=1000px): full app, no bottom tab bar.
   Boards page: two-pane grid (vertical board rail + content).
   Live page: full-width header/ticker, centered wide content,
   dual panes side by side.
   ============================================================ */
@media (min-width:1000px){
  /* a normal website: centered 1200px frame, not edge-to-edge rows */
  .app{max-width:1200px;padding-bottom:0;border-left:2px solid var(--line);border-right:2px solid var(--line)}
  footer{display:none}
  .hnav{display:flex}

  /* --- both pages: horizontal chips up top, no side panel --- */
  header{padding:16px 32px 12px}
  .brand{padding:0 32px}
  h1{font-size:48px;padding:8px 32px 0}
  /* real, clickable page nav on desktop */
  .hnav{gap:10px}
  .hnav a,.hnav span{
    font-size:12px;padding:9px 16px;
    border:2px solid var(--line);
  }
  .hnav a.on{border-color:var(--acc)}
  .hright{align-items:center}
  .brand{align-items:center}
  /* chips strip shares the same 32px rhythm as header/main */
  .app .chips{padding-left:32px;padding-right:32px}

  main{padding:14px 32px 10px}
  .updated{padding:10px 32px}
  /* uniform compact rows: all 14 teams visible without scrolling.
     49px = the natural height of a two-line row (Record/HSOTW) so every
     board's rows share the roomiest height. */
  .row{min-height:49px;padding:7px 0}
  .tn{font-size:16px;line-height:18px}
  .ts{font-size:10.5px;line-height:11px}
  .v1{font-size:20px;line-height:22px}
  .sval{font-size:20px;line-height:22px}
  .v2{font-size:10px;line-height:11px}
  .sname{font-size:16px;line-height:18px}
  .rk{font-size:13px;line-height:16px}

  /* --- live page: all three views same anatomy, centered --- */
  .livemain{max-width:none;width:100%}
  .stale{margin:12px 32px 0}
}

@media (prefers-reduced-motion:reduce){
  .marq span{animation:none}
  .stale{animation:none}
}