/* SPARO board page stylesheet (index.html only)
   Loaded after sparo.css and card.css. Declares the design-language tokens
   (docs/superpowers/specs/2026-09-19-sparo-design-language.md §2, verbatim) and
   every board rule. Absolute rule: nothing in this file draws a border, an inset
   ring, a divider, an underline or an outline, things are separated by fill.
   ───────────────────────────────────────────────────────────────────────── */

/* ===================== 1. TOKENS (language §2) ===================== */
:root{
  --ui:1;

  /* 2.1 colour */
  --bg-base:#0B0D10; --ink:#FFFFFF; --ink-2:#A8B1BF; --ink-3:rgba(255,255,255,.62);
  --brand:#41B9F1; --brand-rgb:65,185,241;
  --m-technique:#AF9312; --m-guard:#26966A; --m-speed:#4999D3; --m-precision:#CC6CA7; --m-complete:#C5CAD3;
  --m-technique-rgb:175,147,18; --m-guard-rgb:38,150,106; --m-speed-rgb:73,153,211;
  --m-precision-rgb:204,108,167; --m-complete-rgb:197,202,211;

  /* 2.2 metals */
  --gold-1:#E5C15A;   --gold-2:#AF9312;   --gold-hi:#FFF6DA;
  --silver-1:#E6EAF0; --silver-2:#9AA3B2; --silver-hi:#FFFFFF;
  --bronze-1:#D9A06B; --bronze-2:#B07A45; --bronze-hi:#FFE7CD;
  --fill-1:linear-gradient(180deg,rgba(229,193,90,.18) 0%,rgba(229,193,90,.05) 100%);
  --fill-2:linear-gradient(180deg,rgba(230,234,240,.12) 0%,rgba(230,234,240,.035) 100%);
  --fill-3:linear-gradient(180deg,rgba(217,160,107,.12) 0%,rgba(217,160,107,.035) 100%);

  /* 2.3 surfaces */
  --glass-fill:rgba(10,12,15,.40);
  --glass-blur:blur(12px) saturate(1.15);
  --grain:none;                                  /* written at boot by SPARO.atmosphere.installGrain() */
  --fill-row:rgba(255,255,255,.028);
  --fill-pill:rgba(255,255,255,.055);
  --fill-track:rgba(255,255,255,.055);
  --fill-track-mini:rgba(255,255,255,.06);
  --fill-focus:rgba(255,255,255,.10);
  --sh-panel:0 26px 64px -34px rgba(0,0,0,.85);
  --sh-lift:0 20px 48px -22px rgba(0,0,0,.9);
  --sh-focus:0 0 24px 2px rgba(65,185,241,.45);

  /* 2.4 radii + spacing scale */
  --r-pill:999px;
  --r-panel:max(14px,calc(20px*var(--ui)));
  --r-pod:max(14px,calc(18px*var(--ui)));
  --r-col:max(14px,calc(16px*var(--ui)));
  --r-row:calc(12px*var(--ui)); --r-feed:calc(10px*var(--ui)); --r-chip:calc(6px*var(--ui));
  --r-bar:3px; --r-bar-mini:2px;
  --s-1:calc(4px*var(--ui));  --s-2:calc(6px*var(--ui));  --s-3:calc(8px*var(--ui));  --s-4:calc(10px*var(--ui));
  --s-5:calc(12px*var(--ui)); --s-6:calc(14px*var(--ui)); --s-7:calc(16px*var(--ui)); --s-8:calc(18px*var(--ui));
  --s-9:calc(20px*var(--ui)); --s-10:calc(22px*var(--ui)); --s-11:calc(24px*var(--ui)); --s-12:calc(26px*var(--ui));
  --s-13:calc(30px*var(--ui)); --s-14:calc(36px*var(--ui));

  /* 2.5 type: families remapped so sparo.css / card.css rules speak Broadcast on this page */
  --f-display:'Barlow Condensed',sans-serif; --f-text:'Barlow',sans-serif;
  --cond:var(--f-display); --font:var(--f-text); --mono:var(--f-text);
  --t-wordmark:max(12px,calc(40px*var(--ui)));
  --t-h2:max(12px,calc(29px*var(--ui)));
  --t-count:max(12px,calc(44px*var(--ui)));
  --t-podscore-1:max(12px,calc(47px*var(--ui)));
  --t-podscore:max(12px,calc(36px*var(--ui)));
  --t-podname-1:max(12px,calc(25px*var(--ui)));
  --t-podname:max(12px,calc(21px*var(--ui)));
  --t-podrank-1:max(12px,calc(30px*var(--ui)));
  --t-podrank:max(12px,calc(22px*var(--ui)));
  --t-rowscore:max(12px,calc(25px*var(--ui)));
  --t-feedscore:max(12px,calc(23px*var(--ui)));
  --t-mv-1:max(12px,calc(26px*var(--ui)));
  --t-mv:max(12px,calc(22px*var(--ui)));
  --t-rank:max(12px,calc(20px*var(--ui)));
  --t-name:max(12px,calc(19px*var(--ui)));
  --t-mcol:max(18px,calc(18px*var(--ui)));      /* 18/700 is the coloured-text accessibility floor */
  --t-navlink:max(12px,calc(15px*var(--ui)));
  --t-search:max(12px,calc(15.5px*var(--ui)));
  --t-meta:max(12px,calc(12.5px*var(--ui)));
  --t-id:max(10px,calc(11px*var(--ui)));
  --t-label:max(10px,calc(10px*var(--ui)));
  --t-eyebrow:max(10px,calc(9.5px*var(--ui)));
}
@media (max-width:1599px){ :root{ --ui:.88; } }
@media (max-width:1279px){ :root{ --ui:.82; } }
@media (max-width:767px) { :root{ --ui:.68; } }

/* metal scopes + foil (language §2.2 / §3.3) */
.gold  { --m1:var(--gold-1);   --m2:var(--gold-2);   --mhi:var(--gold-hi); }
.silver{ --m1:var(--silver-1); --m2:var(--silver-2); --mhi:var(--silver-hi); }
.bronze{ --m1:var(--bronze-1); --m2:var(--bronze-2); --mhi:var(--bronze-hi); }
.foil{
  background-image:linear-gradient(100deg,var(--m2) 0%,var(--m1) 28%,var(--mhi) 44%,var(--m1) 60%,var(--m2) 92%);
  background-size:300% 100%; background-repeat:repeat-x;   /* tiled: the sweep never leaves glyphs uncovered */
  -webkit-background-clip:text; background-clip:text;
  color:var(--m1);                               /* solid-metal fallback where clip:text is unsupported */
  -webkit-text-fill-color:transparent;
  animation:sheen 7s linear infinite;
}
@keyframes sheen{ 0%{ background-position:150% 0; } 100%{ background-position:0% 0; } }   /* exactly one 300% tile per loop → seamless */

/* ===================== 2. BASE ===================== */
*:focus{ outline:none; }
:focus-visible{ outline:none; background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
button, input, select, textarea{ border:0; outline:none; font:inherit; }
html, body{ min-height:100%; }
body{
  background-color:var(--bg-base);
  background:                                   /* language §4.3 fallback, also what shows without WebGL */
    radial-gradient(88% 58% at 50% -14%, rgba(255,246,232,.10), rgba(0,0,0,0) 62%),
    radial-gradient(120% 92% at 28% 30%, rgba(65,185,241,.09), rgba(0,0,0,0) 56%),
    linear-gradient(176deg,#14171C 0%,#0B0D10 58%,#080A0D 100%);
  color:var(--ink); font-family:var(--f-text); font-variant-numeric:tabular-nums;
}
#atmo{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
h1, h2, h3, h4{ letter-spacing:normal; }

.board{
  position:relative; z-index:1; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; padding:var(--s-13); gap:var(--s-10);
}

/* ===================== 3. GLASS PANELS (language §3.1 / §7.1) ===================== */
.panel{
  position:relative; border-radius:var(--r-panel); overflow:hidden;
  background-color:var(--glass-fill);
  background-image:var(--grain); background-repeat:repeat;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-panel);
  display:flex; flex-direction:column; min-height:0;
  padding:var(--s-10) var(--s-11) var(--s-9);
}
.panel-head{ flex:none; display:flex; align-items:baseline; gap:var(--s-7); margin-bottom:var(--s-7); padding:0; }
.panel-head h2{
  font-family:var(--f-display); font-weight:700; font-size:var(--t-h2); letter-spacing:.035em;
  text-transform:uppercase; color:var(--ink); line-height:1; white-space:nowrap;
}
.panel-head .sub{
  margin-left:auto; font-family:var(--f-text); font-weight:500; font-size:var(--t-label);
  letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; flex:none;
}
a.sub{ text-decoration:none; padding:var(--s-2) var(--s-4); margin:calc(-1*var(--s-2)) calc(-1*var(--s-4)); border-radius:var(--r-pill); transition:background-color .18s ease, color .18s ease; }
a.sub:hover{ color:var(--ink); background-color:var(--fill-pill); }
a.sub:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
.main{ flex:1; display:grid; grid-template-columns:1fr 1.7fr; gap:var(--s-10); min-height:0; }
.rightcol{ display:grid; grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr); gap:var(--s-10); min-height:0; }

/* ===================== 4. TOPBAR (floats on the atmosphere, no glass) ===================== */
/* logo | search (flexible, centred) | nav links | day toggle | live + counter */
.topbar{
  flex:none; height:calc(78px*var(--ui)); display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center; gap:var(--s-12); padding:0 var(--s-2);
}

/* day filter (language §3.1 glass pill; the pressed segment is a brand-tinted fill, no outline) */
.day-toggle{
  display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--r-pill);
  background-color:var(--glass-fill); background-image:var(--grain); background-repeat:repeat;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-panel);
}
.day-btn{
  appearance:none; border:0; margin:0; cursor:pointer; min-height:38px;
  padding:var(--s-2) var(--s-6); border-radius:var(--r-pill); background-color:transparent;
  font-family:var(--f-text); font-weight:500; font-size:var(--t-navlink); letter-spacing:.01em; color:#D2D8E2;
  white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:background-color .18s ease, color .18s ease;
}
.day-btn:hover{ background-color:var(--fill-pill); color:var(--ink); }
.day-btn[aria-pressed="true"]{ background-color:rgba(var(--brand-rgb),.22); color:#EAF7FF; font-weight:700; }
.day-btn:focus-visible{ outline:none; background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
.brand{ position:relative; display:flex; align-items:center; gap:var(--s-6); user-select:none; -webkit-user-select:none; }
.brand .ev{ display:none; }
.brand-logo{ height:calc(34px*var(--ui)); width:auto; flex:none; object-fit:contain; }

.topnav{ display:flex; align-items:center; gap:var(--s-1); min-width:0; }
.nav-btn{
  display:inline-flex; align-items:center; gap:var(--s-3); flex:none; min-height:44px;
  font-family:var(--f-text); font-weight:500; font-size:var(--t-navlink); letter-spacing:.005em; color:#D2D8E2;
  padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); white-space:nowrap; cursor:pointer;
  transition:background-color .18s ease;
}
.nav-btn:hover{ background-color:var(--fill-pill); }

/* search pill (language §7.9): fills the flexible column, capped so it stays a pill, not a bar */
.searchwrap{ position:relative; width:100%; max-width:540px; min-width:0; margin:0 auto; justify-self:center; }
.searchbar{
  display:flex; align-items:center; gap:calc(13px*var(--ui)); width:100%;
  height:calc(48px*var(--ui)); min-height:44px; padding:0 var(--s-10); border-radius:var(--r-pill);
  background-color:var(--fill-pill);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  cursor:text; transition:background-color .18s ease, box-shadow .18s ease;
}
.searchbar:focus-within{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
.searchbar > svg{ width:calc(19px*var(--ui)); height:calc(19px*var(--ui)); color:var(--ink-2); flex:none; }
.searchbar input{
  flex:1; min-width:0; background:transparent; color:var(--ink); padding:0; text-overflow:ellipsis;
  font-family:var(--f-text); font-weight:400; font-size:var(--t-search);
}
.searchbar input::placeholder{ color:var(--ink-2); }
.searchbar input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
/* results dropdown: glass panel under the pill, up to 8 rows, each a link to the card page */
.searchpanel{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:40;
  display:none; flex-direction:column; gap:var(--s-1); padding:var(--s-4);
  border-radius:var(--r-panel); background-color:var(--glass-fill); background-image:var(--grain);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--sh-lift);
}
.searchpanel.on{ display:flex; }
.sugg{
  display:flex; align-items:center; gap:var(--s-5); padding:var(--s-3) var(--s-4); border-radius:var(--r-row);
  cursor:pointer; min-height:44px; text-decoration:none; color:inherit; transition:background-color .15s ease;
}
.sugg:hover, .sugg:focus-visible{ background-color:var(--fill-pill); }
.sugg .snm{ font-family:var(--f-display); font-weight:600; font-size:var(--t-name); letter-spacing:.015em; text-transform:uppercase; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sugg .sid{ font-family:var(--f-text); font-size:var(--t-id); letter-spacing:.02em; color:var(--ink-2); flex:none; }
.sugg .ssc{ margin-left:auto; font-family:var(--f-display); font-weight:700; font-size:var(--t-rowscore); color:var(--ink); font-variant-numeric:tabular-nums; flex:none; }
.searchmsg{ display:none; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); font-size:var(--t-meta); color:var(--ink-2); }
.searchmsg.on{ display:flex; }

/* status cluster */
.status{ display:flex; align-items:center; gap:var(--s-12); justify-self:end; }
.live-chip{
  display:flex; align-items:center; gap:calc(9px*var(--ui));
  font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:#CFE9F8;
}
.live-chip .livedot{
  width:9px; height:9px; border-radius:var(--r-pill); background:var(--brand); flex:none;
  box-shadow:0 0 12px rgba(var(--brand-rgb),.55);
  animation:pulseDot 2.6s ease-in-out infinite;                 /* replaces sparo.css livepulse here only */
}
@keyframes pulseDot{ 0%,100%{ opacity:.45; transform:scale(.82); } 50%{ opacity:1; transform:scale(1); } }
.counter{ text-align:right; line-height:1; }
.counter .c-num{ font-family:var(--f-display); font-weight:700; font-size:var(--t-count); letter-spacing:.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.counter .c-num.bump{ animation:bump .5s ease; }
@keyframes bump{ 0%{ transform:scale(1); } 30%{ transform:scale(1.18); color:var(--brand); } 100%{ transform:scale(1); } }
.counter .c-lab{ font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2); margin-top:5px; }

/* ===================== 5. AVATAR DISC (language §7.4) ===================== */
/* board.ts emits <div class="avatar" data-arch style="--dsz:64px"><svg …icon…></svg></div> */
.avatar{
  width:calc(var(--dsz,44px)*var(--ui)); height:calc(var(--dsz,44px)*var(--ui));
  border-radius:var(--r-pill); display:grid; place-items:center; flex:none;
  box-shadow:none; background:rgba(255,255,255,.06); color:var(--ink-3); font-family:var(--f-display);
}
.avatar > svg{ width:52%; height:52%; display:block; }
.avatar[data-arch="fast"]    { color:var(--m-speed);     background:rgba(var(--m-speed-rgb),.18); }
.avatar[data-arch="counter"] { color:var(--m-precision); background:rgba(var(--m-precision-rgb),.18); }
.avatar[data-arch="iron"]    { color:var(--m-guard);     background:rgba(var(--m-guard-rgb),.18); }
.avatar[data-arch="heavy"]   { color:var(--m-technique); background:rgba(var(--m-technique-rgb),.18); }
.avatar[data-arch="complete"]{ color:var(--m-complete);  background:rgba(var(--m-complete-rgb),.18); }
.avatar:not([data-arch]){ opacity:.5; }                        /* placeholder disc */
/* ===================== 6. TOP SCORES: PODIUM (language §7.3) ===================== */
#lb{ flex:1; min-height:0; display:flex; flex-direction:column; padding:0; gap:0; }
.lb-waiting{
  display:flex; align-items:center; justify-content:center; flex:1;
  font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2);
}
.lb-podium{
  flex:none; height:calc(292px*var(--ui)); display:grid; grid-template-columns:1fr 1.18fr 1fr;
  align-items:end; gap:var(--s-5); margin-bottom:var(--s-6); padding:0;
}
/* .pod is the grid cell, sized to its card so .pod-base can overlay the card's top */
.pod{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.pod-1{ height:calc(292px*var(--ui)); --m1:var(--gold-1);   --m2:var(--gold-2);   --mhi:var(--gold-hi); }
.pod-2{ height:calc(244px*var(--ui)); --m1:var(--silver-1); --m2:var(--silver-2); --mhi:var(--silver-hi); }
.pod-3{ height:calc(230px*var(--ui)); --m1:var(--bronze-1); --m2:var(--bronze-2); --mhi:var(--bronze-hi); }
.pod-card{
  position:relative; overflow:hidden; width:100%; height:100%; border-radius:var(--r-pod);
  padding:calc(43px*var(--ui)) var(--s-5) calc(15px*var(--ui));
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:5px;
  box-shadow:none; transform:none;
}
.pod-1 .pod-card{ padding-top:calc(51px*var(--ui)); background-image:var(--fill-1); }
/* ranks 2/3 are 244/230px tall: 60px disc and a 40px numeral band keep the whole stack inside the card */
.pod-2 .pod-card, .pod-3 .pod-card{ padding-top:calc(40px*var(--ui)); }
.pod-2 .pod-avatar, .pod-3 .pod-avatar{ width:calc(60px*var(--ui)); height:calc(60px*var(--ui)); }   /* inline --dsz is 64 */
.pod-2 .pod-score, .pod-3 .pod-score{ margin-top:0; }
.pod-2 .pod-card{ background-image:var(--fill-2); }
.pod-3 .pod-card{ background-image:var(--fill-3); }
.pod-card > *{ position:relative; z-index:2; flex:none; }
.pod-card > .haze, .pod-card > .pod-pool{ position:absolute; z-index:0; }
.pod-card::before{ position:absolute; z-index:1; }   /* spotlight wash sits above the haze, below content */
.haze{ inset:0; width:100%; height:100%; pointer-events:none; border-radius:inherit; }
/* idle spotlight: fill-only, cross-faded (no ring) */
.pod-card::before{
  content:""; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(122% 80% at 50% 0%, rgba(var(--brand-rgb),.13), rgba(0,0,0,0) 74%);
}
.pod.spot .pod-card::before{ opacity:1; }

/* foil rank numeral overlaid on the top of the card */
.pod-base{
  position:absolute; top:var(--s-7); left:0; right:0; z-index:2; width:auto; height:auto;
  display:grid; place-items:center; pointer-events:none; background:none; box-shadow:none;
}
.pod-rankn{ font-family:var(--f-display); font-weight:700; font-size:var(--t-podrank); letter-spacing:.06em; line-height:1; color:var(--m1); text-shadow:none; opacity:1; }
.pod-1 .pod-rankn{ font-size:var(--t-podrank-1); }

.pod-avatarwrap{ position:relative; display:grid; place-items:center; margin:0; }
.pod-avatarwrap .avatar{ z-index:1; }
.pod-laurel{
  position:absolute; left:50%; top:50%; width:calc(134px*var(--ui)); height:calc(134px*var(--ui));
  transform:translate(-50%,-50%); pointer-events:none; display:block; z-index:0;
}
.pod-medal{ display:none; }
.pod-name{
  font-family:var(--f-display); font-weight:700; font-size:var(--t-podname); letter-spacing:.015em; text-transform:uppercase;
  line-height:1.05; color:var(--ink); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pod-1 .pod-name{ font-size:var(--t-podname-1); }
.pod .pod-badge[data-arch], .pod .pod-badge{
  font-family:var(--f-text); font-weight:500; font-size:var(--t-eyebrow); letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; padding:0; border-radius:0;
}
.pod-score{ font-family:var(--f-display); font-weight:700; font-size:var(--t-podscore); letter-spacing:.005em; line-height:1; margin-top:2px; color:var(--m1); }
.pod-1 .pod-score{ font-size:var(--t-podscore-1); animation:sheen 7s linear infinite, breathe 8s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ filter:brightness(.90); } 50%{ filter:brightness(1.06); } }
.pod-sub{ font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--ink-2); }
.pod-bars{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; margin-top:9px; padding:0 4px; }
.pod-1 .pod-bars{ margin-top:11px; }
.pod-bar{ display:block; height:4px; border-radius:var(--r-bar-mini); background:var(--fill-track-mini); overflow:hidden; }
.pod-bar i{ display:block; height:100%; border-radius:var(--r-bar-mini); }
.pod-pool{
  left:50%; bottom:-22px; width:150%; height:74px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(229,193,90,.42), rgba(0,0,0,0) 70%); filter:blur(18px);
}

/* crown: rank-1 celebration, sits on the card's top edge */
.pod .crown{ display:none; }
.pod-1 .crown{
  display:block; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:32px; height:32px;
  color:#E5C15A; z-index:5; opacity:1; filter:drop-shadow(0 3px 8px rgba(229,193,90,.55));
}
.pod-1 .crown.drop{ animation:podCrownPop .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes podCrownPop{ 0%{ opacity:0; transform:translateX(-50%) translateY(-12px) scale(.6); } 60%{ opacity:1; } 100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }

/* empty podium slots */
.pod-empty{ opacity:.34; }
.pod-1.pod-empty .pod-card{ background-image:linear-gradient(180deg,rgba(229,193,90,.09) 0%,rgba(229,193,90,.025) 100%); }
.pod-2.pod-empty .pod-card{ background-image:linear-gradient(180deg,rgba(230,234,240,.06) 0%,rgba(230,234,240,.018) 100%); }
.pod-3.pod-empty .pod-card{ background-image:linear-gradient(180deg,rgba(217,160,107,.06) 0%,rgba(217,160,107,.018) 100%); }
.pod-empty .pod-name, .pod-empty .pod-score, .pod-empty .pod-rankn{ color:var(--ink-3); }

/* ===================== 7. TOP SCORES: ROWS (language §7.2) ===================== */
.lb-list{ flex:1; display:flex; flex-direction:column; min-height:0; }
.row{
  flex:1; min-height:0; position:relative;
  display:grid; grid-template-columns:calc(32px*var(--ui)) calc(44px*var(--ui)) minmax(0,1fr) auto;
  align-items:center; gap:var(--s-6); padding:0 var(--s-5); border-radius:var(--r-row);
  transition:background-color .3s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.row:nth-child(odd){ background-color:var(--fill-row); }
.row .rank{ font-family:var(--f-display); font-weight:600; font-size:var(--t-rank); text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ident{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ident .nameline{ display:flex; align-items:center; gap:var(--s-4); min-width:0; }
.ident .nm{
  font-family:var(--f-display); font-weight:600; font-size:var(--t-name); letter-spacing:.015em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.ident .fid{ flex:none; font-family:var(--f-text); font-size:var(--t-id); letter-spacing:.02em; color:var(--ink-2); }
.ident .meta{ display:flex; align-items:center; gap:var(--s-4); }
.badge{ font-family:var(--f-text); font-weight:700; font-size:var(--t-label); letter-spacing:.09em; padding:3px 8px; border-radius:var(--r-chip); }
.scorebox{ display:flex; align-items:center; gap:var(--s-5); }
.scorebox .sc{ font-family:var(--f-display); font-weight:700; font-size:var(--t-rowscore); min-width:calc(60px*var(--ui)); text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.sc.flash{ animation:scflash .8s ease; }
.pod-score.foil.flash{ animation:scflash .8s ease, sheen 7s linear infinite; }
.pod-1 .pod-score.foil.flash{ animation:scflash .8s ease, sheen 7s linear infinite, breathe 8s ease-in-out infinite; }
@keyframes scflash{ 0%{ filter:brightness(1.7); transform:scale(1.14); } 100%{ filter:brightness(1); transform:scale(1); } }
.row-empty{ opacity:.34; }
.row-empty .nm, .row-empty .sc{ color:var(--ink-3); }
.row.spot{ background-color:rgba(var(--brand-rgb),.11); }
.row.top1.spot{ background-color:rgba(var(--brand-rgb),.14); }

/* podium celebration (durations are hand-tuned in board.ts, keep in sync) */
.row.podium-enter, .pod.podium-enter{ z-index:6; }
.row.podium-enter{ animation:podiumRow 3s ease both; }
@keyframes podiumRow{
  0%  { transform:scale(1); }
  8%  { transform:scale(1.035); background-color:color-mix(in oklab, var(--celebrate) 22%, transparent); }
  50% { background-color:color-mix(in oklab, var(--celebrate) 14%, transparent); }
  100%{ transform:scale(1); }
}
.sc.stamp{ animation:scoreStamp .45s cubic-bezier(.3,1.4,.5,1) both; }
.pod-score.foil.stamp{ animation:scoreStamp .45s cubic-bezier(.3,1.4,.5,1) both, sheen 7s linear infinite; }
.pod-1 .pod-score.foil.stamp{ animation:scoreStamp .45s cubic-bezier(.3,1.4,.5,1) both, sheen 7s linear infinite, breathe 8s ease-in-out infinite; }
@keyframes scoreStamp{ 0%{ transform:scale(1); } 45%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.badge.burst{ animation:badgeBurst .35s ease both; }
@keyframes badgeBurst{ 0%{ transform:scale(1); } 50%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.particle{
  position:absolute; width:8px; height:8px; border-radius:var(--r-pill); background:var(--celebrate);
  pointer-events:none; z-index:7; animation:particleFly .7s ease-out forwards;
}
@keyframes particleFly{ 0%{ opacity:1; transform:translate(0,0) scale(1); } 100%{ opacity:0; transform:translate(var(--px),var(--py)) scale(.4); } }
.podium-flash{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; background:var(--celebrate, var(--brand)); }
.podium-flash.go{ animation:flashFs .42s ease both; }
@keyframes flashFs{ 0%{ opacity:0; } 30%{ opacity:.15; } 100%{ opacity:0; } }

/* ===================== 8. METRIC LEADERS ===================== */
#metrics{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-7); padding:0; }
.mcol{
  display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; position:relative;
  border-radius:var(--r-col); padding:var(--s-6) var(--s-6) var(--s-5); box-shadow:none;
  background:radial-gradient(122% 80% at 50% 0%, var(--tint), rgba(0,0,0,0) 74%);   /* 15% ceiling (language §3.4) */
}
.mcol[data-metric="1"]{ --tint:rgba(var(--m-technique-rgb),.15); }
.mcol[data-metric="2"]{ --tint:rgba(var(--m-guard-rgb),.15); }
.mcol[data-metric="3"]{ --tint:rgba(var(--m-speed-rgb),.15); }
.mcol[data-metric="4"]{ --tint:rgba(var(--m-precision-rgb),.15); }
/* heading text sits on the brightest point of the 15% tint, where the raw metric colour measures 3.5–4.8:1;
   20% toward white keeps the hue and clears the 4.5:1 floor (language §8) */
.mcol{ --mc-text:color-mix(in oklab, var(--mc) 80%, #fff); }
.mcol-h{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4); padding:0; }
.mcol-h .micon-wrap{ display:grid; place-items:center; flex:none; width:auto; height:auto; background:none; box-shadow:none; border-radius:0; }
.mcol-h .micon{ width:calc(17px*var(--ui)); height:calc(17px*var(--ui)); color:var(--mc-text); flex:none; }
.mcol-h .mname{ font-family:var(--f-display); font-weight:700; font-size:var(--t-mcol); letter-spacing:.11em; text-transform:uppercase; color:var(--mc-text); line-height:1; }
.mlist{ display:flex; flex-direction:column; flex:1; min-height:0; padding:0; }
/* flat DOM (.mr .mn .mv .mbar) laid out as a 2-row grid: top line + bar */
.mitem{
  flex:1; min-height:0; display:grid; grid-template-columns:calc(32px*var(--ui)) minmax(0,1fr) auto;
  align-items:center; align-content:center; column-gap:var(--s-4); row-gap:9px;
  padding:0; border-radius:0; background:none; box-shadow:none;
}
.mitem .mr{ display:grid; place-items:center; width:auto; height:auto; background:none; box-shadow:none; color:inherit; font-size:0; }
.mitem .mn{ min-width:0; }
.mitem .mnm{
  font-family:var(--f-display); font-weight:600; font-size:var(--t-name); letter-spacing:.015em; text-transform:uppercase;
  color:var(--ink); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mitem .mid{ font-family:var(--f-text); font-size:var(--t-id); letter-spacing:.02em; color:var(--ink-2); margin-top:2px; }
.mitem .mv{ font-family:var(--f-display); font-weight:700; font-size:var(--t-mv); color:var(--ink); font-variant-numeric:tabular-nums; padding-left:2px; }
.mitem.r1 .mnm{ font-weight:700; }
.mitem.r1 .mv{ font-size:var(--t-mv-1); }
/* scoped as .mitem .mbar, card.css owns .acard-mrow .mbar and card.ts queries it */
.mitem .mbar{ grid-column:1 / -1; height:5px; border-radius:var(--r-bar); background:var(--fill-track); overflow:hidden; }
.mitem .mbar i{ display:block; height:100%; border-radius:var(--r-bar); background:var(--mc); }

/* ===================== 9. LIVE FEED ===================== */
#feed{
  flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,minmax(0,1fr));
  grid-auto-flow:column; column-gap:calc(28px*var(--ui)); padding:0;
}
.fent{
  display:grid; grid-template-columns:calc(44px*var(--ui)) minmax(0,1fr) auto auto; align-items:center;
  gap:var(--s-6); padding:0 var(--s-5); border-radius:var(--r-feed); min-height:0;
}
/* alternate fill per visual row in both columns (entries 1-5 left, 6-10 right) */
.fent:nth-child(-n+5):nth-child(odd), .fent:nth-child(n+6):nth-child(even){ background-color:var(--fill-row); }
.fent .fi{ display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-start; }
.fent .l1{ display:flex; align-items:center; gap:var(--s-3); min-width:0; max-width:100%; }
.fent .fnm{
  font-family:var(--f-display); font-weight:600; font-size:var(--t-name); letter-spacing:.015em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.fent .fid2{ font-family:var(--f-text); font-size:var(--t-id); letter-spacing:.02em; color:var(--ink-2); }
.fent .badge, .fent .badge[data-arch]{
  font-family:var(--f-text); font-weight:500; font-size:var(--t-eyebrow); letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; padding:0; border-radius:0;
}
.fent .ta{ font-family:var(--f-text); font-size:var(--t-meta); letter-spacing:.01em; color:var(--ink-2); white-space:nowrap; }
.fent .fsc{ display:flex; align-items:center; gap:var(--s-5); }
.fent .fscn{ font-family:var(--f-display); font-weight:700; font-size:var(--t-feedscore); min-width:calc(58px*var(--ui)); text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
/* one-time luminance bloom for the newest entry (2.6 s, replaces feedin) */
.fent.newentry{ animation:bloom 2.6s ease-out 1 backwards; }
/* rows, podium cards and feed entries link to /card: a hover lift, nothing drawn (language §1.2) */
a.row.lb-entry, a.fent, a.pod{ color:inherit; text-decoration:none; cursor:pointer; }
a.row.lb-entry:hover, a.fent:hover{ background-color:var(--fill-pill); }
a.row.lb-entry:focus-visible, a.fent:focus-visible, a.pod:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
@keyframes bloom{
  0%  { filter:brightness(1.55); background-color:rgba(255,255,255,.075); }
  55% { filter:brightness(1.16); background-color:var(--fill-row); }
  100%{ filter:brightness(1);    background-color:transparent; }
}
/* ===================== 10. TOAST (language §7.7) ===================== */
.toast{ position:fixed; top:calc(84px*var(--ui)); left:50%; transform:translateX(-50%); z-index:66; width:min(580px,94vw); pointer-events:none; }
.toast-card{
  --tc:var(--brand); position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-8);
  padding:var(--s-8) var(--s-10); border-radius:var(--r-panel);
  background-color:var(--glass-fill);
  background-image:radial-gradient(122% 80% at 50% 0%, color-mix(in oklab, var(--tc) 14%, transparent), rgba(0,0,0,0) 74%), var(--grain);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-lift);
  opacity:0; transform:translateY(-160%);
}
.toast-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  background-size:280% 100%; background-position:200% 0;
}
.toast-card.show{ animation:toastIn .6s cubic-bezier(.16,.9,.28,1.32) forwards; }
.toast-card.show::after{ animation:toastSheen 2.6s ease-in-out .35s; }
.toast-card.out{ animation:toastOut .42s ease forwards; }
@keyframes toastIn{ 0%{ opacity:0; transform:translateY(-160%) scale(.9); } 62%{ opacity:1; transform:translateY(7%) scale(1.015); } 100%{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-160%) scale(.95); } }
@keyframes toastSheen{ to{ background-position:-120% 0; } }
/* board.ts adds .gold/.silver/.bronze to .toast-rank and .foil to .tr-ord */
.toast-rank{
  position:relative; width:calc(68px*var(--ui)); height:calc(68px*var(--ui)); flex:none; display:grid; place-items:center;
  border-radius:var(--r-pod); background:color-mix(in oklab, var(--tc) 14%, transparent); box-shadow:none;
}
.toast-rank .tr-ord{ font-family:var(--f-display); font-weight:700; font-size:calc(30px*var(--ui)); line-height:1; color:var(--m1, var(--tc)); }
.toast-rank .tr-ord sup{ font-size:.46em; font-weight:700; }
.toast-rank .tr-up{
  position:absolute; top:-9px; right:-9px; width:26px; height:26px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--tc); color:#10141a; box-shadow:0 4px 12px -3px color-mix(in oklab, var(--tc) 80%, #000);
}
.toast-rank .tr-up svg{ width:15px; height:15px; }
.toast-body{ min-width:0; }
.toast-k{ font-family:var(--f-text); font-weight:500; font-size:var(--t-label); letter-spacing:.20em; text-transform:uppercase; color:var(--tc); display:flex; align-items:center; gap:9px; }
.toast-k .spark{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--tc); box-shadow:0 0 11px var(--tc); animation:livepulse 1.6s infinite; }
.toast-body .tt1{ font-family:var(--f-text); font-size:calc(19px*var(--ui)); line-height:1.24; margin-top:8px; color:var(--ink); }
.toast-body .tt1 b{ font-family:var(--f-display); font-weight:700; font-size:1.12em; letter-spacing:.015em; text-transform:uppercase; }
.toast-body .tt2{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.toast-body .tt2 .trk{ font-family:var(--f-text); font-size:var(--t-meta); color:var(--ink-2); }
.toast-sc{ font-family:var(--f-display); font-weight:700; font-size:calc(46px*var(--ui)); line-height:1; color:var(--tc); font-variant-numeric:tabular-nums; flex:none; text-align:right; }
.toast-sc small{ display:block; font-family:var(--f-text); font-weight:500; font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:5px; }
.confetti{ position:fixed; z-index:67; pointer-events:none; width:9px; height:14px; border-radius:2px; will-change:transform, opacity; }

/* ===================== 11. CARD REVEAL: smoke surge (REVEAL_MS = 6400) ===================== */
.card-reveal{ position:fixed; inset:0; z-index:80; pointer-events:none; display:none; }
.card-reveal.on{ display:block; }
.cr-backdrop{ position:absolute; inset:0; opacity:0; background:rgba(8,10,13,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.card-reveal.on .cr-backdrop{ animation:crBackdrop 6.4s ease both; }
@keyframes crBackdrop{ 0%{ opacity:0; } 8%{ opacity:1; } 86%{ opacity:1; } 100%{ opacity:0; } }
.cr-stage{
  --cr-scale:1.42; position:absolute; left:50%; top:50%; width:340px; margin-left:-170px; margin-top:-300px;
  will-change:transform, opacity; display:flex; flex-direction:column; align-items:center; gap:var(--s-8);
  opacity:0; transform:scale(var(--cr-scale));
}
.card-reveal.on .cr-stage{ animation:crSurge 6.4s both; }
@keyframes crSurge{
  0%      { opacity:0; transform:scale(calc(var(--cr-scale) * .92)); }
  12%, 86%{ opacity:1; transform:scale(var(--cr-scale)); }
  100%    { opacity:0; transform:scale(calc(var(--cr-scale) * 1.02)); }
}
.cr-glow{
  position:absolute; inset:-16% -10%; border-radius:50%; z-index:-1; opacity:0;
  background:radial-gradient(circle, color-mix(in oklab, var(--cc, #fff) 62%, transparent), transparent 66%); filter:blur(34px);
}
.card-reveal.on .cr-glow{ animation:crGlowIn 6.4s ease both, crGlowPulse 1.15s ease-in-out 1.6s infinite; }
@keyframes crGlowIn{ 0%,18%{ opacity:0; } 30%{ opacity:.85; } 72%{ opacity:.85; } 100%{ opacity:0; } }
@keyframes crGlowPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.cr-banner{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.cr-banner .cr-rank{
  font-family:var(--f-display); font-weight:700; font-size:64px; line-height:.82; letter-spacing:-.02em;
  color:var(--cc, #fff); text-shadow:0 0 30px color-mix(in oklab, var(--cc, #fff) 60%, transparent);
}
.cr-banner .cr-rank sup{ font-size:.4em; font-weight:700; margin-left:2px; }
.cr-banner .cr-kick{ font-family:var(--f-text); font-weight:500; font-size:14px; letter-spacing:.42em; text-transform:uppercase; color:var(--ink); padding:8px 0 8px .42em; }
.cr-cardwrap{ position:relative; }
.cr-cardwrap .acard{ width:340px; }
.cr-cardwrap::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:var(--r-panel); overflow:hidden; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%); background-size:280% 100%; background-position:200% 0;
}
.card-reveal.on .cr-cardwrap::after{ animation:crShine 1.5s ease-in-out 2.4s 2; }
@keyframes crShine{ 0%{ background-position:200% 0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ background-position:-120% 0; opacity:0; } }
@media (max-height:880px){ .cr-stage{ --cr-scale:1.12; } }
@media (max-height:720px){ .cr-stage{ --cr-scale:.92; } }

/* ===================== 12. ATHLETE CARD ON THE BOARD (language §9.1, card.css is NOT edited) ===================== */
#cardReveal .acard{
  --r-tint:.10; border-radius:var(--r-panel);
  background-color:var(--glass-fill);
  background-image:
    radial-gradient(122% 80% at 50% 0%, rgba(var(--ac-rgb), var(--r-tint)), rgba(0,0,0,0) 74%),
    var(--grain);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-panel);                                    /* replaces every inset ring */
}
#cardReveal .acard[data-arch="fast"] { --ac-rgb:var(--m-speed-rgb); }
#cardReveal .acard[data-arch="counter"] { --ac-rgb:var(--m-precision-rgb); }
#cardReveal .acard[data-arch="iron"] { --ac-rgb:var(--m-guard-rgb); }
#cardReveal .acard[data-arch="heavy"] { --ac-rgb:var(--m-technique-rgb); }
#cardReveal .acard[data-arch="complete"]{ --ac-rgb:var(--m-complete-rgb); }
/* Barlow Condensed is narrower than Space Grotesk: +8% on the condensed sizes */
#cardReveal .acard-name{ font-size:30px; text-transform:uppercase; letter-spacing:.015em; }
#cardReveal .acard-ring{ --ring:168px; }                       /* the stage scales the card 1.42x; keeps the hero inside 1080px */
#cardReveal .acard-mrow .mval{ font-size:19px; }
/* ===================== 13. STICKY ACTIONS (mobile swap for the nav links) ===================== */
.sticky-actions{ position:fixed; right:24px; bottom:24px; z-index:50; display:none; flex-direction:column; gap:13px; align-items:flex-end; }
.sticky-btn{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--f-text); font-weight:500; font-size:16px; color:var(--ink);
  border-radius:var(--r-pill); padding:14px 24px 14px 16px; min-height:44px;
  background-color:var(--glass-fill); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--sh-lift); transition:background-color .18s ease;
}
.sticky-btn:hover{ background-color:rgba(20,23,28,.75); }
.sticky-btn .sb-ic{ width:30px; height:30px; border-radius:var(--r-pill); display:grid; place-items:center; flex:none; background-color:var(--fill-pill); color:var(--brand); }
.sticky-btn .sb-ic svg{ width:19px; height:19px; }

.nav-btn:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
.sticky-btn:focus-visible{ background-color:rgba(24,27,32,.8); box-shadow:var(--sh-focus); }
.searchbar input:focus-visible{ box-shadow:none; background-color:transparent; }

/* ===================== 13b. FULLSCREEN (monitor view, /fullscreen) and its entry link ===================== */
/* index: quiet link under the board, right-aligned, above the footer */
.fs-row{ flex:none; display:flex; justify-content:flex-end; padding:0 var(--s-2); }
.fs-link{
  display:inline-flex; align-items:center; gap:var(--s-3); min-height:44px; padding:var(--s-2) var(--s-5); border-radius:var(--r-pill);
  font-family:var(--f-text); font-weight:500; font-size:var(--t-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  text-decoration:none; transition:background-color .18s ease, color .18s ease;
}
.fs-link svg{ width:15px; height:15px; flex:none; }
.fs-link:hover{ color:var(--ink); background-color:var(--fill-pill); }
.fs-link:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }
.board .fs-row + .shell-foot{ padding-top:0; }
/* fullscreen: no topbar, so the board is the three panels edge to edge; controls sit fixed bottom-right */
body.fullscreen .board{ padding:var(--s-11) var(--s-13) var(--s-13); }
.fs-controls{
  position:fixed; right:var(--s-9); bottom:var(--s-9); z-index:50;
  display:flex; align-items:center; gap:var(--s-5); opacity:.42; transition:opacity .25s ease;
}
.fs-controls:hover, .fs-controls:focus-within{ opacity:1; }
.fs-controls .day-btn{ min-height:32px; padding:var(--s-1) var(--s-5); font-size:var(--t-meta); }
.fs-exit{
  display:inline-flex; align-items:center; min-height:32px; padding:var(--s-1) var(--s-5); border-radius:var(--r-pill);
  font-family:var(--f-text); font-weight:500; font-size:var(--t-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  text-decoration:none; transition:background-color .18s ease, color .18s ease;
}
.fs-exit:hover{ color:var(--ink); background-color:var(--fill-pill); }
.fs-exit:focus-visible{ background-color:var(--fill-focus); box-shadow:var(--sh-focus); }

/* ===================== 14. RESPONSIVE ===================== */
/* tablet / small desktop: panels stack */
@media (max-width:1180px){
  .main{ grid-template-columns:1fr; }
  .rightcol{ grid-template-rows:auto auto; }
  #feed{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .fent:nth-child(n+6):nth-child(even){ background-color:transparent; }
  .fent:nth-child(n+6):nth-child(odd){ background-color:var(--fill-row); }
  .topbar{ grid-template-columns:minmax(0,1fr) auto; height:auto; row-gap:14px; }
  .searchwrap{ grid-column:1; grid-row:2; max-width:none; }
  .topnav{ grid-column:2; grid-row:2; justify-content:flex-end; }
  .nav-hiw, .nav-about{ display:none; }                     /* the sticky buttons carry these two */
  .sticky-actions{ display:flex; }
  .status{ grid-column:2; grid-row:1; }
  #dayNav{ grid-column:1 / -1; grid-row:3; justify-content:center; }
}
/* phone (QR-scan view) */
@media (max-width:767px){
  html, body{ overflow-x:hidden; }
  .board{ padding:16px 14px 90px; gap:16px; min-height:auto; }
  .topbar{
    position:sticky; top:0; z-index:45; grid-template-columns:auto 1fr; gap:10px 12px; padding:12px 14px; margin:-16px -14px 0;
    background-color:rgba(11,13,16,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .nav-btn{ padding:8px 12px; font-size:14px; }
  .searchbar{ padding:0 14px; }
  /* the sticky topbar's own backdrop-filter clips a child's blur to its box, so the dropdown carries a solid fill here */
  .searchpanel{ top:calc(100% + 6px); padding:8px; background-color:rgba(14,17,21,.96); }
  .sugg{ gap:10px; padding:8px 10px; }
  .status{ justify-self:end; gap:14px; }
  #dayNav{ grid-row:3; }
  .day-toggle{ width:100%; }
  .day-btn{ flex:1; min-height:40px; padding:6px 8px; font-size:14px; }
  .live-chip .chip-label{ display:none; }
  .main{ display:flex; flex-direction:column; }
  .rightcol{ display:flex; flex-direction:column; }
  .panel{ min-height:auto; }
  #lb, #metrics, #feed{ display:block; }
  .row{ display:grid; padding:14px 12px; flex:none; }
  #metrics{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mitem{ padding:10px 0; flex:none; }
  .fent{ padding:12px 8px; flex:none; }
  .panel-head{ flex-wrap:wrap; row-gap:8px; }
  .panel-head .sub:not(a){ display:none; }
  .sticky-actions{ right:14px; bottom:14px; gap:9px; }
  .fs-row{ display:none; }                                   /* the monitor view is for large screens */
  .fs-controls{ right:14px; bottom:14px; opacity:.8; }
  .fs-controls .day-toggle{ width:auto; }
  .sticky-btn{ font-size:14px; padding:12px 18px 12px 14px; }
  .sticky-btn .sb-ic{ width:26px; height:26px; } .sticky-btn .sb-ic svg{ width:16px; height:16px; }
  .toast{ top:74px; }
  .lb-podium{ height:auto; gap:6px; padding:6px 0 14px; }
  .pod-1, .pod-2, .pod-3{ height:auto; }
  .pod-card{ height:auto; padding:calc(40px*var(--ui)) 6px 10px; gap:4px; }
  .pod-1 .pod-card{ padding-top:calc(46px*var(--ui)); }
  .pod-laurel, .pod-bars, .pod-pool, .pod-badge{ display:none; }
}

/* ===================== 15. REDUCED MOTION (language §6) ===================== */
@media (prefers-reduced-motion:reduce){
  .foil, .live-chip .livedot, .pod-1 .pod-score, .fent.newentry, .toast-card.show::after,
  .card-reveal.on .cr-glow, .card-reveal.on .cr-cardwrap::after,
  .toast-k .spark, .sc.stamp, .badge.burst, .c-num.bump, .sc.flash, .pod-1 .crown.drop{ animation:none; }
  .foil, .pod-1 .pod-score{ background-position:26% 0; }
  .live-chip .livedot{ opacity:1; transform:none; }
  .row, .pod-card::before{ transition:none; }
  /* transients collapse to plain fades of the SAME total duration so board.ts timers stay valid */
  .toast-card.show{ animation:toastFadeIn .6s ease forwards; }
  .toast-card.out{ animation:toastFadeOut .42s ease forwards; }
  @keyframes toastFadeIn{ from{ opacity:0; transform:none; } to{ opacity:1; transform:none; } }
  @keyframes toastFadeOut{ to{ opacity:0; transform:none; } }
  .card-reveal.on .cr-stage{ animation:crStill 6.4s ease both; }
  @keyframes crStill{ 0%{ opacity:0; transform:scale(var(--cr-scale)); } 10%,86%{ opacity:1; transform:scale(var(--cr-scale)); } 100%{ opacity:0; transform:scale(var(--cr-scale)); } }
  .row.podium-enter{ animation:podiumRowStill 3s ease both; }
  @keyframes podiumRowStill{ 0%{ background-color:transparent; } 8%,50%{ background-color:color-mix(in oklab, var(--celebrate) 18%, transparent); } 100%{ background-color:transparent; } }
  .pod-1 .crown{ opacity:1; }
}