/**
 * race.css — The Race.
 *
 * One lane per child, position is how much of their budget they have covered,
 * and a pace ghost marks where they need to be. Ported from
 * frontend/lab/03-racetrack.html.
 *
 * Scoped under #screen-race: the lab page owned the document and styled
 * html/body, which would have leaked across the other screens.
 */


#screen-race{
  --bg:#0a0f0d;--bg2:#0d1410;--card:#111916;--accent:#14fdce;--accent-dim:#0a7d67;
  --green:#22c55e;--amber:#eab308;--red:#dc2626;--text:#e2e8f0;--muted:#64748b;
  --mono:'Share Tech Mono',ui-monospace,monospace;--disp:'Rajdhani',sans-serif;
}
#screen-race *{box-sizing:border-box;margin:0;padding:0}
#screen-race #stage{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(20,253,206,.09),transparent 70%),
             linear-gradient(180deg,#0b1210,#080c0b 60%,#070a09);}
#screen-race #stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:.5}
#screen-race #stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background-image:linear-gradient(rgba(20,253,206,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,253,206,.06) 1px,transparent 1px);
  background-size:6vh 6vh}
#screen-race .no-anim *{transition:none!important}

/* ---------- top strip ---------- */
#screen-race #top{position:relative;z-index:2;height:12vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 2.2vw;border-bottom:1px solid rgba(20,253,206,.18);background:linear-gradient(180deg,rgba(20,253,206,.04),transparent)}
#screen-race #top .brand .t1{font-size:5.2vh;font-weight:700;letter-spacing:.18em;line-height:1;color:#fff;text-shadow:0 0 2vh rgba(20,253,206,.35)}
#screen-race #top .brand .t2{font-family:var(--mono);font-size:1.9vh;color:var(--accent);letter-spacing:.2em;margin-top:.8vh;opacity:.85}
#screen-race #top .tminus{text-align:center}
#screen-race #top .tminus .lbl{font-family:var(--mono);font-size:1.7vh;letter-spacing:.35em;color:var(--muted)}
#screen-race #top .tminus .num{font-family:var(--mono);font-size:8.4vh;line-height:1;color:var(--accent);text-shadow:0 0 2.5vh rgba(20,253,206,.45);
  font-variant-numeric:tabular-nums;transition:color .4s}
#screen-race #top .tminus .num.late{color:var(--red);text-shadow:0 0 2.5vh rgba(220,38,38,.6);animation:blink 1s steps(2) infinite}
#screen-race #top .tminus .num.tight{color:var(--amber);text-shadow:0 0 2.5vh rgba(234,179,8,.5)}
#screen-race #top .right{text-align:right}
#screen-race #top .clock{font-family:var(--mono);font-size:4.6vh;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
#screen-race #top .defcon{display:inline-block;margin-top:1vh;font-family:var(--mono);font-size:2vh;letter-spacing:.3em;padding:.5vh 1.2vh;
  border:1px solid currentColor;color:var(--green);transition:color .4s}
#screen-race #top .defcon[data-l="4"]{color:#86efac}#top .defcon[data-l="3"]{color:var(--amber)}#top .defcon[data-l="2"]{color:#fb923c}
#screen-race #top .defcon[data-l="1"]{color:var(--red);animation:blink .8s steps(2) infinite;background:rgba(220,38,38,.15)}
@keyframes blink{50%{opacity:.35}}

/* ---------- main ---------- */
#screen-race #main{position:relative;z-index:2;flex:1;display:flex;min-height:0}
#screen-race #track{flex:1;display:flex;flex-direction:column;gap:1.2vh;padding:1.6vh 0 1.6vh 1.4vw;min-width:0}
#screen-race #board{width:24vw;padding:1.6vh 1.6vw 1.6vh 1.2vw;display:flex;flex-direction:column}

/* ---------- lane ---------- */
#screen-race .lane{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:1vh;
  background:linear-gradient(180deg,#0f1714,#0b110f 50%,#0d1411);
  border-top:2px solid rgba(255,255,255,.14);border-bottom:2px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 6vh rgba(0,0,0,.6)}
#screen-race .lane::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dashed rgba(255,255,255,.08);pointer-events:none}
#screen-race .lane .tint{position:absolute;inset:0;pointer-events:none;transition:opacity .8s,background .8s;opacity:1}
#screen-race .lane[data-rag=green] .tint{background:linear-gradient(90deg,transparent 30%,rgba(34,197,94,.10))}
#screen-race .lane[data-rag=amber] .tint{background:linear-gradient(90deg,rgba(234,179,8,.05),rgba(234,179,8,.20))}
#screen-race .lane[data-rag=red] .tint{background:linear-gradient(90deg,rgba(220,38,38,.10),rgba(220,38,38,.32));animation:redpulse 1.2s ease-in-out infinite}
@keyframes redpulse{50%{opacity:.45}}
#screen-race .lane.out .tint{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 22%,transparent))}
#screen-race .lane .chev{position:absolute;top:50%;left:0;right:0;height:12vh;transform:translateY(-50%);pointer-events:none;opacity:.16;
  background-repeat:repeat-x;background-size:5vh 12vh;background-position:0 0;animation:flow 1.6s linear infinite}
@keyframes flow{from{background-position:0 0}to{background-position:5vh 0}}
#screen-race .lane.out .chev,#screen-race .lane.dead .chev{animation-play-state:paused;opacity:.04}

#screen-race .lane .gate{position:absolute;left:0;top:0;bottom:0;width:10.5vw;padding:1.2vh 1vw;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 85%,transparent);border-right:1px solid rgba(255,255,255,.08);z-index:5}
#screen-race .lane .gate .num{font-family:var(--mono);font-size:1.7vh;color:var(--muted);letter-spacing:.3em}
#screen-race .lane .gate .name{font-size:4.6vh;font-weight:700;letter-spacing:.12em;line-height:1;color:var(--c);text-shadow:0 0 1.5vh color-mix(in srgb,var(--c) 50%,transparent)}
#screen-race .lane .gate .now{font-size:2.3vh;font-weight:600;color:#cbd5e1;margin-top:.7vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-race .lane .gate .tgt{font-family:var(--mono);font-size:1.7vh;color:var(--muted);margin-top:.4vh;letter-spacing:.1em}

#screen-race .lane .course{position:absolute;left:13.5vw;right:11.5vw;top:0;bottom:0}
#screen-race .lane .ticks{position:absolute;left:0;right:0;bottom:0;height:1.4vh;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5%);opacity:.5}
#screen-race .lane .startline{position:absolute;left:0;top:12%;bottom:12%;width:0;border-left:2px solid rgba(255,255,255,.25)}

/* checkpoint */
#screen-race .cp{position:absolute;left:0;top:50%;width:6vh;margin-left:-3vh;margin-top:-3vh;transition:transform .5s linear;z-index:3}
#screen-race .cp .ring{width:6vh;height:6vh;border-radius:50%;border:.3vh solid rgba(255,255,255,.22);background:rgba(10,15,13,.9);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);position:relative;transition:all .4s}
#screen-race .cp .ring svg{width:3vh;height:3vh}
#screen-race .cp .lbl{position:absolute;left:50%;top:6.6vh;transform:translateX(-50%);white-space:nowrap;font-size:2.1vh;font-weight:600;color:var(--muted);letter-spacing:.04em;transition:color .4s}
#screen-race .cp.up .lbl{top:auto;bottom:6.6vh}
#screen-race .cp.last .lbl{transform:translateX(-72%)}
#screen-race .cp .delta{display:none;font-family:var(--mono);font-size:1.8vh;margin-left:.6vh;font-weight:400}
#screen-race .cp .badge{position:absolute;right:-.8vh;top:-.8vh;width:2.6vh;height:2.6vh;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:#0a0f0d;border:.25vh solid currentColor}
#screen-race .cp .badge svg{width:1.6vh;height:1.6vh}
#screen-race .cp.st-blocked .ring{border-style:dotted;color:rgba(255,255,255,.22)}
#screen-race .cp.st-blocked .badge{display:flex;color:var(--muted)}
#screen-race .cp.st-active .ring{border-color:var(--c);color:var(--c);box-shadow:0 0 2.5vh color-mix(in srgb,var(--c) 60%,transparent);animation:cppulse 1.1s ease-in-out infinite}
#screen-race .cp.st-active .lbl{color:#fff}
#screen-race .cp.st-active.over .ring{border-color:var(--amber);color:var(--amber);box-shadow:0 0 2.5vh rgba(234,179,8,.6)}
@keyframes cppulse{50%{transform:scale(1.14)}}
#screen-race .cp.st-done .ring{border-color:var(--c);background:var(--c);color:#0a0f0d;box-shadow:0 0 2vh color-mix(in srgb,var(--c) 55%,transparent)}
#screen-race .cp.st-done .lbl{color:#cbd5e1}
#screen-race .cp.st-done .delta{display:inline}
#screen-race .cp.st-done .delta.pos{color:var(--green)}.cp.st-done .delta.neg{color:var(--amber)}
#screen-race .cp.st-failed .ring{border-color:var(--red);color:var(--red);background:rgba(220,38,38,.18);box-shadow:0 0 2vh rgba(220,38,38,.6)}
#screen-race .cp.st-failed .badge{display:flex;color:var(--red);background:var(--red);color:#fff}
#screen-race .cp.st-failed .lbl{color:var(--red)}
#screen-race .cp.st-skipped .ring{border-style:dashed;border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.4)}
#screen-race .cp.st-skipped .badge{display:flex;color:#94a3b8}
#screen-race .cp.st-skipped .lbl{color:#94a3b8;text-decoration:line-through}
#screen-race .cp.ping .ring{animation:ping .8s ease-out}
@keyframes ping{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

/* duration readouts: quiet mono under each checkpoint, plus a per-segment minute rule */
#screen-race .cp .dur{position:absolute;left:50%;top:10.4vh;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:1.5vh;
  letter-spacing:.08em;color:rgba(148,163,184,.5);font-variant-numeric:tabular-nums;transition:color .4s}
#screen-race .cp.up .dur{top:auto;bottom:10.4vh}
#screen-race .cp .dur:empty{display:none}
#screen-race .cp.st-active .dur{color:rgba(226,232,240,.8)}
#screen-race .cp.st-active.over .dur{color:var(--amber)}
#screen-race .cp.st-done .dur.pos{color:rgba(34,197,94,.85)}.cp.st-done .dur.neg{color:rgba(234,179,8,.9)}
#screen-race .cp.st-failed .dur{color:rgba(248,113,113,.8)}
#screen-race .cp.st-skipped .dur{text-decoration:line-through;color:rgba(148,163,184,.35)}
#screen-race .cp .seg{position:absolute;right:3vh;top:12.6vh;height:.9vh;width:0;pointer-events:none;
  border-bottom:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px var(--mw,1vw)) 0 100%/100% .45vh no-repeat;
  transition:width .5s linear}
#screen-race .cp.st-done .seg,#screen-race .cp.st-active .seg{border-bottom-color:color-mix(in srgb,var(--c) 45%,transparent)}
#screen-race .lane .ticks{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px calc(var(--mw,1vw) * 5)) 0 0/100% 100% no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px var(--mw,1vw)) 0 100%/100% 50% no-repeat}

/* ghost + runner */
#screen-race .ghost{position:absolute;left:0;top:50%;width:5.6vh;height:5.6vh;margin:-2.8vh 0 0 -2.8vh;border-radius:50%;z-index:2;
  border:.25vh dashed rgba(255,255,255,.55);background:rgba(255,255,255,.05);transition:transform .5s linear,opacity .5s;z-index:4;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1.5vh;letter-spacing:.15em;color:rgba(255,255,255,.7);text-shadow:0 0 .5vh #000}
#screen-race .runner{position:absolute;left:0;top:50%;width:9vh;height:9vh;margin:-4.5vh 0 0 -4.5vh;z-index:6;transition:transform .5s linear}
#screen-race .runner .disc{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,var(--c) 22%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  display:flex;align-items:center;justify-content:center;font-size:5.4vh;font-weight:700;color:#0a0f0d;line-height:1;
  box-shadow:0 0 3vh color-mix(in srgb,var(--c) 70%,transparent),0 0 .8vh #000;border:.35vh solid rgba(255,255,255,.75)}
#screen-race .runner.moving .disc{animation:bob .5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.6vh) rotate(-4deg)}}
#screen-race .runner .trail{position:absolute;right:100%;top:50%;width:14vh;height:5vh;transform:translateY(-50%);opacity:0;transition:opacity .4s;
  background:repeating-linear-gradient(180deg,transparent 0 1.4vh,color-mix(in srgb,var(--c) 60%,transparent) 1.4vh 1.8vh);
  mask:linear-gradient(90deg,transparent,#000);-webkit-mask:linear-gradient(90deg,transparent,#000)}
#screen-race .runner.moving .trail{opacity:.8}
#screen-race .runner .status{position:absolute;left:50%;top:-4.4vh;transform:translate(-50%,-100%);font-family:var(--mono);font-size:1.9vh;padding:.2vh .8vh;
  border:1px solid currentColor;white-space:nowrap;background:rgba(10,15,13,.85);opacity:0;transition:opacity .4s}
#screen-race .runner.ahead .status{opacity:1;color:var(--green)}
#screen-race .runner.behind .status{opacity:1;color:var(--red)}

/* finish */
#screen-race .lane .finish{position:absolute;right:0;top:0;bottom:0;width:8.5vw;z-index:4;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.35))}
#screen-race .lane .flag{position:absolute;left:0;top:0;bottom:0;width:2.2vw;background:repeating-conic-gradient(#e2e8f0 0 25%,#0a0f0d 0 50%) 0 0/1.1vw 1.1vw;opacity:.8}
#screen-race .lane .door{position:relative;width:8vh;height:8vh;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:.3vh solid rgba(255,255,255,.35);color:#fff;background:rgba(10,15,13,.85);box-shadow:0 0 2vh rgba(20,253,206,.2);transition:all .5s}
#screen-race .lane .door svg{width:4.6vh;height:4.6vh}
#screen-race .lane .door .flbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.6vh;font-family:var(--mono);font-size:1.5vh;letter-spacing:.3em;color:var(--muted)}
#screen-race .lane.out .door{border-color:var(--c);color:var(--c);box-shadow:0 0 4vh color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 15%,#0a0f0d)}
#screen-race .lane .stamp{position:absolute;right:11vw;top:50%;transform:translateY(-50%) rotate(-7deg) scale(3);opacity:0;z-index:7;
  border:.5vh solid var(--c);color:var(--c);padding:.6vh 1.6vh;border-radius:.8vh;text-align:center;
  font-family:var(--mono);letter-spacing:.2em;background:rgba(10,15,13,.75);box-shadow:0 0 3vh color-mix(in srgb,var(--c) 40%,transparent);
  transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s}
#screen-race .lane .stamp .s1{font-size:2.6vh}.lane .stamp .s2{font-size:4.2vh;line-height:1}
#screen-race .lane.out .stamp{opacity:1;transform:translateY(-50%) rotate(-7deg) scale(1)}
#screen-race .lane.out .runner{opacity:0;transition:transform .5s linear,opacity .6s .8s}
#screen-race .lane.out .ghost{opacity:0}
#screen-race .lane.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-.8vh)}40%{transform:translateX(.8vh)}60%{transform:translateX(-.5vh)}80%{transform:translateX(.5vh)}}

/* ---------- leaderboard ---------- */
#screen-race #board h2{font-family:var(--mono);font-size:2vh;letter-spacing:.4em;color:var(--accent);font-weight:400;padding-bottom:1vh;border-bottom:1px solid rgba(20,253,206,.25);margin-bottom:1.2vh}
#screen-race #rows{position:relative;height:53.5vh;flex:none}
#screen-race .row{position:absolute;left:0;right:0;top:0;height:17vh;padding:1.4vh 1.4vw;border-radius:.8vh;transition:transform .8s cubic-bezier(.3,.9,.3,1.05);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,#0d1410),#0d1410);border:1px solid rgba(255,255,255,.08);border-left:.5vh solid var(--c)}
#screen-race .row .top{display:flex;align-items:baseline;gap:1vw}
#screen-race .row .rank{font-family:var(--mono);font-size:3.6vh;color:#fff;width:3.4vw;flex:none}
#screen-race .row .rank sup{font-size:1.6vh;vertical-align:top;color:var(--muted)}
#screen-race .row .nm{font-size:3.9vh;font-weight:700;letter-spacing:.08em;color:var(--c);line-height:1}
#screen-race .row .buf{margin-left:auto;font-family:var(--mono);font-size:3.8vh;line-height:1;white-space:nowrap}
#screen-race .row .buf.pos{color:var(--green)}.row .buf.warn{color:var(--amber)}.row .buf.neg{color:var(--red)}
#screen-race .row .bar{height:1.1vh;background:rgba(255,255,255,.08);border-radius:1vh;margin-top:1.4vh;overflow:hidden;position:relative}
#screen-race .row .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);border-radius:1vh;transition:width .5s linear;box-shadow:0 0 1vh var(--c)}
#screen-race .row .bar b{position:absolute;top:-.3vh;bottom:-.3vh;width:2px;background:#fff;opacity:.6;transition:left .5s linear}
#screen-race .row .sub{display:flex;justify-content:space-between;margin-top:1vh;font-size:2.1vh;color:#cbd5e1}
#screen-race .row .sub .mono{font-family:var(--mono);color:var(--muted);font-size:1.9vh}
#screen-race .row.out{border-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,#0d1410),#0d1410)}
#screen-race .row.out .buf{color:var(--c)}
#screen-race .row .r1{color:#ffd700}
#screen-race #feed{margin-top:1.4vh;border-top:1px solid rgba(20,253,206,.2);padding-top:1vh;flex:1;overflow:hidden}
#screen-race #feed h3{font-family:var(--mono);font-size:1.6vh;letter-spacing:.35em;color:var(--muted);font-weight:400;margin-bottom:.6vh}
#screen-race #feed .ev{display:flex;gap:.8vw;align-items:baseline;font-size:2.1vh;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-race #feed .ev .t{font-family:var(--mono);color:var(--muted);font-size:1.8vh}
#screen-race #feed .ev .w{color:var(--c);font-weight:700}
#screen-race #feed .ev .d{font-family:var(--mono);margin-left:auto;font-size:1.8vh}
#screen-race #feed .ev .d.pos{color:var(--green)}#feed .ev .d.neg{color:var(--amber)}#feed .ev .d.bad{color:var(--red)}
#screen-race #feed .ev.out .w{text-shadow:0 0 1vh var(--c)}
#screen-race #board .foot{margin-top:1vh;font-family:var(--mono);font-size:1.6vh;color:var(--muted);letter-spacing:.15em;line-height:1.6}
#screen-race #board .foot b{color:var(--accent);font-weight:400}

/* ---------- fx ---------- */
#screen-race #fx{position:absolute;inset:0;z-index:40;pointer-events:none}
#screen-race #banner{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .8s}
#screen-race #banner.on{opacity:1}
#screen-race #banner .box{text-align:center;padding:3vh 5vw;border:.4vh solid var(--accent);background:rgba(10,15,13,.85);box-shadow:0 0 8vh rgba(20,253,206,.5);transform:rotate(-3deg)}
#screen-race #banner .b1{font-family:var(--mono);font-size:2.6vh;letter-spacing:.5em;color:var(--accent)}
#screen-race #banner .b2{font-size:14vh;font-weight:700;line-height:1;letter-spacing:.1em;color:#fff;text-shadow:0 0 4vh var(--accent)}
#screen-race #banner .b3{font-size:3.4vh;color:#cbd5e1;letter-spacing:.2em;margin-top:1vh}
#screen-race #err{position:absolute;left:1vw;bottom:1vh;z-index:60;font:1.6vh var(--mono);color:#f87171;white-space:pre-wrap;max-width:60vw}