/* ==========================================================================
   Casino · Mode Table

   Le téléphone posé à plat devient la table. Deux rangées de places se font
   face le long de l'axe long de l'écran : la rangée du bas se lit à l'endroit,
   celle du haut à l'envers (chaque place est tournée de 180 degrés). En paysage
   sur un écran tactile, la scène entière pivote d'un quart de tour (JS :
   `data-pivot`), si bien que le même gabarit sert aux deux orientations.

   Deux coquilles :
   - `.tsetup` : l'écran de préparation, en thème clair comme le menu du casino ;
   - `.tbl` : la table, toujours sombre (feutre), plein écran.

   Les jetons de couleur (`--gold`, `--st-*`, `--ink*`, `--glass-*`) viennent de
   style.css. Aucune icône n'est un caractère : tout est SVG inline.
   ========================================================================== */

/* ── Utilitaire ───────────────────────────────────────────── */
.tsetup .sr-only, .tbl .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Entrée du menu du casino ─────────────────────────────── */
.theme-light .casino-table-cta {
  --accent: oklch(0.62 0.18 25);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px;
  width: 100%; margin: 0 0 18px; padding: 22px 24px;
  text-align: left; color: #f4efdf; font: inherit; cursor: pointer;
  background:
    radial-gradient(120% 140% at 0% 0%, #1b6a50 0%, #0d4630 55%, #08301f 100%);
  border: 1px solid rgba(214, 183, 112, 0.55);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 18px 36px -24px rgba(8, 48, 31, 0.8);
  transition: transform .28s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow .28s ease;
}
.theme-light .casino-table-cta:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 26px 44px -22px rgba(8, 48, 31, 0.9); }
.theme-light .casino-table-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.casino-table-cta-ico { grid-row: 1 / span 3; color: #d6b770; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; border: 1px solid rgba(214, 183, 112, 0.45); }
.casino-table-cta-ico::before { content: ""; width: 44px; height: 44px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='9' width='14' height='30' rx='3.5'/%3E%3Cpath d='M22 13h4'/%3E%3Ccircle cx='24' cy='4.5' r='2.4'/%3E%3Ccircle cx='24' cy='43.5' r='2.4'/%3E%3Ccircle cx='8' cy='24' r='2.4'/%3E%3Ccircle cx='40' cy='24' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='9' width='14' height='30' rx='3.5'/%3E%3Cpath d='M22 13h4'/%3E%3Ccircle cx='24' cy='4.5' r='2.4'/%3E%3Ccircle cx='24' cy='43.5' r='2.4'/%3E%3Ccircle cx='8' cy='24' r='2.4'/%3E%3Ccircle cx='40' cy='24' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.casino-table-cta-eyebrow { font-family: var(--font-mono-light); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #d6b770; }
.casino-table-cta-titre { font-family: var(--font-display-light); font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.casino-table-cta-desc { font-size: 14px; line-height: 1.45; color: rgba(244, 239, 223, 0.82); max-width: 44em; }
@media (max-width: 520px) {
  .theme-light .casino-table-cta { grid-template-columns: 1fr; padding: 20px; }
  .casino-table-cta-ico { grid-row: auto; width: 52px; height: 52px; margin-bottom: 6px; }
  .casino-table-cta-ico::before { width: 36px; height: 36px; }
}

/* ══ L'écran de préparation (thème clair) ════════════════════ */
.theme-light .tsetup {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
}
.tsetup-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(env(safe-area-inset-top), 8px) 18px 6px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.tsetup-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0;
  font-family: var(--font-mono-light); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); background: none; border: 0; cursor: pointer;
}
.tsetup-back:hover { color: var(--fg); }
.tsetup-eyebrow { font-family: var(--font-mono-light); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-3); }
.tsetup-main { width: 100%; max-width: 720px; margin: 0 auto; padding: 26px 20px max(56px, env(safe-area-inset-bottom)); }
.tsetup-h1 { font-family: var(--font-display-light); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(32px, 8.4vw, 46px); margin: 0 0 12px; }
.tsetup-sub { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 36em; margin: 0 0 26px; }

.tset-bloc { margin: 0 0 30px; }
.tset-h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--font-mono-light); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-3); }
.tset-h2-aux { letter-spacing: 0.1em; color: var(--muted-2); }

.tset-reprise { margin: 0 0 26px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--gold-soft); }
.tset-reprise p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--fg-soft); }
.tset-reprise-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.tset-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 600 14px var(--font-body-light); color: var(--fg);
  background: var(--card); border: 1px solid var(--line-strong); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tset-btn:hover:not(:disabled) { border-color: var(--fg); }
.tset-btn:active:not(:disabled) { transform: scale(0.97); }
.tset-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tset-btn--plein { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tset-btn:focus-visible, .tset-jeu:focus-visible, .tset-opt:focus-visible, .tset-go:focus-visible, .tset-avatar:focus-visible, .tset-retirer:focus-visible, .tsetup-back:focus-visible, .tset-input:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 2px;
}

.tset-jeux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tset-jeu {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.tset-jeu:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.tset-jeu.is-on { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg) inset; }
.tset-jeu-art { display: block; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.tset-jeu-txt { display: flex; flex-direction: column; gap: 4px; }
.tset-jeu-titre { font-family: var(--font-display-light); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.tset-jeu-resume { font-size: 13px; line-height: 1.4; color: var(--muted); }

.tset-joueurs { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tset-joueur { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.tset-num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--fg); color: var(--bg); font: 600 12px var(--font-mono-light); }
.tset-avatar { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-2); cursor: pointer; }
.tset-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tset-champ { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tset-input { width: 100%; min-height: 36px; padding: 0 4px; font: 600 16px var(--font-body-light); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.tset-input::placeholder { color: var(--muted-3); font-weight: 500; }
.tset-input:focus { border-bottom-color: var(--fg); outline: none; }
.tset-place { font: 500 11px var(--font-mono-light); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3); padding-left: 4px; }
.tset-retirer { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--muted-2); cursor: pointer; border-radius: 50%; }
.tset-retirer:hover { color: var(--fg); background: var(--paper-2); }
.tset-retirer--vide { cursor: default; pointer-events: none; }
.tset-outils { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }

.tset-plan { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tset-plan svg { width: min(100%, 230px); height: auto; }
.tset-plan figcaption { font-size: 12.5px; color: var(--muted-2); text-align: center; max-width: 28em; line-height: 1.4; }
.plan-tel { fill: #1b1d21; stroke: #0a0a0a; stroke-width: 1.5; }
.plan-ecran { fill: #0d4630; }
.plan-trait { fill: none; stroke: #d6b770; stroke-width: 1.5; stroke-linecap: round; }
.plan-pastille { fill: var(--fg); }
.plan-num { fill: var(--bg); font: 600 15px var(--font-mono-light); }

.tset-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tset-opt { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 14px var(--font-body-light); color: var(--fg); background: var(--card); border: 1px solid var(--line-strong); cursor: pointer; transition: background .2s ease, color .2s ease; }
.tset-opt.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tset-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.tset-note--fin { text-align: center; margin-top: 16px; }

/* Sans compte : la déclaration de majorité, une fois par appareil (la phrase de l'inscription). */
.tset-majeur { margin: 22px 0 10px; }
.tset-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 3px 0; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--fg-soft); }
.tset-check input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center;
  width: 24px; height: 24px; margin: 1px 0 0; border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--card); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.tset-check input::after {
  content: ""; width: 14px; height: 14px; background-color: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0); transition: transform .15s ease;
}
.tset-check input:checked { background: var(--fg); border-color: var(--fg); }
.tset-check input:checked::after { transform: scale(1); }
.tset-check input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tset-erreur { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid #a8231a; font: 500 14px/1.4 var(--font-body-light); color: #a8231a; }
.tset-erreur[hidden] { display: none; }

.tset-go {
  display: block; width: 100%; min-height: 58px; margin-top: 8px; border-radius: 18px;
  font: 600 17px var(--font-display-light); letter-spacing: -0.01em; color: #f4efdf;
  background: #0d4630; border: 1px solid #08301f; cursor: pointer;
  box-shadow: 0 14px 28px -18px rgba(8, 48, 31, 0.9);
  transition: transform .25s cubic-bezier(0.34, 1.4, 0.64, 1), background .2s ease;
}
.tset-go:hover { transform: translateY(-2px); background: #115a3f; }
.tset-go:active { transform: scale(0.985); }

@media (min-width: 640px) {
  .tset-jeux { grid-template-columns: repeat(4, 1fr); }
  .tset-jeu { flex-direction: column; }
}

/* ══ La table ════════════════════════════════════════════════ */
.tbl {
  --felt-1: #17604a; --felt-2: #0e3d2f; --felt-3: #07231a;
  --zone: 37%;
  position: fixed; inset: 0; overflow: hidden;
  color: var(--ink); font-family: var(--font-text);
  background: radial-gradient(120% 90% at 50% 50%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
html[data-table-color="blue"] .tbl { --felt-1: #1d4476; --felt-2: #132e50; --felt-3: #0a1b30; }
html[data-table-color="burgundy"] .tbl { --felt-1: #702738; --felt-2: #4c1925; --felt-3: #2c0e15; }
.tbl::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tbl[data-n="2"], .tbl[data-n="3"] { --zone: 34%; }
.tbl[data-n="5"], .tbl[data-n="6"] { --zone: 40%; }
.tbl[data-jeu="blackjack"][data-n] { --zone: 33%; }
.tbl[data-jeu="blackjack"][data-n="5"], .tbl[data-jeu="blackjack"][data-n="6"] { --zone: 40%; }
.tbl[data-jeu="roulette"][data-n] { --zone: 24%; }
.tbl[data-jeu="roulette"][data-n="5"], .tbl[data-jeu="roulette"][data-n="6"] { --zone: 29%; }
.tbl[data-jeu="memory"][data-n] { --zone: 15%; }
.tbl[data-jeu="memory"][data-n="5"], .tbl[data-jeu="memory"][data-n="6"] { --zone: 17%; }

.tbl-stage {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; z-index: 1;
  padding: max(env(safe-area-inset-top), 6px) max(env(safe-area-inset-right), 6px) max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-left), 6px);
}
/* Paysage : la scène est dessinée en portrait puis tournée d'un quart de tour.
   Le haut virtuel est le côté droit de l'écran, le bas virtuel son côté gauche. */
.tbl[data-pivot="90"] .tbl-stage {
  width: var(--vh); height: var(--vw);
  transform-origin: 0 0; transform: translateX(var(--vw)) rotate(90deg);
  padding: max(env(safe-area-inset-right), 6px) max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-left), 6px) max(env(safe-area-inset-top), 6px);
}

.tbl-zone { display: flex; gap: 6px; flex: 0 0 var(--zone); min-height: 0; }
.tbl[data-haut="0"] .tbl-zone--haut { display: none; }
.tbl-centre { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }

.ts { flex: 1 1 0; min-width: 0; min-height: 0; container-type: inline-size; container-name: seat; }
.ts[data-face="haut"] { transform: rotate(180deg); }
.ts-in {
  height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 7px; box-sizing: border-box;
  border-radius: 18px; background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.ts.is-actif .ts-in { border-color: var(--gold); background: rgba(0, 0, 0, 0.34); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 24px -6px rgba(214, 183, 112, 0.55); }
.ts.is-gagnant .ts-in { border-color: var(--st-call); box-shadow: 0 0 0 1px var(--st-call) inset, 0 0 24px -6px rgba(116, 197, 148, 0.5); }
.ts.is-tapis .ts-in { border-color: rgba(214, 183, 112, 0.6); }
.ts.is-couche .ts-in, .ts.is-elimine .ts-in { opacity: 0.55; }

.ts-head { display: flex; align-items: center; gap: 8px; min-height: 36px; flex: none; }
.ts-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.ts-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ts-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ts-nom { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-sous { font: 500 12px var(--font-mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-badges { flex: none; display: flex; gap: 4px; }
.ts-pastille { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: inline-grid; place-items: center; font: 700 11px var(--font-mono); background: var(--ink); color: var(--bg-deep); }
.ts-pastille--sb { background: rgba(255, 255, 255, 0.85); }
.ts-pastille--bb { background: var(--gold); color: #1a1408; }
.ts-menu { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; display: grid; place-items: center; border-radius: 50%; color: var(--ink-mute); background: none; border: 0; cursor: pointer; }
.ts-menu:hover, .ts-menu:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.08); outline: none; }
.ts-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ts-foot { flex: none; display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Les cartes ───────────────────────────────────────────── */
.tcarte { display: block; width: var(--cw, 58px); aspect-ratio: 240 / 336; }
.tcarte svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.tcarte--vide { border-radius: 7px; border: 1px dashed rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.12); }
.th-board { display: grid; grid-template-columns: repeat(5, var(--cwt, 56px)); gap: 6px; justify-content: center; }
.th-board .tcarte { width: 100%; }
.tcarte[data-arrive="1"] { animation: tc-arrive .38s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes tc-arrive { from { opacity: 0; transform: translateY(-14px) scale(.92); } to { opacity: 1; transform: none; } }

/* ── Hold'em : une place ──────────────────────────────────── */
.th-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; }
.th-cartes { display: grid; grid-template-columns: auto auto; gap: 5px; justify-content: start; padding: 4px; margin: -4px; border-radius: 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: none; -webkit-touch-callout: none; }
.th-cartes--face { cursor: default; }
.th-cartes .tcarte { transition: transform .15s ease; }
.th-cartes.is-vu .tcarte { transform: translateY(-3px); }
.th-cartes:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.th-oeil { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(214, 183, 112, 0.5); pointer-events: none; }
.th-cartes { position: relative; }
.th-cartes.is-vu .th-oeil { display: none; }
.th-peek-aide { grid-column: 1 / -1; font: 500 11px var(--font-text); letter-spacing: 0.02em; color: var(--ink-soft); }
.th-cartes.is-vu .th-peek-aide { visibility: hidden; }
.th-mise { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); font: 600 13px var(--font-mono); }
.th-mise-jeton svg { width: 18px; height: 18px; display: block; }
.th-etat { margin: 0; min-height: 1.35em; font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.th-aide { font: 650 13px var(--font-text); font-style: normal; color: var(--gold); }
.th-aide:empty { display: none; }
.th-etat--actif { color: var(--gold); font-weight: 650; }
.th-etat--gagne { color: var(--st-call); font-size: 15px; }
.th-etat--gagne span { color: var(--ink-soft); font-size: 13px; }
.th-etat--gagne b { font-weight: 700; }
.th-etat--couche, .th-etat--elimine { color: var(--ink-soft); }
.th-etat--tapis { color: var(--gold); font-weight: 650; }

.th-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.th-actions--2 { grid-template-columns: 1fr 1fr; }
.th-btn { min-height: max(34px, calc(48px * var(--u, 1))); padding: 6px 8px; border-radius: 14px; font: 650 14px var(--font-text); letter-spacing: -0.005em; color: var(--ink); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-edge-2); cursor: pointer; transition: transform .15s ease, background .2s ease; }
.th-btn:active:not(:disabled) { transform: scale(0.96); }
.th-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.th-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.th-btn--coucher { background: var(--st-fold-bg); border-color: var(--st-fold-bd); color: var(--st-fold); }
.th-btn--suivre { background: var(--st-call-bg); border-color: var(--st-call-bd); color: var(--st-call); }
.th-btn--double, .th-btn--relancer { background: var(--st-raise-bg); border-color: var(--st-raise-bd); color: var(--st-raise); }
.th-btn--tapis { background: linear-gradient(180deg, #e0c37f, #b89b5e); border-color: #e0c37f; color: #1a1408; }
.th-btn--suivante { grid-column: 1 / -1; width: 100%; background: var(--gold); border-color: var(--gold); color: #1a1408; }
.th-confirme p { margin: 0 0 6px; font-size: 14px; font-weight: 650; text-align: center; color: var(--gold); }
.th-relance { display: flex; flex-direction: column; gap: 6px; }
.th-stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 6px; align-items: center; }
.th-pas { height: max(32px, calc(44px * var(--u, 1))); border-radius: 12px; font: 600 22px var(--font-mono); color: var(--ink); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-edge-2); cursor: pointer; line-height: 1; }
.th-pas:disabled { opacity: 0.3; cursor: not-allowed; }
.th-montant { text-align: center; font: 700 22px var(--font-mono); letter-spacing: -0.02em; display: flex; flex-direction: column; line-height: 1; }
.th-montant small { font: 600 10px var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.th-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.th-presets button { min-height: max(32px, calc(44px * var(--u, 1))); border-radius: 10px; font: 600 12px var(--font-text); color: var(--ink-soft); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-edge); cursor: pointer; }
.th-presets button:active { background: rgba(255, 255, 255, 0.14); }

/* ── Hold'em : le centre ──────────────────────────────────── */
.th-pot { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.12); }
.th-pot-jeton svg { width: 26px; height: 26px; display: block; }
.th-pot-n { font: 700 20px var(--font-mono); letter-spacing: -0.02em; }
.th-info { margin: 0; font: 500 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.th-info--haut { transform: rotate(180deg); }

/* ── Places compactes (cinq ou six joueurs, ou rangée étroite) ── */
@container seat (max-width: 200px) {
  .ts-in { padding: 6px; }
  .ts-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "av nom nom nom" "sous sous bad men"; align-items: center; column-gap: 6px; min-height: 0; }
  .ts-avatar { grid-area: av; width: 26px; height: 26px; }
  .ts-id { display: contents; }
  .ts-nom { grid-area: nom; font-size: 14px; }
  .ts-sous { grid-area: sous; font-size: 11px; }
  .ts-badges { grid-area: bad; }
  .ts-menu { grid-area: men; width: 44px; height: 44px; margin: -10px -8px -10px 0; }
  .ts-unite { display: none; }
  .ts-pastille { min-width: 19px; height: 19px; font-size: 10px; padding: 0 4px; }
  .th-ligne { flex-wrap: wrap; row-gap: 2px; }
  .th-peek-aide { display: none; }
  .th-oeil { width: 28px; height: 28px; }
  .th-oeil svg { width: 18px; height: 18px; }
  .th-etat { font-size: 12px; }
  .th-actions { grid-template-columns: 1fr 1fr; gap: 4px; }
  .th-actions .th-btn--relancer { grid-column: 1 / -1; }
  .th-actions--2 .th-btn--relancer { grid-column: auto; }
  .th-stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .th-btn { min-height: max(34px, calc(44px * var(--u, 1))); font-size: 13px; padding: 4px 6px; }
  .th-presets button { min-height: max(32px, calc(44px * var(--u, 1))); font-size: 12px; }
  .th-montant { font-size: 18px; }
}

@container seat (max-width: 150px) {
  .th-actions, .th-actions--2 { grid-template-columns: 1fr; }
  .th-presets { grid-template-columns: 1fr 1fr; }
  .th-stepper { grid-template-columns: 34px minmax(0, 1fr) 34px; }
}

/* Saisie d'une relance : le pied de place grandit, le joueur a déjà vu ses cartes (« Retour » les rend). */
.ts.is-saisie .th-ligne, .ts.is-saisie .th-peek-aide, .ts.is-saisie .th-etat { display: none; }


/* ── Blackjack ────────────────────────────────────────────── */
.bj-croupier { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-cartes { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; max-width: 100%; }
.bj-cartes .tcarte { flex: none; width: var(--cwb, 46px); }
.bj-cartes--centre { flex-wrap: nowrap; justify-content: center; }
.bj-cartes--centre .tcarte { width: var(--cwt, 56px); }
.tbl .bj-total { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.16); font: 700 13px var(--font-mono); white-space: nowrap; }
.tbl .bj-total.is-bust { color: var(--st-fold); border-color: var(--st-fold-bd); }
.tbl .bj-total--centre { font-size: 17px; padding: 3px 13px; }
.bj-mains { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.bj-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px; margin: -3px; border-radius: 12px; border: 1px solid transparent; }
.bj-main.is-actif { border-color: var(--gold); background: rgba(214, 183, 112, 0.08); }
.bj-main.is-bust .tcarte { opacity: 0.6; }
.tbl .bj-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bj-marque { font: 600 11px var(--font-text); color: var(--ink-soft); }
.bj-issue { font: 700 12px var(--font-text); }
.bj-issue--blackjack { color: var(--gold); }
.bj-issue--gagne { color: var(--st-call); }
.bj-issue--perdu, .bj-issue--bust { color: var(--st-fold); }
.bj-issue--egalite { color: var(--ink-soft); }
.bj-info { margin: 0; text-align: center; font: 500 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.bj-info b { display: block; font-weight: 700; color: var(--ink); font-size: 12px; margin-bottom: 1px; }
.bj-info--haut { transform: rotate(180deg); }
.bj-mise-ligne { display: flex; align-items: center; justify-content: space-between; }
.bj-mise-n, .bj-posee { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); font: 700 15px var(--font-mono); }
.bj-pile svg { width: 22px; height: 22px; display: block; }
.bj-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.bj-jeton { width: max(32px, calc(44px * var(--u, 1))); height: max(32px, calc(44px * var(--u, 1))); padding: 0; border-radius: 50%; background: none; border: 0; cursor: pointer; transition: transform .15s ease; }
.bj-jeton svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.bj-jeton:active:not(:disabled) { transform: scale(0.9); }
.bj-jeton:disabled { opacity: 0.3; cursor: not-allowed; }
.bj-jeton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
.th-actions--3 { grid-template-columns: 1fr 1.4fr 1fr; }
.th-actions--4 { grid-template-columns: repeat(4, 1fr); }
@container seat (max-width: 200px) {
  .bj-jetons { gap: 4px; }
  .th-actions--4 { grid-template-columns: 1fr 1fr; }
  .th-actions--3 { grid-template-columns: 1fr 1fr; }
  .th-actions--3 .th-btn--suivre { grid-column: 1 / -1; order: -1; }
  .bj-mise-n, .bj-posee { font-size: 14px; }
}
@container seat (max-width: 150px) {
  .th-actions--4 .th-btn, .th-actions--3 .th-btn { font-size: 12px; padding: 4px 2px; }
}


/* ── Roulette ─────────────────────────────────────────────── */
.rw { position: relative; width: var(--rw, 240px); aspect-ratio: 1; flex: none; margin-top: 16px; }
.rw-roue { position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 50%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.05), 0 0 0 7px rgba(214, 183, 112, 0.3); will-change: transform; }
.rw-roue svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.rw-bille { position: absolute; inset: 0; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.rw-bille i { position: absolute; left: 50%; top: 2.5%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.6); transition: top .6s ease; }
.rw-bille.is-tombee i { top: 9%; }
.rw-repere { position: absolute; left: 50%; top: -12px; width: 0; height: 0; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid var(--gold); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); z-index: 2; }
.rw-hub { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e6c757, #8c733e); border: 0; color: #1a1408; z-index: 2; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); }
.rw-hub b { font: 800 clamp(18px, calc(var(--rw, 240px) * 0.1), 30px) var(--font-mono); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.rw-hub--red { background: #a8443a; }
.rw-hub--black { background: #1a1a1f; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.rw-hub--green { background: #2e7a48; }
.rw-hub--bouton { width: 38%; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 800 11px var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; animation: rw-pulse 1.6s ease-in-out infinite; }
.rw-hub--bouton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes rw-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(214, 183, 112, 0.6); } 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 0 12px rgba(214, 183, 112, 0); } }
.rw-hist { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 22px; max-width: 100%; }
.rw-hist .rh-num { width: 22px; height: 22px; }

.rt-panneau {
  position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
  padding: max(env(safe-area-inset-top), 8px) 10px max(env(safe-area-inset-bottom), 8px);
  background: radial-gradient(120% 90% at 50% 50%, var(--felt-1) 0%, var(--felt-2) 60%, var(--felt-3) 100%);
}
.rt-panneau { container-type: size; container-name: panneau; }
.rt-panneau[data-face="haut"] { transform: rotate(180deg); }
.rt-tete { display: flex; align-items: center; gap: 10px; min-height: 44px; flex: none; }
.rt-qui { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rt-qui b { font-size: 16px; font-weight: 650; }
.rt-qui span { font: 500 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.rt-solde, .rt-total { display: flex; flex-direction: column; line-height: 1.15; }
.rt-solde { margin-left: auto; text-align: right; }
.rt-solde small, .rt-total small { font: 500 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.rt-solde b, .rt-total b { font: 700 17px var(--font-mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.rt-grille {
  flex: 1 1 0; min-height: 0; display: grid; gap: 2px; padding: 5px; border-radius: 14px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--glass-edge);
  grid-template-columns: 0.95fr 1.4fr 1.4fr 1.4fr 0.95fr;
  grid-template-rows: minmax(30px, 0.9fr) repeat(12, minmax(24px, 1fr)) minmax(28px, 0.8fr);
  font: 700 14px var(--font-mono);
}
.rt-grille .rt-cell { min-height: 0; font-size: 14px; border-radius: 5px; }
.rt-grille .rt-zero { grid-row: 1; grid-column: 2 / 5; }
.rt-grille .rt-outside { font-size: 11px; letter-spacing: 0.04em; }
.rt-grille .rt-cell:hover { filter: none; }
.rt-grille .rt-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rt-grille .bet-marker { top: 3px; right: 3px; left: auto; transform: none; font-size: 11px; padding: 2px 7px; }
.rt-jetons { display: flex; justify-content: space-between; gap: 6px; flex: none; }
.rt-jeton { width: 50px; height: 50px; padding: 0; border-radius: 50%; background: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.rt-jeton svg { display: block; width: 100%; height: 100%; }
.rt-jeton.is-on { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(214, 183, 112, 0.3); }
.rt-jeton:disabled { opacity: 0.3; cursor: not-allowed; }
.rt-jeton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rt-bas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: none; }
.rt-boutons { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; min-width: 0; }
.rt-boutons .th-btn { min-height: 46px; font-size: 13px; padding: 4px 6px; }
.rt-passer { width: 100%; min-height: 40px; background: none; border: 0; color: var(--ink-soft); font: 500 13px var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rt-passer:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: none; }
@container panneau (max-height: 700px) {
  .rt-tete { min-height: 38px; }
  .rt-jeton { width: 42px; height: 42px; }
  .rt-boutons .th-btn { min-height: 42px; }
  .rt-passer { min-height: 30px; }
  .rt-grille { grid-template-rows: minmax(26px, 0.8fr) repeat(12, minmax(19px, 1fr)) minmax(24px, 0.7fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rw-hub--bouton { animation: none; }
  .rw-roue, .rw-bille { transition: none !important; }
}


/* ── Memory ───────────────────────────────────────────────── */
/* L'atténuation d'une paire prise se pose sur le dessin (une feuille), jamais sur .mm-in :
   une opacité inférieure à 1 aplatit le contexte 3D et le dos de la carte reparaît. */
.mm-plateau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: var(--mmw, 300px); perspective: 1200px; flex: none; }
.mm-carte { position: relative; aspect-ratio: 240 / 336; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 8px; }
.mm-carte:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mm-carte:disabled { cursor: default; }
.mm-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1); }
.mm-carte.is-retournee .mm-in { transform: rotateY(180deg); }
.mm-dos, .mm-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7px; overflow: hidden; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.45)); }
.mm-face { transform: rotateY(180deg); }
.mm-dos svg, .mm-face svg { display: block; width: 100%; height: 100%; }
.mm-carte.is-prise .mm-face svg { opacity: 0.6; }
.mm-prise { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px solid var(--felt-2); display: none; background: var(--felt-2); z-index: 2; }
.mm-carte.is-prise .mm-prise { display: block; }
.mm-prise img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .mm-in { transition: none; } }

/* ══ Les feuilles : menu, classement, règles, confirmation ══ */
.tbl-feuilles { display: none; position: absolute; inset: 0; z-index: 20; padding: max(env(safe-area-inset-top), 10px) 12px max(env(safe-area-inset-bottom), 10px); box-sizing: border-box; }
.tbl-feuilles.is-ouvert { display: grid; grid-template-rows: 1fr; align-items: center; justify-items: center; }
.tbl-feuilles.is-double { grid-template-rows: 1fr 1fr; gap: 10px; }
.tf-voile { position: absolute; inset: 0; background: rgba(3, 8, 6, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tf-carte {
  position: relative; z-index: 1; width: min(100%, 360px); max-height: 100%; overflow: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 18px; box-sizing: border-box;
  background: rgba(16, 22, 19, 0.97); border: 1px solid var(--glass-edge-2); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); color: var(--ink);
}
.tf-carte--haut { transform: rotate(180deg); }
.tbl-feuilles.is-double .tf-carte--haut { grid-row: 1; }
.tbl-feuilles.is-double .tf-carte--bas { grid-row: 2; }
.tf-titre { margin: 0; font: 700 21px var(--font-display); letter-spacing: -0.02em; }
.tf-sous { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.tf-corps { display: flex; flex-direction: column; gap: 10px; }
.tf-actions { display: flex; flex-direction: column; gap: 8px; }
.tf-btn { min-height: 48px; padding: 0 16px; border-radius: 14px; font: 650 15px var(--font-text); color: var(--ink); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-edge-2); cursor: pointer; }
.tf-btn:active { transform: scale(0.98); }
.tf-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tf-btn--plein { background: var(--gold); border-color: var(--gold); color: #1a1408; }
.tf-btn--danger { background: var(--st-fold-bg); border-color: var(--st-fold-bd); color: var(--st-fold); }
.tf-liste { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.tf-liste li::marker { color: var(--gold); font-family: var(--font-mono); }
.tf-classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tf-rang { display: grid; grid-template-columns: 38px 32px 1fr auto; gap: 10px; align-items: center; min-height: 44px; padding: 4px 10px 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-edge); }
.tf-rang.is-premier { border-color: var(--gold); background: rgba(214, 183, 112, 0.1); }
.tf-rang-n { font: 700 13px var(--font-mono); color: var(--gold); }
.tf-rang-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.tf-rang-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-rang-nom { display: flex; flex-direction: column; min-width: 0; font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-rang-nom small { font: 500 11px var(--font-mono); color: var(--ink-soft); }
.tf-rang-score { font: 700 15px var(--font-mono); }

/* ── Mouvement réduit ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tcarte[data-arrive="1"], .th-cartes .tcarte, .ts-in { animation: none; transition: none; }
}
html.reduced-motion .tcarte[data-arrive="1"] { animation: none; }