/* ============================================================
   RaceLink Arcade — Design System v2
   Tokens, composants et utilitaires partagés par tous les jeux
   ============================================================ */

:root{
  /* palette */
  --bg0:#06060b;
  --bg1:#0d0d17;
  --bg2:#12121e;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --red:#FF1E2D;
  --red-deep:#8f0f18;
  --cyan:#00E5FF;
  --gold:#FFC94A;
  --good:#2BE07A;
  --bad:#FF3B4A;
  --violet:#8B5CF6;
  --text:#F5F6FB;
  --dim:#9AA0B5;

  /* typo */
  --f-display:'Orbitron','Rajdhani',system-ui,sans-serif;
  --f-ui:'Rajdhani',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-num:'Orbitron',ui-monospace,"SF Mono",Consolas,monospace;

  /* safe areas */
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);

  --radius:18px;
  --radius-sm:13px;
  --shadow:0 14px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(0,229,255,.07), transparent 55%),
    radial-gradient(90% 45% at 50% 112%, rgba(255,30,45,.07), transparent 55%),
    linear-gradient(165deg,var(--bg1),var(--bg0) 70%);
  color:var(--text);
  font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
/* texture scanlines + vignette globale */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
  opacity:.55;mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.hidden{display:none!important}

/* ---------- typographie ---------- */
.rl-kicker{
  font-family:var(--f-num);font-size:10px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--dim);
}
.rl-title{
  font-family:var(--f-display);font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.02;margin:0;
}
.rl-title .r{color:var(--red);text-shadow:0 0 26px rgba(255,30,45,.45)}
.rl-title .c{color:var(--cyan);text-shadow:0 0 26px rgba(0,229,255,.4)}
.rl-title .g{color:var(--gold);text-shadow:0 0 26px rgba(255,201,74,.4)}
.rl-num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:800}

/* ---------- boutons ---------- */
.rl-btn{
  appearance:none;border:none;cursor:pointer;position:relative;
  min-height:56px;padding:14px 34px;border-radius:14px;
  font-family:var(--f-display);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-size:14px;color:#fff;
  background:linear-gradient(180deg,#ff4a56,var(--red) 55%,#d40f1e);
  box-shadow:0 5px 0 var(--red-deep),0 12px 30px rgba(255,30,45,.35),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .1s ease,box-shadow .1s ease,filter .15s;
  overflow:hidden;
}
.rl-btn::after{ /* balayage lumineux */
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .45s ease;
}
.rl-btn:hover::after{left:130%}
.rl-btn:hover{filter:brightness(1.07)}
.rl-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-deep),0 4px 12px rgba(255,30,45,.3)}
.rl-btn:disabled{opacity:.4;pointer-events:none;box-shadow:none}
.rl-btn.ghost{
  background:rgba(0,229,255,.05);color:var(--cyan);
  border:1.5px solid rgba(0,229,255,.55);box-shadow:0 0 22px rgba(0,229,255,.12) inset;
}
.rl-btn.ghost:active{transform:translateY(2px)}
.rl-btn.cyan{
  background:linear-gradient(180deg,#4beaff,var(--cyan) 55%,#00b7cf);
  color:#032027;box-shadow:0 5px 0 #077787,0 12px 30px rgba(0,229,255,.3),inset 0 1px 0 rgba(255,255,255,.5);
}
.rl-btn.cyan:active{box-shadow:0 1px 0 #077787}
.rl-btn.gold{
  background:linear-gradient(180deg,#ffe08a,var(--gold) 55%,#d99a12);
  color:#241a02;box-shadow:0 5px 0 #8a6207,0 12px 30px rgba(255,201,74,.3),inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- cartes / surfaces ---------- */
.rl-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.rl-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-num);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;
  color:var(--cyan);background:rgba(0,229,255,.09);border:1px solid rgba(0,229,255,.35);
}
.rl-chip.gold{color:var(--gold);background:rgba(255,201,74,.09);border-color:rgba(255,201,74,.4)}
.rl-chip.red{color:#ff8a92;background:rgba(255,30,45,.1);border-color:rgba(255,30,45,.4)}
.rl-chip.good{color:var(--good);background:rgba(43,224,122,.09);border-color:rgba(43,224,122,.4)}

/* ---------- écrans plein-viewport (intro / résultat) ---------- */
.rl-screen{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;
  padding:calc(var(--st) + 24px) 22px calc(var(--sb) + 24px);
  background:
    radial-gradient(90% 50% at 50% 8%, rgba(0,229,255,.09), transparent 60%),
    linear-gradient(165deg,var(--bg1),var(--bg0) 75%);
}
/* héros visuel : image d'ambiance derrière un écran (injectée par RL.hero) */
.rl-hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.rl-hero img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.3;
  filter:saturate(1.05);
  animation:rlKen 22s ease-in-out infinite alternate;
}
.rl-hero::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 50% 30%, transparent, rgba(6,6,11,.55) 80%),
    linear-gradient(180deg, rgba(6,6,11,.35), rgba(6,6,11,.15) 40%, rgba(6,6,11,.75));
}
@keyframes rlKen{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-8px)}}

/* lignes de vitesse décoratives */
.rl-speedlines{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5}
.rl-speedlines i{
  position:absolute;width:1.5px;height:110px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(0,229,255,.55),transparent);
  animation:rlFall 2.6s linear infinite;
}
.rl-speedlines i:nth-child(2n){background:linear-gradient(180deg,transparent,rgba(255,30,45,.4),transparent)}
@keyframes rlFall{from{transform:translateY(-140px)}to{transform:translateY(110vh)}}

/* damier décoratif */
.rl-checker{
  height:10px;width:100%;
  background:
    repeating-conic-gradient(#e8e8ee 0% 25%, #101018 0% 50%) 0 0/20px 20px;
  opacity:.16;border-radius:3px;
}

/* ---------- grade / score final ---------- */
.rl-grade{
  font-family:var(--f-display);font-weight:900;font-size:104px;line-height:1;
  background:linear-gradient(180deg,#fff 15%,var(--gold) 75%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,201,74,.35));
  animation:rlPop .55s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes rlPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.rl-finalscore{
  font-family:var(--f-num);font-size:44px;font-weight:900;color:var(--cyan);
  text-shadow:0 0 30px rgba(0,229,255,.5);font-variant-numeric:tabular-nums;
}
.rl-meta{font-size:14px;color:var(--dim);letter-spacing:.03em}

/* ---------- review list ---------- */
.rl-review{
  width:min(420px,92vw);max-height:32vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:4px 12px;margin:0;list-style:none;
}
.rl-review li{
  display:flex;align-items:center;gap:11px;padding:9px 2px;
  border-bottom:1px solid var(--line);font-size:14px;
}
.rl-review li:last-child{border-bottom:none}
.rl-review .ic{font-size:17px;width:26px;text-align:center;flex:0 0 auto}
.rl-review .nm{flex:1;text-align:left;font-weight:600}
.rl-review .nm small{display:block;color:var(--dim);font-size:11.5px;font-weight:500}
.rl-review b{font-family:var(--f-num);font-size:13px;font-variant-numeric:tabular-nums}
.rl-review .ok{color:var(--good)} .rl-review .ko{color:var(--bad)}

/* ---------- topbar de jeu ---------- */
.rl-top{
  width:100%;max-width:540px;display:flex;align-items:center;gap:10px;
  font-family:var(--f-num);
}
.rl-top .grow{flex:1}
.rl-score{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:17px;
  font-weight:800;color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,.45);
  transition:transform .2s;
}
.rl-score.bump{transform:scale(1.2)}
.rl-streak{
  font-family:var(--f-num);font-size:12px;color:var(--gold);font-weight:700;
  opacity:.4;transition:opacity .2s,transform .2s;
}
.rl-streak.on{opacity:1}
.rl-streak.pop{transform:scale(1.3)}
.rl-iconbtn{
  background:none;border:none;color:var(--dim);font-size:17px;cursor:pointer;padding:4px 6px;
}

/* ---------- modes (intro) ---------- */
.rl-modes{display:flex;flex-direction:column;gap:12px;width:min(380px,92vw)}
.rl-mode{
  position:relative;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  cursor:pointer;text-align:left;display:flex;gap:15px;align-items:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  transition:transform .12s,border-color .15s,box-shadow .2s;overflow:hidden;
}
.rl-mode::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),transparent);opacity:.7;
}
.rl-mode:hover{border-color:rgba(0,229,255,.5);box-shadow:0 0 26px rgba(0,229,255,.12)}
.rl-mode:active{transform:scale(.975)}
.rl-mode .mi{font-size:30px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.rl-mode .mt b{font-size:17px;font-weight:700;letter-spacing:.02em}
.rl-mode .mt small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}

/* ---------- barre de vie / progression ---------- */
.rl-bar{height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;position:relative}
.rl-bar>i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),#7df4ff);
  box-shadow:0 0 14px rgba(0,229,255,.5);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.rl-bar.red>i{background:linear-gradient(90deg,var(--red),#ff6b75);box-shadow:0 0 14px rgba(255,30,45,.5)}

/* scrollbar discret */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}