:root {
  --ink: #0C0C10;
  --panel: #17171C;
  --line: #2C2C34;
  --text: #F4F1EA;
  --muted: #B4B0A8;
  --blue: #2F9BFF;
  --orange: #FF7A1A;
  --gold: #FFD45A;
  --danger: #FF2E63;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--body); overscroll-behavior: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- Scène ---------- */
#stage { position: absolute; inset: 0; background: #000; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* Voile sombre : la pièce s'efface, les cibles ressortent. */
#dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,12,.62) 0, rgba(8,8,12,.30) 16%, rgba(8,8,12,.30) 80%, rgba(8,8,12,.46) 100%); }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#stage.shake { animation: shake .2s linear; }
@keyframes shake {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7px, 4px); } 40% { transform: translate(6px, -5px); }
  60% { transform: translate(-4px, -3px); } 80% { transform: translate(3px, 3px); } 100% { transform: translate(0, 0); }
}
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#flash.white { background: #fff; animation: flash .18s ease-out; }
#flash.gold { background: var(--gold); animation: flash .22s ease-out; }
#flash.red { background: var(--danger); animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .42; } 100% { opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0; pointer-events: none; }
.hud-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 6px; }
.score small, .combo small { display: block; font: 600 12px/1 var(--body); letter-spacing: .14em; color: rgba(255,255,255,.88); }
.score b { display: block; font: 800 40px/1 var(--display); margin-top: 3px; font-variant-numeric: tabular-nums; }
.score b.bump { animation: bump .22s ease-out; }
.combo { text-align: right; }
.combo b { display: block; font: 800 40px/1 var(--display); color: var(--orange); margin-top: 3px; transform-origin: right center; }
.combo b.bump { animation: bump .25s cubic-bezier(.2, 1.6, .4, 1); }
.combo.fire b { color: var(--gold); text-shadow: 0 0 18px rgba(255,160,40,.9), 0 0 4px #fff; font-style: italic; }
@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#quit { position: absolute; left: calc(50% - 28px); top: calc(env(safe-area-inset-top, 0px) + 22px); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255,255,255,.28); background: rgba(10,10,14,.6); color: #fff; display: grid; place-items: center; pointer-events: auto; cursor: pointer; }
/* Bandeau du bas : la suite de coups, sur une seule ligne. Les cibles vivent entre le score
   (en haut) et ce bandeau, et rien ne les recouvre. */
#lane { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); padding: 0 8px; pointer-events: none; }
#slow { margin: 6px auto 0; width: max-content; max-width: 100%; padding: 5px 10px 4px; border-radius: 8px; background: rgba(10,10,14,.82); border: 1px solid var(--danger); color: #FFC2D0; font: 700 13px/1.2 var(--display); letter-spacing: .06em; text-align: center; }
/* Entraînement : où on en est dans le niveau, et combien de fois l'exercice a été réussi. */
#drill { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 6px; font: 800 15px/1 var(--display); letter-spacing: .08em; color: #E8E4DC; text-shadow: 0 1px 3px #000; }
#drill .dots { display: inline-flex; gap: 5px; }
#drill .dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--gold); }
#drill .dots i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255,212,90,.8); }
#drill.done { color: var(--gold); }
#announce { --chip: 18px; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 6px; height: 40px; padding: 0 4px; overflow: hidden; }
#announce span { flex: none; white-space: nowrap; font: 800 var(--chip)/1 var(--display); letter-spacing: .04em; padding: .33em .5em .28em; border-radius: 9px; background: rgba(10,10,14,.78); border: 1.5px solid rgba(255,255,255,.3); opacity: .45; transition: transform .12s, opacity .12s; }
#announce span i { font-style: normal; font-size: .74em; margin-right: 6px; padding: 1px 5px 0; border-radius: 5px; color: var(--ink); vertical-align: 1px; }
#announce span.L i { background: var(--blue); }
#announce span.R i { background: var(--orange); }
#announce span.done i { background: var(--ink); color: #fff; }
#announce span.L { border-color: var(--blue); color: #BFE0FF; }
#announce span.R { border-color: var(--orange); color: #FFD3B0; }
#announce span.D { border-color: var(--danger); color: #FFC2D0; }
#announce span.now { opacity: 1; transform: scale(1.16); margin: 0 .45em; background: rgba(10,10,14,.95); box-shadow: 0 0 0 2px currentColor, 0 0 16px currentColor; }
#announce span.done { opacity: .9; background: rgba(255,255,255,.92); color: var(--ink); border-color: #fff; }
#announce span.fail { opacity: .4; text-decoration: line-through; }

/* ---------- Pops : verdicts, points, étiquettes ---------- */
#pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.verdict {
  position: absolute; left: 50%; top: 57%;
  font: italic 800 84px/0.9 var(--display); letter-spacing: .01em; white-space: nowrap; text-align: center;
  color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255,255,255,.45);
  animation: verdict .85s cubic-bezier(.2, 1.5, .35, 1) forwards;
}
.verdict.perfect { color: var(--gold); text-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(255,170,40,.95); }
.verdict.perfect.r2, .verdict.perfect.r3, .verdict.perfect.r4 { color: #fff; }
.verdict.good { color: #fff; }
.verdict.meh { color: #D8D4CC; }
.verdict.bad { color: var(--danger); text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255,46,99,.8); }
.verdict.dodge { color: var(--gold); text-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(255,212,90,.9); }
.verdict.name.L { color: #8CC8FF; text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(47,155,255,.9); }
.verdict.name.R { color: #FFA95E; text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255,122,26,.9); }
@keyframes verdict {
  0% { transform: translate(-50%, -50%) rotate(-9deg) scale(.25); opacity: 0; }
  16% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.22); opacity: 1; }
  30% { transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  72% { transform: translate(-50%, -54%) rotate(-7deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) rotate(-7deg) scale(1.06); opacity: 0; }
}
.points {
  position: absolute; font: italic 800 58px/1 var(--display); color: #fff; white-space: nowrap;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink), 0 0 18px var(--glow, #fff);
  animation: points .9s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.points small { font: 800 22px/1 var(--display); font-style: normal; color: var(--gold); -webkit-text-stroke: 0; margin-left: 6px; }
@keyframes points {
  0% { transform: translate(-50%, -50%) rotate(6deg) scale(.3); opacity: 0; }
  18% { transform: translate(-50%, -70%) rotate(5deg) scale(1.25); opacity: 1; }
  34% { transform: translate(-50%, -80%) rotate(5deg) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -190%) rotate(5deg) scale(.9); opacity: 0; }
}
.points.mini { font-size: 34px; }
.points i { font-style: normal; font-size: .62em; margin-left: 4px; -webkit-text-stroke: 0; filter: drop-shadow(0 0 6px var(--gold)); }
.points.fast { color: var(--gold); }
.banner { position: absolute; left: 50%; top: 44%; font: italic 800 64px/1 var(--display); color: var(--gold); white-space: nowrap; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink), 0 0 32px rgba(255,170,40,.95); animation: verdict 1.1s cubic-bezier(.2, 1.5, .35, 1) forwards; }
.banner small { display: block; text-align: center; font: 800 30px/1.1 var(--display); font-style: normal; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); }

#count { position: absolute; inset: 0; display: grid; place-items: center; font: italic 800 220px/1 var(--display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); pointer-events: none; }
#count.tick { animation: tick .8s ease-out; }
@keyframes tick { 0% { transform: scale(1.8) rotate(-6deg); opacity: 0; } 20% { transform: scale(1) rotate(-6deg); opacity: 1; } 100% { transform: scale(.9) rotate(-6deg); opacity: .25; } }
#hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); transform: translateX(-50%); width: min(92%, 420px); text-align: center; padding: 16px 18px; border-radius: 18px; background: rgba(10,10,14,.88); border: 1px solid rgba(255,255,255,.22); }
#hint b { display: block; font: 800 34px/1 var(--display); letter-spacing: .02em; }
#hint span { display: block; margin-top: 6px; font: 500 16px/1.35 var(--body); color: var(--muted); }
#hint .meter { margin: 12px auto 0; width: 70%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
#hint .meter i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 4px; }
#hint .actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#hint .actions:empty { display: none; }
#hint button { pointer-events: auto; }
#hint .ghost.primary { background: var(--orange); border-color: var(--orange); color: #180C00; }
#hint .info { margin-top: 10px; font: 500 12px/1.3 var(--body); color: #8E8A83; }
#hint .info:empty { display: none; }
/* Panneau remonté à mi-écran, réduit à l'essentiel : il laisse voir les pieds du joueur. */
#hint.mid { bottom: auto; top: 44%; padding: 10px 14px 12px; background: rgba(11,11,26,.78); }
#hint.mid span { font-size: 15px; }
#hint.mid .meter, #hint.mid .actions, #hint.mid .info { display: none; }
#cam.contain { object-fit: contain; }
#labo { position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; pointer-events: none; }
#labo span { font: 700 13px/1 var(--display); letter-spacing: .05em; padding: 5px 7px 4px; border-radius: 7px; background: rgba(10,10,14,.8); border: 1px solid rgba(255,255,255,.25); color: #E8E4DC; }
#labo span b { color: var(--gold); margin-left: 5px; }
#labo span.hot { border-color: var(--gold); background: rgba(255,212,90,.22); }

/* ---------- Écrans ---------- */
.screen { position: absolute; inset: 0; overflow-y: auto; background: rgba(12,12,16,.94); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px); }
#loading.screen, #summary.screen { background: rgba(12,12,16,.9); }
.home-inner, .sum-inner { width: 100%; max-width: 460px; }
.kicker { margin: 0; font: 700 13px/1 var(--body); letter-spacing: .18em; color: var(--orange); }
h1 { margin: 10px 0 12px; font: italic 800 clamp(58px, 17vw, 86px)/.88 var(--display); letter-spacing: .005em; }
.lede { margin: 0 0 22px; font: 500 17px/1.45 var(--body); color: var(--muted); }
.seg { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg legend { padding: 0; margin-bottom: 8px; font: 700 12px/1 var(--body); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 13px 14px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); font: 800 24px/1 var(--display); letter-spacing: .02em; }
.seg small { display: block; margin-top: 5px; font: 500 13px/1.2 var(--body); color: var(--muted); letter-spacing: 0; }
.seg input:checked + span { border-color: var(--gold); background: #201D12; }
.seg input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.seg.levels { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg.levels span { padding: 10px 2px 9px; text-align: center; font-size: 28px; }
.seg.levels small { margin-top: 4px; font-size: 11px; }
.modes { display: grid; gap: 10px; margin-top: 6px; }
.mode { text-align: left; padding: 18px 18px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; font-family: inherit; }
.mode b { display: block; font: italic 800 40px/1 var(--display); letter-spacing: .01em; }
.mode span { display: block; margin-top: 5px; font: 500 15px/1.3 var(--body); color: var(--muted); }
.mode.primary { background: var(--orange); border-color: var(--orange); color: #180C00; }
.mode.primary span { color: #3A1E05; }
.mode:active { transform: scale(.98); }
.mode:focus-visible, .ghost:focus-visible, #quit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.what { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 500 15px/1.35 var(--body); color: var(--muted); }
.what b { font: 800 18px/1 var(--display); letter-spacing: .04em; color: var(--text); margin-right: 6px; }
.opts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.opts label { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--body); min-height: 44px; cursor: pointer; }
.opts input { width: 22px; height: 22px; accent-color: var(--orange); }
.fine { margin: 14px 0 0; font: 500 13px/1.4 var(--body); color: #8E8A83; }
.fine:empty { display: none; }
#cloud-status { color: var(--gold); }
.field { display: block; margin: 0 0 18px; }
.field span { display: block; margin-bottom: 8px; font: 700 15px/1.2 var(--body); }
.field small { font-weight: 500; color: var(--muted); }
.field input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font: 600 17px/1.2 var(--body); }
.field input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-color: var(--gold); }
.ghost { padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: 700 15px/1 var(--body); cursor: pointer; min-height: 44px; }
.load-inner { text-align: center; max-width: 340px; }
.load-inner p { font: 600 18px/1.4 var(--body); }
.spinner { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; border: 5px solid rgba(255,255,255,.18); border-top-color: var(--orange); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bilan : compact en haut, la caméra reste visible en bas pour viser les boutons ---------- */
#summary.screen { place-items: start center; overflow: hidden; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); background: linear-gradient(180deg, rgba(12,12,16,.96) 0, rgba(12,12,16,.93) 50%, rgba(12,12,16,.5) 64%, rgba(12,12,16,.18) 100%); }
.sum-score { margin: 4px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.sum-score b { font: italic 800 clamp(64px, 20vw, 96px)/.85 var(--display); color: var(--gold); text-shadow: 0 0 34px rgba(255,170,40,.5); }
.sum-score span { font: 700 16px/1 var(--body); color: var(--muted); }
.sum-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.sum-facts div { padding: 8px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.sum-facts b { display: block; font: 800 26px/1 var(--display); }
.sum-facts span { display: block; margin-top: 3px; font: 600 11px/1.2 var(--body); color: var(--muted); }
.sum-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sum-bars .row { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: baseline; }
.sum-bars .row span { font: 800 16px/1 var(--display); letter-spacing: .04em; }
.sum-bars .row em { font: 800 16px/1 var(--display); font-style: normal; color: var(--gold); }
.sum-bars .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #26262D; overflow: hidden; }
.sum-bars .track i { display: block; height: 100%; background: var(--orange); border-radius: 3px; }
.sum-bars .row.na em, .sum-bars .row.na span { color: #77736D; }
.sum-hint { margin: 14px 0 0; text-align: center; font: 700 15px/1.3 var(--body); color: #fff; }
.sum-touch { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; justify-content: center; gap: 8px; padding: 0 10px; }
.sum-touch .ghost { padding: 12px 13px; background: rgba(12,12,16,.7); }
/* Réglages : engrenage en haut au centre, à côté de la croix ; panneau en bas de l'écran (le joueur reste visible). */
#gear { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 22px); width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,10,14,.45); color: rgba(255,255,255,.8); display: grid; place-items: center; cursor: pointer; z-index: 6; padding: 0; }
#gear.pair { left: calc(50% + 28px); }
#gear.on { background: #fff; color: #0a0a0e; border-color: #fff; }
#gear:focus-visible, #set-close:focus-visible, #set-rows li:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#settings { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: min(92%, 380px); padding: 12px 12px 10px; border-radius: 18px; background: rgba(10,10,14,.9); border: 1px solid rgba(255,255,255,.18); z-index: 4; }
#settings header { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; }
#settings header b { font: 800 22px/1 var(--display); letter-spacing: .06em; }
#settings header span { flex: 1; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
#set-close { width: 40px; height: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
#set-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#set-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 14px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.07); cursor: pointer; }
#set-rows li.sel { border-color: var(--gold); background: rgba(255,190,60,.12); }
#set-rows li span { font: 600 15px/1.2 var(--body); color: rgba(255,255,255,.82); }
#set-rows li b { font: 800 21px/1.1 var(--display); letter-spacing: .03em; text-align: right; }
#settings p { margin: 8px 4px 0; font: 500 12px/1.35 var(--body); color: rgba(255,255,255,.62); }

#air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#copy-log { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  #stage.shake { animation: none; }
  .verdict, .points, .banner { animation-duration: .9s; animation-timing-function: linear; }
}

/* Tournage des démonstrations (lien ?tournage) : la liste des démos remplace les niveaux. */
/* Mode étape (l'appli envoie ici pour jouer une étape) : l'écran de départ ne garde que le titre et le bouton. */
.etape #home .home-inner > :not(.kicker):not(h1):not(.lede):not(.modes) { display: none !important; }
.etape #home .home-inner { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; }
/* Tant que le jeu n'a pas écrit le nom de l'étape, rien de l'écran de départ ne se montre. */
.etape:not(.pret) #home .home-inner { visibility: hidden; }
.shoot-only { display: none !important; }
.shooting .shoot-only { display: revert !important; }
.shooting .play-only { display: none !important; }
.shooting .seg.demos { display: block !important; }
.shooting ul.what.shoot-only { display: grid !important; margin: 0 0 18px; }
.lede.shoot-only b { color: var(--gold); }
#demo-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.seg.demos span { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; font-size: 19px; }
.seg.demos span b { flex: none; width: 26px; font: 800 24px/1 var(--display); color: var(--gold); text-align: right; }

/* ---------- Thème Costa Neon : la ville côtière au coucher du soleil ----------
   Main gauche lagon, main droite rose. Les grands mots lus de loin gardent la police étroite
   (plus gros à largeur égale) ; les chiffres et le décompte prennent la lettre d'enseigne. */
:root[data-theme="neon"] {
  --ink: #0B0B1A;
  --panel: #16142E;
  --line: #2E2A55;
  --text: #FFF4E6;
  --muted: #BDB8DA;
  --blue: #2EE6D6;
  --orange: #FF3D9A;
  --gold: #FFD166;
  --danger: #FF4D6D;
  --sign: "Bungee", "Barlow Condensed", system-ui, sans-serif;
  --sunset: linear-gradient(180deg, #FFD166, #FF8A3D 55%, #FF3D9A);
}
[data-theme="neon"] #dim { background: linear-gradient(180deg, rgba(11,11,26,.68) 0, rgba(24,10,44,.30) 16%, rgba(24,10,44,.30) 80%, rgba(11,11,26,.52) 100%); }
[data-theme="neon"] .score b { font: 400 31px/1 var(--sign); color: var(--gold); text-shadow: 0 3px 0 #8A1457; }
[data-theme="neon"] .combo b { font: 400 31px/1 var(--sign); color: var(--orange); }
[data-theme="neon"] .combo.fire b { color: var(--gold); font-style: normal; text-shadow: 0 3px 0 var(--orange), 0 0 18px rgba(255,61,154,.9); }
[data-theme="neon"] .score small { color: var(--blue); }
[data-theme="neon"] #count { font: 400 170px/1 var(--sign); color: var(--gold); text-shadow: 0 8px 0 var(--orange); }
[data-theme="neon"] #quit, [data-theme="neon"] #gear:not(.on) { background: rgba(11,11,26,.7); border-color: #5A5680; }
[data-theme="neon"] #announce span { background: rgba(22,20,46,.9); }
[data-theme="neon"] #announce span.L { color: #B9FFF7; }
[data-theme="neon"] #announce span.R { color: #FFC2E0; }
[data-theme="neon"] #announce span.now { background: var(--sunset); color: #1A0B1F; border-color: transparent; box-shadow: 0 4px 0 #8A1457, 0 0 18px rgba(255,61,154,.65); }
[data-theme="neon"] #announce span.now i { background: var(--ink); }
[data-theme="neon"] #announce span.now.L i { color: var(--blue); }
[data-theme="neon"] #announce span.now.R i { color: var(--orange); }
[data-theme="neon"] #announce span.now.D { background: var(--danger); color: #1A0B1F; }
[data-theme="neon"] #announce span.done { background: rgba(255,244,230,.94); color: var(--ink); border-color: #FFF4E6; box-shadow: none; }
[data-theme="neon"] #announce span.done i { background: var(--ink); color: #fff; }
/* Les mots du jeu, en lettres d'enseigne comme sur la maquette du combat : capitales épaisses, ombre dure
   rose ou turquoise, liseré sombre pour rester lisibles sur l'image de la caméra. Les tailles sont plus
   petites qu'avec la police étroite d'origine : ces lettres sont larges (ui.js règle la taille au mot). */
[data-theme="neon"] .verdict { font: 400 50px/1 var(--sign); letter-spacing: 0; color: var(--text); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--blue), 0 0 22px rgba(46,230,214,.55); }
[data-theme="neon"] .verdict.perfect { color: var(--gold); text-shadow: 0 5px 0 var(--orange), 0 0 30px rgba(255,61,154,.85); }
/* La série de PARFAIT : chaque palier chauffe un peu plus (or, puis rose, puis blanc brûlant). */
[data-theme="neon"] .verdict.perfect.r1 { text-shadow: 0 5px 0 var(--pink), 0 0 34px rgba(255,61,154,.95); }
[data-theme="neon"] .verdict.perfect.r2 { color: #FFE9A8; text-shadow: 0 6px 0 var(--pink), 0 0 40px rgba(255,138,61,1), 0 0 70px rgba(255,61,154,.7); }
[data-theme="neon"] .verdict.perfect.r3 { color: #FFF4E6; text-shadow: 0 6px 0 var(--pink), 0 0 44px rgba(255,209,102,1), 0 0 80px rgba(255,61,154,.85); }
[data-theme="neon"] .verdict.perfect.r4 { color: #fff; text-shadow: 0 6px 0 var(--orange), 0 0 50px #fff, 0 0 90px rgba(255,61,154,1); }
[data-theme="neon"] .verdict.meh { color: #D9D3EE; text-shadow: 0 4px 0 #4B4580; }
[data-theme="neon"] .verdict.bad { color: var(--danger); text-shadow: 0 4px 0 #5A0F2A, 0 0 24px rgba(255,77,109,.7); }
[data-theme="neon"] .points { font: 400 36px/1 var(--sign); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 3px 0 var(--orange), 0 0 16px var(--glow, #fff); }
[data-theme="neon"] .points.mini { font-size: 22px; }
[data-theme="neon"] .points small { font: 400 16px/1 var(--sign); }
[data-theme="neon"] .banner { font: 400 40px/1.05 var(--sign); -webkit-text-stroke: 2px var(--ink); }
[data-theme="neon"] .banner small { font: 400 18px/1.3 var(--sign); color: var(--text); text-shadow: 0 2px 0 var(--ink); }
[data-theme="neon"] #announce span { font: 400 calc(var(--chip) * .8)/1 var(--sign); letter-spacing: 0; padding: .42em .55em .36em; }
[data-theme="neon"] #drill { font: 400 12px/1 var(--sign); letter-spacing: .04em; }
[data-theme="neon"] #hint b { font: 400 22px/1.15 var(--sign); letter-spacing: 0; color: var(--gold); }
[data-theme="neon"] h1 { font: 400 clamp(36px, 11.5vw, 54px)/1 var(--sign); letter-spacing: 0; }
[data-theme="neon"] .mode b { font: 400 25px/1.05 var(--sign); letter-spacing: 0; }
[data-theme="neon"] .seg span { font: 400 16px/1.1 var(--sign); letter-spacing: 0; }
[data-theme="neon"] .seg small { font: 500 13px/1.2 var(--body); }
[data-theme="neon"] #settings header b { font: 400 17px/1 var(--sign); letter-spacing: .02em; color: var(--gold); }
[data-theme="neon"] .sum-score b { font: 400 clamp(46px, 15vw, 70px)/.95 var(--sign); text-shadow: 0 5px 0 var(--orange), 0 0 30px rgba(255,61,154,.5); }
[data-theme="neon"] .sum-facts b { font: 400 20px/1 var(--sign); color: var(--gold); }
[data-theme="neon"] .sum-bars .row span, [data-theme="neon"] .sum-bars .row em { font: 400 11px/1.1 var(--sign); letter-spacing: 0; }
[data-theme="neon"] .sum-bars .track { background: #241F44; }
[data-theme="neon"] .kicker.record { font: 400 15px/1 var(--sign); letter-spacing: .04em; }
[data-theme="neon"] .verdict.dodge { color: var(--text); text-shadow: 0 5px 0 var(--orange), 0 0 30px rgba(255,61,154,.85); }
[data-theme="neon"] .verdict.name.L { color: #B9FFF7; text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(46,230,214,.9); }
[data-theme="neon"] .verdict.name.R { color: #FFC2E0; text-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255,61,154,.9); }
[data-theme="neon"] .banner { text-shadow: 0 5px 0 var(--orange), 0 0 32px rgba(255,61,154,.9); }
[data-theme="neon"] .screen { background: rgba(11,11,26,.95); }
[data-theme="neon"] #loading.screen, [data-theme="neon"] #summary.screen { background: rgba(11,11,26,.92); }
[data-theme="neon"] h1 { color: var(--gold); text-shadow: 0 5px 0 var(--orange); }
[data-theme="neon"] .kicker { color: var(--blue); }
/* Record battu : le titre du bilan passe à l'or. */
.kicker.record, [data-theme="neon"] .kicker.record { color: var(--gold); font-size: 17px; text-shadow: 0 0 14px rgba(255,190,60,.7); }
[data-theme="neon"] .seg input:checked + span { background: #241A2E; }
[data-theme="neon"] .mode.primary { background: var(--sunset); border-color: transparent; color: #1A0B1F; box-shadow: 0 5px 0 #8A1457; }
[data-theme="neon"] .mode.primary span { color: #3A1230; }
[data-theme="neon"] #hint { background: rgba(11,11,26,.9); border-color: #5A5680; }
[data-theme="neon"] #hint .ghost.primary { background: var(--gold); border-color: var(--gold); color: #1A0B1F; }
[data-theme="neon"] #settings { background: rgba(16,14,34,.96); border-color: #5A5680; }

/* ---------- Bombardement ----------
   Lu à deux mètres cinquante : la famille demandée, le compteur, la cadence. Rien d'autre.
   Le haut de l'écran porte la consigne, le bas le compte et la jauge : le visage et les bras restent libres. */
#blitz { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 124px) 16px calc(env(safe-area-inset-bottom, 0px) + 26px); box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .25s ease-out; }
/* Pas de combo en bombardement : le multiplicateur est en bas, avec la cadence. */
#stage:has(#blitz:not([hidden])) #combo { visibility: hidden; }
/* Défi en série : le temps est un trait tout en haut, le compte prend la place du score, dans le coin,
   là où il ne gêne ni le visage ni les poings. Il saute à chaque geste et rougit quand il repart de zéro. */
#defi { position: absolute; inset: 0; pointer-events: none; }
.defi-time { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: rgba(255,255,255,.18); }
.defi-time i { display: block; height: 100%; background: var(--gold); transform-origin: left center; }
.defi-count { position: absolute; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 31px); margin: 0; font: 400 20px/1 var(--sign, var(--display)); color: var(--text); text-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.defi-count b { display: inline-block; font: 400 44px/1 var(--sign, var(--display)); color: var(--gold); text-shadow: 0 4px 0 #8A1457; margin-right: 6px; transform-origin: left center; }
/* Pendant un défi, le score et le combo n'ont rien à dire : le compte du défi prend la place du score. */
#hud.defi #score, #hud.defi .combo { visibility: hidden; }
.defi-count.pop b { animation: pop .16s ease-out; }
.defi-count.faute b { color: var(--danger); animation: nudge .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .defi-count.pop b, .defi-count.faute b { animation: none; } }
/* Pendant un rapid fire, la ligne des coups à donner n'a plus rien à dire : elle ne traîne pas sous la consigne. */
#stage:has(#blitz:not([hidden])) #lane { visibility: hidden; }
/* L'annonce d'un rapid fire se lit de loin : la consigne est écrite gros. */
#blitz[data-phase="ready"] .blitz-rate span { font-size: 19px; font-weight: 700; line-height: 1.3; }
/* Pendant la frappe, rien sur le visage ni sur les poings : le titre et sa consigne s'effacent (ils ont
   été lus pendant l'annonce, et l'en-tête dit déjà « rapid fire »), le temps devient un trait tout en
   haut de l'écran, et il ne reste en bas que le compteur, les cinq crans et la cadence. Dans le mode
   d'essai à trois familles, le nom de la famille reste, en petit. */
#blitz[data-phase="go"] .blitz-step { display: none; }
#blitz[data-phase="go"][data-family="any"] .blitz-family { display: none; }
#blitz[data-phase="go"] .blitz-family { font-size: 20px !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; padding: 5px 12px; border-radius: 10px; background: rgba(11,11,26,.78); }
#blitz[data-phase="go"] .blitz-time { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 7px; border-radius: 0; background: rgba(255,255,255,.18); }
#blitz[data-phase="go"] .blitz-count { font-size: 104px !important; opacity: .92; margin-bottom: 0; }
#blitz[data-phase="go"] .blitz-gauge { width: 62%; }
#blitz[data-phase="go"] .blitz-gauge i { height: 10px; }
#blitz[data-phase="go"] .blitz-rate { padding: 5px 12px; gap: 8px; }
#blitz[data-phase="go"] .blitz-rate b { font-size: 22px !important; }
#blitz[data-phase="go"] .blitz-rate span { font-size: 14px; }
#blitz[data-mult="2"] { box-shadow: inset 0 0 30px 2px color-mix(in srgb, var(--blue) 55%, transparent); }
#blitz[data-mult="3"] { box-shadow: inset 0 0 38px 4px color-mix(in srgb, var(--gold) 60%, transparent); }
#blitz[data-mult="4"] { box-shadow: inset 0 0 46px 6px color-mix(in srgb, var(--orange) 65%, transparent); }
#blitz[data-mult="5"] { box-shadow: inset 0 0 58px 10px color-mix(in srgb, var(--orange) 85%, transparent); }
.blitz-top, .blitz-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 420px); text-align: center; }
.blitz-step { margin: 0; font: 700 13px/1 var(--body); letter-spacing: .16em; color: var(--blue); text-shadow: 0 1px 3px var(--ink); }
.blitz-family { margin: 0; font: 800 46px/1 var(--display); letter-spacing: .02em; color: var(--text); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.blitz-family.nudge { animation: nudge .35s ease-out; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-9px); color: var(--danger); } 60% { transform: translateX(7px); color: var(--danger); } }
.blitz-time { width: 78%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.blitz-time i { display: block; height: 100%; background: var(--gold); transform-origin: left center; transform: scaleX(0); }
.blitz-count { display: block; margin-bottom: 4px; font: italic 800 150px/0.95 var(--display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); font-variant-numeric: tabular-nums; }
.blitz-count.pop { animation: pop .16s ease-out; }
@keyframes pop { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }
#blitz[data-phase="ready"] .blitz-count, #blitz[data-phase="rest"] .blitz-count { opacity: .55; }
.blitz-gauge { display: flex; gap: 6px; width: 86%; }
.blitz-gauge i { flex: 1; height: 16px; border-radius: 5px; background: rgba(10,10,14,.7); border: 1.5px solid rgba(255,255,255,.28); }
.blitz-gauge i.on:nth-child(1), .blitz-gauge i.on:nth-child(2) { background: var(--blue); border-color: var(--blue); }
.blitz-gauge i.on:nth-child(3) { background: var(--gold); border-color: var(--gold); }
.blitz-gauge i.on:nth-child(4), .blitz-gauge i.on:nth-child(5) { background: var(--orange); border-color: var(--orange); }
.blitz-rate { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: rgba(10,10,14,.82); }
.blitz-rate b { font: 800 34px/1 var(--display); color: var(--gold); }
.blitz-rate b:empty { display: none; }
.blitz-rate span { font: 600 16px/1.25 var(--body); color: var(--text); }
.sum-note { margin: 0; font: 600 15px/1.35 var(--body); color: var(--muted); text-align: center; }
.sum-note:empty { display: none; }
[data-theme="neon"] .blitz-family { font: 400 34px/1.05 var(--sign); color: var(--gold); text-shadow: 0 4px 0 var(--orange); -webkit-text-stroke: 0; }
[data-theme="neon"] .blitz-count { font: 400 132px/0.95 var(--sign); color: var(--text); text-shadow: 0 7px 0 var(--orange), 0 0 26px rgba(255,61,154,.55); -webkit-text-stroke: 0; }
[data-theme="neon"] .blitz-rate { background: rgba(11,11,26,.86); border: 1px solid var(--line); }
[data-theme="neon"] .blitz-rate b { font: 400 28px/1 var(--sign); }
[data-theme="neon"] .blitz-gauge i { background: rgba(11,11,26,.72); border-color: #5A5680; }
@media (prefers-reduced-motion: reduce) { .blitz-count.pop, .blitz-family.nudge { animation: none; } #blitz { transition: none; } }

/* ---------- Bilan d'une étape (mode étape) ----------
   Trois bandes : le résultat en haut, les deux boutons à tenir avec le poing au milieu (dessinés par
   air.js, à mi-hauteur : c'est là que les poings arrivent), le détail en bas. Tout est centré. */
#bilan.screen { display: grid; grid-template-rows: auto minmax(150px, 1fr) auto; place-items: stretch; padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px calc(env(safe-area-inset-bottom, 0px) + 16px); background: radial-gradient(closest-side at 50% 18%, rgba(27,24,64,.95), rgba(11,11,26,.93)); overflow: hidden; }
#bilan.screen[hidden] { display: none; }
#bilan.record { background: radial-gradient(closest-side at 50% 20%, rgba(74,21,64,.95), rgba(11,11,26,.93)); }
.bilan-haut { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bilan-titre { margin: 0; font: 700 12px/1.2 var(--body); letter-spacing: .2em; color: var(--blue); }
.bilan-titre.record { font: 400 24px/1.05 var(--sign); letter-spacing: 0; color: var(--gold); text-shadow: 0 4px 0 var(--orange), 0 0 26px rgba(255,61,154,.7); }
.bilan-etoiles { display: flex; align-items: flex-end; gap: 10px; }
.bilan-etoiles i { width: 46px; height: 46px; background: #2E2A55; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 98%, 50% 77%, 19% 98%, 29% 61%, 0 38%, 37% 35%); }
.bilan-etoiles i:nth-child(2) { width: 58px; height: 58px; margin-bottom: 8px; }
.bilan-etoiles i.on { background: var(--gold); filter: drop-shadow(0 0 10px rgba(255,61,154,.7)); }
.bilan-score { display: flex; flex-direction: column; align-items: center; }
.bilan-score b { font: 400 clamp(58px, 18vw, 76px)/1 "Anton", var(--display); color: var(--gold); text-shadow: 1px 1px 0 #FF3D9A, 2px 3px 0 #B81F6E, 3px 5px 0 #5E0F3A, 0 18px 34px rgba(255,61,154,.4); }
.bilan-score span { margin-top: 6px; font: 600 13px/1 var(--body); letter-spacing: .14em; color: var(--muted); }
.bilan-record { width: 100%; max-width: 360px; display: grid; gap: 6px; }
.bilan-record p { margin: 0; font: 600 13px/1.3 var(--body); letter-spacing: .04em; color: var(--text); }
#bilan.record .bilan-record p { justify-self: center; padding: 6px 14px; border-radius: 99px; background: rgba(46,230,214,.14); border: 1.5px solid var(--blue); color: #B9FFF7; }
.bilan-record .track, .bilan-barres .track { height: 7px; border-radius: 4px; background: #241F44; overflow: hidden; }
.bilan-record .track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.bilan-geste { margin: 0; align-self: center; justify-self: center; max-width: 34%; text-align: center; font: 600 13px/1.35 var(--body); color: var(--muted); }
.bilan-bas { display: grid; gap: 10px; width: 100%; max-width: 420px; justify-self: center; }
.bilan-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.bilan-faits div { padding: 9px 6px; border-radius: 14px; background: #16142E; border: 1px solid var(--line); text-align: center; }
.bilan-faits b { display: block; font: 400 24px/1.1 "Anton", var(--display); }
.bilan-faits span { display: block; margin-top: 2px; font: 600 11px/1.2 var(--body); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.bilan-barres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 11px 14px; border-radius: 16px; background: #16142E; border: 1px solid var(--line); }
.bilan-barres p { margin: 0 0 5px; display: flex; justify-content: space-between; align-items: baseline; }
.bilan-barres span { font: 600 11px/1 var(--body); letter-spacing: .1em; color: #E4DFF5; }
.bilan-barres em { font: 400 13px/1 var(--sign); font-style: normal; }
.bilan-barres .track i { display: block; height: 100%; border-radius: 4px; }
.bilan-barres .na { opacity: .45; }
.bilan-rafale { margin: 0; padding: 8px 14px; border-radius: 14px; background: rgba(22,20,46,.9); border: 1.5px solid var(--gold); font: 500 13px/1.35 var(--body); color: var(--text); }
.bilan-alloy { display: flex; align-items: center; gap: 12px; }
.bilan-alloy img { flex: none; border-radius: 50%; border: 2px solid var(--orange); object-fit: cover; }
.bilan-alloy p { margin: 0; font: 500 14px/1.4 var(--body); color: #E4DFF5; }