/* ===== FLIP RACER — interface en surimpression de la scène 3D ===== */
:root {
  --ink: #f3f6fb; --dim: #a9b8cd; --panel: rgba(8, 14, 26, 0.78); --panel-2: rgba(16, 26, 46, 0.86); --line: rgba(170, 200, 240, 0.2);
  --thrust: #8fe6ff; --hot: #ff6a2b; --gold: #ffcb52; --silver: #d9e1ea; --bronze: #e39a62; --bad: #ff5a4f; --good: #7dffb0;
  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --f-body: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f2140; color: var(--ink); font-family: var(--f-body); -webkit-user-select: none; user-select: none; }
input, select, textarea { -webkit-user-select: text; user-select: text; }
a { color: var(--thrust); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-bottom, 0px)); }
.frame { position: relative; width: 100%; height: 100%; }
.lbl { font: 600 11px/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.petit { font-size: 13px; color: var(--dim); line-height: 1.45; }
.shadow { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 14px rgba(5,10,20,.55); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Effet de vitesse (boost) et vignette : en CSS, aucun coût GPU de post-traitement */
#vitesse { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(143,230,255,.10) 75%, rgba(10,16,30,.45) 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask: radial-gradient(circle at center, transparent 30%, #000 70%); mask: radial-gradient(circle at center, transparent 30%, #000 70%); }
#vitesse.on { opacity: 1; animation: vit .35s linear infinite; }
@keyframes vit { to { transform: rotate(3deg) scale(1.02); } }

/* ===== Boutons ===== */
button { pointer-events: auto; font: 700 17px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #12090a; background: var(--hot); border: 0; border-radius: 4px; padding: 14px 24px; cursor: pointer; transition: transform .12s, background .12s; }
button:hover { background: #ff8550; transform: translateY(-1px); }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--thrust); outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; transform: none; }
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
button.ghost:hover { background: rgba(255,255,255,.08); }
button.lien { background: none; padding: 0; color: var(--thrust); font: 600 14px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
button.lien:hover { transform: none; color: #c8f5ff; }
button.gros { font-size: 22px; padding: 18px 30px; }
button.danger { background: var(--bad); }
button.retour { background: rgba(255,255,255,.06); color: var(--ink); padding: 8px 14px; font-size: 20px; box-shadow: inset 0 0 0 1px var(--line); }

/* ===== Écrans de menu : panneau à gauche, la 3D visible à droite ===== */
.ecran { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; justify-content: center; }
.ecran::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(6,12,24,.9) 0%, rgba(6,12,24,.6) 42%, rgba(6,12,24,0) 72%); pointer-events: none; }
.ecran.large::before { background: linear-gradient(90deg, rgba(6,12,24,.92) 0%, rgba(6,12,24,.78) 60%, rgba(6,12,24,.3) 100%); }
.panneau { position: relative; max-width: 560px; display: grid; gap: clamp(10px, 2vh, 20px); max-height: 100%; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.ecran.large .panneau { max-width: min(1080px, 100%); }
.eyebrow { font: 600 12px/1.3 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--thrust); }
h1 { margin: 0; font: 900 clamp(56px, min(12vw, 16vh), 150px)/.8 var(--f-display); letter-spacing: .005em; }
h1 .o { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
h2 { margin: 0; font: 900 clamp(28px, 4vw, 42px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
h3 { margin: 6px 0 0; font: 700 18px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lede { margin: 0; font: 400 17px/1.5 var(--f-body); color: var(--ink); max-width: 48ch; }
.lede.petit { font-size: 14px; color: var(--dim); }
.spec { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12px/1.4 var(--f-mono); color: var(--dim); }
.spec b { color: var(--ink); font-weight: 700; }
.menu-principal { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.compte-ligne { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.avis { margin: 0; padding: 10px 14px; border-radius: 6px; background: rgba(255,203,82,.1); box-shadow: inset 0 0 0 1px rgba(255,203,82,.35); font-size: 14px; }
.pied { position: absolute; left: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; }
.pied a { color: var(--dim); }
select, input[type=text], input[type=email], input[type=password], input:not([type]) {
  pointer-events: auto; font: 500 15px/1.2 var(--f-body); color: var(--ink); background: rgba(8,14,26,.75); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-width: 0; }
select { padding-right: 28px; }
.entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entete .mono { margin-left: auto; color: var(--gold); font-size: 15px; }

.onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.onglet { background: rgba(255,255,255,.05); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; padding: 10px 16px; }
.onglet[aria-selected="true"] { background: var(--ink); color: #0b1222; }
.onglet .cadenas { margin-left: 6px; font-size: 13px; }
.onglet:hover { transform: none; }

/* ===== Cartes de circuits ===== */
.grille-circuits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.carte-circuit { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, transform .15s; pointer-events: auto; }
.carte-circuit:hover, .carte-circuit.choisi { box-shadow: inset 0 0 0 2px var(--thrust); }
.carte-circuit.verrouille { opacity: .5; cursor: not-allowed; }
.carte-circuit .num { font: 700 13px/1 var(--f-mono); color: var(--dim); }
.carte-circuit h3 { margin: 0; color: var(--ink); font-size: 21px; letter-spacing: .03em; }
.carte-circuit .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 12px/1.3 var(--f-mono); color: var(--dim); }
.carte-circuit .theme { display: inline-block; padding: 2px 7px; border-radius: 3px; font: 600 11px/1.4 var(--f-body); letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.08); }
.theme.desert { color: #ffb48a; } .theme.alpes { color: #bfe3ff; } .theme.ocean { color: #7ff0e0; } .theme.nuit { color: #ff8ad4; } .theme.volcan { color: #ff8a5a; } .theme.cosmos { color: #c9a8ff; }
.carte-circuit .temps { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font: 500 13px/1.3 var(--f-mono); }
.carte-circuit .temps span:nth-child(odd) { color: var(--dim); font-family: var(--f-body); font-size: 12px; }
.carte-circuit .boutons { display: flex; gap: 8px; }
.carte-circuit .boutons button { padding: 10px 14px; font-size: 15px; }
.pastille-medaille { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 13px/1 var(--f-display); color: #1a1205; }
.pastille-medaille.or { background: var(--gold); box-shadow: 0 0 14px rgba(255,203,82,.6); } .pastille-medaille.argent { background: var(--silver); } .pastille-medaille.bronze { background: var(--bronze); }
.etoiles { color: var(--hot); letter-spacing: 2px; }

/* ===== Classement ===== */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.table-defile { overflow: auto; max-height: min(56vh, 560px); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
table.classement { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--f-body); }
.classement th { position: sticky; top: 0; background: #111c31; text-align: left; font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 10px 12px; }
.classement td { padding: 9px 12px; border-top: 1px solid rgba(170,200,240,.08); }
.classement td.n, .classement th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.classement tr.moi td { background: rgba(255,106,43,.14); }
.classement .rang { font: 700 15px/1 var(--f-mono); width: 54px; }
.classement tr:nth-child(1) .rang { color: var(--gold); } .classement tr:nth-child(2) .rang { color: var(--silver); } .classement tr:nth-child(3) .rang { color: var(--bronze); }
.classement button { padding: 6px 10px; font-size: 13px; }
.code-pays { display: inline-block; min-width: 28px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.08); font: 600 11px/1.4 var(--f-mono); color: var(--dim); text-align: center; margin-right: 6px; }
#classement-moi { font-size: 14px; }
.vide { padding: 22px 12px; color: var(--dim); text-align: center; }

/* ===== Garage ===== */
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; max-width: 460px; }
.nuance { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 0; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 0 0 1px var(--line); }
.nuance[aria-pressed="true"] { box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 0 0 3px var(--thrust); }
.nuance:disabled { opacity: .35; }
.nuance .verrou { position: absolute; inset: auto 0 -20px; font: 600 10px/1 var(--f-mono); color: var(--dim); text-transform: none; letter-spacing: 0; }

/* ===== Formulaires ===== */
.formulaire { display: grid; gap: 12px; }
.formulaire label { display: grid; gap: 6px; font: 600 13px/1.2 var(--f-body); color: var(--dim); }
.formulaire label.ligne { grid-template-columns: 1fr auto; align-items: center; color: var(--ink); font-size: 15px; }
.formulaire label.case { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-weight: 400; font-size: 14px; line-height: 1.4; }
.formulaire small { font-weight: 400; color: var(--dim); }
.formulaire input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--hot); pointer-events: auto; }
.formulaire input[type=range] { width: 180px; accent-color: var(--hot); pointer-events: auto; }
.formulaire.danger label { color: #ffb3a8; }
details { border-top: 1px solid var(--line); padding-top: 10px; }
summary { cursor: pointer; font: 700 16px/1.4 var(--f-display); letter-spacing: .06em; text-transform: uppercase; pointer-events: auto; }
details .formulaire { margin-top: 10px; }
.message-form { margin: 0; min-height: 1.2em; font-size: 14px; }
.message-form.erreur { color: var(--bad); } .message-form.ok { color: var(--good); }
.identite { margin: 0; font-size: 20px; }
.pastille { display: inline-block; padding: 2px 8px; border-radius: 10px; font: 600 11px/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.pastille.ok { background: rgba(125,255,176,.15); color: var(--good); } .pastille.ko { background: rgba(255,203,82,.15); color: var(--gold); }
.ctrl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: center; font: 400 14px/1.3 var(--f-body); }
kbd { display: inline-block; min-width: 22px; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); border-bottom-width: 2px; background: rgba(255,255,255,.06); font: 600 12px/1.2 var(--f-mono); color: var(--ink); text-align: center; margin-right: 3px; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: block; } .desk-only { display: none !important; } }

/* ===== HUD ===== */
#hud .tl { position: absolute; top: 0; left: 0; display: grid; gap: 4px; }
#time { font: 700 clamp(28px, 4.2vw, 46px)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
#hud .best { font: 500 13px/1.2 var(--f-mono); color: var(--dim); }
#hud .tr { position: absolute; top: 0; right: 0; text-align: right; display: grid; gap: 4px; }
#score { font: 900 clamp(28px, 4.2vw, 46px)/1 var(--f-display); letter-spacing: .02em; }
#hud .tc { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: min(40vw, 460px); text-align: center; }
#prog { position: relative; height: 6px; border-radius: 3px; background: rgba(8,14,26,.55); box-shadow: inset 0 0 0 1px var(--line); margin-top: 8px; }
#prog i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--thrust); opacity: .7; }
#prog::after { content: ""; position: absolute; right: -2px; top: -5px; width: 4px; height: 16px; background: repeating-linear-gradient(#fff 0 4px, #111 4px 8px); }
#me, #ghostDot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
#me { background: var(--hot); box-shadow: 0 0 0 3px rgba(255,106,43,.3); z-index: 1; }
#ghostDot { background: rgba(143,230,255,.6); display: none; }
#ghostDot.on { display: block; }
#hud .bl { position: absolute; left: 0; bottom: 0; display: grid; gap: 8px; }
.speed { display: flex; align-items: baseline; gap: 8px; }
#spd { font: 900 clamp(64px, 10vw, 112px)/.82 var(--f-display); letter-spacing: -.01em; }
.speed .unit { font: 700 16px/1 var(--f-display); letter-spacing: .1em; color: var(--dim); }
#gaugeWrap { width: min(62vw, 300px); display: grid; gap: 6px; }
#gaugeWrap .row { display: flex; justify-content: space-between; align-items: baseline; }
#bar { font: 700 14px/1 var(--f-mono); color: var(--thrust); }
.gauge { height: 10px; border-radius: 2px; background: rgba(8,14,26,.6); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
#gauge { height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #5fc9ff, var(--thrust) 70%, #e9fbff); transition: transform .08s linear; }
#gaugeWrap.low #bar { color: var(--bad); }
#gaugeWrap.low #gauge { background: var(--bad); }
#gaugeWrap.firing .gauge { box-shadow: inset 0 0 0 1px var(--thrust), 0 0 14px rgba(143,230,255,.45); }
#hud .br { position: absolute; right: 0; bottom: 0; text-align: right; display: grid; gap: 6px; max-width: 46vw; }
#tip { font: 600 14px/1.3 var(--f-body); color: var(--ink); }
#hud .keys { font: 500 12px/1.4 var(--f-mono); color: var(--dim); }
#pops { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; width: min(90vw, 640px); }
.pop { display: grid; justify-items: center; gap: 2px; animation: popIn .28s cubic-bezier(.2,1.4,.4,1) both; text-align: center; }
.pop b { font: 900 clamp(30px, 5vw, 54px)/1 var(--f-display); letter-spacing: .03em; text-shadow: 0 2px 18px rgba(5,10,20,.6); }
.pop span { font: 600 15px/1.2 var(--f-body); letter-spacing: .06em; color: var(--ink); text-shadow: 0 1px 8px rgba(5,10,20,.7); }
.pop.trick b { color: var(--hot); } .pop.can b { color: var(--thrust); font-size: clamp(22px, 3.4vw, 34px); }
.pop.pad b { color: var(--gold); font-size: clamp(22px, 3.4vw, 34px); }
.pop.clean b { color: var(--gold); font-size: clamp(18px, 2.6vw, 26px); }
.pop.bad b { color: var(--bad); } .pop.good span { color: var(--good); } .pop.slow span { color: #ffb3a8; }
.pop.cp b, .pop.good b, .pop.slow b { font-size: clamp(20px, 3vw, 30px); color: var(--thrust); }
.pop.air b { font-size: clamp(24px, 3.6vw, 36px); }
.pop.out { animation: popOut .4s ease both; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.85); } }
@keyframes popOut { to { opacity: 0; transform: translateY(-14px); } }
#count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 900 clamp(110px, 20vw, 220px)/1 var(--f-display); color: var(--ink); text-shadow: 0 4px 40px rgba(5,10,20,.5); }
#count.pulse { animation: cnt .7s ease-out both; }
@keyframes cnt { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: .0; } }
.aide-course { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 20px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; width: max-content; max-width: min(88vw, 560px); }
.aide-course b { font: 900 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--thrust); }

/* ===== Fenêtres (pause, arrivée, compte) ===== */
.modal { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: rgba(6,12,24,.55); padding: 12px 0; }
.sheet { position: relative; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.4); border-radius: 8px; padding: 26px 30px; display: grid; gap: 14px; justify-items: stretch; width: min(92vw, 460px); max-height: 100%; overflow-y: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet.large { width: min(94vw, 520px); }
.sheet .fermer { position: absolute; top: 10px; right: 10px; padding: 6px 12px; font-size: 22px; background: transparent; color: var(--dim); }
#fTime { font: 700 clamp(48px, 9vw, 72px)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.medal { font: 900 24px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.medal.or { color: var(--gold); } .medal.argent { color: var(--silver); } .medal.bronze { color: var(--bronze); } .medal.none { color: var(--dim); font: 600 15px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 14px/1.3 var(--f-mono); color: var(--dim); }
.stats b { color: var(--ink); }
.avis-fin { font-size: 15px; line-height: 1.4; min-height: 1.4em; }
.avis-fin b { color: var(--gold); }
.avis-fin.ko { color: #ffb3a8; }
.deblocage { padding: 10px 14px; border-radius: 6px; background: rgba(125,255,176,.12); color: var(--good); font: 700 17px/1.3 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* ===== Notifications, bandeau, chargement ===== */
#toasts { position: absolute; right: 0; top: 0; display: grid; gap: 8px; justify-items: end; max-width: min(92vw, 420px); z-index: 5; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: 6px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.35); font-size: 14px; line-height: 1.4; animation: popIn .25s ease both; }
.toast.ok { box-shadow: inset 3px 0 0 var(--good), inset 0 0 0 1px var(--line); } .toast.erreur { box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1px var(--line); }
.toast a { word-break: break-all; }
#bandeau { position: absolute; left: 50%; top: 0; transform: translateX(-50%); pointer-events: auto; padding: 8px 16px; border-radius: 0 0 6px 6px; background: rgba(255,106,43,.92); color: #160a04; font: 600 14px/1.3 var(--f-body); max-width: 92vw; text-align: center; z-index: 4; }
#chargement { position: fixed; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s; }
#chargement.on { opacity: 1; }
#chargement .barre { height: 100%; width: 40%; background: var(--hot); animation: charge 1s ease-in-out infinite; }
@keyframes charge { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ===== Bouton plein écran (accueil) ===== */
.plein-ecran { position: absolute; top: 0; right: 0; z-index: 2; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(8,14,26,.55); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.plein-ecran:hover { background: rgba(16,26,46,.85); }
.plein-ecran svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .plein-ecran { top: 26px; } }

/* ===== Commandes tactiles : joystick à gauche (il suit le pouce), SAUT et BOOST à droite ===== */
#touch { position: absolute; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.joy { position: absolute; left: 0; bottom: 0; width: 50%; height: 66%; pointer-events: auto; touch-action: none; }
.joy-base { position: absolute; left: 0; top: 0; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%; opacity: .5; transition: opacity .2s;
  background: radial-gradient(circle, rgba(143,230,255,.06) 0 46%, rgba(8,14,26,.42) 47% 100%); box-shadow: inset 0 0 0 1.5px rgba(143,230,255,.3), 0 6px 24px rgba(0,0,0,.25); }
.joy.on .joy-base { opacity: 1; transition: none; }
/* repères des quatre directions */
.joy-base i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 6px solid transparent; border-bottom: 7px solid rgba(207,232,255,.55); margin: -64px 0 0 -6px; transform-origin: 6px 64px; }
.joy-base i:nth-child(2) { transform: rotate(90deg); } .joy-base i:nth-child(3) { transform: rotate(180deg); } .joy-base i:nth-child(4) { transform: rotate(270deg); }
.joy-bouton { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f4fbff, #9fd8ef 55%, #5b9cb8); box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 -3px 6px rgba(0,0,0,.18); }
.joy.on .joy-bouton { box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 6px rgba(143,230,255,.16); }
#touch .boutons { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: 196px; height: 176px; pointer-events: auto; touch-action: none; }
#touch .boutons button { position: absolute; padding: 0; border-radius: 50%; font: 800 17px/1 var(--f-display); letter-spacing: .08em; color: var(--ink); touch-action: none;
  background: radial-gradient(circle at 50% 35%, rgba(30,44,66,.66), rgba(8,14,26,.62)); box-shadow: inset 0 0 0 2px var(--line), 0 6px 20px rgba(0,0,0,.3); transition: transform .06s; }
#touch [data-k="jump"] { right: 0; bottom: 0; width: 104px; height: 104px; box-shadow: inset 0 0 0 2px rgba(143,230,255,.45), 0 6px 20px rgba(0,0,0,.3); }
#touch [data-k="boost"] { left: 0; top: 0; width: 84px; height: 84px; box-shadow: inset 0 0 0 2px rgba(255,106,43,.55), 0 6px 20px rgba(0,0,0,.3); }
#touch button.on { transform: scale(.94); }
#touch [data-k="jump"].on { background: radial-gradient(circle at 50% 35%, rgba(170,236,255,.62), rgba(60,150,190,.5)); }
#touch [data-k="boost"].on { background: radial-gradient(circle at 50% 35%, rgba(255,150,90,.75), rgba(220,80,30,.6)); }
@media (max-width: 420px) {
  .joy-base { width: 120px; height: 120px; margin: -60px 0 0 -60px; } .joy-base i { margin-top: -56px; transform-origin: 6px 56px; }
  .joy-bouton { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  #touch .boutons { width: 172px; height: 158px; } #touch [data-k="jump"] { width: 94px; height: 94px; } #touch [data-k="boost"] { width: 74px; height: 74px; }
}
.pause-tactile { position: absolute; top: 56px; right: 0; padding: 8px 14px; background: rgba(8,14,26,.5); color: var(--ink); font-size: 16px; box-shadow: inset 0 0 0 1px var(--line); }
/* tactile : vitesse et jauge au-dessus des commandes (portrait) ou entre le joystick et les boutons (paysage) */
@media (pointer: coarse) {
  #hud .bl { bottom: 196px; } #hud .br { display: none; } #spd { font-size: 60px; } #gaugeWrap { width: min(58vw, 260px); }
  .aide-course { bottom: auto; top: 30%; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  #hud .bl { left: 50%; bottom: 0; transform: translateX(-50%); justify-items: center; } #spd { font-size: 48px; } #gaugeWrap { width: min(30vw, 240px); }
  .aide-course { top: 22%; }
}

@media (max-width: 760px) {
  #hud .tc { top: 92px; width: 70vw; }
  .panneau { gap: 14px; } .lede { font-size: 15px; }
  .ecran::before, .ecran.large::before { background: rgba(6,12,24,.82); }
  .ecran { justify-content: flex-start; padding-top: 8px; }
  .pied { position: relative; margin-top: 14px; }
  .grille-circuits { grid-template-columns: 1fr; }
  button.gros { font-size: 19px; padding: 15px 22px; }

  /* Accueil sur mobile : titre en haut, voiture visible au milieu, actions groupées en bas (à portée de pouce) */
  #ecran-accueil { overflow-y: auto; scrollbar-width: none; }
  #ecran-accueil::before { background: linear-gradient(180deg, rgba(6,12,24,.62) 0%, rgba(6,12,24,.08) 24%, rgba(6,12,24,0) 36%, rgba(6,12,24,.72) 52%, rgba(6,12,24,.94) 68%, rgba(6,12,24,.97) 100%); }
  #ecran-accueil .panneau { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; max-height: none; overflow: visible; padding-right: 0; }
  #ecran-accueil .eyebrow { font-size: 11px; letter-spacing: .12em; }
  #ecran-accueil h1 { font-size: clamp(54px, 17vw, 76px); }
  #ecran-accueil .lede { margin-top: auto; padding-top: 24px; font-size: 15px; line-height: 1.45; color: #dfe7f2; }
  #ecran-accueil .spec span:last-child { display: none; }
  #ecran-accueil .menu-principal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  #ecran-accueil #b-jouer { grid-column: 1 / -1; font-size: 26px; padding: 18px; border-radius: 6px; box-shadow: 0 8px 26px rgba(255,106,43,.35); }
  #ecran-accueil .menu-principal .ghost { padding: 15px 8px; font-size: 16px; border-radius: 6px; background: rgba(16,26,46,.72); }
  #ecran-accueil .compte-ligne { gap: 4px 14px; }
  #ecran-accueil .pied { justify-content: space-between; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
  #ecran-accueil .pied select { padding: 7px 10px; font-size: 13px; }
}
/* téléphone court : titre sur une ligne, accroche et boutons plus compacts, pour garder la voiture visible */
@media (max-width: 760px) and (max-height: 740px) {
  #ecran-accueil h1 { font-size: 52px; } #ecran-accueil h1 .o { display: inline; margin-left: .18em; }
  #ecran-accueil .panneau { gap: 10px; } #ecran-accueil .lede { font-size: 14px; padding-top: 16px; }
  #ecran-accueil #b-jouer { padding: 15px; font-size: 24px; } #ecran-accueil .menu-principal .ghost { padding: 13px 8px; }
  #ecran-accueil .pied { margin-top: 10px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pop, #count.pulse, .pop.out, #vitesse.on, .toast { animation: none; } }

/* ===== Accès, garage et boutique ===== */
.carte-circuit .acces { justify-self: start; padding: 2px 8px; border-radius: 3px; font: 700 11px/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.acces.membre { background: rgba(143,230,255,.15); color: var(--thrust); }
.acces.premium { background: linear-gradient(90deg, #ffcb52, #ff8a3d); color: #1a1005; }
.carte-circuit.verrouille { opacity: 1; cursor: default; }
.carte-circuit.verrouille h3, .carte-circuit.verrouille .temps, .carte-circuit.verrouille .meta { opacity: .55; }
.verrou-texte { margin: 0; font-size: 13px; color: var(--gold); }
.solde-credits { color: var(--thrust) !important; }
.evolutions { display: grid; gap: 10px; }
.evolution { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.evo-info { display: grid; gap: 3px; min-width: 180px; flex: 1; }
.evo-info b { font: 700 18px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.evo-action { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: 13px; }
.evo-action button { padding: 10px 16px; font-size: 15px; }
.pips { display: flex; gap: 4px; margin: 2px 0; }
.pips i { width: 22px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.12); }
.pips i.on { background: var(--hot); box-shadow: 0 0 8px rgba(255,106,43,.5); }
.nuance.a-acheter { opacity: .75; }
.nuance .verrou { inset: auto -6px -20px; white-space: nowrap; }
.nuancier { row-gap: 26px; padding-bottom: 6px; }
.offres { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.offre { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.offre.vedette { box-shadow: inset 0 0 0 2px var(--gold), 0 0 30px rgba(255,203,82,.18); grid-column: 1 / -1; }
.offre h3 { margin: 0; color: var(--ink); font-size: 24px; }
.offre .prix { font: 900 34px/1 var(--f-display); color: var(--gold); }
.offre ul { margin: 0; padding-left: 18px; color: var(--dim); font-size: 14px; line-height: 1.6; }
.offre button { justify-self: start; }

/* ===== Connexion avec Google ===== */
.bouton-google { display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: auto; padding: 11px 16px; border-radius: 4px;
  background: #ffffff; color: #1f1f1f; font: 600 15px/1.2 var(--f-body); text-decoration: none; box-shadow: inset 0 0 0 1px #dadce0; }
.bouton-google:hover { background: #f2f4f7; }
.bouton-google.petit { display: inline-flex; padding: 8px 12px; font-size: 13px; }
.separateur { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--dim); font-size: 13px; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.profil-google { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profil-google p { margin: 0; width: 100%; }