/* ═══════════════════════════════════════════════════════════════════════════
   L'ORACLE D'HAROUN

   Principe de mise en page : TOUT vit dans une scène de 1920 × 1080 unités de
   dessin, mise à l'échelle d'un seul bloc pour tenir dans la fenêtre. Les tailles
   sont donc écrites en pixels de dessin, jamais en vw/vh, et la grille de la scène
   réserve une place à chaque panneau. Réduire la fenêtre rétrécit le jeu entier
   à l'identique — c'est la seule façon de garantir que rien ne se chevauche.

   Couleurs reprises du thème de kalexex.com.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Playfair Display, auto-hébergée (OFL — cf. /fonts/OFL-playfair.txt).
   Le site n'appelle JAMAIS Google Fonts : le <link> vers fonts.googleapis.com du
   projet d'origine est supprimé. Inter, la police du site, est déjà chargée par
   style.css — on ne la redéclare pas ici. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/playfair-latin-700-900.woff2') format('woff2');
}

:root {
  --bg-dark: #0a0a1a;
  --bg-card: #12122a;
  --bg-card-hover: #1a1a3a;
  --gold: #d4a843;
  --gold-light: #f0d080;
  --purple: #6b2fa0;
  --purple-light: #9b5fd0;
  --bordeaux: #8b1a4a;
  --text: #e8e0d0;
  --text-muted: #9a90a8;
  --text-dim: #6a6078;
  --danger: #e74c3c;
  --success: #2ecc71;
  --turquoise: #47c7c7;
  --border: rgba(212, 168, 67, 0.18);

  --font-title: 'Playfair Display', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ⚠ Cette feuille est chargée sur la MÊME page que le hub — les deux vues vivent dans
   fortune.html. Tout ce qui touche à `html`/`body` doit donc être restreint à la vue
   machine, sinon ça s'applique au hub.

   `height: 100%` + `overflow: hidden` enfermaient le hub dans une fenêtre : 3 458 px de
   contenu dans 949 px, sans défilement. Tout ce qui était sous la ligne de flottaison —
   les cagnottes, la porte, les classements, la FAQ — était simplement inatteignable. */
html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Le drawer du site est garé hors écran à droite. L'ancien `overflow: hidden` le
     contenait par effet de bord ; en ne gardant que le défilement vertical il faut
     redire explicitement qu'on ne défile pas EN LARGEUR, sinon la page part de côté. */
  overflow-x: hidden;
}

/* La scène du jeu prend tout l'écran et ne défile jamais : là, c'est voulu. */
html.ft-enjeu, body.ft-enjeu {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05050c;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════ la scène */

.viewport {
  position: fixed;
  inset: 0;
  /* Sur mobile, `inset: 0` cale la boîte sur le viewport de MISE EN PAGE, qui inclut
     la bande occupée par la barre d'adresse — alors que le script met la scène à
     l'échelle de la hauteur VISIBLE. La scène se retrouvait centrée dans une boîte
     plus haute qu'elle, donc décalée hors de l'écran. `dvh` suit la hauteur
     réellement visible et fait coïncider les deux. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.stage {
  /* ⚠ Le centrage ne passe PAS par l'alignement du conteneur.
     `place-items: center` ne centre pas un enfant PLUS GRAND que son conteneur : les
     navigateurs rabattent alors l'alignement sur `start` pour ne pas pousser du
     contenu hors écran par le haut ou par la gauche. Sur un écran de bureau la scène
     de 1920×1080 tient, donc ça se voyait pas ; sur un téléphone elle déborde,
     l'alignement bascule, et la réduction autour du centre projetait tout le jeu dans
     le coin bas-droite. Mesuré à 844×390 : la scène atterrissait à (613, 345) au lieu
     de (75, 0).
     On ancre donc en haut à gauche et c'est le SCRIPT qui pose la translation — il
     connaît la fenêtre, et une translation explicite ne dépend d'aucun alignement. */
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: 0 0;
  /* L'échelle ET la translation sont posées par le script. */

  display: grid;
  grid-template-columns: 380px 1fr 380px;
  grid-template-rows: 62px 1fr 148px;
  grid-template-areas:
    'brand  brand  brand'
    'gauche board  droite'
    'hud    hud    hud';
}
/* ⚠ RÈGLE DE FOND — `hidden` DOIT masquer, toujours.
   Sans elle, tout élément à qui la feuille donne un `display` (`.feed { display:flex }`
   par exemple) ignore purement et simplement l'attribut : on le masque en JS, il reste
   à l'écran, et on cherche le bug ailleurs. C'est la convention du site, elle manquait
   ici — d'où les `.x[hidden] { display:none }` posés au cas par cas plus bas. */
[hidden] { display: none !important; }

.stage[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════ chargement */

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(107, 47, 160, 0.28), transparent 65%), var(--bg-dark);
  transition: opacity 0.6s ease, visibility 0.6s;
}
.boot--gone { opacity: 0; visibility: hidden; pointer-events: none; }

.boot__inner { text-align: center; padding: 2rem; max-width: 460px; }
.boot__glyph {
  font-size: 3.6rem; color: var(--gold); line-height: 1; margin-bottom: 1rem;
  animation: pulse 2.6s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.5);
}
.boot__title {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.1rem); margin: 0 0 0.4rem;
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 55%, #a87c28);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.boot__sub { color: var(--text-muted); margin: 0 0 2rem; font-size: 0.95rem; }
.boot__bar { height: 3px; background: rgba(212, 168, 67, 0.12); border-radius: 999px; overflow: hidden; }
.boot__bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-light), var(--gold));
  transition: width 0.35s ease;
}
.boot__status {
  margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase; min-height: 1.2em;
}

@keyframes pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.07); }
}

/* ═══════════════════════════════════════════════ demande de rotation */

.rotate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg-dark);
  text-align: center;
  padding: 2rem;
}
.rotate[hidden] { display: none; }
.rotate__icone {
  font-size: 4.5rem; color: var(--gold); line-height: 1;
  animation: tourne 2.4s ease-in-out infinite;
}
@keyframes tourne {
  0%, 100% { transform: rotate(0); }
  40%      { transform: rotate(90deg); }
  60%      { transform: rotate(90deg); }
}
.rotate__titre {
  font-family: var(--font-title); font-weight: 700; font-size: 1.4rem;
  color: var(--gold-light); margin: 1.2rem 0 0.4rem;
}
.rotate__texte { color: var(--text-muted); font-size: 0.9rem; margin: 0; max-width: 30ch; }

/* ═══════════════════════════════════════════════════════════════════ décor */

.scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Une couche par ambiance, créée par le script. Seule leur opacité change, sur un
   fondu de trois secondes : personne ne doit pouvoir dire quand ça a basculé. */
.scenery__land {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center 56%;
  animation: landDrift 46s ease-in-out infinite alternate;
}

@keyframes landDrift {
  0%   { transform: scale(1.05) translate3d(-1.6%, 0.8%, 0); }
  100% { transform: scale(1.12) translate3d(1.6%, -1.1%, 0); }
}

/* ── le soleil ────────────────────────────────────────────────────────────── */

.scenery__sun {
  position: absolute;
  left: 50%; top: 44%;
  width: 1200px; height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 214, 130, 0.40) 0%, rgba(212, 168, 67, 0.16) 30%, transparent 60%);
  animation: sunBreathe 6s ease-in-out infinite;
}
@keyframes sunBreathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
}

/* Rayons crépusculaires qui balaient lentement l'horizon. */
.scenery__rayons {
  position: absolute;
  left: 50%; top: 12%;
  width: 2400px; height: 1400px;
  transform-origin: 50% 30%;
  margin-left: -1200px;
  background: repeating-conic-gradient(
    from 200deg at 50% 30%,
    transparent 0deg 5deg,
    rgba(255, 220, 150, 0.055) 5deg 8deg,
    transparent 8deg 15deg
  );
  animation: rayonsTournent 70s linear infinite;
  mix-blend-mode: screen;
}
@keyframes rayonsTournent {
  0%   { transform: rotate(-7deg); opacity: 0.55; }
  50%  { transform: rotate(7deg);  opacity: 1; }
  100% { transform: rotate(-7deg); opacity: 0.55; }
}

/* ── nuages ───────────────────────────────────────────────────────────────── */

.scenery__nuages {
  position: absolute;
  left: -60%; right: -60%; top: 0;
  height: 55%;
  background:
    radial-gradient(ellipse 340px 60px at 12% 30%, rgba(255, 190, 170, 0.14), transparent 70%),
    radial-gradient(ellipse 480px 74px at 38% 52%, rgba(200, 160, 220, 0.13), transparent 72%),
    radial-gradient(ellipse 300px 52px at 62% 24%, rgba(255, 205, 160, 0.12), transparent 70%),
    radial-gradient(ellipse 420px 66px at 84% 44%, rgba(180, 150, 220, 0.12), transparent 72%);
  animation: nuagesGlissent 120s linear infinite;
}
@keyframes nuagesGlissent {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(38%, 0, 0); }
}

/* ── oiseaux ──────────────────────────────────────────────────────────────── */

/* Trois silhouettes qui traversent le cadre de temps en temps. Rien de plus
   vivant qu'un mouvement qu'on n'attendait pas. */
.scenery__oiseaux {
  position: absolute;
  left: -8%; top: 22%;
  width: 90px; height: 26px;
  opacity: 0;
  background:
    radial-gradient(ellipse 11px 2.5px at 10px 6px, rgba(20, 12, 30, 0.55), transparent 70%),
    radial-gradient(ellipse 9px 2px at 44px 14px, rgba(20, 12, 30, 0.5), transparent 70%),
    radial-gradient(ellipse 8px 2px at 74px 4px, rgba(20, 12, 30, 0.45), transparent 70%);
  animation: oiseauxTraversent 34s ease-in-out infinite;
}
@keyframes oiseauxTraversent {
  0%, 72%  { transform: translate3d(0, 0, 0); opacity: 0; }
  76%      { opacity: 0.9; }
  96%      { opacity: 0.9; }
  100%     { transform: translate3d(2100px, -110px, 0); opacity: 0; }
}

/* ── étoiles (nuit) ───────────────────────────────────────────────────────── */

.scenery__etoiles {
  position: absolute;
  inset: 0 0 45% 0;
  opacity: 0;
  transition: opacity 1.8s ease;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 27% 9%, #cfe0ff, transparent),
    radial-gradient(1.8px 1.8px at 41% 26%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 58% 13%, #e8d0ff, transparent),
    radial-gradient(1.7px 1.7px at 71% 31%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 84% 16%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 93% 28%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 19% 34%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 49% 38%, #e8d0ff, transparent),
    radial-gradient(1.4px 1.4px at 65% 6%, #fff, transparent);
  animation: etoilesScintillent 5.5s ease-in-out infinite;
}
@keyframes etoilesScintillent {
  0%, 100% { filter: brightness(0.65); }
  50%      { filter: brightness(1.4); }
}

/* ── sable et poussière ───────────────────────────────────────────────────── */

.scenery__sable {
  position: absolute;
  left: -60%; right: -60%; bottom: 0;
  height: 44%;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 130px,
    rgba(240, 208, 128, 0.06) 130px 176px,
    transparent 176px 320px
  );
  animation: sableCourt 16s linear infinite;
}
@keyframes sableCourt {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(320px, 0, 0); }
}

/* Voiles de poussière qui montent en biais, plus lents et plus larges. */
.scenery__poussiere {
  position: absolute;
  left: -30%; right: -30%; bottom: -6%;
  height: 52%;
  background:
    radial-gradient(ellipse 620px 90px at 20% 82%, rgba(240, 208, 128, 0.10), transparent 72%),
    radial-gradient(ellipse 520px 74px at 68% 90%, rgba(212, 168, 67, 0.09), transparent 72%);
  animation: poussiereMonte 27s ease-in-out infinite alternate;
}
@keyframes poussiereMonte {
  0%   { transform: translate3d(-4%, 2%, 0); opacity: 0.55; }
  100% { transform: translate3d(4%, -3%, 0); opacity: 1; }
}

/* ── assombrissement ──────────────────────────────────────────────────────── */

.scenery__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 56% at 50% 46%, rgba(10, 10, 26, 0.74) 0%, rgba(10, 10, 26, 0.3) 58%, transparent 84%),
    linear-gradient(180deg, rgba(10, 10, 26, 0.72) 0%, transparent 14%, transparent 76%, rgba(10, 10, 26, 0.9) 100%);
}

/* ═══════════════════════════════════════════════════════════ bandeau du haut */

.brand {
  grid-area: brand;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 30px;
}
.brand__ankh { color: var(--gold); font-size: 30px; line-height: 1; }
.brand__nom {
  font-family: var(--font-title); font-weight: 700; font-size: 25px;
  color: var(--gold-light); white-space: nowrap;
}
.brand__sep { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

/* ═══════════════════════════════════════════════════════════════ colonnes */

.colonne {
  z-index: 4;
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 14px;
  padding: 6px 18px 10px;
  min-height: 0;
}
.colonne--gauche { grid-area: gauche; }
.colonne--droite { grid-area: droite; }

.totem {
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

.panneau,
.feed {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, rgba(18, 18, 42, 0.9), rgba(10, 10, 26, 0.72));
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  min-height: 0;
}

.panneau__titre {
  margin: 0 0 9px;
  font-family: var(--font-title); font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em; color: var(--gold-light);
}
.panneau__titre small {
  display: block; margin-top: 2px;
  font-family: var(--font-ui); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.02em; text-transform: none; color: var(--text-dim);
}
.panneau__vide { margin: 0; font-size: 13px; color: var(--text-dim); font-style: italic; }

/* ── bouton FONCTION ACHETER ──────────────────────────────────────────────── */

/* Le bouton le plus voyant de l'écran après celui du spin : c'est la porte
   d'entrée vers les cinq bonus achetables. */
.acheter {
  position: relative;
  /* ⚠ La brillance (`::after`) balaie de -110 % à +110 % de la largeur du bouton :
     sans cette ligne elle se promène À CÔTÉ, et on voit une barre sombre en biais
     flotter dans le décor pendant les 70 % du cycle où elle attend hors champ. */
  overflow: hidden;
  align-self: center;
  width: 236px;
  padding: 14px 10px 11px;
  border-radius: 16px;
  background: linear-gradient(178deg, #3fa03f 0%, #24761f 48%, #14520f 100%);
  box-shadow:
    0 0 0 3px #c9942e,
    0 0 0 5px #6a4a12,
    0 12px 30px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -6px 14px rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: transform 0.14s, filter 0.2s;
}
.acheter::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 13px;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  transform: translateX(-110%);
  animation: acheterBrille 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes acheterBrille {
  0%, 70% { transform: translateX(-110%); }
  100%    { transform: translateX(110%); }
}
.acheter:hover:not(:disabled) { transform: scale(1.035); }
.acheter:active:not(:disabled) { transform: scale(0.985); }
.acheter:disabled { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; }

.acheter__titre {
  display: block;
  font-family: var(--font-title); font-weight: 900; font-size: 25px; line-height: 1.04;
  color: #ffe9a8;
  text-shadow: 0 2px 0 #4a2d06, 0 0 18px rgba(255, 200, 100, 0.55);
}
.acheter__sous {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: #ffd98a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* ── fil des derniers gains ───────────────────────────────────────────────── */

.feed { display: flex; flex-direction: column; }
.feed__liste { display: flex; flex-direction: column; gap: 5px; overflow: hidden; }

.gain {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  background: rgba(10, 10, 26, 0.55);
  font-size: 13px;
  animation: gainEntre 0.45s cubic-bezier(0.2, 1.1, 0.3, 1.1);
}
.gain__glyphe { font-size: 15px; line-height: 1; }
.gain__quoi { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gain__montant { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold-light); }
.gain--gros { border-left-color: var(--gold-light); background: rgba(212, 168, 67, 0.12); }
.gain--enorme {
  border-left-color: var(--bordeaux);
  background: linear-gradient(100deg, rgba(139, 26, 74, 0.4), rgba(10, 10, 26, 0.55));
}
.gain--enorme .gain__montant { color: #ffd98a; text-shadow: 0 0 12px rgba(255, 200, 100, 0.6); }

/* ── le dernier gain ──────────────────────────────────────────────────────── */

/* Il est encadré d'or et respire doucement : c'est la ligne qu'on cherche du regard
   en sortant d'un tour, elle ne doit pas se confondre avec les précédentes. */
.gain--dernier {
  position: relative;
  border-left-width: 4px;
  border-left-color: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(240, 208, 128, 0.55), 0 0 20px rgba(212, 168, 67, 0.35);
  background: linear-gradient(100deg, rgba(212, 168, 67, 0.2), rgba(10, 10, 26, 0.6));
  animation: gainEntre 0.45s cubic-bezier(0.2, 1.1, 0.3, 1.1), dernierRespire 2.6s ease-in-out 0.45s infinite;
}
.gain--dernier .gain__quoi { color: var(--text); }
.gain--dernier .gain__montant {
  color: #fff6dc;
  text-shadow: 0 0 14px rgba(255, 214, 130, 0.8), 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* Petit chevron d'or à gauche, qui pointe la ligne active. */
.gain--dernier::before {
  content: '▸';
  position: absolute;
  left: -13px;
  color: var(--gold-light);
  font-size: 13px;
  text-shadow: 0 0 8px rgba(212, 168, 67, 0.9);
}

@keyframes dernierRespire {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 208, 128, 0.45), 0 0 16px rgba(212, 168, 67, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(240, 208, 128, 0.75), 0 0 26px rgba(212, 168, 67, 0.5); }
}

@keyframes gainEntre {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: none; }
}

/* ── Haroun ───────────────────────────────────────────────────────────────── */

.haroun {
  position: absolute;
  left: -26px;
  bottom: -14px;
  width: 356px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.62;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2), filter 0.5s ease;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.7)) saturate(0.8);
}
.haroun img, .haroun__canvas { width: 100%; height: auto; display: block; }
.haroun--anime img { display: none; }

.haroun--in { opacity: 1; transform: translateY(-4px) scale(1.02); }
.haroun--in.haroun--calme      { filter: drop-shadow(0 12px 40px rgba(107, 47, 160, 0.5)) saturate(1.05); }
.haroun--in.haroun--chaud      { filter: drop-shadow(0 12px 46px rgba(212, 168, 67, 0.65)) saturate(1.25) brightness(1.08); }
.haroun--in.haroun--exalte     { filter: drop-shadow(0 14px 56px rgba(240, 208, 128, 0.9)) saturate(1.45) brightness(1.16); }
.haroun--in.haroun--froid      { filter: drop-shadow(0 10px 34px rgba(40, 60, 120, 0.6)) saturate(0.5) brightness(0.85); }
.haroun--in.haroun--electrique { filter: drop-shadow(0 12px 48px rgba(155, 95, 208, 0.85)) saturate(1.3) contrast(1.1); }

.haroun__bubble {
  position: absolute;
  left: 76%;
  bottom: 62%;
  width: max-content;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(212, 168, 67, 0.4);
  background: linear-gradient(150deg, rgba(28, 28, 62, 0.97), rgba(16, 16, 38, 0.97));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
  font-size: 16px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transform-origin: 0 100%;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.haroun__bubble--in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════ totem des cagnottes */

.totem__liste { display: grid; gap: 4px; }

/* Chaque palier est un CARTOUCHE ÉGYPTIEN gravé : cadre d'or repoussé, hiéroglyphes,
   disque solaire ailé à gauche, ankh à droite, et un champ de pierre polie au centre —
   malachite, lapis, améthyste, cornaline. Ce sont les pierres qu'on incrustait
   vraiment, et elles donnent au passage le code couleur des paliers. */
.tier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  /* Le cadre d'or de l'image mange les bords : le contenu se pose dans le champ. */
  padding: 15px 44px 15px 52px;
  aspect-ratio: 900 / 310;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.65));
}

.tier--MINI  { --vitesse: 8s;   background-image: url('/assets/fortune/ui/plaque-MINI.webp?v=2'); }
.tier--MINOR { --vitesse: 6.5s; background-image: url('/assets/fortune/ui/plaque-MINOR.webp?v=2'); }
.tier--MAJOR { --vitesse: 5.2s; background-image: url('/assets/fortune/ui/plaque-MAJOR.webp?v=2'); }
.tier--GRAND { --vitesse: 3.8s; background-image: url('/assets/fortune/ui/plaque-GRAND.webp?v=2'); }

/* Reflet qui balaie la pierre, d'autant plus vite que la cagnotte est haute. Il est
   masqué à la forme du champ pour ne pas déborder sur le cadre d'or. */
.tier::after {
  content: '';
  position: absolute;
  left: 13%; right: 9%; top: 22%; bottom: 22%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%);
  animation: tierShine var(--vitesse, 7s) ease-in-out infinite;
  pointer-events: none;
}
@keyframes tierShine {
  0%, 62% { opacity: 0; transform: translateX(-40%); }
  75%     { opacity: 1; }
  100%    { opacity: 0; transform: translateX(40%); }
}

/* Le texte est gravé dans la pierre : liseré sombre net dessous, halo doré autour.
   Sans ces deux ombres, l'or clair sur la malachite serait illisible. */
.tier__nom {
  display: block;
  font-family: var(--font-title); font-weight: 900; font-size: 19px;
  letter-spacing: 0.05em;
  color: #fff4d2;
  text-shadow:
    0 1px 0 rgba(20, 40, 20, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 14px rgba(255, 220, 150, 0.5);
}
.tier__req {
  display: block; font-size: 10px; letter-spacing: 0.08em;
  color: rgba(255, 245, 220, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.tier__montant {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 23px;
  color: #fff8e2;
  text-shadow:
    0 1px 0 rgba(20, 20, 10, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(255, 220, 150, 0.7);
}
.tier--bump { animation: tierBump 0.5s ease; }
@keyframes tierBump {
  0%   { transform: none; }
  35%  { transform: translateY(-3px) scale(1.035); }
  100% { transform: none; }
}

/* ── séance et classement ─────────────────────────────────────────────────── */

.perso__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.perso__label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.perso__grille b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--gold-light); }

/* Les panneaux se dimensionnent sur leur contenu et s'empilent en haut de la
   colonne : les étirer laissait de grandes zones vides sous le classement. */
.classement { display: flex; flex-direction: column; min-height: 0; }
.classement__liste { display: grid; gap: 5px; overflow: hidden; align-content: start; }
.rang {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: baseline;
  font-size: 13px; color: var(--text-muted);
}
.rang i { font-style: normal; color: var(--text-dim); font-size: 11px; }
.rang b { color: var(--gold-light); font-variant-numeric: tabular-nums; font-weight: 600; }
.rang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang--moi { color: var(--text); }
.rang--moi i { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════ le plateau */

.board {
  grid-area: board;
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 0;
}

.board__canvas { display: grid; place-items: center; }
.board__canvas canvas {
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8));
}


/* ── présentation des gros gains ──────────────────────────────────────────── */

/* Le montant défile pendant que le titre s'élève de palier en palier. Plus le gain
   est haut, plus la séquence dure et plus l'écran s'emballe : la classe `grosgain--N`
   monte de 1 à 4 et intensifie tout, du halo au tremblement. */
.grosgain {
  position: absolute;
  inset: -20px;
  z-index: 10;
  display: grid;
  place-items: center;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(10, 10, 26, 0.82), rgba(4, 4, 12, 0.96));
  backdrop-filter: blur(5px);
  animation: fadeIn 0.35s ease;
}
.grosgain[hidden] { display: none; }

.grosgain__halo {
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 8deg,
    rgba(240, 208, 128, 0.16) 8deg 12deg,
    transparent 12deg 24deg
  );
  animation: haloTourne 9s linear infinite;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.grosgain--2 .grosgain__halo { opacity: 0.6; animation-duration: 7s; }
.grosgain--3 .grosgain__halo { opacity: 0.85; animation-duration: 5s; }
.grosgain--4 .grosgain__halo { opacity: 1; animation-duration: 3.2s; }

@keyframes haloTourne { to { transform: rotate(360deg); } }

.grosgain__boite { position: relative; text-align: center; }

.grosgain__titre {
  margin: 0;
  font-family: var(--font-title); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  letter-spacing: 0.04em;
  background: linear-gradient(170deg, #fff6dc, var(--gold) 48%, #b8862c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: font-size 0.5s cubic-bezier(0.2, 1.3, 0.3, 1), filter 0.5s ease;
  filter: drop-shadow(0 0 22px rgba(212, 168, 67, 0.45));
}
.grosgain--2 .grosgain__titre { font-size: 58px; filter: drop-shadow(0 0 34px rgba(212, 168, 67, 0.65)); }
.grosgain--3 .grosgain__titre {
  font-size: 72px;
  filter: drop-shadow(0 0 48px rgba(255, 200, 100, 0.85));
  background: linear-gradient(170deg, #fffaf0, #ffd070 46%, #c9862c);
  -webkit-background-clip: text; background-clip: text;
}
.grosgain--4 .grosgain__titre {
  font-size: 86px;
  filter: drop-shadow(0 0 64px rgba(255, 210, 120, 1));
  background: linear-gradient(170deg, #fff, #ffdd88 40%, #e8564a);
  -webkit-background-clip: text; background-clip: text;
  animation: titrePalpite 0.9s ease-in-out infinite;
}

@keyframes titrePalpite {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.grosgain__montant {
  margin: 14px 0 0;
  font-size: 92px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff6dc;
  text-shadow: 0 0 40px rgba(255, 214, 130, 0.8), 0 6px 0 rgba(90, 50, 6, 0.5);
  transition: font-size 0.5s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.grosgain--3 .grosgain__montant { font-size: 112px; }
.grosgain--4 .grosgain__montant { font-size: 130px; }

.grosgain__mult {
  margin: 6px 0 0;
  font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--purple-light);
}

/* Le plateau tremble, d'autant plus que le palier est haut. */
.board--secoue-1 { animation: secoue 0.5s ease-in-out infinite; --amp: 2px; }
.board--secoue-2 { animation: secoue 0.4s ease-in-out infinite; --amp: 4px; }
.board--secoue-3 { animation: secoue 0.3s ease-in-out infinite; --amp: 7px; }
.board--secoue-4 { animation: secoue 0.22s ease-in-out infinite; --amp: 11px; }

@keyframes secoue {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * 0.4)); }
  50%      { transform: translate(var(--amp), calc(var(--amp) * -0.5)); }
  75%      { transform: translate(calc(var(--amp) * 0.5), var(--amp)); }
}

/* ── annonce plein cadre ──────────────────────────────────────────────────── */

.announce {
  position: absolute;
  inset: -20px;
  z-index: 8;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(10, 10, 26, 0.76), rgba(6, 6, 16, 0.95));
  backdrop-filter: blur(4px);
  border-radius: 20px;
  animation: fadeIn 0.3s ease;
}
.announce[hidden] { display: none; }
.announce__panel { text-align: center; padding: 30px; animation: popIn 0.55s cubic-bezier(0.2, 1.1, 0.3, 1.2); }
.announce__kicker {
  margin: 0 0 6px; font-size: 15px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--purple-light);
}
.announce__title {
  margin: 0; font-family: var(--font-title); font-weight: 900; font-size: 76px; line-height: 1.03;
  background: linear-gradient(170deg, #fff6dc, var(--gold) 45%, #b8862c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(212, 168, 67, 0.35);
}
.announce__amount {
  margin: 10px 0 0; font-size: 48px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--gold-light);
}
.announce__sub { margin: 12px auto 0; max-width: 44ch; color: var(--text-muted); font-size: 17px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════ HUD */

.hud {
  grid-area: hud;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(12, 12, 28, 0.96), rgba(10, 10, 26, 0.5));
}

.hud__cote { display: flex; align-items: center; gap: 34px; }
.hud__cote--droite { justify-content: flex-end; }

.hud__stat { display: flex; flex-direction: column; gap: 1px; }
.hud__stat--win { align-items: flex-end; text-align: right; }
.hud__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.hud__value {
  font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gold-light); line-height: 1.05;
}
.hud__value--petit { font-size: 26px; }
.hud__stat--win .hud__value { color: var(--text); }
.hud__stat--win.is-winning .hud__value { color: var(--success); }

.hud__centre { display: flex; align-items: center; gap: 20px; }
.hud__boutons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.rond {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 27px; font-weight: 600;
  color: var(--gold-light);
  background: radial-gradient(circle at 34% 28%, #2a2a52, #14142e);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.14s, box-shadow 0.2s, color 0.2s;
}
.rond:hover:not(:disabled) { color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(212, 168, 67, 0.35); transform: scale(1.06); }
.rond:active:not(:disabled) { transform: scale(0.95); }
.rond:disabled { opacity: 0.35; cursor: not-allowed; }

.pastille {
  min-width: 92px; height: 62px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(18, 18, 42, 0.85);
  color: var(--text-muted);
  font-size: 22px; font-weight: 700; letter-spacing: 0.06em;
  transition: all 0.18s;
}
.pastille:hover:not(:disabled) { color: var(--text); border-color: rgba(212, 168, 67, 0.45); background: var(--bg-card-hover); }
.pastille.is-on { color: var(--gold-light); border-color: rgba(212, 168, 67, 0.6); background: rgba(212, 168, 67, 0.14); }
.pastille:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── bouton de spin ───────────────────────────────────────────────────────── */

.spin {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 26%, var(--gold-light), var(--gold) 46%, #8f6b1e);
  color: #2a1f06;
  font-weight: 800; font-size: 16px; letter-spacing: 0.1em;
  box-shadow: 0 0 0 3px #6a4a12, 0 8px 30px rgba(212, 168, 67, 0.4), inset 0 -4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.14s, box-shadow 0.2s, filter 0.2s;
}
.spin:hover:not(:disabled) { transform: scale(1.045); box-shadow: 0 0 0 3px #8a6218, 0 10px 38px rgba(212, 168, 67, 0.55), inset 0 -4px 12px rgba(0, 0, 0, 0.3); }
.spin:active:not(:disabled) { transform: scale(0.97); }
.spin:disabled { filter: grayscale(0.5) brightness(0.78); cursor: not-allowed; }

.spin__label { position: relative; z-index: 2; }
.spin__auto {
  position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: #4a3608; letter-spacing: 0.06em;
}
.spin__auto[hidden] { display: none; }

.spin__ring {
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--purple-light);
  border-right-color: var(--turquoise);
  opacity: 0;
  transition: opacity 0.2s;
}
.spin--busy .spin__ring { opacity: 1; animation: spinRing 0.85s linear infinite; }
@keyframes spinRing { to { transform: rotate(360deg); } }

.spin--free {
  background: radial-gradient(circle at 34% 26%, #f0a0d0, var(--bordeaux) 50%, #5a1030);
  color: #fff0f6;
  animation: freePulse 1.5s ease-in-out infinite;
}
@keyframes freePulse {
  0%, 100% { box-shadow: 0 0 0 3px #6a4a12, 0 8px 26px rgba(139, 26, 74, 0.5), inset 0 -4px 12px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 0 0 3px #d4a843, 0 8px 44px rgba(212, 168, 67, 0.7), inset 0 -4px 12px rgba(0, 0, 0, 0.3); }
}

/* ═══════════════════════════════════════════════════════════════════ modales */

.modale {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(10, 10, 26, 0.86), rgba(4, 4, 12, 0.97));
  backdrop-filter: blur(7px);
  animation: fadeIn 0.24s ease;
}
.modale[hidden] { display: none; }

.mcadre {
  position: relative;
  padding: 26px 30px 22px;
  border-radius: 20px;
  border: 2px solid var(--gold);
  background: linear-gradient(165deg, #201040, #12122a 60%, #0d0d20);
  box-shadow: 0 0 0 4px #4a3308, 0 30px 90px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.08);
  animation: popIn 0.4s cubic-bezier(0.2, 1.1, 0.3, 1.15);
  max-width: 1560px;
  /* Débordement visible : le bouton de fermeture dépasse du cadre, et le rogner
     ferait aussi apparaître une barre de défilement parasite. Le défilement, quand
     il est nécessaire, est confié à `.mcadre__scroll`. */
  overflow: visible;
}

.mcadre__scroll {
  max-height: 720px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}
.mcadre__scroll::-webkit-scrollbar { width: 9px; }
.mcadre__scroll::-webkit-scrollbar-thumb { background: rgba(212, 168, 67, 0.4); border-radius: 999px; }
.mcadre__scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 999px; }

.mfermer {
  position: absolute;
  top: -18px; right: -18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 700;
  color: #fff;
  background: radial-gradient(circle at 36% 30%, #e8564a, #9a1c14);
  box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s;
}
.mfermer:hover { transform: scale(1.1) rotate(90deg); }

.mtitre {
  margin: 0 0 4px;
  font-family: var(--font-title); font-weight: 900; font-size: 32px;
  text-align: center;
  background: linear-gradient(170deg, #fff6dc, var(--gold) 50%, #a87c28);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.msous { margin: 0 0 20px; text-align: center; color: var(--text-muted); font-size: 15px; }

/* ── modale FONCTION ACHETER ──────────────────────────────────────────────── */

.options { display: flex; gap: 16px; justify-content: center; }

/* Chaque option est une PLAQUE ILLUSTRÉE entière — cadre d'or sculpté, hiéroglyphes,
   champ de pierre polie — et le texte se pose dessus. Aucun dégradé CSS ne rendra
   l'or repoussé d'un cartouche égyptien.
   L'illustration occupe le haut de la plaque, le texte le bas : c'est pour ça que le
   contenu est poussé vers le bas et que le nom démarre à mi-hauteur. */
.option {
  position: relative;
  width: 234px;
  aspect-ratio: 3 / 4;
  /* Le cadre d'or gravé occupe près d'un cinquième de la largeur de chaque côté :
     le texte doit rester dans le champ de pierre, sinon il chevauche la gravure. */
  padding: 0 42px 30px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.7));
  transition: transform 0.16s, filter 0.2s;
}
.option:hover:not(:disabled) {
  transform: translateY(-8px) scale(1.02);
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px rgba(212, 168, 67, 0.55));
}
.option:active:not(:disabled) { transform: translateY(-2px) scale(1); }
.option:disabled { filter: grayscale(0.8) brightness(0.5); cursor: not-allowed; }

/* Voile sombre sous le texte : la pierre gravée est belle mais chargée, et sans ce
   fondu les petites lignes deviendraient illisibles. */
.option::after {
  content: '';
  position: absolute;
  left: 16%; right: 16%; bottom: 8%;
  height: 46%;
  border-radius: 12px;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 12, 0.72) 30%, rgba(4, 4, 12, 0.9) 70%);
  pointer-events: none;
}
.option > * { position: relative; z-index: 2; }

/* Les ombres de texte font tout le travail de lisibilité : un liseré sombre net,
   puis un halo diffus. On est en Égypte, l'or doit sembler gravé. */
.option__nom {
  margin-top: 50%;
  font-family: var(--font-title); font-weight: 900; font-size: 20px; line-height: 1.12;
  color: #fff4d2;
  text-shadow:
    0 1px 0 rgba(60, 30, 0, 0.95),
    0 2px 3px rgba(0, 0, 0, 0.9),
    0 0 18px rgba(255, 200, 100, 0.55);
}
.option__desc {
  font-size: 12px; line-height: 1.4;
  color: rgba(255, 244, 220, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.9);
}
.option__prix {
  margin-top: 3px;
  font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #ffe9a8;
  text-shadow:
    0 1px 0 rgba(60, 30, 0, 0.95),
    0 3px 5px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(255, 200, 100, 0.8);
}
.option__prix i { font-style: normal; font-size: 17px; }

.mmise {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.mmise__label {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.mmise__valeur {
  min-width: 190px;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(178deg, #b8285c, #7a1038);
  box-shadow: 0 0 0 2px #6a4a12, inset 0 2px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff6dc;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ── modale de mise ───────────────────────────────────────────────────────── */

.grosse-mise {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-width: 460px;
}
.grosse-mise__valeur {
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(178deg, #b8285c, #7a1038);
  box-shadow: 0 0 0 2px #6a4a12, inset 0 2px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff6dc;
  line-height: 1.05;
}
.grosse-mise__valeur i { font-style: normal; font-size: 28px; }

.rond--grand { width: 66px; height: 66px; font-size: 34px; }

/* Réglette des paliers : on voit d'un coup où l'on se situe dans le barème, et on
   peut sauter directement au cran voulu. */
.jauge { display: flex; gap: 5px; margin-top: 16px; }
.jauge__cran {
  flex: 1;
  height: 12px;
  border-radius: 3px;
  background: rgba(212, 168, 67, 0.2);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 67, 0.25);
  transition: background 0.18s, transform 0.18s;
}
.jauge__cran:hover { background: rgba(212, 168, 67, 0.5); transform: scaleY(1.35); }
.jauge__cran--actif {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 12px rgba(212, 168, 67, 0.7);
  transform: scaleY(1.5);
}

/* ── tours automatiques ───────────────────────────────────────────────────── */

.autos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-width: 460px; }
.auto-choix {
  padding: 16px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(178deg, rgba(107, 47, 160, 0.35), rgba(10, 10, 26, 0.7));
  transition: all 0.16s;
}
.auto-choix:hover {
  border-color: var(--gold);
  background: linear-gradient(178deg, rgba(212, 168, 67, 0.3), rgba(10, 10, 26, 0.7));
  transform: translateY(-4px);
}
.auto-choix b { display: block; font-size: 30px; font-weight: 800; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.auto-choix span { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }

.mmax--stop { background: linear-gradient(178deg, #d8484f, #7a1420); }

/* ── réglages du son ──────────────────────────────────────────────────────── */

.sons { display: grid; gap: 11px; min-width: 480px; }
.son {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(8, 8, 20, 0.55);
  text-align: left;
  transition: all 0.18s;
}
.son:hover { border-color: rgba(212, 168, 67, 0.45); background: rgba(26, 26, 58, 0.7); }
.son__texte b { display: block; font-size: 17px; color: var(--text); }
.son__texte span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.son__bascule {
  position: relative;
  width: 56px; height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 2px rgba(212, 168, 67, 0.25);
  transition: background 0.24s, box-shadow 0.24s;
}
.son__bascule i {
  position: absolute;
  top: 4px; left: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.24s cubic-bezier(0.3, 1.4, 0.4, 1), background 0.24s;
}
.son--on .son__bascule {
  background: linear-gradient(178deg, #3fa03f, #1e7a1a);
  box-shadow: inset 0 0 0 2px rgba(212, 168, 67, 0.6);
}
.son--on .son__bascule i { transform: translateX(26px); background: #fff6dc; }

/* ── réglette de volume de la musique ─────────────────────────────────────── */

.son--volume { align-items: start; padding-top: 15px; }
.son--volume .son__bascule { margin-top: 3px; }
.son__texte em { font-style: normal; color: var(--gold-light); font-variant-numeric: tabular-nums; }

/* Des crans plutôt qu'un curseur glissant : c'est plus sûr au doigt, et six niveaux
   suffisent largement pour placer une musique de fond. */
.volume { display: flex; gap: 5px; margin-top: 9px; }
.volume__cran {
  width: 34px; height: 22px;
  border-radius: 4px;
  background: rgba(212, 168, 67, 0.16);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 67, 0.28);
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}
.volume__cran:hover { background: rgba(212, 168, 67, 0.45); transform: translateY(-2px); }
.volume__cran--actif {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 10px rgba(212, 168, 67, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Le cran zéro est la coupure : on le marque en rouge, pas en or. */
.volume__cran--zero { width: 24px; background: rgba(231, 76, 60, 0.2); box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.45); }
.volume__cran--zero:hover { background: rgba(231, 76, 60, 0.55); }
.volume__cran--zero::after { content: '✕'; font-size: 11px; color: rgba(255, 200, 200, 0.85); line-height: 20px; }

/* ── annonce de déclenchement d'un bonus ──────────────────────────────────── */

/* Les cartes qui ont déclenché la fonction restent en pleine lumière pendant que
   l'annonce s'affiche : le joueur doit voir CE QUI a déclenché, pas seulement QUE
   ça s'est déclenché. Le fond s'assombrit sans masquer le plateau. */
.declencheur {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 62% 74% at 50% 50%, transparent 22%, rgba(6, 6, 16, 0.86) 68%);
  animation: fadeIn 0.4s ease;
  pointer-events: none;
}
.declencheur[hidden] { display: none; }

.declencheur__boite {
  margin-top: 62%;
  text-align: center;
  animation: monteEnScene 0.7s cubic-bezier(0.2, 1.1, 0.3, 1.15);
}
.declencheur__raison {
  margin: 0 0 4px;
  font-size: 16px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--turquoise);
  text-shadow: 0 0 18px rgba(71, 199, 199, 0.7);
}
.declencheur__nom {
  margin: 0;
  font-family: var(--font-title); font-weight: 900; font-size: 62px; line-height: 1.05;
  background: linear-gradient(170deg, #fff6dc, var(--gold) 48%, #b8862c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(212, 168, 67, 0.5));
}

@keyframes monteEnScene {
  0%   { opacity: 0; transform: translateY(40px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { transform: scale(1); }
}

.mmax {
  margin-top: 18px;
  width: 100%;
  padding: 13px;
  border-radius: 11px;
  background: linear-gradient(178deg, #3fa03f, #1e7a1a);
  box-shadow: 0 0 0 2px #6a4a12, inset 0 2px 0 rgba(255, 255, 255, 0.25);
  font-size: 18px; font-weight: 800; letter-spacing: 0.1em;
  color: #fff6dc;
  transition: transform 0.14s;
}
.mmax:hover { transform: scale(1.02); }

/* ── table des gains ──────────────────────────────────────────────────────── */

.modale--large .mcadre { width: 1440px; }

.paytable { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 11px; }
.pt {
  display: flex; gap: 11px; align-items: center;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(8, 8, 20, 0.5);
}
.pt img { width: 62px; height: 83px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.pt__body { min-width: 0; }
.pt__name { display: block; font-size: 14px; font-weight: 600; color: var(--gold-light); }
.pt__pays { display: block; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.pt__role {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  border-radius: 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(107, 47, 160, 0.45); color: var(--purple-light);
}

.paytable__rules { margin-top: 22px; display: grid; gap: 13px; }
.rule { padding: 13px 16px; border-radius: 10px; border-left: 3px solid var(--gold); background: rgba(8, 8, 20, 0.5); }
.rule h3 { margin: 0 0 4px; font-size: 16px; color: var(--gold-light); font-weight: 600; }
.rule p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════ mini-jeux */

.minigame {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid; place-items: center;
  animation: fadeIn 0.45s ease;
  overflow: hidden;
}
.minigame[hidden] { display: none; }

/* Le décor du lieu, derrière un voile sombre : l'illustration doit se sentir sans
   jamais concurrencer les éléments avec lesquels on interagit. */
.minigame::before {
  content: '';
  position: absolute;
  inset: -4%;
  background-image: var(--jeu-decor);
  background-size: cover;
  background-position: center;
  animation: decorRespire 24s ease-in-out infinite alternate;
}
.minigame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 54% 62% at 50% 50%, rgba(6, 6, 16, 0.9) 0%, rgba(6, 6, 16, 0.62) 55%, rgba(6, 6, 16, 0.82) 100%),
    linear-gradient(180deg, rgba(6, 6, 16, 0.75), transparent 26%, transparent 74%, rgba(6, 6, 16, 0.85));
}
.minigame > * { position: relative; z-index: 2; }

@keyframes decorRespire {
  0%   { transform: scale(1.02) translate3d(-0.8%, 0.5%, 0); }
  100% { transform: scale(1.08) translate3d(0.8%, -0.6%, 0); }
}

.mj { width: 1180px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

.mj__intro { animation: popIn 0.6s cubic-bezier(0.2, 1.1, 0.3, 1.2); }
.mj__glyphe {
  font-size: 92px; line-height: 1;
  color: var(--jeu-couleur, var(--gold));
  filter: drop-shadow(0 0 40px var(--jeu-couleur, var(--gold)));
  animation: pulse 2.4s ease-in-out infinite;
}
.mj__glyphe--petit { font-size: 34px; animation: none; }

.mj__titre {
  margin: 10px 0 0;
  font-family: var(--font-title); font-weight: 900; font-size: 56px;
  background: linear-gradient(170deg, #fff6dc, var(--jeu-couleur, var(--gold)) 55%, #8f6b1e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mj__titre--petit { font-size: 26px; margin: 0; }

.mj__baseline { margin: 14px auto 0; max-width: 52ch; color: var(--text-muted); font-size: 19px; line-height: 1.55; }

.mj__continuer {
  margin-top: 26px;
  font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light);
  animation: clignote 1.7s ease-in-out infinite;
}
@keyframes clignote { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.mj__entete { display: grid; gap: 3px; place-items: center; }
.mj__aide { margin: 0; font-size: 17px; color: var(--text); min-height: 1.4em; }
.mj__scene { display: grid; place-items: center; gap: 18px; }
.mj__pied { font-size: 17px; color: var(--text-muted); }
.mj__gain b { color: var(--gold-light); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }

.mj__bouton {
  margin-top: 12px;
  padding: 13px 42px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, var(--gold-light), var(--gold) 50%, #8f6b1e);
  color: #2a1f06;
  font-weight: 800; letter-spacing: 0.12em; font-size: 17px;
  box-shadow: 0 0 0 3px #6a4a12, 0 8px 28px rgba(212, 168, 67, 0.4);
  transition: transform 0.14s;
}
.mj__bouton:hover:not(:disabled) { transform: scale(1.04); }
.mj__bouton:disabled { filter: grayscale(0.6); cursor: not-allowed; }
.mj__bouton--secondaire {
  background: linear-gradient(120deg, var(--bordeaux), var(--purple));
  color: var(--text);
  box-shadow: 0 0 0 3px #6a4a12, 0 8px 26px rgba(139, 26, 74, 0.5);
}
.mj__bouton[hidden] { display: none; }

/* ── la roue ──────────────────────────────────────────────────────────────── */

.roue { position: relative; display: grid; place-items: center; gap: 10px; }
/* ⚠ LA MARGE RÉSERVE LA PLACE DU CADRE. L'anneau et le cobra sont posés en absolu :
   ils débordent du plateau de 17 % (80 px) en haut et en bas sans que la grille en
   sache rien. Sans cette marge, le cobra mordait sur le titre et le bouton « Tourner »
   disparaissait derrière le bas de l'anneau. */
/* La marge du haut réserve la place du CADRE **et** du cobra qui le surmonte : les deux
   sont posés en absolu et la grille ne les compte pas. Trop courte, le serpent monte
   dans le titre. */
.roue__plateau { position: relative; width: 540px; height: 540px; margin: 156px 0 96px; }

/* Le cadre sculpté et le cobra sont des IMAGES posées par-dessus le disque. Les
   quartiers, eux, restent en CSS : ils portent du texte, et un texte peint dans une
   image ne se relit pas quand la table des lots change. */
/* ⚠ CES PROPORTIONS SONT MESURÉES SUR L'IMAGE, PAS CHOISIES À L'ŒIL. Le trou de
   l'anneau occupe 74,7 % de sa largeur : pour qu'il encadre EXACTEMENT le disque sans
   le mordre, l'image doit donc faire 1/0,747 = 134 % du disque. Le premier anneau
   généré avait un trou de 46 % ; posé à 114 %, sa bande recouvrait les trois quarts
   des quartiers et la roue tournait à vide, illisible. Si l'anneau est regénéré, on
   remesure son trou et on refait ce calcul. */
.roue__cadre {
  position: absolute; inset: -17%; z-index: 2;
  width: 134%; height: 134%;
  pointer-events: none;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.7));
}
/* ⚠ LE COBRA SE POSE SUR LA COURONNE, PAS SUR LES QUARTIERS. Descendu sur le disque,
   il masquait les deux ou trois libellés du haut — précisément ceux que l'aiguille
   désigne, donc ceux qu'on veut lire. Sa pointe s'arrête au bord du disque ; son socle
   repose sur la bande dorée du cadre, ce qui le fait lire comme une pièce montée. */
.roue__aiguille {
  position: absolute; z-index: 4;
  bottom: calc(100% - 8px); left: 50%; transform: translateX(-50%);
  width: 92px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.95));
}
/* ── les trois étages ─────────────────────────────────────────────────────────
   Trois disques concentriques, du plus grand au plus petit. Chacun tourne pour son
   propre compte : quand l'aiguille passe LE SEUIL, c'est le disque du dessous qui
   prend la main, et celui du dessus s'éteint sans disparaître — on doit continuer à
   voir d'où l'on vient. */

.roue__anneau {
  position: absolute; top: 50%; left: 50%;
  width: var(--taille); height: var(--taille);
  transform: translate(-50%, -50%);
  z-index: var(--z);
  border-radius: 50%;
}
.roue__disque {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #241436, #0b0716 78%);
  box-shadow: 0 0 70px rgba(212, 168, 67, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.75);
}
/* Un liseré d'or sépare chaque étage du suivant : sans lui les trois disques se
   fondent en une seule cible et la descente ne se lit plus. */
.roue__anneau:not(:first-child) .roue__disque {
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.85), 0 0 26px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 0, 0, 0.7);
}

/* L'étage inactif recule : il reste lisible, mais il ne réclame plus le regard. */
.roue__plateau[data-actif] .roue__anneau { transition: filter 0.5s ease, opacity 0.5s ease; }
.roue__plateau[data-actif="faveurs"]    .roue__anneau[data-anneau="offrandes"],
.roue__plateau[data-actif="sanctuaire"] .roue__anneau[data-anneau="offrandes"],
.roue__plateau[data-actif="sanctuaire"] .roue__anneau[data-anneau="faveurs"] {
  filter: brightness(0.42) saturate(0.55);
}
.roue__plateau--descend { animation: seuilOuvre 0.7s ease-out; }
@keyframes seuilOuvre {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

.roue__etage {
  margin: 0; font-size: 17px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.roue__quartier {
  position: absolute; inset: 0;
  display: grid; justify-items: center; align-content: start;
  /* ⚠ `--pad` est calculé par le JS d'après les diamètres des anneaux : c'est ce qui
     garde le libellé DANS la couronne visible. Une valeur en dur ici le renverrait
     sous l'anneau du dessous, où il est dessiné pour personne. */
  padding-top: var(--pad, 3%);
  transform: rotate(calc(var(--i) * 360deg / var(--n)));
  clip-path: polygon(50% 50%, 36% 0%, 64% 0%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--teinte) 72%, transparent), transparent 74%);
}
.roue__quartier:nth-child(even) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--teinte) 34%, #0b0716), transparent 74%);
}

/* ⛔ CHAQUE QUARTIER SE DESSINE, DU BORD VERS LE CŒUR. C'est le moment où le joueur
   découvre ce qu'il y a au fond de la roue, et il ne se rejoue pas : il faut qu'il
   dure et qu'il se lise. `--retard` échelonne les quartiers un par un, anneau par
   anneau. Sans le `--dessine` sur le plateau, rien ne s'affiche : l'état de repos est
   l'invisibilité, pour qu'un rechargement ne montre jamais la roue à moitié montée. */
.roue__plateau .roue__quartier { opacity: 0; transform: rotate(calc(var(--i) * 360deg / var(--n))) scale(0.72); }
.roue__plateau--dessine .roue__quartier {
  animation: quartierParait 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) var(--retard, 0ms) forwards;
}
@keyframes quartierParait {
  to { opacity: 1; transform: rotate(calc(var(--i) * 360deg / var(--n))) scale(1); }
}
/* ⚠ Le texte est RENTRÉ dans le disque (10 % du haut), pas collé à son bord : le
   cadre sculpté mord sur la circonférence, et un libellé posé sur l'arête passait
   dessous — la roue tournait avec des quartiers vides. */
/* ⚠ LE TEXTE COURT LE LONG DU RAYON : sa LONGUEUR mange la couronne, pas sa hauteur.
   C'est pour ça qu'un libellé long doit être plus petit qu'un « ×2 » — sinon il sort
   de sa couronne par l'intérieur et disparaît sous l'anneau suivant. */
.roue__quartier b {
  display: block;
  font-size: 21px; font-weight: 900; letter-spacing: 0.01em;
  color: #fff6dc;
  white-space: nowrap;
  /* Un liseré noir complet, pas une ombre portée : sur du cramoisi comme sur de l'or,
     c'est le seul contour qui tienne aux deux. */
  text-shadow:
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    0 0 9px rgba(0, 0, 0, 0.95);
  writing-mode: vertical-rl; text-orientation: mixed;
}
.roue__quartier b.roue__long { font-size: 11.5px; letter-spacing: 0; font-weight: 800; }

/* ── LE SEUIL ─────────────────────────────────────────────────────────────────
   Le quartier qui fait descendre ne ressemble à aucun autre : il bat, il est
   turquoise là où tout le reste est cramoisi ou violet, et une flèche montre où il
   mène. Leur NOMBRE change à chaque partie (de un à quatre) — c'est la seule chose
   que le joueur sait avant de lancer, et c'est ce qui fait qu'il regarde la roue
   avant de cliquer au lieu de cliquer avant de regarder. */
.roue__quartier--seuil {
  background: linear-gradient(180deg, rgba(71, 199, 199, 0.92), rgba(20, 90, 100, 0.25) 78%) !important;
  animation: seuilBat 1.5s ease-in-out infinite;
}
@keyframes seuilBat {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.55) saturate(1.25); }
}
/* LA FLÈCHE POINTE VERS LE CENTRE — c'est-à-dire vers l'anneau où le Seuil mène.
   Elle remplace le mot : sur un quartier qui défile, un pictogramme se lit et un texte
   vertical de huit lettres ne se lit pas. Hampe + pointe, dessinées en CSS pour rester
   nettes à toutes les tailles d'écran (la scène est mise à l'échelle). */
.roue__fleche {
  display: block;
  position: relative;
  margin: 6px auto 0;
  width: 12px; height: 26px;
  border-radius: 3px;
  background: #f2ffff;
  box-shadow: 0 0 12px rgba(140, 252, 255, 0.95);
  animation: flecheAppelle 1.5s ease-in-out infinite;
}
.roue__fleche::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 23px solid #f2ffff;
  filter: drop-shadow(0 0 9px rgba(140, 252, 255, 0.95));
}
@keyframes flecheAppelle {
  0%, 100% { transform: translateY(0);   opacity: 0.82; }
  50%      { transform: translateY(5px); opacity: 1; }
}
/* Le Seuil n'a plus de texte : la flèche se pose au milieu de la couronne, pas contre
   le bord où le mot se tenait. */
.roue__quartier--seuil { padding-top: calc(var(--pad, 3%) + 1.6%); }
/* Le dernier anneau n'a pas de Seuil : rien à annoncer, rien à faire clignoter. */
.roue__anneau[data-anneau="sanctuaire"] .roue__fleche { display: none; }

.roue__anneau[data-anneau="faveurs"] .roue__quartier b { font-size: 18px; }
.roue__anneau[data-anneau="faveurs"] .roue__quartier b.roue__long { font-size: 11px; }
.roue__anneau[data-anneau="sanctuaire"] .roue__quartier b { font-size: 17px; }
.roue__anneau[data-anneau="sanctuaire"] .roue__quartier b.roue__long { font-size: 10.5px; }

/* ── le tirage ────────────────────────────────────────────────────────────── */

.tirage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 640px; }
.tcarte { position: relative; aspect-ratio: 2 / 3; padding: 0; perspective: 1000px; }
.tcarte__dos, .tcarte__face {
  position: absolute; inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.35, 0, 0.2, 1);
  overflow: hidden;
}
/* Le VRAI dos de carte du jeu, pas un ankh dessiné en CSS : c'est le même objet que
   sur les rouleaux, et le tirage doit se jouer avec le paquet d'Haroun. */
.tcarte__dos { border: 1px solid rgba(212, 168, 67, 0.5); }
.tcarte__dos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcarte__face { transform: rotateY(180deg); border: 1px solid rgba(212, 168, 67, 0.55); }
.tcarte__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcarte--ouverte .tcarte__dos { transform: rotateY(-180deg); }
.tcarte--ouverte .tcarte__face { transform: rotateY(0); }
.tcarte--envers .tcarte__face img { transform: rotate(180deg); }
.tcarte--envers .tcarte__face { border-color: rgba(139, 26, 74, 0.85); box-shadow: 0 0 26px rgba(139, 26, 74, 0.55); }
.tcarte:not(:disabled):hover { transform: translateY(-7px); transition: transform 0.18s; }

/* ── les sarcophages ──────────────────────────────────────────────────────── */

/* DOUZE SARCOPHAGES DEBOUT, pas douze cases.
   Les tuiles n'ont ni cadre ni fond : la pièce détourée EST le bouton. C'est tout
   l'écart entre une grille de boutons posée sur un décor et une chambre funéraire
   dans laquelle on entre. */
.sarco {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px; width: 940px;
}
.scase {
  aspect-ratio: 36 / 100;
  position: relative;
  padding: 0; border: 0; background: none;
  transition: transform 0.18s ease, filter 0.25s ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}
.scase__piece { width: 100%; height: 100%; object-fit: contain; display: block; }
.scase:hover:not(:disabled) {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(212, 168, 67, 0.75));
}
.scase:disabled { cursor: default; }

/* Le couvercle se soulève : la pièce bascule vers l'arrière une fraction de seconde,
   ce qui couvre l'échange d'image. */
.scase--ouvre { animation: couvercle 0.34s ease-out; }
@keyframes couvercle {
  0%   { transform: none; }
  45%  { transform: translateY(-9px) scaleY(0.94); }
  100% { transform: none; }
}

.scase--ouverte { filter: drop-shadow(0 0 26px rgba(212, 168, 67, 0.6)); }
.scase--maudit  { filter: drop-shadow(0 0 26px rgba(190, 40, 60, 0.75)); animation: sarcoMaudit 0.5s ease-out; }
@keyframes sarcoMaudit {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-6px) rotate(-2deg); }
  70%      { transform: translateX(6px) rotate(2deg); }
}

/* ⛔ LE MONTANT SE POSE SUR UN CARTOUCHE SOMBRE, PAS DIRECTEMENT SUR L'OR.
   Écrit en blanc à même le sarcophage, il se noyait : l'or clair sur l'or clair ne
   fait aucun contraste, et aucune ombre portée ne rattrape ça. Un fond sombre derrière
   le chiffre est la seule solution qui tienne quelle que soit la pièce en dessous. */
.scase__valeur {
  position: absolute; left: 50%; bottom: 30%;
  transform: translateX(-50%) scale(0.4);
  padding: 4px 12px 5px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 214, 120, 0.9);
  background: rgba(10, 6, 14, 0.92);
  font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: #ffd86a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 190, 60, 0.5);
  white-space: nowrap;
  opacity: 0;
}
/* Le Sarcophage du Pharaon ne paie pas en pyramides : il ouvre une série. Il porte
   donc la couleur des tours gratuits, jamais celle d'un gain. */
.scase--pharaon { filter: drop-shadow(0 0 34px rgba(71, 199, 199, 0.95)); }
.scase--pharaon .scase__valeur {
  font-size: 15px; letter-spacing: 0.05em; padding: 5px 10px;
  color: #b8fbff;
  border-color: rgba(120, 240, 245, 0.95);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.85), 0 0 24px rgba(71, 199, 199, 0.8);
}
.scase--ouverte .scase__valeur { animation: valeurSort 0.42s cubic-bezier(0.2, 1.3, 0.3, 1) forwards; }
@keyframes valeurSort { to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* Trois scarabées : les vies. Un scarabée qui s'éteint se lit tout de suite comme
   une perte, là où trois pastilles rondes ne racontaient rien. */
.sarco__vies { display: flex; gap: 20px; justify-content: center; align-items: center; }
.vie {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(212, 168, 67, 0.75));
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.vie--perdue {
  filter: grayscale(1) brightness(0.42);
  opacity: 0.4; transform: scale(0.78) rotate(-14deg);
}

/* ── la pyramide ──────────────────────────────────────────────────────────── */

/* SEPT PALIERS, DEUX PORTES DE PIERRE À CHAQUE FOIS.
   La pile dessine la pyramide (chaque palier est plus étroit que celui du dessous),
   et les portes sont de vraies portes : c'est ce qu'on pousse, pas une case à cocher. */
/* ⚠ `column`, PAS `column-reverse` : le JS envoie déjà les paliers du sommet vers la
   base (`.reverse()`), et inverser une seconde fois remettrait la pointe en bas. */
.pyr { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 760px; }
.pyr__palier {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  width: var(--w, 60%);
  padding: 3px 14px;
  border-radius: 8px;
  opacity: 0.34;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Le palier où l'on se tient est le seul qui vive : il avance et s'éclaire. */
.pyr__palier--actif { opacity: 1; transform: scale(1.09); }
.pyr__palier--franchi { opacity: 0.92; }
.pyr__palier--chute { opacity: 1; animation: chute 0.7s ease-in forwards; }
@keyframes chute {
  0%   { transform: none; }
  30%  { transform: translateX(-12px) rotate(-1.5deg); }
  60%  { transform: translateX(12px) rotate(1.5deg); }
  100% { transform: translateY(22px) scale(0.96); opacity: 0.45; }
}
.pyr--secousse { animation: secousseTemple 0.55s ease-out; }
@keyframes secousseTemple {
  0%, 100% { transform: none; }
  20%      { transform: translate(-7px, 4px); }
  55%      { transform: translate(6px, -3px); }
  80%      { transform: translate(-3px, 2px); }
}

.pyr__mult {
  font-size: 19px; font-weight: 800; color: var(--gold-light);
  font-variant-numeric: tabular-nums; min-width: 68px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.pyr__palier--franchi .pyr__mult { color: var(--turquoise); }

.pyr__porte {
  padding: 0; border: 0; background: none;
  justify-self: center;
  width: 66px;
  transition: transform 0.18s ease, filter 0.25s ease;
  filter: brightness(0.42) saturate(0.5) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}
.pyr__porte img { width: 100%; height: auto; display: block; }
/* Une porte ouvrable respire ; une porte franchie garde sa lumière ; une porte
   éteinte reste dans l'ombre. Trois états, trois luminosités — rien à lire. */
.pyr__porte--active {
  filter: brightness(1) drop-shadow(0 0 16px rgba(212, 168, 67, 0.75));
  animation: portePulse 2.1s ease-in-out infinite;
}
@keyframes portePulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 14px rgba(212, 168, 67, 0.6)); }
  50%      { filter: brightness(1.12) drop-shadow(0 0 26px rgba(212, 168, 67, 0.95)); }
}
.pyr__porte--active:hover { transform: scale(1.13) translateY(-3px); }
.pyr__porte--franchie {
  filter: brightness(1) drop-shadow(0 0 18px rgba(71, 199, 199, 0.7));
  animation: none;
}
.pyr__porte--brisee {
  filter: brightness(1) drop-shadow(0 0 24px rgba(190, 40, 60, 0.9));
  animation: none;
}

/* ═══════════════════════════════════════════════════════ accessibilité */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Ce qu'il y a à prendre ────────────────────────────────────────────────────
   Le don du jour, ou le filet quand on est à sec. Le panneau n'apparaît que
   lorsqu'il y a réellement quelque chose : ailleurs, il n'occupe aucune place. */
.reclame {
  border-color: rgba(212, 168, 67, .48);
  background: linear-gradient(150deg, rgba(58, 30, 14, .92), rgba(24, 14, 30, .82));
}
.reclame__dire {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-dim);
}
.reclame__bouton {
  width: 100%; padding: 11px 14px; border: none; border-radius: 12px;
  font: 800 14px/1 var(--font-ui); letter-spacing: .01em;
  color: #2a1206; cursor: pointer;
  background: linear-gradient(180deg, #f7dfae, #d9a545);
  box-shadow: 0 6px 18px rgba(217, 165, 69, .34);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.reclame__bouton:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(217, 165, 69, .46); }
.reclame__bouton:active { transform: translateY(0); }
.reclame__bouton:disabled { filter: grayscale(.5) brightness(.75); cursor: default; transform: none; }
/* Un halo lent : l'oeil doit l'attraper sans que ça clignote. */
@media (prefers-reduced-motion: no-preference) {
  .reclame { animation: reclame-souffle 3.2s ease-in-out infinite; }
  @keyframes reclame-souffle {
    0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
    50%      { box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(217, 165, 69, .3); }
  }
}


/* ── le tableau des plus gros coups ────────────────────────────────────────
   Quatre échelles : le jour, le mois, l'année, tous les temps. Il vit dans la
   scène, donc tout est en unités de scène (1920 de large) — d'où des tailles qui
   paraissent énormes lues ici : à l'échelle d'un téléphone elles sont justes. */
.clg-onglets {
  display: flex; gap: 8px; padding: 6px;
  background: rgba(255, 247, 232, .05); border-radius: 999px; margin: 0 0 18px;
}
.clg-onglet {
  flex: 1; border: none; background: none; cursor: pointer;
  padding: 14px 10px; border-radius: 999px;
  font: 700 20px/1.2 Inter, system-ui, sans-serif; color: var(--text-muted);
  transition: background .18s, color .18s;
}
.clg-onglet.is-actif { background: var(--bordeaux, #5a1423); color: var(--gold-light); }

.clg-liste { list-style: none; margin: 0; padding: 0; }
.clg-rang {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 14px; border-bottom: 1px solid rgba(212, 168, 67, .12);
  font-size: 22px;
}
.clg-rang:last-child { border-bottom: none; }
.clg-rang i {
  flex-shrink: 0; width: 46px; font-style: normal; font-weight: 800;
  color: var(--text-muted); text-align: right;
}
.clg-rang:nth-child(1) i, .clg-rang:nth-child(2) i, .clg-rang:nth-child(3) i { color: var(--gold, #d4a843); }
.clg-rang span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clg-rang b { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.clg-rang em {
  font-style: normal; color: var(--text-muted); font-size: 18px;
  min-width: 130px; text-align: right; font-variant-numeric: tabular-nums;
}
.clg-rang--moi { background: rgba(122, 58, 93, .25); border-radius: 10px; }
.clg-attente { text-align: center; color: var(--text-muted); font-size: 21px; padding: 40px 12px; font-style: italic; }
.clg-moi {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(212, 168, 67, .18);
  text-align: center; color: var(--text-dim); font-size: 20px;
}
.clg-moi b { color: var(--gold-light); }

/* L'icône du jeton à côté du compteur de gros gain : posée une fois, elle se
   dimensionne en em et suit donc le nombre pendant qu'il grossit de palier en palier. */
.grosgain__jeton { margin-left: .28em; }

/* ── LA CONJONCTION DES MAGES ──────────────────────────────────────────────
   Bonus caché : rien ne l'annonce ailleurs, alors l'apparition doit tout dire en
   une seconde. Tout est en unités de scène (1920 de large) — d'où des tailles qui
   paraissent énormes lues ici : à l'échelle d'un téléphone elles sont justes.

   TOUT EST EN NÉON ACIDE, et c'est le fond de l'idée : le reste du jeu ne quitte
   jamais la gamme chaude. Voir la scène virer au vert électrique suffit à dire
   qu'on est sorti des règles — aucune phrase n'a besoin de l'expliquer. */
.conjonction {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  animation: conj-entree .4s ease-out;
}
.conjonction[hidden] { display: none; }
.conjonction__voile {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(28, 48, 10, .84), rgba(4, 8, 3, .97));
}
.conjonction__scene {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
}
/* Une fois l'onde déployée, le fond est clair et chargé : sans ce creux d'ombre
   sous les textes, l'acide écrit sur de l'acide ne se lit plus. */
.conjonction__scene::before {
  content: ''; position: absolute; z-index: -1;
  left: -40%; right: -40%; top: -22%; bottom: -24%;
  background: radial-gradient(50% 52% at 50% 52%, rgba(3, 7, 2, .9), rgba(3, 7, 2, .55) 46%, rgba(3, 7, 2, 0) 76%);
  opacity: 0; transition: opacity .5s ease-out;
}
.conjonction--onde .conjonction__scene::before { opacity: 1; }
@keyframes conj-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .conjonction { animation: none; } }

/* ── L'Onde de Gizeh ───────────────────────────────────────────────────────
   Deux états pour un seul élément. D'abord une CARTE posée au centre, entière,
   cadre compris : une carte qui n'est pas dans le jeu vient d'être tirée. Puis
   elle se DILATE jusqu'à déborder de l'écran et devient le décor.

   Le passage en `screen` fait disparaître son fond noir pile au moment où elle
   grandit : la carte se dissout, il ne reste que les lignes qui envahissent tout.
   Et le flou de l'agrandissement (×5 depuis une source de 384 px) suffit à
   l'arrière-plan — aucun `filter: blur()`, qui repeindrait à chaque image. */
.conjonction__onde {
  position: absolute; z-index: 1;
  left: 50%; top: 50%; width: 420px; height: 630px; margin: -315px 0 0 -210px;
  object-fit: cover; border-radius: 16px;
  opacity: 0; transform: scale(.72);
  transition: opacity .55s ease-out, transform 1.15s cubic-bezier(.5, 0, .2, 1);
  pointer-events: none;
}
/* Temps 1 — la carte s'ouvre, seule au centre. */
.conjonction--irruption .conjonction__onde {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 90px rgba(217, 255, 46, .5), 0 24px 60px rgba(0, 0, 0, .8);
}
/* Temps 2 — l'onde déborde et prend toute la scène. Le `translateY` négatif est
   amplifié par l'agrandissement : il fait monter la carte pour cadrer sur SES
   ONDES plutôt que sur le plein de la grande pyramide, qui remplirait l'écran
   d'un triangle immobile. */
.conjonction--onde .conjonction__onde {
  opacity: .6; transform: scale(4.6) translateY(-9%); border-radius: 0;
  mix-blend-mode: screen; box-shadow: none;
}
/* Le palier légendaire pousse l'onde d'un cran de plus. */
.conjonction--legendaire .conjonction__onde { opacity: .76; transform: scale(5.2) translateY(-11%); }
@media (prefers-reduced-motion: reduce) {
  .conjonction__onde { transition: opacity .3s; transform: scale(4.6) translateY(-9%); }
}

.conjonction__sur {
  margin: 0; font-size: 26px; letter-spacing: .22em; text-transform: uppercase;
  color: #d6f79a; text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.conjonction__titre {
  margin: 0; font-family: var(--font-title);
  font-weight: 900; font-size: 92px; line-height: 1;
  background: linear-gradient(180deg, #f4ffd0, #d9ff2e 58%, #86b400);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(217, 255, 46, .55));
}
/* Le texte n'entre qu'une fois la carte ouverte : pendant l'irruption, il n'y a
   qu'elle à regarder. */
.conjonction__sur, .conjonction__titre, .conjonction__mages, .conjonction__produit {
  opacity: 0; transition: opacity .45s ease-out;
}
.conjonction--onde .conjonction__sur,
.conjonction--onde .conjonction__titre,
.conjonction--onde .conjonction__mages,
.conjonction--onde .conjonction__produit { opacity: 1; }

/* Les trois Mages, révélés un par un. */
.conjonction__mages { display: flex; gap: 30px; margin-top: 8px; }
.cmage {
  width: 190px; position: relative;
  opacity: .25; transform: scale(.86);
  transition: opacity .35s, transform .35s cubic-bezier(.2, 1.4, .3, 1);
}
.cmage__carte {
  width: 100%; display: block; border-radius: 10px;
  border: 2px solid rgba(217, 255, 46, .3);
}
.cmage__mult {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  padding: 5px 20px; border-radius: 999px;
  background: linear-gradient(180deg, #eaffb0, #c2ee2a); color: #14210a;
  font-weight: 800; font-size: 34px; line-height: 1.15;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .25s;
}
.cmage--revele { opacity: 1; transform: scale(1); }
.cmage--revele .cmage__mult { opacity: 1; }
.cmage--revele .cmage__carte { border-color: #d9ff2e; box-shadow: 0 0 30px rgba(217, 255, 46, .5); }
/* Un ×10 doit se voir de loin : c'est lui qui construit les gros produits. */
.cmage--fort .cmage__mult { background: linear-gradient(180deg, #fbffe8, #d9ff2e); }
.cmage--fort .cmage__carte { border-color: #f4ffd0; box-shadow: 0 0 46px rgba(217, 255, 46, .8); }

.conjonction__produit {
  margin: 24px 0 0; font-weight: 900; font-size: 108px; line-height: 1;
  color: #f4ffd0; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(217, 255, 46, .65), 0 4px 14px rgba(0, 0, 0, .85);
}
.conjonction--grande .conjonction__produit { font-size: 132px; color: #eaffb0; }
/* Le chiffre le plus rare du jeu s'écrit sur le fond le plus chargé : il monte donc
   vers le blanc au lieu de plonger vers le vert, et chaque battement porte une ombre
   noire en plus de sa lueur — sans elle, l'acide sur l'acide devient illisible. */
.conjonction--legendaire .conjonction__produit {
  font-size: 168px;
  background: linear-gradient(180deg, #ffffff, #f6ffd8 52%, #d9ff2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: conj-pulse 1s ease-in-out infinite;
}
@keyframes conj-pulse {
  0%, 100% { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .95)) drop-shadow(0 0 34px rgba(217, 255, 46, .6)); }
  50%      { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .95)) drop-shadow(0 0 74px rgba(230, 255, 150, .95)); }
}
@media (prefers-reduced-motion: reduce) { .conjonction--legendaire .conjonction__produit { animation: none; } }

/* ── L'ŒIL FIXE ────────────────────────────────────────────────────────────
   Calque superposé au canvas des rouleaux, aux mêmes unités de scène : les
   positions viennent du JS (`ui/oeil-fixe.js`), qui connaît la géométrie réelle
   des colonnes. Ici, uniquement l'apparence.

   La jauge appartient au plateau, pas au HUD : elle est dorée comme le cadre, et
   ne prend de la couleur qu'aux deux moments qui comptent — le nombre tiré
   (turquoise, la couleur de l'Œil Triple) et l'Œil collé (or plein). */
.oeil {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4; pointer-events: none;
}

.oeil__jauge { position: absolute; height: 30px; }

/* La jauge doit se lire d'un coup d'oeil depuis l'autre bout de la piece : elle est
   posee sur un fond franc, cerclee d'or, et ses crans sont larges. Une barre discrete
   au-dessus d'un plateau charge n'existe tout simplement pas. */
.oeil__crans {
  display: flex; gap: 3px; height: 16px;
  padding: 3px; border-radius: 9px;
  background: rgba(8, 5, 3, .88);
  box-shadow: inset 0 0 0 2px rgba(212, 168, 67, .45), 0 3px 10px rgba(0, 0, 0, .6);
}
.oeil__crans i {
  flex: 1; border-radius: 3px;
  background: rgba(212, 168, 67, .16);
  transition: background .25s, box-shadow .25s;
}
.oeil__crans i.on {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 8px rgba(240, 208, 128, .7);
}
/* Le cran qui vient de s'allumer : une impulsion, pas une apparition. */
.oeil__cran--neuf { animation: oeil-cran .6s ease-out; }
@keyframes oeil-cran {
  0%   { transform: scaleY(2.2); box-shadow: 0 0 22px rgba(255, 240, 200, 1); }
  100% { transform: scaleY(1); }
}

/* LE NOMBRE NE MASQUE JAMAIS LA JAUGE. Il ne prend le milieu que pendant son TIRAGE
   — le seul instant où il est le sujet — puis se range au bout de la barre pour n'être
   plus qu'un décompte. La jauge, elle, reste lisible en permanence. */
.oeil__nombre {
  position: absolute; right: 2px; top: 1px;
  padding: 0 4px; border-radius: 5px;
  font-weight: 900; font-size: 15px; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s;
}
.oeil__jauge--tirage .oeil__nombre,
.oeil__jauge--chargee .oeil__nombre,
.oeil__jauge--collee .oeil__nombre { opacity: 1; }

/* Le tirage : il quitte son coin, grandit au centre, et les chiffres défilent. */
.oeil__jauge--tirage .oeil__nombre {
  right: auto; left: 50%; top: -9px; transform: translateX(-50%);
  min-width: 42px; padding: 2px 10px; border-radius: 999px;
  font-size: 26px; line-height: 1.25;
  background: rgba(10, 6, 4, .92); color: var(--turquoise);
  box-shadow: 0 0 0 2px rgba(71, 199, 199, .5), 0 0 26px rgba(71, 199, 199, .55);
}
.oeil__jauge--chargee .oeil__nombre { color: #bffcfc; text-shadow: 0 0 10px rgba(71, 199, 199, .9); }
.oeil__jauge--collee .oeil__nombre { color: #ffeab8; text-shadow: 0 0 10px rgba(240, 208, 128, .9); }

/* LE BLEU VEUT DIRE « L'ŒIL FIXE COURT ». Il s'allume au tirage de la fenêtre et ne
   s'éteint qu'au dernier tour — que la fenêtre attende encore son Œil ou qu'un Œil soit
   déjà collé, c'est le même compteur qui descend. L'or, lui, ne sert qu'au remplissage
   de la jauge : une couleur, un sens. */
.oeil__jauge--chargee .oeil__crans i.on,
.oeil__jauge--collee .oeil__crans i.on {
  background: linear-gradient(180deg, #9df0f0, var(--turquoise));
  box-shadow: 0 0 10px rgba(71, 199, 199, .8);
}
/* ⚠ `.on` N'EST PAS FACULTATIF ICI. Sans lui la règle repeint AUSSI les crans éteints :
   la barre paraît pleine en permanence, et le décompte devient invisible — on croit que
   la jauge ne descend jamais alors qu'elle descend bien. */
.oeil__jauge--chargee .oeil__crans i.on { animation: oeil-attend 1.4s ease-in-out infinite; }
@keyframes oeil-attend { 50% { box-shadow: 0 0 20px rgba(160, 250, 250, 1); } }

/* Le cadre de la carte collée. Il épouse la carte (94 % de sa case, comme partout
   ailleurs dans ce jeu) plutôt que la case elle-même. */
.oeil__halo {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(240, 208, 128, .9),
              inset 0 0 26px rgba(240, 208, 128, .3),
              0 0 34px rgba(240, 208, 128, .45);
  animation: oeil-veille 2.2s ease-in-out infinite;
}
.oeil__halo[hidden] { display: none; }
@keyframes oeil-veille {
  50% { box-shadow: inset 0 0 0 3px rgba(255, 240, 200, 1),
                    inset 0 0 34px rgba(240, 208, 128, .45),
                    0 0 52px rgba(255, 230, 170, .7); }
}
.oeil__halo--neuf { animation: oeil-pose .7s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes oeil-pose {
  0%   { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.oeil__halo--part { animation: oeil-part .32s ease-in forwards; }
@keyframes oeil-part { to { opacity: 0; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .oeil__cran--neuf, .oeil__halo, .oeil__halo--neuf, .oeil__jauge--chargee .oeil__nombre { animation: none; }
}

/* ── la colonne qui attend son Œil ────────────────────────────────────────
   Quand la jauge est pleine, tout le rouleau s'allume et le reste jusqu'à ce qu'un
   Œil vienne prendre le nombre. C'est le seul moment du jeu où l'on fixe une colonne
   en attendant quelque chose de précis — la tension a besoin d'un endroit où vivre. */
.oeil__colonne {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(71, 199, 199, .55),
              inset 0 0 40px rgba(71, 199, 199, .22),
              0 0 40px rgba(71, 199, 199, .3);
  background: linear-gradient(180deg, rgba(71, 199, 199, .16), rgba(71, 199, 199, .04) 45%, rgba(71, 199, 199, .16));
  animation: oeil-tension 1.7s ease-in-out infinite;
}
.oeil__colonne[hidden] { display: none; }
@keyframes oeil-tension {
  50% { box-shadow: inset 0 0 0 3px rgba(160, 250, 250, .95),
                    inset 0 0 60px rgba(71, 199, 199, .4),
                    0 0 70px rgba(120, 230, 230, .6); }
}
/* L'embrasement du premier instant, puis l'extinction quand l'Œil la prend. */
.oeil__colonne--eveil { animation: oeil-embrase .9s ease-out; }
@keyframes oeil-embrase {
  0%   { box-shadow: inset 0 0 0 10px rgba(220, 255, 255, 1), inset 0 0 90px rgba(160, 250, 250, .9), 0 0 110px rgba(160, 250, 250, .9); }
  100% { box-shadow: inset 0 0 0 2px rgba(71, 199, 199, .55), inset 0 0 40px rgba(71, 199, 199, .22), 0 0 40px rgba(71, 199, 199, .3); }
}
.oeil__colonne--prise { animation: oeil-prise .62s ease-in forwards; }
@keyframes oeil-prise {
  0%   { box-shadow: inset 0 0 0 8px rgba(255, 240, 200, 1), 0 0 90px rgba(240, 208, 128, .9); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .oeil__colonne, .oeil__colonne--eveil, .oeil__jauge--chargee .oeil__crans i { animation: none; }
}

/* La carte aspirée par la jauge. C'est un fac-similé : la vraie carte vit dans le
   canvas, elle paie, elle ne bouge pas. */
.oeil__aspire {
  position: absolute; border-radius: 10px; pointer-events: none;
  object-fit: contain;
  transform-origin: 50% 0;
  transition: transform .43s cubic-bezier(.55, 0, .35, 1), opacity .43s ease-in;
  filter: drop-shadow(0 0 18px rgba(240, 208, 128, .85));
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) { .oeil__aspire { display: none; } }

/* L'Œil collé, immobile pendant que le rouleau défile derrière lui. */
.oeil__fige {
  position: absolute; border-radius: 10px; pointer-events: none; z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(240, 208, 128, .7));
}
/* La fenêtre qui se referme sans avoir trouvé son Œil : elle s'éteint en rougissant,
   parce qu'un nombre qui disparaît sans rien dire se lit comme un bug. */
.oeil__jauge--perdue .oeil__crans i.on {
  background: rgba(139, 26, 74, .75) !important;
  box-shadow: none !important; animation: none !important;
}
.oeil__jauge--perdue .oeil__nombre { color: #ff9aa8; text-shadow: 0 0 10px rgba(139, 26, 74, .9); }
.oeil__colonne--perdue { animation: oeil-perdue .52s ease-in forwards; }
@keyframes oeil-perdue {
  0%   { box-shadow: inset 0 0 0 4px rgba(200, 60, 90, .9), 0 0 50px rgba(139, 26, 74, .7); }
  100% { opacity: 0; }
}

/* Le cran qui s'éteint : un tour vient de passer. */
.oeil__cran--steint { animation: oeil-steint .34s ease-in forwards; }
@keyframes oeil-steint {
  0%   { transform: scaleY(1.6); box-shadow: 0 0 18px rgba(255, 255, 255, .9); }
  100% { transform: scaleY(.55); background: rgba(212, 168, 67, .16); box-shadow: none; }
}

/* Pendant le tirage, la barre entière palpite : ce qui défile n'est pas encore acquis. */
.oeil__jauge--tirage .oeil__crans {
  box-shadow: inset 0 0 0 2px rgba(71, 199, 199, .9), 0 0 26px rgba(71, 199, 199, .55);
  animation: oeil-palpite .42s ease-in-out infinite;
}
.oeil__jauge--tirage .oeil__crans i.on {
  background: linear-gradient(180deg, #d8ffff, var(--turquoise));
  box-shadow: 0 0 12px rgba(140, 240, 240, .9);
}
@keyframes oeil-palpite { 50% { box-shadow: inset 0 0 0 3px rgba(180, 250, 250, 1), 0 0 40px rgba(120, 230, 230, .8); } }
@media (prefers-reduced-motion: reduce) { .oeil__jauge--tirage .oeil__crans { animation: none; } }

/* ── le turbo ──────────────────────────────────────────────────────────────
   Un interrupteur, pas une action : il doit se lire allumé ou éteint d'un coup
   d'œil, sans avoir à s'en souvenir. Éteint il reste sobre comme ses voisins ;
   allumé il prend la couleur de l'éclair et la garde. */
.pastille--turbo { min-width: 62px; padding: 0 10px; font-size: 26px; line-height: 1; }
.pastille--turbo.pastille--on {
  color: #10231f;
  background: linear-gradient(180deg, #9df0f0, var(--turquoise));
  border-color: #bffcfc;
  box-shadow: 0 0 22px rgba(71, 199, 199, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* Les trois forces de l'Œil, sur une seule carte : leur cadre est leur signature. */
.pt--large { grid-column: span 2; }
.pt__forces { display: flex; gap: 6px; margin-top: 6px; }
.pt__forces i {
  padding: 2px 10px; border-radius: 999px;
  border: 2px solid var(--c); color: var(--c);
  font-style: normal; font-size: 18px; font-weight: 800;
}

/* ── LA SÉRIE GRATUITE ─────────────────────────────────────────────────────
   Elle prend toute la colonne de gauche le temps qu'elle dure. Le bandeau qu'elle
   remplace tenait au-dessus du plateau, là où le regard n'est pas — et il disait en
   trois mots serrés ce qui mérite une place à soi. */
.serie {
  position: relative; overflow: hidden;
  padding: 14px 18px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(58, 30, 96, .92), rgba(20, 12, 40, .95));
  box-shadow: inset 0 0 0 2px rgba(212, 168, 67, .5), 0 10px 34px rgba(0, 0, 0, .6);
  text-align: center;
}
.serie[hidden] { display: none; }
/* Une lueur qui tourne lentement derrière : la série doit se sentir vivante même
   quand rien ne bouge. */
.serie__lueur {
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent, rgba(240, 208, 128, .16), transparent 45%);
  animation: serie-tourne 7s linear infinite;
}
@keyframes serie-tourne { to { transform: rotate(360deg); } }

.serie__titre {
  position: relative; margin: 0 0 10px;
  font-family: var(--font-title); font-size: 26px; font-weight: 900;
  letter-spacing: .06em; color: var(--gold-light);
  text-shadow: 0 0 20px rgba(240, 208, 128, .5);
}
.serie__restants { position: relative; line-height: 1; }
.serie__restants b {
  display: block; font-size: 74px; font-weight: 900; color: #fff8e6;
  text-shadow: 0 0 30px rgba(240, 208, 128, .75);
  font-variant-numeric: tabular-nums;
}
.serie__restants span { font-size: 20px; color: var(--text-muted); letter-spacing: .08em; }

.serie__jauge {
  position: relative; height: 8px; margin: 10px 0 12px;
  border-radius: 999px; background: rgba(10, 6, 20, .8);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 67, .3);
}
.serie__jauge i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 14px rgba(240, 208, 128, .8);
  transition: width .45s cubic-bezier(.3, 1, .4, 1);
}

.serie__mult, .serie__butin {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 12px; margin-top: 7px; border-radius: 12px;
  background: rgba(10, 6, 20, .55);
}
.serie__mult span, .serie__butin span { font-size: 19px; color: var(--text-muted); }
.serie__mult b {
  font-size: 34px; font-weight: 900; color: var(--turquoise);
  text-shadow: 0 0 18px rgba(71, 199, 199, .8);
  font-variant-numeric: tabular-nums;
}
.serie__butin b {
  display: flex; align-items: center; gap: 6px;
  font-size: 28px; font-weight: 900; color: var(--gold-light);
  font-variant-numeric: tabular-nums; font-style: normal;
}
.serie__butin b i { font-style: normal; }
.serie__mot {
  position: relative; margin: 9px 0 0; font-size: 16px; line-height: 1.3;
  color: var(--text-muted); font-style: italic;
}
@media (prefers-reduced-motion: reduce) { .serie__lueur { animation: none; } }

/* Le supplément dû aux jauges en cours : il doit se voir AVANT le clic. */
.option__sup { display: block; margin-top: 4px; color: var(--turquoise); font-style: normal; font-size: 17px; }

/* Le bouton qui ouvre le choix de mise : il PORTE la mise courante, pour qu'on la
   lise là où on la change. Plus large que les ronds, il ne peut pas être confondu
   avec eux — et « − » et « + » retrouvent leur sens littéral. */
.rond--mise {
  width: auto; min-width: 96px; height: 52px;
  padding: 0 14px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 22px;
}
.rond--mise b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Le « +2 » qui s'envole du compteur de tours. Il dit ce que le compteur ne peut pas
   dire : gagner deux tours ne le fait monter que d'un cran, le tour en cours étant
   décompté dans le même mouvement. */
.serie__plus {
  /* ⚠ Il part AU-DESSUS du compteur : posé dessus, il recouvre le chiffre à l'instant
     précis où le joueur le cherche. */
  position: absolute; left: 50%; top: -26px;
  font-style: normal; font-weight: 900; font-size: 46px; line-height: 1;
  color: #9df0f0; text-shadow: 0 0 22px rgba(71, 199, 199, .95), 0 3px 10px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.serie__plus[hidden] { display: none; }
.serie__plus--part { animation: serie-plus 1.5s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes serie-plus {
  0%   { transform: translate(-50%, 44px) scale(.6); opacity: 0; }
  18%  { transform: translate(-50%, 8px) scale(1.25); opacity: 1; }
  55%  { transform: translate(-50%, -6px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -48px) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .serie__plus--part { animation-duration: .01s; } }