/* GenZ SIM leaderboard TV. Palette, typography, top bar and footer follow the
   approved RC Race Control tv.html. Inline styles are avoided because the
   page runs under a strict Content-Security-Policy (style-src 'self'). */
:root{
  --bg:#03060a;--cyan:#16d8ff;--pink:#ff24b9;--green:#21ef93;--yellow:#ffd34f;
  --text:#f7f9fc;--muted:#8b97aa;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);cursor:none}
body{font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:
  radial-gradient(circle at 84% 12%,rgba(0,180,204,.18),transparent 27%),
  radial-gradient(circle at 8% 92%,rgba(255,36,185,.12),transparent 24%),
  linear-gradient(135deg,#020407,#050a10 48%,#031117 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:
  linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%),
  linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%);background-size:42px 42px;background-position:0 0,21px 21px}
.shell{height:100vh;padding:1.25vh 1.15vw 1.05vh;display:flex;flex-direction:column;gap:1.0vh;position:relative;z-index:1}

/* Compact header bar: logo | board type | metric pill + board counter. Border follows the board type. */
.topbar{--accent:rgba(22,216,255,.75);height:10.5vh;min-height:76px;display:grid;grid-template-columns:22% 1fr 30%;align-items:center;
  padding:0 1.4vw;border:2px solid var(--accent);border-radius:18px;
  background:linear-gradient(180deg,rgba(5,12,21,.98),rgba(4,9,15,.99));box-shadow:0 0 24px color-mix(in srgb,var(--accent) 22%,transparent)}
.topbar.drift{--accent:rgba(255,36,185,.8)}
.logoWrap{height:100%;display:flex;align-items:center;overflow:hidden}
.logo{height:min(8.2vh,96px);width:auto;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 18px rgba(255,27,185,.22))}
.boardTitle{text-align:center;min-width:0}
.boardTitle .title{font-size:clamp(28px,3.1vw,62px);font-weight:950;font-style:italic;letter-spacing:.04em;line-height:1;white-space:nowrap;
  background:linear-gradient(90deg,#f2c33c 0%,#f5d766 24%,#ffffff 56%,#d8e5f2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.raceMeta{display:flex;justify-content:flex-end;align-items:center;gap:1.15vw}
.status{border:2px solid rgba(255,211,79,.62);border-radius:999px;padding:.7vh 1.1vw;font-size:clamp(11px,.95vw,18px);font-weight:950;color:var(--yellow);white-space:nowrap;background:rgba(65,47,0,.15)}
.clock{text-align:right;border-left:2px solid rgba(247,198,64,.72);padding-left:1.2vw;min-width:8vw}
.clock .label{font-size:clamp(10px,.8vw,15px);letter-spacing:.18em;color:#b1bccd}
.clock .time{font-size:clamp(26px,2.9vw,56px);font-weight:950;line-height:1;margin-top:.2vh}

.content{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.2vh}
.content.fade{animation:fadeIn .45s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* TRACK | CAR identity row; pictures sit beside the names and simply stay empty if missing. */
/* One full-width TRACK panel (boards are per track, any car): name left, map + track photo right. */
.trackPanel{height:15vh;min-height:100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:1.5vw;
  padding:0 1.4vw;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(180deg,rgba(7,13,22,.86),rgba(4,8,14,.92))}
.idText{min-width:0}
.idLabel{font-size:clamp(12px,1vw,20px);font-weight:950;font-style:italic;letter-spacing:.2em;color:var(--cyan)}
.drift .idLabel{color:var(--pink)}
.idName{font-size:clamp(26px,2.8vw,56px);font-weight:950;line-height:1.05;margin-top:.5vh;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trackPics{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:1.5vw;min-width:0}
.trackMap{height:13vh;max-width:45%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(22,216,255,.35))}
.trackPhoto{height:13vh;max-width:50%;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 22px rgba(0,0,0,.55)}

/* One full-width ranked list. TODAY: 1-2-3, a LATEST divider, then 5 latest finishers.
   ALL-TIME: rows 1-8. Rows share the height so the board never jumps. */
.list{flex:1;min-height:0;display:grid;gap:.7vh}
.list.daily{grid-template-rows:repeat(3,minmax(0,1fr)) auto repeat(5,minmax(0,1fr))}
.list.alltime{grid-template-rows:repeat(8,minmax(0,1fr))}
.divider{display:flex;justify-content:space-between;align-items:center;padding:.2vh .6vw;font-size:clamp(11px,.95vw,18px);font-weight:950;
  font-style:italic;letter-spacing:.22em;color:#97a3b7;border-bottom:2px solid rgba(255,255,255,.12)}
.divider span:first-child{color:var(--cyan)}
.row{--accent:#aab5c5;position:relative;overflow:hidden;display:grid;grid-template-columns:8% minmax(0,.8fr) minmax(0,1.3fr) 10vw 13vw;align-items:stretch;min-height:0;
  border:2px solid color-mix(in srgb,var(--accent) 90%,#09131b);border-radius:14px;
  background:linear-gradient(180deg,rgba(5,12,21,.98),rgba(4,9,15,.99));box-shadow:0 0 16px color-mix(in srgb,var(--accent) 12%,transparent)}
.row .pos{display:flex;align-items:center;justify-content:center;color:#050b10;font-size:clamp(20px,2.2vw,46px);font-weight:1000;font-style:italic;letter-spacing:-.06em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 98%,white 3%),color-mix(in srgb,var(--accent) 86%,black));clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.row .who{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 .8vw}
.row .name{font-size:clamp(18px,1.85vw,38px);font-weight:950;color:var(--accent);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.row .when{font-size:clamp(10px,.8vw,15px);font-weight:700;color:#a9b4c3;letter-spacing:.08em;margin-top:.4vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
/* Car used by that driver, in the middle of the row. */
.row .car{min-width:0;display:flex;align-items:center;gap:.6vw;padding:0 .8vw;font-size:clamp(14px,1.35vw,28px);font-weight:900;letter-spacing:.04em;color:#dce6f3;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.row .car span{overflow:hidden;text-overflow:ellipsis}
.carBadge{height:1.5em;width:auto;max-width:2.4em;object-fit:contain;flex:none}
/* Small car picture at the start of the car column. Fixed by the row height, so it can never grow the row;
   fixed width (16:9) so the car names start at the same point on every row. */
.row .car .carThumb{flex:none;height:calc(100% - 1.2vh);max-height:7vh;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);background:#0b1118}
.row .car .carThumb.empty{display:block;border-color:rgba(255,255,255,.06)}
.row .ago{display:flex;align-items:center;justify-content:flex-end;padding:0 .4vw;font-size:clamp(12px,1.15vw,24px);font-weight:900;font-style:italic;letter-spacing:.06em;color:#c9d3e0;white-space:nowrap}
.row .value{display:flex;align-items:center;justify-content:flex-end;padding:0 1vw;font-size:clamp(22px,2.2vw,46px);font-weight:950;white-space:nowrap}
.p1{--accent:#f7c640}.p2{--accent:#1ca7ff}.p3{--accent:#ff7a24}.p4{--accent:#cf31f2}.p5{--accent:#27d7a2}
.p6{--accent:#7e63ff}.p7{--accent:#18c4d9}.p8{--accent:#ff4e68}.p9,.p10{--accent:#aab5c5}
.latest{--accent:#5fd3ff}
.row .posTag{font-size:.36em;letter-spacing:.08em;margin-right:.18em;font-style:normal}
.row.na{opacity:.5}
.row.na .name{color:#8e99aa}
/* ALL-TIME window: gold frame so the switch is obvious from across the room. */
.topbar.mode-alltime{--accent:rgba(247,198,64,.9)}
.rowEmpty{border:2px dashed rgba(139,151,170,.35);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:#8e99aa;font-size:clamp(14px,1.2vw,24px);font-weight:900;letter-spacing:.08em;padding:2vh 1vw}

.fastFooter{height:5.2vh;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:1vw;padding:.05vh .1vw 0}
.footerCenter{flex:1;display:flex;align-items:center;justify-content:center;gap:1vw;min-width:0}
.footerFlag{color:var(--yellow);font-size:clamp(16px,1.2vw,24px);line-height:1}
.footerMark{text-align:center;font-size:clamp(8px,.72vw,12px);letter-spacing:.28em;color:#8996a8;white-space:nowrap}
.footerTag{font-size:clamp(8px,.72vw,12px);letter-spacing:.22em;color:#8996a8;white-space:nowrap}

.empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.readyLogo{width:min(36vw,640px);max-height:24vh;object-fit:contain;margin-bottom:4vh}
.readyTitle{font-size:clamp(42px,5vw,96px);font-weight:950;letter-spacing:.015em}
.readyLine{width:130px;height:3px;margin:2.2vh auto;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.readySub{font-size:clamp(14px,1.3vw,24px);color:#9ba6b9}
.warning{position:absolute;right:1.5vw;bottom:1.2vh;padding:.6vh .85vw;border:1px solid rgba(255,78,104,.6);border-radius:999px;color:#ff7990;background:rgba(45,0,8,.6);font-size:clamp(9px,.72vw,13px);font-weight:800;letter-spacing:.07em;display:none}
.warning.show{display:block}

/* SESSION COMPLETE card: this TV only, shown when a non-record session finishes. */
.session-card{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,rgba(22,216,255,.22),transparent 50%),radial-gradient(circle at 50% 80%,rgba(255,36,185,.18),transparent 55%),#020407}
.session-card.hidden{display:none}
.session-card.pop .sc-box{animation:scPop .5s cubic-bezier(.2,1.3,.4,1)}
.sc-box{max-width:90vw;padding:3vh 4vw;border:2px solid rgba(22,216,255,.6);border-radius:28px;background:rgba(4,9,15,.85);box-shadow:0 0 60px rgba(22,216,255,.18)}
.sc-kicker{font-size:clamp(16px,1.8vw,36px);font-weight:950;letter-spacing:.35em;color:#16d8ff}
.sc-name{margin-top:2vh;font-size:clamp(48px,7vw,150px);font-weight:1000;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-value{margin-top:1.4vh;font-size:clamp(44px,6.2vw,130px);font-weight:950;color:#ffd34f;line-height:1}
.sc-pos{margin-top:2.2vh;font-size:clamp(26px,3.2vw,66px);font-weight:1000;font-style:italic;letter-spacing:.04em;
  background:linear-gradient(90deg,#ff24b9,#16d8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-gap{margin-top:1vh;font-size:clamp(18px,2vw,40px);font-weight:900;letter-spacing:.08em;color:#e3e9f2}
.sc-detail{margin-top:2vh;font-size:clamp(14px,1.5vw,30px);font-weight:800;letter-spacing:.12em;color:#9fb0c4}
@keyframes scPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
/* After the card: the driver's row on that track's board flashes for ~15 s. */
.row.fresh{animation:rowFlash 1s ease-in-out infinite alternate;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 70%,transparent)}
@keyframes rowFlash{from{background:linear-gradient(180deg,rgba(5,12,21,.98),rgba(4,9,15,.99))}to{background:color-mix(in srgb,var(--accent) 30%,#04090f)}}