/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   /play — PEAU DE REFONTE (COMMIT 2, 2026-09-09, décision Dan). S'ajoute PAR-DESSUS engine.css (scopé
   `.play-engine`) pour harmoniser le jeu sous GsiChrome. ⛔ AUCUN mot, AUCUN DOM touché (moteur bit-identique) :
   uniquement l'apparence, et uniquement le LOBBY (`#lobby`) + la barre HUD — JAMAIS les vues de jeu
   (`#spinView`/`#game`/`#result`), qui restent le rendu verbatim du moteur.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* a. DOUBLE MARQUE — GsiChrome porte déjà « GSI » ; on masque le « GSI Play » du header de jeu (décision Dan).
      Le HUD (#freeCnt/#credits/#mute) reste, à droite. ⛔ On masque la marque, on ne touche pas au DOM. */
.play-engine > header .brand { display: none; }

/* b/d. HUD — la barre du jeu devient un bandeau discret sous la nav GsiChrome (le HUD reste FONCTIONNEL et
        VISIBLE, caveat d). On retire le dégradé bordeaux qui doublait une seconde « barre de marque » sous le
        chrome, au profit d'un aplat sombre cohérent. La barre de langue `.langbar` (mécanisme ?lang du jeu)
        RESTE — c'est le sélecteur retenu (décision 2). */
.play-engine > header {
  justify-content: flex-end;
  background: #050A10;
  border-bottom: 1px solid var(--line);
}
.play-engine .langbar { background: #050A10; }

/* LOBBY — harmonisation légère avec le chrome (cartes plus nettes, respirations), SANS toucher aux vues de jeu.
   Tout est scopé `#lobby` : le lobby est la seule vue « marketing » ; spin/table/result gardent le rendu moteur. */
/* HÉROS — bloc pleine largeur, coins 16px, TEXTE dans une colonne à GAUCHE (34rem). Le fond est une IMAGE NUE
   PLEIN CADRE (cf. `.hero::after` ci-dessous). ⚠ SUPERSÈDE le design « roue confinée à droite » du 2026-09-10 :
   DÉCISION DAN 2026-09-11 — le fond devient `gsi-play-hero-2400.png` (2400×1024, SOMBRE À GAUCHE), servi nu,
   rien d'incrusté. `landing-play-1700.png` (la roue) N'EST PLUS le fond du héros /play (il reste servi ailleurs
   par la landing, intouché). */
.play-engine #lobby .hero {
  position: relative;
  overflow: hidden;
  margin: .3rem 0 1.4rem;
  padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 40px);
  border: 0;
  border-radius: 16px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  background: #050A10;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}
/* HERO NU = image gsi-play-hero-2400 (2400x1024, SOMBRE A GAUCHE, decision Dan 2026-09-11), PLEIN CADRE,
   rien d'incruste. Servie en AVIF/WebP (image-set) avec repli PNG universel ; le texte (colonne gauche, 34rem)
   repose sur la partie SOMBRE de l'image (background-position: left). Preload de l'AVIF pose dans page.tsx. */
.play-engine #lobby .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/play/gsi-play-hero-2400.png"); /* repli universel si image-set non compris */
  background-image: -webkit-image-set(
    url("/play/gsi-play-hero-2400.avif") type("image/avif"),
    url("/play/gsi-play-hero-2400.webp") type("image/webp"),
    url("/play/gsi-play-hero-2400.png") type("image/png"));
  background-image: image-set(
    url("/play/gsi-play-hero-2400.avif") type("image/avif"),
    url("/play/gsi-play-hero-2400.webp") type("image/webp"),
    url("/play/gsi-play-hero-2400.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}
/* Texte/CTA au-dessus, colonne gauche resserrée (34rem) : ils reposent sur le sombre plein, jamais sur l'image. */
.play-engine #lobby .hero > * { position: relative; z-index: 1; max-width: 34rem; }

/* LARGEUR DU SITE (décision Dan 2026-09-10) : le CONTENEUR /play adopte la largeur de la landing (var --maxw,
   via .play-engine main), et le HÉROS s'étend pleine largeur. Mais le CONTENU du lobby (cartes récompenses,
   sélecteur de format à `aspect-ratio`, étapes) garde sa largeur de conception (960px) centrée : au-delà, les
   cartes de format s'étirent en grandes bandes vides (point 3 Dan). ⛔ Le héros (.hero) est EXCLU → pleine largeur. */
.play-engine #lobby > *:not(.hero) { max-width: 960px; margin-left: auto; margin-right: auto; }
.play-engine #lobby .showcase .sc,
.play-engine #lobby .steps .step i,
.play-engine #lobby .vbtn { border-radius: 12px; }
.play-engine #lobby .final {
  background: linear-gradient(135deg, #12376e, #08132b);
  border: 1px solid var(--gold-d);
}
.play-engine #lobby .h2 { letter-spacing: -.01em; }

/* ⚠ LE FOND DE PAGE (`body`) SUIT LE THÈME DU LAYOUT (clair sur ce navigateur) — sur une vue de jeu COURTE
   (résultat), un liseré CLAIR apparaissait entre la zone sombre et le pied (mesuré à l'image). Le jeu est
   TOUJOURS sombre : on force le fond de la page à l'encre du moteur DÈS QUE `.play-engine` est présent (donc
   /play seulement). Le `min-height` garde la zone sombre pleine même quand le contenu est court. */
/* FOND DE PAGE DERRIÈRE LA TABLE = celui de la landing/#playstyle : #050A10 (décision Dan). ⛔ Le FEUTRE
   de la table (#table, radial bleu/vert du moteur) N'EST PAS touché — c'est le tapis, pas le fond de page. */
body:has(.play-engine) { background: #050A10; }
.play-engine { min-height: 60vh; }

/* ══ TABLE — TIENT DANS LA FENÊTRE (décision Dan, 2026-09-09) ══════════════════════════════════════════
   En JEU (`body.ingame`), on masque le pied saisonnier — on ne « browse » pas pendant une main : la table
   + la ligne d'état + les boutons d'action tiennent alors DANS le viewport, SANS scroll. Table plafonnée
   sur desktop (le header GsiChrome mange ~69px que le `calc` du moteur ne connaissait pas) ; ⛔ MOBILE
   INCHANGÉ (le `calc(100dvh - 300px)` y limite déjà la table sous ce plafond). */
body.ingame .gsi-footer { display: none; }
@media (min-width: 720px) { .play-engine #table { max-height: 560px; } }
/* Sortie « Voir le classement » sous la table (à côté de « Quitter la table »). */
.play-engine .leave .exit-ranking { display: inline-block; margin-left: 14px; color: var(--gold); font-size: 12px; text-decoration: underline; }

/* HÉROS EN MOBILE — la bande confinée à droite (~40% de 390px = trop étroite pour une roue lisible) est
   DÉSACTIVÉE ; on revient à l'image pleine largeur sous un voile VERTICAL (haut→bas), qui protège le texte sur
   une colonne étroite (mesuré ~13:1). La colonne texte reprend toute la largeur. */
@media (max-width: 720px) {
  .play-engine #lobby .hero {
    background-image:
      linear-gradient(180deg, rgba(5,10,16,.82) 0%, rgba(5,10,16,.92) 55%, rgba(5,10,16,.97) 100%),
      url("/landing/landing-play-1700.png");
    background-size: cover;
    background-position: center center, center center;
  }
  .play-engine #lobby .hero::after { display: none; }
  .play-engine #lobby .hero > * { max-width: none; }
}