:root{
  color-scheme: dark;
  --ground:#0c1512; --panel:#13201b; --felt:#17553d; --felt-deep:#0f3b2a;
  --ink:#eef3ea; --muted:#9fb4a8; --acc:#C6F24E; --acc2:#DBFF7A; --teal:#14B8A6; --gold:#f5b93d;
  --good:#5fd08a; --bad:#ff7a6b; --card:#fbf8f0;
  --display:"Archivo Black","Arial Black",Impact,sans-serif; --brandf:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:15px;padding-inline:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding-block:18px 32px;display:flex;flex-direction:column;gap:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* logo */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand .tv{width:34px;height:34px;border-radius:10px;border:1px solid rgba(198,242,78,.4);background:#111a16;display:flex;align-items:center;justify-content:center;flex:none}
.brand .tv svg{width:20px;height:20px}
.brand b{font-family:var(--brandf);font-weight:900;font-size:23px;letter-spacing:-.02em;color:var(--acc)}

.score{font-weight:700;font-size:13px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.score b{color:var(--ink);font-size:16px}
.tag{display:inline-flex;gap:8px;flex-wrap:wrap}
.tag span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);border:1px solid rgba(198,242,78,.35);padding:4px 8px;border-radius:6px}

/* boutons */
.next{align-self:flex-end;font:800 15px "Manrope",sans-serif;padding:12px 20px;border-radius:12px;border:0;background:var(--acc);color:#04130a;cursor:pointer;text-decoration:none;text-align:center}
.next:hover{background:var(--acc2)}
.next:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.next.gold{background:var(--gold);color:#1a1405}
.next.gold:hover{background:#f9cc68}
.end{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding:24px 8px}
.foot{font-size:12px;color:var(--muted);text-align:center;line-height:1.5}

/* dossard (numéro de partant) */
.num{width:30px;height:34px;flex:none;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
