/* Moteur « runner » : la mise en page commune à tous les jeux de ce type (HUD, écrans
   titre / fin / pause, bouton de pouvoir tactile, modale de fin avec l'offre boutique).
   Le look vient des variables ci-dessous, que chaque jeu redéfinit dans son index.html
   (:root) : couleurs en rgb « r, g, b » pour pouvoir y ajouter une transparence. */
:root {
  --void: #0b0710;            /* fond */
  --void-rgb: 11, 7, 16;
  --smoke: #1a1320;
  --ember: #ff2d3f;           /* couleur d'accent : boutons, lueurs, liserés */
  --ember-rgb: 255, 45, 63;
  --ember-hover: #ff4757;
  --ember-deep: #3a0610;      /* ombre portée du logo */
  --chrome: #efe9f5;          /* texte */
  --ash: #a697b4;             /* texte secondaire */
  --gold: #ffe45c;            /* accroches, focus */
  --line: rgba(239, 233, 245, 0.16);
  --rainbow: linear-gradient(90deg, #ff2d3f, #ff9f2e, #ffe45c, #3fe08a, #3fa7ff, #b44dff);
  --scrim: rgba(6, 3, 9, 0.86);                       /* voile derrière la modale */
  --brand-bg: linear-gradient(180deg, #0b0710 0%, #1d0718 44%, #560d24 100%);
  --offer-glow: rgba(96, 10, 28, 0.6);                /* halo en haut de l'offre */
  --offer-bg: rgba(13, 8, 17, 0.97);
  --flame-rgb: 255, 130, 30;                          /* lueur du prix */
  --price-fill: linear-gradient(180deg, #fff6cf 0%, #ffd24a 30%, #ff8a1e 60%, #ff2d3f 100%);
  --cta-skew: -10deg;         /* boutons penchés ; 0deg pour des boutons droits */
  --cta-radius: 2px;
  --card-radius: 4px;
  --f-display: Impact, fantasy;
  --f-ui: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--void); color: var(--chrome); overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--f-ui);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#game { position: fixed; inset: 0; overflow: hidden; background: var(--void); }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
  pointer-events: none;
}
.hud-left { display: flex; gap: 8px; }
.icon-btn {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(var(--void-rgb), 0.55); color: var(--chrome);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: rgba(var(--ember-rgb), 0.6); }
.lang-btn { font: 700 14px/1 var(--f-ui); letter-spacing: 0.08em; }
.score {
  font-family: var(--f-mono); font-size: clamp(16px, 2.2vw, 22px); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; display: flex; gap: 1.1em;
  text-shadow: 0 0 12px rgba(var(--ember-rgb), 0.45);
}
.score .hi { color: var(--ash); }
.score.blink .cur { animation: blink 0.9s steps(1) 1; }
@keyframes blink { 0%, 33%, 66% { opacity: 0; } 16%, 50%, 83% { opacity: 1; } }

/* ---------- écrans (titre, fin, pause) ---------- */
.screen {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: calc(var(--safe-t) + 76px) calc(var(--safe-r) + 24px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 24px);
}
.screen.center { align-items: center; justify-content: center; text-align: center; background: rgba(var(--void-rgb), 0.55); }
.block { display: flex; flex-direction: column; gap: 14px; max-width: min(560px, 100%); align-items: flex-start; }
.kicker { margin: 0; font: 600 13px/1.2 var(--f-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash); }
.logo {
  margin: 0; display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(42px, min(10vw, 11vh), 96px); line-height: 0.86; letter-spacing: 0.01em;
  color: var(--ember); text-shadow: 0 0 18px rgba(var(--ember-rgb), 0.5), 0 3px 0 var(--ember-deep);
  text-wrap: balance;
}
.logo span + span { color: var(--chrome); text-shadow: 0 0 22px rgba(var(--ember-rgb), 0.6), 0 3px 0 var(--ember-deep); }
.logo.small { font-size: clamp(38px, min(8.5vw, 9.5vh), 76px); }
.tag { margin: 0; font: italic 600 clamp(18px, 2.4vw, 24px)/1 var(--f-ui); letter-spacing: 0.06em; }
.shine {
  font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  background: var(--rainbow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.keys {
  list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 8px 18px; font: 500 16px/1.3 var(--f-ui);
}
.keys li { display: flex; align-items: center; gap: 6px; }
kbd {
  font: 600 13px/1 var(--f-mono); padding: 5px 7px 4px; min-width: 1.9em; text-align: center;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.05); color: var(--chrome);
}
.brief { margin: 0; max-width: 46ch; font: 400 16px/1.4 var(--f-ui); color: var(--ash); }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; }
.cta {
  font: 700 20px/1 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--void); background: var(--ember); border: 0; border-radius: var(--cta-radius); cursor: pointer;
  padding: 14px 30px 13px; transform: skewX(var(--cta-skew));
  box-shadow: 0 8px 30px rgba(var(--ember-rgb), 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.cta > span { display: inline-block; transform: skewX(calc(-1 * var(--cta-skew))); }
.cta:hover { background: var(--ember-hover); }
.cta:active { transform: skewX(var(--cta-skew)) translateY(2px); }
.cta.ghost {
  background: none; color: var(--ember); box-shadow: inset 0 0 0 2px currentColor;
}
.cta.ghost:hover { background: rgba(var(--ember-rgb), 0.12); color: var(--ember-hover); }
.hint { font: 500 15px/1.2 var(--f-ui); color: var(--ash); letter-spacing: 0.04em; }
.final { display: flex; align-items: baseline; gap: 12px; }
.final .num { font: 400 clamp(40px, 7vw, 64px)/1 var(--f-mono); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(var(--ember-rgb), 0.5); }
.final .label, .record { font: 600 14px/1 var(--f-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); margin: 0; }
.badge {
  margin: 0; padding: 6px 12px 5px; font: 700 14px/1 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--cta-radius);
  background: linear-gradient(var(--void), var(--void)) padding-box,
              var(--rainbow) border-box;
}
.rotate-hint { display: none; margin: 0; max-width: 34ch; font: italic 500 15px/1.35 var(--f-ui); color: var(--ash); }
.touch-only { display: none; }
body.touch .touch-only { display: flex; }
body.touch .desk-only { display: none; }
body.touch .rotate-hint { display: block; }
@media (orientation: landscape) { body.touch .rotate-hint { display: none; } }

@media (orientation: landscape) and (max-height: 560px) {
  .screen { align-items: center; text-align: center; }
  .block { align-items: center; }
  .keys, .cta-row { justify-content: center; }
}
@media (max-height: 640px) {
  .screen { padding-top: calc(var(--safe-t) + 64px); }
  .block { gap: 9px; }
  .brief { display: none; }
  .logo { font-size: clamp(36px, min(10vw, 12vh), 84px); }
  .keys { font-size: 15px; }
  .cta { font-size: 17px; padding: 11px 24px 10px; }
}
@media (max-height: 380px) { .kicker, .tag { display: none; } }

/* ---------- bouton de pouvoir tactile ---------- */
.pad { position: absolute; z-index: 4; right: calc(var(--safe-r) + 18px); bottom: calc(var(--safe-b) + 18px); display: none; }
body.touch.playing .pad { display: block; }
.fire {
  position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--chrome); touch-action: none;
  background: radial-gradient(circle at 50% 40%, rgba(var(--ember-rgb), 0.4), rgba(var(--void-rgb), 0.75) 70%);
}
.fire:active { transform: scale(0.94); }
.fire .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fire .ring circle { fill: none; stroke-width: 3; }
.fire .track { stroke: rgba(255, 255, 255, 0.16); }
.fire .prog { stroke: var(--ember); stroke-dasharray: 245; stroke-dashoffset: calc(245px * var(--cd, 0)); }
.fire .power { width: 34px; height: 34px; margin-top: -8px; }
.fire .lbl { position: absolute; bottom: 15px; font: 700 11px/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- modale de fin de partie ----------
   Maquette : canvas « Hardrock Unicorn — modale fin de partie ». Empilée en portrait
   (score puis offre), côte à côte en paysage : compacte sur téléphone, complète (avec
   le bandeau du héros) dès qu'il y a la place. */
.modal {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);
  background: var(--scrim); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.promo-card {
  position: relative; display: flex; flex-direction: column; width: min(420px, 100%); max-height: 100%;
  overflow: hidden auto; overscroll-behavior: contain;
  border: 1px solid rgba(var(--ember-rgb), 0.45); border-radius: var(--card-radius); background: var(--void);
  box-shadow: 0 0 60px rgba(var(--ember-rgb), 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.promo-card p { margin: 0; }
.promo-close {
  position: absolute; top: 4px; right: 4px; z-index: 1; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; background: none; color: var(--ash); cursor: pointer;
}
.promo-close svg { width: 17px; height: 17px; }
.promo-close:hover { color: var(--chrome); }

.promo-main { display: flex; flex-direction: column; }
.promo-brand {
  display: flex; flex-direction: column; padding: 20px 20px 0;
  background: var(--brand-bg);
}
.promo-logo {
  display: flex; flex-direction: column; font: 400 36px/0.86 var(--f-display); letter-spacing: 0.01em;
  color: var(--ember); text-shadow: 0 0 18px rgba(var(--ember-rgb), 0.5), 0 3px 0 var(--ember-deep);
}
.promo-logo span + span { color: var(--chrome); text-shadow: 0 0 22px rgba(var(--ember-rgb), 0.6), 0 3px 0 var(--ember-deep); }
.promo-card .promo-tag { margin-top: 7px; font: 700 12px/1 var(--f-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.promo-hero { display: block; width: calc(100% + 40px); height: auto; margin: 4px -20px 0; }
.promo-rule { height: 2px; flex: none; background: var(--ember); box-shadow: 0 0 18px rgba(var(--ember-rgb), 0.9), 0 0 44px rgba(var(--ember-rgb), 0.45); }

.promo-play { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px 20px 20px; }
.promo-score { display: flex; flex-direction: column; gap: 4px; }
.promo-score-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.promo-score .label { font: 600 13px/1 var(--f-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); }
.promo-score .badge { padding: 5px 10px 4px; font-size: 12px; }
.promo-card .promo-score .num { font: 400 58px/1 var(--f-mono); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(var(--ember-rgb), 0.5); }
.promo-card .promo-score .rec { margin-top: 2px; font: 600 12px/1 var(--f-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.promo-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.promo-actions .cta { font-size: 17px; padding: 14px 22px 13px; }

.promo-offer {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 20px 20px;
  border-top: 1px solid rgba(var(--ember-rgb), 0.35);
  background: radial-gradient(130% 100% at 50% 0%, var(--offer-glow), var(--offer-bg) 62%);
}
.promo-deal { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; text-align: left; }
.promo-deal-text { display: flex; flex-direction: column; min-width: 0; }
/* le t-shirt sur l'explosion du jeu, fondue sur les bords */
.tee { position: relative; isolation: isolate; width: 130px; flex: none; }
.tee img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.promo-burst {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: 186%; height: auto; transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
/* le tir du héros, d'un seul trait : de son point de tir jusqu'au t-shirt en desktop
   (par-dessus la séparation, sous le t-shirt), jusqu'au bord de la carte sinon.
   Placé et dessiné par layoutPromoBeam(). */
.promo-beam { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.promo-card .promo-pct { font: 700 21px/1.15 var(--f-ui); letter-spacing: 0.02em; color: var(--chrome); text-wrap: balance; }
@keyframes flicker {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(var(--flame-rgb), 0.5)) drop-shadow(0 0 36px rgba(var(--ember-rgb), 0.4)); }
  40% { filter: drop-shadow(0 0 28px rgba(var(--flame-rgb), 0.8)) drop-shadow(0 0 58px rgba(var(--ember-rgb), 0.6)); }
  62% { filter: drop-shadow(0 0 18px rgba(var(--flame-rgb), 0.55)) drop-shadow(0 0 40px rgba(var(--ember-rgb), 0.45)); }
}
.promo-card .promo-lead { margin-top: 5px; font: 500 14px/1.25 var(--f-ui); letter-spacing: 0.03em; color: var(--ash); text-wrap: balance; }
.promo-card .promo-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.promo-price strong {
  font: 400 34px/0.95 var(--f-display); letter-spacing: 0.01em;
  background: var(--price-fill);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(var(--flame-rgb), 0.55));
  animation: flicker 2.4s infinite ease-in-out;
}
.promo-price span { font: 500 14px/1 var(--f-ui); color: var(--ash); }
.promo-card .promo-tagline { position: relative; z-index: 1; margin-top: 14px; font: italic 600 18px/1.2 var(--f-ui); letter-spacing: 0.06em; color: var(--gold); text-wrap: balance; }
.promo-offer .cta-big { margin-top: 14px; font-size: 18px; padding: 15px 26px 14px; text-decoration: none; display: inline-block; }
.promo-card .promo-sub { margin-top: 11px; font: 500 14px/1.35 var(--f-ui); color: var(--ash); }

/* paysage : score à gauche, offre à droite ; sans le bandeau tant que la hauteur manque */
@media (orientation: landscape) and (min-width: 560px) {
  .promo-card { flex-direction: row; width: min(860px, 100%); }
  .promo-main { flex: 0 0 52%; border-right: 1px solid rgba(var(--ember-rgb), 0.35); }
  .promo-hero { display: none; }
  .promo-brand { padding-bottom: 14px; }
  .promo-logo { font-size: 30px; }
  .promo-play { padding: 14px 20px 18px; gap: 12px; }
  .promo-card .promo-score .num { font-size: clamp(40px, 12vh, 64px); }
  .promo-offer { flex: 1; min-width: 0; justify-content: center; padding: 16px 20px 18px; border-top: 0; }
  .tee { width: clamp(84px, 24vh, 130px); }
  .promo-burst { width: 170%; }
  .promo-card .promo-tagline { margin-top: 12px; }
}
/* la maquette desktop : 940 px, bandeau, t-shirt en grand au centre de l'offre */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 640px) {
  .promo-card { width: min(940px, 100%); min-height: min(620px, 100%); }
  .promo-close { top: 6px; right: 6px; }
  .promo-main { flex-basis: 524px; }
  .promo-hero { display: block; width: calc(100% + 56px); margin: 6px -28px 0; }
  .promo-brand { padding: 26px 28px 0; }
  .promo-logo { font-size: 46px; }
  .promo-card .promo-tag { margin-top: 8px; font-size: 13px; }
  .promo-play { padding: 22px 28px 26px; gap: 16px; }
  .promo-score .label { font-size: 14px; }
  .promo-score .badge { padding: 6px 12px 5px; font-size: 14px; }
  .promo-card .promo-score .num { font-size: 78px; }
  .promo-card .promo-score .rec { font-size: 13px; }
  .promo-actions { gap: 14px; }
  .promo-actions .cta { font-size: 18px; padding: 14px 26px 13px; }
  .promo-offer { justify-content: flex-start; padding: 30px 30px 26px; background: radial-gradient(120% 90% at 50% 0%, var(--offer-glow), var(--offer-bg) 62%); }
  /* t-shirt en haut, texte et accroche centrés dans la place restante, bouton en bas */
  .promo-deal { display: contents; }
  .tee { z-index: 1; width: 241px; }
  .promo-burst { width: 158%; }
  .promo-deal-text { position: relative; z-index: 1; align-items: center; margin-top: auto; padding-top: 14px; text-align: center; }
  .promo-card .promo-pct { font-size: 28px; line-height: 1.1; }
  .promo-card .promo-lead { margin-top: 6px; font-size: 17px; line-height: 1.3; }
  .promo-card .promo-price { margin-top: 14px; gap: 12px; }
  .promo-price strong { font-size: 46px; filter: drop-shadow(0 0 18px rgba(var(--flame-rgb), 0.55)) drop-shadow(0 0 42px rgba(var(--ember-rgb), 0.45)); }
  .promo-price span { font-size: 16px; }
  .promo-card .promo-tagline { margin: 16px 0 auto; padding-bottom: 18px; font-size: 20px; }
  .promo-offer .cta-big { margin-top: 0; font-size: 20px; padding: 16px 28px 15px; }
  .promo-card .promo-sub { margin-top: 12px; font-size: 15px; }
}
/* portrait où la carte complète ne tient pas (téléphones, barres du navigateur
   comprises) : le score se resserre, boutons empilés à sa droite, pour que le bouton
   de la boutique reste visible. Le badge « Nouveau record » remplace alors le mot Score. */
@media (orientation: portrait) and (max-height: 820px) {
  .promo-play { flex-direction: row; align-items: center; gap: 14px; padding: 14px 20px 16px; }
  .promo-score { flex: 1; min-width: 0; gap: 3px; }
  .promo-score-head { min-height: 22px; }
  .promo-score-head:has(.badge:not([hidden])) .label { display: none; }
  .promo-card .promo-score .num { font-size: 46px; }
  .promo-card .promo-score .rec { margin-top: 1px; font-size: 11px; letter-spacing: 0.14em; }
  .promo-actions { flex: none; flex-direction: column; align-items: stretch; gap: 10px; }
  .promo-actions .cta { font-size: 16px; padding: 12px 18px 11px; }
}
/* portrait trop court pour tout montrer : le bandeau cède sa place */
@media (orientation: portrait) and (max-height: 700px) {
  .promo-hero { display: none; }
  .promo-brand { padding-bottom: 14px; }
}

button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .score.blink .cur, .promo-price strong { animation: none; }
}