/* GYRA — hommage à Gyruss (Konami). Habillage néon arcade, autonome. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: #02030a; overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; color: #cfe6ff;
  user-select: none; -webkit-user-select: none; touch-action: none; }

#wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 30%, #0a1030 0%, #02030a 70%); }

#stage { position: relative; width: min(100vw, 133.33vh); aspect-ratio: 1000 / 750;
  box-shadow: 0 0 60px rgba(60,120,255,.25), 0 0 0 2px #0a1a3a; overflow: hidden; background: #01020a; }

canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* (Anciens boutons tactiles bas-gauche remplacés par le stick virtuel + croix de boutons — voir plus bas.) */
/* Sur tactile : pas de raccourcis clavier à afficher. */
@media (pointer: coarse) { #intro-keys { display: none; } }
body.touch #intro-keys { display: none; }

/* ===================== Commandes TACTILES (tablette / iPad) : stick virtuel + boutons ===================== */
/* Overlay géré par game.js (syncTouchUI) : visible seulement en jeu (body.tc-live) sur tablette. */
#tcontrols { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 5;
  /* tailles responsives (prennent en compte la taille de l'écran) */
  --tc-size: clamp(58px, 9.4vmin, 104px);   /* diamètre des boutons ronds */
  --tc-gap: clamp(6px, 1.4vmin, 16px);      /* espace entre boutons de la croix */
  --tc-edge: clamp(14px, 3.2vmin, 46px);    /* marge par rapport au bord de l'écran */
  --tc-bottom: clamp(18px, 4.5vh, 60px); }
body.tc-live #tcontrols { display: block; }

/* --- Stick virtuel (rotation absolue) --- */
#tc-stick { position: absolute; pointer-events: auto; bottom: var(--tc-bottom);
  width: clamp(118px, 25vmin, 236px); aspect-ratio: 1; touch-action: none;
  right: var(--tc-edge); left: auto; -webkit-tap-highlight-color: transparent; }
body.tc-left #tc-stick { left: var(--tc-edge); right: auto; }
.tc-base { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 50% 45%, rgba(40,72,132,.20), rgba(10,20,45,.32));
  box-shadow: inset 0 0 22px rgba(90,150,255,.22); backdrop-filter: blur(2px); }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; border-radius: 50%;
  transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 40% 34%, rgba(160,205,255,.6), rgba(44,96,186,.55));
  box-shadow: 0 0 18px rgba(120,180,255,.55); }

/* --- Croix de 4 boutons d'action (+ bouton FIRE conditionnel) --- */
#tc-pad { position: absolute; pointer-events: none; bottom: var(--tc-bottom);
  width: calc(var(--tc-size) * 3 + var(--tc-gap) * 2); height: calc(var(--tc-size) * 3 + var(--tc-gap) * 2);
  left: var(--tc-edge); right: auto; }
body.tc-left #tc-pad { right: var(--tc-edge); left: auto; }
/* auto-tir OFF + boutons à droite : on décale la croix d'un cran pour loger le bouton FIRE à sa droite */
body.tc-left.tc-afoff #tc-pad { right: calc(var(--tc-edge) + var(--tc-size) + var(--tc-gap)); }

.tc-abtn { position: absolute; pointer-events: auto; width: var(--tc-size); height: var(--tc-size);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(20,40,90,.26);
  color: #eaffff; font-size: calc(var(--tc-size) * .42); font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px);
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; }
.tc-abtn.on { background: rgba(96,158,255,.5); transform: scale(.93); }
.tc-abtn.tc-empty { opacity: .32; }
.tc-up    { top: 0;    left: calc(var(--tc-size) + var(--tc-gap)); }
.tc-down  { bottom: 0; left: calc(var(--tc-size) + var(--tc-gap)); }
.tc-left  { top: calc(var(--tc-size) + var(--tc-gap)); left: 0; }
.tc-right { top: calc(var(--tc-size) + var(--tc-gap)); left: calc((var(--tc-size) + var(--tc-gap)) * 2); }
/* bouton FIRE : à DROITE du bouton Bombe (bouton droit de la croix) ; visible seulement si auto-tir OFF */
.tc-fire { display: none; top: calc(var(--tc-size) + var(--tc-gap)); left: calc((var(--tc-size) + var(--tc-gap)) * 3);
  border-color: rgba(255,186,96,.9); background: rgba(120,60,20,.30); }
body.tc-afoff .tc-fire { display: flex; }

/* --- 2 boutons rectangulaires centrés en bas : AUTO-FIRE (start/stop) & PAUSE --- */
#tc-center { position: absolute; pointer-events: none; left: 50%; transform: translateX(-50%);
  bottom: clamp(8px, 2.2vh, 24px); display: flex; gap: clamp(8px, 1.6vmin, 18px); }
.tc-rect { pointer-events: auto; min-width: clamp(52px, 10vmin, 96px); height: clamp(22px, 3.8vmin, 34px);
  padding: 0 clamp(5px, 1.1vmin, 11px); border-radius: 8px; border: 2px solid rgba(255,255,255,.8);
  background: rgba(20,40,90,.26); color: #eaffff; font-size: clamp(9px, 1.5vmin, 12px); font-weight: 800;
  letter-spacing: .03em; backdrop-filter: blur(3px); touch-action: none;
  -webkit-tap-highlight-color: transparent; user-select: none; }
.tc-rect:active { transform: scale(.96); }
.tc-rect.on { background: rgba(122,192,255,.7); border-color: #bfe0ff; color: #04101f; }   /* fond bleu clair quand activé */

/* Manette branchée (body.gp-on) : masque stick + croix + FIRE ; on GARDE AUTO-FIRE / PAUSE. */
body.gp-on #tc-stick, body.gp-on #tc-pad { display: none; }

/* ---- Écran CONTRÔLES TACTILES de la modale (config) ---- */
.tc-cfg { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 640px; margin: 0 auto; }
.tc-cfg-block { display: flex; flex-direction: column; gap: 8px; }
.tc-side-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-side-btn { flex: 1 1 220px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(120,180,255,.4); background: rgba(20,40,90,.35);
  color: #dfefff; font-weight: 700; font-size: 14px; }
.tc-side-btn.sel { border-color: #bfe0ff; background: rgba(122,192,255,.5); color: #04101f; }
.tc-fn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.tc-fn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(20,40,90,.28); border: 1px solid rgba(120,180,255,.25); border-radius: 8px; padding: 7px 10px; }
.tc-fn-row span { font-weight: 700; font-size: 13px; color: #cfe6ff; }
.tc-fn { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid rgba(120,180,255,.4); background: #0b1830; color: #eaffff; }
.tc-cfg-note { font-size: 12px; color: #9fbbe0; text-align: center; opacity: .9; }
/* petit aperçu (stick + croix) */
.tc-preview { position: relative; height: 92px; border-radius: 10px; background: rgba(10,20,45,.4);
  border: 1px solid rgba(120,180,255,.2); display: flex; align-items: center; justify-content: space-between; padding: 0 26px;
  flex-direction: row-reverse; }        /* défaut : stick à DROITE (side='right') */
body.tc-left .tc-preview { flex-direction: row; }   /* stick à GAUCHE (side='left') */
.tc-pv-stick { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
  background: radial-gradient(circle, rgba(40,72,132,.3), rgba(10,20,45,.3)); position: relative; }
.tc-pv-stick span { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; border-radius: 50%;
  transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.85); background: rgba(60,120,210,.6); }
.tc-pv-cross { position: relative; width: 96px; height: 96px; }
.tc-pv-b { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75);
  background: rgba(20,40,90,.4); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.tc-pv-up { top: 0; left: 33px; } .tc-pv-down { bottom: 0; left: 33px; }
.tc-pv-left { top: 33px; left: 0; } .tc-pv-right { top: 33px; right: 0; }

/* ===================== Écran-titre / menu ===================== */
#intro { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 1.1vh; cursor: pointer;
  padding: 2vh 2vw 13vh;                /* logo remonté vers le haut ; bas réservé au copyright (3 lignes) */
  background: radial-gradient(120% 120% at 50% 40%, rgba(6,10,30,.35), rgba(2,3,10,.75)); }
#intro.show { display: flex; }
#intro.loading { justify-content: center; }   /* écran de préchargement : icône + jauge centrées */

/* Logo-titre : PNG détouré (étoiles visibles derrière) + HALO néon + OMBRE PORTÉE
   sous le logo. Révélation « pièce de monnaie » à l'entrée (voir plus bas). */
#intro-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center;
  margin-bottom: .4vh; perspective: 1100px; }
#intro-logo-wrap::before {          /* halo néon assorti aux couleurs du logo, derrière l'image */
  content: ''; position: absolute; inset: -24% -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 62% at 50% 48%, rgba(70,150,255,.55), rgba(70,150,255,0) 70%),
    radial-gradient(34% 52% at 28% 56%, rgba(255,125,40,.42), rgba(255,125,40,0) 72%),
    radial-gradient(34% 52% at 74% 52%, rgba(210,60,255,.42), rgba(210,60,255,0) 72%),
    radial-gradient(30% 44% at 50% 62%, rgba(255,60,90,.30), rgba(255,60,90,0) 72%);
  filter: blur(26px); animation: haloPulse 4.5s ease-in-out infinite; }
#intro-logo { display: block; width: min(56vw, 560px, 58vh); height: auto; transform-origin: center; cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(80,150,255,.55)) drop-shadow(0 0 30px rgba(255,130,40,.32))
          drop-shadow(0 18px 16px rgba(0,0,0,.6)); }   /* dernière = ombre sous le logo */
/* Logos masqués tant qu'ils ne sont pas entièrement chargés+décodés (anti « petits bouts ») */
#intro-logo, #go-logo { visibility: hidden; }
#intro-logo.ready, #go-logo.ready { visibility: visible; }
@keyframes haloPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: .95; transform: scale(1.06); } }

/* Point brillant + éclair horizontal (révélation) */
#intro-flash { position: absolute; left: 50%; top: 50%; width: min(66vw, 660px); height: 5px;
  border-radius: 3px; transform: translate(-50%,-50%) scaleX(0); transform-origin: center; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(190,235,255,.9) 42%, #ffffff 50%, rgba(190,235,255,.9) 58%, transparent);
  box-shadow: 0 0 26px 5px rgba(180,230,255,.9); pointer-events: none; z-index: 2; }

/* RÉVÉLATION « pièce de monnaie » (classe .reveal, posée une fois depuis le preload) :
   point → éclair horizontal → dépliage de la tranche (ligne fine) vers la face, puis
   fade-in RAPIDE des autres éléments. */
#intro.reveal #intro-flash { animation: introFlash .6s ease-out both; }
#intro.reveal #intro-logo  { animation: coinFlip .78s cubic-bezier(.2,.85,.25,1) .32s both; }
#intro.reveal #intro-sub,
#intro.reveal #intro-menu,
#intro.reveal #intro-copyright,
#intro.reveal .nav-arrow { animation: introFadeIn .45s ease .95s both; }
@keyframes introFlash {
  0%   { transform: translate(-50%,-50%) scaleX(0);    opacity: 0; }
  16%  { transform: translate(-50%,-50%) scaleX(.02);  opacity: 1; }   /* point brillant */
  55%  { transform: translate(-50%,-50%) scaleX(1);    opacity: 1; }   /* éclair horizontal */
  100% { transform: translate(-50%,-50%) scaleX(1.05); opacity: 0; } }
@keyframes coinFlip {
  0%   { transform: rotateX(90deg); opacity: 0; }                      /* tranche (ligne fine) */
  35%  { opacity: 1; }
  100% { transform: rotateX(0deg);  opacity: 1; } }                    /* face entière */
@keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Icône de l'app pendant le préchargement (on masque le logo du jeu à ce moment) */
/* Image à fond TRANSPARENT : pas de box-shadow (qui encadrerait le rectangle) ; le halo suit la
   forme réelle via drop-shadow (respecte l'alpha du PNG). */
#preload-icon { display: block; width: min(46vw, 300px); height: auto; margin-bottom: 3vh;
  animation: preloadPulse 2.2s ease-in-out infinite; }
@keyframes preloadPulse {
  0%,100% { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 20px rgba(80,140,255,.5)); }
  50%     { transform: scale(1.04); filter: brightness(1.12) drop-shadow(0 0 32px rgba(120,170,255,.75)); } }
#intro.loading #intro-logo-wrap { display: none; }

/* Flèches de navigation entre écrans (intro ⇄ leaderboard ⇄ …) */
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; display: none;
  width: 48px; height: 92px; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(120,180,255,.3); background: rgba(20,40,90,.42); backdrop-filter: blur(3px);
  color: #cfe6ff; font-size: 42px; line-height: 1; }
#intro.menu .nav-arrow { display: block; }
.nav-arrow:active { background: rgba(60,120,255,.55); }
#nav-left { left: 14px; } #nav-right { right: 14px; }

/* Sous-titre de mission : VIVANT — dégradé multicolore qui balaie, halo pulsé,
   léger balancement. Couleurs assorties au logo (cyan / or / magenta). */
/* Largeur réduite → le texte de mission se répartit sur ~3 lignes. */
#intro-mission { max-width: min(74vw, 650px); text-align: center; line-height: 1.4;
  font-size: clamp(12.5px, 1.9vw, 19px); font-weight: 800; letter-spacing: .015em;
  background-image: linear-gradient(100deg,
    #6fe0ff 0%, #ffffff 16%, #ffd54a 34%, #ff7ad0 52%, #a98cff 68%, #6fe0ff 86%, #ffffff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(120,180,255,.45)) drop-shadow(0 0 20px rgba(255,120,210,.28));
  animation: missionSweep 5.5s linear infinite, missionPulse 2.6s ease-in-out infinite; }
@keyframes missionSweep { from { background-position: 0% 0; } to { background-position: -220% 0; } }
@keyframes missionPulse {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(120,180,255,.4)) drop-shadow(0 0 20px rgba(255,120,210,.25)); }
  50%     { transform: scale(1.035); filter: drop-shadow(0 0 16px rgba(150,210,255,.75)) drop-shadow(0 0 30px rgba(255,140,220,.5)); } }

#intro-copyright { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(96vw, 1020px); text-align: center; line-height: 1.55;
  font-size: clamp(8px, 1.05vw, 11px); color: #6f86b0; letter-spacing: .01em; }
#intro-copyright b { color: #cfe0ff; font-weight: 800; letter-spacing: .02em; }
#intro-copyright i { color: #9fb0d8; font-style: italic; }
#intro.loading #intro-copyright { display: none; }

/* Version / build : visible UNIQUEMENT sur l'écran de préchargement. MÊME taille/couleur/interligne
   que le copyright d'intro (#intro-copyright). */
#preload-ver { display: none; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(96vw, 1020px); text-align: center; line-height: 1.55;
  font-size: clamp(8px, 1.05vw, 11px); color: #6f86b0; letter-spacing: .01em; }
#intro.loading #preload-ver { display: block; }
/* Ceinture + bretelles : JAMAIS visible hors préchargement (intro / leaderboard / codex / jeu). */
#intro:not(.loading) #preload-ver { display: none !important; }
#intro.won #intro-mission { display: none; }

#intro-sub { font-size: clamp(14px, 2.4vw, 22px); font-weight: 700; color: #ff5a5a;
  text-shadow: 0 0 10px rgba(255,80,80,.6); min-height: 0; }
/* Remonte le bloc menu (mission, START…) vers le logo : mission ~2 lignes plus haut. */
#intro.menu #intro-menu { margin-top: -3.5vh; }

#intro-start { font-family: 'Arial Black', Impact, sans-serif; font-weight: 900;
  font-size: clamp(26px, 5vw, 46px); letter-spacing: .28em; color: #eaffff; padding-left: .28em;
  text-shadow: 0 0 10px #6cf, 0 0 24px #39f; animation: blink .5s steps(1) infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

#af-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 8px 16px; border: 1px solid rgba(120,255,180,.25); border-radius: 999px;
  background: rgba(10,30,20,.4); }
.af-label { font-weight: 800; letter-spacing: .12em; font-size: clamp(12px,1.8vw,16px); color: #9fffc0; }
.af-switch { position: relative; display: inline-block; }
#af-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.af-track { display: block; width: 56px; height: 28px; border-radius: 999px;
  background: #33405a; box-shadow: inset 0 0 6px rgba(0,0,0,.5); transition: background .18s; }
.af-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #cfe6ff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: transform .18s, background .18s; }
#af-input:checked + .af-track { background: #1f8a4c; box-shadow: inset 0 0 8px rgba(80,255,150,.4); }
#af-input:checked + .af-track .af-knob { transform: translateX(28px); background: #9fffc0; }
.af-state { font-weight: 900; font-size: clamp(13px,1.9vw,17px); color: #9fffc0; width: 3ch; }

#intro-hint { font-weight: 700; font-size: clamp(12px,1.9vw,16px); color: #8fb0dd; letter-spacing: .06em; }
#intro-keys { font-size: clamp(10px,1.5vw,13px); color: #5f7aa8; }
#intro-touch { display: none; font-weight: 700; font-size: clamp(11px,1.7vw,15px); color: #9fffc0; letter-spacing: .03em; }
@media (pointer: coarse) { #intro-touch { display: block; } }
body.touch #intro-touch { display: block; }

/* Chargement audio */
#intro-loading, #intro-menu { display: none; flex-direction: column; align-items: center; gap: 1.6vh; }
#intro.loading #intro-loading { display: flex; }
#intro.menu #intro-menu { display: flex; }
#load-bar { width: min(52vw, 420px); height: 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(120,180,255,.25); overflow: hidden; }
#load-fill { display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #ffd400, #ff9d00); box-shadow: 0 0 14px rgba(255,190,0,.6); transition: width .12s linear; }
#load-text { font-weight: 800; letter-spacing: .14em; font-size: clamp(13px,2vw,18px); color: #ffd86a; }
#load-text.ready { color: #eaffff; animation: blink .5s steps(1) infinite; }

#mute { position: absolute; top: 10px; right: 12px; pointer-events: auto; width: 40px; height: 40px;
  border-radius: 10px; border: 2px solid rgba(120,180,255,.3); background: rgba(10,20,50,.5);
  color: #bfe0ff; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0; }
#mute:active { transform: scale(.94); }
#mute.muted { border-color: rgba(255,140,140,.45); }   /* son totalement coupé : liseré rouge discret */
#mute.muted svg { opacity: .5; }
/* Bouton plein écran / fenêtre (à gauche du haut-parleur) */
#fs { position: absolute; top: 10px; right: 60px; pointer-events: auto; width: 40px; height: 40px;
  border-radius: 10px; border: 2px solid rgba(120,180,255,.3); background: rgba(10,20,50,.5);
  color: #bfe0ff; font-size: 20px; line-height: 1; cursor: pointer; z-index: 5; }
#fs:active { transform: scale(.94); }

/* Menu de réglages audio (ouvert par le bouton haut-parleur) */
#audio-menu { position: absolute; top: 58px; right: 12px; z-index: 6; width: 212px;
  background: rgba(8,16,38,.96); border: 2px solid rgba(120,180,255,.35); border-radius: 12px;
  padding: 11px 13px; box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 18px rgba(80,160,255,.25);
  pointer-events: auto; font-family: 'Trebuchet MS', sans-serif; color: #cfe0ff;
  display: flex; flex-direction: column; gap: 10px; }
#audio-menu[hidden] { display: none; }
.am-title { font-weight: 900; letter-spacing: .2em; font-size: 12px; color: #ffd54a; text-align: center;
  text-shadow: 0 0 10px rgba(255,200,60,.5); margin-bottom: 1px; }
.am-title.am-sub { color: #6fe0ff; text-shadow: 0 0 10px rgba(80,220,255,.5); margin-top: 10px;
  padding-top: 8px; border-top: 1px solid rgba(120,180,255,.2); }

/* ===== Overlay CRT : scanlines (écran cathodique) ===== */
#scanlines { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: .6;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.6) 0, rgba(0,0,0,.6) 1px, rgba(0,0,0,0) 1.5px, rgba(0,0,0,0) 3px),
    radial-gradient(ellipse 132% 122% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%); }
#scanlines[hidden] { display: none; }
.am-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; margin: 0; }
.am-row > span:first-child { white-space: nowrap; }
.am-row input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: #6fe0ff; height: 4px; cursor: pointer; }
/* interrupteur ON/OFF */
.am-toggle input { display: none; }
.am-sw { position: relative; width: 38px; height: 20px; border-radius: 999px; flex: 0 0 auto;
  background: rgba(120,140,180,.35); transition: background .15s; }
.am-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #eaf4ff; transition: transform .15s; }
.am-toggle input:checked + .am-sw { background: linear-gradient(90deg, #39d67a, #6fe0ff); }
.am-toggle input:checked + .am-sw::after { transform: translateX(18px); }
/* Sélecteur de langue EN / FR */
.am-row.am-lang { justify-content: center; }
.am-langsw { display: inline-flex; gap: 0; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(120,140,180,.45); }
.am-langbtn { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  padding: 5px 16px; font: 900 12px/1 'Trebuchet MS', sans-serif; letter-spacing: .12em;
  color: #b8c8e0; background: rgba(120,140,180,.14); transition: background .15s, color .15s; }
.am-langbtn + .am-langbtn { border-left: 1px solid rgba(120,140,180,.35); }
.am-langbtn:hover { color: #eaf4ff; }
.am-langbtn.on { color: #04121e; background: linear-gradient(90deg, #39d67a, #6fe0ff); text-shadow: none; }
/* Vote (étoiles 1-5) */
.am-vote { text-align: center; }
.am-stars { display: flex; justify-content: center; gap: 4px; }
.am-star { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 2px 3px; color: rgba(160,180,210,.35);
  transition: color .12s, transform .12s; text-shadow: 0 0 8px rgba(0,0,0,.4); }
.am-star:hover { transform: scale(1.14); }
.am-star.on { color: #ffd24f; text-shadow: 0 0 10px rgba(255,200,60,.6); }
.am-vote.voted .am-star { cursor: default; }
.am-vote-hint { font-size: 11.5px; color: #8fb8e0; margin-top: 5px; }
.am-vote.voted .am-vote-hint { color: #6fe0ff; font-weight: 700; }
/* Bouton « écrire au développeur » */
.am-contact-row { justify-content: center; }
.am-contactbtn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(10,20,50,.6); color: #cfe6ff; border: 1px solid rgba(120,180,255,.35);
  border-radius: 9px; padding: 8px 14px; font: 700 12.5px 'Trebuchet MS', sans-serif; letter-spacing: .02em;
  transition: background .15s, border-color .15s; }
.am-contactbtn:hover { background: rgba(30,60,120,.55); border-color: rgba(120,180,255,.6); }
.am-contact-ic { font-size: 15px; color: #6fe0ff; }

/* Bouton « Retour à l'intro » (en tête du menu réglages, uniquement en PAUSE) */
.am-backintro { display: block; width: 100%; cursor: pointer; margin-bottom: 10px;
  background: rgba(60,20,30,.5); color: #ffd7c0; border: 1px solid rgba(255,150,120,.5);
  border-radius: 9px; padding: 9px 12px; font: 800 12.5px 'Trebuchet MS', sans-serif; letter-spacing: .04em;
  text-align: center; transition: background .15s, border-color .15s; }
.am-backintro:hover { background: rgba(120,40,50,.6); border-color: rgba(255,150,120,.8); }
.am-backintro[hidden] { display: none; }

/* ===== Modale CONTACT ===== */
#contact-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; }
#contact-modal[hidden] { display: none; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); }        /* fond noir, ~10% de transparence */
.cm-panel { position: relative; width: min(860px, 96%); max-height: 92%; overflow: auto;
  background: linear-gradient(180deg, rgba(12,20,44,.98), rgba(6,10,26,.98)); color: #eaf4ff;
  border: 1px solid rgba(120,180,255,.3); border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,.7), 0 0 40px rgba(80,160,255,.12); }
.cm-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,20,50,.7); border: 1px solid rgba(120,180,255,.35); color: #cfe0ff; font-size: 15px; cursor: pointer; line-height: 1; }
.cm-close:hover { background: rgba(40,70,130,.7); }
.cm-body { display: flex; gap: 0; align-items: stretch; }
.cm-illus { flex: 0 0 40%; min-width: 0; }
.cm-illus img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px 0 0 16px; }
.cm-form { flex: 1 1 auto; min-width: 0; padding: 22px 24px 20px; }
.cm-title { font-size: 18px; font-weight: 900; letter-spacing: .06em; color: #6fe0ff; text-shadow: 0 0 12px rgba(80,220,255,.4); }
.cm-intro { font-size: 12.5px; line-height: 1.5; color: #b8cbe6; margin: 8px 0 16px; }
.cm-row2 { display: flex; gap: 12px; }
.cm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; margin-bottom: 11px; }
.cm-field > span { font-size: 11.5px; font-weight: 700; color: #9fb8dd; letter-spacing: .03em; }
.cm-field input, .cm-field textarea { width: 100%; box-sizing: border-box; background: rgba(6,12,30,.85);
  border: 1px solid rgba(120,180,255,.35); border-radius: 8px; color: #eaf4ff; padding: 9px 11px;
  font: 400 14px 'Trebuchet MS', sans-serif; resize: vertical; }
.cm-field input:focus, .cm-field textarea:focus { outline: none; border-color: #6fe0ff; box-shadow: 0 0 0 2px rgba(80,220,255,.18); }
.cm-note { font-size: 11px; color: #7fa0cc; margin: -6px 0 11px; }
.cm-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfe6ff; cursor: pointer; margin-bottom: 12px; }
.cm-check input { width: 16px; height: 16px; accent-color: #6fe0ff; cursor: pointer; }
.cm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cm-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cm-status { font-size: 12px; font-weight: 700; min-height: 16px; flex: 1 1 auto; }
.cm-status.ok { color: #56d98a; }
.cm-status.err { color: #ff8a8a; }
.cm-send { flex: 0 0 auto; background: linear-gradient(180deg, #3aa0ff, #1f6fe0); border: none; border-radius: 9px;
  color: #fff; font-weight: 800; padding: 10px 22px; font-size: 14px; cursor: pointer; letter-spacing: .04em; }
.cm-send:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) {
  .cm-body { flex-direction: column; }
  .cm-illus { flex: 0 0 auto; height: 130px; }
  .cm-illus img { border-radius: 16px 16px 0 0; }
  .cm-form { padding: 16px 18px; }
}

/* Fondu plein écran pour les transitions (clic titre → jeu, Game Over → intro) */
#screenfade { position: absolute; inset: 0; z-index: 20; background: #01020a; opacity: 0;
  pointer-events: none; transition: opacity .28s ease; }
#screenfade.on { opacity: 1; }

/* ===================== Tableau des scores (attract mode) ===================== */
/* En mode "board" : le logo remonte + rétrécit, les autres éléments s'effacent,
   et le leaderboard apparaît (entrées qui glissent depuis la gauche). */
/* Logo réduit ANCRÉ EN HAUT (transform-origin top) : il reste collé près du haut de la
   scène quel que soit le format (évite le rognage en portrait qu'entraînait un translateY en vh). */
#intro.board #intro-logo-wrap { animation: none; opacity: 1 !important; transform-origin: top center;
  transform: translateY(1vh) scale(.5); transition: transform .55s cubic-bezier(.2,.8,.3,1); }
/* Sur un écran secondaire (leaderboard / codex) on RETIRE complètement du rendu les
   éléments de l'intro (`display: none`). C'est le seul masquage 100 % fiable multi-navigateurs :
   `opacity:0` (voire `visibility:hidden` avec transition) laisse « fuir » certains éléments
   sous Safari/WebKit — d'où les résidus (AUTO-FIRE, CLIC/ESPACE…) visibles derrière le codex. */
#intro.board #intro-sub, #intro.board #intro-menu, #intro.board #intro-copyright { display: none !important; }

#leaderboard { position: absolute; left: 50%; top: 24%; transform: translateX(-50%);
  width: min(90vw, 680px); display: none; flex-direction: column; align-items: center; gap: 1.4vh; }
#intro.board #leaderboard { display: flex; }
#lb-title { font-weight: 900; letter-spacing: .16em; font-size: clamp(17px, 2.9vw, 32px);
  color: #ffd54a; text-shadow: 0 0 18px rgba(255,200,60,.6), 0 0 4px rgba(255,220,120,.9); }
/* TOP 20 en UNE colonne : ~10 lignes visibles puis ASCENSEUR (comme le Codex), défilement auto en attract. */
#lb-grid { display: grid; grid-template-columns: 1fr; gap: .55vh; width: 100%;
  max-height: min(54vh, 50vw); overflow-y: auto; overflow-x: hidden; align-content: start;
  padding: 0 6px 0 2px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  scrollbar-width: thin; scrollbar-color: #4f7fd0 rgba(20,40,90,.35);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#lb-grid::-webkit-scrollbar { width: 10px; }
#lb-grid::-webkit-scrollbar-track { background: rgba(20,40,90,.3); border-radius: 999px; }
#lb-grid::-webkit-scrollbar-thumb { background: linear-gradient(#6fe0ff, #4f7fd0); border-radius: 999px;
  border: 2px solid rgba(2,4,12,.5); }
#lb-grid::-webkit-scrollbar-thumb:hover { background: linear-gradient(#8fe8ff, #6f9fe0); }
.lb-row { display: grid; grid-template-columns: 2.6ch 1fr auto auto; align-items: center; gap: 16px;
  padding: 6px 22px; border-radius: 10px; background: rgba(20,44,96,.28);
  border: 1px solid rgba(110,170,255,.14); opacity: 0; transform: translateX(-34px);
  animation: lbIn .5s cubic-bezier(.2,.8,.3,1) forwards; }
.lb-rank { font-weight: 900; color: #6fe0ff; text-align: right; font-variant-numeric: tabular-nums;
  font-size: clamp(15px,2.4vw,23px); text-shadow: 0 0 8px rgba(90,200,255,.5); }
.lb-name { font-weight: 800; color: #eaffff; letter-spacing: .12em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: clamp(15px,2.5vw,24px); }
.lb-score { font-weight: 800; color: #ffd54a; font-variant-numeric: tabular-nums;
  font-size: clamp(15px,2.5vw,24px); }
/* Niveau + temps : petit bloc 2 lignes calé à droite du score. Police/interligne calibrés pour que
   les 2 lignes tiennent dans la MÊME hauteur qu'une ligne de score → aucune hauteur de ligne en plus. */
.lb-meta { display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 0; line-height: 1.0; text-align: right; min-width: 5.4ch;
  font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-meta .lb-lvl { color: #8fd6ff; font-size: clamp(8px,1.3vw,12px); letter-spacing: .02em; }
.lb-meta .lb-time { color: #9fb6da; font-size: clamp(8px,1.3vw,12px); letter-spacing: .02em; }
.lb-row.lb-new { background: rgba(255,120,210,.28); border-color: rgba(255,140,220,.6);
  animation: lbIn .5s cubic-bezier(.2,.8,.3,1) forwards, lbNew 1.1s ease-in-out .55s infinite; }
.lb-row.lb-new .lb-name, .lb-row.lb-new .lb-rank { color: #ffd0ee; }
@keyframes lbIn { to { opacity: 1; transform: translateX(0); } }
@keyframes lbNew { 0%,100% { box-shadow: 0 0 12px rgba(255,120,210,.4); }
  50% { box-shadow: 0 0 26px rgba(255,120,210,.95); } }

/* ===================== Page d'informations (CODEX) ===================== */
/* Même animation d'arrivée que le leaderboard : le logo remonte + rétrécit,
   les autres éléments s'effacent, et la page d'infos apparaît. */
#intro.info #intro-logo-wrap { animation: none; opacity: 1 !important; transform-origin: top center;
  transform: translateY(1vh) scale(.5); transition: transform .55s cubic-bezier(.2,.8,.3,1); }
#intro.info #intro-sub, #intro.info #intro-menu, #intro.info #intro-copyright { display: none !important; }

#info-panel { position: absolute; left: 50%; top: 24%; bottom: 3.5%; transform: translateX(-50%);
  width: min(88vw, 780px); display: none; flex-direction: column; align-items: stretch; gap: 1vh; z-index: 5; }
#intro.info #info-panel { display: flex; animation: introFadeIn .4s ease both; }
#info-title { text-align: center; flex: 0 0 auto; font-weight: 900; letter-spacing: .16em;
  font-size: clamp(15px, 2.7vw, 28px); color: #ffd54a;
  text-shadow: 0 0 18px rgba(255,200,60,.6), 0 0 4px rgba(255,220,120,.9); }

/* Ascenseur : contenu plus haut que la fenêtre → défilement (auto pendant l'attract, ou manuel). */
#info-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 10px 8px 4px; display: flex; flex-direction: column; gap: .6vh;
  scrollbar-width: thin; scrollbar-color: #4f7fd0 rgba(20,40,90,.35);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#info-scroll::-webkit-scrollbar { width: 10px; }
#info-scroll::-webkit-scrollbar-track { background: rgba(20,40,90,.3); border-radius: 999px; }
#info-scroll::-webkit-scrollbar-thumb { background: linear-gradient(#6fe0ff, #4f7fd0); border-radius: 999px;
  border: 2px solid rgba(2,4,12,.5); }
#info-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(#8fe8ff, #6f9fe0); }

.info-sec { display: flex; flex-direction: column; gap: .7vh; margin-bottom: 1vh; }
.info-sec-title { color: #ffd54a; font-weight: 900; letter-spacing: .14em;
  font-size: clamp(13px, 2.1vw, 19px); text-shadow: 0 0 14px rgba(255,200,60,.5); margin: 4px 2px 0; }
.info-note { color: #9fb3d6; font-size: clamp(11px, 1.6vw, 13.5px); line-height: 1.45; padding: 0 2px; }
.info-note b { color: #cfe0ff; font-weight: 800; }

.info-row { display: flex; gap: 14px; align-items: center; padding: 9px 12px; border-radius: 12px;
  background: rgba(20,44,96,.22); border: 1px solid rgba(110,170,255,.14); }
.info-cvw { flex: 0 0 auto; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
/* Neutralise la règle globale `canvas { position:absolute; inset:0 }` : ces vignettes
   doivent rester dans le flux (dans leur ligne), pas se superposer en haut à gauche. */
canvas.info-cv { position: static; inset: auto; width: 96px; height: 96px; display: block; }
canvas.info-cv.tile { width: 62px; height: 62px; }
.info-txt { flex: 1 1 auto; min-width: 0; }
.info-name { font-weight: 900; color: #eaffff; letter-spacing: .05em; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; font-size: clamp(14px, 2.2vw, 20px); }
.info-pts { color: #ffd54a; font-weight: 900; font-size: clamp(11px, 1.7vw, 15px);
  background: rgba(255,200,60,.12); border: 1px solid rgba(255,200,60,.35); border-radius: 999px; padding: 1px 10px; }
.info-tag { color: #7fa8dd; font-size: clamp(10px, 1.5vw, 12.5px); font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.info-desc { color: #c4d3ec; font-size: clamp(11.5px, 1.7vw, 14px); line-height: 1.42; margin-top: 4px; }

/* Escadrons : toujours 2 lignes de 4 pour présenter les 8 ennemis de base. */
.info-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.info-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
  border-radius: 10px; background: rgba(20,44,96,.22); border: 1px solid rgba(110,170,255,.14); }
.info-tile-name { color: #c4d3ec; font-size: clamp(10px, 1.4vw, 12px); font-weight: 700; text-align: center; }

/* Écrans étroits : flèches plus fines et rapprochées, panneau resserré pour ne PAS
   passer sous les flèches (sinon le texte est rogné à droite). Vignettes réduites. */
@media (max-width: 560px) {
  .nav-arrow { width: 32px; height: 72px; font-size: 28px; }
  #nav-left { left: 6px; } #nav-right { right: 6px; }
  #info-panel { width: calc(100vw - 92px); }
  .info-cvw { width: 74px; height: 74px; }
  canvas.info-cv { width: 74px; height: 74px; }
  .info-row { gap: 10px; padding: 8px 10px; }
}

/* ===================== Écran GAME OVER ===================== */
#gameover { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: min(12vh, 10vw); gap: 3vh; cursor: pointer; opacity: 0;
  background: radial-gradient(120% 120% at 50% 42%, rgba(24,4,12,.30), rgba(2,2,8,.72)); }
#gameover.show { display: flex; animation: goFadeIn 1.6s ease forwards; }  /* fade in de l'écran + logo */
@keyframes goFadeIn { from { opacity: 0; } to { opacity: 1; } }
#go-logo { display: block; width: min(76vw, 780px); height: auto;
  /* le PNG a ~23% de vide transparent au-dessus ET sous le dessin : on annule ces vides */
  margin-top: calc(min(76vw, 780px) * -0.15);
  margin-bottom: calc(min(76vw, 780px) * -0.16);
  filter: drop-shadow(0 0 18px rgba(90,150,255,.5)) drop-shadow(0 0 34px rgba(255,90,40,.30));
  animation: goLogoIn 1s cubic-bezier(.2,.85,.25,1) both, floatY 5.5s 1s ease-in-out infinite, goGlow 3.6s 1s ease-in-out infinite; }
@keyframes goLogoIn { 0% { opacity: 0; transform: translateY(-24px) scale(1.14) rotate(-1.5deg); }
  60% { transform: translateY(6px) scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.4%); } }
@keyframes goGlow {
  0%,100% { filter: drop-shadow(0 0 16px rgba(90,150,255,.45)) drop-shadow(0 0 30px rgba(255,90,40,.28)); }
  50%     { filter: drop-shadow(0 0 30px rgba(120,180,255,.75)) drop-shadow(0 0 60px rgba(255,110,50,.55)); } }
#go-text { max-width: min(88vw, 700px); text-align: center; font-style: italic; line-height: 1.5;
  font-weight: 700; font-size: clamp(14px, 2.3vw, 22px); color: #d8c2d8; letter-spacing: .03em;
  text-shadow: 0 0 14px rgba(180,80,120,.55); animation: scrTextIn .9s .35s ease both; }
#go-hint { font-weight: 800; letter-spacing: .18em; font-size: clamp(13px, 2vw, 18px);
  color: #eaffff; text-shadow: 0 0 10px #6cf, 0 0 24px #39f; animation: blink .6s steps(1) infinite; }

/* Saisie du nom : visible seulement si le score entre au classement (#gameover.enter) */
#go-entry { display: none; flex-direction: column; align-items: center; gap: 1.6vh; }
#gameover.enter #go-entry { display: flex; }
#gameover.enter #go-hint { display: none; }
#go-entry-label, #cg-entry-label { font-weight: 800; letter-spacing: .1em; font-size: clamp(13px,2.1vw,20px);
  color: #ffd54a; text-shadow: 0 0 12px rgba(255,200,60,.55); }
#go-entry-row, #cg-entry-row { display: flex; gap: 12px; align-items: center; }
/* Champ de 8 caractères, même police à chasse fixe que le leaderboard */
#go-name, #cg-name { width: calc(8ch + 1em); box-sizing: content-box;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  font-weight: 900; font-size: clamp(22px,4.4vw,36px);
  text-align: center; letter-spacing: .12em; text-transform: uppercase; color: #eaffff;
  background: rgba(10,20,50,.6); border: 2px solid rgba(120,180,255,.5); border-radius: 10px;
  padding: 6px .45em; caret-color: #6fe0ff; }
#go-name::placeholder, #cg-name::placeholder { color: rgba(150,180,220,.4); }
#go-name:focus, #cg-name:focus { outline: none; border-color: #6fe0ff; box-shadow: 0 0 18px rgba(90,200,255,.55); }
#go-ok, #cg-ok { font-family: inherit; font-weight: 900; letter-spacing: .12em; font-size: clamp(16px,2.6vw,24px);
  color: #06210f; background: linear-gradient(#9fffc0,#39d67a); border: none; border-radius: 10px;
  padding: 12px 20px; min-width: 5.2em; text-align: center; cursor: pointer; box-shadow: 0 0 16px rgba(80,255,150,.4); }
#go-ok:active, #cg-ok:active { transform: scale(.95); }

/* ===================== Écran FÉLICITATIONS (fin) ===================== */
#congrats { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 2.6vh; cursor: pointer; opacity: 0;
  padding: min(11vh, 9vw) 3vw 2vh; background: radial-gradient(120% 120% at 50% 42%, rgba(10,26,16,.28), rgba(2,3,10,.72)); }
#congrats.show { display: flex; animation: goFadeIn 1.6s ease forwards; }
#cg-logo { display: block; width: min(80vw, 860px); height: auto; visibility: hidden;
  /* le PNG a ~33% de vide transparent au-dessus ET sous le dessin : on annule ces vides */
  margin-top: calc(min(80vw, 860px) * -0.21);
  margin-bottom: calc(min(80vw, 860px) * -0.24);
  filter: drop-shadow(0 0 20px rgba(120,220,160,.5)) drop-shadow(0 0 42px rgba(255,220,90,.32)); }
#cg-logo.ready { visibility: visible;
  animation: cgLogoIn 1.1s cubic-bezier(.2,.85,.25,1) both, floatY 6s 1.1s ease-in-out infinite, cgGlow 3.2s 1.1s ease-in-out infinite; }
@keyframes cgLogoIn { 0% { opacity: 0; transform: scale(.7) rotate(2deg); }
  55% { transform: scale(1.06) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes cgGlow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(120,220,160,.45)) drop-shadow(0 0 38px rgba(255,220,90,.30)); }
  50%     { filter: drop-shadow(0 0 34px rgba(150,255,190,.8)) drop-shadow(0 0 68px rgba(255,235,120,.6)); } }
#cg-text { max-width: min(90vw, 760px); text-align: center; font-weight: 700; line-height: 1.5;
  font-size: clamp(14px,2.3vw,22px); color: #dbffe6; letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(120,220,160,.55); animation: scrTextIn .9s .45s ease both; }
#cg-hint { font-weight: 800; letter-spacing: .12em; font-size: clamp(12px,2vw,16px); color: #cfe6ff;
  text-shadow: 0 0 10px #6cf; }
#cg-entry { display: none; flex-direction: column; align-items: center; gap: 1.6vh; }
#congrats.enter #cg-entry { display: flex; }
#congrats.enter #cg-hint { display: none; }

/* ===================== Écrans de fin : dynamisme partagé ===================== */
/* Score final affiché (compteur animé en JS) */
#go-score, #cg-score { display: flex; flex-direction: column; align-items: center; gap: .35em;
  animation: scoreIn .8s .55s cubic-bezier(.2,.85,.25,1) both; }
.scr-label { font-weight: 800; letter-spacing: .34em; text-indent: .34em;
  font-size: clamp(11px, 1.7vw, 15px); color: #9fb6da; }
.scr-val { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  font-weight: 900; line-height: 1; font-size: clamp(30px, 6vw, 60px); letter-spacing: .03em;
  display: inline-block; }
#go-score .scr-val { color: #ffdf6e; text-shadow: 0 0 18px rgba(255,180,60,.6), 0 0 42px rgba(255,90,40,.35); }
#cg-score .scr-val { color: #ffe98a; text-shadow: 0 0 20px rgba(255,220,90,.7), 0 0 48px rgba(120,220,160,.4); }
.scr-val.pop { animation: scorePop .55s cubic-bezier(.2,.9,.3,1); }
@keyframes scoreIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes scorePop { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes scrTextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Label + bouton : pulsation pour attirer l'oeil */
#go-entry-label, #cg-entry-label { animation: labelPulse 1.5s ease-in-out infinite; }
@keyframes labelPulse { 0%,100% { text-shadow: 0 0 12px rgba(255,200,60,.5); }
  50% { text-shadow: 0 0 24px rgba(255,222,96,.95); } }
#go-ok, #cg-ok { animation: okPulse 1.6s ease-in-out infinite; }
@keyframes okPulse { 0%,100% { box-shadow: 0 0 16px rgba(80,255,150,.4); }
  50% { box-shadow: 0 0 28px rgba(90,255,160,.8); } }

/* Couche de particules (braises / étincelles) qui montent derrière le contenu */
.scr-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.scr-fx span { position: absolute; bottom: -6%; left: var(--x); width: var(--s); height: var(--s);
  border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 16px var(--c);
  opacity: 0; animation: emberRise var(--d) linear var(--delay) infinite; }
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(.5); opacity: 0; }
  12%  { opacity: .95; }
  50%  { transform: translateY(-58vh) translateX(var(--sway)) scale(1); }
  82%  { opacity: .55; }
  100% { transform: translateY(-116vh) translateX(0) scale(.7); opacity: 0; } }

/* ===================== Cinématique de fin (6 scènes) ===================== */
#ending { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 3vh; background: rgba(1,2,8,.9); }
#ending.show { display: flex; }
#end-scene { position: relative; width: min(76vw, 62vh); aspect-ratio: 1 / 1; opacity: 0;
  border-radius: 12px; overflow: hidden; box-shadow: 0 0 46px rgba(60,120,255,.28), 0 0 0 1px rgba(120,180,255,.15); }
#end-img { position: absolute; inset: -5%; width: 110%; height: 110%;   /* débord modéré (cache les bords distordus) */
  /* background-image posé par game.js avec l'URL VERSIONNÉE (?v=filemtime, cache-busting) —
     une url() ici ne pourrait pas porter le ?v= et resterait 10 ans en cache nginx/Cloudflare. */
  background-repeat: no-repeat; background-size: 300% 200%;
  filter: url(#waterFx); }
#end-cap { max-width: min(84vw, 760px); text-align: center; font-weight: 600; font-style: italic;
  line-height: 1.55; font-size: clamp(14px,2.3vw,23px); color: #e2ecff; opacity: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.85); min-height: 3.2em; }
#end-scene.play, #end-cap.play { animation: sceneFade 18s ease-in-out forwards; }
@keyframes sceneFade { 0% { opacity: 0; } 9% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

/* ===================== Générique de fin (scroll) ===================== */
#credits { position: absolute; inset: 0; z-index: 5; display: none; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 40%, rgba(6,10,30,.55), rgba(1,2,8,.9)); }
#credits.show { display: block; }
#credits-content { position: absolute; left: 50%; top: 0; width: min(92vw, 880px);
  transform: translate(-50%, 100vh); will-change: transform;
  font-family: Georgia, 'Times New Roman', 'Iowan Old Style', serif; color: #eef3ff; text-align: center; }
.cr-para { font-size: clamp(15px, 2.3vw, 25px); line-height: 1.6; margin: 0 0 2.4vh;
  text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.cr-para.cr-gap { margin-top: 6vh; }

/* Générique façon film : POSTE (à droite) ↔ NOM (à gauche), titre de section centré */
.cr-block { margin: 8vh 0 0; }
.cr-head { font-family: 'Arial Black', Impact, sans-serif; text-transform: uppercase; letter-spacing: .18em;
  font-size: clamp(13px,1.8vw,19px); color: #ffd54a; margin-bottom: 3vh;
  text-shadow: 0 0 14px rgba(255,200,60,.45); }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5%; align-items: baseline; margin: 1.5vh 0; }
.cr-role { text-align: right; color: #9fb6da; font-size: clamp(13px,1.85vw,20px); }
.cr-name { text-align: left; color: #f2f6ff; font-weight: 700; font-size: clamp(14px,2vw,21px); }
.cr-thanks .cr-line { font-style: italic; color: #d2e0f4; line-height: 1.5; margin: 2vh 0;
  font-size: clamp(14px,2vw,21px); text-shadow: 0 2px 10px rgba(0,0,0,.6); }

.cr-copy { display: flex; flex-direction: column; gap: 2.2vh; margin-top: 9vh; }
.cr-copy span { font-size: clamp(13px, 1.9vw, 20px); color: #c4d6f2; line-height: 1.5; }
.cr-copy i { color: #a8bce0; }
.cr-fin { font-family: 'Arial Black', Impact, sans-serif; letter-spacing: .22em; margin-top: 4vh;
  font-size: clamp(34px,7vw,72px) !important; color: #ffd54a !important;
  text-shadow: 0 0 22px rgba(255,200,60,.6); }

/* Pointeur souris masqué pendant le jeu quand il reste immobile (réaffiché au moindre mouvement, cf. game.js). */
body.nocursor, body.nocursor * { cursor: none !important; }

/* ===== Bouton MANETTE (à gauche du plein écran) + modale aide/config ===== */
#pad-btn { position: absolute; top: 10px; right: 108px; pointer-events: auto; width: 40px; height: 40px;
  border-radius: 10px; border: 2px solid rgba(120,180,255,.3); background: rgba(10,20,50,.5);
  color: #bfe0ff; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0; }
#pad-btn:active { transform: scale(.94); }

#pad-menu { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 7;
  width: min(1060px, 96vw); max-height: 90vh; overflow-y: auto;
  background: rgba(8,16,38,.86); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 2px solid rgba(120,180,255,.35); border-radius: 16px; padding: 16px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 22px rgba(80,160,255,.25);
  pointer-events: auto; font-family: 'Trebuchet MS', sans-serif; color: #cfe0ff;
  display: flex; flex-direction: column; gap: 12px; }
#pad-menu[hidden] { display: none; }
.pm-title { font-weight: 900; letter-spacing: .14em; font-size: 14px; color: #6fe0ff; text-align: center;
  text-shadow: 0 0 12px rgba(80,220,255,.5); }
.pm-hint { font-size: 12px; color: #8fb8e0; text-align: center; margin-top: -4px; }
.pm-pad { display: block; width: 100%; height: auto; max-height: 72vh; overflow: visible; margin: 0 auto; }
/* image DualShock de base (grise) : légèrement éclaircie + halo néon pour coller au thème sombre */
.pm-ds-img { filter: brightness(1.12) contrast(1.02) drop-shadow(0 0 10px rgba(80,200,255,.4)); }
/* masque du logo PlayStation : MÊME teinte + MÊME brightness/contrast que le corps (sans le halo) → invisible */
.pm-ds-mask { filter: brightness(1.12) contrast(1.02); }
.pm-tri-t { fill: #48e39b; } .pm-cir-t { fill: #ff6a7d; } .pm-cro-t { fill: #6aa8ff; } .pm-squ-t { fill: #e06aff; }
.pm-glyph { font-size: 22px; text-anchor: middle; font-weight: 900; dominant-baseline: central;
  paint-order: stroke; stroke: rgba(4,10,26,.9); stroke-width: 3px; }
/* lignes de rappel : épaisses + ombre noire dessous → bien visibles sur le DualShock gris clair */
.pm-lead { filter: drop-shadow(0.5px 1.5px 1.2px rgba(0,0,0,.95)); }
.pm-lead line { stroke: rgba(170,220,255,.95); stroke-width: 2.6; stroke-dasharray: 5 4; }
.pm-lead circle { fill: #cdefff; r: 4.5; }
/* étiquettes cliquables (foreignObject) : nom du bouton + select de fonction */
.pm-lbl { display: flex; flex-direction: column; gap: 3px; height: 100%; justify-content: center;
  font-family: 'Trebuchet MS', sans-serif; }
.pm-lbl-l { align-items: flex-end; text-align: right; }
.pm-lbl-r { align-items: flex-start; text-align: left; }
.pm-lbl-c { align-items: center; text-align: center; gap: 1px; }
.pm-lbl-c .pm-fn { text-align: center; text-align-last: center; }
.pm-lbl-name { font-size: 13px; font-weight: 800; color: #bfe0ff; letter-spacing: .02em; white-space: nowrap; }
.pm-fn { width: 100%; max-width: 186px; background: rgba(10,20,50,.82); color: #eaf4ff;
  border: 1px solid rgba(120,180,255,.45); border-radius: 8px; padding: 4px 8px;
  font-size: 13px; font-weight: 700; font-family: 'Trebuchet MS', sans-serif; cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.pm-fn:hover { border-color: rgba(140,200,255,.7); }
.pm-fn:focus { outline: none; border-color: #6fe0ff; box-shadow: 0 0 8px rgba(80,200,255,.4); }
.pm-fn option { background: #0a1430; color: #eaf4ff; }
@keyframes pmBlink { 50% { opacity: .5; } }
/* Option manette : stick = position absolue dans l'anneau */
.pm-opt-row { max-width: 560px; margin: 6px auto 0; }
.pm-opt { display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; font-weight: 700; color: #cfe6ff; cursor: pointer; }
.pm-actions { display: flex; justify-content: center; gap: 12px; }
.pm-close { background: rgba(10,20,50,.6); color: #cfe0ff;
  border: 1px solid rgba(120,180,255,.35); border-radius: 8px; padding: 6px 18px; font-weight: 700;
  font-size: 12px; cursor: pointer; }
.pm-close:active { transform: scale(.96); }

/* ===== Popup HORS LIGNE (score sauvegardé en local) ===== */
#offline-note { position: absolute; top: 16px; left: 50%; transform: translate(-50%, -16px); z-index: 30;
  display: flex; align-items: center; gap: 12px; max-width: min(560px, 92vw);
  background: rgba(30,16,8,.94); border: 2px solid #ffb454; border-radius: 12px; padding: 12px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 22px rgba(255,150,40,.3);
  color: #ffe9cf; font-family: 'Trebuchet MS', sans-serif; font-size: 13.5px; line-height: 1.35;
  pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
#offline-note[hidden] { display: none; }
#offline-note.show { opacity: 1; transform: translate(-50%, 0); }
#offline-note .on-icon { font-size: 26px; color: #ffb454; flex: 0 0 auto; }
#offline-note .on-txt b { color: #ffd6a0; }

/* ===== Icônes du haut : masquées en JEU (visibles intro + pause) ===== */
#pad-btn, #fs, #mute { transition: opacity .25s ease; }
body.chrome-off #pad-btn, body.chrome-off #fs, body.chrome-off #mute { opacity: 0; pointer-events: none; }
body.chrome-off #audio-menu, body.chrome-off #pad-menu { display: none; }

/* ===== Modale contrôles : navigation 2 écrans + écran clavier ===== */
.pm-nav { position: absolute; top: 12px; width: 34px; height: 34px; z-index: 3;
  background: rgba(10,20,50,.6); border: 1px solid rgba(120,180,255,.4); border-radius: 9px;
  color: #bfe0ff; font-size: 22px; line-height: 1; cursor: pointer; }
.pm-nav-l { left: 12px; } .pm-nav-r { right: 12px; }
.pm-nav:active { transform: scale(.92); }
.pm-screen { display: flex; flex-direction: column; gap: 12px; }
.pm-screen[hidden] { display: none; }
/* écran CLAVIER : 2 colonnes (touches fixes + touches modifiables), centré dans la modale large */
.pm-screen[data-screen="kb"] { max-width: 920px; width: 100%; margin: 0 auto; }
.pm-scr-head { text-align: center; font-weight: 900; letter-spacing: .1em; font-size: 13px; color: #9fd0ff;
  text-shadow: 0 0 10px rgba(80,200,255,.35); }
.kb-wrap { display: flex; gap: 30px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.kb-col { flex: 1 1 360px; min-width: 300px; max-width: 460px; display: flex; flex-direction: column; gap: 9px; }
.kb-sub { text-align: center; font-weight: 800; font-size: 12.5px; color: #9fd0ff; letter-spacing: .05em; }
.kb-sub em { color: #8fb8e0; font-style: normal; font-weight: 600; font-size: 11px; }
.kb-arrows { display: block; width: min(320px, 90%); height: auto; margin: 0 auto 4px; filter: drop-shadow(0 0 6px rgba(80,200,255,.3)); }
.kc-svg rect { fill: rgba(20,40,80,.5); stroke: #7fdfff; stroke-width: 1.6; }
.kc-svg text { fill: #eaf4ff; font-size: 22px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.kb-lead { filter: drop-shadow(0.5px 1.5px 1.2px rgba(0,0,0,.95)); }
.kb-lead line { stroke: rgba(170,220,255,.95); stroke-width: 2.6; stroke-dasharray: 5 4; }
.kb-lead-t text { fill: #d6e8ff; font-size: 13px; font-weight: 700; dominant-baseline: central; }
.kb-frow, .kb-erow { display: flex; align-items: center; gap: 10px; }
.kb-dots { flex: 1 1 auto; border-bottom: 3px dotted rgba(175,220,255,.8); height: 0; margin: 0 2px;
  filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.8)); }
.kb-fixcap { flex: 0 0 auto; min-width: 46px; text-align: center; padding: 5px 11px; border-radius: 8px;
  background: rgba(20,40,80,.5); border: 1px solid #7fdfff; color: #eaf4ff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.kb-space { min-width: 116px; }
.kb-fixname { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #cfe0ff; }
.kb-fname { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #bfe0ff; }
.kb-keycap { flex: 0 0 auto; min-width: 54px; padding: 6px 13px; border-radius: 9px; cursor: pointer;
  background: rgba(10,20,50,.7); border: 1px solid rgba(120,180,255,.5); color: #eaf4ff; font-weight: 800; font-size: 14px; }
.kb-keycap:hover { border-color: rgba(140,200,255,.75); }
.kb-keycap.capturing { background: #ffd54a; color: #201400; border-color: #ffd54a; animation: pmBlink .6s steps(2) infinite; }
.pm-note { font-size: 11px; color: #8fb8e0; text-align: center; }
.pm-note b { color: #cfe6ff; }

/* ===== Blocage SMARTPHONE (jeu injouable sur petit écran) ===== */
#phone-block { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 22px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, rgba(30,22,70,.65), #05060f 72%), #05060f; }
#phone-block[hidden] { display: none; }
.pb-inner { max-width: 460px; width: 100%; }
.pb-logo { width: min(80%, 320px); height: auto; filter: drop-shadow(0 6px 20px rgba(80,140,255,.35)); }
.pb-icon { color: #ff8a8a; margin: 12px 0 2px; line-height: 0; }
.pb-msg { color: #eaf4ff; font: 700 15px/1.5 'Trebuchet MS', system-ui, sans-serif; margin: 12px 0 8px; }
.pb-msg2 { color: #9fb8dd; font-size: 13px; line-height: 1.4; margin: 0 0 6px; }
.pb-url { color: #6fe0ff; font: 900 clamp(18px,5.6vw,26px)/1 'Trebuchet MS', system-ui, sans-serif; letter-spacing: .02em;
  margin: 4px 0 20px; text-shadow: 0 0 14px rgba(80,220,255,.5); word-break: break-word; }
.pb-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pb-btn { display: inline-block; background: rgba(10,20,50,.6); color: #cfe6ff; border: 2px solid rgba(120,180,255,.4);
  border-radius: 10px; padding: 11px 18px; font: 800 13px 'Trebuchet MS', system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; }
.pb-btn:active { transform: scale(.96); }
.pb-continue { display: inline-block; margin-top: 16px; color: #7f95b8; font-size: 12px; text-decoration: underline; }