/* Polices (07 §17) : Press Start 2P auto-hébergée pour le latin, pile système grasse +20 % pour l'hébreu. */
@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/PressStart2P.woff2") format("woff2");
  font-display: swap;
}

:root {
  --orange: #feae34;
  --cyan: #2ce8f5;
  --magenta: #ff0044;
  --text: #f4f4f4;
  --muted: #b9a9cc;
  --ink: #0b0b12;
  --deep: #1a0f2e;
}
/* --k : facteur de taille (hébreu +20 %) ; --fw : graisse. Recalculés par élément selon sa langue
   (les boutons de langue gardent la police de leur propre langue). */
:lang(fr), :lang(en) { --font: "Press Start 2P", ui-monospace, monospace; --k: 1; --fw: 400; }
:lang(he) { --font: "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; --k: 1.2; --fw: 700; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  background: #000;
}

/* Sonde des marges de sécurité (encoche), lue par le renderer. */
#safe-probe {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===== Borne d'arcade (07 §2 v4) : rectangles calculés par le renderer (variables --s*, --b*, --c*,
   --m*, --p* = écran, cadre, borne, fronton, panneau ; x, y, w, h en px CSS). ===== */
#cabinet {
  position: fixed;
  left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch);
  z-index: 0;
  background: linear-gradient(90deg, #120c1c, #2a1d3d 10%, #1d1429 50%, #2a1d3d 90%, #120c1c);
  box-shadow: inset 0 0 0 4px #3a2a55, inset 0 0 48px rgba(0, 0, 0, 0.7);
}
/* Téléphone couché : console portable (corps arrondi, liseré néon). */
body[data-layout="landscape"] #cabinet {
  border-radius: 28px;
  background: linear-gradient(#2a1d3d, #1a1226);
  box-shadow: inset 0 0 0 3px #ff0044, inset 0 0 0 6px #1a1226, inset 0 0 40px rgba(0, 0, 0, 0.6);
}
#marquee {
  position: fixed;
  left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(#1a0f2e, #3e2731);
  box-shadow: inset 0 -4px 0 #ff0044, 0 6px 18px rgba(255, 0, 68, 0.35);
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: calc(var(--mh) * 0.42);
  color: var(--orange);
  text-shadow: 0 0 10px rgba(254, 174, 52, 0.8), 3px 3px 0 #7a1f3d;
  white-space: nowrap;
}
body[data-layout="landscape"] #marquee { display: none; }
#bezel {
  position: fixed;
  left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh);
  box-sizing: border-box;
  background: #07050b;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #3a2a55, 0 0 0 3px #0b0710, 0 0 24px rgba(44, 232, 245, 0.15);
}
/* Panneau de commandes (PC, décor) : joystick qui penche et bouton rouge qui s'enfonce au clavier. */
#pc-panel {
  display: none;
  position: fixed;
  left: var(--px); top: var(--py); width: var(--pw); height: var(--ph);
  background: linear-gradient(#3a2a55, #1d1429);
  box-shadow: inset 0 4px 0 #5a4380, inset 0 -4px 0 #0b0710;
}
body[data-layout="pc"] #pc-panel { display: block; }
#pc-panel .stick {
  position: absolute;
  left: 22%; top: 50%;
  width: 8px; height: 34px;
  margin: -30px 0 0 -4px;
  background: #b9a9cc;
  transform-origin: 50% 100%;
  transition: transform 0.08s;
}
#pc-panel .ball {
  position: absolute;
  left: -10px; top: -22px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6a74, #a22633);
}
#pc-panel[data-keys*="l"] .stick { transform: rotate(-22deg); }
#pc-panel[data-keys*="r"] .stick { transform: rotate(22deg); }
#pc-panel .abtn, #pc-panel .bbtn {
  position: absolute;
  top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  box-shadow: 0 5px 0 #0b0710;
  transition: transform 0.05s, box-shadow 0.05s;
}
#pc-panel .abtn { left: 42%; background: radial-gradient(circle at 35% 35%, #ff6a74, #a22633); }
#pc-panel .bbtn { left: 50%; background: radial-gradient(circle at 35% 35%, #fee761, #d77643); }
#pc-panel[data-keys*="j"] .abtn { transform: translateY(4px); box-shadow: 0 1px 0 #0b0710, 0 0 14px rgba(255, 90, 100, 0.8); }

#game {
  display: block;
  position: fixed;
  left: var(--sx); top: var(--sy);
  z-index: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* Manette tactile (07 §4 v4) : croix (◀ ▶ = course automatique, bascule) et bouton rouge A (saut),
   placées par le renderer (--dpad-x, --dpad-y, --arm ; --a-x, --a-y, --a-d). Visible sur écran tactile. */
#touch-controls {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
@media (pointer: coarse) {
  #touch-controls { display: block; }
}
#touch-controls button {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
#dpad {
  position: absolute;
  left: calc(var(--dpad-x) - 1.5 * var(--arm));
  top: calc(var(--dpad-y) - 1.5 * var(--arm));
  width: calc(3 * var(--arm));
  height: calc(3 * var(--arm));
}
#dpad .arm, #dpad .hub, #dpad button {
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  background: #2b2433;
  box-shadow: inset 0 3px 0 #4a4058, inset 0 -3px 0 #151019;
}
#dpad .up { left: var(--arm); top: 0; border-radius: 8px 8px 0 0; }
#dpad .down { left: var(--arm); top: calc(2 * var(--arm)); border-radius: 0 0 8px 8px; }
#dpad .hub { left: var(--arm); top: var(--arm); }
#btn-left { left: 0; top: var(--arm); border-radius: 8px 0 0 8px; }
#btn-right { left: calc(2 * var(--arm)); top: var(--arm); border-radius: 0 8px 8px 0; }
#dpad button.on { background: #6b4a1e; box-shadow: inset 0 0 0 3px rgba(254, 174, 52, 0.95); }
#dpad button.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse {
  50% { box-shadow: inset 0 0 0 3px rgba(254, 174, 52, 0.95), 0 0 18px rgba(254, 174, 52, 0.6); }
}
/* Flèches en triangles CSS (aucun texte dans les boutons). */
#dpad button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--arm) * 0.2) solid transparent;
}
#btn-left::before { border-right: calc(var(--arm) * 0.3) solid rgba(255, 255, 255, 0.85) !important; border-left-width: 0 !important; transform: translate(-60%, -50%); }
#btn-right::before { border-left: calc(var(--arm) * 0.3) solid rgba(255, 255, 255, 0.85) !important; border-right-width: 0 !important; transform: translate(-40%, -50%); }
#btn-jump {
  position: absolute;
  left: calc(var(--a-x) - var(--a-d) / 2);
  top: calc(var(--a-y) - var(--a-d) / 2);
  width: var(--a-d);
  height: var(--a-d);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6a74, #e43b44 45%, #a22633);
  box-shadow: 0 6px 0 #5a0f1a, 0 0 0 4px #151019;
}
#btn-jump.on { transform: translateY(4px); box-shadow: 0 2px 0 #5a0f1a, 0 0 0 4px #151019, 0 0 18px rgba(255, 90, 100, 0.7); }
/* Libellé du bouton A (controls.jumpHint) sous le bouton. */
#jump-hint {
  position: absolute;
  left: var(--a-x);
  top: calc(var(--a-y) + var(--a-d) / 2 + 12px);
  transform: translateX(-50%);
  width: max-content;
  pointer-events: none;
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: calc(10px * var(--k));
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 3px #000;
}

/* Boutons du HUD (07 §18) : son, pause, effets lumineux ; sur le panneau de la borne (PC, debout)
   ou en haut du côté droit (console couchée), pendant le jeu. */
#hud-buttons {
  position: fixed;
  left: var(--hud-x);
  top: var(--hud-y);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
body:not([data-state="PLAYING"]):not([data-state="VICTORY"]) #hud-buttons { display: none; }

#hud-buttons button {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: rgba(20, 14, 32, 0.6);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
}
#hud-buttons svg { display: block; margin: auto; }
#btn-sound .off-icon, #btn-sound.off .on-icon { display: none; }
#btn-sound.off .off-icon { display: inline; }
#btn-sound.off { color: rgba(255, 255, 255, 0.4); }

#btn-fx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #feae34;
  box-shadow: 0 0 10px 3px rgba(254, 174, 52, 0.7);
}
#btn-fx.low::before {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* Texte réservé aux lecteurs d'écran (libellés des boutons à icône). */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Écrans HTML (07 §12, §18) ===== */
.screen {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: calc(16px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: rgba(8, 6, 14, 0.6);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: calc(12px * var(--k));
  line-height: 1.7;
}
.screen h1, .screen h2, .screen p { margin: 0; font-weight: inherit; }

/* v4 : titre, pause et « Plus de vies » s'affichent dans l'écran de la borne (défilement interne). */
.screen.in-cabinet {
  inset: auto;
  left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  padding: 8px;
  background: rgba(8, 6, 14, 0.55);
}
.screen.in-cabinet .panel { gap: 10px; }
.screen.in-cabinet h1 { font-size: calc(min(24px, var(--sw) / 16) * var(--k)); }

/* margin: auto centre sans couper le haut quand le contenu déborde (défilement). */
.panel {
  margin: auto;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.screen h1 {
  font-size: calc(24px * var(--k));
  line-height: 1.3;
  color: var(--orange);
  text-shadow: 3px 3px 0 #7a1f3d, 0 0 14px rgba(254, 174, 52, 0.45);
}
.screen h2 {
  font-size: calc(16px * var(--k));
  color: var(--orange);
  text-shadow: 3px 3px 0 #7a1f3d;
}

/* Bordure pixel : quatre ombres décalées, coins en escalier. */
.card {
  width: calc(100% - 8px);
  padding: 18px 14px;
  background: linear-gradient(#0b0b12, #1a0f2e);
  box-shadow: 0 -4px 0 var(--text), 0 4px 0 var(--text), -4px 0 0 var(--text), 4px 0 0 var(--text);
}

.btn {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  margin: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: calc(14px * var(--k));
  line-height: 1.4;
  color: var(--text);
  background: #2a1f44;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.35),
    0 -4px 0 var(--muted), 0 4px 0 var(--muted), -4px 0 0 var(--muted), 4px 0 0 var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.btn.primary {
  color: var(--ink);
  background: var(--orange);
  box-shadow: inset -4px -4px 0 #c4611c,
    0 -4px 0 var(--text), 0 4px 0 var(--text), -4px 0 0 var(--text), 4px 0 0 var(--text);
}
.btn:active { transform: translateY(2px); }
.screen button:focus { outline: none; }
.screen button:focus-visible { outline: 3px dashed var(--cyan); outline-offset: 6px; }

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.lang-switch button {
  min-height: 40px;
  margin: 4px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: calc(10px * var(--k));
  color: var(--muted);
  background: rgba(20, 14, 32, 0.8);
  box-shadow: 0 -3px 0 var(--muted), 0 3px 0 var(--muted), -3px 0 0 var(--muted), 3px 0 0 var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.lang-switch button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--cyan);
  box-shadow: 0 -3px 0 var(--text), 0 3px 0 var(--text), -3px 0 0 var(--text), 3px 0 0 var(--text);
}

/* Chargement */
#screen-loading { background: #000; }
#loading-bar {
  width: 200px;
  height: 16px;
  box-shadow: 0 -4px 0 var(--text), 0 4px 0 var(--text), -4px 0 0 var(--text), 4px 0 0 var(--text);
}
#loading-bar > span { display: block; width: 0; height: 100%; background: var(--orange); }
#screen-loading p { font-size: calc(10px * var(--k)); color: var(--muted); }

/* Titre */
#title-controls {
  max-width: 440px;
  padding: 8px 10px;
  font-size: calc(10px * var(--k));
  color: var(--muted);
  background: rgba(8, 6, 14, 0.75);
}

/* Pause */
#screen-pause .panel { max-width: 360px; }

/* Écran final (07 §12) : texte aligné au début de ligne (à droite en hébreu). */
#screen-final { background: rgba(8, 6, 14, 0.7); }
#screen-final .panel { max-width: 560px; align-items: stretch; text-align: start; gap: 14px; }
#screen-final h1 { font-size: calc(20px * var(--k)); }
#final-invite { font-size: calc(14px * var(--k)); }
#final-event { font-size: calc(14px * var(--k)); color: var(--cyan); }
#final-infos { display: grid; gap: 10px; padding: 12px; background: rgba(255, 255, 255, 0.05); }
#final-infos .label { display: block; font-size: calc(10px * var(--k)); color: var(--orange); }
#final-infos .value { display: block; }
#final-place a { color: var(--cyan); }
#final-video p { margin-bottom: 8px; font-size: calc(10px * var(--k)); color: var(--muted); }
#final-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
#final-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#final-picks-text { flex: 1 1 150px; }
#final-perfect { display: flex; flex-basis: 100%; align-items: center; gap: 12px; color: var(--orange); }
.icon { display: block; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; }
#final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 4px; }
#final-actions .btn { flex: 1 1 200px; width: auto; }

/* PC et téléphone couché : deux colonnes (textes | vidéo), boutons dessous sur toute la largeur.
   Téléphone debout : une seule colonne, dans l'ordre de 07 §12. */
body:not([data-layout="portrait"]) #screen-final .panel {
  max-width: 920px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  align-items: start;
}
body:not([data-layout="portrait"]) #screen-final .panel > * { grid-column: 1; }
body:not([data-layout="portrait"]) #screen-final .panel > #final-video { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
body:not([data-layout="portrait"]) #screen-final .panel > #final-actions { grid-column: 1 / -1; }

/* ===== v4 (07 §22) ===== */
/* Animation de l'écran final : canvas plein écran derrière la carte, sans intercepter les touchers. */
#final-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#screen-final .panel { position: relative; z-index: 1; }
/* Fond de la carte à 80 % : l'animation reste visible à travers, même quand la carte remplit l'écran. */
#screen-final .card { background: linear-gradient(rgba(11, 11, 18, 0.8), rgba(26, 15, 46, 0.8)); }

#title-intro { max-width: 440px; font-size: calc(11px * var(--k)); line-height: 1.6; color: var(--text); }
#screen-gameover .panel { max-width: 360px; }
#screen-gameover h2 { color: var(--magenta); }

/* Résultat et envoi du score (écran final, après une victoire). */
#final-result { color: var(--cyan); }
#final-submit { display: grid; gap: 10px; padding: 12px; background: rgba(255, 255, 255, 0.05); }
#final-submit[hidden] { display: none; }
#final-submit p { font-size: calc(10px * var(--k)); color: var(--muted); }
#final-submit label { display: grid; gap: 4px; font-size: calc(10px * var(--k)); color: var(--orange); }
#final-submit input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: 16px; /* 16 px : pas de zoom automatique de Safari iPhone au focus */
  color: var(--text);
  background: #0b0b12;
  box-shadow: 0 -3px 0 var(--muted), 0 3px 0 var(--muted), -3px 0 0 var(--muted), 3px 0 0 var(--muted);
  -webkit-user-select: text;
  user-select: text;
}
#final-submit input:focus { outline: 3px dashed var(--cyan); outline-offset: 4px; }
#final-submit .btn { justify-self: center; }
#score-status, #scores-status { color: var(--orange); }

/* Classement */
#screen-scores .panel { max-width: 560px; }
#scores-prize { font-size: calc(11px * var(--k)); color: var(--cyan); }
#scores-table { width: 100%; border-collapse: collapse; font-size: calc(10px * var(--k)); }
#scores-table th { padding: 6px 4px; color: var(--orange); font-weight: inherit; text-align: start; }
#scores-table td { padding: 6px 4px; text-align: start; border-top: 2px solid rgba(255, 255, 255, 0.08); overflow-wrap: anywhere; }
#scores-table td:first-child { color: var(--muted); }
#scores-table tbody tr:first-child td { color: var(--orange); }