/* ───────── Plaque — feuille de style ───────── */
:root{
  --bg:#0e1116;
  --bg2:#161b23;
  --bg3:#1d242e;
  --line:#2a323f;
  --txt:#e8edf5;
  --dim:#93a0b4;
  --accent:#ffcf3f;
  --ok:#3ddc84;
  --ko:#ff6b6b;
  --rare:#8ab6ff;
  --plate-blue:#0b3ea8;
  --plate-red:#d0021b;
  --radius:14px;
  /* la couleur du mode en cours : le jaune reste la marque, --mode habille la partie */
  --mode:var(--accent);
  --mode-ink:#14181f;
}
body.mode-trafic{--mode:#5aa9ff;--mode-ink:#06182c}      /* bleu gyrophare */
body.mode-poursuite{--mode:#ff7a4d;--mode-ink:#2a0c02}   /* orange de la fuite */
body.mode-dispatch{--mode:#2be5c9;--mode-ink:#032420}    /* vert de la radio */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 80% at 50% -10%,#1b2431 0%,var(--bg) 60%) fixed;
  color:var(--txt);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:max(16px,env(safe-area-inset-top)) 16px 40px;
}
#app{max-width:720px;margin:0 auto}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mono{letter-spacing:.08em}

.soundbtn{
  position:fixed;bottom:max(12px,env(safe-area-inset-bottom));right:12px;z-index:20;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  width:38px;height:34px;font-size:15px;cursor:pointer;line-height:1;
}
.soundbtn:hover{border-color:#41506a}

/* ───────── plaque ───────── */
.plate{
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,#fff 0%,#eceff3 55%,#dfe4ea 100%);
  border:3px solid #0b0d10;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.35);
  overflow:hidden;margin:18px 0;user-select:none;
}
.plate--demo{max-width:420px;margin:22px auto}
.plate__eu,.plate__dep{
  flex:0 0 auto;width:11%;min-width:44px;
  background:var(--plate-blue);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:6px 2px;
}
.plate__stars{font-size:7px;line-height:.9;color:var(--accent);letter-spacing:1px;text-align:center}
.plate__f{font-weight:800;font-size:clamp(13px,3.2vw,19px);letter-spacing:.5px}
.plate__logo{width:72%;max-width:26px;padding-top:2px;border-bottom:2px solid var(--plate-red);padding-bottom:3px}
.plate__logo svg{display:block;width:100%;height:auto}
.plate__depnum{font-weight:800;font-size:clamp(13px,3.2vw,19px);padding-bottom:2px}
.plate__body{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.14em;
  color:#111;padding:10px 4px;
  font-family:"Arial Narrow","Helvetica Neue Condensed",Impact,Haettenschweiler,sans-serif;
  font-weight:800;font-size:clamp(30px,9.2vw,62px);line-height:1;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.plate__sep{opacity:.75;font-size:.7em;transform:translateY(-.08em)}
.plate__letters{position:relative;transition:color .2s,text-shadow .2s}
.plate__letters.hit{color:var(--plate-blue);text-shadow:0 0 14px rgba(11,62,168,.45);animation:pairHit .5s ease-out}
@keyframes pairHit{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
/* la paire garde la trace de ce qui a été trouvé : ambre à moitié, verte une fois lue */
.plate__letters.half{color:#b07a06;text-shadow:0 0 10px rgba(255,186,40,.35)}
.plate__letters.done{color:#0f7a3d;text-shadow:0 0 12px rgba(27,175,96,.4)}
.plate__letters.done::after{
  content:'✓';position:absolute;right:-.44em;top:-.30em;
  font-size:.42em;font-weight:800;color:#0f7a3d;
}
/* l'éclat qui balaie la plaque au moment où le mot tombe */
.plate__shine{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  animation:plateShine .6s ease-out forwards;
}
@keyframes plateShine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
/* le mot trouvé, en bandeau au bas de la plaque — il ne couvre pas les lettres */
.plate__word{
  position:absolute;left:50%;bottom:4%;z-index:6;pointer-events:none;font-style:normal;
  font-family:var(--cond);font-weight:800;letter-spacing:.06em;white-space:nowrap;
  font-size:clamp(9px,2.1vw,14px);line-height:1;padding:1px 6px;border-radius:4px;
  background:var(--plate-blue);color:#fff;
  animation:plateWord 1s ease-out forwards;
}
.plate__word--done{background:#0f7a3d}
@keyframes plateWord{
  0%  {transform:translate(-50%,6px) scale(calc(var(--k,1) * .7));opacity:0}
  16% {transform:translate(-50%,0) scale(var(--k,1));opacity:1}
  72% {transform:translate(-50%,0) scale(var(--k,1));opacity:1}
  100%{transform:translate(-50%,-10px) scale(var(--k,1));opacity:0}
}

/* ───────── accueil ───────── */
.logo{
  font-family:"Arial Narrow",Impact,sans-serif;font-size:clamp(40px,12vw,74px);
  letter-spacing:.14em;text-align:center;font-weight:800;
  background:linear-gradient(180deg,#fff,#9fb0c8);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{text-align:center;color:var(--dim);margin-top:-4px;font-size:14px}

.ruleline{text-align:center;color:var(--dim);font-size:13.5px;margin:2px 0 4px;line-height:1.7}
.ruleline b{color:var(--txt)}
.ruleline em{font-style:normal;background:var(--bg2);border:1px solid var(--line);border-radius:7px;
  padding:2px 8px;margin:0 2px;color:var(--txt);white-space:nowrap}
.ruleline em b{color:var(--accent)}
.modes{display:grid;gap:8px;margin:16px 0 18px}
.modes button{
  display:block;width:100%;text-align:left;cursor:pointer;transition:.15s;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--txt);
}
.modes button b{display:block;font-size:16px}
.modes button em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:1px}
.modes button:hover{border-color:#41506a}
.modes button.on{background:linear-gradient(180deg,#2a2411,#1e1c14);border-color:var(--mode)}
.modes button.on b{color:var(--mode)}

.settings{display:grid;gap:14px;margin:0 0 18px}
.setting__label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:6px}
.segmented{display:flex;gap:6px}
.segmented button{
  flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 4px;cursor:pointer;font-size:14px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s;
}
.segmented button em{font-style:normal;font-size:11px;color:var(--dim);font-weight:400}
.segmented button:hover{border-color:#41506a}
.segmented button.on{background:var(--mode);color:#14181f;border-color:var(--mode)}
.segmented button.on em{color:#4a4127}

.btn{
  background:var(--accent);color:#14181f;border:0;border-radius:10px;
  font-weight:700;font-size:16px;padding:13px 20px;cursor:pointer;transition:.15s;
}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default}
.btn--big{display:block;width:100%;font-size:18px;padding:16px}
.btn--share{background:var(--bg3);color:var(--txt);border:1px solid var(--line);margin-bottom:10px}
.btn--share:hover{border-color:var(--accent)}
.linkbtn{background:none;border:0;color:var(--dim);text-decoration:underline;cursor:pointer;font-size:14px;padding:8px}
.linkbtn:hover{color:var(--txt)}
.hint-line{color:var(--dim)}
.linkbtn--armed{color:var(--ko);text-decoration:none;font-weight:700}
.best{text-align:center;color:var(--dim);font-size:13px;margin-top:10px;min-height:19px}
.credit{text-align:center;color:#5c6879;font-size:11.5px;margin-top:16px}
.credit a{color:#7d8ba0}

.homestats{display:flex;gap:8px;margin:14px 0}
.stat{
  flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:9px 6px;text-align:center;color:var(--txt);
}
button.stat{cursor:pointer;transition:.15s}
button.stat:hover{border-color:var(--accent)}
.stat__v{display:block;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.stat__k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-top:1px}

.rules{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-top:16px}
.rules summary{cursor:pointer;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700}
.rules ol{padding-left:20px;display:grid;gap:9px;font-size:14.5px;margin-top:12px}
.rules .ex{display:block;color:var(--dim);font-size:13px;margin-top:3px}
.rules .ex b{color:var(--accent);font-weight:700}

/* ───────── HUD ───────── */
.hud{display:flex;gap:8px;justify-content:space-between;align-items:stretch}
.hud__item{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;flex:1;text-align:center;transition:.2s}
.hud__item--goal{flex:1.4}
.hud__item--mult{flex:.8}
.hud__k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);white-space:nowrap}
.hud__v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.hud__v i{font-style:normal;color:var(--dim);font-size:13.5px}

/* ───────── retour de saisie ───────── */
.hint-line{text-align:center;margin-top:14px}
.feedback{min-height:24px;font-size:14px;margin:8px 2px 6px;transition:.15s}
.feedback.ok{color:var(--ok)}
.feedback.ko{color:var(--ko)}
.feedback b{font-weight:700}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.shake{animation:shake .3s}

/* ───────── fin de manche ───────── */
#screen-round h2,#screen-end h2,#screen-collection h2{font-size:22px;text-align:center;margin:8px 0 14px}
.recap{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.recap__row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14.5px;border-bottom:1px dashed #232b36}
.recap__row:last-child{border:0}
.recap__row.total{font-weight:700;font-size:17px;color:var(--accent);padding-top:10px}
.recap__row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.recap__row.dim{color:var(--dim)}

.quiz{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.quiz__q{font-size:16px;margin-bottom:12px;text-align:center}
.quiz__q b{color:var(--accent);font-size:20px}
.quiz__timer{height:5px;background:#0e1116;border-radius:99px;overflow:hidden;margin-bottom:12px}
.quiz__bar{height:100%;width:100%;background:var(--accent);transition:width .1s linear}
.quiz__opts{display:grid;gap:8px}
.quiz__opts button{
  background:var(--bg3);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:12px;font-size:15px;cursor:pointer;text-align:left;transition:.15s;
}
.quiz__opts button:hover:not(:disabled){border-color:#41506a}
.quiz__opts button.good{background:rgba(61,220,132,.16);border-color:var(--ok);color:#bff7d6}
.quiz__opts button.bad{background:rgba(255,107,107,.14);border-color:var(--ko);color:#ffc9c9}
.quiz__opts button:disabled{cursor:default}
.quiz__hint{text-align:center;color:var(--dim);font-size:12px;margin-top:10px}
.quiz-result{text-align:center;font-size:15px;margin:14px 0;padding:12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.quiz-result b{color:var(--accent)}
.newdep{color:var(--ok);font-size:13.5px}

.final-score{text-align:center;font-size:56px;font-weight:800;color:var(--mode,var(--accent));line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px color-mix(in srgb,var(--mode,var(--accent)) 32%,transparent)}
.recap__row.total{color:var(--mode,var(--accent))}

/* ───────── les prises rares, en vignettes ─────────
   Une promotion, un badge ou une voiture inédite ne doivent pas se perdre entre
   « 14 mots » et « 3 plaques » : elles sortent de la liste et prennent la parole. */
.prizes{display:grid;gap:8px;margin-bottom:12px}
.prize{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.prize__i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:42px;height:42px;font-size:26px;line-height:1}
.prize__b{display:flex;flex-direction:column;gap:1px;min-width:0}
.prize__b i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.prize__b b{font-family:var(--cond);font-size:19px;letter-spacing:.02em}
.prize__b u{text-decoration:none;font-weight:400;font-size:12.5px;color:var(--dim);display:block}
.prize--grade{border-color:rgba(255,207,63,.5)} .prize--grade .prize__b b{color:var(--accent)}
.prize--rank{border-color:rgba(138,182,255,.45)} .prize--rank .prize__b b{color:var(--rare)}
.prize--car{border-color:rgba(61,220,132,.45)} .prize--car .prize__b b{color:var(--ok)}
.prize--badge{border-color:rgba(255,154,60,.45)}
.prize--mission{border-color:rgba(61,220,132,.35)}

/* chaque ligne entre à son tour : le même contenu, ressenti plus généreux */
.prize,.recap__row{animation:recapIn .42s both cubic-bezier(.2,.8,.3,1);animation-delay:calc(var(--i,0) * 55ms)}
@keyframes recapIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.prize,.recap__row{animation:none}}
#btn-home{display:block;margin:10px auto 0}

/* ───────── collection ───────── */
.collec__intro{text-align:center;color:var(--dim);font-size:14px}
.collec__intro b{color:var(--txt);font-size:17px}
.collec__bar{height:8px;background:var(--bg2);border:1px solid var(--line);border-radius:99px;margin:10px 0 20px;overflow:hidden}
.collec__fill{height:100%;background:linear-gradient(90deg,var(--ok),var(--accent));transition:width .4s}
.collec__reg{margin-bottom:14px}
.collec__reg h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin-bottom:6px;display:flex;justify-content:space-between}
.collec__reg h3 i{font-style:normal;color:#5c6879}
.collec__row{display:flex;flex-wrap:wrap;gap:5px}
.dep{
  width:38px;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--bg2);border:1px solid var(--line);color:#4a5666;
  font-variant-numeric:tabular-nums;transition:.15s;
}
.dep--on{
  background:var(--plate-blue);border-color:#1e5fd8;color:#fff;
  box-shadow:0 0 10px rgba(11,62,168,.5),inset 0 -8px 10px -8px rgba(255,255,255,.5);
}
#btn-collection-back{margin-top:8px}

/* ───────── le garage : tableau de chasse ─────────
   Une case pleine porte la photo de la voiture prise, avec un halo de sa teinte ;
   une case vide n'est qu'un emplacement et la pastille de la couleur qui manque. */
.garcard{
  display:block;width:100%;text-align:left;cursor:pointer;color:var(--txt);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin:10px 0;
}
.garcard__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.garcard__k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.garcard__head b{font-size:15px;font-variant-numeric:tabular-nums}
.garcard__bar{height:6px;background:var(--bg);border-radius:99px;overflow:hidden;margin:7px 0 6px}
.garcard__fill{height:100%;background:linear-gradient(90deg,var(--ok),var(--accent));transition:width .4s}
.garcard__row{display:flex;gap:8px;align-items:center;min-height:30px;overflow:hidden}
.garcard__row img{height:30px;width:auto;flex:0 0 auto}
.garcard__row span{font-size:11.5px;color:var(--dim)}

.gar{margin-bottom:14px}
.gar h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin-bottom:6px;display:flex;justify-content:space-between}
.gar h3 i{font-style:normal;color:#5c6879}
.gar__row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
@media(min-width:560px){.gar__row{grid-template-columns:repeat(12,1fr)}}
.gcar{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:5px 3px 4px;text-align:center;overflow:hidden;
}
.gcar img{width:100%;height:auto;display:block;margin-bottom:3px}
.gcar__slot{
  display:block;height:28px;margin-bottom:3px;border-radius:6px;position:relative;
  background:var(--bg);border:1px dashed var(--line);font-size:12px;line-height:28px;font-style:normal;
}
.gcar__slot::after{
  content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--t);opacity:.45;
}
.gcar--lock .gcar__slot::after{display:none}
.gcar span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#5c6879}
.gcar u{position:absolute;top:3px;right:4px;font-size:9px;text-decoration:none;color:var(--dim);font-variant-numeric:tabular-nums;background:rgba(10,13,18,.72);padding:0 3px;border-radius:4px;line-height:1.4}
.gcar--on{border-color:rgba(61,220,132,.45);cursor:pointer}
.gcar--on:hover{border-color:var(--ok);transform:translateY(-1px)}
.gcar--on::before{content:'';position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 16px -5px var(--t);pointer-events:none}
.gcar--on span{color:var(--txt)}
.gcar--lock{opacity:.5}
#btn-garage-back{margin-top:8px}

/* ───────── showroom : la voiture sur son plateau ─────────
   Les sprites n'existent qu'en deux vues, l'arrière et l'avant — soit les deux moitiés
   d'un tour. Un basculement en rotateY les enchaîne et la voiture semble pivoter.
   Le reflet est le même sprite retourné, dégradé vers le bas par un masque.          */
.show{
  position:relative;width:100%;max-width:460px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#141a26,#0c1118);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.72);animation:cardIn .35s cubic-bezier(.2,.8,.3,1.2);
}
.show__x{
  position:absolute;right:10px;top:10px;z-index:3;width:32px;height:32px;border-radius:50%;
  background:rgba(10,14,20,.6);border:1px solid var(--line);color:var(--dim);cursor:pointer;font-size:14px;
}
.show__x:hover{color:var(--txt);border-color:var(--mode,var(--accent))}
.show__stage{
  position:relative;height:clamp(236px,40vh,300px);overflow:hidden;cursor:pointer;
  background:
    radial-gradient(70% 55% at 50% 22%,rgba(255,255,255,.10),transparent 70%),
    radial-gradient(120% 70% at 50% 100%,rgba(90,169,255,.10),transparent 70%),
    linear-gradient(180deg,#1b2434 0%,#121824 58%,#070a0f 100%);
}
.show__stage::after{           /* la ligne du plateau */
  content:'';position:absolute;left:8%;right:8%;top:62%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.show__turn{
  position:absolute;left:50%;top:62%;width:52%;
  transform:translate(-50%,-100%);transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.9,.3,1);
}
.show__turn.flip{transform:translate(-50%,-100%) rotateY(180deg)}
/* la voiture calculée en direct remplace les sprites quand la silhouette est portée */
.show__gl{position:absolute;inset:0;width:100%;height:100%;display:none}
.modal.has-gl .show__gl{display:block}
.modal.has-gl .show__turn{display:none}
.modal.has-gl .show__stage{cursor:grab;touch-action:none}
.modal.has-gl .show__stage:active{cursor:grabbing}
.modal.has-gl .show__stage::after{display:none}
.show__face{position:absolute;left:0;right:0;bottom:0;backface-visibility:hidden}
.show__face--front{transform:rotateY(180deg)}
.show__car{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.65))}
.show__mirror{                 /* le reflet : le même sprite, retourné et fondu */
  position:absolute;left:0;top:100%;transform:scaleY(-1);opacity:.3;filter:blur(.7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 92%);
  mask-image:linear-gradient(180deg,transparent 0,#000 92%);
}
.show__sweep{                  /* le balayage de lumière sur la carrosserie */
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.14) 50%,transparent 64%);
  animation:showSweep 4.2s ease-in-out infinite;
}
@keyframes showSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.show__head{padding:16px 20px 2px;text-align:left}
.show__head b{display:block;font-family:var(--cond);font-size:28px;letter-spacing:.02em;color:var(--mode,var(--accent))}
.show__head i{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.show__specs{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;padding:12px 20px 4px;margin:0;font-size:13.5px}
.show__specs dt{color:var(--dim);white-space:nowrap}
.show__specs dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.show__specs u{text-decoration:none;color:var(--dim);font-size:12px}
.show__hint{padding:10px 20px 4px;font-size:11.5px;color:#5c6879;text-align:center}
.show + *,.show button.btn--share{margin:0 20px 18px;width:calc(100% - 40px)}
@media (prefers-reduced-motion:reduce){.show__sweep{animation:none}.show__turn{transition:none}}

/* ───────── mode Trafic : la route ─────────
   Perspective unique : point de fuite (50 %, 46 %), sol y = 46 + K/z,
   écart latéral x = 50 ± 38/z, taille = 1/z. Bandes et voitures partagent
   cette projection, sinon rien ne s'aligne.                              */
.road{
  --roadH:clamp(240px,46vh,380px);
  position:relative;height:var(--roadH);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin:12px 0 8px;background:#0b1016;
}
.road__sky{position:absolute;inset:0 0 54% 0;
  background:linear-gradient(180deg,#0c1526 0%,#1d2f45 46%,#4d4a4c 78%,#8a6a4f 96%,#a67c52 100%)}
.road__sun{position:absolute;left:50%;top:var(--sunTop,20%);width:82px;height:82px;margin-left:-41px;border-radius:50%;
  background:radial-gradient(circle,#ffc97e 0%,#ff8f45 46%,rgba(255,143,69,0) 72%);opacity:.8;
  transition:top 1s linear}
/* le crépuscule (Trafic) : le soleil descend avec le chrono, le ciel et le sol s'assombrissent
   d'autant — --dusk va de 0 (départ) à 1 (fin de partie) */
.road__sky::after,.road__ground::after{content:'';position:absolute;inset:0;pointer-events:none;
  opacity:var(--dusk,0);transition:opacity 1s linear}
.road__sky::after{background:linear-gradient(180deg,#04070e 0%,#0b1020 60%,#2a1a24 100%);mix-blend-mode:multiply;opacity:calc(var(--dusk,0)*.85)}
.road__ground::after{background:#05070a;opacity:calc(var(--dusk,0)*.45)}
.road__ground{position:absolute;inset:46% 0 0 0;
  background:linear-gradient(180deg,#414428 0%,#252d16 12%,#18200e 40%,#0c1108 100%);
  box-shadow:inset 0 7px 16px -7px rgba(196,160,124,.5)}
.road__tarmac{position:absolute;inset:46% 0 0 0;
  background:
    /* rustines d'enrobé, réparations plus sombres */
    radial-gradient(30% 7% at 31% 76%,rgba(0,0,0,.17),transparent 70%),
    radial-gradient(20% 5% at 69% 88%,rgba(0,0,0,.15),transparent 70%),
    radial-gradient(16% 4% at 54% 63%,rgba(0,0,0,.11),transparent 70%),
    /* bombement : la chaussée est plus claire en son milieu, ses rives plongent dans l'ombre */
    linear-gradient(90deg,rgba(0,0,0,.30) 0 5%,rgba(0,0,0,.10) 18%,transparent 34% 66%,rgba(0,0,0,.10) 82%,rgba(0,0,0,.30) 95%),
    linear-gradient(180deg,#5a626d 0%,#3f464f 48%,#2c313a 100%);
  clip-path:polygon(46.2% 0,53.8% 0,150% 100%,-50% 100%)}
.road__edge{position:absolute;inset:46% 0 0 0;
  background:linear-gradient(180deg,rgba(222,216,196,.5) 0 12%,rgba(236,232,216,.66) 45%,rgba(214,206,184,.6) 100%)}
.road__edge--r{clip-path:polygon(53.3% 0,54% 0,150% 100%,143% 100%)}
.road__edge--l{clip-path:polygon(46% 0,46.7% 0,-43% 100%,-50% 100%)}

.road__glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.05) 0 24%,transparent 28% 100%),
             radial-gradient(125% 92% at 50% 42%,transparent 52%,rgba(0,0,0,.6) 100%)}

/* ───────── mode Trafic : les voitures ─────────
   Base au sol à 12 % du bas ; en s'éloignant elle suit la projection de la route
   — sol y = 46 % + 42 %/z depuis le haut, échelle = 1/z —, donc elle remonte de
   exactement 42 %·(1 − échelle) et se pose sur l'horizon sans jamais le dépasser. */
.road__cars{position:absolute;inset:0}
.car{
  position:absolute;left:calc(50% + var(--lane,0%));bottom:12%;   /* la place du bas revient à votre voiture de police */
  width:min(calc(var(--roadH) * var(--w,.74)), 30%);
  transform:translate(-50%,0) scale(1);transform-origin:50% 100%;
  will-change:transform,opacity;
}
.car__body{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* ── les feux arrière, qui s'allument à mesure que le soleil tombe ──
   Leur position vient du sprite lui-même : build/find_lights.py repère les deux amas
   de pixels rouges de chaque silhouette et les écrit dans layout.json, d'où ils
   passent dans FLEET. Les pourcentages sont donc ceux de l'image, et le calque se
   superpose exactement au sprite, quelle que soit la taille d'affichage.           */
.car__lamp{
  position:absolute;width:var(--lw,8%);height:var(--lh,10%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  border-radius:50%;
  /* en fusion « screen » le feu ajoute de la lumière au sprite au lieu de le repeindre */
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,180,160,.98) 0%,rgba(255,70,45,.9) 38%,rgba(255,24,14,0) 76%);
  mix-blend-mode:screen;
  opacity:calc(var(--dusk,0) * .95);
  filter:blur(.6px);
  transition:opacity 1s linear;
}
.car__lamp::after{             /* le halo, bien plus large que le feu lui-même */
  content:'';position:absolute;left:50%;top:50%;width:300%;height:300%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,60,34,.5) 0%,rgba(255,40,20,.16) 42%,rgba(255,30,16,0) 72%);
}
.car__lamp--l{left:var(--l1x,14%);top:var(--l1y,48%)}
.car__lamp--r{left:var(--l2x,80%);top:var(--l2y,48%)}
/* la lueur que les feux laissent sur le bitume, derrière la voiture */
.car__glow{
  position:absolute;left:50%;bottom:-2%;width:96%;height:16%;
  transform:translateX(-50%);pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,60,40,.42) 0%,rgba(255,40,30,.14) 50%,rgba(255,30,20,0) 100%);
  opacity:calc(var(--dusk,0) * .85);
  mix-blend-mode:screen;transition:opacity 1s linear;
}
/* la citerne et le leurre gardent leurs feux, mais le leurre les a rouges plus durs */
.car--trap .car__lamp{background:radial-gradient(50% 50% at 50% 50%,rgba(255,60,60,1) 0%,rgba(255,20,20,.6) 45%,rgba(255,0,0,0) 78%)}
/* L'ombre portée suit le couchant : le soleil est au point de fuite, droit devant,
   donc l'ombre tombe vers le spectateur. Elle s'allonge et pâlit à mesure qu'il
   descend — c'est ce qui assied la voiture dans la scène au lieu de la poser dessus.
   La tache de contact, elle, ne bouge pas : son ::after annule l'étirement du parent. */
.car__shadow{
  position:absolute;left:50%;bottom:1.5%;width:86%;height:7%;
  transform:translateX(-50%) translateY(calc(var(--dusk,0) * 26%)) scaleY(calc(1 + var(--dusk,0) * 1.05));
  transform-origin:50% 0;
  opacity:calc(1 - var(--dusk,0) * .55);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,0) 100%);
  pointer-events:none;transition:opacity 1s linear;
}
.car__shadow::after{
  content:'';position:absolute;left:50%;top:0;width:56%;height:88%;
  transform:translate(-50%,-26%) scaleY(calc(1 / (1 + var(--dusk,0) * 1.05)));
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 60%,rgba(0,0,0,0) 100%);
  opacity:calc(.55 + var(--dusk,0) * .45);
}
.car--in{animation:overtake .85s cubic-bezier(.2,.72,.3,1)}
@keyframes overtake{
  0%  {transform:translate(-50%,16%) scale(1.5);opacity:0}
  30% {opacity:1}
  100%{transform:translate(-50%,0) scale(1);opacity:1}
}
.car--away{animation:recede 2.1s linear forwards}
@keyframes recede{
  0%  {left:calc(50% + var(--lane,0%));        transform:translate(-50%,0) scale(1);opacity:1;filter:none}
  20% {left:calc(50% + var(--lane,0%) * .410); transform:translate(-50%,calc(var(--roadH) * -0.248)) scale(.410);opacity:1}
  40% {left:calc(50% + var(--lane,0%) * .186); transform:translate(-50%,calc(var(--roadH) * -0.342)) scale(.186);opacity:1}
  60% {left:calc(50% + var(--lane,0%) * .106); transform:translate(-50%,calc(var(--roadH) * -0.375)) scale(.106);opacity:.9}
  80% {left:calc(50% + var(--lane,0%) * .070); transform:translate(-50%,calc(var(--roadH) * -0.391)) scale(.070);opacity:.55}
  100%{left:calc(50% + var(--lane,0%) * .050); transform:translate(-50%,calc(var(--roadH) * -0.399)) scale(.050);opacity:0;filter:blur(1.1px) saturate(.6)}
}
.car--done .car__body{filter:drop-shadow(0 0 16px rgba(61,220,132,.8))}

.plate--car{
  position:absolute;left:50%;top:var(--plateY,72%);width:calc(var(--plateW,46%) * 1.65);transform:translate(-50%,-50%);
  margin:0;border-width:2px;border-radius:4px;z-index:2;
  box-shadow:0 2px 7px rgba(0,0,0,.7);
}
.plate--car .plate__body{font-size:clamp(10px,2.9vw,18.5px);padding:2px 2px;gap:.08em}
.plate--car .plate__eu{width:13%;min-width:0;padding:2px 0;justify-content:center}
.plate--car .plate__dep{width:auto;min-width:15%;padding:2px 2px;justify-content:center}
.plate--car .plate__f{font-size:clamp(6px,1.7vw,9px)}
.plate--car .plate__depnum{font-size:clamp(5.5px,1.4vw,9px);letter-spacing:-.03em;white-space:nowrap}
.plate--car .plate__sep{font-size:.55em}

.car__timer{position:absolute;left:50%;top:calc(var(--plateY,72%) + 13%);width:calc(var(--plateW,46%) * 1.65);height:4px;transform:translateX(-50%);
  background:rgba(0,0,0,.6);border-radius:9px;overflow:hidden;z-index:3}
.car__timer i{display:block;height:100%;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#3ddc84,#ffcf3f);transition:transform .12s linear}

.car__pop{
  position:absolute;left:50%;top:-6%;transform:translateX(-50%);z-index:4;
  font-weight:800;font-size:18px;color:var(--ok);opacity:0;white-space:nowrap;
  text-shadow:0 2px 7px #000,0 0 3px #000;
}
.car__pop.go{animation:popup 1.2s ease-out}
@keyframes popup{
  0%  {opacity:0;transform:translate(-50%,12px) scale(.8)}
  22% {opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-32px) scale(1)}
}
.car__pop.rare{color:var(--rare)}
.car__pop.miss{color:var(--ko)}
.car__pop.win{color:var(--accent);font-size:20px}
.car__pop.ko{color:var(--ko);font-size:20px}

.tr-pairs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 10px;min-height:34px}
#tr-pairs .tok{font-size:13px;padding:4px 9px;letter-spacing:.1em}
#tr-pairs .tok--on{font-size:12px}
.tok{
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:5px 14px;
  font-weight:800;letter-spacing:.12em;font-size:16px;color:var(--txt);transition:.2s;
}
.tok--on{background:rgba(61,220,132,.14);border-color:var(--ok);color:var(--ok);letter-spacing:.02em;font-size:14px;font-weight:600}
.tok--wait{opacity:.35;letter-spacing:.2em}
#tr-timebox.low .hud__v{color:var(--ko)}
#tr-timebox{position:relative}
.hud__gain{position:absolute;right:8px;top:6px;font-size:12px;font-weight:800;color:var(--ok);opacity:0}
.hud__gain.go{animation:rise 1s ease-out}
@keyframes rise{0%{opacity:0;transform:translateY(4px)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
#tr-form{display:flex;gap:8px}
#tr-input{
  flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-size:20px;padding:13px 16px;letter-spacing:.06em;outline:none;text-transform:lowercase;
}
#tr-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,207,63,.12)}

/* ───────── places et marques (hérité) ───────── */
@keyframes boom{
  0%  {transform:none;filter:none}
  8%  {transform:translateY(-7%) scale(1.12);filter:brightness(6) saturate(.25)}
  22% {transform:translateY(-12%) scale(1.04) rotate(-3deg);filter:brightness(2.2)}
  100%{transform:translateY(-34%) scale(.5) rotate(11deg);opacity:0;filter:brightness(.1)}
}
.plate--park{width:calc(var(--plateW,46%) * 1.6)}
.plate--park .plate__body{font-size:clamp(8.5px,2.4vw,15px)}
.plate--park .plate__body{font-size:clamp(10px,2.9vw,16px)}

.flash{
  position:absolute;left:50%;top:60%;width:10px;height:10px;transform:translate(-50%,-50%);
  border-radius:50%;animation:flashOut .5s ease-out forwards;
  background:radial-gradient(circle,#fff 0%,#ffdc9b 26%,#ff8a2a 52%,rgba(255,90,20,0) 74%);
}
@keyframes flashOut{
  0%  {width:14px;height:14px;opacity:1}
  22% {opacity:1}
  100%{width:360px;height:360px;opacity:0}
}
.ring{
  position:absolute;left:50%;top:60%;width:10px;height:10px;transform:translate(-50%,-50%);
  border-radius:50%;border:3px solid rgba(255,214,150,.85);animation:ringOut .62s ease-out forwards;
}
@keyframes ringOut{
  0%  {width:10px;height:10px;opacity:.95;border-width:5px}
  100%{width:240px;height:150px;opacity:0;border-width:1px}
}
.frag{
  position:absolute;left:50%;top:60%;width:7px;height:7px;border-radius:2px;background:#ffb257;
  box-shadow:0 0 6px rgba(255,150,60,.8);animation:fragOut .95s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes fragOut{
  0%  {transform:translate(-50%,-50%) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot));opacity:0}
}
.smoke{
  position:absolute;bottom:16%;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,rgba(130,130,136,.5) 0%,rgba(90,90,96,0) 70%);
  animation:smokeUp 1.35s ease-out forwards;
}
@keyframes smokeUp{
  0%  {transform:translateY(0) scale(.35);opacity:.9}
  100%{transform:translateY(-76px) scale(2);opacity:0}
}
.pk-tokens{flex-wrap:wrap;gap:6px}
.pk-tokens .tok{font-size:13px;padding:4px 9px;letter-spacing:.1em}
.pk-tokens .tok--on{font-size:12px}
.tok__sep{width:1px;height:20px;background:var(--line);display:inline-block;margin:0 2px}

/* ───────── coupé sport : vaut plus ───────── */
.tok--sport{border-color:var(--accent);box-shadow:0 0 10px rgba(255,207,63,.22)}
.tok--tag{font-size:11px;letter-spacing:0;padding:4px 8px;color:var(--accent);border-color:transparent;background:none;font-weight:700}
.car--sport .plate--car{box-shadow:0 2px 7px rgba(0,0,0,.7),0 0 0 2px rgba(255,207,63,.55)}
.sport-tag{
  position:absolute;left:50%;top:6%;transform:translateX(-50%);z-index:3;
  background:rgba(20,24,31,.85);border:1px solid var(--accent);color:var(--accent);
  font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;white-space:nowrap;
}
/* ── le leurre : une voiture qu'il ne faut pas lire ──
   Tout le signalement passe par sa plaque, rouge au lieu de bleue : c'est elle
   que le joueur regarde, et c'est elle qui doit l'arrêter.                      */
.sport-tag--trap{border-color:var(--ko);color:#ffd9d9;background:rgba(120,16,16,.9);animation:trapTag 1.1s ease-in-out infinite}
@keyframes trapTag{0%,100%{opacity:1}50%{opacity:.6}}
.car--trap .car__body{filter:saturate(.45) brightness(.86) drop-shadow(0 0 10px rgba(255,70,70,.45))}
.plate--trap{border-color:#43090b;box-shadow:0 10px 30px rgba(120,0,0,.5),inset 0 0 0 1px rgba(90,0,0,.5),0 0 0 2px rgba(255,70,70,.55)}
.plate--trap .plate__eu,.plate--trap .plate__dep{background:var(--plate-red)}
.plate--trap .plate__body{background:linear-gradient(180deg,#ffecec 0%,#ffd9d9 60%,#ffc7c7 100%)}
.plate--trap .plate__letters,.plate--trap .plate__num{color:#7a0b0b}

/* ───────── Trafic : trois voies qui roulent ───────── */
/* séparations de voies : continues et discrètes, elles convergent vers le point de fuite
   (voies à −30 / 0 / +30 % au premier plan → séparations à ±15 %) */
/* pas de ligne sur la chaussée : ni marquage peint, ni joint — le bitume est nu */
.road__lane{display:none}
.road__lane--l{clip-path:polygon(49.75% 0,50.05% 0,34.6% 100%,33.8% 100%)}
.road__lane--r{clip-path:polygon(49.95% 0,50.25% 0,66.2% 100%,65.4% 100%)}
/* deux voies : une seule séparation, au centre, et des voitures plus larges */
.road--two .road__lane--l,.road--two .road__lane--r{clip-path:polygon(49.8% 0,50.2% 0,50.6% 100%,49.4% 100%)}
.road--two .car{width:min(calc(var(--roadH) * var(--w,.74)), 48.5%)}
.road--two .plate--car .plate__depnum{font-size:clamp(7px,2vw,9px)}

/* le bloc « ride » : la voiture avance et recule doucement, avec un léger roulis */
.car__ride{position:relative;transform-origin:50% 96%;animation:cruise var(--ride,3s) ease-in-out var(--ridePhase,0s) infinite alternate;will-change:transform}
@keyframes cruise{
  0%  {transform:translateY(0) scale(1) rotate(-.35deg)}
  50% {transform:translateY(-1.2%) scale(.985) rotate(.2deg)}
  100%{transform:translateY(-3.2%) scale(.962) rotate(.4deg)}
}
.car__fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.car--boom .car__ride{animation:boom .6s cubic-bezier(.2,.75,.4,1) forwards}
.car--boom .car__timer{display:none}
.road{will-change:transform}

/* ───────── Trafic : la route défile ─────────
   Balises J6 sur l'accotement (hors chaussée), projetées comme les voitures :
   x = 50 ± 106/z, y = 46 + 54/z, taille 1/z.                                  */
.road__posts{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.post{
  position:absolute;width:calc(var(--roadH) * .018);height:calc(var(--roadH) * .13);
  border-radius:2px;background:linear-gradient(180deg,#d8322c 0 26%,#f3efe2 26% 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transform:translate(-50%,-100%) scale(.167);opacity:0;
  animation:post-run 1.32s linear infinite;will-change:top,left,transform;
}
.post--l{animation-name:post-run-l}
.post--r{animation-name:post-run-r}
@keyframes post-run-l{
  0%   {top:55%;   left:32.3%;transform:translate(-50%,-100%) scale(.167);opacity:0}
  12%  {opacity:1}
  37.9%{top:59.5%; left:23.5%;transform:translate(-50%,-100%) scale(.25)}
  56.8%{top:64%;   left:14.7%;transform:translate(-50%,-100%) scale(.333)}
  72%  {top:70.55%;left:1.8%; transform:translate(-50%,-100%) scale(.455)}
  83.3%{top:79.75%;left:-16.3%;transform:translate(-50%,-100%) scale(.625)}
  100% {top:91%;   left:-38.3%;transform:translate(-50%,-100%) scale(.833);opacity:1}
}
@keyframes post-run-r{
  0%   {top:55%;   left:67.7%;transform:translate(-50%,-100%) scale(.167);opacity:0}
  12%  {opacity:1}
  37.9%{top:59.5%; left:76.5%;transform:translate(-50%,-100%) scale(.25)}
  56.8%{top:64%;   left:85.3%;transform:translate(-50%,-100%) scale(.333)}
  72%  {top:70.55%;left:98.2%;transform:translate(-50%,-100%) scale(.455)}
  83.3%{top:79.75%;left:116.3%;transform:translate(-50%,-100%) scale(.625)}
  100% {top:91%;   left:138.3%;transform:translate(-50%,-100%) scale(.833);opacity:1}
}

/* les voitures prennent et perdent du terrain de façon visible (z de 1 à 1,3),
   avec une vibration de suspension */
@keyframes cruise{
  0%  {transform:translateY(0) scale(1) rotate(-.3deg)}
  100%{transform:translateY(calc(var(--roadH) * -.11)) scale(.77) rotate(.3deg)}
}
.car__body{animation:rumble .16s ease-in-out infinite alternate}
@keyframes rumble{from{transform:translateY(0)}to{transform:translateY(.9px)}}
.car--boom .car__body{animation:none}

/* ───────── cible désignée (clic sur une voiture ou ses jetons) ───────── */
.tokgroup{display:inline-flex;gap:4px;padding:3px;border-radius:11px;border:1px solid transparent;margin:0 3px;cursor:pointer}
.tokgroup.tok--target{border-color:var(--accent);background:rgba(255,207,63,.08)}
.car{cursor:pointer}
.car--target .plate--car{box-shadow:0 2px 7px rgba(0,0,0,.7),0 0 0 3px var(--accent)}
.feedback .mono{letter-spacing:.06em}

/* alignement de couleur complété */
@keyframes lineGlow{
  0%,60%{box-shadow:inset 0 0 0 3px var(--accent),0 0 22px rgba(255,207,63,.7);background:rgba(255,207,63,.22)}
  100%{box-shadow:none}
}


@media (max-width:520px){
  .plate--park{width:calc(var(--plateW,46%) * 2.05)}
  .plate--park .plate__eu,.plate--park .plate__dep{display:none}
  .plate--park .plate__body{font-size:11.5px;padding:3px 4px}
  .sport-tag{font-size:9px;padding:1px 6px}
}


@keyframes parkIn{
  0%  {transform:translateY(-22%) scale(.55);opacity:0}
  35% {opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes towOut{to{transform:translateY(-40%) scale(.6);opacity:0}}
.tokgroup--empty{opacity:.35;cursor:default}

/* ───────── progression, missions, toast ───────── */
.rank{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;color:var(--txt);
  background:linear-gradient(180deg,#1b2029,#161b23);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px;transition:.15s;
}
.rank:hover{border-color:var(--accent)}
.rank__img{width:92px;height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.rank__img--bronze{filter:drop-shadow(0 0 10px rgba(205,127,50,.55))}
.rank__img--argent{filter:drop-shadow(0 0 10px rgba(200,210,225,.6))}
.rank__img--or{filter:drop-shadow(0 0 14px rgba(255,200,60,.75))}
.rank__body{flex:1;min-width:0}
.rank__head{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.rank__k{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.rank__head b{font-size:17px;text-transform:capitalize}
.rank__bar{height:6px;background:#0e1116;border-radius:99px;overflow:hidden}
.rank__fill{height:100%;background:linear-gradient(90deg,var(--accent),#ff9a3c);transition:width .5s}
.rank__foot{display:flex;justify-content:space-between;margin-top:6px}
.rank__foot i{font-style:normal;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.career__row{margin-bottom:14px}
.career__row h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin-bottom:6px}
.career__row h3 i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--accent);margin-left:8px}
.career__metals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.career__rank{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center;font-size:12px;color:var(--dim)}
.career__rank img{width:72%;height:auto;display:block;margin:0 auto 4px}
.career__rank span{display:block;text-transform:capitalize}
.career__rank b{display:block;color:var(--txt);font-variant-numeric:tabular-nums}
.career__rank--got{border-color:rgba(61,220,132,.5)}
.career__rank--now{border-color:var(--accent);background:rgba(255,207,63,.08);color:var(--txt)}
.career__rank--todo img{filter:grayscale(1) brightness(.45)}
.career__rank--todo b{color:var(--dim)}
.missions{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.missions h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.missions ul{list-style:none;display:grid;gap:4px}
.mission{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0;border-bottom:1px dashed #232b36}
.mission:last-child{border:0}
.mission b{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.mission--ok{color:var(--dim);text-decoration:line-through}
.mission--ok b{color:var(--ok);text-decoration:none}
.toast{
  position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translate(-50%,-30px);z-index:30;
  background:rgba(20,24,31,.94);border:1px solid var(--accent);color:var(--txt);border-radius:12px;
  padding:10px 16px;font-size:14px;opacity:0;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.6);max-width:92vw;text-align:center;
}
.toast.go{animation:toastIn 3.2s ease-out}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-30px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-20px)}}

/* fantôme du record */
.ghost{display:block;font-size:11px;font-weight:700;margin-top:2px;min-height:14px;font-variant-numeric:tabular-nums}
.ghost--up{color:var(--ok)}
.ghost--down{color:var(--ko)}

/* rush final */
.road.rush .road__sky{background:linear-gradient(180deg,#2a0b10 0%,#6a1b1b 46%,#a8452a 84%,#d9782f 100%)}
.road.rush .road__sun{background:radial-gradient(circle,#fff0c0 0%,#ff5a2a 46%,rgba(255,60,30,0) 72%)}
.road.rush,.lot.rush{animation:rushPulse .9s ease-in-out infinite alternate}
@keyframes rushPulse{from{box-shadow:0 0 0 0 rgba(255,80,60,0)}to{box-shadow:0 0 0 3px rgba(255,80,60,.55),0 0 28px rgba(255,80,60,.4)}}

/* fièvre : plaques dorées qui pulsent */
.road.fever .plate--car,.lot.fever .plate--car{animation:feverPulse .5s ease-in-out infinite alternate}
@keyframes feverPulse{from{box-shadow:0 2px 7px rgba(0,0,0,.7),0 0 0 2px var(--accent)}to{box-shadow:0 2px 7px rgba(0,0,0,.7),0 0 0 5px var(--accent),0 0 22px rgba(255,207,63,.8)}}

/* voiture dorée, camion-citerne */
.sport-tag--gold{border-color:#ffd54a;color:#ffd54a;background:rgba(60,45,10,.9)}
.sport-tag--tank{border-color:#ff8a3c;color:#ff8a3c;background:rgba(50,25,10,.9)}
/* le caractère d'un modèle : règle ou effet, en bleu discret */
.sport-tag--trait{border-color:rgba(120,170,255,.75);color:#b9d4ff;background:rgba(14,22,40,.9);font-weight:600}
.sport-tag.flash{animation:tagFlash .9s ease-out}
@keyframes tagFlash{0%,40%{background:#ff6b6b;color:#fff;border-color:#fff;transform:translateX(-50%) scale(1.25)}100%{transform:translateX(-50%) scale(1)}}
.car--gold .car__body,.spot__car--gold .car__body{filter:drop-shadow(0 0 12px rgba(255,213,74,.75))}

/* ───────── téléphone : tout tient dans l'écran visible, clavier compris ───────── */
body.fitted{overflow:hidden;padding-top:6px;padding-bottom:0;height:100dvh}
body.fitted .screen.active{display:flex;flex-direction:column;overflow:hidden}
body.fitted .hud{flex:0 0 auto}
body.fitted .hud__item{padding:4px 8px}
body.fitted .hud__v{font-size:16px}
body.fitted .ghost{display:none}
body.fitted .road{flex:0 0 auto;margin:8px 0 6px}
body.fitted .tr-pairs{margin:0 0 6px;min-height:0}
/* rien ne s'écrase quand la place manque : seule la scène se réduit */
body.fitted .tr-pairs,body.fitted .suggest,body.fitted #tr-form,body.fitted #pu-form,
body.fitted .feedback,body.fitted .hint-line{flex:0 0 auto}
.platefield{flex:0 0 auto}
body.fitted .feedback{margin:4px 2px 0;min-height:20px;font-size:13px}
body.fitted .hint-line{margin-top:4px;font-size:13px}
body.fitted .soundbtn{display:none}
#tr-input,#pk-input{width:100%}

/* les plaques du Trafic, grandes quoi qu'il arrive sur un petit écran
   (décidé en CSS pour ne pas dépendre d'une version de script en cache) */
@media (max-width:700px){
  .road .plate--car{width:calc(var(--plateW,46%) * 2.3);border-width:2.5px}
  .road .car__timer{width:calc(var(--plateW,46%) * 2.3);height:5px}
  .road .plate--car .plate__body{font-size:clamp(16px,5.4vw,24px);padding:3px 2px}
  .road .plate--car .plate__eu,.road .plate--car .plate__dep{min-width:12%}
  .road .plate--car .plate__depnum,.road .plate--car .plate__f{font-size:clamp(8px,2.3vw,11px)}
}

/* ───────── série, badges, guide, rang de fin ───────── */
.homestats{flex-wrap:wrap}
.homestats .stat{flex:1 1 40%}
.stat--fire .stat__v{color:#ff9a3c}
.ghost--rank{color:var(--accent)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.badge{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--dim)}
.badge b{display:block;color:var(--txt);font-size:14px}
.badge span{display:block;font-size:12px;margin:2px 0 4px}
.badge i{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.badge--on{border-color:var(--accent);background:linear-gradient(180deg,#2a2411,#1a1d24)}
.badge--on b{color:var(--accent)}
.badge--on i{color:var(--ok)}
.guide{
  position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:31;
  background:rgba(20,24,31,.96);border:1px solid var(--accent);color:var(--txt);border-radius:14px;
  padding:12px 16px;font-size:14px;line-height:1.45;opacity:0;pointer-events:none;max-width:min(92vw,520px);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.guide b{color:var(--accent)}
.guide.go{animation:guideIn 7s ease-out}
@keyframes guideIn{0%{opacity:0;transform:translate(-50%,20px)}6%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
body.fitted .guide{bottom:auto;top:60px}
.rank--end{cursor:default;margin:14px 0}
.rank--end:hover{border-color:var(--line)}
.rank--up{border-color:var(--accent);box-shadow:0 0 24px rgba(255,207,63,.35);animation:rankUp .6s ease-out}
@keyframes rankUp{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.recap__row--missed{flex-direction:column;gap:6px}
.recap__row--missed em{font-style:normal;background:var(--bg3);border:1px solid var(--line);border-radius:7px;padding:3px 8px;margin:0 4px 4px 0;display:inline-block;font-size:13px}
.recap__row--missed em b{color:var(--accent)}

/* ───────── juice : tout ce qui réagit ───────── */
.bump{animation:bump .3s ease-out}
.bump--big{animation:bumpBig .45s ease-out}
@keyframes bump{30%{transform:scale(1.06)}100%{transform:none}}
@keyframes bumpBig{25%{transform:scale(1.12);border-color:var(--accent)}100%{transform:none}}
.combo{font-style:normal;color:var(--dim);transition:.2s}
.combo--2{color:var(--txt)}
.combo--3{color:var(--accent)}
.combo--4{color:#ff9a3c;text-shadow:0 0 8px rgba(255,154,60,.7)}
.combo--5{color:#ff5a3c;text-shadow:0 0 10px rgba(255,90,60,.9);animation:flame .5s ease-in-out infinite alternate}
@keyframes flame{from{text-shadow:0 0 6px rgba(255,90,60,.7)}to{text-shadow:0 0 16px rgba(255,150,60,1),0 0 30px rgba(255,90,60,.6)}}
.float{
  position:fixed;z-index:40;pointer-events:none;font-style:normal;font-weight:800;font-size:20px;color:var(--ok);
  text-shadow:0 2px 8px #000;animation:floatUp 1s ease-out forwards;
}
.float--rare{color:var(--rare)}
.float--win{color:var(--accent);font-size:26px}
.float--ko{color:var(--ko);font-size:24px}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.7)}20%{opacity:1;transform:translateY(-8px) scale(1.1)}100%{opacity:0;transform:translateY(-56px) scale(1)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:confetti linear forwards}
@keyframes confetti{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
.final-score{animation:scoreIn .6s cubic-bezier(.2,.8,.3,1.4)}
@keyframes scoreIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
#btn-again{animation:pulseBtn 1.6s ease-in-out infinite}
@keyframes pulseBtn{50%{box-shadow:0 0 0 6px rgba(255,207,63,.18)}}
.tok--on{animation:tokIn .35s cubic-bezier(.2,.8,.3,1.3)}
@keyframes tokIn{from{transform:scale(.7)}to{transform:none}}

/* ═══════════════════════════════════════════════════════════
   Identité visuelle : la route au couchant
   Bleu nuit, chaleur orangée en haut, jaune plaque en accent,
   bleu autoroute en secondaire, typographie condensée façon signalétique.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#080c14;--bg2:#121826;--bg3:#1a2233;--line:#26304a;
  --txt:#eef2f8;--dim:#8f9bb3;--accent:#ffcf3f;--ok:#3ddc84;--ko:#ff6b6b;
  --hot:#ff8a3c;--blue:#1e5fd8;
  --font:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
}
body{
  font-family:var(--font);
  background:
    radial-gradient(120% 60% at 50% -12%,rgba(255,138,60,.22) 0%,rgba(255,138,60,0) 60%),
    radial-gradient(90% 50% at 50% 0%,#1b2a44 0%,var(--bg) 70%) fixed;
}
h1,h2,h3,.hud__v,.stat__v,.final-score,.tok,.plate__body,.rank__head b,.career__rank b,.badge b,.modes b{font-family:var(--cond)}
h2{font-size:26px!important;letter-spacing:.04em;text-transform:uppercase}
.hud__v{font-size:22px;letter-spacing:.02em}
.hud__k{font-family:var(--font)}
.stat__v{font-size:24px}
.tok{font-size:18px;letter-spacing:.14em}
.final-score{font-size:76px;letter-spacing:.02em}

/* ── accueil : la route en fond ── */
.hero{position:relative;margin:-16px -16px 14px;padding:26px 16px 10px;overflow:hidden;border-radius:0 0 26px 26px}
.hero__road{position:absolute;inset:0;--roadH:100%;opacity:.55;pointer-events:none;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.9) 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.9) 55%,transparent 100%)}
.hero__road .road__sky{inset:0 0 52% 0}
.hero__road .road__sun{top:22%;width:120px;height:120px;margin-left:-60px}
.hero__road .post{width:6px;height:36px}
.hero .logo,.hero .tagline,.hero .plate,.hero .ruleline{position:relative}
.logo{
  font-family:var(--cond);font-weight:800;font-size:clamp(56px,15vw,96px);letter-spacing:.12em;line-height:1;
  background:linear-gradient(180deg,#fff 30%,#ffd76a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.55));
}
.tagline{font-size:15px;color:#c8d0e0;margin-top:2px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hero .plate--demo{margin:18px auto 14px;box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35)}
.hero .ruleline{color:#d7dde9;margin-bottom:4px}
.hero .ruleline b{color:#fff}

/* ── cartes de mode illustrées ── */
.modes{grid-template-columns:1fr 1fr;gap:10px}
.modecard{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px 14px!important;
  min-height:150px;position:relative;overflow:hidden;border-radius:16px!important}
.modecard img{width:58%;height:auto;align-self:flex-end;margin:-4px -6px 0 0;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));transition:transform .25s}
.modecard:hover img{transform:translateY(-3px) scale(1.03)}
.modecard span{display:block}
.modecard b{font-size:22px!important;letter-spacing:.04em;text-transform:uppercase}
.modecard em{font-size:12px!important;line-height:1.35}
.modecard--trafic{background:linear-gradient(160deg,#2a1d1a,#141826)!important}
.modecard.on{border-color:var(--mode)!important;box-shadow:0 0 0 1px var(--mode),0 12px 30px rgba(0,0,0,.45)}
.modecard.on b{color:var(--mode)}

/* ───────── le record, en grand ─────────
   Dans un jeu d'arcade un chiffre doit écraser les autres. C'est celui-là.  */
.record{text-align:center;margin:2px 0 14px}
.record b{
  display:block;font-family:var(--cond);font-weight:800;font-size:clamp(44px,13vw,64px);
  line-height:.92;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--mode,var(--accent));text-shadow:0 0 28px color-mix(in srgb,var(--mode,var(--accent)) 35%,transparent);
}
.record__k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-top:4px}

/* ───────── progression : un seul bloc, trois lignes ─────────
   Grade, dotation et garage racontaient la même chose en trois cartes de même
   poids. Réunis, ils libèrent la moitié de l'écran — et l'œil sait où aller. */
.prog{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:12px 0}
.prog__row{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'img k n' 'img v n' 'bar bar bar' 'next next next';
  gap:2px 10px;width:100%;text-align:left;padding:11px 14px 12px;cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--line);color:var(--txt);transition:background .15s;
}
.prog__row:first-child{border-top:0}
.prog__row:hover{background:rgba(255,255,255,.035)}
.prog__row:active{background:rgba(255,255,255,.06)}
.prog__img{grid-area:img;width:44px;height:auto;align-self:center;margin-right:2px}
.prog__img--or{filter:drop-shadow(0 0 7px rgba(255,207,63,.45))}
.prog__k{grid-area:k;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.prog__v{grid-area:v;font-family:var(--cond);font-size:19px;letter-spacing:.02em;color:var(--mode,var(--accent))}
.prog__n{grid-area:n;align-self:center;font-style:normal;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.prog__bar{grid-area:bar;display:block;height:5px;margin-top:7px;background:var(--bg);border-radius:99px;overflow:hidden}
.prog__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ok),var(--mode,var(--accent)));transition:width .5s}
.prog__next{grid-area:next;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog__next b{color:var(--txt);font-weight:700}
.prog__cars{display:flex;gap:6px;align-items:center;white-space:normal}
.prog__cars img{height:26px;width:auto}

/* ── cartes, boutons, jauges ── */
.rank,.missions,.stat,.recap,.lot,.collec__reg,.badge,.career__rank{box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn--big{font-family:var(--cond);font-size:24px;letter-spacing:.06em;text-transform:uppercase;padding:15px;border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mode) 78%,#fff),var(--mode));
  color:var(--mode-ink);
  box-shadow:0 10px 26px color-mix(in srgb,var(--mode) 32%,transparent)}
.btn--big:active:not(:disabled){transform:translateY(2px);box-shadow:0 4px 12px color-mix(in srgb,var(--mode) 28%,transparent)}
.btn--share{background:var(--bg3);box-shadow:none;text-transform:none;font-family:var(--font);font-size:16px;letter-spacing:0}
.segmented button.on{background:linear-gradient(180deg,#ffd86a,#ffc21f)}
.rank__fill,.collec__fill{background:linear-gradient(90deg,var(--hot),var(--accent))}
.hud__item{background:linear-gradient(180deg,#151c2c,#111725)}

/* ── le champ de saisie est une plaque vierge ── */
.platefield{display:flex;align-items:stretch;background:linear-gradient(180deg,#fff,#e9edf2);border:3px solid #0b0d10;border-radius:9px;
  overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.3);transition:.15s}
.platefield:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--mode) 48%,transparent),0 8px 24px rgba(0,0,0,.5)}
.platefield__eu{flex:0 0 40px;background:var(--plate-blue);color:#fff;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;font-family:var(--cond);font-weight:800;font-size:16px}
.platefield__box{position:relative;flex:1;display:flex;min-width:0}
.platefield input,#tr-input,#pk-input{
  flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:transparent;caret-color:#111;
  font-family:var(--cond);font-weight:800;
  font-size:30px;letter-spacing:.06em;padding:8px 14px;outline:none;text-transform:uppercase;box-shadow:none;
}
.platefield input::placeholder{color:#9aa3b0;font-weight:600;letter-spacing:.02em;text-transform:none}
.platefield input:focus{box-shadow:none;border:0}
body.fitted .platefield input{font-size:24px;padding:6px 12px}
body.fitted .platefield__eu{flex-basis:32px}

/* ── le calque qui surligne la paire : mêmes métriques que le champ, au pixel près ── */
.platefield__ghost{
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none;overflow:hidden;
  white-space:pre;color:#111;font-family:var(--cond);font-weight:800;
  font-size:30px;letter-spacing:.06em;padding:8px 14px;text-transform:uppercase;
}
body.fitted .platefield__ghost{font-size:24px;padding:6px 12px}
/* le marqueur reste une boîte en ligne : son fond épouse la hauteur des lettres.
   En inline-block il prendrait toute la hauteur de la ligne et ressemblerait à une
   barre mal calée. La pulsation se joue donc sur l'ombre, jamais sur la géométrie :
   rien ne doit décaler les glyphes, le curseur du champ est dessous.               */
.platefield__ghost b{
  --lit:rgba(255,207,63,.95);
  color:#14181f;background:var(--lit);border-radius:3px;box-shadow:0 0 0 2px var(--lit);
}
.platefield__ghost.pop b{animation:litpop .3s cubic-bezier(.2,.9,.3,1)}
@keyframes litpop{
  0%  {box-shadow:0 0 0 2px var(--lit)}
  40% {box-shadow:0 0 0 7px var(--lit)}
  100%{box-shadow:0 0 0 2px var(--lit)}
}
/* le mot porte une paire ET tient au dictionnaire : il part au prochain souffle */
.platefield.platefield--ready{box-shadow:0 0 0 3px rgba(61,220,132,.65),0 8px 24px rgba(0,0,0,.5)}
.platefield--ready .platefield__ghost b{--lit:rgba(61,220,132,.95);color:#0c2114}
/* refusé : la plaque elle-même le dit, on n'a plus à descendre lire la ligne du dessous */
.platefield.platefield--ko{box-shadow:0 0 0 3px rgba(255,107,107,.7),0 8px 24px rgba(0,0,0,.5)}
.platefield--ko .platefield__ghost b{--lit:rgba(255,107,107,.95);color:#2b0707}

/* ── entrée en cascade des blocs de l'accueil ── */
#screen-home.active > *{animation:cascade .5s ease both}
#screen-home.active > *:nth-child(2){animation-delay:.05s}
#screen-home.active > *:nth-child(3){animation-delay:.1s}
#screen-home.active > *:nth-child(4){animation-delay:.15s}
#screen-home.active > *:nth-child(5){animation-delay:.2s}
#screen-home.active > *:nth-child(6){animation-delay:.25s}
#screen-home.active > *:nth-child(7){animation-delay:.3s}
@keyframes cascade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modecard{justify-content:space-between}
.rank__foot i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}

/* ───────── mode Poursuite ───────── */
.modes{grid-template-columns:1fr 1fr 1fr}
.modecard--poursuite{background:linear-gradient(160deg,#1f1a2c,#121826)!important}
.road--pursuit .road__cars{overflow:hidden}
.pcar{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform;pointer-events:auto}
.pcar .car__ride{animation:cruise var(--ride,3.6s) ease-in-out infinite alternate}
.pcar .car__body{animation:rumble .16s ease-in-out infinite alternate}
.pcar--threat.pcar--near .car__body{filter:drop-shadow(0 0 12px rgba(255,90,60,.85))}
.pcar--boom .car__ride{animation:boom .6s cubic-bezier(.2,.75,.4,1) forwards}
.pcar--boom .car__body{animation:none}
.pcar--pass{transition:opacity .5s;opacity:0}
.me{position:absolute;left:0;top:0;transform-origin:50% 100%;z-index:1200;pointer-events:none;will-change:transform;opacity:.96}
.me .car__body{animation:rumble .14s ease-in-out infinite alternate;filter:drop-shadow(0 10px 14px rgba(0,0,0,.7))}
.me--hit{animation:meHit .5s ease-out}
@keyframes meHit{20%{filter:brightness(3)}40%{transform:translate(-50%,-100%) scale(1)}}
.me--blink .car__body{animation:blink .25s steps(2) infinite}
@keyframes blink{to{opacity:.35}}
.hud__v--lives{letter-spacing:.06em;font-size:20px}
.hud__v--lives i{font-style:normal;color:var(--line)}
.tokgroup--threat{border-color:rgba(255,90,60,.55)}
.tok__warn{font-style:normal;color:#ff5a3c;font-size:14px;align-self:center;margin-right:2px}
.road--pursuit.rush .road__sky{background:linear-gradient(180deg,#2a0b10 0%,#6a1b1b 46%,#a8452a 84%,#d9782f 100%)}


.pfx{position:absolute;width:1px;height:1px;z-index:1150;pointer-events:none;overflow:visible}
.pfx .flash,.pfx .ring,.pfx .frag,.pfx .smoke{left:0;top:0}
.pfx .smoke{bottom:auto;top:-10px}
.pcar--boom{filter:brightness(4)}

/* ───────── insignes des badges ───────── */
.badge{display:flex;align-items:center;gap:12px}
.badge__txt{flex:1;min-width:0;position:relative}
.badge__txt u{display:block;height:3px;background:var(--hot);border-radius:99px;margin-top:5px;text-decoration:none}
.insigne{flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.insigne--or{filter:drop-shadow(0 0 10px rgba(255,200,60,.55))}
.insigne--argent{filter:drop-shadow(0 0 8px rgba(200,210,225,.45))}
.insigne--bronze{filter:drop-shadow(0 0 8px rgba(205,127,50,.45))}
.insigne--off{opacity:.7}
.toast .insigne,.recap__row .insigne{vertical-align:middle;margin-right:4px}
.stat__row{display:flex;justify-content:center;gap:2px;margin-top:4px;min-height:22px}

/* ───────── médailles 3D ───────── */
.medal{width:var(--size);height:var(--size);perspective:calc(var(--size) * 4);display:inline-block;flex:0 0 auto;vertical-align:middle}
.medal__body{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-18deg);transition:transform .5s}
.medal:hover .medal__body{transform:rotateX(8deg) rotateY(18deg)}
.medal--spin .medal__body{animation:medalSpin 3.2s linear infinite}
.medal--spin:hover .medal__body{animation-play-state:paused}
@keyframes medalSpin{from{transform:rotateX(10deg) rotateY(0)}to{transform:rotateX(10deg) rotateY(360deg)}}
.medal__slice{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--m2),var(--m3) 70%,var(--m3));
  backface-visibility:visible}
.medal__face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;overflow:hidden}
.medal__face--front{background:
  radial-gradient(circle at 34% 30%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%),
  conic-gradient(from 210deg,var(--m1) 0deg,var(--m2) 40deg,var(--m1) 90deg,var(--m3) 150deg,var(--m1) 200deg,var(--m2) 260deg,var(--m3) 320deg,var(--m1) 360deg);
  box-shadow:inset 0 0 0 calc(var(--size) * .035) rgba(255,255,255,.35),inset 0 0 0 calc(var(--size) * .06) rgba(0,0,0,.28),0 calc(var(--size) * .12) calc(var(--size) * .3) rgba(0,0,0,.6)}
.medal__ring{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--tint) 70%,#fff) 0%,var(--tint) 45%,color-mix(in srgb,var(--tint) 55%,#000) 100%);
  box-shadow:inset 0 calc(var(--size) * .02) calc(var(--size) * .05) rgba(255,255,255,.55),inset 0 calc(var(--size) * -.03) calc(var(--size) * .06) rgba(0,0,0,.5),0 0 0 calc(var(--size) * .012) rgba(0,0,0,.35)}
.medal__dome{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 45%)}
.medal__icon{position:absolute;inset:31%;filter:drop-shadow(0 calc(var(--size) * .02) calc(var(--size) * .03) rgba(0,0,0,.7));stroke-width:2.2}
.medal__glint{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  animation:glint 3.4s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes glint{0%,60%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.medal__face--back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;
  background:radial-gradient(circle at 50% 40%,var(--m2),var(--m3) 75%);
  box-shadow:inset 0 0 0 calc(var(--size) * .035) rgba(255,255,255,.25),inset 0 0 0 calc(var(--size) * .06) rgba(0,0,0,.3)}
.medal__face--back span{font-family:var(--cond);font-size:calc(var(--size) * .11);letter-spacing:.2em;color:rgba(0,0,0,.55);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.medal__face--back b{font-family:var(--cond);font-size:calc(var(--size) * .14);color:rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,255,255,.35);text-align:center;padding:0 12%;line-height:1.05}
.medal--or{--m1:#fff0b0;--m2:#e6b429;--m3:#8a5f0e}
.medal--argent{--m1:#ffffff;--m2:#b9c3d2;--m3:#5f6b7d}
.medal--bronze{--m1:#f8c993;--m2:#c9793a;--m3:#6a3a16}
.medal--off{--m1:#4a5468;--m2:#2b3243;--m3:#171c27;--tint:#3a4356}
.medal--off .medal__glint{display:none}
.medal--off .medal__icon{stroke:#8c97ad;filter:none}
.badge{cursor:pointer;transition:.15s}
.badge:hover{border-color:var(--accent)}
.toast .medal,.recap__row .medal{margin-right:6px}
.stat__row .medal{cursor:pointer}
.modal{position:fixed;inset:0;z-index:60;background:rgba(6,9,14,.82);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.modal__card{background:linear-gradient(180deg,#171d2b,#10151f);border:1px solid var(--line);border-radius:20px;padding:26px 24px 20px;text-align:center;max-width:360px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.7);animation:cardIn .35s cubic-bezier(.2,.8,.3,1.2)}
@keyframes cardIn{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.medal-stage{display:flex;justify-content:center;padding:10px 0 18px}
.modal__card h3{font-size:30px!important;margin-bottom:4px;text-transform:none;letter-spacing:.02em}
.modal__card p{color:var(--dim);font-size:15px}
.medal-state{margin:10px 0 16px;color:var(--txt)}
.medal-state b{color:var(--ok)}
.medal-state u{display:block;height:5px;background:var(--hot);border-radius:99px;margin:8px auto 0;text-decoration:none;max-width:220px}

.modal[hidden]{display:none}
.medal--off .medal__ring{filter:saturate(.3) brightness(.62)}
.medal--off .medal__dome{opacity:.5}

/* ───────── médailles : version bouclier ─────────
   Un blason (pointe en bas, épaules arrondies) au lieu du disque. Le cadre
   métallique et le cœur coloré sont deux couches de même forme, l'une réduite. */
.medal{--shield:polygon(12% 4%,88% 4%,95% 9%,97% 20%,97% 50%,94% 63%,87% 75%,76% 86%,63% 94%,50% 98%,37% 94%,24% 86%,13% 75%,6% 63%,3% 50%,3% 20%,5% 9%);
  filter:drop-shadow(0 calc(var(--size) * .08) calc(var(--size) * .16) rgba(0,0,0,.65))}
.medal__slice,.medal__face{border-radius:0;clip-path:var(--shield)}
.medal__slice{background:linear-gradient(180deg,var(--m2),var(--m3))}
.medal__face--front{background:none;box-shadow:none;overflow:visible}
.medal__rim{position:absolute;inset:0;clip-path:var(--shield);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 28%),
    conic-gradient(from 200deg,var(--m1) 0deg,var(--m2) 35deg,var(--m3) 80deg,var(--m1) 130deg,var(--m2) 190deg,var(--m3) 240deg,var(--m1) 300deg,var(--m2) 340deg,var(--m1) 360deg)}
.medal__rivets{position:absolute;inset:0;clip-path:var(--shield);
  background:
    radial-gradient(circle at 15% 12%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%),
    radial-gradient(circle at 85% 12%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%),
    radial-gradient(circle at 9% 45%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%),
    radial-gradient(circle at 91% 45%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%),
    radial-gradient(circle at 30% 82%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%),
    radial-gradient(circle at 70% 82%,#fff 0 .9%,rgba(0,0,0,.6) 1.4%,transparent 3.2%);
  background-size:calc(var(--size) * 1.1) calc(var(--size) * 1.1);background-position:center}
.medal__inner{position:absolute;inset:0;clip-path:var(--shield);transform:scale(.78);transform-origin:50% 50%;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 110%,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%),
    linear-gradient(160deg,color-mix(in srgb,var(--tint) 75%,#fff) 0%,var(--tint) 45%,color-mix(in srgb,var(--tint) 55%,#000) 100%)}
.medal__dome{inset:0;border-radius:0;clip-path:var(--shield);transform:scale(.78);
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%)}
.medal__icon{inset:30% 30% 34%}
.medal__icon--shadow{transform:translateY(calc(var(--size) * .022));opacity:.55;filter:blur(.6px)}
.medal__glint{inset:0;clip-path:var(--shield)}
.medal__spark{position:absolute;width:calc(var(--size) * .1);height:calc(var(--size) * .1);pointer-events:none;
  background:radial-gradient(circle,#fff 0 20%,rgba(255,255,255,0) 60%),
             conic-gradient(from 0deg,transparent 0 40deg,#fff 45deg,transparent 50deg 130deg,#fff 135deg,transparent 140deg 220deg,#fff 225deg,transparent 230deg 310deg,#fff 315deg,transparent 320deg);
  animation:spark 2.6s ease-in-out infinite;opacity:0;filter:drop-shadow(0 0 4px #fff)}
.medal__spark.s1{left:8%;top:6%;animation-delay:0s}
.medal__spark.s2{right:6%;top:26%;animation-delay:.7s}
.medal__spark.s3{left:14%;top:64%;animation-delay:1.3s}
.medal__spark.s4{right:22%;top:80%;animation-delay:1.9s}
@keyframes spark{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}80%{opacity:1;transform:scale(1.2) rotate(40deg)}90%{opacity:.6;transform:scale(.8) rotate(80deg)}}
.medal__face--back{background:linear-gradient(180deg,var(--m2),var(--m3));box-shadow:none}
.medal__face--back::before{content:"";position:absolute;inset:0;clip-path:var(--shield);transform:scale(.8);background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}
.medal__face--back span,.medal__face--back b{position:relative}
.medal--off .medal__inner{filter:saturate(.25) brightness(.55)}
.medal--off .medal__rivets{opacity:.4}

/* la scène de la médaille en grand : rayons tournants et halo de sa couleur */
.medal-stage{position:relative;overflow:hidden;border-radius:16px;margin:-6px -8px 14px;padding:26px 0 30px;isolation:isolate}
.medal-stage::before{content:"";position:absolute;inset:-60%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0deg 6deg,transparent 6deg 18deg);
  animation:rays 22s linear infinite}
.medal-stage::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--tint,#ffcf3f) 45%,transparent) 0%,transparent 60%)}
.medal-stage--off::before,.medal-stage--off::after{opacity:.25}
@keyframes rays{to{transform:rotate(360deg)}}
.modal__card h3{background:linear-gradient(180deg,#fff 30%,#ffd76a);-webkit-background-clip:text;background-clip:text;color:transparent}
/* dos gravé lisible, rotation théâtrale */
.medal__face--back span{color:rgba(255,255,255,.55);text-shadow:0 -1px 0 rgba(0,0,0,.6);letter-spacing:.28em}
.medal__face--back b{color:rgba(255,255,255,.85);text-shadow:0 -1px 0 rgba(0,0,0,.7),0 0 12px rgba(255,255,255,.25)}
.medal__face--back::after{content:"";position:absolute;inset:0;clip-path:var(--shield);transform:scale(.62);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 6px);opacity:.7}
@keyframes medalSpin{
  0%  {transform:rotateX(10deg) rotateY(-28deg)}
  30% {transform:rotateX(10deg) rotateY(28deg)}
  55% {transform:rotateX(10deg) rotateY(-28deg)}
  100%{transform:rotateX(10deg) rotateY(332deg)}
}
.medal--spin .medal__body{animation-duration:5.5s;animation-timing-function:ease-in-out}

.end-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.end-actions .btn{margin:0;font-size:16px;padding:13px 10px}
@media (max-width:420px){.end-actions{grid-template-columns:1fr}}


/* ═══════════ accueil repensé : la route derrière, les modes en carrousel ═══════════ */
.hero{padding:30px 16px 12px;border-radius:0 0 30px 30px;min-height:min(78vh,560px);display:flex;flex-direction:column;justify-content:flex-start}
.hero__road{opacity:.9;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,.55) 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,.55) 100%)}
.hero__road .road__sky{inset:0 0 50% 0}
.hero__road .road__ground,.hero__road .road__tarmac,.hero__road .road__edge{top:50%}
.hero__road .road__tarmac{clip-path:polygon(46.5% 0,53.5% 0,140% 100%,-40% 100%)}
.hero__road .road__sun{top:calc(50% - 96px);width:140px;height:140px;margin-left:-70px;opacity:.9}
.hero__road .post{animation-duration:1.6s}
/* votre voiture de rang, au premier plan, qui tangue doucement */
.hero__car{position:absolute;left:50%;top:51%;width:min(34%,170px);transform:translateX(-50%);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.7));animation:heroRide 3.2s ease-in-out infinite;
  transition:transform .5s cubic-bezier(.4,0,.8,.4),opacity .5s}
@keyframes heroRide{0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}50%{transform:translateX(-50%) translateY(-3px) rotate(.4deg)}}
.hero .logo{margin-top:6px;font-size:clamp(64px,17vw,104px)}
.hero .plate--demo{margin:auto auto 12px;max-width:min(88%,400px)}
.hero .ruleline{margin-bottom:2px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* le départ : la route accélère, la voiture s'élance vers l'horizon */
.hero.launch .post{animation-duration:.42s}
.hero.launch .hero__car{animation:none;transform:translateX(-50%) translateY(-48%) scale(.55);opacity:0}
.hero.launch .plate--demo{transition:transform .45s ease-in,opacity .45s;transform:scale(.9);opacity:0}

.modes-wrap{margin:14px -16px 6px;position:relative}
.modes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px calc(50% - min(38vw,150px)) 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0}
.modes::-webkit-scrollbar{display:none}
.modecard{flex:0 0 min(76vw,300px);scroll-snap-align:center;min-height:224px;padding:16px 16px 14px!important;
  border-radius:20px!important;justify-content:flex-start!important;transition:transform .25s,box-shadow .25s,border-color .25s}
.modecard img{height:118px;width:auto;max-width:82%;object-fit:contain;margin:2px -6px 0 0;align-self:flex-end}
.modecard span{margin-top:auto}
.modecard b{font-size:26px!important;letter-spacing:.05em}
.modecard em{font-size:12.5px!important;color:#c3ccdb!important}
.modecard__best{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
.modecard.on .modecard__best{color:var(--mode)}
.modecard--poursuite{background:linear-gradient(160deg,#1c1424,#121826)!important}
.modecard:not(.on){transform:scale(.96);opacity:.85}
.modes__dots{display:flex;justify-content:center;gap:6px;margin-top:-2px}
.modes__dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:.25s}
.modes__dots i.on{width:20px;background:var(--mode)}
@media (min-width:720px){
  .modes{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:8px 16px 6px}
  .modecard{flex:auto;min-height:230px}
  .modes__dots{display:none}
}

/* ───────── mode Dispatch : le central radio ─────────
   Pas de route : une plaque en grand, et sous elle des relevés à toucher.
   Les deux colonnes de chaque carte sont alignées sous les deux paires —
   c'est cet alignement qui apprend quel mot répond à quelle paire.        */
.dsp{
  position:relative;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0,#1d2634 0%,#0f131b 70%);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  padding:62px 16px 20px;text-align:center;
}
/* la rampe du central : un liseré bleu et rouge au pied du panneau */
.dsp .copbar{top:auto;bottom:0;left:0;width:100%;height:4px;transform:none;border-radius:0}
.dsp .copbar__body{display:none}
.dsp .copbar i{left:auto;right:auto;bottom:0;width:50%;height:100%;border-radius:0;opacity:.55}
.dsp .copbar__b{left:0}
.dsp .copbar__r{right:0}
/* ───────── l'embranchement : trois routes qui se rejoignent ─────────
   Même projection que la Chasse — sol y = 46 % + 42 %/z depuis le haut, echelle = 1/z,
   ecart lateral proportionnel a l'echelle. Les trois voitures s'eloignent chacune sur
   sa route ; toutes convergent vers le meme point, a l'horizon.                      */
.dspr{
  position:relative;height:clamp(200px,33vh,300px);margin:0 -16px 12px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(0,0,0,.6);
}
.dspr__sky{position:absolute;inset:0 0 54% 0;
  background:linear-gradient(180deg,#131c2c 0%,#2b2740 52%,#6e4a52 82%,#b9765a 100%)}
.dspr__ground{position:absolute;inset:46% 0 0 0;
  background:linear-gradient(180deg,#414428 0%,#252d16 14%,#18200e 44%,#0c1108 100%)}
/* chaque route est faite de deux couches : une bande claire un peu plus large, qui
   ne dépasse que d'un liseré — ses bords se resserrent donc exactement comme la route */
.dspr__edge,.dspr__route{position:absolute;inset:46% 0 0 0}
.dspr__edge{background:linear-gradient(180deg,rgba(236,232,216,.75) 0%,rgba(214,206,184,.5) 60%,rgba(190,182,160,.32) 100%)}
.dspr__route{
  background:linear-gradient(180deg,#5a626d 0%,#3f464f 48%,#2c313a 100%);
  box-shadow:inset 0 0 40px -14px #000;
}
/* chacune part d'un bord du bas et remonte vers le point de rencontre : son clip-path
   est posé en JS, il dépend du nombre de relevés (trois routes, quatre en Expert) */
.dspr__junction{                       /* la rencontre, lueur a l'horizon */
  position:absolute;left:50%;top:46%;width:22%;height:7%;transform:translate(-50%,-55%);
  background:radial-gradient(50% 60% at 50% 60%,rgba(255,206,150,.55),rgba(255,180,110,0) 72%);
  pointer-events:none;
}
.dspr__cars{position:absolute;inset:0}
.dcar{
  position:absolute;transform:translate(-50%,-100%);cursor:pointer;
  transition:filter .15s;will-change:left,top,width;
}
.dcar img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.dcar__tag{                            /* la voie, sur le toit */
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  font-family:var(--cond);font-weight:800;font-size:13px;line-height:1;padding:2px 6px;border-radius:5px;
  background:var(--accent);color:#14181f;box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.dcar__fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dcar--pick img{filter:drop-shadow(0 0 12px var(--accent)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.dcar--safe img{filter:drop-shadow(0 0 14px var(--ok)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.dcar--boom img{animation:dcarBoom .5s ease-out forwards}
@keyframes dcarBoom{
  0%  {transform:none;opacity:1;filter:brightness(2.4)}
  40% {transform:translateY(3px) rotate(-7deg) scale(1.06)}
  100%{transform:translateY(12px) rotate(-14deg) scale(.8);opacity:0}
}

.dsp__plate{max-width:min(94%,380px);margin:0 auto}
.dsp__plate .plate{margin:0;animation:dspPlateIn .42s cubic-bezier(.2,.8,.3,1)}
@keyframes dspPlateIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.plate--dispatch .plate__letters,.plate--dispatch .plate__num{font-size:clamp(26px,7.4vw,38px)}
/* le temps qu'il reste avant que les routes ne se rejoignent */
.dsp__speed{max-width:min(94%,380px);height:6px;margin:9px auto 4px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden}
.dsp__speed i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ok),var(--accent))}

/* les deux paires, en tête des deux colonnes */
.dsp__heads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 2px 6px;padding:0 14px}
.dsp__heads span{
  font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.14em;text-align:center;
  color:var(--accent);background:rgba(255,207,63,.10);border:1px solid rgba(255,207,63,.28);
  border-radius:7px;padding:2px 0;
}
.dcards{display:grid;gap:8px}
.dcard{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;width:100%;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 14px 13px 52px;color:var(--txt);
  transition:transform .12s,border-color .15s,background .15s;
}
/* chaque relevé est une bretelle : la chaussée hachurée descend vers la sortie */
.dcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:38px;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 5px,transparent 5px 14px),
    linear-gradient(90deg,var(--bg3),rgba(0,0,0,.25));
  border-right:1px solid var(--line);
  animation:rampRun 1.1s linear infinite;
}
@keyframes rampRun{to{background-position:0 14px,0 0}}
.dcard__exit{
  position:absolute;left:0;top:50%;width:38px;transform:translateY(-50%);z-index:1;
  font-family:var(--cond);font-style:normal;font-weight:800;font-size:17px;text-align:center;
  color:var(--voie,var(--accent));text-shadow:0 1px 3px #000;
}
.dcard:active{transform:scale(.985)}
.dcard__w{
  font-family:var(--cond);font-weight:800;font-size:clamp(17px,4.6vw,21px);letter-spacing:.04em;text-align:center;
  overflow:hidden;text-overflow:ellipsis;
}
.dcard__w b{--lit:rgba(255,207,63,.95);color:#14181f;background:var(--lit);border-radius:3px;box-shadow:0 0 0 2px var(--lit)}
.dcards--locked .dcard{cursor:default;pointer-events:none}
.dcards--locked .dcard:not(.dcard--good):not(.dcard--bad){opacity:.4}
.dcard--good{border-color:var(--ok);background:rgba(61,220,132,.2);box-shadow:0 0 0 1px var(--ok)}
.dcard--good .dcard__w b{--lit:rgba(61,220,132,.95);color:#0c2114}
.dcard--bad{border-color:var(--ko);background:rgba(255,107,107,.18)}
.dcard--bad .dcard__w{text-decoration:line-through;text-decoration-color:rgba(255,107,107,.85)}
/* une marque en plus de la couleur : le verdict se lit aussi sans la distinguer */
.dcard--good::after,.dcard--bad::after{
  position:absolute;top:3px;right:7px;font-size:13px;font-weight:700;line-height:1;
}
.dcard--good::after{content:'✓';color:var(--ok)}
.dcard--bad::after{content:'✗';color:var(--ko)}
.dcards--locked .dcard::before{animation-play-state:paused}
.dcard--good::before{background:repeating-linear-gradient(180deg,rgba(61,220,132,.3) 0 5px,transparent 5px 14px),linear-gradient(90deg,rgba(61,220,132,.22),transparent)}
.dcard--bad::before{background:repeating-linear-gradient(180deg,rgba(255,107,107,.3) 0 5px,transparent 5px 14px),linear-gradient(90deg,rgba(255,107,107,.2),transparent)}
#ds-why u{text-decoration:none;font-weight:700;color:var(--txt)}
.hud__mult{display:block;font-family:var(--cond);font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:1px}
.hud__item--mult.on .hud__mult{color:var(--accent)}
.hud__gain--ko{color:var(--ko)!important}
.modecard--dispatch{background:linear-gradient(160deg,#142a2c,#121826)!important}

/* ═══════════ le HUD dans le décor : projeté sur le pare-brise ═══════════ */
.hud--scene{position:absolute;top:8px;left:8px;right:8px;z-index:1300;gap:6px;pointer-events:none}
.hud--scene .hud__item{background:rgba(6,10,16,.42);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:5px 10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.hud--scene .hud__k{color:rgba(232,237,245,.62);font-size:10px}
.hud--scene .hud__v{text-shadow:0 1px 6px rgba(0,0,0,.7);font-size:21px}
.hud--scene .ghost{text-shadow:0 1px 4px rgba(0,0,0,.8)}
body.fitted .hud--scene .hud__item{padding:3px 8px}
body.fitted .hud--scene .hud__v{font-size:17px}
@media (max-width:420px){.hud--scene .hud__item{padding:4px 6px}.hud--scene .hud__v{font-size:17px}.hud--scene .hud__k{font-size:9px;letter-spacing:.06em}}
/* la route commence directement sous le titre de l'écran : plus de bandeau au-dessus */
#screen-traffic .road,#screen-pursuit .road{margin-top:0}

.hud--lot{background:linear-gradient(180deg,#1f2733,#181e28);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;
  padding:8px 10px 6px;gap:0;position:relative;z-index:2}
.hud--lot .hud__item{background:none;border:0;border-radius:0;padding:2px 8px}
.hud--lot .hud__item+.hud__item{border-left:1px solid var(--line)}
.hud--lot::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:repeating-linear-gradient(90deg,#f0d24a 0 14px,transparent 14px 24px);opacity:.6}
#screen-parking .lot{border-radius:0 0 14px 14px;margin-top:0}

/* ═══════════ transitions : le voile « départ » ═══════════ */
.warp{position:fixed;inset:0;z-index:5000;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 46%,transparent 0deg 5deg,rgba(255,230,170,.16) 5deg 6.2deg);
  mask-image:radial-gradient(circle at 50% 46%,transparent 18%,#000 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 18%,#000 62%)}
.warp.go{animation:warp .46s cubic-bezier(.2,.6,.3,1)}
@keyframes warp{0%{opacity:0;transform:scale(.5)}25%{opacity:.9}100%{opacity:0;transform:scale(1.6)}}
.screen.active{animation:arrive .38s cubic-bezier(.2,.7,.2,1)}
@keyframes arrive{from{opacity:0;transform:scale(.965) translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.warp{display:none}.screen.active{animation:none}.hero__car{animation:none}}


/* ═══════════ thème « Miami Vice » ═══════════
   Nuit bleu-violet, rose flamant pour l'action, turquoise pour l'info, cartes blanc
   cassé, soleil rayé, skyline de palmiers, grille néon au sol, scanlines discrètes. */
body.theme-miami{
  --bg:#130b33;--bg2:#1b1247;--bg3:#241a5e;--line:#3d2c85;--txt:#f6f1ff;--dim:#b3a6d9;
  --accent:#ff4fa3;--ok:#2ee6d6;--ko:#ff7070;--rare:#7ad7ff;
  background:radial-gradient(120% 80% at 50% -10%,#3a1a6e 0%,#130b33 55%,#0b0620 100%) fixed;
}
body.theme-miami::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:4000;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px)}
/* titre chrome rose → cyan, police d'enseigne lumineuse */
body.theme-miami .logo{font-family:'Monoton',var(--cond);font-weight:400;letter-spacing:.06em;font-size:clamp(50px,13vw,84px);
  background:linear-gradient(180deg,#fff 0%,#ffd3ea 38%,#ff4fa3 50%,#8fe3ff 52%,#2ee6d6 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(255,79,163,.55)) drop-shadow(0 0 22px rgba(46,230,214,.35))}
body.theme-miami .tagline{color:#ffd3ea}
body.theme-miami h2{background:linear-gradient(180deg,#fff,#ff4fa3);-webkit-background-clip:text;background-clip:text;color:transparent}
/* le décor : ciel violet-rose, soleil rayé, skyline, sol néon, chaussée sombre aux bords cyan */
body.theme-miami .road{background:#0b0620;border-color:#3d2c85}
body.theme-miami .road__sky{background:linear-gradient(180deg,#120a3a 0%,#3b1a78 40%,#a5307f 75%,#ff6a9e 100%)}
body.theme-miami .road__sky::before{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgMTEwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZyBmaWxsPSIjMGQwNjI2Ij4KPHJlY3QgeD0iMCIgeT0iNzAiIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAiLz4KPHJlY3QgeD0iMzAiIHk9IjUyIiB3aWR0aD0iMzQiIGhlaWdodD0iNjAiLz48cmVjdCB4PSI0MSIgeT0iNDAiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNCIvPgo8cmVjdCB4PSI5MCIgeT0iMzAiIHdpZHRoPSIyNiIgaGVpZ2h0PSI4MCIvPjxyZWN0IHg9Ijk4IiB5PSIxOCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjE0Ii8+PHJlY3QgeD0iMTAxIiB5PSI2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNCIvPgo8cmVjdCB4PSIxNTAiIHk9IjYwIiB3aWR0aD0iNDAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSIxNjAiIHk9IjQ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMTQiLz4KPHJlY3QgeD0iMjMwIiB5PSI0NCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjcwIi8+PHJlY3QgeD0iMjM2IiB5PSIzNCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEyIi8+CjxyZWN0IHg9IjUyMCIgeT0iNTYiIHdpZHRoPSIzMCIgaGVpZ2h0PSI2MCIvPjxyZWN0IHg9IjUyOCIgeT0iNDQiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIvPgo8cmVjdCB4PSI1OTAiIHk9IjI2IiB3aWR0aD0iMjgiIGhlaWdodD0iOTAiLz48cmVjdCB4PSI1OTgiIHk9IjE0IiB3aWR0aD0iMTIiIGhlaWdodD0iMTQiLz48cmVjdCB4PSI2MDIiIHk9IjIiIHdpZHRoPSI0IiBoZWlnaHQ9IjE0Ii8+CjxyZWN0IHg9IjY2MCIgeT0iNjIiIHdpZHRoPSI0NCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHg9IjY3MiIgeT0iNTAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIvPgo8cmVjdCB4PSI3NDAiIHk9IjQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNzAiLz4KPC9nPjxnIGZpbGw9IiMwZDA2MjYiPgo8cGF0aCBkPSJNMzMwIDExMCBMMzM0IDYwIEwzMzggMTEwWiIvPjxwYXRoIGQ9Ik0zMzYgNjIgQzMyMCA0MCAzMDAgNDYgMjk2IDU4IEMzMTIgNTIgMzI2IDU2IDMzNiA2MloiLz48cGF0aCBkPSJNMzM2IDYyIEMzNTAgMzggMzcyIDQyIDM3OCA1NiBDMzYyIDUwIDM0NiA1NCAzMzYgNjJaIi8+PHBhdGggZD0iTTMzNiA2MiBDMzI4IDQyIDMxMiAzNCAzMDAgMzggQzMxNiA0MCAzMjggNDggMzM2IDYyWiIvPjxwYXRoIGQ9Ik0zMzYgNjIgQzM0NiA0MCAzNjQgMzIgMzc2IDM2IEMzNjAgMzggMzQ2IDQ4IDMzNiA2MloiLz4KPHBhdGggZD0iTTQyMCAxMTAgTDQyMyA1MiBMNDI2IDExMFoiLz48cGF0aCBkPSJNNDI0IDU0IEM0MDYgMzAgMzg2IDM2IDM4MiA1MCBDMzk4IDQyIDQxMiA0OCA0MjQgNTRaIi8+PHBhdGggZD0iTTQyNCA1NCBDNDQwIDI4IDQ2MiAzNCA0NjggNDggQzQ1MiA0MCA0MzYgNDYgNDI0IDU0WiIvPjxwYXRoIGQ9Ik00MjQgNTQgQzQxNiAzNCA0MDAgMjYgMzg4IDMwIEM0MDQgMzAgNDE2IDQwIDQyNCA1NFoiLz48cGF0aCBkPSJNNDI0IDU0IEM0MzQgMzIgNDUyIDI0IDQ2NCAyOCBDNDQ4IDMwIDQzNCA0MCA0MjQgNTRaIi8+CjxwYXRoIGQ9Ik00NzAgMTEwIEw0NzIgNzAgTDQ3NCAxMTBaIi8+PHBhdGggZD0iTTQ3MyA3MiBDNDYwIDU2IDQ0NiA2MCA0NDQgNjggQzQ1NiA2MyA0NjYgNjcgNDczIDcyWiIvPjxwYXRoIGQ9Ik00NzMgNzIgQzQ4NCA1NCA1MDAgNTggNTA0IDY4IEM0OTIgNjIgNDgwIDY2IDQ3MyA3MloiLz4KPC9nPjwvc3ZnPg==") center bottom / 100% 100% no-repeat;z-index:1}
body.theme-miami .road__sun{width:150px;height:150px;margin-left:-75px;opacity:1;filter:none;
  background:linear-gradient(180deg,#fff2a8 0%,#ffb84a 30%,#ff4fa3 70%,#c23a9f 100%);
  -webkit-mask:radial-gradient(circle,#000 68%,transparent 70%) ,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle,#000 68%,transparent 70%);
  box-shadow:0 0 40px rgba(255,79,163,.45)}
body.theme-miami .road__sun::after{content:'';position:absolute;inset:50% 0 0 0;
  background:repeating-linear-gradient(180deg,transparent 0 9px,#3b1a78 9px 13px)}
body.theme-miami .hero__road .road__sun{width:190px;height:190px;margin-left:-95px}
body.theme-miami .road__ground{background:linear-gradient(180deg,#2a1560 0%,#180d3d 30%,#0e0826 100%);box-shadow:none;overflow:hidden}
body.theme-miami .road__ground::before{content:'';position:absolute;inset:0;
  /* grille néon en perspective : rayons depuis le point de fuite + lignes de plus en plus espacées */
  background:
    repeating-conic-gradient(from 180deg at 50% 0,rgba(46,230,214,.55) 0 .35deg,transparent .35deg 7deg),
    linear-gradient(180deg,transparent 0 4%,rgba(46,230,214,.5) 4% calc(4% + 1px),transparent calc(4% + 1px) 9%,
      rgba(46,230,214,.5) 9% calc(9% + 1px),transparent calc(9% + 1px) 16%,rgba(46,230,214,.5) 16% calc(16% + 1px),
      transparent calc(16% + 1px) 26%,rgba(46,230,214,.5) 26% calc(26% + 2px),transparent calc(26% + 2px) 40%,
      rgba(46,230,214,.5) 40% calc(40% + 2px),transparent calc(40% + 2px) 60%,rgba(46,230,214,.5) 60% calc(60% + 2px),
      transparent calc(60% + 2px) 86%,rgba(46,230,214,.5) 86% calc(86% + 3px),transparent calc(86% + 3px));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 40%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 40%)}
body.theme-miami .road__tarmac{background:linear-gradient(180deg,#221650 0%,#150d36 48%,#0c0722 100%)}
body.theme-miami .road__edge{background:#2ee6d6;box-shadow:0 0 6px #2ee6d6}
body.theme-miami .post{background:linear-gradient(180deg,#ff4fa3 0 28%,#4a3a8a 28% 100%);box-shadow:0 0 8px rgba(255,79,163,.9)}
body.theme-miami .road.rush .road__sky{background:linear-gradient(180deg,#3a0a2e 0%,#8a1560 46%,#ff2d7a 84%,#ff8a5c 100%)}
/* cartes de mode en blanc cassé, texte sombre */
body.theme-miami .modecard{background:linear-gradient(160deg,#fff8f3,#f1e8ff)!important;border-color:transparent!important;color:#1a1040}
body.theme-miami .modecard b{color:#1a1040}
body.theme-miami .modecard em{color:#5b4d8a!important}
body.theme-miami .modecard__best{color:#8a7bb8}
body.theme-miami .modecard.on{border-color:#ff4fa3!important;box-shadow:0 0 0 2px #ff4fa3,0 0 28px rgba(255,79,163,.45),0 14px 34px rgba(0,0,0,.45)}
body.theme-miami .modecard.on b{color:#ff2d8f}
body.theme-miami .modecard.on .modecard__best{color:#ff2d8f}
body.theme-miami .modes__dots i.on{background:#ff4fa3}
/* boutons, segments, jetons, HUD, plaque de saisie */
body.theme-miami .btn--big,body.theme-miami .segmented button.on{background:linear-gradient(180deg,#ff7cc0,#ff2d8f);color:#fff;
  box-shadow:0 0 22px rgba(255,79,163,.45),0 10px 26px rgba(0,0,0,.35)}
body.theme-miami .segmented button.on em{color:#ffd3ea}
body.theme-miami .btn--share{background:var(--bg3);color:var(--txt);box-shadow:none}
body.theme-miami .tok--on{background:#2ee6d6;color:#0b0620}
body.theme-miami .hud--scene .hud__v{color:#2ee6d6;text-shadow:0 0 8px rgba(46,230,214,.85)}
body.theme-miami .hud--scene .hud__item{border-color:rgba(46,230,214,.35);background:rgba(10,6,32,.5)}
body.theme-miami .hud--lot{background:linear-gradient(180deg,#241a5e,#1b1247)}
body.theme-miami .hud--lot::after{background:repeating-linear-gradient(90deg,#ff4fa3 0 14px,transparent 14px 24px)}
body.theme-miami .platefield:focus-within{box-shadow:0 0 0 3px rgba(255,79,163,.55),0 8px 24px rgba(0,0,0,.5)}
body.theme-miami .platefield__ghost b{--lit:rgba(255,79,163,.92);color:#2a0419}
body.theme-miami .platefield.platefield--ready{box-shadow:0 0 0 3px rgba(43,229,201,.7),0 8px 24px rgba(0,0,0,.5)}
body.theme-miami .platefield--ready .platefield__ghost b{--lit:rgba(43,229,201,.95);color:#052420}
body.theme-miami .platefield.platefield--ko{box-shadow:0 0 0 3px rgba(255,107,107,.75),0 8px 24px rgba(0,0,0,.5)}
body.theme-miami .platefield--ko .platefield__ghost b{--lit:rgba(255,107,107,.95);color:#2b0707}
body.theme-miami .rank,body.theme-miami .missions,body.theme-miami .stat{background:var(--bg2)}
body.theme-miami .rank__fill{background:linear-gradient(90deg,#2ee6d6,#ff4fa3)}
body.theme-miami .warp{background:repeating-conic-gradient(from 0deg at 50% 46%,transparent 0deg 5deg,rgba(255,79,163,.22) 5deg 6.2deg)}

/* badges et médailles, version Miami : cartes violettes liseré rose, rayons roses, halo cyan */
body.theme-miami .badge{background:linear-gradient(160deg,#241a5e,#1b1247);border-color:#3d2c85;color:#b3a6d9}
body.theme-miami .badge:hover{border-color:#ff4fa3;box-shadow:0 0 18px rgba(255,79,163,.35)}
body.theme-miami .badge b{color:#fff}
body.theme-miami .modal{background:rgba(12,6,32,.86)}
body.theme-miami .modal__card{background:linear-gradient(180deg,#2b1c6e,#130b33);border-color:#ff4fa3;box-shadow:0 0 40px rgba(255,79,163,.35),0 30px 60px rgba(0,0,0,.6)}
body.theme-miami .modal__card h3{background:linear-gradient(180deg,#fff 30%,#ff4fa3);-webkit-background-clip:text;background-clip:text}
body.theme-miami .medal-stage::before{background:repeating-conic-gradient(from 0deg,rgba(255,79,163,.22) 0deg 6deg,transparent 6deg 18deg)}
body.theme-miami .medal-stage::after{background:radial-gradient(circle at 50% 55%,rgba(46,230,214,.35) 0%,transparent 60%)}
body.theme-miami .medal__glint{filter:hue-rotate(300deg)}
body.theme-miami .medal-state,body.theme-miami .collec__intro{color:#ffd3ea}
body.theme-miami .stat--fire,body.theme-miami .stat{border-color:#3d2c85}
body.theme-miami .career__rank{background:linear-gradient(160deg,#241a5e,#1b1247);border-color:#3d2c85}
body.theme-miami .career__rank--now{border-color:#2ee6d6;box-shadow:0 0 18px rgba(46,230,214,.35)}
body.theme-miami .collec__reg{background:var(--bg2);border-color:var(--line)}
body.theme-miami .toast{background:linear-gradient(180deg,#2b1c6e,#1b1247);border:1px solid #ff4fa3;box-shadow:0 0 22px rgba(255,79,163,.4)}
body.theme-miami .badge__txt u,body.theme-miami .medal-state u{background:linear-gradient(90deg,#2ee6d6,#ff4fa3)}
body.theme-miami .collec__fill{background:linear-gradient(90deg,#2ee6d6,#ff4fa3)}

/* trois groupes de jetons doivent tenir sur une ligne d'un petit écran (le rétro en ajoute un) */
@media (max-width:460px){
  #pu-pairs .tok{padding:4px 8px;font-size:14px;letter-spacing:.08em}
  #pu-pairs .tokgroup{gap:3px;padding:2px;margin:0 1px}
  #pu-pairs .tok__warn{font-size:12px}
}

/* ═══════════ suggestions (Facile) : au-dessus du champ, donc au-dessus du clavier ═══════════ */
.suggest{display:flex;gap:6px;justify-content:center;align-items:center;min-height:36px;margin:0 0 6px;flex-wrap:nowrap;overflow:hidden}
.suggest--off{display:none}
.sug{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-weight:700;letter-spacing:.03em;
  color:var(--txt);font-size:15px;cursor:pointer;white-space:nowrap;font-family:var(--font)}
.sug:active{background:var(--accent);color:#14181f;border-color:var(--accent)}
.sug--empty{opacity:.45;font-weight:400;font-size:12.5px;border:0;background:none;padding:6px 4px;white-space:normal;text-align:center}
body.fitted .suggest{margin:0 0 4px;min-height:32px}
body.fitted .sug{padding:5px 10px;font-size:14px}
body.theme-miami .sug{border-color:#3d2c85}
body.theme-miami .sug:active{background:#ff4fa3;color:#fff;border-color:#ff4fa3}

/* ═══════════ Poursuite : votre véhicule vu de face, au premier plan ═══════════ */
#pu-road .me{left:0;top:0;transform-origin:50% 100%;opacity:1;pointer-events:none;will-change:transform}
#pu-road .me .car__body{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.75));animation:rumble .14s ease-in-out infinite alternate}
#pu-road .me .car__fx{position:absolute;left:50%;top:38%;width:1px;height:1px;z-index:5;overflow:visible}
#pu-road .me .car__fx .flash,#pu-road .me .car__fx .ring,#pu-road .me .car__fx .frag,#pu-road .me .car__fx .smoke{left:0;top:0}
#pu-road .me.me--hit{animation:none}
#pu-road .me--hit .car__body{animation:meFlash .5s ease-out}
@keyframes meFlash{20%{filter:brightness(3) drop-shadow(0 0 30px rgba(255,80,40,.9))}}
#pu-road .me--blink .car__body{animation:blink .25s steps(2) infinite}
.speedo{position:absolute;right:10px;bottom:10px;z-index:1210;text-align:center;background:rgba(6,10,16,.45);border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:4px 10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.speedo b{display:block;font-family:var(--cond);font-size:22px;line-height:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.speedo i{font-style:normal;font-size:10px;color:rgba(232,237,245,.6);text-transform:uppercase;letter-spacing:.08em}
body.theme-miami .speedo b{color:#2ee6d6;text-shadow:0 0 8px rgba(46,230,214,.85)}
/* Poursuite : la caméra est devant votre voiture et regarde vers l'arrière — le décor
   s'éloigne vers l'horizon (balises à rebours), seules les voitures qui vous rattrapent grossissent */
.road--pursuit .post{animation-direction:reverse}

/* Poursuite : la voiture qui charge s'illumine */
.pcar--rush .car__body{filter:brightness(1.25) drop-shadow(0 0 14px rgba(255,90,60,.8))}

/* Poursuite : la plaque avant est dans la voiture, rivée à son pare-chocs (tangue et grossit avec elle) */
.pcar .plate--pursuit{position:absolute;left:50%;top:var(--plateY,75%);width:var(--pw,180px);transform:translate(-50%,-50%);margin:0;
  border-width:2px;border-radius:4px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.7);transition:opacity .3s;pointer-events:none}
.pcar .plate--pursuit .plate__body{font-size:calc(var(--pw,180px) * .15);padding:1px 2px;gap:.08em;line-height:1.15}
.pcar .plate--pursuit .plate__eu,.pcar .plate--pursuit .plate__dep{width:auto;min-width:12%;padding:2px 3px;justify-content:center}
.pcar .plate--pursuit .plate__f,.pcar .plate--pursuit .plate__depnum{font-size:calc(var(--pw,180px) * .06);white-space:nowrap}
.pcar.car--target .plate--pursuit{box-shadow:0 2px 8px rgba(0,0,0,.7),0 0 0 3px var(--accent)}

/* Poursuite : la barre de temps sous la plaque — ce qu'il reste avant la charge */
.pcar .car__timer{top:var(--plateY,75%);width:var(--pw,180px);height:calc(var(--pw,180px) * .045);transition:opacity .3s;opacity:0;
  /* sous la plaque : l'écart est mesuré sur la plaque rendue (js/pursuit.js) */
  transform:translate(-50%,calc(var(--pw,180px) * .16))}

/* Poursuite : trop loin pour lire — la plaque est là, mais brouillée ; elle se fait nette à portée */
.pcar .plate--pursuit{transition:opacity .3s,filter .45s ease-out}
.pcar .plate--far{filter:blur(calc(var(--pw,180px) * .022)) contrast(.7) brightness(.85)}
/* une paire qui ne compte pas (4×4 en Poursuite) : présente, mais en retrait */
.tok--off{opacity:.4}

/* Poursuite : votre plaque à vous, marquée XXX */
#pu-road .me .plate--me{position:absolute;left:50%;top:var(--plateY,75%);width:var(--pw,120px);transform:translate(-50%,-50%);margin:0;
  border-width:2px;border-radius:4px;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none}
#pu-road .me .plate--me .plate__body{font-size:calc(var(--pw,120px) * .17);padding:1px 2px;letter-spacing:.06em;line-height:1.15}
#pu-road .me .plate--me .plate__eu,#pu-road .me .plate--me .plate__dep{width:auto;min-width:12%;padding:2px 3px;justify-content:center}
#pu-road .me .plate--me .plate__f,#pu-road .me .plate--me .plate__depnum{font-size:calc(var(--pw,120px) * .07);white-space:nowrap}

/* ═══════════ le décor, dans le détail ═══════════
   Tout est en dégradés statiques (aucun coût d'animation) : collines au loin, brume
   chaude sur l'horizon, étoiles qui sortent avec le crépuscule, bas-côté de gravier,
   traces de roulement et reflet du couchant sur l'asphalte, vignette douce.        */

/* ligne d'horizon : collines lointaines, bosquets, brume qui mange leur base */
.road__sky::before{content:'';position:absolute;left:-2%;right:-2%;bottom:0;height:26%;pointer-events:none;
  background:
    /* brume chaude, au ras de l'horizon */
    linear-gradient(180deg,transparent 0 38%,rgba(214,168,124,.28) 78%,rgba(230,186,140,.5) 100%),
    /* bosquets sombres, épars */
    radial-gradient(9px 5px at 12% 100%,#1a2018 60%,transparent 62%),
    radial-gradient(7px 4px at 16% 100%,#1a2018 60%,transparent 62%),
    radial-gradient(11px 6px at 79% 100%,#1a2018 60%,transparent 62%),
    radial-gradient(8px 5px at 86% 100%,#1a2018 60%,transparent 62%),
    /* deux lignes de collines, la plus lointaine plus pâle */
    radial-gradient(70% 90% at 22% 128%,#2e3444 58%,transparent 60%),
    radial-gradient(52% 74% at 68% 126%,#333a4a 58%,transparent 60%),
    radial-gradient(90% 78% at 48% 134%,#39404f 60%,transparent 62%);
  opacity:.9}
/* étoiles : invisibles de jour, elles sortent quand le soleil se couche (--dusk) */
.road__posts::before{content:'';position:absolute;inset:0 0 56% 0;pointer-events:none;
  opacity:calc(var(--dusk,0) * .85);transition:opacity 1s linear;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 26% 9%,#e8eeff,transparent),
    radial-gradient(1.6px 1.6px at 38% 24%,#fff,transparent),radial-gradient(1.1px 1.1px at 52% 12%,#dbe6ff,transparent),
    radial-gradient(1.5px 1.5px at 63% 27%,#fff,transparent),radial-gradient(1.2px 1.2px at 74% 8%,#eaf0ff,transparent),
    radial-gradient(1.7px 1.7px at 85% 20%,#fff,transparent),radial-gradient(1.1px 1.1px at 92% 32%,#dfe8ff,transparent),
    radial-gradient(1.3px 1.3px at 19% 34%,#f2f6ff,transparent),radial-gradient(1.2px 1.2px at 45% 38%,#e6edff,transparent),
    radial-gradient(1.4px 1.4px at 58% 5%,#fff,transparent),radial-gradient(1px 1px at 31% 15%,#cfdcff,transparent)}
/* bas-côté : herbe rase éclairée à l'horizon, puis gravier le long de la chaussée */
.road__ground::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(196,168,116,.30) 0 3%,transparent 12%),
    radial-gradient(120% 60% at 50% 0,rgba(150,140,96,.16) 0 40%,transparent 70%)}
/* l'asphalte : traces de roulement, grain, et le couchant qui s'y reflète près de l'horizon */
.road__tarmac::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 40%,rgba(0,0,0,.20) 44% 48%,transparent 52%,transparent 56%,rgba(0,0,0,.20) 58% 62%,transparent 66%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px);
  mask-image:linear-gradient(180deg,transparent 0 6%,#000 40%);-webkit-mask-image:linear-gradient(180deg,transparent 0 6%,#000 40%)}
.road__tarmac::after{content:'';position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,rgba(226,190,150,.55) 0 4%,rgba(224,166,104,.3) 30%,rgba(224,166,104,0))}
/* vignette : les bords de la scène s'assombrissent, le regard va à la route */
/* Le grain : un seul voile sur toute la scène. Les sprites sont nets jusqu'au dernier
   pixel — c'est ce qui leur donnait par moments un air d'autocollant ; un peu de bruit
   commun les soude au décor. */
.road::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1150;opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.9'/></svg>");
  background-size:150px 150px;
}
.road::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1100;
  background:radial-gradient(130% 95% at 50% 48%,transparent 55%,rgba(0,0,0,.42) 100%)}
.hero__road::after{display:none}
/* Miami : collines et brume remplacées par la skyline, étoiles plus discrètes */
body.theme-miami .road__ground::before{opacity:1}
body.theme-miami .road__tarmac::after{background:linear-gradient(180deg,rgba(255,79,163,.22),transparent)}
body.theme-miami .road::after{background:radial-gradient(130% 95% at 50% 48%,transparent 58%,rgba(9,4,26,.5) 100%)}

body.theme-miami .road__tarmac{background:
  radial-gradient(30% 7% at 31% 76%,rgba(0,0,0,.2),transparent 70%),
  linear-gradient(90deg,rgba(0,0,0,.35) 0 5%,transparent 34% 66%,rgba(0,0,0,.35) 95%),
  linear-gradient(180deg,#221650 0%,#150d36 48%,#0c0722 100%)}


/* ═══════════ police ═══════════
   Trafic : vous êtes au volant d'une voiture de police — sa rampe de gyrophares entre
   dans le bas du cadre et ses éclats bleu-rouge balaient la route.
   Poursuite : ce sont les voitures de police qui vous rattrapent, gyrophares allumés. */
/* votre voiture de police, vue de dos, au premier plan — cadrée juste sous le capot arrière */
.copcar{position:absolute;left:50%;bottom:-32%;width:min(48%,calc(var(--roadH) * .66));transform:translateX(-50%);
  z-index:1150;pointer-events:none}
.copcar__body{display:block;width:100%;height:auto;filter:drop-shadow(0 -6px 22px rgba(0,0,0,.55));
  animation:rumble .16s ease-in-out infinite alternate}
/* bande bleue de flanc, sous les vitres */
.copcar__stripe{position:absolute;left:6%;right:6%;top:46%;height:5%;background:linear-gradient(180deg,#2f6fd8,#1b4fa8);
  opacity:.9;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.25)}
.copbar{position:absolute;left:50%;top:1%;width:26%;height:5.5%;transform:translateX(-50%);z-index:2;pointer-events:none}
.copbar__body{position:absolute;inset:auto 0 0 0;height:62%;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#2b323e,#161b23);box-shadow:0 -2px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.copbar i{position:absolute;bottom:28%;width:30%;height:62%;border-radius:5px 5px 2px 2px;z-index:2}
.copbar__b{left:7%;background:linear-gradient(180deg,#9fd0ff,#1f6ddc);animation:copFlashB 1s steps(1) infinite}
.copbar__r{right:7%;background:linear-gradient(180deg,#ffb3b3,#d2262a);animation:copFlashR 1s steps(1) infinite}
@keyframes copFlashB{0%,24%{opacity:1;box-shadow:0 0 12px 3px rgba(60,140,255,.55)}25%,100%{opacity:.28;box-shadow:none}}
@keyframes copFlashR{0%,49%{opacity:.28;box-shadow:none}50%,74%{opacity:1;box-shadow:0 0 12px 3px rgba(255,70,70,.55)}75%,100%{opacity:.28;box-shadow:none}}
/* le balayage des gyrophares sur la chaussée — .copwash est un frère de .road__tarmac,
   il se cale sur .road : surtout ne pas repasser la chaussée en position:relative, elle
   perdrait la hauteur que lui donne son inset et disparaîtrait sous le bas-côté. */
.copwash{position:absolute;inset:74% 0 0 0;pointer-events:none;z-index:2;mix-blend-mode:screen}
.copwash::before,.copwash::after{content:'';position:absolute;inset:0}
.copwash::before{background:radial-gradient(46% 70% at 40% 108%,rgba(60,140,255,.22),transparent 70%);animation:copFlashB 1s steps(1) infinite}
.copwash::after{background:radial-gradient(46% 70% at 60% 108%,rgba(255,70,70,.20),transparent 70%);animation:copFlashR 1s steps(1) infinite}
/* les poursuivants : gyrophares sur le toit */
.pcar .cop{position:absolute;left:50%;top:-4%;width:40%;height:9%;transform:translateX(-50%);z-index:4;pointer-events:none}
.pcar .cop i{position:absolute;top:0;width:44%;height:100%;border-radius:4px 4px 2px 2px}
.pcar .cop i:first-child{left:0;background:linear-gradient(180deg,#bfe0ff,#1f6ddc);animation:copFlashB .9s steps(1) infinite}
.pcar .cop i:last-child{right:0;background:linear-gradient(180deg,#ffc9c9,#d2262a);animation:copFlashR .9s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.copbar i,.copwash::before,.copwash::after,.pcar .cop i{animation:none;opacity:.85}}

/* ═══════════ le but du jeu : la carte de grade ═══════════ */
.grade{display:block;width:100%;text-align:left;background:linear-gradient(160deg,#1b2436,#141a26);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px 13px;margin:0 0 10px;cursor:pointer;color:var(--txt);
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:.15s}
.grade:hover{border-color:var(--accent)}
.grade__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.grade__k{flex:1 0 100%;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.grade__head b{font-family:var(--cond);font-size:23px;letter-spacing:.02em;color:var(--accent)}
.grade__head i{font-style:normal;font-size:12px;color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums}
.grade__bar{height:7px;background:#0d131c;border-radius:99px;overflow:hidden;margin:9px 0 8px;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.grade__fill{height:100%;background:linear-gradient(90deg,#3ddc84,var(--accent));transition:width .5s}
.grade__next{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12.5px;color:var(--dim)}
.grade__next b{color:var(--txt)}
.grade__next u{text-decoration:none;background:var(--bg3);border:1px solid var(--line);border-radius:99px;padding:2px 9px;
  font-size:11.5px;font-variant-numeric:tabular-nums}
.grade__next u.ok{border-color:var(--ok);color:var(--ok)}
/* l'échelle complète, sur l'écran de carrière */
.grades{display:grid;gap:6px;margin-bottom:18px}
.grade__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.grade__row b{font-size:14.5px}
.grade__row span{font-size:12px;color:var(--dim);text-align:right}
.grade__row i{font-style:normal;color:var(--accent)}
.grade__row--got{opacity:.62}
.grade__row--got b::after{content:' ✓';color:var(--ok)}
.grade__row--now{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,207,63,.10),transparent)}
.grade__row--now b{color:var(--accent)}
.career__h{font-size:16px;margin:4px 0 8px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
body.theme-miami .grade__fill{background:linear-gradient(90deg,#2ee6d6,#ff4fa3)}
body.theme-miami .grade__head b,body.theme-miami .grade__row--now b{color:#ff4fa3}

/* la carte Poursuite : une voiture de police, gyrophares allumés */
.modecard__pic{position:relative;display:block;align-self:flex-end;margin:2px -6px 0 0;line-height:0}
.modecard__pic img{height:118px;width:auto;max-width:100%;object-fit:contain;margin:0}
.modecard__pic .cop{position:absolute;left:50%;top:1%;width:38%;height:9%;transform:translateX(-50%);z-index:2;display:block}
.modecard__pic .cop i{position:absolute;top:0;width:44%;height:100%;border-radius:4px 4px 2px 2px}
.modecard__pic .cop i:first-child{left:0;background:linear-gradient(180deg,#bfe0ff,#1f6ddc);animation:copFlashB .9s steps(1) infinite}
.modecard__pic .cop i:last-child{right:0;background:linear-gradient(180deg,#ffc9c9,#d2262a);animation:copFlashR .9s steps(1) infinite}