/* ============================================================
   Casino · Texas Hold'em — Design system 2026
   Esthétique sobre, monochromatique, Liquid Glass iOS 26.
   Palette anthracite + accent or chaud. Polices système uniquement.
   ============================================================ */

/* ── 0. Reset minimal ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body, #app { height: 100%; min-height: 100vh; min-height: 100dvh; }
body {
  font-family: var(--font-text);
  font-weight: 450;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.005em;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }

/* ── 1. Tokens 2026 ───────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-deep:  #0a0b0d;          /* base anthracite */
  --bg-mid:   #131418;          /* surface intermédiaire */
  --bg-rim:   #1a1b1f;          /* bord de table */
  --bg-felt:  #0f2820;          /* feutre sombre, plus muted */
  --bg-felt-2:#143028;

  --ink:        rgba(245, 246, 250, 0.96);
  --ink-soft:   rgba(245, 246, 250, 0.72);
  --ink-mute:   rgba(245, 246, 250, 0.48);
  --ink-faint:  rgba(245, 246, 250, 0.28);

  /* Liquid Glass — couches plus subtiles, vrai effet de verre */
  --glass-bg:      rgba(255, 255, 255, 0.04);
  --glass-bg-2:    rgba(255, 255, 255, 0.07);
  --glass-edge:    rgba(255, 255, 255, 0.10);
  --glass-edge-2:  rgba(255, 255, 255, 0.18);
  --glass-shadow:  rgba(0, 0, 0, 0.40);

  /* Accent — un seul, or chaud */
  --gold:        #d6b770;
  --gold-soft:   #b89b5e;
  --gold-faint:  rgba(214, 183, 112, 0.16);

  /* États action — sobres (pas de saturation 100%) */
  --st-call:     #74c594;        /* vert sourdine */
  --st-call-bg:  rgba(116, 197, 148, 0.14);
  --st-call-bd:  rgba(116, 197, 148, 0.32);
  --st-fold:     #d97a78;        /* rouge sourdine */
  --st-fold-bg:  rgba(217, 122, 120, 0.12);
  --st-fold-bd:  rgba(217, 122, 120, 0.30);
  --st-raise:    var(--gold);
  --st-raise-bg: rgba(214, 183, 112, 0.14);
  --st-raise-bd: rgba(214, 183, 112, 0.34);

  /* Indicators */
  --ind-active:  #f1cc66;

  /* Typo */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Rayons concentriques */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Easings */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --safe-top:    max(env(safe-area-inset-top), 14px);
  --safe-bottom: max(env(safe-area-inset-bottom), 14px);
}

/* ── 2. Fond — neutre profond avec halo de table ──────────── */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, var(--bg-felt) 0%, var(--bg-felt-2) 30%, var(--bg-deep) 70%),
    var(--bg-deep);
  z-index: -2;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

/* ── 3. Liquid Glass — pattern strict ─────────────────────── */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow:
    0 12px 40px var(--glass-shadow),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.08) 0%,
              rgba(255,255,255,0)    32%);
  pointer-events: none;
  z-index: 1;
}
.glass--clear {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.glass--deep {
  background: rgba(15, 16, 20, 0.62);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-color: rgba(255,255,255,0.08);
}
.glass--gold {
  background: linear-gradient(180deg, rgba(214,183,112,0.16), rgba(214,183,112,0.06));
  border-color: rgba(214,183,112,0.30);
}

/* ── 4. Boutons ───────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.32),
              0 1px 0 rgba(255,255,255,0.08) inset;
  transition: transform 0.36s var(--ease-spring),
              background 0.32s var(--ease-soft),
              border-color 0.32s var(--ease-soft);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover  { background: var(--glass-bg-2); border-color: var(--glass-edge-2); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn[disabled], .btn.is-disabled {
  opacity: 0.32; cursor: not-allowed; transform: none;
}
.btn--primary {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.86));
  color: #0a0b0d;
  border-color: rgba(0,0,0,0);
  box-shadow: 0 6px 24px rgba(255,255,255,0.18),
              0 1px 0 rgba(255,255,255,0.6) inset;
}
.btn--primary:hover {
  background: linear-gradient(180deg, #fff, #f1f1f3);
  border-color: rgba(0,0,0,0);
}
.btn--gold {
  background: linear-gradient(180deg, rgba(214,183,112,0.86), rgba(184,155,94,0.78));
  color: #1a1408;
  border-color: rgba(214,183,112,0.4);
  box-shadow: 0 6px 24px rgba(214,183,112,0.22),
              0 1px 0 rgba(255,255,255,0.4) inset;
}
.btn--ghost { background: transparent; }
.btn--sm    { padding: 8px 14px; font-size: 13px; }
.btn--lg    { padding: 16px 26px; font-size: 16px; }
.btn--full  { width: 100%; }
.btn--icon  { width: 36px; height: 36px; padding: 0; border-radius: 50%; }

/* ── 5. Champs ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color 0.24s, background 0.24s;
}
.input:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 0 4px var(--gold-faint);
}
.input--code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.36em;
  text-align: center;
  text-transform: uppercase;
  font-size: 22px;
  padding: 18px;
}

/* ── 6. Toasts ────────────────────────────────────────────── */
.toasts {
  position: fixed;
  top: var(--safe-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  background: rgba(15,16,20,0.85);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  animation: toast-in 0.4s var(--ease-spring) both;
  pointer-events: auto;
  max-width: 90vw;
}
.toast--out { animation: toast-out 0.28s var(--ease-soft) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.94); }
  to   { opacity: 1; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* ── 7. Modale ────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: backdrop-in 0.32s var(--ease-soft);
}
@keyframes backdrop-in { from { opacity: 0; } }
.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px;
  border-radius: var(--r-xl);
  animation: modal-in 0.42s var(--ease-spring) both;
  position: relative;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.modal p { margin: 0 0 20px; color: var(--ink-soft); font-size: 14.5px; }
.modal-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  font-size: 18px; line-height: 1;
  color: var(--ink-soft);
  transition: background 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.12); }

/* ── 8. Vue Home ──────────────────────────────────────────── */
.home {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: auto;
}
.home-card {
  width: min(480px, 100%);
  padding: 38px 30px;
  text-align: center;
  position: relative;
}
.home-eyebrow {
  display: inline-flex; align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-eyebrow svg { width: 12px; height: 12px; color: var(--gold); }
.home-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0 0 12px;
  color: var(--ink);
}
.home-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-mute);
}
.home-tagline {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 360px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.home-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.home-actions .btn { width: 100%; padding: 15px 22px; font-size: 15px; }
.home-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 14px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.home-divider::before,
.home-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}
.home-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.home-back {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 5;
}

/* ── 9. Lobby ─────────────────────────────────────────────── */
.lobby {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; overflow: auto;
}
.lobby-card { width: min(620px, 100%); padding: 32px; }
.lobby-header { text-align: center; margin-bottom: 22px; }
.lobby-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.lobby-code {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.32em;
  /* indent ½ letter-spacing pour compenser l'offset du dernier glyphe */
  text-indent: 0.32em;
  margin: 12px 0 4px;
  color: var(--ink);
  position: relative;
}
.lobby-code::after {
  content: "";
  position: absolute;
  inset: -8px -16px;
  border-radius: var(--r-md);
  background: radial-gradient(ellipse at center, var(--gold-faint) 0%, transparent 70%);
  z-index: -1;
}
.lobby-link {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
  margin-top: 14px;
}
.lobby-link span { flex: 1; min-width: 0; }
.lobby-players {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.lobby-player {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.lobby-player.is-host  { border-color: rgba(214,183,112,0.30); background: rgba(214,183,112,0.04); }
.lobby-player.is-self  { background: rgba(116,197,148,0.06); border-color: rgba(116,197,148,0.20); }
.lobby-pill {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  color: var(--ink-soft);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
.lobby-pill--host  { background: var(--gold-faint); color: var(--gold); }
.lobby-pill--ready { background: rgba(116,197,148,0.16); color: var(--st-call); }
.lobby-actions {
  margin-top: 24px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.lobby-actions > .btn { flex: 1; min-width: 140px; }

.qr {
  display: flex; justify-content: center;
  margin: 16px 0 8px;
}
.qr svg {
  width: 168px; height: 168px;
  background: white;
  padding: 10px;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ── 10. Table de poker ───────────────────────────────────── */
.game {
  position: relative; width: 100%; height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) 18px 8px;
  gap: 12px;
  z-index: 5;
}
.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: 8px;
}
.topbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.topbar-brand svg { color: var(--gold); width: 14px; height: 14px; }
.topbar-info {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Chrono : l'icône SVG vit à côté du compteur, jamais dedans (le compteur est
   réécrit par textContent à chaque seconde). */
.topbar-info svg { vertical-align: -0.15em; margin-right: 5px; opacity: 0.75; }

.table-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.table-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.seats-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.seat {
  position: absolute;
  width: 122px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.seat-avatar {
  position: relative;
  width: 56px; height: 56px;
}
.seat-avatar-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: border-color 0.32s var(--ease-soft);
}
.seat.is-active .seat-avatar-ring {
  border-color: var(--ind-active);
  animation: ring-pulse 1.6s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241,204,102,0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(241,204,102,0); }
}
.seat.is-folded { opacity: 0.35; filter: grayscale(0.5); }
.seat.is-allin .seat-avatar-ring { border-color: var(--gold); }
.seat.is-hero  { display: none; }
.seat.is-hero .seat-pos { display: flex; }

.seat-avatar-svg { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
/* Les avatars sont des médaillons gravés, déjà découpés en cercle (fond
   transparent) : ils remplissent leur conteneur, quel qu'il soit (siège,
   pilule du compte, sélecteur, listes de l'admin et du salon). */
.avatar-img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
.seat-name {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 4px;
  background: rgba(0,0,0,0.55);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.05);
}
.seat-stack {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.5);
  padding: 1px 9px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.seat-cards {
  display: flex; gap: 2px;
  margin-top: 4px;
  min-height: 50px;
}
.seat-cards svg { width: 34px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }

.seat-bet {
  position: absolute;
  pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  background: rgba(15,16,20,0.78);
  padding: 4px 10px 4px 6px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-edge);
  transition: transform 0.32s var(--ease-spring);
}
.seat-bet svg { width: 18px; height: 18px; }
.seat-pos {
  position: absolute;
  top: -6px; right: 4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg-deep);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 4;
}
.seat-pos.sb { background: rgba(255,255,255,0.85); color: var(--bg-deep); }
.seat-pos.bb { background: var(--gold); color: #1a1408; }
.seat-pos.btn { background: var(--ink); color: var(--bg-deep); }

/* Pot central */
.pot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.5s var(--ease-soft);
}
.pot-label {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.pot-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
.community {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 28px));
  display: flex; gap: 6px;
  pointer-events: none;
}
.community svg { width: 60px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.55)); }
.community .card-slot {
  width: 60px; height: 84px;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.07);
}

/* ── 11. HUD joueur humain ────────────────────────────────── */
.hud {
  position: relative;
  padding: 12px 18px var(--safe-bottom);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: end;
  z-index: 4;
}
.hud-cards {
  display: flex; gap: 4px;
}
.hud-cards svg { width: 76px; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.6)); }
.hud-info {
  display: flex; flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hud-info .strength {
  font-weight: 600; color: var(--gold);
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.hud-info .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.hud-strength-bar {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 6px;
}
.hud-strength-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--st-fold) 0%, var(--gold) 50%, var(--st-call) 100%);
  transition: width 0.6s var(--ease-soft);
  border-radius: inherit;
}
.hud-pos {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--gold-faint);
  color: var(--gold);
  margin-right: 6px;
}

/* Barre d'actions */
.actions {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
  min-width: 320px;
  max-width: 460px;
}
.actions-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr;
  gap: 8px;
}
.action-btn {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  color: var(--ink);
  transition: transform 0.32s var(--ease-spring),
              background 0.32s var(--ease-soft),
              border-color 0.32s var(--ease-soft);
}
.action-btn:hover  { transform: translateY(-1px); background: var(--glass-bg-2); }
.action-btn:active { transform: scale(0.97); }
.action-btn[disabled] { opacity: 0.32; cursor: not-allowed; transform: none; }
.action-btn .label {
  display: block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1px;
}
.action-btn .amount {
  display: block;
  font-size: 15px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.action-btn--fold  { background: var(--st-fold-bg); border-color: var(--st-fold-bd); }
.action-btn--fold:hover  { background: rgba(217,122,120,0.20); }
.action-btn--fold .label { color: var(--st-fold); }
.action-btn--call  { background: var(--st-call-bg); border-color: var(--st-call-bd); }
.action-btn--call:hover  { background: rgba(116,197,148,0.22); }
.action-btn--call .label { color: var(--st-call); }
.action-btn--raise { background: var(--st-raise-bg); border-color: var(--st-raise-bd); }
.action-btn--raise:hover { background: rgba(214,183,112,0.22); }
.action-btn--raise .label { color: var(--st-raise); }
.action-btn--allin {
  background: linear-gradient(180deg, rgba(214,183,112,0.85), rgba(184,155,94,0.78));
  border-color: rgba(214,183,112,0.55);
  color: #1a1408;
}
.action-btn--allin .label { color: rgba(26,20,8,0.62); }
.action-btn--allin:hover { background: linear-gradient(180deg, rgba(214,183,112,1), rgba(184,155,94,0.92)); }

/* Slider de mise */
.bet-slider {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bet-slider-row {
  display: flex; align-items: center; gap: 14px;
}
.bet-slider input[type=range] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: var(--r-pill);
  outline: none;
  cursor: pointer;
}
.bet-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e6e6ea);
  border: 1.5px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.2s;
}
.bet-slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.bet-slider input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: white;
  border: 1.5px solid var(--gold);
  cursor: pointer;
}
.bet-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: right;
  letter-spacing: 0.01em;
}
.bet-presets {
  display: flex; gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.bet-presets button {
  flex: 1;
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.18s;
}
.bet-presets button:hover  { background: rgba(255,255,255,0.08); color: var(--ink); }
.bet-presets button:active { transform: scale(0.96); }

/* Bandeau résultat */
.endhand-banner {
  position: absolute;
  left: 50%; bottom: 36%;
  transform: translateX(-50%);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(214,183,112,0.92), rgba(184,155,94,0.84));
  color: #1a1408;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(214,183,112,0.32),
              0 1px 0 rgba(255,255,255,0.4) inset;
  animation: banner-pop 0.5s var(--ease-bounce);
  z-index: 10;
}
@keyframes banner-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ── 12. Toggles iOS ──────────────────────────────────────── */
.toggle {
  position: relative;
  width: 51px; height: 31px;
  border-radius: var(--r-pill);
  background: rgba(120,120,128,0.32);
  cursor: pointer;
  transition: background 0.3s var(--ease-soft);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.05);
}
.toggle::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.32);
  transition: transform 0.3s var(--ease-spring);
}
.toggle.is-on { background: var(--st-call); }
.toggle.is-on::before { transform: translateX(20px); }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; }

/* ── 13. Drawer historique ────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 92vw);
  height: 100%;
  padding: 22px 20px;
  z-index: 90;
  overflow: auto;
  transform: translateX(100%);
  transition: transform 0.42s var(--ease-spring);
}
.drawer.is-open { transform: translateX(0); }
.drawer h3 {
  font-size: 17px; margin: 0 0 14px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.history-item {
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 6px;
  font-size: 12.5px;
}
.history-item .winner {
  font-weight: 700; color: var(--gold);
  letter-spacing: -0.01em;
}
.history-item .hand {
  color: var(--ink-soft);
  font-size: 11.5px;
  margin-top: 2px;
}

/* ── 14. Animations utilitaires ───────────────────────────── */
@keyframes card-deal {
  from { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(0.9); opacity: 0; }
  to   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
.card-anim { animation: card-deal 0.4s var(--ease-spring) both; }

/* ── 15. Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* On coupe le MOUVEMENT (animations et transitions), jamais les transformations
     elles-mêmes : un `transform: none !important` posé ici retirait aussi la
     rotation des places du Mode Table, le pivot en paysage et le retournement des
     cartes, qui ne sont pas des effets mais la mise en page. Les sièges du Hold'em
     solo perdaient de même leur `translate(-50%, -50%)`. */
  * { animation-duration: 0.001s !important; transition: opacity 0.2s !important; }
}

/* ── 16. Responsive ───────────────────────────────────────── */
@media (max-width: 880px) {
  .home-title { font-size: 36px; }
  .lobby-code { font-size: 36px; letter-spacing: 0.24em; margin-left: 12px; }
  .seat { width: 96px; }
  .seat-avatar { width: 48px; height: 48px; }
  .seat-cards svg { width: 26px; }
  .community svg { width: 44px; }
  .community .card-slot { width: 44px; height: 60px; }
  .pot-amount { font-size: 24px; }
  .hud { grid-template-columns: 1fr; gap: 10px; }
  .hud-cards { justify-content: center; }
  .hud-cards svg { width: 64px; }
  .actions { max-width: none; min-width: 0; }
}
@media (max-width: 540px) {
  .home-card { padding: 28px 22px; }
  .lobby-card { padding: 22px; }
  .lobby-code { font-size: 26px; letter-spacing: 0.18em; }
}

/* ============================================================
   THEME LIGHT (style Portfolio) — appliqué via body.theme-light
   Pour le menu Casino, login, invite, admin (les pages "shell").
   Les jeux (Hold'em, Blackjack) restent en dark Liquid Glass.
   ============================================================ */

body.theme-light {
  --bg: #fbfaf7;
  --fg: #0a0a0a;
  --fg-soft: #404040;
  --muted: #525252;
  --muted-2: #737373;
  --muted-3: #6f6a63;   /* charte, audit L4 : ~4,6:1 (AA) pour les petits libellés mono */
  --line: rgba(0,0,0,0.08);
  /* Ces onze jetons sont la charte recopiée (cf. `:root` de static/style.css) :
     c'est le contrat annoncé par le titre du bloc, « style Portfolio ». Les
     filets étaient les deux derniers à diverger (0.04 et 0.16). Alignement
     mesuré au navigateur sur les cinq écrans qui portent ce thème :
       . connexion et invitation : 0 pixel changé, ils n'emploient que --line ;
       . menu, admin, réglages   : écart maximal de 5 niveaux sur 255 pour
         --line-soft (les filets d'un pixel passent de 1,09:1 à 1,14:1 sur le
         papier, imperceptible dans les deux sens), et de 10 niveaux sur les
         38 seuls pixels que --line-strong peint encore ici.
     L'alignement ne se voit donc pas : il est fait pour que deux listes de
     jetons cessent de diverger, pas pour changer le rendu. */
  --line-soft: rgba(0,0,0,0.06);
  /* Attention : --line-strong sert aussi de COULEUR DE TEXTE au séparateur
     « · » des cartes du menu (cf. `.casino-card-meta-sep`), où il tombe à
     1,32:1. Un jeton de filet n'est pas fait pour ça ; à reprendre le jour où
     on touche à cette carte. */
  --line-strong: rgba(0,0,0,0.12);
  --card: #ffffff;
  --paper: #fafaf9;
  --paper-2: #f5f5f4;
  --accent-light: #0a0a0a;

  --font-display-light: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body-light:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono-light:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body-light);
  letter-spacing: -0.005em;
  overflow: auto;
}
body.theme-light::before { display: none; }
body.theme-light::after { display: none; }

/* ── Hub d'accueil Casino — refonte « warm minimal » (handoff) ──── */
.theme-light .casino-page {
  --accent: oklch(0.62 0.18 25);                 /* accent casino — rouge chaud */
  --ease-spring-ui: cubic-bezier(0.34, 1.4, 0.64, 1);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* Header sticky vitré */
.theme-light .casino-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 36px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}
.theme-light .casino-brand-group {
  display: flex; align-items: center; gap: 18px; min-width: 0;
}
/* La signature du studio est son logo (static/brand/logo.png), pas son nom
   écrit. La variante claire seule : le menu est toujours en thème clair.
   À 26 px, la hauteur du logo « Casino » voisin : les deux marques se lisent
   à égalité, séparées par le filet. */
.theme-light .casino-brand {
  display: block; height: 26px; width: auto; flex-shrink: 0;
}
.theme-light .casino-brand-sep {
  width: 1px; height: 16px; background: var(--line-strong); flex-shrink: 0;
}
/* Le nom de la salle est son logo (le « C » et « Casino », dessinés
   ensemble en septembre 2026). Un <img> suffit : le menu est toujours en
   thème clair, une seule variante à charger. */
.theme-light .casino-tag-logo {
  display: block; height: 26px; width: auto; flex-shrink: 0;
}

/* Nav droite (mono) + solde + pilule compte */
.theme-light .casino-topbar-nav {
  display: flex; gap: 18px; align-items: center;
  font-family: var(--font-mono-light);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
}
.theme-light .casino-topbar-nav button {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; font: inherit; color: var(--muted-2);
  letter-spacing: inherit; text-transform: inherit;
  transition: color 200ms ease;
}
.theme-light .casino-topbar-nav button:hover { color: var(--fg); }
.theme-light .casino-solde { white-space: nowrap; }
.theme-light .casino-solde strong { color: var(--fg); font-weight: 600; }
.theme-light .casino-account {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease;
}
.theme-light .casino-account:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.theme-light .casino-account-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
}
.theme-light .casino-account-avatar svg { width: 100%; height: 100%; display: block; }
.theme-light .casino-account-name {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg);
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Main éditorial */
.theme-light .casino-main {
  flex: 1; width: 100%; max-width: 1120px;
  margin: 0 auto; padding: 54px 32px 90px;
}
.theme-light .casino-eyebrow-mono {
  font-family: var(--font-mono-light);
  font-size: 11px; color: var(--muted-3);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 12px;
}
.theme-light .casino-h1 {
  margin: 0 0 22px; line-height: 0;
}
.theme-light .casino-h1-logo {
  display: block; height: clamp(76px, 13vw, 132px); width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.theme-light .casino-sub {
  font-size: 19px; line-height: 1.5; color: var(--muted);
  max-width: 32em; margin: 0 0 50px;
}

/* Grille de cartes de jeu */
.theme-light .casino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 18px;
}
.theme-light .casino-card {
  display: flex; flex-direction: column;
  min-height: 228px; padding: 24px 24px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  text-align: left; color: inherit; font: inherit; cursor: pointer;
  transition: transform .28s var(--ease-spring-ui), box-shadow .28s ease, border-color .2s ease;
}
.theme-light .casino-card:hover:not([disabled]) {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(0,0,0,0.34);
  border-color: var(--accent);
}
.theme-light .casino-card[disabled] { cursor: not-allowed; opacity: 0.5; }
.theme-light .casino-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.theme-light .casino-card-mark {
  display: flex; margin-bottom: 18px;
}
/* La vignette peinte de chaque table : un carré arrondi, posé là où vivait
   l'icône au trait. Elle porte ses dimensions (aucun saut au chargement). */
.theme-light .casino-card-art {
  display: block; width: 96px; height: 96px;
  border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 18px -12px rgba(0,0,0,0.45);
  transition: transform .28s var(--ease-spring-ui);
}
.theme-light .casino-card:hover:not([disabled]) .casino-card-art { transform: scale(1.04) rotate(-1.5deg); }
@media (max-width: 560px) {
  .theme-light .casino-card-art { width: 80px; height: 80px; border-radius: 12px; }
  .theme-light .casino-card-mark { margin-bottom: 14px; }
}
.theme-light .casino-card-arrow {
  font-size: 18px; line-height: 1; color: var(--muted-3);
  font-family: var(--font-display-light);
  transition: transform .25s var(--ease-spring-ui), color .2s ease;
}
.theme-light .casino-card:hover:not([disabled]) .casino-card-arrow {
  transform: translate(3px, -3px); color: var(--accent);
}
.theme-light .casino-card-body { margin-top: auto; }
.theme-light .casino-card-titlerow {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
}
.theme-light .casino-card-title {
  font-family: var(--font-display-light);
  font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--fg); line-height: 1.1;
}
.theme-light .casino-card-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block; flex-shrink: 0;
}
.theme-light .casino-card-desc {
  font-size: 14px; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px; min-height: 42px;
}
.theme-light .casino-card-meta {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono-light);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-3);
  padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.theme-light .casino-card-meta-sep { color: var(--line-strong); }

/* Footer mono */
.theme-light .casino-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 36px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono-light);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-3);
}

/* Reveal au montage (neutralisé par prefers-reduced-motion / .reduced-motion) */
@keyframes cz-up {
  from { opacity: 0; transform: translateY(16px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.theme-light .casino-page .e-up {
  animation: cz-up 0.65s var(--ease-spring-ui) both;
  animation-delay: var(--d, 0s);
}

/* Responsive */
@media (max-width: 640px) {
  .theme-light .casino-topbar { padding: 14px 18px; flex-wrap: wrap; gap: 10px 14px; }
  .theme-light .casino-tag-logo,
  .theme-light .casino-brand-sep { display: none; }
  .theme-light .casino-account-name { display: none; }
  .theme-light .casino-account { padding: 5px; }
  .theme-light .casino-main { padding: 40px 20px 72px; }
  .theme-light .casino-sub { font-size: 17px; margin-bottom: 38px; }
  .theme-light .casino-foot { flex-direction: column; gap: 8px; text-align: center; padding: 24px 20px; }
}
.theme-light .casino-legal { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.theme-light .casino-foot a { color: inherit; text-decoration: none; transition: color .15s; }
.theme-light .casino-foot a:hover { color: var(--ink); text-decoration: underline; }

/* Pages light : login, invite (centrées dans un card blanc) */
.theme-light .lite-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 38px;
  background: var(--bg);
}
.theme-light .lite-card {
  width: min(440px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.18);
}
/* Les écrans d'entrée (connexion, invitation) portent le logo : ce sont les
   premiers qu'un joueur voit, avant le menu. */
.theme-light .lite-logo {
  display: block; height: 52px; width: auto; margin: 0 0 18px;
}
.theme-light .lite-eyebrow {
  font-family: var(--font-mono-light);
  font-size: 11px;
  color: var(--muted-3);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.theme-light .lite-title {
  font-family: var(--font-display-light);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 8px;
}
.theme-light .lite-title em { font-style: italic; color: var(--muted); font-weight: 500; }
.theme-light .lite-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.55;
}
.theme-light .lite-field { margin-bottom: 14px; }
.theme-light .lite-field label {
  display: block;
  font-family: var(--font-mono-light);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.theme-light .lite-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  font: inherit; color: var(--fg);
  font-size: 15px;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.theme-light .lite-input:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.06);
}
.theme-light .lite-input--code {
  font-family: var(--font-mono-light);
  letter-spacing: 0.40em;
  text-align: center;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 600;
  padding: 18px;
}
.theme-light .lite-btn {
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  font: inherit; font-weight: 500;
  font-size: 14px; letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 220ms ease;
}
.theme-light .lite-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.34);
}
.theme-light .lite-btn:active { transform: translateY(0); }
.theme-light .lite-btn--ghost {
  background: var(--card); color: var(--fg);
  border-color: var(--line);
}
.theme-light .lite-btn--ghost:hover { background: var(--paper-2); }
.theme-light .lite-btnrow {
  display: flex; gap: 10px;
  margin-top: 18px;
}
.theme-light .lite-back {
  position: absolute;
  top: 22px; left: 22px;
  font-family: var(--font-mono-light);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: none; border: none;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 200ms ease;
}
.theme-light .lite-back:hover { color: var(--fg); }

/* Sélection avatar dans la page invite */
.theme-light .lite-avatar-pick {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 4px;
  justify-content: center;
}
.theme-light .lite-avatar-opt {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease;
  background: none; padding: 0;
}
.theme-light .lite-avatar-opt:hover { transform: scale(1.06); }
.theme-light .lite-avatar-opt.is-selected {
  border-color: var(--fg);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}

/* Admin dashboard — style light Portfolio ─────────────── */
.theme-light .admin-page {
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  display: flex; flex-direction: column;
}
.theme-light .admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 38px;
  border-bottom: 1px solid var(--line-soft);
}
.theme-light .admin-h1 {
  font-family: var(--font-display-light);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0;
}
.theme-light .admin-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 38px;
  padding: 28px 38px 38px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.theme-light .admin-section {
  background: none; border: none; padding: 0;
}
.theme-light .admin-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.theme-light .admin-section h2 {
  font-family: var(--font-display-light);
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.theme-light .admin-count {
  font-family: var(--font-mono-light);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.theme-light .admin-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  background: none; border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}
.theme-light .admin-row-avatar { width: 32px; height: 32px; }
.theme-light .admin-row-name {
  font-weight: 600; font-size: 15px; color: var(--fg);
  letter-spacing: -0.01em;
  display: flex; gap: 8px; align-items: center;
}
.theme-light .admin-row-sub {
  font-family: var(--font-mono-light);
  font-size: 11px; color: var(--muted-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.theme-light .admin-row-note {
  font-size: 12px; color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}
.theme-light .chips-amount {
  font-family: var(--font-mono-light);
  font-size: 15px; font-weight: 600;
  color: #b89b5e;
}
.theme-light .chips-label {
  font-family: var(--font-mono-light);
  font-size: 10px; color: var(--muted-3);
  letter-spacing: 0.10em;
}
.theme-light .ch-pill {
  font-family: var(--font-mono-light);
  font-size: 9px;
  padding: 2px 7px;
  background: var(--paper-2); color: var(--muted);
  border-radius: 9999px;
  letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 600;
}
.theme-light .ch-pill--admin {
  background: rgba(184,155,94,0.14);
  color: #8c733e;
}
.theme-light .ch-pill--ready {
  background: rgba(34, 138, 78, 0.10);
  color: #2e7a48;
}
.theme-light .admin-row-actions { display: flex; gap: 4px; }
.theme-light .admin-row-actions button,
.theme-light .admin-section-head button {
  font: inherit;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.theme-light .admin-row-actions button:hover,
.theme-light .admin-section-head button:hover {
  background: var(--paper-2);
  border-color: var(--line-strong);
}
.theme-light .admin-invite {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.theme-light .admin-invite.is-active { border-color: rgba(46,122,72,0.32); }
.theme-light .admin-invite.is-used,
.theme-light .admin-invite.is-expired { opacity: 0.55; }
.theme-light .admin-invite-link {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--muted);
}
.theme-light .admin-invite-link code { color: var(--muted); }
.theme-light .admin-invite-code strong {
  color: #b89b5e;
}
.theme-light .invite-code-big {
  background: rgba(184,155,94,0.10);
  border-color: rgba(184,155,94,0.32);
  color: #8c733e;
}
.theme-light .lobby-link {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--muted);
}

/* Modals dans le thème light */
.theme-light .modal-backdrop {
  background: rgba(20,20,20,0.34);
  backdrop-filter: blur(6px);
}
.theme-light .modal {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 18px;
  box-shadow: 0 28px 80px -32px rgba(0,0,0,0.34);
}
.theme-light .modal::before { display: none; }
.theme-light .modal h2 {
  font-family: var(--font-display-light);
  font-weight: 600; color: var(--fg);
  letter-spacing: -0.025em;
}
.theme-light .modal p { color: var(--muted); }
.theme-light .modal-close {
  background: var(--paper-2);
  color: var(--muted);
}
.theme-light .modal .input {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}
.theme-light .modal .input:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.06);
  background: var(--card);
}
.theme-light .modal .field label {
  font-family: var(--font-mono-light);
  font-size: 11px; color: var(--muted-2);
  letter-spacing: 0.10em;
}
.theme-light .modal .btn {
  font-family: var(--font-body-light);
  font-weight: 500;
  background: var(--card); color: var(--fg);
  border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.theme-light .modal .btn:hover { background: var(--paper-2); border-color: var(--line-strong); }
.theme-light .modal .btn--primary {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.theme-light .modal .btn--primary:hover { background: #1a1a1a; }
.theme-light .modal .btn--ghost {
  background: var(--card); color: var(--muted);
}
.theme-light .modal .toggle {
  background: rgba(0,0,0,0.10);
  border-color: var(--line);
}
.theme-light .modal .toggle.is-on {
  background: #2e7a48;
}

.theme-light .toasts .toast {
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
}

/* Settings page en theme light */
.theme-light .settings-page { background: var(--bg); }
.theme-light .settings-page .topbar {
  border-bottom: 1px solid var(--line-soft);
}
.theme-light .settings-page .topbar-brand,
.theme-light .settings-page .btn--ghost {
  color: var(--muted);
}
.theme-light .settings-group {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.theme-light .settings-group::before { display: none; }
.theme-light .settings-group-title {
  color: var(--muted-2);
  font-family: var(--font-mono-light);
  font-weight: 600;
}
.theme-light .set-row { border-bottom-color: var(--line-soft); }
.theme-light .set-label { color: var(--fg); }
.theme-light .set-num {
  background: var(--card); color: var(--fg);
  border-color: var(--line);
}
.theme-light .toggle-row { border-bottom-color: var(--line-soft); }
.theme-light .set-range-val { color: #b89b5e; }
.theme-light .toggle {
  background: rgba(0,0,0,0.12);
  border-color: var(--line);
}
.theme-light .toggle.is-on { background: #2e7a48; }

/* ============================================================
   Anciens styles (DARK) — gardés pour les vues de jeu
   Le menu Casino n'utilise plus ces styles ; les jeux Hold'em
   et Blackjack continuent à les utiliser.
   ============================================================ */
.casino-home {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: auto;
}
.casino-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  margin: var(--safe-top) 22px 0;
  border-radius: var(--r-lg);
  gap: 14px;
}
.ch-left { display: flex; align-items: center; gap: 14px; }
.ch-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ch-eyebrow { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.ch-name {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
}
.ch-pill {
  font-size: 10px; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 700;
}
.ch-pill--admin { background: var(--gold-faint); color: var(--gold); }
.ch-pill--ready { background: rgba(116,197,148,0.18); color: var(--st-call); }
.ch-right { display: flex; align-items: center; gap: 10px; }
.ch-chips {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.casino-body {
  flex: 1;
  padding: 32px 24px var(--safe-bottom);
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
}
.casino-hero { text-align: center; max-width: 560px; }
.casino-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.casino-eyebrow svg { color: var(--gold); }
.casino-title {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700;
  letter-spacing: -0.04em;
  margin: 12px 0 8px;
}
.casino-tagline {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.55;
}
.casino-tagline strong { color: var(--gold); font-weight: 600; }
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 920px;
}
.game-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-lg);
  transition: transform 0.36s var(--ease-spring),
              border-color 0.32s var(--ease-soft);
  position: relative;
  overflow: hidden;
}
.game-card::after {
  content: ""; position: absolute;
  top: 0; left: 0; width: 3px; height: 100%;
  background: var(--accent, var(--gold));
  opacity: 0.6;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, var(--glass-edge-2));
}
.game-card.is-soon { cursor: not-allowed; opacity: 0.5; }
.game-card.is-soon:hover { transform: none; }
.game-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.game-icon svg { color: var(--accent, var(--gold)); }
.game-meta { min-width: 0; }
.game-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.game-tagline {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.game-arrow { color: var(--ink-faint); }
.game-card:hover .game-arrow { color: var(--accent, var(--gold)); }
.game-soon {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
}
.casino-footer {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Admin dashboard */
.admin-page {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: auto;
}
.admin-page .topbar { padding: var(--safe-top) 22px 8px; }
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px 22px var(--safe-bottom);
}
.admin-section { padding: 18px 18px 10px; border-radius: var(--r-lg); min-height: 340px; }
.admin-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.admin-section h2 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.admin-count {
  font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}
.admin-list { display: flex; flex-direction: column; gap: 6px; }
.admin-loading, .admin-empty {
  color: var(--ink-mute); font-size: 13px;
  padding: 14px; text-align: center;
}
.admin-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.admin-row-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.admin-row-meta { min-width: 0; }
.admin-row-name {
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.admin-row-sub {
  font-size: 11px; color: var(--ink-mute);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.admin-row-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-style: italic;
}
.admin-row-chips {
  text-align: right;
  display: flex; flex-direction: column;
}
.chips-amount {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 15px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.chips-label { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-row-actions { display: flex; gap: 4px; }

.admin-invite {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex; gap: 10px; align-items: flex-start;
}
.admin-invite.is-active { border-color: rgba(116,197,148,0.22); }
.admin-invite.is-used   { opacity: 0.5; }
.admin-invite.is-expired { opacity: 0.4; }
.admin-invite-meta { flex: 1; min-width: 0; }
.admin-invite-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-soft);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.admin-invite-chips {
  font-family: var(--font-mono);
  color: var(--gold);
  font-weight: 600;
}
.admin-invite-note { color: var(--ink); font-style: italic; }
.admin-invite-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  word-break: break-all;
}
.admin-invite-link code { color: var(--ink-soft); flex: 1; min-width: 0; }
.admin-invite-code {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-soft);
}
.admin-invite-code strong {
  font-family: var(--font-mono);
  letter-spacing: 0.30em;
  font-size: 16px;
  color: var(--gold);
  font-weight: 700;
  margin-left: 4px;
}
.invite-code-big {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(214,183,112,0.10);
  border: 1px solid rgba(214,183,112,0.32);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.invite-code-big button {
  font-size: 12px; letter-spacing: 0.06em;
}

/* Settings page */
.settings-page {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  overflow: auto;
}
.settings-body {
  padding: 14px 22px var(--safe-bottom);
  display: flex; flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.settings-group { padding: 18px 20px 6px; border-radius: var(--r-lg); }
.settings-group-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 10px;
}
.settings-rows { display: flex; flex-direction: column; }
.set-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.set-row:last-child { border-bottom: none; }
.set-label { font-size: 14px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.set-range-val { font-family: var(--font-mono); color: var(--gold); font-size: 12px; font-weight: 700; }
.set-num {
  width: 110px;
  padding: 8px 12px;
  text-align: right;
  font-family: var(--font-mono);
}
.set-row input[type=range] {
  width: 200px;
  -webkit-appearance: none; appearance: none;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: var(--r-pill);
  outline: none;
  cursor: pointer;
}
.set-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white; border: 1.5px solid var(--gold);
  cursor: pointer;
}
.settings-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 0 28px;
}

/* Invite redemption */
.invite-avatar-pick {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 4px;
  justify-content: center;
}
.avatar-opt {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.24s var(--ease-spring), border-color 0.24s;
  background: none;
  padding: 0;
}
.avatar-opt:hover { transform: scale(1.06); }
.avatar-opt.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-faint);
}

/* Blackjack */
.bj-game { display: grid; grid-template-rows: auto 1fr auto; }
.bj-felt {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 18px 24px;
  gap: 14px;
}
.bj-row {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.bj-row-label {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.bj-cards, .bj-hand-cards {
  display: flex; gap: 6px; justify-content: center;
  min-height: 86px;
}
.bj-cards svg, .bj-hand-cards svg {
  width: 64px; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
}
.bj-card-wrap { position: relative; }
.bj-total {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.46);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.08);
}
.bj-mid { display: flex; justify-content: center; }
.bj-bet { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bj-hands { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.bj-hand {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.bj-hand.is-active {
  border-color: var(--ind-active);
  box-shadow: 0 0 0 4px rgba(241,204,102,0.12);
}
.bj-hand.is-bust { opacity: 0.62; filter: grayscale(0.35); }
.bj-hand-total {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.bj-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 10px;
  border-radius: var(--r-pill);
  background: var(--gold-faint);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.bj-bet-card {
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  text-align: center;
}
.bj-bet-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.bj-bet-presets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.bj-bet-presets button {
  padding: 9px 0;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.2s;
}
.bj-bet-presets button:hover:not([disabled]) { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.bj-bet-presets button:active { transform: scale(0.96); }
.bj-bet-presets button[disabled] { opacity: 0.32; cursor: not-allowed; }
.bj-bet-row { display: flex; gap: 8px; margin-bottom: 12px; }
.bj-meta { font-size: 11px; color: var(--ink-mute); margin: 6px 0 0; }
.bj-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
}
.bj-hud { padding: 12px 22px var(--safe-bottom); }
.bj-result {
  text-align: center;
  padding: 14px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
}
.bj-result-text { font-size: 14px; letter-spacing: -0.01em; margin-bottom: 12px; }
.bj-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}
html.high-contrast .glass {
  background: rgba(15,16,20,0.92);
  border-color: rgba(255,255,255,0.4);
}

@media (max-width: 880px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: auto 1fr auto; }
  .admin-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .casino-title { font-size: 28px; }
}

/* ============================================================
   Roulette
   ============================================================ */
.roulette-game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.roulette-felt {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 16px 22px var(--safe-bottom);
  align-items: stretch;
  height: 100%;
  overflow: hidden;
}
.roulette-wheel-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  grid-row: 1 / 3;
}
.roulette-wheel {
  width: 240px; height: 240px;
  border-radius: 50%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45),
              0 0 0 6px rgba(255,255,255,0.04),
              0 0 0 7px rgba(214,183,112,0.18);
  transition: transform 2s cubic-bezier(0.32, 0.72, 0, 1);
}
.roulette-wheel.spinning { transform: rotate(1440deg); }
.roulette-wheel svg { width: 100%; height: 100%; border-radius: 50%; }
.roulette-result {
  font-family: var(--font-mono);
  font-size: 18px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-weight: 600;
}
.roulette-result[data-color="red"]   { color: #d97a78; }
.roulette-result[data-color="black"] { color: #cccccc; }
.roulette-result[data-color="green"] { color: #74c594; }
.roulette-history {
  display: flex; gap: 4px; flex-wrap: wrap;
  justify-content: center;
  max-width: 240px;
}
.rh-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: white;
}
.rh-num[data-color="red"]   { background: #a8443a; }
.rh-num[data-color="black"] { background: #1a1a1f; border: 1px solid rgba(255,255,255,0.12); }
.rh-num[data-color="green"] { background: #2e7a48; }

.roulette-table {
  display: grid;
  grid-template-columns: 50px repeat(12, minmax(0, 1fr)) 50px;
  grid-template-rows: repeat(3, 1fr) 32px 32px;
  gap: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  align-self: start;
  height: fit-content;
  padding: 6px;
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--glass-edge);
}
.rt-cell {
  position: relative;
  background: var(--bg-felt);
  color: white;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0; cursor: pointer;
  font: inherit;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px;
  transition: filter 180ms ease, transform 120ms ease;
  border-radius: 4px;
}
.rt-cell:hover { filter: brightness(1.18); }
.rt-cell:active { transform: scale(0.97); }
.rt-zero {
  background: #2e7a48;
  grid-row: 1 / 4; grid-column: 1;
}
.rt-num.rt-red    { background: #a8443a; }
.rt-num.rt-black  { background: #1a1a1f; }
.rt-outside { background: rgba(255,255,255,0.05); color: var(--ink-soft); font-size: 11px; letter-spacing: 0.06em; }
.rt-red    { background: #a8443a; }
.rt-black  { background: #1a1a1f; }
.bet-marker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold);
  color: #1a1408;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 2;
}

.roulette-bottombar {
  grid-column: 1 / 3;
  padding: 12px 18px;
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 18px;
  align-items: center;
}
.rb-row { display: flex; align-items: center; gap: 12px; }
.rb-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.rb-chips { display: flex; gap: 4px; }
.rb-chip {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease;
}
.rb-chip:hover { background: rgba(255,255,255,0.08); }
.rb-chip:active { transform: scale(0.96); }
.rb-chip.is-on  { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.rb-total {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.rb-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ============================================================
   Memory
   ============================================================ */
.memory-game { grid-template-rows: auto 1fr auto; }
.memory-felt {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow: auto;
  position: relative;
}
.memory-empty { width: 100%; max-width: 420px; }
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: min(540px, 92%);
  perspective: 1200px;
}
.memory-card {
  position: relative;
  aspect-ratio: 5 / 7;
  background: none; padding: 0; border: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.memory-card.is-flipped  { transform: rotateY(180deg); }
.memory-card.is-matched  { opacity: 0.65; transform: rotateY(180deg) scale(0.96); }
.mc-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.mc-back, .mc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.mc-face { transform: rotateY(180deg); }
.mc-back svg, .mc-face svg { width: 100%; height: 100%; }
.memory-hud { padding: 12px 22px var(--safe-bottom); }

@media (max-width: 880px) {
  .memory-board { grid-template-columns: repeat(4, 1fr); width: 100%; }
}

/* Roulette seule sur un écran étroit. L'ancienne règle « une colonne » laissait la roue
   (grid-row: 1 / 3) et la barre de mise (grid-column: 1 / 3) créer une seconde colonne
   implicite : à 390 px le tapis tombait à 2 à 9 px par case. Une seule colonne, qui défile,
   la roue en bandeau compact, la barre de mise en une pile lisible au pouce. */
@media (max-width: 880px) {
  .roulette-felt {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: min-content;
    align-content: start; gap: 12px; padding: 12px 14px var(--safe-bottom);
    height: auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  }
  .roulette-wheel-wrap {
    grid-row: auto; display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 8px; align-items: center; justify-items: start;
  }
  .roulette-wheel { width: 132px; height: 132px; grid-row: 1 / 3; }
  .roulette-result { align-self: end; }
  .roulette-history { max-width: none; justify-content: flex-start; align-self: start; }
  .roulette-table { font-size: 11px; }
  .roulette-bottombar { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .rb-row { flex-wrap: wrap; gap: 8px 12px; }
  .rb-chips { flex-wrap: wrap; }
  .rb-chip { min-height: 44px; min-width: 52px; }
  .rb-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
  .rb-actions .btn { min-height: 46px; min-width: 0; padding-inline: 6px; font-size: 12px; line-height: 1.15; white-space: normal; }
}

/* Téléphone : le tapis vertical (poseTapis dans roulette.js), la roue et la barre de mise
   restent collées en haut et en bas pendant que le tapis défile entre elles. */
.roulette-table.is-vertical {
  grid-template-columns: minmax(44px, 0.95fr) 1.4fr 1.4fr 1.4fr minmax(44px, 0.95fr);
  grid-template-rows: repeat(14, 44px);
  gap: 3px; padding: 6px; font-size: 15px;
  width: min(100%, 460px); justify-self: center; align-self: start;
}
.roulette-table.is-vertical .rt-cell { min-height: 44px; border-radius: 5px; }
.roulette-table.is-vertical .rt-zero { grid-row: 1; grid-column: 2 / 5; }
.roulette-table.is-vertical .rt-outside { font-size: 11px; letter-spacing: 0.04em; }
.roulette-table.is-vertical .rt-cell:hover { filter: none; }
.roulette-table.is-vertical .rt-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.roulette-table.is-vertical .bet-marker { top: 3px; right: 3px; left: auto; transform: none; font-size: 11px; padding: 2px 7px; }
@media (max-width: 640px) {
  .roulette-felt { padding-bottom: 0; }
  .roulette-wheel-wrap {
    position: sticky; top: 0; z-index: 4; margin: -12px -14px 0; padding: 12px 14px 8px;
    background: linear-gradient(180deg, var(--bg-deep) 84%, transparent);
  }
  .roulette-bottombar.glass {
    position: sticky; bottom: 0; z-index: 4; margin: 0 -14px; gap: 6px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
    background: rgba(12, 13, 16, 0.95);
  }
  .roulette-bottombar > .rb-row:first-child .rb-label { display: none; }
  .roulette-bottombar > .rb-row:nth-child(2) { gap: 10px; min-height: 24px; }
  .rb-chips { flex-wrap: nowrap; gap: 4px; width: 100%; justify-content: space-between; }
  .rb-chip { flex: 1 1 0; min-width: 0; }
  .roulette-history { max-height: 52px; overflow: hidden; }
}
/* Téléphone couché : la roue se fait petite, le tapis horizontal garde la place. */
@media (max-width: 880px) and (max-height: 500px) {
  .roulette-wheel { width: 96px; height: 96px; }
}
/* Écran court : la roue défile avec le tapis (elle reprendrait le tiers de l'écran) ; le jeton
   et le bouton « Lancer » restent à portée du pouce. */
@media (max-width: 640px) and (max-height: 700px) {
  .roulette-wheel-wrap { position: static; margin: 0; padding: 0; background: none; }
  .roulette-wheel { width: 104px; height: 104px; }
}

/* ============================================================
   THEME LIGHT — overrides pour BJ / Roulette / Memory / Settings
   Le wrapper et les chrome sont en light Portfolio.
   Les "tables de jeu" (felt central + cartes + roue) gardent
   leur ambiance casino sombre comme un vrai tapis de jeu posé
   sur une table en bois clair.
   ============================================================ */

/* Topbar des jeux en mode light */
.theme-light .game .topbar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.theme-light .game .topbar-brand {
  color: var(--muted-2);
  font-family: var(--font-mono-light);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 11px;
}
.theme-light .game .topbar-brand svg { color: #b89b5e; }
.theme-light .game .topbar-info {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono-light);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.theme-light .game .btn--ghost {
  color: var(--muted-2);
  font-family: var(--font-mono-light);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.theme-light .game .btn--ghost:hover { color: var(--fg); background: var(--paper-2); }
.theme-light .game .btn--icon { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.theme-light .game .btn--icon:hover { background: var(--paper-2); color: var(--fg); }

/* ── Blackjack en light ─────────────────────────────────────── */
.theme-light .bj-game { background: var(--bg); }
.theme-light .bj-felt {
  /* Tapis de jeu : rectangle vert sombre posé sur le fond Portfolio */
  margin: 24px auto;
  width: min(720px, calc(100% - 48px));
  flex: none;
  background:
    radial-gradient(ellipse at 50% 50%, #143c2e 0%, #0e2c22 60%, #081610 100%);
  border-radius: 24px;
  border: 1px solid rgba(184,155,94,0.32);
  box-shadow:
    0 24px 70px -28px rgba(0,0,0,0.42),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(0,0,0,0.06);
  padding: 28px 24px;
}
.theme-light .bj-row-label {
  color: rgba(245,246,250,0.62);
  font-family: var(--font-mono-light);
  font-size: 10px;
  letter-spacing: 0.20em;
}
.theme-light .bj-total {
  background: rgba(0,0,0,0.42);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono-light);
}
.theme-light .bj-mid .pot-label {
  color: rgba(245,246,250,0.55);
  font-family: var(--font-mono-light);
  font-size: 10px;
  letter-spacing: 0.20em;
}
.theme-light .bj-mid .pot-amount {
  color: white;
  font-family: var(--font-display-light);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.theme-light .bj-hand.is-active {
  border-color: rgba(184,155,94,0.6);
  box-shadow: 0 0 0 4px rgba(184,155,94,0.14);
}
.theme-light .bj-hand-total {
  font-family: var(--font-mono-light);
  color: rgba(245,246,250,0.78);
}
.theme-light .bj-tag {
  background: rgba(184,155,94,0.20);
  color: #d6b770;
}

/* HUD (footer du blackjack avec actions) en light Portfolio */
.theme-light .bj-hud {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: 18px 24px var(--safe-bottom);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.theme-light .bj-bet-card {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.theme-light .bj-bet-card::before { display: none; }
.theme-light .bj-bet-card h3 {
  font-family: var(--font-display-light);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.theme-light .bj-bet-card p { color: var(--muted-2); }
.theme-light .bj-bet-card .input {
  background: var(--card); color: var(--fg);
  border-color: var(--line);
}
.theme-light .bj-bet-presets button {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-mono-light);
}
.theme-light .bj-bet-presets button:hover:not([disabled]) {
  background: #0a0a0a; color: var(--bg);
  border-color: #0a0a0a;
}
.theme-light .bj-bet-card .btn--primary {
  background: #0a0a0a; color: var(--bg); border-color: #0a0a0a;
}
.theme-light .bj-bet-card .btn--primary:hover { background: #1a1a1a; }
.theme-light .bj-meta { color: var(--muted-3); }

/* Boutons d'action en light (Tirer/Rester/Doubler/Split, Fold/Call/Raise) */
.theme-light .action-btn {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.theme-light .action-btn:hover { background: var(--paper-2); border-color: var(--line-strong); }
.theme-light .action-btn .label {
  color: var(--muted-2);
  font-family: var(--font-mono-light);
  letter-spacing: 0.12em;
}
.theme-light .action-btn .amount {
  font-family: var(--font-mono-light);
  color: var(--fg);
}
.theme-light .action-btn--call {
  background: rgba(46,122,72,0.10);
  border-color: rgba(46,122,72,0.28);
}
.theme-light .action-btn--call:hover { background: rgba(46,122,72,0.16); }
.theme-light .action-btn--call .label { color: #2e7a48; }
.theme-light .action-btn--fold {
  background: rgba(168,68,58,0.08);
  border-color: rgba(168,68,58,0.24);
}
.theme-light .action-btn--fold:hover { background: rgba(168,68,58,0.14); }
.theme-light .action-btn--fold .label { color: #a8443a; }
.theme-light .action-btn--raise {
  background: rgba(184,155,94,0.10);
  border-color: rgba(184,155,94,0.32);
}
.theme-light .action-btn--raise:hover { background: rgba(184,155,94,0.18); }
.theme-light .action-btn--raise .label { color: #8c733e; }
.theme-light .action-btn--allin {
  background: linear-gradient(180deg, #d6b770, #b89b5e);
  color: #1a1408;
  border-color: rgba(184,155,94,0.6);
}
.theme-light .action-btn--allin .label { color: rgba(26,20,8,0.62); }

/* Bj result en light */
.theme-light .bj-result {
  background: var(--card);
  border: 1px solid var(--line);
}
.theme-light .bj-result-text { color: var(--fg); }

/* ── Roulette en light ──────────────────────────────────────── */
.theme-light .roulette-game { background: var(--bg); }
.theme-light .roulette-felt {
  /* La zone wheel + table reste sombre (vrai tapis de roulette).
     Le bottom bar (jetons, total, actions) passe en Portfolio light. */
  padding: 24px 32px 0;
}
.theme-light .roulette-felt > .roulette-wheel-wrap,
.theme-light .roulette-felt > .roulette-table {
  background: linear-gradient(180deg, #0f2820 0%, #081610 100%);
  border: 1px solid rgba(184,155,94,0.22);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 48px -20px rgba(0,0,0,0.32);
}
.theme-light .roulette-felt > .roulette-wheel-wrap { padding: 24px; }
.theme-light .roulette-result {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.08);
  color: white;
}
.theme-light .roulette-bottombar {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.theme-light .roulette-bottombar::before { display: none; }
.theme-light .rb-label { color: var(--muted-2); }
.theme-light .rb-chip {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--fg);
  font-family: var(--font-mono-light);
}
.theme-light .rb-chip:hover { background: var(--paper); }
.theme-light .rb-chip.is-on  {
  background: #0a0a0a;
  color: var(--bg);
  border-color: #0a0a0a;
}
.theme-light .rb-total { color: #b89b5e; font-family: var(--font-mono-light); }
.theme-light .rb-actions .btn--primary {
  background: #0a0a0a; color: var(--bg); border-color: #0a0a0a;
}
.theme-light .rb-actions .btn--primary[disabled] {
  background: var(--paper-2); color: var(--muted-3); border-color: var(--line);
}
.theme-light .rb-actions .btn--ghost { color: var(--muted); }
.theme-light .rb-actions .btn--ghost:hover { background: var(--paper-2); color: var(--fg); }

/* ── Memory en light ────────────────────────────────────────── */
.theme-light .memory-game { background: var(--bg); }
.theme-light .memory-felt {
  padding: 32px 16px;
  background: var(--bg);
}
.theme-light .memory-empty .bj-bet-card {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.theme-light .memory-empty .bj-bet-card::before { display: none; }
.theme-light .memory-empty h3 {
  color: var(--fg);
  font-family: var(--font-display-light);
}
.theme-light .memory-hud {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: 16px 24px var(--safe-bottom);
}
.theme-light .memory-hud > div span,
.theme-light .memory-hud > div strong {
  color: var(--muted-2) !important;
  font-family: var(--font-mono-light);
  font-size: 11px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.theme-light .memory-hud strong { color: #b89b5e !important; }
.theme-light .memory-hud .bj-result {
  background: var(--card);
  border: 1px solid var(--line);
}
.theme-light .memory-hud .bj-result-text { color: var(--fg); }
.theme-light .memory-hud .bj-result-text strong { color: #2e7a48 !important; }

/* ── Bandeau de fin de main (banner) en light ──────────────── */
.theme-light .endhand-banner {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.34);
}

/* ── Settings en light : déjà override plus haut, on s'assure ─ */
.theme-light .settings-page { background: var(--bg); color: var(--fg); }
.theme-light .settings-page .topbar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.theme-light .settings-page .topbar-brand {
  color: var(--muted);
  font-family: var(--font-mono-light);
}
.theme-light .settings-page .btn--ghost {
  color: var(--muted);
  font-family: var(--font-body-light);
}
.theme-light .settings-page .btn--ghost:hover { color: var(--fg); background: var(--paper-2); }
.theme-light .settings-footer .btn--primary {
  background: #0a0a0a; color: var(--bg); border-color: #0a0a0a;
}
.theme-light .settings-footer .btn--primary:hover { background: #1a1a1a; }

/* ── Bet marker (chip de mise sur table roulette) ──────────── */
.theme-light .bet-marker {
  background: #d6b770;
  color: #1a1408;
}

/* ── Téléphone : aucun champ sous 16 px ═══════════════════════════════════
   En dessous, iOS zoome tout seul au premier tap et laisse la page agrandie.
   La règle nomme la PORTEUSE : c'est `.theme-light .lite-input` (0,2,0) qui
   pose les 15 px, un sélecteur sur `.lite-input` nu ne l'atteindrait jamais.
   Bloc en fin de fichier : une media query n'ajoute aucune priorité, seul
   l'ordre tranche. */
@media (max-width: 760px) {
  .theme-light .lite-input { font-size: 16px; }
  /* Le champ de code d'invitation se lit caractère par caractère : sa taille
     EST son rendu, et la règle qui précède le ramènerait à 16 px. */
  .theme-light .lite-input--code { font-size: 22px; }
}

/* ============================================================
   Comptes et accueil (octobre 2026) : bandeau « sans mot de passe »
   du menu, bloc « Mon compte » des réglages, réglages d'accueil de
   l'administrateur, mot de passe provisoire d'un joueur.
   ============================================================ */

/* Une modale reçoit le focus à son ouverture : elle n'a pas à porter d'anneau. */
.modal:focus { outline: none; }

/* Menu : le compte n'a pas de mot de passe (invitation d'avant) */
.theme-light .casino-notice {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0 0 28px; padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid #b89b5e;
  border-radius: 12px;
}
.theme-light .casino-notice p {
  margin: 0; flex: 1 1 260px;
  font-size: 14.5px; line-height: 1.5; color: var(--fg-soft);
}
.theme-light .casino-notice-btn {
  min-height: 44px; padding: 0 18px;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg); border-radius: 10px;
  font: 600 14px var(--font-body-light); cursor: pointer;
  transition: background 160ms ease;
}
.theme-light .casino-notice-btn:hover { background: #26262a; }

/* Réglages : « Mon compte » */
.theme-light .settings-group .set-value {
  font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-light .acct-form { display: grid; gap: 14px; padding: 12px 0 18px; }
.theme-light .acct-form .field label {
  font-family: var(--font-mono-light);
  font-size: 11px; letter-spacing: 0.10em; color: var(--muted-2);
}
.theme-light .acct-form .input {
  min-height: 46px;
  background: var(--card); color: var(--fg);
  border: 1px solid rgba(10,10,10,0.30);
  font-size: 16px;
  user-select: text; -webkit-user-select: text;
}
.theme-light .acct-form .input:focus {
  outline: 2px solid var(--fg); outline-offset: 1px;
  border-color: var(--fg); box-shadow: none; background: var(--card);
}
.theme-light .acct-form .input[aria-invalid="true"] { border-color: #a8231a; box-shadow: inset 0 0 0 1px #a8231a; }
.theme-light .acct-warn {
  margin: 0; padding: 10px 14px;
  background: var(--paper-2); border-left: 3px solid #b89b5e; border-radius: 8px;
  font-size: 14px; line-height: 1.5; color: var(--fg-soft);
}
.theme-light .acct-msg { margin: 0; font-size: 14px; line-height: 1.45; }
.theme-light .acct-msg:empty { display: none; }
.theme-light .acct-msg.is-ok { color: #1f6b45; }
.theme-light .acct-msg.is-err { color: #a8231a; }
.theme-light .acct-actions { display: flex; justify-content: flex-end; }
.theme-light .acct-actions .btn--primary {
  min-height: 46px;
  background: var(--fg); color: var(--bg); border-color: var(--fg);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  font-family: var(--font-body-light);
}
.theme-light .acct-actions .btn--primary:hover { background: #26262a; transform: none; }

/* Admin : réglages d'accueil */
.theme-light .admin-accueil {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 26px 38px 0;
}
.theme-light .admin-accueil-body {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px 38px; align-items: start;
}
.theme-light .admin-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.theme-light .admin-switch-txt { min-width: 0; }
.theme-light .admin-switch-txt strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.theme-light .admin-switch-txt p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.theme-light .admin-chips label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono-light);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted-2);
}
.theme-light .admin-chips-row { display: flex; align-items: center; gap: 10px; }
.theme-light .admin-chips-row .input {
  width: 100%; max-width: 190px; min-height: 44px;
  background: var(--card); color: var(--fg);
  border: 1px solid rgba(10,10,10,0.30);
  font-family: var(--font-mono-light); font-size: 16px;
  user-select: text; -webkit-user-select: text;
}
.theme-light .admin-chips-row .input:focus {
  outline: 2px solid var(--fg); outline-offset: 1px; border-color: var(--fg); box-shadow: none;
}
.theme-light .admin-chips-row .input[aria-invalid="true"] { border-color: #a8231a; }
.theme-light .admin-chips-row .btn--primary {
  min-height: 44px;
  background: var(--fg); color: var(--bg); border-color: var(--fg);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  font-family: var(--font-body-light);
}
.theme-light .admin-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted-3); }
.theme-light .toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.theme-light .toggle[disabled] { opacity: 0.5; cursor: progress; }

/* Admin : la liste des joueurs gagne un bouton et un badge */
.theme-light .ch-pill--warn { background: rgba(168,35,26,0.08); color: #a8231a; }
.theme-light .admin-row-name { flex-wrap: wrap; }
.theme-light .admin-row-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (pointer: coarse) {
  .theme-light .admin-row-actions button,
  .theme-light .admin-section-head button { min-height: 44px; }
}
@media (max-width: 880px) {
  .theme-light .admin-accueil { padding: 20px 18px 0; }
  .theme-light .admin-accueil-body { grid-template-columns: minmax(0, 1fr); }
  /* Le tableau de bord n'avait pas de repli téléphone en thème clair : ses règles à 880 px
     visent le thème sombre (0,1,0) et `.theme-light .admin-grid` (0,2,0) les battait, donc
     « Joueurs » et « Invitations » restaient côte à côte, dans deux colonnes de 100 px. */
  .theme-light .admin-topbar { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
  .theme-light .admin-h1 { font-size: 26px; }
  .theme-light .admin-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 24px 18px 34px; }
  .theme-light .admin-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; }
  .theme-light .admin-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Invitations : « Copier » et « Révoquer » étaient des boutons de verre (texte blanc) posés sur
   une carte claire, donc invisibles. Même vocabulaire que les boutons de la liste des joueurs. */
.theme-light .admin-invite .btn {
  min-height: 34px; padding: 0 12px;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 500 12px/1 var(--font-body-light); letter-spacing: -0.005em; cursor: pointer;
}
.theme-light .admin-invite-code { color: var(--muted-3); font-size: 12.5px; }
.theme-light .admin-invite .btn:hover { background: var(--paper-2); border-color: var(--line-strong); }
.theme-light .admin-invite .btn--icon { width: 34px; padding: 0; font-size: 18px; }
.theme-light .admin-invite .btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (pointer: coarse) {
  .theme-light .admin-invite .btn { min-height: 44px; }
  .theme-light .admin-invite .btn--icon { width: 44px; }
}

/* Mot de passe provisoire : sélectionnable d'un geste (le corps interdit la sélection) */
.theme-light .invite-code-big code {
  font-family: var(--font-mono-light); font-size: 22px; font-weight: 600; letter-spacing: 0.14em;
  color: #6b5420; user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}

/* Téléphone : les champs ajoutés restent à 16 px (iOS zoome sinon au premier tap).
   Le bloc nomme les porteuses : `.theme-light .acct-form .input` (0,3,0) bat un
   sélecteur nu, et il est en fin de fichier, car seul l'ordre tranche. */
@media (max-width: 760px) {
  .theme-light .acct-form .input,
  .theme-light .admin-chips-row .input { font-size: 16px; }
}