/* KICKOFF · tokens de design (SOURCE DE VÉRITÉ, ne pas modifier) */
:root{
  --red:#E8000D;
  --red-glow:#FF2634;
  --red-deep:#B00009;
  --ink:#0D0D0D;
  --ink-2:#141416;
  --ink-3:#1C1C20;
  --line:#2A2A30;
  --line-2:#3A3A42;
  --txt:#F4F4F6;
  --muted:#93939C;
  --gold:#F4C33B;
  --green:#22C55E;
  --disp:'Bahnschrift','Arial Narrow',Impact,system-ui,sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --glow-red:0 8px 26px rgba(232,0,13,.38);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--txt);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ----- composants de base ----- */
.btn{
  display:block;width:100%;text-align:center;cursor:pointer;
  font-family:var(--disp);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red-deep));
  border:none;border-radius:12px;padding:14px 18px;
  box-shadow:var(--glow-red);
  transition:transform .12s ease,filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn.ghost{
  background:transparent;color:rgba(244,244,246,.88);
  box-shadow:0 0 0 1px rgba(244,244,246,.22) inset;
}
.btn.small{padding:9px 14px;font-size:12.5px;width:auto;display:inline-block;border-radius:9px}

.card{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;
}
.card.hot{
  background:linear-gradient(135deg,rgba(232,0,13,.20),var(--ink-3));
  border-color:rgba(232,0,13,.45);
}

.pill{
  display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;
  font-family:var(--disp);letter-spacing:.08em;text-transform:uppercase;
}
.pill.live{background:rgba(34,197,94,.14);color:var(--green);border:1px solid rgba(34,197,94,.4)}
.pill.red{background:rgba(232,0,13,.14);color:var(--red-glow);border:1px solid rgba(232,0,13,.4)}
.pill.gold{background:rgba(244,195,59,.12);color:var(--gold);border:1px solid rgba(244,195,59,.35)}
.pill.mut{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--line)}

.crest{
  border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-style:italic;color:#fff;
  position:relative;overflow:hidden;flex:none;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.crest::after{
  content:"";position:absolute;top:0;left:-28%;width:24%;height:100%;
  background:rgba(255,255,255,.16);transform:skewX(-16deg);
}

.input{
  width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-family:var(--body);font-size:15px;padding:13px 14px;outline:none;
}
.input:focus{border-color:rgba(232,0,13,.6);box-shadow:0 0 0 3px rgba(232,0,13,.15)}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700;margin:0 0 6px 2px;display:block}

.kicker{font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--muted);font-weight:700}
.h-disp{font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.01em}

.wordmark{font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.wordmark .wm-slash{color:var(--red);text-shadow:0 0 12px rgba(232,0,13,.8);padding:0 .03em}

.muted{color:var(--muted)}
.gold{color:var(--gold)}
.red{color:var(--red-glow)}
.green{color:var(--green)}