/* ════════════════════════════════════════════════════════════
   Casino — thème web (miroir de Theme.java)
   ════════════════════════════════════════════════════════════ */
/* Le cosi, monnaie du casino. Les montants s'écrivent toujours avec « € » (Theme.money) :
   cette police d'un seul caractère dessine ce « € » en logo cosi. Elle est en tête de
   toutes les polices du casino (pages et canevas, voir js/theme.js), et ne couvre que
   U+20AC : le reste du texte garde sa police. Logo vectoriel : images/cosi.svg. */
/* Police intégrée (data:) et non lue dans fonts/cosi.woff : ouvert en file://, Safari refuse
   de charger une police depuis un fichier voisin, et l'on ne voyait que « € ». fonts/cosi.woff
   reste la source : si on la régénère, recopier ici son base64. Le glyphe va de la ligne de
   base au haut des chiffres de Lobster ; la fente entre ses deux pièces y est élargie pour
   rester visible en petit (images/cosi.svg garde le logo d'origine). */
@font-face { font-family: 'Cosi'; src: url(data:font/woff;base64,d09GRgABAAAAAAhQAAoAAAAAEQgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABZAAAADUAAABgaN9nJWNtYXAAAAGkAAAAKgAAADQADCD/Z2x5ZgAAAdgAAAXCAAAN/n88Gk5oZWFkAAAA9AAAADYAAAA2MGh3LmhoZWEAAAEsAAAAHgAAACQHAQK0aG10eAAAAZwAAAAIAAAACAVuADJsb2NhAAAB0AAAAAYAAAAGBv8AAG1heHAAAAFMAAAAGAAAACAABgT/bmFtZQAAB5wAAACcAAABDv1yPKxwb3N0AAAIOAAAABUAAAArcHltYwABAAAAAQAAcbjaoF8PPPUAAwPoAAAAAObrGbAAAAAA5usZsAAy//YDSQL4AAAAAwACAAAAAAAAeJxjYGRgYG75zwYkqxiMGAyZPRmAIiiACQBJqAK9AAB4nGNgZGBgYGL5y8DMAAJMDGgAABn5AQp4nGNgZtrOOIGBlYGFgTjABGPYAwEDg8IahTXMLf/ZGBiYWxh+weQYvzDtAVIKDAwAJFYIzQAAAAH0AAADegAyeJxjYGBgYmBgYAZiESDJCKZZGBSANAsQAvkKa/7/h5D3Q8HyDABeHgcoAAAAAAAABv8AAHichVVZcuM2EDXQjYWkJMu2lpn8TBVVsSo/KUuipJ9cIBfMaXKcnCGVj1Ql7zVAm5Y9CUGCWHt93X0nd8d//pRf/V/ud/1Z/7672/a7fjccLtcL3uv4q+Pz5XIenvfW6m//fJ5OyvRc2mDfsB9eZ8/DdTiDhvUXboLsYG3kY2yuYz/Y+ybBZPBhcnqp/8vpyO9q/WVzOm6Pp9Lj2262m80J3fiN/XYTE9puleJ/tzX7Vf2/rthg/E/bzfJnJFefL9vpfsKntN3tvE/9Dqu7/se+P7zsnvt9v3uGG/Hfl/75gBV4x8alYf6CXw8KvbHfcRj3w/XyvTYZnm8Xz5frJzdvXTSuvPlseH/sI5cCg+8Kcn15t3hif6xfxcL1WH8ABIbHw+adHw7jcLVdrQmO7WZdAVFG681mvUpmYBryFep9sdgEFDejtPDk8wqoW++vP7j2th3i9kgUV/EPRbPjO5UnFhlOA1TEe9qk1XpF+uvV6v+YfGxThE03+hFwI+Rkcx1G90xE+Yid4c2F54+7n7Tx1L5/TmT29r234W51K+v6xQbrsVF/GCOZObbm5DUdjdF2Uz80uPkXL+qcykLn0Ys8evF+7p3Hq0sXONDOO4e5OPwajPjk4L77iIQQXOZBo+RcwuVm6ZeqHkycLMWrCpmIyL2P3qXkfehUnYYYszoyy7yNJfn2TSkm7iaS9xI7r77TRrQJIkYz2i+6tsME7Iy7KHbFVzG8Jg5t1zvT28TFYgCXhKnHnzwpl/Ljrh1UicFr5FUlAyPqSufqDC210MQFhUZZZoWzN2vCBpFCNo8wdGhmuRWXxJdtaOF+0x9CnptgJqRdo/7eR7D31BUaNbwAG2pM3H0S0PEhtziWTV9HQ1GHnNjj0DLk4j8oRNMa5eKZcp43irfMMtSXp816eIph0AcxN+CWmVVcNVEQN9qjGL/4VkVtJGEJlhlWiRQka+DZZXCQxmzlNLlwf69FMNjZdKRbfReiTzmGB8VVSVF0IUkrClvxxdcSivgAbFrMQG0WwTrN5hmmiRAPCoAQHWXmKXigj30386HigwpRTYwlFbc5xoArRsUg1pvF9SSR5AuoNFAzRgoAqeEsCb6b64yaLQWIAG49nP/409e9zKrw1osbIVi4dRrLUMFXq0E6NfvSFWaYsIbcsWmSQEUfgblg5+iVNv4BKWgOuMu5SIkKrhXwHQFf5OdSgs7xFRIjBFwNXnHjZy9BkedRSnzxnDSxI6y7GffVtTprYCY6vSta2a3J4yttikHQ+kZaiC+PVO7e4g8Q+EKfEgNhKRaSgbf0qQR0WK2xFH0JnyJJQX3wFijNHrmhJYK4ZLs4TofDcou8nM31wVfxComWbOaPfikGPohPe44S54rtYrzqu6lOBh0te3YL8iEVackU5k8JRtr0k9iWvCUWzOYwodWAEqjZInLvPbJD9hG4zSEGpvqQuMYXRXbeaOoiEwLhxkCTEjJ4omnOaXffApsJjHMGHoudTJdgec6HxlteyM1cP1FNJ33JTImYLUa33FsDBxkUGY8BJfqUOjBXS16IOqCMOYRRjaMANm9hyeLRjqECYAbkp6wxoALEqmj2LTRn1sIaYg0HsQv1fZtqFrKUBCrAiyEF94Mya4a4ghRNCJ4p2aeQGaVdhTIRAQ4TH9JemYRwU+QpzlqUmQcGQQxfM05G+MK3gCgza6mEvqQ6xxhXJiFJeUGrQjdUjAjTwTMsaTFsvsBVFqTKjAn7m8phQVSW/AsDohQZLgSRzICSghML+6l7QD8BluC4CLnzC1BdQDRLKGIyQWCNNGwyGhyWcnCfYik7QS1hGSiakkF8DU/pjI7WSvRa2vE1reU9CttqR6/gDTmkWTIpxVdUINsjWwQW9sB6L0SA+bvoYwXb00JW5YqlXtUzrqzYBFuStqNrQespE02IhqZVFuciMtky7zbdw6xpS1VKVBwVp5Zt1nf5F747x44AAHicVY4xDoJAEEUfsKBGY2JjLCwobSBwARs6SwpqKQjZhLAJhKt4XgecBJxi8ubN380AJz54zOVhlj6Xz06mHwdEHJXNJhOKvShH8s9dkp45iNnzUPY5kykHknkqm00m5MpLOeLGu3CjLZt26uphxiSvmmG0ro/zNFuELilwjFhKGlomOmpWm5BTyWZYJkdPLCaVe9bE38svVz8gPXicY2BiwA+A8oxMLMn5xZkABOIBugAAAA==) format('woff'); unicode-range: U+20AC; font-display: block;
  font-weight: 100 900; font-style: normal; }   /* toutes graisses : sinon le navigateur fabrique un faux gras qui rebouche la fente du logo */
:root {
  /* Noms de jeux : Lobster (Google Fonts), script gras façon enseigne */
  --casey: 'Cosi', 'Lobster', 'Bradley Hand', 'Marker Felt', 'Comic Sans MS', cursive;
  --bg:        rgb(69, 0, 0);
  --bg-panel:  rgb(85, 0, 0);
  --bg-card:   rgb(105, 0, 0);
  --bg-felt:   rgb(130, 0, 0);
  /* Fond des écrans d'accueil (chargement, bienvenue, menu principal, grille des jeux) */
  /* Cartes des pages (Paramètres, Informations, Règles, Classement) : opaque, pour que
     les ombres de défilement des tableaux de probabilités se fondent dedans */
  --pg-carte: rgb(34, 9, 7);
  --pg-lisere: rgba(190, 160, 95, 0.55);
  --creme: rgb(228, 210, 165);
  --bg-degrade: radial-gradient(ellipse at 50% 35%, rgb(105, 4, 4), var(--bg) 55%, rgb(30, 0, 0));
  --gold:      rgb(255, 200, 50);
  --red:       rgb(220, 60, 60);
  --green:     rgb(50, 200, 90);
  --cyan:      rgb(50, 200, 220);
  --white:     rgb(230, 230, 240);
  --grey:      rgb(120, 120, 130);
  /* Police Lobster appliquée à tout le texte de l'UI (titres, explications, infos…).
     Les anciennes piles servent de repli si Lobster n'est pas chargée. */
  --menu-font: var(--casey);
  --sans: var(--casey);
  --sans-fallback: 'Cosi', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Anti-zoom global : seul le défilement vertical est autorisé → pas de pincement
   ni de double-tap pour zoomer, sur tout le casino.
   NE PAS repasser en `auto` : c'est cette ligne, et elle seule, qui désactive le
   double-tap zoom. Le faire en JS (annuler les taps rapprochés) revient à supprimer
   un clic sur deux dès qu'on tape vite — ça a déjà été essayé, voir js/touch.js. */
html, body { touch-action: pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Tactile : par défaut les canvas laissent défiler verticalement (un tap = clic) ;
   les canvas à glissement réel (grattage, curseurs) bloquent le scroll pour capter le doigt. */
canvas { touch-action: pan-y; }
.sc-cell, .lm-slider { touch-action: none; }
/* Carrousel des pages de jeux : on garde le scroll vertical mais on délègue
   le geste horizontal au JS pour que la page suive le doigt en direct. */
.pager, .page, .game-btn { touch-action: pan-y; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--white);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Écran de chargement (js/chargement.js) : logo Cosino et barre, au centre ── */
#chargement { position: fixed; inset: 0; z-index: 10000; background: var(--bg-degrade);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity 0.35s ease; }
#chargement.parti { opacity: 0; pointer-events: none; }
.chg-logo { width: min(72vw, 440px); height: auto; }
.chg-barre { width: min(64vw, 340px); height: 10px; border-radius: 5px; overflow: hidden;
  background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px rgba(255,200,50,0.35); }
.chg-rempli { width: 0; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, rgb(200,140,30), var(--gold)); transition: width 0.2s ease; }

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* hauteur visible réelle sur mobile (tient compte des barres du navigateur) */
  overflow: hidden;
}

/* Chaque écran occupe tout l'espace, masqué par défaut */
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }

/* Glisser depuis le bord gauche = Retour (cf. gamebase.js) : l'écran suit le doigt,
   un voile sombre et une flèche qui grossit apparaissent derrière, le nouvel écran arrive
   en glissant légèrement depuis la gauche. */
.swipe-ecran { box-shadow: -10px 0 24px rgba(0,0,0,0.55); z-index: 2; }
.swipe-fond { position: absolute; inset: 0; z-index: 1; background: var(--bg-degrade); pointer-events: none; }
.swipe-fleche { position: absolute; left: 18px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1.5px solid rgba(226,190,96,0.7); display: flex; align-items: center; justify-content: center;
  transform: scale(calc(0.6 + 0.4 * var(--p, 0))); opacity: calc(0.3 + 0.7 * var(--p, 0)); }
.swipe-fleche svg { width: 26px; height: 26px; fill: none; stroke: rgb(240,200,110); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.swipe-arrivee { animation: swipe-arrivee 0.3s cubic-bezier(.2,.8,.3,1); }
@keyframes swipe-arrivee { from { transform: translateX(-28%); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* ── Boutons génériques (équivalent Theme.makeButton) ───────── */
.btn {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 21px;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0 18px;
  height: 42px;
  cursor: pointer;
  position: relative;
  transition: filter 0.12s;
  user-select: none; -webkit-user-select: none;   /* le texte n'intercepte pas le clic */
}
.btn:hover { filter: brightness(1.25); }
/* Bouton désactivé : un seul gris uniforme, pas trop sombre */
.btn:disabled,
.btn:disabled:hover {
  background: rgb(108,108,116) !important;
  background-image: none !important;
  color: rgba(255,255,255,0.65) !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: default;
}
/* Dégradé commun à tous les boutons des jeux (Jouer, Remettre, Effacer, ×2…) : tiré de LA
   couleur de fond de chaque bouton. Un gris clair → sombre posé en « soft-light » éclaircit
   le haut et assombrit le bas sans délaver la teinte ; il suit donc la couleur que le jeu
   donne au bouton, même quand elle change en cours de partie (Encaisser vert…).
   :where() ramène la spécificité à zéro : .btn:disabled reprend toujours la main (gris uni).
   Exclus : le bouton Retour (gris voulu) et les boutons qui portent déjà leur propre
   dégradé en style (tables du Hold'em / Omaha). */
:where(.btn:not(.game-back):not(.btn-back-gray):not([style*="gradient"])),
:where(.kp-quick5 button, .kp-pad button, .kp-mods button, .kp-chipbtns button) {
  background-image: linear-gradient(180deg, rgb(200,200,200), rgb(40,40,40)) !important;
  background-blend-mode: soft-light;
}
.btn.wide { height: 48px; min-width: 220px; font-size: 21px; }
/* Style gris du vrai bouton retour des jeux */
.btn-back-gray {
  background: linear-gradient(135deg, rgb(26,26,34), rgb(54,54,66));
  border: 2px solid rgb(92,92,106);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 6px rgba(0,0,0,0.38);
}
/* Page Bienvenue : Nouvelle partie / Mode invité / Run sur une seule ligne */
#start-play .bottom-bar { flex-wrap: nowrap; gap: 10px; background: none; }   /* le dégradé de la page passe dessous */
#start-play .bottom-bar .btn { flex: 1 1 0; min-width: 0; font-size: 22px; height: 54px; padding: 0 10px; white-space: nowrap; }
@media (max-width: 820px) {
  #start-play .bottom-bar { gap: 8px; }
  /* « Nouvelle partie » et « Mode invité » se coupent sur deux lignes au lieu d'être
     rognés : white-space repasse en normal (la règle de base impose nowrap) et
     l'interligne est resserré pour que deux lignes tiennent dans les 50 px de la case.
     Ni la taille du bouton ni celle du texte ne changent. */
  #start-play .bottom-bar .btn {
    font-size: 16px; height: 50px; padding: 0 6px; overflow: hidden;
    white-space: normal; line-height: 1.05;
  }
  /* En bloc, le second mot force la coupure : « Mode invité » tient sur une ligne et ne se
     couperait pas tout seul. Sur ordinateur le span reste en ligne, donc rien ne change. */
  #start-play .bottom-bar .btn .l2 { display: block; }
  /* Quatre boutons : icône AU-DESSUS du libellé (sur deux lignes pour « Se connecter » et
     « Nouvelle partie »), comme la barre du menu. */
  #start-play .bottom-bar .bb-btn { flex-direction: column; gap: 3px; height: 66px; font-size: 14px; padding: 0 4px; border-radius: 13px; }
  #start-play .bottom-bar .bb-btn .bb-ico { width: 20px; height: 20px; }
}
/* Inscriptions en majuscules → seule la 1re lettre en capitale (lisibilité Lobster) */
.btn, .page-title { text-transform: lowercase; }
.btn::first-letter, .page-title::first-letter { text-transform: uppercase; }

/* ── Scrollbars discrètes ───────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: rgba(120,120,130,0.5); border-radius: 5px; }

/* ════════════════════════════════════════════════════════════
   ÉCRAN START — menu principal sur image de fond
   ════════════════════════════════════════════════════════════ */
#start-main {
  position: absolute; inset: 0;
  background: var(--bg-degrade);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  color: rgb(228, 210, 165);
  font-family: var(--casey);
}
/* Bandeau : logo + qui est connecté et son solde */
.acc-haut {
  width: min(720px, 100%); padding: 18px 16px 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;   /* solde centré en haut */
}
.acc-solde {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: rgba(16, 9, 7, 0.65); border: 1.3px solid rgba(190, 160, 95, 0.75); border-radius: 40px;
  padding: 6px 18px;   /* plus de jeton à gauche : marges égales des deux côtés */
}
.acc-solde > div { text-align: center; }
.acc-nom { font-size: 15px; opacity: .75; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-montant { font-size: 22px; color: var(--gold); line-height: 1.1; white-space: nowrap; }

.acc-col {
  flex: 1; width: min(720px, 100%); padding: 18px 16px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
/* JOUER : grande carte, couvertures des jeux qui défilent derrière */
.acc-jouer {
  position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0;
  /* plus haute (190–260 px avant) ; 38vh reste sans défilement sur un écran de 667 px */
  width: 100%; height: clamp(230px, 38vh, 340px);
  border-radius: 14px; border: 1.5px solid rgb(230, 190, 100);
  background: rgb(20, 6, 4); color: inherit; font: inherit; text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,230,160,.12);
  transition: transform .15s, box-shadow .15s;
}
.acc-jouer:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 2px rgba(255,200,50,.35); }
.acc-jouer:active { transform: scale(.99); }
.acc-defile {
  position: absolute; inset: 0; display: flex; gap: 10px; padding: 10px; width: max-content;
  animation: acc-defile 60s linear infinite;   /* transform seul : composité, aucune écriture DOM */
}
.acc-defile img { height: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 8px; }
@keyframes acc-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .acc-defile { animation: none; } }
.acc-jouer::after {          /* voile : le texte reste lisible sur les couvertures */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,4,2,.96) 0%, rgba(20,4,2,.82) 42%, rgba(20,4,2,.15) 100%);
}
.acc-texte { position: absolute; z-index: 1; left: 28px; top: 50%; transform: translateY(-50%); max-width: 60%; }
.acc-titre { font-size: clamp(48px, 9vw, 72px); color: var(--gold); line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.acc-sous { font-family: var(--casey); font-size: 18px; margin-top: 8px; opacity: .85; }   /* Lobster, comme le reste */
.acc-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--gold); color: rgb(40, 18, 4); border-radius: 30px; padding: 8px 20px; font-size: 20px;
}
/* Tuiles secondaires : icône + nom + ce qu'on y trouve */
.acc-tuiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.acc-tuile {
  background: rgba(16, 9, 7, 0.65); border: 1.3px solid rgba(190, 160, 95, 0.75); border-radius: 12px;
  padding: 18px 8px 16px; cursor: pointer; color: rgb(228, 210, 165); font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.acc-tuile svg { width: 38px; height: 38px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .12s; }
.acc-tuile .t { font-size: 22px; line-height: 1; }
.acc-tuile:hover { background: rgba(214, 178, 92, 0.94); color: rgb(28, 16, 8); border-color: rgb(255, 240, 200); transform: translateY(-2px); }
.acc-tuile:hover svg { stroke: rgb(28, 16, 8); }
/* Déconnexion : discrète, ce n'est pas une action qu'on cherche */
.acc-deco {
  align-self: center; margin-top: 4px;
  background: none; border: none; cursor: pointer; color: inherit; opacity: .55;
  font-family: var(--sans-fallback); font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
}
.acc-deco svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc-deco:hover { opacity: 1; background: rgba(255,255,255,.06); }
@media (max-width: 600px) {
  .acc-tuiles { grid-template-columns: repeat(2, 1fr); }
  .acc-texte { left: 18px; max-width: 75%; }
  .acc-sous { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   PAGES — Paramètres, Informations, Règles, Classement
   Même habillage partout : en-tête (retour, icône, titre, sous-titre) puis des cartes
   sombres à liseré doré, comme les tuiles du menu principal.
   ════════════════════════════════════════════════════════════ */
.pg-haut {
  flex-shrink: 0; position: relative;
  width: min(1100px, 100%); margin: 0 auto; padding: 18px 16px 14px;
  display: flex; align-items: center; justify-content: center;
}
.pg-retour {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--pg-carte); border: 1.3px solid var(--pg-lisere); border-radius: 30px;
  color: var(--creme); font-family: var(--casey); font-size: 18px;
  padding: 7px 16px 7px 10px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pg-retour svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-retour:hover { background: rgba(214, 178, 92, 0.94); color: rgb(28, 16, 8); border-color: rgb(255, 240, 200); }
.pg-entete { display: flex; align-items: center; gap: 14px; }
.pg-icone { width: 42px; height: 42px; flex-shrink: 0; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-titre { font-family: var(--casey); font-size: 40px; line-height: 1; color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.5); }

.pg-corps { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 24px; }
.pg-col { width: min(820px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pg-carte, .proba-block {
  background: var(--pg-carte); border: 1.3px solid var(--pg-lisere); border-radius: 14px;
  padding: 16px 20px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.pg-carte-titre {
  font-family: var(--casey); font-size: 24px; color: var(--gold); line-height: 1.1;
  margin-bottom: 6px;
}
/* Boutons d'action dans une carte : pilule à liseré doré (rouge pour une suppression) */
.pg-bouton {
  flex: 0 0 auto; background: none; cursor: pointer;
  border: 1.3px solid var(--gold); color: var(--gold); border-radius: 30px;
  font-family: var(--casey); font-size: 17px; padding: 7px 18px;
  transition: background .12s, color .12s;
}
.pg-bouton:hover { background: var(--gold); color: rgb(40, 18, 4); }
.pg-bouton.danger { border-color: rgb(230, 90, 80); color: rgb(240, 120, 110); }
.pg-bouton.danger:hover { background: rgb(200, 50, 45); color: #fff; }

@media (max-width: 600px) {
  .pg-haut { flex-direction: column; gap: 10px; padding-top: 12px; }
  .pg-retour { position: static; transform: none; align-self: flex-start; font-size: 16px; padding: 5px 14px 5px 8px; }
  .pg-icone { width: 32px; height: 32px; }
  .pg-titre { font-size: 30px; }
  .pg-corps { padding: 2px 10px 18px; }
  .pg-carte, .proba-block { padding: 12px 14px; }
}

/* Titres de page serif (JOUER, CLASSEMENT, PARAMÈTRES) */
.page-title {
  font-family: var(--menu-font);
  font-size: 38px;
  color: rgb(228, 210, 165);
  text-align: center;
  padding: 24px 0 10px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--grey);
  text-align: center;
  padding-bottom: 8px;
}

/* Barre de boutons en bas */
.bottom-bar {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 14px;
  background: var(--bg);
  border-top: 1px solid rgba(80,80,90,0.6);
}

/* Zone scrollable centrale */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-panel);
  padding: 16px 24px;
}

/* ── Lignes de sauvegarde ───────────────────────────────────── */
.save-row {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid rgba(80,80,90,0.8);
  border-radius: 12px;
  padding: 10px 12px 10px 16px;
  margin-bottom: 8px;
}
.save-row .info { flex: 1; }
.save-row .name { font-size: 18px; font-weight: bold; color: var(--white); }
.save-row .stats { font-size: 14px; color: var(--grey); margin-top: 4px; }
.save-row .actions { display: flex; gap: 6px; }
.save-row .actions .btn { height: 36px; width: 110px; padding: 0; }
.empty-msg { text-align: center; color: var(--grey); font-size: 18px; font-weight: bold; padding: 40px 0; }

/* ── Page Bienvenue : logo en grand au milieu, connexion et parties en bas ── */
#start-play .bv-logo { flex: 1 1 0; min-height: 0; width: min(1100px, 94vw); align-self: center; object-fit: contain; margin-top: 2vh;
  animation: bv-flotte 4s ease-in-out infinite; will-change: transform;
  /* Lueur dorée qui épouse la silhouette du logo : drop-shadow suit la transparence de
     l'image (un box-shadow, lui, dessinerait un rectangle). Calculée une fois sur le calque
     du logo ; le flottement ne fait que le déplacer. */
  filter: drop-shadow(0 0 16px rgba(255,196,80,0.42)) drop-shadow(0 0 42px rgba(255,120,40,0.22)); }
/* Le logo flotte très légèrement (transform seul : rien n'est repeint, fluide dans Safari) */
@keyframes bv-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bv-titre { font-family: var(--casey); font-size: 15px; color: rgb(201,179,138); margin: 0 2px 6px; }
/* Une partie = une carte cliquable : initiale, nom + date, solde, Jouer, corbeille */
.save-row.bv-carte { gap: 14px; padding: 14px 14px 14px 16px; cursor: pointer;
  background: rgba(20,0,2,0.55); border: 1.5px solid rgba(184,145,58,0.55); border-radius: 14px; transition: border-color .15s, background-color .15s; }
@media (hover: hover) { .save-row.bv-carte:hover { border-color: rgb(240,207,110); background: rgba(60,6,10,0.7); } }
.bv-av { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgb(90,15,22); border: 1.5px solid rgb(184,145,58); color: rgb(240,207,110); font-family: var(--casey); font-size: 24px; }
.bv-carte .info { min-width: 0; }
.bv-carte .name { color: rgb(243,226,180); font-size: 22px; }
.bv-date { font-size: 13.5px; color: rgb(191,167,124); margin-top: 2px; }
.bv-carte .bv-solde { margin-left: auto; font-size: 22px; }
.save-row .actions { gap: 8px; }
.save-row.bv-carte .actions .btn { height: 44px; font-size: 21px; }
.save-row .actions .btn.bv-jouer { width: 112px; }
/* Corbeille : case carrée, icône centrée (padding nul, gap nul) */
.save-row .actions .btn.bv-corbeille { width: 44px; padding: 0; gap: 0; }
.bv-corbeille .bb-ico { width: 21px; height: 21px; }
.bv-liste { flex: none; padding: 10px 14px 12px; }   /* mêmes marges latérales que la barre du bas : cases alignées sur ses boutons */
.bv-liste .empty-msg { padding: 14px 0 6px; font-size: 16px; }
/* Deux parties visibles (58 px de ligne + 8 px d'écart) : au-delà, la liste défile. */
/* Deux parties visibles (79 px de carte, liseré compris, + 8 px d'écart) : au-delà, la liste défile. */
.bv-parties { max-height: 168px; overflow-y: auto; overflow-x: hidden; }
.bv-parties .save-row:last-child { margin-bottom: 0; }
.bv-solde { margin-left: 14px; font-size: 16px; font-weight: normal; color: var(--gold); white-space: nowrap; }
@media (max-width: 820px) {
  .bv-liste { padding: 10px 10px 10px; }   /* .bottom-bar : 10 px sur téléphone */
  /* Téléphone : pas de solde ; un nom trop long se coupe (…) plutôt que de pousser les boutons. */
  /* Écran haut et étroit : le logo, centré dans tout l'espace libre, laissait un grand vide
     au-dessus des parties. Posé un peu plus bas, il se rapproche du reste de la page. */
  #start-play .bv-logo { object-position: center 62%; }
  .bv-parties { max-height: 148px; }   /* deux cartes de téléphone (69 px, liseré compris, + 8 px d'écart) */
  .bv-parties .save-row { padding: 8px 8px 8px 12px; gap: 8px; }
  .bv-parties .save-row .info { min-width: 0; }
  .bv-parties .save-row .name { display: flex; align-items: baseline; min-width: 0; font-size: 16px; }
  .bv-parties .save-row .name .bv-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .bv-parties .save-row .actions .btn { width: 84px; font-size: 16px; }
  .bv-parties .save-row.bv-carte { gap: 10px; padding: 12px 10px 12px 11px; }
  .bv-av { width: 40px; height: 40px; font-size: 20px; }
  .bv-parties .save-row.bv-carte .name { font-size: 18px; }
  /* une seule ligne, comme le nom : la date ne doit pas grandir la carte quand la place manque */
  .bv-date { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Téléphone : le solde passe SOUS le nom, devant la date. Le nom garde ainsi presque
     toute la largeur de la carte (un long nom et un solde à 7 chiffres ne tenaient pas sur
     une ligne : le nom tombait à « Maxim… »). `display: contents` sur .info fait de nom et
     date des cases de la grille, à côté du solde, sans changer le HTML. */
  .bv-parties .save-row.bv-carte { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "av nom nom act" "av solde date act"; row-gap: 1px; align-items: center; }
  .bv-carte .info { display: contents; }
  .bv-carte .bv-av { grid-area: av; }
  .bv-parties .save-row.bv-carte .name { grid-area: nom; align-self: end; }
  .bv-carte .bv-solde { grid-area: solde; margin-left: 0; font-size: 15px; align-self: start; }
  .bv-carte .bv-date { grid-area: date; align-self: start; margin: 2px 0 0 -4px; }
  .bv-carte .bv-date::before { content: '· '; }
  .bv-carte .actions { grid-area: act; }
  .save-row.bv-carte .actions { gap: 6px; }
  .save-row.bv-carte .actions .btn { height: 42px; font-size: 17px; }
  .save-row .actions .btn.bv-jouer { width: 66px; }
  .save-row .actions .btn.bv-corbeille { width: 42px; }
}
/* Très petits téléphones (iPhone SE…) : la carte se resserre pour laisser au nom ~50 px */
@media (max-width: 360px) {
  .bv-parties { max-height: 160px; }   /* cartes de 75 px ici (+ 8 px d'écart) */
  .bv-parties .save-row.bv-carte { gap: 6px; padding: 12px 8px 12px 9px; }
  .bv-av { width: 34px; height: 34px; font-size: 18px; }
  .save-row.bv-carte .actions { gap: 5px; }
  .save-row .actions .btn.bv-jouer { width: 54px; font-size: 15px; }
  .save-row .actions .btn.bv-corbeille { width: 40px; }
}

/* ── Classement : onglets des rubriques, puis podium des trois premiers ── */
.lb-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lb-onglet {
  background: var(--pg-carte); border: 1.3px solid var(--pg-lisere); border-radius: 30px;
  color: var(--creme); font-family: var(--casey); font-size: 17px; padding: 7px 16px; cursor: pointer;
  transition: background .12s, color .12s;
}
.lb-onglet:hover { border-color: var(--gold); }
.lb-onglet.sel { background: var(--gold); border-color: var(--gold); color: rgb(40, 18, 4); }
.lb-carte { padding-bottom: 0; overflow: hidden; }
/* Le podium occupe toute la hauteur libre de l'écran : les marches s'allongent avec lui */
#start-lb .pg-corps { display: flex; flex-direction: column; }
#start-lb .pg-col { flex: 1; }
#lb-list { flex: 1; display: flex; flex-direction: column; min-height: 340px; }
#lb-list .lb-carte { flex: 1; display: flex; flex-direction: column; }
.lb-carte .pg-carte-titre { text-align: center; font-size: 28px; margin: 4px 0 10px; }
.lb-podium { flex: 1; display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.lb-marche { flex: 1 1 0; max-width: 260px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.lb-joueur { width: 100%; text-align: center; padding: 0 4px 12px; }
.lb-medaille {
  width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans-fallback); font-weight: bold; font-size: 20px; color: rgb(40, 18, 4);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.45);
}
.lb-nom { font-size: 20px; color: var(--creme); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-size: 17px; color: var(--gold); margin-top: 2px; white-space: nowrap; }
.lb-socle {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
  font-family: var(--casey); font-size: 44px; color: rgba(0,0,0,.3);
}
.r1 .lb-medaille, .r1 .lb-socle { background: linear-gradient(180deg, rgb(255, 222, 110), rgb(214, 160, 30)); }
.r2 .lb-medaille, .r2 .lb-socle { background: linear-gradient(180deg, rgb(235, 238, 245), rgb(160, 166, 180)); }
.r3 .lb-medaille, .r3 .lb-socle { background: linear-gradient(180deg, rgb(235, 175, 115), rgb(170, 105, 50)); }
.r1 .lb-socle { height: 62%; }
.r2 .lb-socle { height: 46%; }
.r3 .lb-socle { height: 33%; }
.lb-marche.vide .lb-joueur { opacity: .35; }
.r1 .lb-medaille { width: 58px; height: 58px; font-size: 24px; }
.r1 .lb-nom { font-size: 24px; }
.r1 .lb-val { font-size: 19px; }
.lb-vide { text-align: center; color: var(--creme); opacity: .6; font-size: 18px; padding: 30px 0 34px; }
@media (max-width: 600px) {
  .lb-onglets { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .lb-onglets::-webkit-scrollbar { display: none; }
  .lb-onglet { flex-shrink: 0; font-size: 15px; padding: 6px 13px; }
  .lb-carte .pg-carte-titre { font-size: 22px; }
  .lb-podium { gap: 6px; }
  .lb-nom { font-size: 16px; }
  .r1 .lb-nom { font-size: 18px; }
  .lb-val, .r1 .lb-val { font-size: 14px; }
  .lb-medaille { width: 38px; height: 38px; font-size: 17px; }
  .r1 .lb-medaille { width: 46px; height: 46px; font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════
   ÉCRAN MENU — grille de jeux
   ════════════════════════════════════════════════════════════ */
#menu .header {
  background: var(--bg);
  padding: 18px 20px 8px;
  text-align: center;
  border-bottom: 1px solid var(--grey);
}
#menu .header .balance { font-size: 18px; font-weight: bold; color: var(--gold); }
#menu .header .stats { font-size: 14px; color: var(--grey); margin-left: 20px; }

#menu { background: var(--bg-degrade); }
#menu .bottom-bar { background: none; }
/* Boutons sombres à liseré doré, icône dorée : barre du menu, barre de l'accueil, et
   Jouer / corbeille des parties. Couleur de FOND seulement : le reflet commun des .btn
   (dégradé en soft-light, plus haut) se pose dessus, comme sur tous les autres boutons. */
.btn.bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background-color: rgb(52,8,15); border: 1.5px solid rgb(184,145,58); color: rgb(243,226,180); }
.bb-btn .bb-ico { width: 20px; height: 20px; flex: none; color: rgb(230,190,90); }
/* Le ::first-letter de .btn ne s'applique pas à un bouton flex qui commence par une icône :
   la capitale initiale est remise sur le libellé lui-même. */
.bb-btn .bb-txt::first-letter { text-transform: uppercase; }
#menu .bottom-bar .bb-btn.is-back { color: #fff; }
#menu .center {
  flex: 1;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.arrow {
  width: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
}
.arrow svg { width: 28px; height: 104px; }
.arrow.disabled { visibility: hidden; }
/* Flèches dans la barre du bas : version téléphone uniquement */
.bar-arrow { display: none; width: auto; padding: 0 4px; }
.bar-arrow svg { width: 24px; height: 36px; }

.pager {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.page {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  padding: 18px 22px;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.game-btn {
  position: relative;
  min-width: 0; min-height: 0;   /* cases strictement égales (le libellé ne peut pas élargir la cellule) */
  border-radius: 18px;
  border: 1.5px solid;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-width 0.1s, border-color 0.12s;
}
/* Couche couverture : c'est elle qu'on zoome au survol (pas toute la case). */
.game-btn .cover {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
  z-index: 0;
}
.game-btn .overlay {
  position: absolute; inset: 0;
  /* Voile allégé (0,51 uniforme avant) : l'illustration ressort, et seul le bas de la case
     s'assombrit franchement. Au survol on l'estompe par l'opacité (un dégradé ne se fond
     pas d'un état à l'autre, l'opacité si — et sans repeindre). */
  background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.26) 50%, rgba(0,0,0,0.66) 100%);
  transition: opacity 0.2s;
  z-index: 1;
}
/* Survol (souris) : la couverture zoome, le titre se redresse à 0°, la case bouge peu */
@media (hover: hover) {
  /* La case se soulève, et son liseré s'allume dans la couleur du jeu (--halo, posé en JS) */
  .game-btn:hover {
    border-width: 3px;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 18px 2px var(--halo, rgba(255,255,255,0.35)), 0 14px 30px rgba(0,0,0,0.6);
    z-index: 5;
  }
  .game-btn:hover .cover { transform: scale(1.14); }
  .game-btn:hover .overlay { opacity: 0.45; }
  .game-btn:hover .label { transform: rotate(0deg); }
}
/* Version tactile (sans survol) : même animation appliquée au clic (classe ajoutée en JS) */
.game-btn.tapped {
  border-width: 3px;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 18px 2px var(--halo, rgba(255,255,255,0.35)), 0 14px 30px rgba(0,0,0,0.6);
  z-index: 5;
}
.game-btn.tapped .cover { transform: scale(1.14); }
.game-btn.tapped .overlay { opacity: 0.45; }
.game-btn.tapped .label { transform: rotate(0deg); }
.game-btn .label {
  position: relative;
  z-index: 2;
  font-family: var(--casey);
  font-size: 44px;
  font-weight: bold;
  line-height: 1;
  color: rgb(196,196,202);
  text-align: center;
  /* Ombre portée nette (décalée, sans flou) + léger halo sombre : le nom se détache de
     l'illustration maintenant que le voile est plus clair. */
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.35);
  padding: 0 8px;
  white-space: nowrap;
  /* Version ordinateur : nom écrit en diagonale à 47°, centré dans la case */
  transform: rotate(-47deg);
  transform-origin: center;
  transition: transform 0.35s ease;
  pointer-events: none;
}

.placeholder {
  border-radius: 18px;
  background: rgb(34, 14, 24);
  border: 1.6px dashed rgb(95, 75, 50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(120, 108, 128);
  font-size: 15px;
  font-weight: bold;
}

.dots {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  display: none;            /* ordinateur : les flèches latérales indiquent déjà la page */
  justify-content: center;
  gap: 10px;
}
/* Indicateur de page : deux barrettes de 22 × 6 px (des ronds de 8 px avant) */
.dot {
  width: 22px; height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);   /* les deux barrettes restent estompées… */
  cursor: pointer;
}
/* …c'est ce repère doré qui marque la page courante, en coulissant de l'une à l'autre.
   Les deux barrettes font 22 px avec 10 px d'écart, donc un pas de 32 px : centrées, la
   première commence à -27 px du milieu. Même courbe et même durée que le glissement des
   pages, pour que le repère et la grille bougent d'un seul geste. */
.dot-slider {
  position: absolute; top: 0; left: 50%; margin-left: -27px;
  width: 22px; height: 6px; border-radius: 999px;   /* pilule : s'étire sans déformer */
  background: rgb(240,207,110);
  box-shadow: 0 0 6px rgba(240, 207, 110, 0.6);
  transform: translateX(0);
  /* Repli si l'animation n'est pas déclenchée : le repère glisse quand même. */
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.dots.p1 .dot-slider { transform: translateX(32px); }

/* Échange des barrettes : le repère s'étire jusqu'à relier les deux (22 + 10 + 22 = 54 px)
   puis se rétracte sur celui d'arrivée. La largeur grandit depuis le bord gauche, fixe :
   vers la droite il suffit donc d'élargir, vers la gauche on ramène d'abord le bord gauche
   au départ. Les animations l'emportent sur la transition ci-dessus pendant leur durée.

   Le rythme est porté par une courbe PAR PALIER (le `linear` global laisse chaque segment
   utiliser la sienne) : le bord qui avance part vite et arrive en douceur, puis celui qui
   suit fait de même. Une seule courbe sur l'ensemble donnait un à-coup au milieu, là où le
   mouvement change de bord. */
@keyframes dot-etire-droite {
  0%   { width: 22px; transform: translateX(0);    animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); }
  48%  { width: 54px; transform: translateX(0);    animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); }
  100% { width: 22px; transform: translateX(32px); }
}
@keyframes dot-etire-gauche {
  0%   { width: 22px; transform: translateX(32px); animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); }
  48%  { width: 54px; transform: translateX(0);    animation-timing-function: cubic-bezier(0.34, 0, 0.2, 1); }
  100% { width: 22px; transform: translateX(0); }
}
/* 0,38 s : plus vif que les 0,52 s d'avant, et au plus près du glissement des pages
   (0,34 s) pour que le repère et la grille restent d'un seul mouvement. */
.dot-slider.vers-droite { animation: dot-etire-droite 0.38s linear; }
.dot-slider.vers-gauche { animation: dot-etire-gauche 0.38s linear; }

/* Vue statistiques / historique : résumé en tuiles, puis tableau dans un cadre à liseré
   doré (mêmes cartes sombres que l'accueil et la barre du bas). */
#stats-card, #history-card {
  flex: 1;
  min-height: 0;            /* permet à la liste de défiler à l'intérieur (sinon pousse la barre du bas hors écran) */
  padding: 18px 24px 12px;
  display: none;
  flex-direction: column;
  gap: 12px;
}
#stats-card.active, #history-card.active { display: flex; }
.st-resume { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.st-resume:empty { display: none; }
.st-tuile { background: rgba(16,9,7,0.65); border: 1.3px solid rgba(190,160,95,0.75); border-radius: 12px; padding: 10px 14px; }
.st-lib { font-family: var(--casey); font-size: 14px; color: rgb(201,179,138); }
.st-val { font-family: var(--casey); font-size: 26px; color: var(--gold); line-height: 1.15; white-space: nowrap; }
.st-plus { color: rgb(90,215,120) !important; }
.st-moins { color: rgb(240,100,100) !important; }
.st-egal { color: var(--gold) !important; }
.stats-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.3px solid rgba(190,160,95,0.75);
  border-radius: 12px;
  background: rgba(16,9,7,0.65);
}
table.stats {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--casey);
  font-weight: bold;
}
table.stats th {
  background: rgb(34,6,8);
  color: rgb(201,179,138);
  font-family: var(--sans);
  font-size: 14px;
  height: 40px;
  text-align: right;
  padding: 0 12px;
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid rgba(190,160,95,0.45);
}
table.stats th:first-child { text-align: left; padding-left: 16px; }
/* En-têtes triables (Statistiques) : la colonne active passe en or, avec sa flèche */
#stats-tete th { cursor: pointer; user-select: none; -webkit-user-select: none; }
@media (hover: hover) { #stats-tete th:hover { color: rgb(243,226,180); } }
#stats-tete th.st-actif { color: var(--gold); }
.st-fleche { display: inline-block; margin-left: 4px; font-size: 10px; vertical-align: 1px; }
.st-fleche:empty { display: none; }
table.stats td {
  color: rgb(243,226,180);
  font-size: 16px;
  height: 40px;
  text-align: right;
  padding: 0 12px;
  border-bottom: 1px solid rgba(190,160,95,0.12);   /* lignes fines au lieu de l'alternance de rouges */
}
table.stats td:first-child { text-align: left; padding-left: 16px; }
table.stats tr:last-child td { border-bottom: none; }
@media (hover: hover) { table.stats tbody tr:hover td { background: rgba(255,214,110,0.06); } }
table.stats td.st-vide { text-align: center; color: rgb(191,167,124); height: 60px; }
/* Nom du jeu : pastille et texte dans la couleur du jeu (comme sa tuile du menu) */
.st-jeu { display: inline-flex; align-items: center; gap: 9px; }
.st-jeu i { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
/* Taux de victoire : valeur + petite barre dorée */
.st-taux { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 64px; }
.st-taux i { display: block; width: 64px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.st-taux b { display: block; height: 100%; background: rgb(240,207,110); }
/* Historique : gain / perte en pastille, détail en retrait */
.st-pastille { display: inline-block; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.st-pastille.st-plus { background: rgba(60,180,90,0.16); }
.st-pastille.st-moins { background: rgba(220,70,70,0.16); }
.st-pastille.st-egal { background: rgba(255,200,50,0.12); }
table.stats td.st-detail { color: rgb(170,150,115); font-weight: normal; }

/* ════════════════════════════════════════════════════════════
   ÉCRAN PARAMÈTRES
   ════════════════════════════════════════════════════════════ */
#settings { background: var(--bg-degrade); }
/* Une ligne par réglage : texte à gauche, interrupteur ou bouton à droite */
.settings-row, .settings-pwrow {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 0; border-top: 1px solid rgba(190, 160, 95, 0.16);
}
.pg-carte-titre + .settings-row, .pg-carte-titre + .settings-pwrow { border-top: none; }
.settings-row .txt, .settings-pwtext { flex: 1; min-width: 0; }
.settings-row .txt .t1, .settings-pwtitle { font-size: 18px; color: var(--creme); }
.settings-row .txt .t2, .settings-pwdesc { font-family: var(--sans-fallback); font-size: 12.5px; color: var(--creme); opacity: .6; margin-top: 3px; line-height: 1.35; }
.settings-volume input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 0 1 220px; min-width: 110px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.14); accent-color: var(--gold); cursor: pointer;
}
.settings-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); border: 2px solid rgb(40, 18, 4); box-shadow: 0 0 0 1.5px var(--gold);
}
.settings-volume input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid rgb(40, 18, 4);
}
.settings-volume .volume-val { flex: 0 0 48px; text-align: right; font-size: 17px; color: var(--gold); }
@media (max-width: 600px) {
  /* Téléphone : le curseur du volume passe sous son texte */
  .settings-volume { flex-wrap: wrap; row-gap: 10px; }
  .settings-volume .txt { flex-basis: 100%; }
  .settings-volume input[type=range] { flex: 1 1 auto; }
}

/* Interrupteur : doré quand il est actif */
.toggle {
  width: 54px; height: 30px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.toggle.on { background: linear-gradient(180deg, rgb(255, 214, 90), rgb(214, 160, 30)); border-color: rgb(255, 230, 150); }
.toggle .thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgb(235, 225, 205); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform 0.18s;
}
.toggle.on .thumb { transform: translateX(24px); background: #fff; }

/* Aperçu jetons (canvas) */
#chip-preview {
  margin-top: 30px;
  width: 100%;
  max-width: 500px;
  height: 110px;
  background: rgba(30, 8, 16, 0.78);
  border: 1px solid rgba(90, 70, 18, 0.47);
  border-radius: 14px;
}

/* ── Écran générique "bientôt disponible" (VIP, Règles, jeux) ── */
.coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg-panel);
}
.coming-soon .cs-title {
  font-family: var(--menu-font);
  font-size: 40px;
  color: rgb(228, 210, 165);
}
.coming-soon .cs-msg { color: var(--grey); font-size: 16px; }

/* ════════════════════════════════════════════════════════════
   ÉCRAN RÈGLES
   ════════════════════════════════════════════════════════════ */
#rules { background: var(--bg-degrade); }
.rules-split {
  flex: 1; min-height: 0; width: min(1100px, 100%); margin: 0 auto;
  display: flex; gap: 14px; padding: 4px 16px 20px;
}
.rules-side, .rules-content {
  background: var(--pg-carte); border: 1.3px solid var(--pg-lisere); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); overflow-y: auto;
}
.rules-side { flex-shrink: 0; width: 200px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
/* Chaque jeu garde sa couleur : un point devant le nom, puis tout le bouton une fois choisi */
.rule-side {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  width: 100%; min-height: 36px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: rgba(228, 210, 165, 0.75);
  font-family: var(--casey); font-size: 16px; text-align: left; white-space: nowrap;
  padding: 0 12px; cursor: pointer;
}
.rule-side::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.rule-side:hover { background: rgba(255,255,255,0.06); color: var(--creme); }
.rule-side.sel { color: #fff; background: var(--c-fond); border-color: var(--c-bord); }
.rules-content { flex: 1; min-width: 0; padding: 18px 24px; font-size: 18px; color: rgb(230,230,240); }
@media (max-width: 700px) {
  /* Téléphone : la liste des jeux devient une rangée de pastilles qui défile de côté */
  .rules-split { flex-direction: column; gap: 10px; padding: 2px 10px 14px; }
  .rules-side { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px; gap: 4px; scrollbar-width: none; }
  .rules-side::-webkit-scrollbar { display: none; }
  .rule-side { width: auto; }
  .rules-content { padding: 14px 16px; }
}
.rules-content h2 { color: var(--gold); font-size: 30px; font-weight: normal; margin-bottom: 4px; }
.rules-content h3 {
  color: var(--creme); font-size: 21px; font-weight: normal; margin-top: 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(190, 160, 95, 0.25); padding-bottom: 3px;
}
.rules-content ul { margin: 4px 0 6px 18px; }
.rules-content li { margin: 3px 0; line-height: 1.5; }
.rules-content .g { color: #80E090; font-weight: bold; }
.rules-content .r { color: #E06060; font-weight: bold; }
.rules-content .o { color: #FFC832; }
.rules-content table { border-collapse: collapse; margin: 6px 0; }
.rules-content td, .rules-content th { padding: 3px 10px; font-size: 12px; text-align: left; }
.rules-content th { color: #D8C890; border-bottom: 1px solid #5a3a2a; }
.rules-content td.l { color: #B0B0C0; }
.rules-content td.v { color: #FFC832; font-weight: bold; }

/* ════════════════════════════════════════════════════════════
   ÉCRAN STATISTIQUES
   ════════════════════════════════════════════════════════════ */
.vip-sub { position: absolute; inset: 0; flex-direction: column; }
.vip-box {
  background: rgba(18, 4, 4, 0.9);
  border: 4px solid rgba(180, 130, 30, 0.35);
  border-radius: 22px;
  padding: 44px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.vip-suits { font-size: 18px; color: rgba(160,120,40,0.67); margin-bottom: 12px; }
.vip-title { font-family: var(--menu-font); font-weight: bold; font-size: 34px; color: var(--gold); }
.vip-stars { font-size: 13px; color: rgb(170,130,45); margin-top: 6px; }
.vip-subtle { font-style: italic; font-size: 13px; color: rgb(140,115,80); margin-top: 10px; }
.vip-sep {
  width: 280px; height: 1px; margin: 28px 0 24px;
  background: linear-gradient(to right, transparent, rgba(180,130,30,0.55), transparent);
}
.vip-codelbl { font-size: 11px; font-weight: bold; color: rgb(190,155,70); letter-spacing: 1px; }
.vip-input {
  width: 270px; margin-top: 10px; padding: 10px 14px;
  background: rgb(8,2,2); color: var(--gold); border: 1px solid rgb(130,90,20);
  border-radius: 4px; font-family: 'Cosi', monospace; font-weight: bold; font-size: 18px; text-align: center;
  -webkit-text-security: disc; text-security: disc;   /* code masqué sans type="password" */
}
.vip-err { font-size: 12px; font-weight: bold; color: rgb(230,80,80); margin-top: 8px; min-height: 16px; }
.vip-enter {
  width: 270px; height: 46px; margin-top: 10px;
  background: linear-gradient(to bottom, rgb(185,138,28), rgb(130,90,12));
  color: rgb(20,10,0); border: 1px solid rgba(255,220,100,0.4);
  border-radius: 12px; font-weight: bold; font-size: 15px; cursor: pointer;
}
.vip-enter:hover { background: linear-gradient(to bottom, rgb(230,180,55), rgb(185,135,25)); }
.vip-backbtn {
  width: 270px; height: 38px; margin-top: 10px;
  background: rgba(40,8,8,0.55); color: rgb(150,110,90);
  border: 1px solid rgba(100,50,50,0.4); border-radius: 12px; font-size: 13px; cursor: pointer;
}
.vip-backbtn:hover { background: rgba(70,18,18,0.8); }

.vip-banner {
  background: linear-gradient(rgb(116,10,24), rgb(86,6,16)); color: var(--white);
  font-size: 22px; font-weight: bold; text-align: center; padding: 10px 16px;
  border-bottom: 2px solid rgba(226,196,104,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.vip-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 10px;
  background: var(--bg);
}
.vip-nav-side { display: flex; }
.vip-nav-left { justify-content: flex-end; }
.vip-nav-right { justify-content: flex-start; }
.vip-scroll { flex: 1; overflow-y: auto; background: var(--bg-panel); padding: 14px 18px; }

/* ── Probabilités : une carte par jeu ────────────────────────
   Avant : des blocs collés les uns aux autres, séparés par un simple filet, titre et
   métadonnées empilés à gauche. Chaque jeu est maintenant une carte autonome, avec son
   en-tête (nom à gauche, avantage maison et RTP en pastilles à droite) et son tableau
   sur un fond légèrement creusé — on repère un jeu d'un coup d'œil en défilant. */
.proba-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(190, 160, 95, 0.25); padding-bottom: 8px;
}
.proba-title { font-size: 24px; color: var(--gold); }
.proba-meta { display: flex; gap: 8px; font-size: 13px; }
/* Pastilles : la valeur porte la couleur, le libellé reste discret. */
.proba-tag {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; padding: 2px 10px;
}
.proba-tag .k { color: rgb(150,142,155); font-size: 12px; }
.proba-edge { font-weight: bold; color: rgb(235,150,60); }
.proba-rtp { font-weight: bold; color: rgb(70,210,110); }
.proba-body {
  /* Lobster comme le reste de la section. Les blocs sont alignés à coups d'espaces
     (padEnd/padStart dans vip.js), ce qui supposait une police à pas fixe : on force donc
     les chiffres en largeur constante (tabular-nums) pour que les colonnes de nombres
     restent d'aplomb malgré la police proportionnelle. */
  font-family: var(--casey); font-variant-numeric: tabular-nums;
  font-size: 15px; line-height: 1.45; color: rgb(214,208,220);
  white-space: pre; margin: 0; overflow-x: auto;
  /* Certains tableaux (Craps, Sic Bo) sont trop larges pour un téléphone, même en tout
     petit : le défilement horizontal est inévitable. On le rend lisible plutôt que subi —
     ombre portée du côté où il reste du contenu, qui disparaît une fois arrivé au bout.
     Les deux couches « local » masquent l'ombre quand il n'y a rien de plus à voir. */
  background:
    linear-gradient(to right, var(--pg-carte) 40%, rgba(34,9,7,0)) left center,
    linear-gradient(to left,  var(--pg-carte) 40%, rgba(34,9,7,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.45), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: none;   /* la barre par bloc ferait 20 barres empilées */
}
.proba-body::-webkit-scrollbar { display: none; }

/* Tables stats VIP */
.vip-tbl-title { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.vip-search { display: flex; gap: 8px; margin-bottom: 8px; }
.vip-search input { flex: 1; min-width: 0; background: rgb(20,12,16); color: #fff; border: 1px solid rgb(90,70,75);
  border-radius: 8px; padding: 8px 12px; font-size: 15px; }
.vip-search .btn { flex: 0 0 auto; height: 38px; font-size: 15px; }
.vip-table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: 13px; }
.vip-table th {
  background: rgb(28,8,16); color: var(--gold); font-weight: bold;
  padding: 6px 10px; text-align: left; border: 1px solid rgba(80,80,90,0.4);
}
.vip-table td { padding: 5px 10px; color: var(--white); border: 1px solid rgba(80,80,90,0.3); }
.vip-table tr.row-total td { background: rgb(50,40,10); color: var(--gold); font-weight: bold; }
.vip-table tr.row-archive td { background: rgb(35,25,50); color: rgb(170,130,210); font-style: italic; }

/* Gestion des jetons */
.tok-section-title { font-size: 14px; font-weight: bold; margin-bottom: 8px; }
.tok-card {
  background: var(--bg-card); border: 1px solid rgb(75,18,32);
  border-radius: 12px; padding: 14px 16px; max-width: 640px;
}
.tok-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tok-row label { color: var(--white); font-size: 14px; min-width: 64px; }
.tok-card select {
  background: var(--bg-card); color: var(--white); border: 1px solid var(--grey);
  border-radius: 4px; padding: 5px 8px; font-size: 14px;
}
.tok-amt {
  background: rgb(10,4,8); color: var(--gold); border: 1px solid rgb(60,50,15);
  border-radius: 3px; padding: 5px 8px; font-family: 'Cosi', monospace; font-weight: bold;
  font-size: 14px; width: 120px;
}
.tok-bal { color: var(--gold); font-size: 14px; margin-left: 8px; }
.tok-name {
  background: rgb(10,4,8); color: #fff; border: 1px solid rgb(90,70,75);
  border-radius: 6px; padding: 6px 10px; font-size: 14px; width: 160px;
}
.tok-quick {
  background: rgb(80,18,34); color: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: bold; cursor: pointer;
}
.tok-quick:hover { filter: brightness(1.3); }
.tok-msg { font-size: 14px; margin-left: 8px; }

/* ════════════════════════════════════════════════════════════
   SOCLE DES JEUX
   ════════════════════════════════════════════════════════════ */
.game-screen { background: var(--bg); }
.game-header {
  display: flex; align-items: stretch; gap: 10px;
  padding: 12px 16px 4px;
}
.game-back { min-width: 130px; flex-shrink: 0; height: auto; font-size: 20px; }
.game-banner {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 12px;
  font-family: var(--casey); font-weight: 800;
  letter-spacing: 1px;   /* casse de titre appliquée en JS (titleCaseBanner) */
  /* fond (dégradé de la couleur du jeu, clair au centre) + couleur du texte définis en JS */
}
.game-banner::before {        /* patern.webp recoloré (traits = couleur du texte) en data-URL, pleine largeur */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--paturl) repeat-x center / auto 100%;
  opacity: 0.15;
}
.game-banner::after {         /* halo (couleur du champ) serré derrière le texte : efface le patern → lisible */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* --fade est déjà plafonné à 30 % de la largeur, en pixels, par _styleBanner (gamebase.js) :
     un min(px, %) écrit ici est refusé par Chrome et Edge, qui effaçaient alors ce fondu. */
  background: radial-gradient(ellipse var(--fade,140px) 70px at 50% 50%,
     var(--glowc, #1e3a72) 0%, var(--glowc, #1e3a72) 55%, transparent 100%);
}
.game-banner .gb-text {
  position: relative; z-index: 1; line-height: 1; white-space: nowrap; font-size: 36px;
}
.game-spacer { display: none; }
.game-statsbar {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 2px 18px 8px; gap: 4px;
  /* Fond opaque : sans lui, la barre est transparente et la police cursive (Lobster),
     qui déborde un peu de la boîte du texte, laisse de fins « restes » d'encre quand la
     mise / le résultat disparaît en fin de manche (rien ne vient les repeindre). */
  background: var(--bg);
}
.game-statsbar .g-balance { font-family: var(--casey); font-weight: bold; color: var(--gold); font-size: 20px; white-space: nowrap; }
.game-statsbar .g-stats { font-family: var(--casey); font-weight: bold; color: var(--grey); font-size: 20px; margin-left: 22px; white-space: nowrap; }
/* margin-right:auto = le SEUL point où la barre absorbe son espace libre. Tout ce qui
   suit (chrono du Run, puis l'œil et le ℹ que les jeux ajoutent après) se retrouve donc
   collé au bord droit, dans l'ordre du DOM — et le chrono passe juste avant l'œil/le ℹ. */
.game-statsbar .g-net { font-family: var(--casey); font-weight: bold; font-size: 20px; margin-left: 14px; margin-right: auto; white-space: nowrap; visibility: hidden; }
/* ── Run : chrono + bénéfice courant ────────────────────────────
   Deux emplacements déjà libres, donc rien ne flotte par-dessus le jeu :
   à droite du solde dans la barre de stats, et dans la barre du bas du menu.
   Le fond opaque et la largeur mini évitent les « restes » d'encre de la police
   cursive quand la valeur change (une fois par seconde). */
.game-statsbar .g-run {
  font-family: var(--casey); font-weight: bold; font-size: 20px;
  margin-left: 12px; white-space: nowrap; text-align: right;
  min-width: 240px; padding-left: 10px; padding-right: 0.18em;
  background: var(--bg); color: var(--gold);
}
/* ── Restes d'encre de la police cursive ─────────────────────────
   Lobster peint AU-DELÀ de la largeur d'avance de ses glyphes : mesuré à 20 px sur les
   montants en euros, l'encre dépasse de 2,1 px à droite (le « € » et sa fioriture) et de
   ~1 px à gauche. Cette encre tombait donc HORS de la boîte de l'élément. Or quand le
   texte change, le navigateur ne réinvalide que la boîte : les traits qui dépassaient
   restaient affichés — les petits traits que l'on voyait à côté du « € ».
   La marge interne ramène l'encre DANS la boîte, et le fond opaque garantit qu'en
   repeignant cette boîte on efface l'ancien texte. En em, pour suivre la taille de police
   (0,18em = 3,6 px à 20 px, 2,9 px à 16 px : toujours plus que les 2,1 px mesurés). */
.game-statsbar .g-balance,
.game-statsbar .g-stats,
.game-statsbar .g-net {
  padding-right: 0.18em;
  padding-left: 0.09em;
  background: var(--bg);
}

/* ── ℹ et œil posés sur la ligne du solde ────────────────────────
   Ils mesuraient 36×30 px dans une ligne de texte de 25 px (20 px sur téléphone) : la
   barre passait donc de 35 à 40 px (28 → 38 px sur téléphone), et c'est l'aperçu du jeu,
   juste en dessous, qui perdait la différence — un canvas plus court, donc des cartes et
   des tapis dimensionnés autrement selon qu'un jeu a un ℹ ou non.
   Ils sont maintenant calés sur la hauteur de la ligne : la barre ne bouge plus d'un jeu
   à l'autre. Et comme un bouton de 25 px se rate au doigt, c'est un pseudo-élément HORS
   FLUX (inset négatif) qui rend la zone tactile confortable — lui ne pousse rien. */
.game-statsbar > button {
  width: 30px; height: 25px; font-size: 15px;
  padding: 0; line-height: 1; flex: none;
  position: relative;   /* ancre la zone tactile ci-dessous, et annule le position:absolute d'origine */
}
.game-statsbar > button::after { content: ''; position: absolute; inset: -9px -7px; }
/* Bouton AUTO (Crazy Time, machine à sous) : même rectangle arrondi et mêmes couleurs
   que le ℹ, avec un second liseré intérieur (le double trait du logo AUTO). Plus large
   que le ℹ pour loger le mot. Éteint : grisé, pour qu'on voie qu'il ne tourne pas.
   Allumé : fond or, texte sombre, halo. */
.game-statsbar > button.auto-btn {
  width: 42px; margin-left: 6px; border-radius: 8px; cursor: pointer;
  background: rgb(30,26,24); color: rgb(135,128,118); border: 2px solid rgb(95,90,84);
  box-shadow: inset 0 0 0 1.5px rgb(30,26,24), inset 0 0 0 2.5px rgb(95,90,84);
  font-family: 'Cosi', Arial, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 0.3px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.game-statsbar > button.auto-btn:hover { color: rgb(185,176,162); border-color: rgb(135,128,118); }
.game-statsbar > button.auto-btn.on {
  background: rgb(255,205,70); color: rgb(40,30,8); border-color: rgb(170,130,40);
  box-shadow: inset 0 0 0 1.5px rgb(255,205,70), inset 0 0 0 2.5px rgb(40,30,8), 0 0 7px rgba(255,190,40,0.75);
}
.run-chip {
  font-family: var(--casey); font-weight: bold; font-size: 20px;
  white-space: nowrap; color: var(--gold);
  /* même hauteur et même arrondi que les boutons voisins de la barre (.btn : 42px / 14px) */
  /* inline-flex avale les espaces du HTML (chaque bout de texte devient un item de
     flex) : c'est `gap` qui rétablit les écarts entre « Run », le temps et le montant. */
  height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 0 0 auto; align-self: center; padding: 0 14px; border-radius: 14px;
  border: 2px solid var(--gold); background: rgba(20,0,0,0.55);
}
.game-content {
  flex: 1; background: var(--bg-panel);
  margin: 0 0 0 0; padding: 16px 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Fond dégradé des écrans d'accueil, aussi derrière ces jeux (sous le bandeau et la barre
   de solde, qui restent unis : cf. .game-statsbar). Pour les deux pokers, seulement sur
   l'écran du choix de la table : voir .hd-setup. */
:is(#game-SLOTS, #game-SICBO, #game-CRAZYTIME, #game-HIGHLOW, #game-LIMBO, #game-MINES,
    #game-KENO, #game-OVERUNDER, #game-HORSES) .game-content { background: var(--bg-degrade); }

/* ── Pavé de mise (BetKeypad — miroir Java) ─────────────────── */
.keypad {
  width: 100%; max-width: clamp(360px, 42vw, 620px); margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
/* Police de l'application (Lobster) sur chaque case du pavé de mise (les boutons
   de formulaire n'héritent pas de la police par défaut). */
.keypad button, .keypad .kp-mise, .keypad .kp-val { font-family: var(--casey); }
.kp-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 32px; }
.kp-tg {
  border: none; border-radius: 8px; cursor: pointer;
  background: rgb(45,18,30); color: #fff; font-weight: bold; font-size: 18px;
}
.kp-tg.sel { background: rgb(175,135,0); border: 1.5px solid rgb(220,185,60); }
.kp-card { display: flex; flex-direction: column; gap: 7px; }

/* Affichage MISE … valeur € */
.kp-disp {
  display: flex; align-items: center; justify-content: space-between; height: 60px;
  padding: 6px 16px; border-radius: 12px;
  background: linear-gradient(to bottom, rgb(16,7,11), rgb(8,3,6));
  border: 1.4px solid rgb(150,120,40);
}
.kp-mise { font-size: 20px; font-weight: bold; color: rgb(155,135,85); }
/* Même correctif que la barre de stats : l'encre de Lobster dépasse de 3,3 px à 32 px, donc
   hors de la boîte, et raccourcir la mise (une touche « effacer ») laissait le trait du
   « € » précédent. La marge négative annule le décalage que la marge interne provoquerait :
   la boîte s'élargit pour couvrir l'encre, le chiffre ne bouge pas d'un pixel. */
.kp-val {
  font-size: 32px; font-weight: bold; color: var(--gold);
  padding: 0 0.18em 0 0.09em; margin: 0 -0.18em 0 -0.09em;
}

/* Montants rapides +1 … +100 */
.kp-quick5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 40px; }
.kp-quick5 button {
  border: none; border-radius: 10px; cursor: pointer; color: #fff; font-weight: bold; font-size: 12px;
  background-color: rgb(100,30,48);
}
.kp-quick5 button:hover { filter: brightness(1.3); }

/* Pavé numérique 4×3 */
.kp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.kp-pad button {
  border: none; border-radius: 10px; cursor: pointer; color: #fff; font-weight: bold;
  padding: 14px 0; font-size: 24px;
}
.kp-num { background-color: rgb(104,28,46); }
.kp-bk { background-color: rgb(140,26,26); font-size: 20px !important; }
.kp-comma { background-color: rgb(36,94,36); font-size: 25px !important; }
.kp-pad button:hover { filter: brightness(1.3); }

/* Modificateurs C ÷2 ×2 ALL-IN */
.kp-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 46px; }
.kp-mods button { border: none; border-radius: 10px; cursor: pointer; color: #fff; font-weight: bold; font-size: 15px; }
.kp-c { background-color: rgb(140,26,26); }
.kp-d2 { background-color: rgb(56,18,172); }
.kp-x2 { background-color: rgb(92,50,128); }
.kp-all { background-color: rgb(176,138,50); font-size: 14px; }
.kp-mods button:hover { filter: brightness(1.3); }

/* Mode jetons */
.kp-chipsmode { display: none; }
/* Canvas à la hauteur exacte d'un jeton (7 jetons de front) : pas de vide dessus ni dessous */
.kp-chipcv { width: 100%; height: auto; aspect-ratio: 7 / 1; max-height: 120px; cursor: pointer; }
.kp-chipbtns { display: flex; flex-direction: column; gap: 5px; }
.kp-cb3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; height: 46px; }
.kp-cb2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; height: 46px; }
.kp-chipbtns button { border: none; border-radius: 8px; cursor: pointer; color: #fff; font-weight: bold; font-size: 19px; }
.kp-chipbtns button:hover { filter: brightness(1.25); }
.kp-cb-undo { background-color: rgb(68,48,112); }
.kp-cb-clear { background-color: rgb(140,26,26); }

/* ════════════════════════════════════════════════════════════
   MACHINE À SOUS
   ════════════════════════════════════════════════════════════ */
/* Écran unique : machine (jackpot + rouleaux + gains) à gauche, mise à droite (comme le Jacks or Better) */
.slots-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.slots-stage { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 6px; }
.slots-jackpot { width: 100%; height: 70px; flex-shrink: 0; }
.slots-reels { flex: 1; width: 100%; min-height: 0; }
/* Bouton ℹ (déplacé sur la ligne du solde) — couleur or du thème */
.slots-info { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 8px;
  background: rgb(40,30,8); color: rgb(255,205,70); font-size: 18px; font-weight: bold; border: 2px solid rgb(170,130,40); cursor: pointer; }
.game-statsbar .slots-info { margin-left: 6px; top: auto; right: auto; }
/* Table des gains : sous le bouton Tirer (ordinateur), sous la machine (téléphone), affichée/masquée via le ℹ */
.slots-pay { display: block; width: 100%; height: 84px; flex-shrink: 0; }
.slots-msg { text-align: center; font-size: 15px; font-weight: bold; color: var(--white); min-height: 0; }
.slots-msg:empty { display: none; }
.slots-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto; }
.slots-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.slots-keypad { width: 100%; display: flex; justify-content: center; }
.slots-controls .keypad { width: 100%; max-width: none; }
.slots-controls .slots-go { width: 100%; max-width: none; margin: 0; }
.slots-go .btn:disabled { cursor: default; }

/* ════════════════════════════════════════════════════════════
   BLACKJACK
   ════════════════════════════════════════════════════════════ */
.bj-bet { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; overflow-y: auto; }
.bj-go { display: flex; justify-content: center; }
.bj-game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bj-table-wrap { flex: 1; position: relative; min-height: 0; }
.bj-table { width: 100%; height: 100%; display: block; }
/* ℹ déplacé sur la ligne du solde */
.game-statsbar .bj-info { margin-left: auto; top: auto; right: auto; }
.bj-info {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgb(12,40,46); color: rgb(60,205,225); font-size: 18px; font-weight: bold;
  border: 2px solid rgb(40,150,165); cursor: pointer;
}
/* Antisèche intégrée à droite du plateau (comme la version Java) */
.bj-strat {
  position: absolute; top: 2%; right: 8px; height: 96%; z-index: 10;
  display: flex; align-items: flex-start;
}
.bj-strat img {
  max-height: 100%; max-width: 60vw; width: auto; height: auto; display: block;
  border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
.bj-strat-close {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 28px; border-radius: 8px;
  background: rgb(120,30,42); color: #fff; border: 1px solid rgb(185,75,85); cursor: pointer; font-weight: bold; font-size: 14px;
}
.bj-actions, .bj-insurance { display: flex; justify-content: center; gap: 12px; padding: 8px 0; }
/* Boutons de la mise : exactement la taille et l'espacement de ceux de la partie
   (Tirer, Rester…), pour que la rangée ne change pas de gabarit d'une phase à l'autre. */
.bj-betactions { display: flex; justify-content: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.bj-bact { width: 140px; height: 44px; }
.bj-act { width: 140px; height: 44px; }
/* « Assurance 10,00 € » ne tient pas en 140 px : les deux boutons de l'assurance sont plus larges. */
.bj-insurance .bj-act { width: 190px; }
.bj-act:disabled { background: rgb(108,108,116) !important; color: rgba(255,255,255,0.65); cursor: default; }
/* Téléphone : boutons d'action (Tirer/Rester/… et Distribuer/Effacer/…) sur une seule ligne */
@media (max-width: 820px) {
  .bj-actions, .bj-betactions, .bj-insurance { gap: 6px; padding: 6px 0; flex-wrap: nowrap; }
  .bj-act, .bj-bact, #bj-deal { width: auto; min-width: 0; flex: 1 1 0; padding: 0 4px; font-size: 21px; white-space: nowrap; overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════
   COURSE DE CHEVAUX
   ════════════════════════════════════════════════════════════ */
/* Écran unique : piste à gauche, paris (chevaux + mise + bouton) à droite */
.hr-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.hr-trackwrap { flex: 65; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; position: relative; overflow: hidden; }
.hr-track { flex: 1; width: 100%; min-height: 0; border-radius: 8px; }
.hr-panel { flex: 35; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 12px; overflow-y: auto;
  background: linear-gradient(rgb(61,15,28), rgb(45,11,21)); border: 1px solid rgba(61,15,28,0.45); border-radius: 12px; }
.hr-title { font-size: 18px; font-weight: bold; color: var(--white); }
.hr-cards { display: flex; gap: 6px; width: 100%; }
.hr-card {
  flex: 1; min-width: 0; border-radius: 12px; cursor: pointer;
  background: rgb(26,32,48); border: 2px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding-bottom: 7px; position: relative; overflow: hidden;
  transition: transform 0.1s;
}
/* dossard : bandeau à la couleur du cheval, avec son numéro */
.hr-card .hr-num { align-self: stretch; height: 22px; display: grid; place-items: center; background: var(--hc);
  font: bold 13px Arial, sans-serif; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.35); }
.hr-card .hr-name { font-size: 13px; color: #fff; margin-top: 4px; white-space: nowrap; }
.hr-card .hr-odd { font-size: 15px; color: var(--gold); }
.hr-card .hr-pct { font-size: 11px; color: rgb(200,190,170); }
.hr-card .hr-barre { align-self: stretch; height: 4px; margin: 2px 7px 0; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.hr-card .hr-barre i { display: block; height: 100%; border-radius: 2px; background: var(--hc); }
.hr-card.sel { border-color: var(--gold); background: rgb(48,44,30); box-shadow: 0 0 12px rgba(255,205,70,0.35); }

/* ── Mode course : la piste prend toute la place ── */
.hr-rang { display: none; }
/* aperçu du cheval choisi, au-dessus des cartes (écran de mise) */
.hr-apercu { position: relative; width: 100%; flex: 1 1 0; min-height: 110px; }
/* L'aperçu prend toute la hauteur que les cartes, le pavé et le bouton laissent libre. Le
   canevas est sorti du flux (position absolue) : sinon sa propre taille en pixels comptait
   dans la hauteur de la page, et il poussait le pavé sous le bouton. */
.hr-apercu canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(226,190,96,0.35);
  touch-action: pan-y; cursor: grab; }   /* le balayage horizontal fait défiler la vitrine, pas la page */

/* Écran de mise : seulement le choix des chevaux, le pavé et le bouton. La piste
   n'apparaît que pour la course. */
.hr-game:not(.hr-course) .hr-trackwrap { display: none; }
.hr-game:not(.hr-course) .hr-panel { flex: 1; max-width: 640px; margin: 0 auto; }
/* Ordinateur : la vitrine des chevaux à gauche, sur toute la hauteur ; les cartes, le pavé
   et le bouton dans une colonne à droite. */
@media (min-width: 821px) {
  #game-HORSES .game-content { padding: 0; }   /* sur ordinateur, bord à bord */
  #game-HORSES .hr-game { padding: 4px 0; }     /* juste un filet en haut et en bas */
  .hr-game:not(.hr-course) .hr-panel {
    max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);   /* toute la largeur */
    grid-template-rows: auto auto auto 1fr; column-gap: 14px; row-gap: 10px; align-items: start;
  }
  .hr-game:not(.hr-course) .hr-apercu { grid-column: 1; grid-row: 1 / -1; align-self: stretch; height: 100%; min-height: 260px; }
  .hr-game:not(.hr-course) .hr-cards,
  .hr-game:not(.hr-course) .hr-keypad,
  .hr-game:not(.hr-course) .hr-go { grid-column: 2; }
  .hr-game:not(.hr-course) .hr-go { grid-row: 3; align-self: start; }   /* juste sous le pavé */
}

.hr-game.hr-course .hr-panel { display: none; }
.hr-game.hr-course .hr-trackwrap { flex: 1; }
.hr-game.hr-course .hr-rang { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.hr-cl { border-radius: 10px; background: rgba(0,0,0,0.35); padding: 4px 2px 5px; text-align: center; font-size: 13px; color: rgb(240,228,200); position: relative; }
.hr-cl .rg { display: block; font-size: 14px; color: rgb(200,190,170); }
.hr-cl .pastille { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin: 2px auto; font: bold 12px Arial, sans-serif; color: #fff; }
.hr-cl .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-cl.chute { opacity: 0.6; }
.hr-cl.chute .rg { color: rgb(240,90,80); }
.hr-cl.moi { box-shadow: inset 0 0 0 1.5px var(--gold); background: rgba(80,64,20,0.5); color: var(--gold); }
/* Initiales des autres joueurs d'une table : sur la carte du cheval misé, dans le classement
   sous la piste. Une petite pastille en coin, puis « +n ». */
.hr-qui { position: absolute; top: 3px; right: 2px; display: flex; pointer-events: none; }
.hr-qui:empty { display: none; }
.hr-qui i { min-width: 15px; height: 15px; padding: 0 2px; box-sizing: border-box; border-radius: 8px; display: grid; place-items: center;
  font: bold 8px/1 Arial, sans-serif; font-style: normal; color: #fff; border: 1px solid rgb(30,22,14); margin-left: -3px; }
.hr-qui i:first-child { margin-left: 0; }
.hr-qui i.plus { background: rgb(90,84,76); }
.hr-card:has(.hr-qui:not(:empty)) .hr-num { place-items: center start; padding-left: 8px; }   /* numéro à gauche, initiales à droite */
.hr-cl .hr-qui { position: static; justify-content: center; margin-top: 2px; }   /* sous le nom : le rang et la pastille restent lisibles */
.hr-pod-qui { font-size: 11px; color: rgb(200,190,170); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* podium d'arrivée */
.hr-podium { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 16px; border-radius: 20px 20px 0 0;
  background: linear-gradient(rgba(20,6,6,0.96), rgba(40,8,8,0.98)); border-top: 2px solid rgba(226,190,96,0.6);
  transform: translateY(105%); transition: transform 0.45s ease-out; z-index: 4; pointer-events: none; }
.hr-podium.visible { transform: none; }
.hr-pod-titre { text-align: center; font-size: 22px; color: var(--gold); margin-bottom: 8px; }
.hr-marches { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.hr-marche { width: min(100px, 28%); text-align: center; }
.hr-pod-cheval { height: 54px; display: flex; justify-content: center; align-items: flex-end; }
.hr-pod-cheval canvas { width: 66px; height: 54px; }
.hr-bloc { border-radius: 10px 10px 4px 4px; display: grid; place-items: center; font-size: 28px; color: #fff; }
.hr-pod-nom { font-size: 15px; margin-top: 4px; color: #fff; }
.hr-pod-nom.moi { color: var(--gold); }
.hr-pod-res { margin-top: 10px; text-align: center; font-size: 21px; color: rgb(120,240,150); }
.hr-pod-res.perdu { color: rgb(240,228,200); }
.hr-pod-res small { display: block; font-size: 14px; color: rgb(200,190,170); }
.hr-keypad { width: 100%; display: flex; justify-content: center; }
.hr-keypad .keypad { width: 100%; max-width: none; }
.hr-panel .hr-go { max-width: none; margin-top: auto; }
.hr-msg {
  text-align: center; font-size: 18px; font-weight: bold; color: var(--white);
  background: var(--bg); padding: 8px 16px;
}

/* ════════════════════════════════════════════════════════════
   ROULETTE
   ════════════════════════════════════════════════════════════ */
.rl-wrap { flex: 1; display: flex; gap: 10px; min-height: 0; background: rgb(8,28,10); padding: 6px; border-radius: 8px; }
.rl-wheel { flex: 1; min-width: 0; height: 100%; }
.rl-right { width: 660px; max-width: 55%; display: flex; flex-direction: column; gap: 6px;
  /* La colonne défile : le calculateur de martingale vit sous les boutons et passait
     sinon sous la ligne de flottaison sur ordinateur, sans moyen d'y accéder. */
  min-height: 0; overflow-y: auto; }
.rl-hist { width: 100%; height: 48px; flex-shrink: 0; }
.rl-table { width: 100%; height: 250px; flex-shrink: 0; cursor: pointer; }
.rl-rack { width: 100%; height: 100px; flex-shrink: 0; cursor: pointer; }
.rl-foot { display: flex; flex-direction: column; gap: 6px; }
.rl-total { font-size: 18px; font-weight: bold; color: var(--gold); }
.rl-btns { display: flex; gap: 8px; }
/* Ordinateur : les boutons remplissent toute la largeur du panneau et se redimensionnent avec l'écran */
.rl-btns .btn { flex: 1 1 0; min-width: 0; }
.rl-btns .btn:disabled { cursor: default; }
.rl-msg { font-size: 14px; font-weight: bold; color: var(--orange); min-height: 20px; }
.rl-spinmsg { font-size: 19px; font-weight: bold; color: var(--white); min-height: 30px; }
/* Les deux zones de message réservent leur hauteur pour que l'affichage ne saute pas
   quand un texte s'y affiche. Vides, elles n'ont rien à réserver : elles laissaient
   68 px de vide entre les boutons et le calculateur de martingale (20 + 30 px de hauteur
   retenue, plus les trois espacements du pied). On les retire donc de la mise en page
   tant qu'elles ne portent rien — `display:none` et pas seulement `min-height:0`, sinon
   les espacements du conteneur flex subsisteraient. Les boutons, placés au-dessus, ne
   bougent pas quand un message revient. */
.rl-msg:empty, .rl-spinmsg:empty { display: none; }

/* Calculateur de martingale, replié au bas du pied de table. Replié par défaut : sur
   téléphone ce pied est collant, un panneau ouvert en permanence mangerait l'écran. */
.rl-mart { display: flex; flex-direction: column; gap: 6px; }
.rl-mart-tg { font-family: var(--sans); font-weight: bold; font-size: 15px; text-align: left;
  color: var(--gold); background: rgb(26,58,30); border: 1px solid rgba(255,200,50,0.35);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.rl-mart-tg:hover { filter: brightness(1.25); }
.rl-mart-tg.on { background: rgb(40,84,46); }
.rl-mart-tg::after { content: ' \25be'; }
.rl-mart-tg.on::after { content: ' \25b4'; }
.rl-mart-body { display: flex; flex-direction: column; gap: 8px; padding: 9px 11px;
  background: rgba(0,0,0,0.32); border: 1px solid rgba(255,200,50,0.22); border-radius: 10px; }
/* `display:flex` d'une règle d'auteur l'emporte sur le `display:none` que le navigateur
   attache à [hidden] : sans cette ligne le panneau resterait ouvert en permanence. */
.rl-mart-body[hidden] { display: none; }
.rl-mart-row { display: flex; align-items: center; gap: 8px; }
.rl-mart-row label { font-size: 14px; color: var(--white); white-space: nowrap; }
.rl-mart-row input { flex: 1; min-width: 0; font-family: 'Cosi', monospace; font-size: 16px;
  color: var(--gold); background: rgb(10,30,14); border: 1px solid rgba(255,200,50,0.4);
  border-radius: 6px; padding: 5px 9px; }
.rl-mart-eur { color: var(--gold); font-weight: bold; }
.rl-mart-out { font-size: 14px; line-height: 1.5; }
.rl-mart-n { color: var(--gold); }
.rl-mart-n b { font-size: 21px; }
.rl-mart-suite { font-family: 'Cosi', monospace; font-size: 13px; color: rgb(150,220,160); word-break: break-word; }
.rl-mart-tot { color: var(--white); }
.rl-mart-stop, .rl-mart-nul { color: var(--orange, rgb(255,150,30)); font-style: italic; font-size: 13px; }

/* ════════════════════════════════════════════════════════════
   POKER HOLD'EM
   ════════════════════════════════════════════════════════════ */
.hd-setup { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  /* recouvre le padding de .game-content pour que le dégradé aille jusqu'aux bords */
  margin: -16px -20px; padding: 16px 20px; background: var(--bg-degrade); }
@media (max-width: 820px) { .hd-setup { margin: -8px -10px; padding: 8px 10px; } }
.hd-setup-title { font-size: 22px; font-weight: bold; color: var(--gold); margin-bottom: 16px; }
.hd-levels { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.hd-tablebtn { width: min(90vw, 620px); min-height: 8.5vh; padding: 1.4vh 0; border: none; border-radius: 14px; cursor: pointer;
  background: rgb(40,110,50); color: #fff; font-weight: bold;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.hd-tablebtn:hover { filter: brightness(1.2); }
.hd-tb-blind { font-size: clamp(18px, 5.4vw, 24px); }
.hd-tb-cave { font-size: clamp(13px, 3.8vw, 16px); color: rgba(255,255,255,0.78); }
.hd-note { font-style: italic; font-size: 12px; color: var(--grey); margin-top: 4px; }
.om-sub { font-style: italic; font-size: 13px; color: rgb(100,200,130); margin-top: -8px; margin-bottom: 12px; text-align: center; }
.hd-table-wrap { flex: 1; display: flex; flex-direction: column; position: relative; min-height: 0; }
.hd-table { flex: 1; width: 100%; min-height: 0; }
/* Partie créée : l'hôte lance la première donne quand ses amis sont assis (poker_multi.js) */
.hd-lancer { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 4;
  height: auto; line-height: 1.1; padding: 18px 46px; font-size: 28px; border-radius: 18px; white-space: nowrap; background: rgb(30,120,50); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
@media (max-width: 600px) { .hd-lancer { padding: 14px 32px; font-size: 22px; } }
.hd-lancer:disabled { background: rgb(70,74,84); opacity: 0.85; }
.hd-fil { position: absolute; left: 0; top: 0; pointer-events: none; }   /* chrono du joueur qui parle, au-dessus de la table */
.hd-info { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 8px;
  background: rgb(10,16,34); color: rgb(95,140,235); font-size: 18px; font-weight: bold; border: 2px solid rgb(45,95,185); cursor: pointer; }
/* Boutons ℹ des jeux : une simple lettre « i » plutôt que le caractère ℹ, que l'iPhone
   affiche en émoji (carré bleu). Police à empattements pour garder l'allure du symbole. */
.slots-info, .bj-info, .hd-info, .kn-info, .pk-info, .up-info, .sc-info {
  font-family: 'Cosi', Georgia, 'Times New Roman', serif; font-weight: bold; line-height: 1; padding: 0;
}
/* Omaha (vert) — même bouton ℹ mais couleur du thème Omaha */
#om-info { background: rgb(10,26,18); color: rgb(55,185,120); border-color: rgb(35,130,85); }
.hd-eye { position: absolute; top: 8px; right: 54px; width: 36px; height: 36px; border-radius: 8px;
  background: rgb(20,9,14); font-size: 17px; border: 2px solid rgb(45,95,185); cursor: pointer; line-height: 1; }
.hd-eye.on { background: rgb(45,95,185); }
/* Œil barré : nos cartes sont cachées (3e appui sur l'œil) */
.hd-eye.ferme { position: relative; background: rgb(20,9,14); }
.hd-eye.ferme::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; border-radius: 2px;
  background: rgb(235,70,70); box-shadow: 0 0 0 1px rgb(20,9,14); transform: translate(-50%, -50%) rotate(-40deg); pointer-events: none; }
/* Omaha (vert) — œil assorti au bouton ℹ du thème Omaha */
#om-eye { border-color: rgb(35,130,85); }
#om-eye.on { background: rgb(35,130,85); }
/* Œil + « i » déplacés sur la ligne du solde (ordinateur comme téléphone) */
.game-statsbar .hd-eye { margin-left: 6px; top: auto; right: auto; }
.game-statsbar .hd-info { margin-left: 6px; top: auto; right: auto; }
.hd-leave { position: absolute; top: 8px; left: 10px; height: 36px; }
/* Jeu à plusieurs : bouton « inviter » (ligne du solde), code de la table, rejoindre par code */
/* Couleurs du jeu (--mc : teinte, --mcf : fond sombre), posées par BanqueMulti / PokerMulti */
.hd-invite { width: 36px; height: 36px; border-radius: 8px; margin-left: 6px; background: var(--mcf, rgb(20,9,14));
  font-size: 17px; border: 2px solid var(--mc, rgb(45,95,185)); cursor: pointer; line-height: 1; }
.hd-invite:hover { background: var(--mc, rgb(45,95,185)); }
.hd-badge { margin-left: 6px; padding: 3px 10px; border-radius: 12px; white-space: nowrap;
  background: rgba(12,10,16,0.88); border: 1.5px solid var(--gold); color: var(--gold);
  font: bold 12px 'Courier New', monospace; }
/* Fenêtre « Créer / rejoindre une partie » des pokers */
.pk-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pk-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgb(230,230,240); font-size: 14px; }
.pk-i { width: 52%; background: rgb(85,0,0); color: rgb(230,230,240); border: 1px solid rgb(120,120,130); border-radius: 6px; padding: 6px 8px; font-size: 15px; }
.pk-err { color: rgb(255,150,120); font-size: 13px; min-height: 16px; }
/* Paramètres → Envoyer de l'argent (app.js, virementDialog) */
.vr-solde { color: rgb(230,230,240); font-size: 14px; margin-bottom: 10px; }
.vr-solde b { color: rgb(255,200,50); }
.vr-champ { width: 100%; box-sizing: border-box; background: rgb(85,0,0); color: rgb(240,240,245); border: 1px solid rgb(150,150,160);
  border-radius: 8px; padding: 9px 10px; font-size: 16px; margin-bottom: 8px; }
.vr-liste { max-height: min(34vh, 240px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vr-nom { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(0,0,0,0.22); color: rgb(240,240,245);
  border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; font-size: 15px; cursor: pointer; }
.vr-nom i { width: 8px; height: 8px; border-radius: 50%; background: rgb(110,110,120); flex: none; }
.vr-nom i.on { background: rgb(70,220,110); box-shadow: 0 0 6px rgba(70,220,110,0.7); }
.vr-nom.sel { border-color: rgb(255,200,50); background: rgba(255,200,50,0.14); }
.vr-vide { color: rgb(200,190,180); font-size: 14px; padding: 6px 2px; }
.pk-sep { height: 1px; background: rgba(255,200,50,0.35); margin: 16px 0 14px; }
/* Jeux contre la banque : le badge de table ouvre la liste des joueurs ; message bref en bas */
.mb-badge { cursor: pointer; }
/* Fenêtre « Inviter » : joueurs à la table, couronne et exclusion */
.mp-titre { color: rgb(230,230,240); font-size: 14px; margin: 4px 0 6px; }
.mp-table { margin-bottom: 14px; }
.mp-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mp-nom { color: #fff; font-size: 14px; }
.mp-nom em { color: rgb(190,190,200); font-style: normal; font-size: 12px; }
.mp-nom small { display: block; color: rgb(190,190,200); font-size: 12px; margin-top: 2px; }
.mp-actions { display: flex; gap: 6px; }
.mp-mini { width: 34px; height: 30px; border-radius: 8px; border: 1.5px solid rgba(255,200,50,0.6); background: rgba(0,0,0,0.35); cursor: pointer; font-size: 15px; color: #fff; }
.mp-mini:hover { background: rgba(255,200,50,0.25); }
.mp-exclure { border-color: rgba(230,80,80,0.7); color: rgb(255,120,120); font-weight: bold; }
.mp-exclure:hover { background: rgba(230,80,80,0.25); }
.mp-appel:disabled { opacity: 0.7; cursor: default; font-size: 12px; }
/* 🔔 : flash plein écran chez le joueur appelé (multi.js, _flashAppel) */
.mp-flash { position: fixed; inset: 0; z-index: 2000; pointer-events: none; display: flex; align-items: center; justify-content: center;
  animation: mp-flash 0.45s ease-in-out 4 alternate; }
.mp-flash-txt { padding: 14px 24px; border-radius: 16px; background: rgba(12,10,16,0.92); border: 2px solid var(--gold);
  color: #fff; font-size: 22px; text-align: center; max-width: calc(100vw - 32px); }
@keyframes mp-flash {
  0%   { background: rgba(255,230,120,0); box-shadow: inset 0 0 0 0 rgba(255,200,50,0); }
  100% { background: rgba(255,230,120,0.55); box-shadow: inset 0 0 80px 30px rgba(255,200,50,0.9); }
}
/* Bouton de lancement bloqué à une table à plusieurs */
.mb-attente { font-size: 13px !important; line-height: 1.15; white-space: normal; }
/* Jeton gris « un autre joueur a misé ici » sur les cases faites d'éléments de la page */
.hr-card.mb-autre, .kn-cell.mb-autre { position: relative; }
.hr-card.mb-autre::after, .kn-cell.mb-autre::after { content: ''; position: absolute; top: 4px; right: 4px; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(150,150,160,0.9); border: 1.5px dashed rgba(240,240,245,0.85); box-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }
/* Blackjack à plusieurs : les mains des autres joueurs, au-dessus des boutons */
.bj-autres { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  max-height: 58%; max-width: 46%; overflow-y: auto; pointer-events: none; }
.bj-autre { background: rgba(0,0,0,0.5); border: 1.5px solid rgba(210,180,90,0.35); border-radius: 10px; padding: 4px 8px; color: #fff; font-size: 12px; }
.bj-autre.tour { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,200,50,0.45); }
.bj-an { font-weight: bold; white-space: nowrap; margin-bottom: 3px; }
.bj-am { display: flex; align-items: center; gap: 2px; padding: 1px 2px; border-radius: 6px; }
.bj-am.active { background: rgba(255,200,50,0.18); }
.bj-mc { display: inline-block; min-width: 24px; height: 30px; line-height: 30px; padding: 0 3px; border-radius: 4px; background: #fff; color: #111;
  font: bold 12px Arial, sans-serif; text-align: center; box-shadow: 1px 1px 2px rgba(0,0,0,0.4); }
.bj-mc.r { color: rgb(200,30,30); }
.bj-mc.dos { background: linear-gradient(135deg, rgb(44,90,192), rgb(14,34,82)); }
.bj-at { margin-left: 5px; color: var(--gold); font-weight: bold; }
.bj-ar.g { color: rgb(60,215,100); } .bj-ar.p { color: rgb(235,90,90); }
/* Crazy Time à plusieurs : message d'attente à la place des boutons */
.ct-attente { flex: 1; text-align: center; color: var(--gold); font-weight: bold; font-size: 15px; padding: 10px 6px; }
.hd-invite.mb-actif { width: auto; padding: 0 8px; font-size: 14px; color: #fff; white-space: nowrap; }
.mb-toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); z-index: 900; max-width: 90vw;
  padding: 10px 18px; border-radius: 14px; background: rgba(12,10,16,0.94); border: 1.5px solid var(--gold);
  color: #fff; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.mb-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Réactions rapides à une table à plusieurs (multi.js) */
.hd-reac { margin-left: 6px; }
.hd-reac.muet { filter: grayscale(1); opacity: 0.45; }
.mp-reac-choix { position: fixed; z-index: 950; display: flex; flex-wrap: wrap; gap: 4px; width: 206px; box-sizing: content-box; padding: 6px;
  border-radius: 12px; background: rgba(12,10,16,0.94); border: 1.5px solid var(--gold); }
.mp-reac-choix button { min-width: 38px; height: 38px; border-radius: 8px; border: none; background: rgba(255,255,255,0.08);
  color: #fff; font-size: 20px; cursor: pointer; }
.mp-reac-choix button.txt { font-size: 13px; padding: 0 8px; }
.mp-reac-choix button:hover { background: rgba(255,255,255,0.2); }
.mp-reac-choix button.ecrire { flex-basis: 100%; background: rgba(255,200,50,0.18); }
.mp-reac-choix button.ecrire.muet { background: rgba(255,255,255,0.08); }
.mp-reac { position: fixed; right: 16px; top: 160px; z-index: 900; pointer-events: none;
  max-width: min(280px, calc(100vw - 32px)); overflow-wrap: anywhere;
  padding: 6px 14px; border-radius: 16px; background: rgba(12,10,16,0.9); border: 1.5px solid var(--gold);
  color: #fff; font-size: 15px; animation: mp-reac 2.6s ease-out forwards; }
.mp-reac b { font-size: 24px; vertical-align: middle; margin-left: 4px; }
/* Monte de 110 px : `top` (multi.js) est calé pour que la bulle finisse juste sous les boutons. */
@keyframes mp-reac {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-110px); }
}
/* Bilan de fin de Run (run.js) */
.run-courbe { display: block; width: 100%; height: 140px; border-radius: 8px; background: rgba(0,0,0,0.25); }
.run-axe { display: flex; justify-content: space-between; color: rgb(200,200,210); font-size: 12px; margin: 4px 0; }
.run-coup { display: flex; align-items: baseline; gap: 8px; color: rgb(230,230,240); font-size: 14px; margin-top: 8px; }
.run-coup b { white-space: nowrap; }
.run-coup small { color: rgb(180,180,190); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.run-bilan { margin-bottom: 16px; }
.hd-pokimg { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center; }
.hd-pokimg img { max-height: 90vh; max-width: 90vw; object-fit: contain; border: 3px solid var(--gold); border-radius: 14px; }
.hd-pok-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 36px; border-radius: 8px;
  background: rgb(120,30,42); color: #fff; border: 1px solid rgb(185,75,85); cursor: pointer; font-weight: bold; font-size: 16px; }
.hd-actionbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; flex-wrap: wrap; min-height: 72px; }
.hd-actionbar .btn { height: 46px; }
.hd-actionbar .btn:disabled { cursor: default; }
.hd-fold { min-width: 130px; }
.hd-main { min-width: 170px; }
.hd-relance { min-width: 130px; }
/* Jouer en avance (js/poker_avance.js) : petite case à cocher dans le bouton, hors tour */
.hd-actionbar .btn.pa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; filter: saturate(0.55) brightness(0.85); }
.hd-actionbar .btn.pa:hover { filter: saturate(0.75) brightness(1); }
/* .btn met le texte en minuscules avec une capitale en ::first-letter ; ici la case vient en
   premier, la capitale passe donc sur le libellé (qui doit être un bloc pour ::first-letter). */
.hd-actionbar .btn.pa > span:last-child { display: inline-block; }
.hd-actionbar .btn.pa > span:last-child::first-letter { text-transform: uppercase; }
.pa-case { flex: none; width: 18px; height: 18px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.75); background: rgba(0,0,0,0.25); position: relative; }
.pa-case.on { background: var(--gold); border-color: var(--gold); }
.pa-case.on::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid rgb(30,20,8); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* Téléphone : jetons (+ info relance) au-dessus, boutons sur une seule ligne qui se redimensionnent */
@media (max-width: 820px) {
  .hd-actionbar { gap: 6px 3px; padding: 8px 5px; }
  .hd-fold, .hd-main, .hd-relance { flex: 1 1 0; min-width: 0 !important; padding: 0 4px;
    font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ════════════════════════════════════════════════════════════
   PLINKO
   ════════════════════════════════════════════════════════════ */
/* Plinko : une seule page — plateau à gauche (occupe TOUT l'espace), pavé à droite (ordinateur) */
.plk-screen { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.plk-board-wrap { flex: 65; min-width: 0; display: flex; align-items: stretch; }
.pk-board { width: 100%; height: 100%; min-height: 0; background: rgb(18,26,40); border-radius: 8px; display: block; }
.plk-panel { flex: 35; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  padding: 12px; background: linear-gradient(rgb(10,24,28), rgb(6,14,20)); border: 1px solid rgba(0,160,170,0.45); border-radius: 12px; }
.plk-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.plk-keypad { width: 100%; display: flex; justify-content: center; }
.plk-controls .keypad { width: 100%; }
/* Bouton « Lâcher la bille » : prend toute la largeur disponible */
.plk-go { display: flex; width: 100%; }
.plk-go .btn { flex: 1 1 auto; width: 100%; min-width: 0; }

/* ════════════════════════════════════════════════════════════
   CRAZY TIME
   ════════════════════════════════════════════════════════════ */
.ct-table { flex: 1; width: 100%; min-height: 0; display: block; }
/* Calque du corps de la roue (voir placerCalqueRoue) : sous le canevas, tourné par la carte graphique */
#content-CRAZYTIME .ct-table { position: relative; z-index: 1; }
.ct-roue-calque { position: absolute; overflow: hidden; pointer-events: none; z-index: 0; }
.ct-roue-scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.ct-roue-scene canvas { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.ct-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; min-height: 58px; flex-wrap: wrap; }
.ct-btn { height: 44px; min-width: 120px; }
/* Ordinateur : boutons d'action posés juste sous les jetons (panneau de droite), pas en pleine largeur en bas */
#content-CRAZYTIME { position: relative; }
@media (min-width: 821px) {
  /* left:50% = milieu du canvas (= séparation roue/paris) ; right:20px = bord intérieur du canvas
     (le padding de .game-content), pour rester dans le cadre */
  #content-CRAZYTIME .ct-actions { position: absolute; top: 89%; left: 50%; right: 20px; min-height: 0; padding: 0 12px; z-index: 2; gap: 8px; flex-wrap: nowrap; }
  /* boutons sur toute la largeur du panneau droit, redimensionnables */
  #content-CRAZYTIME .ct-actions .ct-btn, #content-CRAZYTIME .ct-actions #ct-spin { flex: 1 1 0; min-width: 0; }
}
#ct-spin { min-width: 180px; }
.ct-testbar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; flex-wrap: nowrap; }
.ct-test-lbl { color: rgb(180,180,190); font-size: 13px; }
.ct-test-btn { flex: 1 1 0; min-width: 0; width: auto; height: 34px; font-size: 14px; font-weight: bold;
  padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════
   CRASH GAME
   ════════════════════════════════════════════════════════════ */
.crash-bet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0; overflow-y: auto; }
.crash-hist-titre { font: bold 10px/1 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,176,90,0.8); margin-bottom: -2px; }
.crash-hist { display: flex; flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; gap: 5px; min-height: 26px; }
.crash-hist-empty { color: rgba(215,200,255,0.5); font-size: 13px; font-family: 'Cosi', 'Helvetica Neue', Arial, sans-serif; align-self: center; }
.crash-badge { width: 62px; height: 24px; flex-shrink: 0; border-radius: 999px; border: 1px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crash-badge.tall { border-radius: 12px; }
.crash-badge.tall { height: 38px; }
.crash-badge-top { font: bold 12px/1.1 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.crash-badge-bot { font: 10px/1.1 'Helvetica Neue', Arial, sans-serif; color: rgba(215,200,255,0.55); font-variant-numeric: tabular-nums; }
/* Onglet « Auto × » : même largeur que le pavé de mise */
.crash-autorow { display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: clamp(360px, 42vw, 620px); margin: 0 auto; box-sizing: border-box;
  padding: 7px 14px; border-radius: 12px;
  background: linear-gradient(to bottom, rgb(24,12,38), rgb(14,6,24)); border: 1.4px solid rgba(255,150,50,0.35); }
.crash-autolbl { color: rgba(235,225,255,0.85); font: bold 12px/1 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; }
.crash-autox { margin-left: auto; color: rgb(255,176,70); font: bold 18px/1 'Helvetica Neue', Arial, sans-serif; }
.crash-autoinput { flex: 0 1 110px; min-width: 0; height: 34px; border-radius: 8px; border: 1px solid rgba(255,150,50,0.4); background: rgb(10,4,18); color: rgb(255,200,110); text-align: center; font: bold 16px 'Helvetica Neue', Arial, sans-serif; }
.crash-autoinput:focus { outline: none; border-color: rgb(255,160,60); box-shadow: 0 0 0 2px rgba(255,150,40,0.25); }
.crash-autoinput:disabled { opacity: 0.55; }
.crash-quick { width: 54px; height: 30px; font-size: 13px; }
/* Ordinateur : courbe à gauche, infos + pavé + boutons à droite (comme le Limbo) */
.crash-screen { flex: 1; display: flex; flex-direction: row; gap: 12px; min-height: 0; padding: 8px; background: rgb(8,3,16); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,150,50,0.18); scrollbar-width: none; -ms-overflow-style: none; }
.crash-screen::-webkit-scrollbar { width: 0; height: 0; }
.crash-graph { flex: 1; min-width: 0; min-height: 0; height: 100%; display: block; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(190,160,255,0.12); }
.crash-panel { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto;
  background: radial-gradient(140% 60% at 50% 0%, rgba(255,120,40,0.10), transparent 60%), linear-gradient(rgb(20,8,34), rgb(11,4,20));
  border: 1px solid rgba(255,150,50,0.28); border-radius: 12px; }
/* Tout dans le panneau (auto, pavé, bouton) a EXACTEMENT la même largeur */
.crash-controls { width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; box-sizing: border-box; }
.crash-controls .crash-autorow { width: 100%; max-width: none; margin: 0; }
.crash-controls .keypad { width: 100%; max-width: none; }
.crash-controls .crash-go { width: 100%; max-width: none; margin: 0; }
.crash-keypad { width: 100%; display: flex; justify-content: center; }
/* Anciennes vues (conservées inertes) */
.crash-game { flex: 1; display: flex; flex-direction: column; min-height: 0; background: rgb(8,3,14); }
.crash-info { width: 100%; max-width: 480px; margin: 0 auto; flex: none; display: flex; flex-direction: column; align-items: center; padding: 12px 16px 10px;
  background: linear-gradient(rgb(18,6,28), rgb(12,4,18)); border-top: 1px solid rgba(120,50,200,0.5); }
.crash-gain { font-size: 22px; font-weight: bold; color: rgb(50,200,220); text-align: center; min-height: 30px; }
.crash-betinfo { font-size: 12px; color: rgb(130,110,170); margin-top: 6px; text-align: center; }
.crash-sep { width: 100%; height: 1px; margin: 10px 0; background: linear-gradient(90deg, rgba(160,80,255,0), rgba(160,80,255,0.8), rgba(160,80,255,0)); }
.crash-cashout { width: 100%; height: 60px; border-radius: 18px; border: 2px solid rgba(160,255,170,0.6); cursor: pointer;
  font-size: 18px; font-weight: bold; color: #fff; background: linear-gradient(rgb(45,225,95), rgb(30,190,65));
  box-shadow: 0 0 14px rgba(40,220,80,0.4); }
.crash-cashout:hover:not(:disabled) { filter: brightness(1.12); }
.crash-cashout:disabled { background: rgb(108,108,116) !important; border-color: rgb(120,120,128); color: rgba(255,255,255,0.65); cursor: default; box-shadow: none; }
.crash-msg { font-size: 12px; font-weight: bold; color: rgb(180,160,210); margin-top: 12px; text-align: center; min-height: 18px; }

/* ════════════════════════════════════════════════════════════
   HIGH & LOW
   ════════════════════════════════════════════════════════════ */
.hl-bet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0; overflow-y: auto; }
/* Ordinateur : board à gauche (jauge | Plus grand/petit empilés + multiplicateur) et pavé de mise à droite.
   Le board garde le format « téléphone » (grille). */
/* Même espace au-dessus du jeu que les Mines (.mn-game) */
.hl-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.hl-board { flex: 65; min-width: 0; display: grid;
  grid-template-columns: 1fr 190px; grid-template-rows: auto 1fr auto;
  grid-template-areas: "high gauge" "mult gauge" "low gauge";
  column-gap: 16px; row-gap: 4px; min-height: 0; }
.hl-gauge { grid-area: gauge; width: 100%; height: 100%; min-height: 0; }
.hl-high { grid-area: high; align-self: start; }
.hl-low  { grid-area: low;  align-self: end; }
/* Série de la manche : pastilles ▲/▼ ; les plus anciennes sortent par la gauche */
.hl-hist { display: flex; gap: 6px; min-height: 30px; overflow: hidden; align-items: center; }
.hl-chip { flex: none; padding: 3px 9px; border-radius: 10px; font-size: 14px; font-family: var(--casey); white-space: nowrap;
  border: 1.4px solid rgba(212,175,55,0.7); color: rgb(240,225,180); background: rgba(0,0,0,0.25); animation: hl-pop .35s ease-out; }
.hl-chip.ok { border-color: rgb(110,225,145); color: rgb(190,245,205); }
.hl-chip.ko { border-color: rgb(255,140,140); color: rgb(255,205,205); }
/* Centre : carte du nombre, et à sa droite multiplicateur + gain si encaissé */
.hl-center { grid-area: mult; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 40px; }
.hl-mult-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hl-card { width: 170px; height: 170px; flex: none; }
.hl-mult { font-size: 56px; font-weight: bold; color: var(--gold); text-align: center; white-space: nowrap; line-height: 1.1; }
.hl-mult-sub { font-size: 15px; font-weight: bold; color: rgb(220,205,160); text-align: center; min-height: 20px; }
.hl-pop { animation: hl-pop .35s ease-out; }
@keyframes hl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.hl-panel { flex: 35; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 12px;
  background: linear-gradient(rgb(12,20,30), rgb(8,13,20)); border: 1px solid rgba(50,110,180,0.5); border-radius: 12px; }
.hl-controls { width: 100%; max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.hl-info { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hl-keypad { width: 100%; display: flex; justify-content: center; }
.hl-controls .keypad { width: 100%; max-width: none; }
.hl-controls .hl-go { width: 100%; max-width: none; margin: 0; }
.hl-gain { font-size: 14px; font-weight: bold; color: var(--green); text-align: center; min-height: 18px; }
.hl-dir { width: 100%; max-width: none; height: 104px; border-radius: 16px; border: 1.6px solid; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 0 18px; color: #fff; font-family: var(--casey); text-align: left; }
.hl-high { background: linear-gradient(rgb(54,190,94), rgb(24,105,45)); border-color: rgb(120,235,150); }
.hl-low  { background: linear-gradient(rgb(210,80,80), rgb(118,30,30)); border-color: rgb(255,150,150); }
.hl-dir:hover:not(:disabled) { filter: brightness(1.12); }
.hl-dir:disabled { background: rgb(108,108,116) !important; border-color: rgb(120,120,128); color: rgba(255,255,255,0.65); cursor: default; }
.hl-dir-title { font-size: 18px; font-weight: bold; }
.hl-dir-mult { font-size: 26px; font-weight: bold; line-height: 1.05; }
.hl-prob { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.35); overflow: hidden; }
.hl-prob i { display: block; height: 100%; width: 0; background: rgba(255,255,255,0.85); transition: width .3s; }
.hl-dir-info { font-size: 13px; font-weight: bold; color: rgb(235,235,200); }
.hl-dir:disabled .hl-dir-info, .hl-dir:disabled .hl-dir-mult { color: rgb(160,160,168); }
.hl-gauge { flex: 1; width: 100%; min-height: 0; }
.hl-actions { display: flex; justify-content: center; gap: 12px; }
.hl-back { height: 44px; }
.hl-msg { font-size: 16px; font-weight: bold; color: var(--white); text-align: center; min-height: 22px; }

/* ════════════════════════════════════════════════════════════
   CHICKEN ROAD
   ════════════════════════════════════════════════════════════ */
.cr-diffrow { display: flex; gap: 8px; width: 100%; max-width: clamp(360px, 42vw, 620px); margin: 0 auto; }
.cr-diff { flex: 1; min-width: 0; height: 42px; border-radius: 12px; border: 1px solid rgb(55,62,85); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: rgb(160,165,185); padding: 0 4px; font-family: var(--casey); }
.cr-diff.sel { color: #fff; }
.cr-diff:hover { filter: brightness(1.12); }
.cr-diff-name { font-size: 16px; font-weight: bold; font-family: var(--casey); }
.cr-diff-desc { font-size: 9px; }
.cr-multtable { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; width: 100%; max-width: 440px; }
.cr-mt-cell { font-size: 10px; text-align: center; padding: 4px 0; background: rgb(24,28,44); border: 1px solid rgb(42,48,68); color: var(--white); }
.cr-mt-h { color: var(--grey); }
.cr-mt-m { font-weight: bold; }
/* Bouton Jouer/Lancer : même largeur que le pavé de mise (clamp 360–620), centré */
.cr-go, .mn-go, .hl-go, .crash-go, .pk-go, .sc-go, .slots-go, .hr-go, .up-go {
  display: flex; width: 100%; max-width: clamp(360px, 42vw, 620px); margin: 0 auto; box-sizing: border-box;
}
.cr-go .btn, .mn-go .btn, .hl-go .btn, .crash-go .btn, .pk-go .btn, .sc-go .btn, .slots-go .btn, .hr-go .btn, .up-go .btn {
  flex: 1 1 auto; width: 100%; min-width: 0;
}
/* Écran unique : route à gauche, difficulté + mise + boutons à droite (comme le Jacks or Better) */
.cr-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.cr-center { flex: 65; min-width: 0; position: relative; min-height: 0; }
.cr-road { width: 100%; height: 100%; display: block; background: rgb(36,40,46); border-radius: 8px; }
.cr-panel { flex: 35; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto; }
.cr-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cr-controls .cr-diffrow { max-width: none; margin: 0; }
.cr-keypad { width: 100%; display: flex; justify-content: center; }
.cr-controls .keypad { width: 100%; max-width: none; }
.cr-controls .cr-go { width: 100%; max-width: none; margin: 0; gap: 8px; }
.cr-go .btn:disabled { cursor: default; }
/* phase de jeu : Avancer · Encaisser — 2 boutons identiques, redimensionnés pour tenir sur une ligne */
.cr-go.cr-playing .btn { flex: 1 1 0; width: auto; min-width: 0; height: 48px; font-size: 21px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════
   LIMBO
   ════════════════════════════════════════════════════════════ */
.lm-hist { display: flex; flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; align-items: center; gap: 5px; min-height: 26px; width: 100%; }
.lm-hist-empty { color: var(--grey); font-size: 14px; font-family: var(--casey); }
.lm-badge { width: 62px; height: 26px; border-radius: 8px; border: 1px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--casey); font-weight: bold; font-size: 14px; }
.lm-main { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 0 8px 8px; }
.lm-canvas { flex: 7; min-width: 0; min-height: 0; }
.lm-right { flex: 3; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.lm-field { border-radius: 8px; border: 1px solid rgb(70,45,115); background: rgb(18,10,38);
  display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; }
.lm-cap { flex: 1; text-align: left; font-size: 14px; font-weight: bold; color: rgb(130,108,185); text-transform: lowercase; line-height: 1.05; }
.lm-cap::first-letter { text-transform: uppercase; }
.lm-target { width: 78px; flex-shrink: 0; height: 28px; border: none; background: transparent;
  color: #fff; text-align: right; font-family: var(--casey); font-weight: bold; font-size: 21px; }
.lm-slider { width: 100%; height: 64px; cursor: pointer; display: block; }
.lm-sep { height: 1px; background: rgb(55,35,95); }
.lm-go { display: flex; width: 100%; }
.lm-go .lm-roll { flex: 1 1 auto; width: 100%; min-width: 0; }
.lm-roll { height: 48px; font-size: 21px; font-weight: bold; }

/* ════════════════════════════════════════════════════════════
   MINES
   ════════════════════════════════════════════════════════════ */
.mn-bet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; overflow-y: auto; }
.mn-bomb-title { font-size: 13px; font-weight: bold; color: rgb(225,120,120); }
.mn-steprow { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.mn-step { width: 48px; height: 48px; border-radius: 50%; border: 1.4px solid rgb(90,200,175); cursor: pointer;
  background: linear-gradient(rgb(55,130,115), rgb(28,76,66)); color: #fff; font-size: 26px; font-weight: bold; }
.mn-step:hover { filter: brightness(1.2); }
.mn-valbox { flex: 1 1 auto; min-width: 0; height: 56px; border-radius: 14px; border: 2px solid; background: linear-gradient(rgb(32,11,13), rgb(16,5,7));
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.mn-valnum { font-size: 30px; font-weight: bold; }
.mn-valword { font-size: 14px; color: rgb(205,200,205); }
.mn-presetrow { display: flex; gap: 7px; width: 100%; }
.mn-preset { flex: 1 1 0; min-width: 0; height: 32px; border-radius: 9px; border: 1px solid rgb(120,90,60); cursor: pointer;
  background: linear-gradient(rgb(60,24,40), rgb(40,14,24)); color: rgb(210,200,195); font-size: 14px; font-weight: bold; }
.mn-preset:hover { filter: brightness(1.2); }
.mn-preset.on { background: linear-gradient(rgb(180,135,30), rgb(120,88,16)); border-color: rgb(255,215,90); color: #fff; }
.mn-hint { font-size: 12px; color: var(--grey); }
/* Une seule page : grille à gauche, infos + sélection + pavé + bouton à droite (comme le Crash) */
.mn-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px;
  container-type: size; }   /* cqh : hauteur libre, utilisée par la grille sur téléphone */
/* La grille remplit toute la place libre ; les cases ne sont pas forcément carrées. */
.mn-grid { flex: 65; min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 5px; align-self: stretch; }
.mn-panel { flex: 35; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto;
  background: linear-gradient(rgb(14,24,22), rgb(9,16,15)); border: 1px solid rgba(40,140,120,0.5); border-radius: 12px; }
.mn-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mn-select { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mn-keypad { width: 100%; display: flex; justify-content: center; }
.mn-controls .keypad { width: 100%; max-width: none; }
.mn-controls .mn-go { width: 100%; max-width: none; margin: 0; }
.mn-cell { position: relative; border-radius: 8px; cursor: pointer; background: rgb(52,111,101); border: 1.5px solid rgb(84,150,138);
  display: flex; align-items: center; justify-content: center; }
.mn-cell:hover { background: rgb(70,138,126); }
.mn-cell.safe { background: rgb(20,80,30); border-color: var(--green); cursor: default; }
.mn-cell.mine { background: rgb(110,22,22); border-color: var(--red); cursor: default; }
.mn-wm { position: absolute; inset: 10%; background: url('images/logo.png') center/contain no-repeat; opacity: 0.10; pointer-events: none; }
.mn-cell.safe .mn-wm, .mn-cell.mine .mn-wm { display: none; }
.mn-em { font-size: 50%; line-height: 1; }
.mn-cell .mn-em { font-size: min(7vw, 38px); }
.mn-info { width: 100%; background: var(--bg-card, rgb(20,16,30)); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; }
.mn-topline { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mn-subline { display: flex; align-items: baseline; justify-content: center; gap: 6px 18px; flex-wrap: wrap; }
.mn-cap { font-size: 13px; color: var(--grey); }
.mn-mult { font-size: 22px; font-weight: bold; color: var(--teal, rgb(30,180,160)); }
.mn-gain { font-size: 14px; font-weight: bold; color: var(--green); text-align: center; }
.mn-next { font-size: 13px; color: var(--orange); }
.mn-prog { font-size: 13px; color: var(--white); }
.mn-cashout { height: 44px; width: 100%; margin-top: 10px; }
.mn-msg { font-size: 13px; color: var(--white); text-align: center; margin-top: 8px; min-height: 18px; }

/* ════════════════════════════════════════════════════════════
   KENO
   ════════════════════════════════════════════════════════════ */
.game-screen .game-content:has(.kn-main) { position: relative; }
.kn-main { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 10px; }
.kn-grid { flex: 65; min-width: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); gap: 5px; }
.kn-cell { border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: bold; background: rgb(55,40,50); color: rgb(200,190,210); user-select: none; }
.kn-right { flex: 35; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.kn-sel { text-align: center; font-size: 14px; color: var(--grey); }
.kn-result { text-align: center; font-size: 14px; color: var(--white); min-height: 18px; }
.kn-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.kn-btns .btn { height: 48px; min-width: 0; }
.kn-info { position: absolute; top: 10px; right: 12px; width: 40px; height: 36px; border-radius: 8px;
  background: rgb(40,10,10); color: rgb(235,110,110); font-size: 18px; font-weight: bold; border: 2px solid rgb(170,55,55); cursor: pointer; }
/* ℹ déplacé dans la barre du solde : tout à droite, sur la même ligne */
.game-statsbar .kn-info { margin-left: auto; top: auto; right: auto; }
.kn-overlay { position: absolute; top: 8px; right: 8px; width: 62%; height: 94%; z-index: 20;
  background: rgb(30,7,9); border: 2px solid rgb(140,50,50); border-radius: 6px; display: flex; flex-direction: column; padding: 8px 10px; }
.kn-ov-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.kn-ov-head span { font-size: 16px; font-weight: bold; color: rgb(245,130,130); }
.kn-ov-close { width: 32px; height: 28px; border: none; border-radius: 4px; background: rgb(70,30,35); color: rgb(200,170,170); font-weight: bold; cursor: pointer; }
.kn-ov-canvas { flex: 1; width: 100%; min-height: 0; }

/* ════════════════════════════════════════════════════════════
   ULTIMATE POKER
   ════════════════════════════════════════════════════════════ */
.up-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.up-center { flex: 1; min-width: 0; position: relative; min-height: 0; }
.up-table { width: 100%; height: 100%; display: block; }
.up-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto; }
.up-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.up-keypad { width: 100%; display: flex; justify-content: center; }
.up-controls .keypad { width: 100%; max-width: none; }
.up-controls .up-go { width: 100%; max-width: none; margin: 0; gap: 8px; }
.up-hint { text-align: center; font-size: 14px; font-weight: bold; color: var(--gold); min-height: 18px; line-height: 1.25; }
.up-hint:empty { display: none; min-height: 0; }
/* Case BONUS : facultative, donc éteinte par défaut et allumée quand elle est misée */
.up-bonus { height: 38px; font-size: 15px; background: rgb(48,38,64); }
.up-bonus.on { background: rgb(118,78,168); }
.up-go .btn:disabled { cursor: default; }
.up-go.up-multi .btn { flex: 1 1 0; width: auto; min-width: 0; height: 48px; font-size: 15px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
/* Vitrine des paiements : mêmes lignes que le tableau des gains du vidéo poker */
.up-pt-sub { font-size: 11px; font-weight: bold; color: rgb(255,225,150); letter-spacing: 0.04em; margin: 5px 0 3px; }
.up-pt-note { font-size: 10px; color: rgb(205,195,185); line-height: 1.35; margin-top: 6px; }
/* Le ℹ reprend le vert du jeu. Deux sélecteurs, car la règle partagée avec le vidéo
   poker (.pk-info, .up-info) est écrite plus bas dans la feuille : à spécificité égale
   c'est elle qui gagnerait, et le bouton resterait magenta. */
.up-center .up-info, .game-statsbar .up-info {
  background: rgb(16,40,12); color: rgb(178,226,96); border-color: rgb(92,150,44);
}
.up-paytable .pk-pt-name { color: rgb(230,230,240); }
.up-paytable .pk-pt-row.on .pk-pt-name { color: #fff; font-weight: bold; }

/* Crazy Time, téléphone : boutons flottants, posés PAR-DESSUS la table.
   `position: sticky` ne flottait pas : la colle n'agit que si le contenu défile, et ici
   il tient dans l'écran — la rangée restait donc dans le flux et volait sa hauteur à la
   roue. En absolu elle sort du flux ; le canvas récupère toute la hauteur et se réserve
   lui-même la bande du bas (BARRE_TEL dans game_crazytime.js, à garder égal à --ct-barre). */
@media (max-width: 820px) {
  #content-CRAZYTIME { --ct-barre: 56px; }
  #content-CRAZYTIME .ct-actions {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--ct-barre);
    min-height: 0; padding: 6px 8px; z-index: 3;
    gap: 6px; flex-wrap: nowrap; background: none; box-shadow: none; }
  .ct-btn, #ct-spin { min-width: 0; flex: 1 1 0; padding: 0 4px; font-size: 21px; white-space: nowrap; overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════
   SIC BO
   ════════════════════════════════════════════════════════════ */
.dc-table { flex: 1; width: 100%; min-height: 0; display: block; }
.dc-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; min-height: 58px; flex-wrap: wrap; }
.dc-btn { height: 44px; min-width: 120px; }
/* Le tapis Sic Bo occupe toute la largeur : les boutons restent une simple barre dessous. */
#content-SICBO { position: relative; }
#dc-roll { min-width: 170px; }
/* Téléphone : barres de boutons d'action sur une seule ligne (Sic Bo, Craps, Baccarat, Jacks or Better) */
@media (max-width: 820px) {
  .dc-actions, .cr-actions, .bc-actions { gap: 6px; padding: 6px 0; flex-wrap: nowrap; }
  .dc-actions .btn, #dc-roll,
  .cr-actions .btn,
  .bc-actions .btn { min-width: 0 !important; flex: 1 1 0; padding: 0 4px; font-size: 21px; white-space: nowrap; overflow: hidden; }
  /* Sic Bo : même principe que la roulette — le tapis déborde et défile, la barre de
     boutons reste épinglée en bas et le tapis passe dessous. Sans la hauteur fixe
     ci-dessous le canvas s'ajustait pile à l'écran, donc rien ne défilait et
     « sticky » n'avait aucun effet. */
  #content-SICBO { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dc-table { flex: none; height: 780px; }
  .dc-actions { position: sticky; bottom: 0; z-index: 3; padding: 6px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ════════════════════════════════════════════════════════════
   CRAPS
   ════════════════════════════════════════════════════════════ */
.cr-table { flex: 1; width: 100%; min-height: 0; cursor: pointer; }
.cr-actions { display: flex; justify-content: center; gap: 10px; padding: 8px 0; }
.cr-actions .btn { height: 46px; }
.cr-actions .btn:disabled { cursor: default; }

/* ════════════════════════════════════════════════════════════
   POKER SOLO (vidéo poker)
   ════════════════════════════════════════════════════════════ */
/* Écran unique : cartes à gauche, mise + boutons à droite (comme Mines) */
/* Comme le Blackjack : le tapis prend toute la place (cartes, cercle « Mise », jetons),
   les boutons de mise ou de jeu dessous (classes bj-betactions / bj-bact). */
.pk-game { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 8px 0; }
.pk-center { flex: 1; min-width: 0; position: relative; min-height: 0; }
.pk-hand { width: 100%; height: 100%; display: block; }
.pk-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto; }
.pk-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pk-keypad { width: 100%; display: flex; justify-content: center; }
.pk-controls .keypad { width: 100%; max-width: none; }
.pk-controls .pk-go { width: 100%; max-width: none; margin: 0; gap: 8px; }
.pk-info, .up-info { position: absolute; top: 8px; left: 8px; width: 36px; height: 36px; border-radius: 8px;
  background: rgb(36,14,36); color: rgb(210,95,210); font-size: 18px; font-weight: bold; border: 2px solid rgb(150,55,150); cursor: pointer; }
/* ℹ déplacé sur la ligne du solde */
.game-statsbar .pk-info, .game-statsbar .up-info { margin-left: auto; top: auto; left: auto; right: auto; }
.pk-paytable, .up-paytable { position: absolute; top: 8px; right: 8px; z-index: 10;
  background: rgb(28,9,17); border: 2px solid rgb(150,110,35); border-radius: 6px; padding: 8px 10px; min-width: 200px; }
.pk-pt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pk-pt-head span { font-size: 13px; font-weight: bold; color: var(--gold); }
.pk-pt-close { background: rgb(30,9,18); color: var(--gold); border: 1px solid rgb(120,90,30); border-radius: 4px; cursor: pointer; font-weight: bold; padding: 0 6px; }
.pk-pt-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 4px; background: rgb(30,9,18); margin-bottom: 1px; border-radius: 3px; }
.pk-pt-row.on { background: rgb(150,110,35); }
.pk-pt-name { font-size: 12px; }
.pk-pt-pay { font-size: 12px; font-weight: bold; color: var(--gold); }
.pk-pt-row.on .pk-pt-pay { color: #fff; }
.pk-hint { text-align: center; font-size: 14px; font-weight: bold; color: var(--gold); min-height: 18px; }
.pk-hint:empty { display: none; min-height: 0; }
.pk-go .btn:disabled { cursor: default; }
/* Phase de choix : Tout jeter · Distribuer · Tout garder — 3 boutons identiques, redimensionnés pour tenir sur une ligne */
.pk-go.pk-choosing .btn { flex: 1 1 0; width: auto; min-width: 0; height: 48px; font-size: 15px; padding: 0 6px; white-space: nowrap; overflow: hidden; }

/* ════════════════════════════════════════════════════════════
   BACCARAT
   ════════════════════════════════════════════════════════════ */
.bc-infobar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 30px; }
.bc-betinfo { font-size: 13px; color: var(--gold); }
.bc-msg { flex: 1; text-align: center; font-size: 16px; font-weight: bold; color: var(--white); }
.bc-table { flex: 1; width: 100%; min-height: 0; cursor: pointer; }
.bc-actions { display: flex; justify-content: center; gap: 8px; padding: 8px 0; min-height: 56px; }
.bc-actions .btn { height: 40px; }

/* ════════════════════════════════════════════════════════════
   TICKET À GRATTER
   ════════════════════════════════════════════════════════════ */
/* Écran unique : ticket à gauche, gains + mise + bouton à droite (comme le Jacks or Better) */
.sc-game { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 8px; }
.sc-center { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; }
.sc-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; overflow-y: auto; }
.sc-controls { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.sc-keypad { width: 100%; display: flex; justify-content: center; }
.sc-controls .keypad { width: 100%; max-width: none; }
.sc-controls .sc-go { width: 100%; max-width: none; margin: 0; }
/* Bouton ℹ (déplacé sur la ligne du solde) : affiche/masque la table des gains */
.sc-info { position: absolute; top: 8px; left: 8px; width: 36px; height: 36px; border-radius: 8px;
  background: rgb(38,28,6); color: rgb(255,200,50); font-size: 18px; font-weight: bold; border: 2px solid rgb(170,130,25); cursor: pointer; }
.game-statsbar .sc-info { margin-left: auto; top: auto; left: auto; right: auto; }
/* Table des gains : petite carte au papier du ticket, sous le bouton Jouer (ordinateur),
   sous le ticket (téléphone) — comme celle de la machine à sous. */
.sc-paytable {
  width: 100%; flex-shrink: 0; padding: 7px 10px 6px; border-radius: 12px; color: rgb(150,20,36);
  background:
    repeating-linear-gradient(45deg, rgba(170,120,30,0.04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgb(252,245,224), rgb(238,222,180));
  box-shadow: inset 0 0 0 2px rgb(196,150,46), inset 0 0 0 4px rgb(250,242,218), inset 0 0 0 5px rgb(176,128,34);
}
.sc-pt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding: 4px 10px 5px; border-radius: 7px;
  background: radial-gradient(120% 150% at 30% 0%, rgb(172,30,54), rgb(98,8,24) 60%, rgb(64,4,16)); box-shadow: inset 0 0 0 1px rgb(226,178,64); }
.sc-pt-title { font-family: var(--casey); font-size: 19px; line-height: 1; color: rgb(255,226,140); text-shadow: 0 1px 0 rgb(50,4,12); }
.sc-pt-head small { font: bold 10px/1 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,226,140,0.8); }
.sc-pt-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; align-items: center; text-align: center; padding: 1px 0;
  font: italic 900 15px/1 Impact, 'Arial Black', sans-serif; letter-spacing: 0.3px; }
.sc-pt-row + .sc-pt-row { border-top: 1px dashed rgba(176,128,34,0.35); }
.sc-pt-row canvas { display: block; width: 60px; height: 34px; margin: -2px auto; }
.sc-pt-hdr { padding: 2px 0 4px; font: bold 9.5px/1.2 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(120,72,22); }
.sc-pt-top { background: linear-gradient(90deg, transparent, rgba(236,186,60,0.28), transparent); font-size: 17px; }
/* ── Ticket « Trésor 777 » ─────────────────────────────────────
   Papier ivoire guilloché, double filet or, bords perforés (masque : des demi-cercles
   découpés tous les 20 px à gauche et à droite), bandeau bordeaux, fenêtre de jeu dorée,
   pied de ticket avec les meilleurs gains et un numéro de série. */
.sc-ticket {
  flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 22px 10px; border-radius: 16px;
  background:
    repeating-radial-gradient(circle at 50% 118%, rgba(170,120,30,0.07) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(45deg, rgba(170,120,30,0.04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgb(252,245,224), rgb(238,222,180));
  box-shadow: inset 0 0 0 3px rgb(196,150,46), inset 0 0 0 6px rgb(250,242,218), inset 0 0 0 7.5px rgb(176,128,34);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 5.5px, #000 6px) left / 51% 20px repeat-y,
                radial-gradient(circle at 100% 50%, transparent 5.5px, #000 6px) right / 51% 20px repeat-y;
          mask: radial-gradient(circle at 0 50%, transparent 5.5px, #000 6px) left / 51% 20px repeat-y,
                radial-gradient(circle at 100% 50%, transparent 5.5px, #000 6px) right / 51% 20px repeat-y;
}
.sc-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 14px; border-radius: 10px;
  background: radial-gradient(120% 150% at 30% 0%, rgb(172,30,54), rgb(98,8,24) 60%, rgb(64,4,16));
  box-shadow: inset 0 0 0 1.5px rgb(226,178,64), inset 0 0 0 3.5px rgb(98,8,24), inset 0 0 0 4.5px rgba(226,178,64,0.5);
}
.sc-logo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sc-logo-777 {
  font: italic 900 32px/1 Impact, 'Arial Black', sans-serif; letter-spacing: -1px; padding-right: 2px;
  background: linear-gradient(180deg, rgb(255,246,190), rgb(246,196,64) 48%, rgb(176,112,18) 52%, rgb(240,190,70));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgb(50,4,12));
}
.sc-logo-nom { font-family: var(--casey); font-size: 30px; line-height: 1; color: rgb(255,226,140); white-space: nowrap;
  text-shadow: 0 2px 0 rgb(50,4,12), 0 0 12px rgba(255,190,60,0.35); }
.sc-lot {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 4px 13px 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgb(255,236,150), rgb(226,166,40)); color: rgb(92,10,26);
  box-shadow: 0 2px 0 rgb(50,4,12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.sc-lot small { font: bold 9px/1 'Helvetica Neue', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.8px; }
.sc-lot b { font: italic 900 20px/1 Impact, 'Arial Black', sans-serif; }
.sc-regle { flex-shrink: 0; text-align: center; font: bold 11px/1.2 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.6px;
  text-transform: uppercase; color: rgb(120,72,22); }
.sc-regle b { color: rgb(160,16,40); }
.sc-grid {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; min-width: 0;
  padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgb(226,202,142), rgb(204,170,96));
  box-shadow: inset 0 2px 5px rgba(90,55,0,0.35), 0 0 0 1px rgba(150,105,25,0.6);
}
.sc-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: bold 11px/1 'Helvetica Neue', Arial, sans-serif; color: rgb(110,70,25); }
.sc-mini { display: flex; gap: 12px; min-width: 0; overflow: hidden; }
.sc-mini span { white-space: nowrap; }
.sc-mini i { font-style: normal; font-weight: 900; margin-right: 3px; }
.sc-serie { display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'Cosi', 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.5px; }
.sc-serie::before { content: ''; width: 44px; height: 13px;
  background: repeating-linear-gradient(90deg, rgb(70,45,20) 0 1px, transparent 1px 2px, rgb(70,45,20) 2px 4px, transparent 4px 5px, rgb(70,45,20) 5px 6px, transparent 6px 9px); }
.sc-cellwrap { position: relative; min-width: 0; min-height: 0; }
.sc-cell { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; border-radius: 10px; }
.sc-msg { text-align: center; font-size: 15px; font-weight: bold; color: var(--white); background: rgba(10,8,18,0.86); border-radius: 6px; padding: 8px 12px; }
.sc-msg:empty { display: none; }

/* ════════════════════════════════════════════════════════════
   MOBILE / TÉLÉPHONE — version responsive (couche 1 : navigation)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* ── Grille de jeux : 2 colonnes × 5 lignes ── */
  /* 22 px de marge basse : les ronds se posent SOUS les tuiles, pas par-dessus. */
  .page { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); gap: 9px; padding: 8px 6px 22px; }
  /* Version téléphone : nom incliné à -10°, police Casey, couleur du jeu éclaircie — max 2 lignes */
  .game-btn .label { font-size: 36px; transform: rotate(-10deg); white-space: nowrap; }
  /* Flèches latérales retirées → les cases prennent toute la largeur ;
     les flèches passent dans la barre du bas, avec « Menu principal » et « Statistiques » */
  #menu .center > .arrow { display: none; }
  /* Plus aucune flèche sur téléphone : dans un Run, la pastille du chrono s'ajoutait aux
     deux flèches et aux trois boutons, et la barre débordait (« Statisti… »). La page est
     indiquée par les deux ronds sous la grille, et le changement se fait au glissement
     ou en touchant un rond. */
  .bar-arrow { display: none; }
  #menu .center > .dots { display: flex; }

  /* ── Titres / en-têtes ── */
  .page-title { font-size: 26px; padding: 14px 0 6px; }
  .page-subtitle { font-size: 12px; }
  #menu .header { padding: 12px 12px 6px; }
  #menu .header .balance { font-size: 15px; }
  #menu .header .stats { font-size: 12px; margin-left: 8px; display: block; }

  /* Menu principal (écran d'accueil) : même agencement que la version ordinateur
     → pas de surcharge mobile, on garde width:360px / height:60px / gap:11px / margin-bottom:14vh */
  /* Statistiques / Historique : on récupère les marges latérales. Entre les 24 px de la
     carte et les 8/16 px des cellules, un téléphone de 375 px perdait près d'un quart de
     sa largeur — les montants n'avaient plus la place de tenir sur une ligne. */
  #stats-card, #history-card { padding: 10px 8px 8px; gap: 8px; }
  table.stats th { font-size: 13px; padding: 0 5px; }
  table.stats th:first-child { padding-left: 10px; }
  table.stats td { font-size: 15px; padding: 0 5px; height: 38px; }
  table.stats td:first-child { padding-left: 10px; }
  /* Résumé : tuiles plus compactes, 2 par ligne (Statistiques) ou 3 (Historique) */
  .st-resume { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  #history-resume { grid-template-columns: repeat(3, 1fr); }
  .st-tuile { padding: 6px 10px; border-radius: 10px; }
  .st-lib { font-size: 12px; }
  .st-val { font-size: 19px; }
  #history-resume .st-val { font-size: 16px; }
  .st-jeu { gap: 6px; }
  .st-jeu i { width: 7px; height: 7px; }
  .st-taux { min-width: 46px; }
  .st-taux i { width: 46px; }
  .st-pastille { padding: 2px 6px; }
  /* Colonnes de montants : jamais coupées. Le nom du jeu et le détail, eux, peuvent
     passer sur deux lignes — c'est ce qui laisse la largeur aux chiffres. */
  table.stats td:not(:first-child):not(:last-child),
  table.stats th:not(:first-child):not(:last-child) { white-space: nowrap; }

  /* Probabilités : corps réduit pour que la plupart des tableaux tiennent sans défiler
     (19 blocs sur 20 débordaient à 15 px, 12 à 12 px — les plus larges défilent toujours). */
  .vip-scroll { padding: 12px 12px; }
  .proba-block { padding: 8px 10px 10px; }
  .proba-title { font-size: 18px; }
  .proba-body { font-size: 12px; line-height: 1.5; }

  /* ── Barres de boutons du bas ── */
  .bottom-bar { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .btn.wide { min-width: 0; flex: 1 1 40%; height: 44px; font-size: 14px; }
  /* Boutons Jouer/Lancer : même largeur que le pavé (94vw) et grande taille sur mobile */
  .cr-go, .mn-go, .hl-go, .crash-go, .pk-go, .sc-go, .slots-go, .hr-go, .up-go { max-width: 94vw; }
  .cr-go .btn, .mn-go .btn, .hl-go .btn, .crash-go .btn, .pk-go .btn, .sc-go .btn, .slots-go .btn, .hr-go .btn, .up-go .btn {
    flex: 1 1 auto; width: 100%; height: 48px; font-size: 21px;
  }
  /* Barre du menu des jeux : flèches + boutons sur une seule ligne.
     Les boutons gardent leur taille d'origine (.btn par défaut). */
  #menu .bottom-bar { flex-wrap: nowrap; gap: 6px; padding: 8px; }
  #menu .bottom-bar .bar-arrow { flex: 0 0 auto; height: 42px; }
  /* Les 3 boutons se partagent la largeur à parts égales (flex: 1 1 0). Le pire cas est
     un Run : la pastille du chrono prend ~135 px, il ne reste que 70 px par bouton et
     « Statistiques » mesure 72 px à 16 px — il débordait. À 13 px il fait 59 px pour
     64 px utiles, et reste lisible. */
  #menu .bottom-bar .btn { flex: 1 1 0; min-width: 0; padding: 0 3px; font-size: 13px; white-space: nowrap; }
  /* Icône AU-DESSUS du libellé : chaque bouton ne demande plus que la largeur du mot
     (« Statistiques » ≈ 55 px à 12 px), ce qui tient à 320 px même pendant un Run. */
  #menu .bottom-bar .bb-btn { flex-direction: column; gap: 1px; height: 48px; font-size: 12px; line-height: 1.1; border-radius: 11px; overflow: hidden; }
  #menu .bottom-bar .bb-btn .bb-ico { width: 17px; height: 17px; }
  /* Pastille du Run dans cette barre : sur DEUX lignes (« Run 4:32 » / gain), à la hauteur
     des boutons. Sur une ligne elle prenait jusqu'à 160 px à 320 px de large et ne laissait
     que 39 px par bouton ; ainsi elle en prend ~90 et « Statistiques » tient entier. */
  #menu .bottom-bar .run-chip { flex-wrap: wrap; align-content: center; max-width: 92px; height: auto; min-height: 48px;
    font-size: 13px; line-height: 1.15; row-gap: 0; column-gap: 4px; padding: 2px 6px; border-radius: 11px; text-align: center; }
  /* « Temps écoulé — finis ta manche » : le message se coupe dans la pastille au lieu d'en sortir */
  #menu .bottom-bar .run-chip span { white-space: normal; }

  /* ── En-tête de jeu (bande + retour) ── */
  .game-header { padding: 8px 8px 4px; gap: 6px; }
  /* hauteur de bande fixe : seule la longueur change sur téléphone (texte recadré par JS) */
  .game-back { min-width: 78px; font-size: 20px; padding: 0 8px; }
  /* Chrono du Run : en version courte dans la barre de stats (le solde juste à côté dit
     déjà où en est le bénéfice), en version complète dans la barre du menu. */
  .game-statsbar .g-run { font-size: 16px; min-width: 0; padding-left: 6px; }
  .run-chip { font-size: 16px; padding: 0 9px; gap: 5px; }   /* hauteur 42px conservée : idem .btn */
  /* Solde + mise + résultat net doivent tenir sur UNE ligne avec le ℹ de la machine à
     sous : à 20px la rangée mesurait 287px pour 283px utiles, donc le ℹ basculait sur
     une deuxième ligne. 16px et des écarts resserrés laissent de la marge. */
  .game-statsbar { padding: 2px 10px 6px; }
  .game-statsbar .g-balance { font-size: 16px; }
  .game-statsbar .g-stats { font-size: 16px; margin-left: 12px; }
  .game-statsbar .g-net { font-size: 16px; margin-left: 8px; }
  /* la ligne ne fait plus que 20 px sur téléphone : le bouton s'y cale aussi */
  .game-statsbar > button { width: 28px; height: 20px; font-size: 13px; }
  .game-statsbar > button::after { inset: -12px -9px; }
  .game-statsbar > button.auto-btn { width: 38px; margin-left: 4px; font-size: 9px; }
  /* Crazy Time : ZOOM + AUTO côte à côte. Sans resserrer, la ligne (solde, mise, gain du tour,
     deux boutons) dépassait de ~46 px et passait sur deux lignes à chaque gain affiché. */
  .game-statsbar:has(.zoom-btn) { gap: 2px; }
  .game-statsbar:has(.zoom-btn) .g-balance,
  .game-statsbar:has(.zoom-btn) .g-stats,
  .game-statsbar:has(.zoom-btn) .g-net { font-size: 15px; }
  .game-statsbar:has(.zoom-btn) .g-stats { margin-left: 6px; }
  .game-statsbar:has(.zoom-btn) .g-net { margin-left: 4px; }
  .game-statsbar:has(.zoom-btn) > button.auto-btn { width: 30px; margin-left: 3px; font-size: 8px; letter-spacing: 0; }
  .game-content { padding: 8px 10px; }

  /* ── Keypad de mise : tient dans la largeur du téléphone ── */
  .keypad, .cr-diffrow { max-width: 94vw; }
  .crash-controls { max-width: 94vw; }   /* tout le bloc crash (auto/pavé/bouton) à 94vw */
  .hr-cards { max-width: 94vw; }   /* même largeur que le pavé de mise */

  /* ── MOBILE : Courses (piste en haut, paris en dessous, bouton flottant) ── */
  .hr-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  .hr-trackwrap { flex: none; width: 100%; max-width: 94vw; height: 19vh; min-height: 140px; }
  /* pendant la course, la piste prend toute la hauteur libre */
  .hr-game.hr-course .hr-trackwrap { flex: 1; height: auto; min-height: 0; }
  .hr-panel { width: 100%; max-width: 94vw; flex: none; border: none; background: none; padding: 0; overflow: visible; gap: 6px; }
  /* écran de mise : le panneau occupe toute la hauteur, l'aperçu s'étire dans l'espace libre */
  .hr-game:not(.hr-course) .hr-panel { flex: 1 0 auto; }
  /* téléphone : aperçu un peu plus bas, pour que tout le pavé tienne au-dessus du bouton */
  .hr-apercu { min-height: 96px; }
  .hr-card { padding-bottom: 5px; gap: 0; }
  .hr-card .hr-name { margin-top: 2px; }
  .hr-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }

  /* ── Paramètres : padding réduit ── */
  .settings-content { padding: 16px 18px; }
}

/* ── MOBILE : Roulette (empilée roue → historique → tapis → mises) ── */
@media (max-width: 820px) {
  .rl-wrap { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 8px; }
  .rl-wheel { flex: none; width: 100%; height: 62vw; max-height: 320px; }
  /* Un seul défilement, celui de .rl-wrap : la colonne ne doit pas rétrécir et défiler
     à son tour (réglage ordinateur), sinon le calculateur de martingale restait coincé
     dans un second défilement imbriqué, collé au bas de l'écran. */
  .rl-right { width: 100%; max-width: none; flex: none; min-height: auto; overflow: visible; }
  .rl-wrap { padding-bottom: 28px; }
  /* Écarte le calculateur de l'ombre que le pied collant projette vers le bas */
  .rl-mart { margin-top: 14px; }
  .rl-hist { height: 42px; }
  .rl-table { height: 230px; }
  .rl-rack { height: 96px; }
  .rl-total { font-size: 15px; text-align: center; }
  .rl-btns { flex-wrap: nowrap; gap: 6px; }
  .rl-btns .btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 4px; font-size: 21px; white-space: nowrap; overflow: hidden; }
  .rl-msg, .rl-spinmsg { text-align: center; }
  .rl-msg { min-height: 0; }
  .rl-spinmsg { font-size: 16px; min-height: 0; }
  /* Pied de page épinglé : total + Lancer toujours accessibles sans scroller */
  .rl-foot { position: sticky; bottom: 0; background: rgb(8,28,10); padding: 4px 4px 2px; gap: 4px; z-index: 3;
    box-shadow: 0 -6px 10px 6px rgb(8,28,10), 0 6px 10px 6px rgb(8,28,10); }
}

/* ── MOBILE : Mines (jeu en haut, multiplicateur/infos en bas) ── */
@media (max-width: 820px) {
  .mn-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  /* Téléphone : toute la largeur ; en hauteur, de quoi laisser voir le multiplicateur et le bouton Jouer */
  .mn-grid { flex: none; width: 100%; height: max(200px, 100cqh - 150px); align-self: stretch; }
  .mn-panel { width: 100%; flex: none; border: none; border-radius: 0; padding: 0; background: none; overflow: visible; }
  .mn-controls { max-width: 94vw; margin: 0 auto; }
  .mn-info { width: 100%; flex: none; padding: 6px 12px; gap: 1px; }
  .mn-cap { align-self: center; }
  .mn-mult { font-size: 20px; text-align: center; }
  /* bouton flottant (comme le Limbo) : reste collé en bas pendant le défilement */
  .mn-controls .mn-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ── MOBILE : Jacks or Better (tapis plein écran, boutons dessous, comme le Blackjack) ── */
@media (max-width: 820px) {
  .pk-game { padding: 6px 4px 0; }
}

/* ── MOBILE : Ultimate Poker (tapis en haut, mise/boutons en bas) ── */
@media (max-width: 820px) {
  .up-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  /* 4 rangées à caser (Banque · tableau · joueur · cases de mise) : plus haut que le vidéo poker */
  .up-center { flex: none; width: 100%; max-width: 94vw; height: 48vh; min-height: 320px; align-self: center; }
  .up-panel { width: 100%; flex: none; border: none; border-radius: 0; padding: 0; background: none; overflow: visible; }
  .up-controls { max-width: 94vw; margin: 0 auto; }
  .up-bonus { height: 44px; font-size: 18px; }
  .up-go.up-multi .btn { height: 48px; font-size: 17px; }
  .up-controls .up-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
  .up-paytable { max-height: 92%; overflow-y: auto; }
}

/* ── MOBILE : Chicken Road (route en haut, difficulté/mise/boutons en bas, boutons flottants) ── */
@media (max-width: 820px) {
  .cr-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  .cr-center { flex: none; width: 100%; max-width: 94vw; height: 42vh; min-height: 240px; align-self: center; }
  .cr-panel { width: 100%; flex: none; border: none; border-radius: 0; padding: 0; background: none; overflow: visible; }
  .cr-controls { max-width: 94vw; margin: 0 auto; }
  .cr-controls .cr-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ── MOBILE : Ticket à gratter (ticket en haut, gains/mise/bouton en bas, bouton flottant) ── */
@media (max-width: 820px) {
  .sc-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  .sc-center { flex: none; width: 100%; max-width: 94vw; height: 56vh; min-height: 360px; align-self: center; }
  .sc-ticket { padding: 8px 15px 8px; gap: 6px; }
  .sc-head { padding: 5px 10px; }
  .sc-logo-777 { font-size: 24px; }
  .sc-logo-nom { font-size: 22px; }
  .sc-lot { padding: 3px 10px 4px; }
  .sc-lot b { font-size: 16px; }
  .sc-regle { font-size: 9px; letter-spacing: 0.3px; }
  .sc-grid { gap: 6px; padding: 6px; }
  .sc-foot { font-size: 10px; }
  .sc-serie::before { display: none; }
  .sc-panel { width: 100%; flex: none; padding: 0; background: none; overflow: visible; }
  .sc-controls { max-width: 94vw; margin: 0 auto; }
  .sc-controls .sc-paytable { order: -1; }
  .sc-controls .sc-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ── MOBILE : Machine à sous (machine en haut, mise/bouton en bas, bouton flottant) ── */
@media (max-width: 820px) {
  .slots-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  .slots-stage { flex: none; width: 100%; max-width: 94vw; height: 58vh; min-height: 380px; align-self: center; }
  .slots-panel { width: 100%; flex: none; padding: 0; background: none; overflow: visible; }
  .slots-controls { max-width: 94vw; margin: 0 auto; }
  /* table des gains sous la machine (au-dessus du pavé) pour ne pas tomber sous le bouton flottant */
  .slots-controls .slots-pay { order: -1; }
  .slots-controls .slots-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ── MOBILE : ordre des jeux page 1 (échange Hold'em↔Chevaux et Sic Bo↔Omaha) ── */
@media (max-width: 820px) {
  #page1 .game-btn[data-key="BLACKJACK"] { order: 0; }
  #page1 .game-btn[data-key="ROULETTE"]  { order: 1; }
  #page1 .game-btn[data-key="ULTIMATE"]  { order: 2; }
  #page1 .game-btn[data-key="HOLDEM"]    { order: 3; }
  #page1 .game-btn[data-key="SLOTS"]     { order: 4; }
  #page1 .game-btn[data-key="CRAPS"]     { order: 5; }
  #page1 .game-btn[data-key="POKER"]     { order: 6; }
  #page1 .game-btn[data-key="BACCARAT"]  { order: 7; }
  #page1 .game-btn[data-key="OMAHA"]     { order: 8; }
  #page1 .game-btn[data-key="DICE"]      { order: 9; }
}

/* ── MOBILE : ordre des jeux page 2 (Crazy Time ↔ Plinko, Limbo ↔ Mines et Keno ↔ Chicken Road) ── */
@media (max-width: 820px) {
  #page2 .game-btn[data-key="CRAZYTIME"] { order: 0; }
  #page2 .game-btn[data-key="PLINKO"]    { order: 1; }
  #page2 .game-btn[data-key="CRASH"]     { order: 2; }
  #page2 .game-btn[data-key="HIGHLOW"]   { order: 3; }
  #page2 .game-btn[data-key="LIMBO"]     { order: 4; }
  #page2 .game-btn[data-key="MINES"]     { order: 5; }
  #page2 .game-btn[data-key="KENO"]      { order: 6; }
  #page2 .game-btn[data-key="OVERUNDER"] { order: 7; }
  #page2 .game-btn[data-key="HORSES"]    { order: 8; }
  #page2 .game-btn[data-key="SCRATCH"]   { order: 9; }
}

/* ── MOBILE : Keno (grille en haut, sélection/mise/contrôles en dessous) ── */
@media (max-width: 820px) {
  .kn-main { flex-direction: column; gap: 8px; padding: 8px 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .kn-grid { flex: none; width: 100%; aspect-ratio: 8 / 5; gap: 4px; }
  .kn-cell { font-size: 16px; }
  .kn-right { width: 100%; flex: none; justify-content: flex-start; gap: 8px; }
  /* boutons flottants : collés en bas pendant le défilement + fondu de la couleur du fond */
  .kn-btns { margin-top: 2px; position: sticky; bottom: 0; z-index: 3; padding: 6px 0; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
  /* Table des gains : plein écran en portrait */
  .kn-overlay { width: auto; left: 2%; right: 2%; top: 4%; height: 92%; }
  .kn-info { top: 6px; right: 8px; }
}

/* ── MOBILE : Crash (courbe en haut, mise en dessous, défilable si besoin) ── */
@media (max-width: 820px) {
  .crash-screen { flex-direction: column; gap: 0; padding: 0; overflow-y: auto; }
  /* la courbe prend toute la hauteur que le panneau de mise laisse libre (30 % de l'écran au moins) */
  .crash-graph { flex: 1 0 30vh; width: 100%; height: auto; min-height: 150px; border-radius: 0; }
  .crash-panel { width: 100%; flex-shrink: 0; padding: 6px 12px 4px; border: none; border-top: 1px solid rgba(120,50,200,0.5); border-radius: 0; overflow: visible; }
  .crash-controls { max-width: 94vw; margin: 0 auto; }
  /* bouton flottant : fondu de la couleur du fond du Crash (rgb(8,3,14)), pas du --bg rouge global */
  .crash-controls .crash-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(8,3,14), 0 6px 10px 6px rgb(8,3,14); background: rgb(8,3,14); }
}

/* ── MOBILE : High & Low (board en haut, pavé en dessous) ── */
@media (max-width: 820px) {
  .hl-game { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  /* Sans chiffres, la jauge n'a besoin que de sa largeur et des encoches : colonne
     resserrée, la place va aux boutons. Plateau moins haut pour que le pavé de mise
     reste visible sans faire défiler. */
  .hl-board { flex: none; width: 100%; max-width: 94vw; grid-template-columns: 88px 1fr; grid-template-areas: "gauge high" "gauge mult" "gauge low";
    column-gap: 10px; height: 50vh; min-height: 340px; max-height: 460px; }
  /* comme sur ordinateur : la carte, et le multiplicateur à sa droite */
  .hl-center { gap: 10px; }
  /* Le multiplicateur tient sur UNE ligne : à 90px, « × 2,96 » (212 px) débordait la
     colonne (193 px sur un écran de 375 px) et le × passait au-dessus du nombre.
     10,5vw suit la largeur de l'écran (la carte du nombre est à côté, dans la même colonne)
     et reste plafonné à 42px ; nowrap (règle de base) garde le × collé au nombre. */
  .hl-mult { font-size: min(42px, 10.5vw); }
  .hl-mult-sub { font-size: 12px; min-height: 16px; }
  .hl-card { width: min(104px, 27vw); height: min(104px, 27vw); }
  .hl-dir  { height: 76px; padding: 0 12px; gap: 3px; border-radius: 14px; }
  .hl-dir-title { font-size: 15px; }
  .hl-dir-mult { font-size: 21px; }
  .hl-dir-info { font-size: 11px; }
  .hl-chip { font-size: 12px; padding: 2px 7px; }
  .hl-panel { width: 100%; max-width: 94vw; flex: none; border: none; background: none; padding: 0; }
  .hl-controls { max-width: 94vw; margin: 0 auto; }
  /* bouton flottant (comme le Limbo) */
  .hl-controls .hl-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
}

/* ── MOBILE : Plinko (plateau en haut, pavé en dessous, bouton flottant) ── */
@media (max-width: 820px) {
  .plk-screen { flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; overflow-y: auto; }
  .plk-board-wrap { flex: none; width: 100%; }
  .pk-board { max-width: 94vw; height: 56vh; min-height: 320px; }
  .plk-panel { width: 100%; max-width: 94vw; flex: none; border: none; background: none; padding: 0; }
  .plk-controls { max-width: 94vw; margin: 0 auto; }
  /* bouton flottant (comme le Limbo) */
  .plk-controls .plk-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
  /* Texte « Lâcher la bille » : même taille que sur ordinateur (21px), pas le 14px hérité de .btn.wide */
  .plk-go .btn { font-size: 21px; }
}

/* ── MOBILE : Limbo (arc en haut, contrôles/multiplicateur en dessous) ── */
@media (max-width: 820px) {
  .lm-main { flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lm-canvas { flex: none; width: 100%; height: 38vh; min-height: 190px; }
  .lm-right { width: 100%; flex: none; }
  /* Bouton LANCER épinglé en bas → toujours accessible */
  .lm-go { position: sticky; bottom: 0; z-index: 3; margin-top: 4px; box-shadow: 0 -6px 10px 6px rgb(84,0,0), 0 6px 10px 6px rgb(84,0,0); background: rgb(84,0,0); }
  /* Sur un fond en dégradé, l'aplat rouge de ces barres se voyait : un calque reprend le
     dégradé de la zone de jeu à l'identique (positions posées par GameScreen._fondsCollants)
     et se fond vers le haut, ce qui masque le contenu qui défile dessous. */
  .fond-fondu { background: none !important; box-shadow: none !important; }
  .fond-fondu::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: var(--cf-l); right: var(--cf-r); top: -16px; bottom: var(--cf-b);
    background: var(--bg-degrade) var(--cf-x) var(--cf-y) / var(--cf-w) var(--cf-h) no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px);
  }
}

/* ════════════════════════════════════════════════════════════
   ENTRAÎNEMENT AU COMPTAGE (blackjack)
   ════════════════════════════════════════════════════════════ */
.ct-content { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 22px 4px; display: flex; flex-direction: column; }

.ct-explain { background: rgba(0,0,0,0.22); border: 1px solid rgba(180,140,50,0.32); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.ct-explain-title { font-size: 15px; font-weight: bold; color: var(--white); margin-bottom: 10px; }
.ct-explain-text { font-size: 13px; line-height: 1.55; color: var(--grey); margin-top: 12px; }
.ct-explain-text b { color: var(--white); }
.ct-hilo { display: flex; gap: 10px; flex-wrap: wrap; }
.ct-hilo-cell { flex: 1 1 130px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 8px 12px; }
.ct-hilo-cards { font-size: 14px; font-weight: bold; color: var(--white); letter-spacing: 1px; }
.ct-hilo-val { font-size: 16px; font-weight: bold; }
.ct-hilo-val.plus { color: rgb(70,215,110); }
.ct-hilo-val.zero { color: rgb(190,190,200); }
.ct-hilo-val.moins { color: rgb(235,95,95); }

.ct-optrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ct-optlabel { font-size: 15px; font-weight: bold; color: var(--white); flex: 0 0 auto; }
.ct-speeds { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-speed { font-family: var(--sans); font-size: 14px; font-weight: bold; color: var(--grey); cursor: pointer;
  background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.13); border-radius: 9px; padding: 9px 16px; }
.ct-speed.on { color: #fff; background: rgb(30,120,90); border-color: rgb(70,190,140); }
.ct-opthint { font-size: 12px; color: var(--grey); margin: 9px 0 4px; min-height: 17px; }

.ct-go { display: flex; justify-content: center; margin-top: 14px; }

.ct-run, .ct-result { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ct-canvaswrap {
  flex: 1; min-height: 190px;
  /* Feutrine statique : elle était repeinte sur le canevas à chaque carte (2,3 M de pixels
     en dégradé). En CSS, le compositeur la garde et le canevas n'a plus que les cartes. */
  background: linear-gradient(rgb(22,72,44), rgb(12,48,29));
  border: 2px solid rgba(180,140,50,0.42); border-radius: 16px;
}
.ct-result .ct-canvaswrap { flex: 0 0 auto; height: 210px; }
.ct-canvaswrap canvas { width: 100%; height: 100%; display: block; }
.ct-progress { text-align: center; font-size: 14px; font-weight: bold; color: var(--gold); padding: 9px 0 3px; }
.ct-actions { display: flex; justify-content: center; gap: 12px; padding: 8px 0; }
.ct-actions .btn { height: 44px; min-width: 130px; }

.ct-answer { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }
.ct-answer-title { font-size: 17px; font-weight: bold; color: var(--white); text-align: center; }
.ct-answer-row { display: flex; align-items: center; gap: 12px; }
.ct-step { width: 56px; height: 56px; font-size: 26px; background: rgb(60,60,90); }
.ct-input { width: 130px; height: 56px; text-align: center; font-family: var(--sans); font-size: 30px; font-weight: bold;
  color: var(--gold); background: rgba(0,0,0,0.45); border: 2px solid rgba(180,140,50,0.5); border-radius: 11px; outline: none; }

.ct-verdict { text-align: center; font-size: 22px; font-weight: bold; padding: 10px 0 6px; }
.ct-tally { max-width: 460px; margin: 0 auto; width: 100%; }
.ct-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14px;
  color: var(--grey); padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ct-line b { font-size: 17px; color: var(--white); }
.ct-line i { font-style: normal; color: rgba(215,195,130,0.9); }
.ct-line.ct-total { border-bottom: none; color: var(--white); font-weight: bold; }
.ct-miss { text-align: center; font-size: 13px; color: var(--grey); padding-top: 8px; }

@media (max-width: 820px) {
  .ct-content { padding: 8px 12px 4px; }
  .ct-actions { gap: 6px; }
  .ct-actions .btn { min-width: 0; flex: 1 1 0; padding: 0 6px; font-size: 19px; white-space: nowrap; }
  .ct-optrow { gap: 10px; }
}

/* ── Estimation du sabot (2e exercice de comptage) ───────── */
.ct-estim { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ct-barwrap { flex: 0 0 auto; height: 130px; }
.ct-barwrap canvas { width: 100%; height: 100%; display: block; }
/* Centré : une marge interne égale des deux côtés couvre l'encre sans décentrer. */
.ct-estim-val { text-align: center; font-size: 22px; font-weight: bold; color: var(--gold); padding: 4px 0.18em 0; }
.ct-jauge { width: 96px; height: 205px; display: block; margin: 2px auto 0; cursor: pointer; touch-action: none; }
.ct-estim-res { max-width: 460px; width: 100%; margin: 4px auto 0; }
.ct-estim .ct-actions { margin-top: auto; }

/* ── Barre de stats : tout ce qui suit le chrono du Run reste collé au bord droit ──
   Chaque jeu qui déplace son ℹ (ou son œil) dans la barre lui donne un margin-left:auto
   dans sa propre règle. Deux margins auto dans la même barre — celui-ci et celui de
   .g-net — se partagent l'espace libre à parts égales, ce qui replaçait le chrono au
   milieu de la barre au lieu de l'envoyer à droite. Une seule règle les neutralise tous,
   y compris les ℹ qu'on ajouterait plus tard : le seul point d'absorption reste .g-net,
   donc chrono puis ℹ/œil se serrent contre le bord droit, dans l'ordre du DOM.
   (Le sélecteur repose sur la présence de .g-run dans le gabarit de GameScreen.build().) */
.game-statsbar .g-run ~ * { margin-left: 6px; }

/* ── Casino fermé (interrupteur de la console admin) ───────
   Voile plein écran posé sur le <body> : le casino reste chargé dessous, mais plus rien
   n'est atteignable. Affiché et masqué en direct par App._onCasinoState, au rythme du
   nœud `casino` de Firebase. */
#casino-closed {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(14, 0, 0, .985);
  font-family: var(--sans), var(--sans-fallback);
  text-align: center;
}
#casino-closed .cc-box { max-width: 460px; }
#casino-closed .cc-title {
  font-family: var(--casey); font-size: 46px; line-height: 1.1;
  color: var(--red); letter-spacing: 2px; margin-bottom: 16px;
}
#casino-closed .cc-msg { color: var(--white); font-size: 21px; line-height: 1.4; }
#casino-closed .cc-sub { color: var(--grey); font-size: 15px; margin-top: 18px; }

/* ── Paramètres → Mon avatar (js/avatar.js) ── */
.settings-avmini { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--pg-lisere); }
.settings-avmini svg { display: block; width: 100%; height: 100%; }
#avatar { background: var(--bg-degrade); }
/* L'aperçu reste visible pendant qu'on fait défiler les choix : colonne collante à gauche
   sur grand écran, bandeau collant en haut sur téléphone. */
.av-col { width: min(1100px, 100%); display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
.av-apercu { display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: -webkit-sticky; position: sticky; top: 0; z-index: 2; }
.av-grand { width: 190px; height: 190px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 8px 24px rgba(0,0,0,.45); }
.av-boutons { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.av-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.av-actions .pg-bouton { font-size: 15px; padding: 5px 14px; }
.av-actions .pg-bouton:disabled { opacity: .4; cursor: default; background: none; color: var(--gold); }
.av-ok { background: var(--gold); color: rgb(40, 18, 4); padding: 8px 30px; }
.av-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.av-onglet { background: rgba(0,0,0,.25); border: 1.3px solid var(--pg-lisere); color: var(--creme);
  border-radius: 30px; font-family: var(--casey); font-size: 16px; padding: 5px 14px; cursor: pointer; }
.av-onglet.on { background: var(--gold); border-color: var(--gold); color: rgb(40, 18, 4); }
.av-sec { font-family: var(--casey); font-size: 18px; color: var(--gold); margin: 14px 0 8px; }
.av-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.av-tuile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 5px; cursor: pointer;
  background: rgba(0,0,0,.28); border: 1.3px solid rgba(190,160,95,.25); border-radius: 12px;
  color: var(--creme); font-family: var(--sans-fallback); font-size: 12px; line-height: 1.2; }
.av-tuile svg { width: 60px; height: 60px; border-radius: 9px; }
.av-tuile.on { border: 2px solid var(--gold); background: rgba(214,178,92,.16); color: var(--gold); padding: 5px 3px 4px; }
.av-pastilles { display: flex; gap: 9px; flex-wrap: wrap; }
.av-pastille { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; border: 1.5px solid rgba(255,255,255,.25); }
.av-pastille.on { box-shadow: 0 0 0 2px var(--pg-carte), 0 0 0 4px var(--gold); }
@media (max-width: 760px) {
  .av-col { display: flex; align-items: stretch; }
  .av-apercu { flex-direction: row; justify-content: center; gap: 14px; padding: 10px 12px; }
  .av-apercu > div, .av-apercu > .av-ok { flex: 0 0 auto; }
  .av-grand { width: 112px; height: 112px; flex: 0 0 auto; }
  .av-boutons { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .av-actions { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .av-actions .pg-bouton { font-size: 14px; padding: 4px 12px; }
  .av-ok { padding: 6px 16px; font-size: 15px; }
}
@media (max-width: 600px) {
  .av-grille { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
  .av-tuile svg { width: 52px; height: 52px; }
}

/* Liste des parties : l'avatar du joueur à la place de son initiale */
.bv-av-img { padding: 0; overflow: hidden; background: none; }
.bv-av-img svg { width: 100%; height: 100%; display: block; }
/* Course de chevaux à plusieurs : l'avatar des autres parieurs sur la carte du cheval */
.hr-qui i.av { padding: 0; overflow: hidden; width: 17px; height: 17px; min-width: 17px; border-radius: 50%; background: none; }
.hr-qui i.av svg { width: 100%; height: 100%; display: block; }

/* Fenêtre « Inviter à la table » : avatar du joueur à gauche de son pseudo */
.mp-av { display: inline-block; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; vertical-align: middle;
  margin-right: 8px; box-shadow: 0 0 0 1.5px rgba(255,200,50,.6); }
.mp-av svg { width: 100%; height: 100%; display: block; }

/* Spectateur d'une table à plusieurs (multi.js) : voile sur le jeu, bandeau en bas */
.mp-spect-voile { position: absolute; left: 0; right: 0; bottom: 0; z-index: 800; background: rgba(0,0,0,.12); }
.mp-spect { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 801; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 16px; border-radius: 16px; background: rgba(12,10,16,.94); border: 1.5px solid var(--gold); color: #fff;
  font-size: 15px; white-space: nowrap; max-width: calc(100vw - 24px); }
.mp-spect .btn { background: rgb(30,120,50); font-size: 15px; padding: 8px 14px; height: auto; }
@media (max-width: 600px) { .mp-spect { flex-direction: column; gap: 6px; white-space: normal; text-align: center; } }

/* Accueil : 5 tuiles ; sur téléphone, 2 par ligne et la dernière sur toute la largeur */
@media (max-width: 820px) { .acc-tuiles .acc-tuile:last-child { grid-column: span 2; } }
/* Mode en ligne (js/enligne.js) */
#enligne { background: var(--bg-degrade); }
.el-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.el-maj { font-size: 15px; padding: 5px 14px; }
.el-liste { display: flex; flex-direction: column; }
.el-vide { color: var(--creme); opacity: .7; font-family: var(--sans-fallback); font-size: 14px; padding: 12px 0; }
.el-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(190,160,95,.25); }
.el-ligne:first-child { border-top: none; }
.el-av { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--pg-lisere);
  display: flex; align-items: center; justify-content: center; background: rgb(90,15,22); color: var(--gold); font-family: var(--casey); font-size: 22px; }
.el-av svg { width: 100%; height: 100%; display: block; }
.el-txt { flex: 1; min-width: 0; }
.el-nom { font-size: 19px; color: var(--creme); }
.el-statut { font-family: var(--sans-fallback); font-size: 12.5px; color: var(--creme); opacity: .6; margin-top: 2px; }
.el-statut.table { color: var(--gold); opacity: .9; }
.el-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.el-actions .pg-bouton { font-size: 15px; padding: 5px 14px; }
.el-actions .el-jouer { background: var(--gold); color: rgb(40,18,4); }
@media (max-width: 600px) { .el-ligne { flex-wrap: wrap; } .el-actions { width: 100%; justify-content: flex-end; } }

/* ── Barre de stats sur deux lignes (téléphone) ─────────────────
   1re ligne : le solde à gauche, les boutons à droite (👥, 😀, œil, ℹ, AUTO, ZOOM…, que
   chaque jeu ajoute à la suite). 2e ligne : la mise et le résultat de la manche.
   L'ordre est donné par `order` (le DOM ne change pas) et le passage à la ligne par un
   pseudo-élément pleine largeur. Une seule marge automatique, celle du solde, pousse les
   boutons à droite : les `margin-left:auto` que certains jeux posent sur leur ℹ sont
   neutralisés (sinon deux marges auto se partagent l'espace et les boutons flottent au
   milieu). La 2e ligne garde sa hauteur même vide : rien ne saute quand une mise apparaît. */
@media (max-width: 820px) {   /* téléphone seulement : sur ordinateur, tout tient sur une ligne */
  .game-statsbar { row-gap: 0; }
  .game-statsbar > * { order: 1; }
  .game-statsbar > .g-balance { order: 0; margin-right: auto; }
  .game-statsbar::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .game-statsbar > .g-stats.g-stats, .game-statsbar > .g-net.g-net { order: 3; }
  .game-statsbar > .g-stats.g-stats { margin-left: 0; min-height: 1.3em; }
  .game-statsbar > .g-net.g-net { margin-right: 0; }
  .game-statsbar > *:not(.g-balance):not(.g-stats):not(.g-net) { margin-left: 6px; }
}

/* ── Panneau de relance des pokers (js/poker_relance.js) ──
   Posé dans le bloc de la table, en bas à droite, au-dessus de la barre d'actions. */
.pr-panneau { position: absolute; z-index: 6; width: 220px; padding: 12px 12px 12px;
  border-radius: 16px; background: rgba(20,10,12,.72); border: 1.5px solid rgba(255,200,50,.85); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 10px; }
/* Petite pointe qui relie le panneau au bouton « Relancer » */
.pr-pointe { position: absolute; bottom: -9px; width: 16px; height: 16px; transform: rotate(45deg);
  background: rgba(20,10,12,.72); border-right: 1.5px solid rgba(255,200,50,.85); border-bottom: 1.5px solid rgba(255,200,50,.85); }
/* Panneau ouvert : le bouton confirme la relance (contour doré) */
.hd-actionbar .btn.hd-relance.pr-actif { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255,200,50,.55); }
.pr-fermer { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; font-size: 14px; }
.pr-corps { display: flex; gap: 12px; height: 270px; }
.pr-raccourcis { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; flex: 1; }
.pr-r { height: 40px; border-radius: 10px; border: 1.3px solid rgba(255,200,50,.45); background: rgba(0,0,0,.35); color: #fff;
  font-family: var(--casey); font-size: 17px; cursor: pointer; }
.pr-r:disabled { opacity: .35; cursor: default; }
.pr-pm { font-size: 24px; color: var(--gold); line-height: 1; }
.pr-curseur { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pr-max, .pr-min { font-family: var(--casey); font-size: 14px; color: var(--gold); white-space: nowrap; }
.pr-piste { position: relative; flex: 1; width: 34px; border-radius: 17px; background: rgba(0,0,0,.45); border: 1.3px solid rgba(255,200,50,.35);
  touch-action: none; cursor: ns-resize; }
.pr-rempli { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 17px; background: linear-gradient(to top, rgba(170,30,90,.85), rgba(255,200,50,.85)); }
.pr-poignee { position: absolute; left: 50%; width: 46px; height: 22px; margin-bottom: -11px; transform: translateX(-50%); border-radius: 8px;
  background: linear-gradient(#ffe27a, #c9971b); border: 1.5px solid #8a6510; box-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
.pr-bulle { position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 16px; padding: 4px 10px; border-radius: 9px; white-space: nowrap;
  background: rgb(170,30,90); color: #fff; font-family: var(--casey); font-size: 16px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
@media (max-width: 820px) {
  .pr-panneau { width: 196px; }
  .pr-corps { height: 240px; }
}