/* ─────────────────────────────────────────────────────────────────────
   Disable iOS double-tap-to-zoom on interactive content.
   `touch-action: manipulation` preserves single tap, pan (scroll), and
   pinch-to-zoom (accessibility), but turns off the legacy double-tap
   zoom gesture. As a side benefit, this also removes the 300 ms tap
   latency that older iOS versions added to detect double-taps.
   Applies globally because every clickable surface in the app should
   feel snappy and stable (avatar picker, reaction buttons, action
   buttons during a hand, etc.).
   ───────────────────────────────────────────────────────────────────── */
html { touch-action: manipulation; }

:root {
  --felt:       #182e1a;
  --felt-mid:   #1e3820;
  --felt-hi:    #254526;
  --panel:      rgba(8,18,10,0.88);
  --panel-hi:   rgba(14,28,16,0.9);
  --gold:       #c8a84a;
  --gold-hi:    #e0c070;
  --gold-dim:   #7a6428;
  --cream:      #ede8dc;
  --text:       #9aaa92;
  --text-hi:    #c8d8c0;
  --red:        #c0392b;
  --green:      #27ae60;
  --orange:     #e67e22;
  --border:     rgba(200,168,74,0.25);
  --border-hi:  rgba(200,168,74,0.65);
}

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

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Inconsolata', monospace;
  background: var(--felt);
  color: var(--text);
}

body {
  background-image:
    radial-gradient(ellipse 140% 70% at 50% 0%, rgba(50,100,50,0.18) 0%, transparent 65%),
    repeating-linear-gradient(45deg, transparent, transparent 3px,
      rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 6px);
}

/* ─── SCREENS ─── */
.screen { display: none; height: 100vh; height: 100dvh; }
:fullscreen            { background: var(--felt); }
:-webkit-full-screen   { background: var(--felt); }
:-moz-full-screen      { background: var(--felt); }
.screen.active { display: flex; }

/* ══════════════════════════════════════════
   CONNECT SCREEN
══════════════════════════════════════════ */
#s-connect {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 16px;
}

.form-card, .card {
  background: #060e08;
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  padding: 20px 22px;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
}

.card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--gold-dim);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-logo {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.card-suits-row { font-size: 1.1rem; letter-spacing: 0.2em; opacity: 0.7; margin-bottom: 4px; }
.card-suits-row .r { color: var(--red); }
.card-title-big {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  line-height: 1;
}
.card-subtitle { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text); }

.sel-wrap { position: relative; }
.sel-wrap select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  background: #0c1e0e;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--cream);
  padding: 9px 32px 9px 11px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.88rem;
  outline: none; cursor: pointer;
}
.sel-wrap select:focus { border-color: var(--gold); }
.sel-wrap select option { background: #0c1e0e; color: var(--cream); }
.sel-arr { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; font-size: 0.8rem; }

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.av-btn {
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 2px;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
  line-height: 1.2;
  text-align: center;
  color: var(--text-hi);
}
.av-btn:hover { border-color: var(--gold-dim); transform: scale(1.1); background: rgba(200,168,74,0.08); }
.av-btn.selected { border-color: var(--gold); background: rgba(200,168,74,0.18); box-shadow: 0 0 6px rgba(200,168,74,0.3); }
.av-btn.av-none { font-size: 0.72rem; font-family: 'Cinzel', serif; color: var(--text); letter-spacing: 0.05em; }

/* Emoji avatar dans le siège */
.seat-avatar.emoji-av .seat-initial { font-size: 1.05em; line-height: 1; }

/* ══ POPUP AVATAR ══ */
#avatar-popup {
  background: rgba(4,10,6,0.98);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  animation: slideDown 0.2s ease;
}
.avp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
}
.avp-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px;
}
.avp-btn {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.12s, transform 0.1s, background 0.12s;
  padding: 0;
}
.avp-btn:hover { border-color: var(--gold-dim); transform: scale(1.15); background: rgba(200,168,74,0.1); }
.avp-btn.selected { border-color: var(--gold); background: rgba(200,168,74,0.2); }
.avp-none { font-size: 0.7rem !important; font-family: 'Cinzel',serif; color: var(--text); }
#av-trigger.has-avatar { border-color: var(--gold-dim); background: rgba(200,168,74,0.1); }

/* Emoji avatar dans le siège */
.seat-avatar.emoji-av .seat-initial { font-size: 1.1em; line-height: 1; }

.tls-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 0.76rem; color: var(--text); line-height: 1.4; }

.row2 { display: flex; gap: 12px; }
.row2 .f:first-child { flex: 1; }
.row2 .f-sm { width: 110px; }

.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.f input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 9px 11px;
  color: var(--cream);
  font-family: 'Inconsolata', monospace;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.f input:focus {
  border-color: var(--gold);
  background: rgba(200,168,74,0.05);
}

.btn-primary {
  background: var(--gold);
  color: #110900;
  border: none;
  padding: 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(200,168,74,0.2);
}
.btn-primary:hover { background: var(--gold-hi); box-shadow: 0 6px 24px rgba(200,168,74,0.35); }
.btn-primary:active { transform: scale(0.98); }

.status {
  min-height: 18px;
  font-size: 0.78rem;
  text-align: center;
  color: var(--text);
  transition: color 0.2s;
}
.status.ok  { color: var(--green); }
.status.err { color: var(--red); }

/* ══════════════════════════════════════════
   LOBBY SCREEN
══════════════════════════════════════════ */
#s-lobby { flex-direction: column; overflow-y: auto; }
#create-form.open { display: block !important; }

/* Header */
.header {
  display: flex;
  align-items: center;
  padding: clamp(4px,1.2vh,10px) clamp(8px,2vw,20px);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  gap: clamp(4px,1.2vw,14px);
  flex-shrink: 0;
  min-height: 36px;
  overflow: hidden;
}

.header-brand {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.7rem, 2vw, 1.05rem);
  color: var(--gold);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-brand span { opacity: 0.6; font-size: 1.1em; }

.header-pills {
  flex: 1;
  display: flex;
  gap: clamp(3px, 1vw, 10px);
  min-width: 0;
  overflow: hidden;
}

.pill {
  background: rgba(200,168,74,0.1);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: clamp(1px,0.4vh,3px) clamp(4px,1vw,10px);
  font-size: clamp(0.58rem, 1.4vw, 0.75rem);
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-btn.active { background: rgba(200,168,74,0.2) !important; border-color: var(--gold-dim) !important; color: var(--gold) !important; }
.btn-watch {
  background: rgba(52,152,219,0.12);
  border: 1px solid rgba(52,152,219,0.35);
  color: #7ec8e3;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-watch:hover { background: rgba(52,152,219,0.25); }
.btn-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: clamp(3px,0.6vh,5px) clamp(6px,1.2vw,14px);
  font-family: 'Inconsolata', monospace;
  font-size: clamp(0.62rem, 1.4vw, 0.78rem);
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sm:hover { border-color: var(--border-hi); color: var(--text-hi); }

/* Uniformisation hauteur des boutons dans tous les headers */
.header .btn-sm {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0.75rem;
  line-height: 1;
}
/* Bouton carré (icône seule) */
.header .btn-icon {
  width: 30px;
  padding: 0;
}

/* Body */
.lobby-body {
  flex: 1;
  min-height: 0;  /* allow shrinking */
  display: flex;
  overflow: hidden;
}

/* ── Games panel ── */
.pane-games {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.create-bar {
  display: flex; gap: 8px; padding: 10px 12px;
  background: rgba(39,174,96,0.06);
  border-bottom: 1px solid var(--border);
}
.btn-create {
  flex: 1; background: rgba(39,174,96,0.15);
  border: 1px solid var(--green); color: var(--green);
  padding: 9px 14px; font-family: 'Cinzel', serif;
  font-size: 0.8rem; font-weight: 700; cursor: pointer; border-radius: 4px;
}
.btn-create:hover { background: rgba(39,174,96,0.28); }
.btn-create:disabled { opacity: 0.5; cursor: default; }
.btn-create-manual {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; font-size: 0.78rem;
  cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.btn-create-manual:hover { background: rgba(255,255,255,0.1); }
.create-form { padding: 12px 14px; background: rgba(8,18,10,0.98); border-bottom: 1px solid var(--border); }
.create-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; margin-bottom: 0; }
.cf { display: flex; flex-direction: column; gap: 3px; }
.cf-sm { min-width: 80px; }
.cf label { font-size: 0.55rem; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf input, .cf select { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 2px; color: var(--cream); padding: 5px 7px; font-family: 'Inconsolata', monospace; font-size: 0.82rem; outline: none; width: 100%; }
.cf input:focus, .cf select:focus { border-color: var(--gold); }

.pane-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.games-scroll {
  flex: 1;
  overflow-y: auto;
}

.game-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(200,168,74,0.07);
  cursor: pointer;
  transition: background 0.12s;
}
.game-row:hover { background: rgba(255,255,255,0.03); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-open   { background: var(--green); box-shadow: 0 0 6px rgba(39,174,96,0.5); }
.dot-run    { background: var(--orange); }
.dot-closed { background: #555; }

.game-info { flex: 1; min-width: 0; }
.game-name {
  color: var(--text-hi);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-meta {
  font-size: 0.72rem;
  color: var(--text);
  margin-top: 2px;
  display: flex;
  gap: 10px;
}
.game-type  { color: var(--gold-dim); }
.game-count { color: var(--gold); font-weight: 500; }

.empty {
  padding: 48px;
  text-align: center;
  color: rgba(154,170,146,0.35);
  font-size: 0.82rem;
  line-height: 2;
}

/* ── Chat panel ── */
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.msg {
  font-size: 0.8rem;
  line-height: 1.45;
  word-break: break-word;
}
.msg .who   { color: var(--gold); }
.msg .txt   { color: var(--text-hi); }
.msg.sys    { color: rgba(154,170,146,0.45); font-size: 0.75rem; font-style: italic; }
.msg.reaction { font-size: 1.1rem; opacity: 0.85; font-style: italic; }
.msg.bc     { color: var(--gold-dim); border-left: 2px solid var(--gold-dim); padding-left: 6px; }
.msg.mine .who { color: var(--green); }

.chat-input {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.chat-input input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 7px 10px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.82rem;
  outline: none;
  border-radius: 2px;
}
.chat-input input:focus { border-color: var(--gold); }
.chat-send {
  background: var(--gold);
  color: #110900;
  border: none;
  padding: 0 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s;
}
.chat-send:hover { background: var(--gold-hi); }

/* Scrollbars */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Mobile responsive */
/* ══════════════════════════════════
/* ══ POT INFO BAR ══ */
#pot-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 14px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 24px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}
.pot-side {
  font-size: clamp(0.6rem, 1.4vw, 0.72rem);
  color: var(--text);
  min-width: 60px;
}
.pot-right { text-align: right; }
.pot-center {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  flex: 1;
}

/* ══ RESPONSIVE OVAL SIZE via CSS custom props ══ */
:root { --oval-w: 440px; --oval-h: 180px; }
@media (min-width: 1100px)  { :root { --oval-w: 520px; --oval-h: 210px; } }
@media (max-width: 900px)   { :root { --oval-w: 320px; --oval-h: 132px; } }
@media (max-width: 700px)   { :root { --oval-w: 240px; --oval-h: 100px; } }
@media (max-width: 500px) and (orientation: portrait)  { :root { --oval-w: min(58vw,240px); --oval-h: min(24vw,100px); } }
@media (max-height: 500px) and (orientation: landscape){ :root { --oval-w: min(40vw,240px); --oval-h: min(18vh,88px); } }

   RESPONSIVE — orientation-aware
══════════════════════════════════ */



/* ── Confetti rain ── */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: fixed;
  width: 10px; height: 10px;
  top: -20px;
  pointer-events: none;
  z-index: 700;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

/* ── Urgence (≤5s) — pulsation rouge ── */
@keyframes urgencyPulse {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(192,57,43,0); }
  50%     { box-shadow: inset 0 0 60px 10px rgba(192,57,43,0.22); }
}
#s-game.urgent { animation: urgencyPulse 0.6s ease-in-out infinite; }

/* ── Transition lobby → table ── */
@keyframes tableEnter {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
#s-game.entering { animation: tableEnter 0.45s cubic-bezier(.2,.8,.3,1) both; }

/* ── Hover fan mes cartes ── */
.pb-cards:hover .pk:first-child {
  transform: rotate(-8deg) translateY(-6px) translateX(-4px);
  transition: transform 0.2s ease;
  z-index: 2;
}
.pb-cards:hover .pk:last-child {
  transform: rotate(8deg) translateY(-6px) translateX(4px);
  transition: transform 0.2s ease;
  z-index: 2;
}
.pb-cards .pk { transition: transform 0.2s ease; z-index: 1; }

/* ── Joueur qui réfléchit — points animés ── */
@keyframes thinkDot {
  0%,80%,100% { opacity: 0.2; transform: translateY(0); }
  40%         { opacity: 1;   transform: translateY(-3px); }
}
.thinking-dots { display: inline-flex; gap: 2px; margin-left: 4px; }
.thinking-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); display: inline-block;
  animation: thinkDot 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }

/* ── Élimination joueur ── */
@keyframes eliminatePlayer {
  0%   { opacity: 1;  transform: translate(-50%,-50%) scale(1)  rotate(0deg); }
  40%  { opacity: 0.7; transform: translate(-50%,-50%) scale(1.1) rotate(-5deg); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(0.3) rotate(15deg); }
}
.seat.eliminated { animation: eliminatePlayer 0.8s ease-in forwards; pointer-events: none; }

/* ── Pot énorme — glow rouge/orange ── */
@keyframes bigPotGlow {
  0%,100% { color: var(--gold); text-shadow: 0 0 8px rgba(200,168,74,0.4); }
  50%     { color: #ff8c42;     text-shadow: 0 0 20px rgba(255,100,30,0.7); }
}
.pot-huge { animation: bigPotGlow 1.2s ease-in-out infinite !important; }

/* ── River — révélation dramatique ── */
.pk-river {
  animation: cardFlip 0.55s cubic-bezier(.2,.9,.3,1) both !important;
  animation-delay: 0.1s !important;
}

/* ── Showdown — flip cartes adversaires ── */
.pk-showdown {
  animation: cardFlip 0.32s cubic-bezier(.3,0,.2,1) both;
}

/* ── Reset action fade entre mains ── */
@keyframes actionFadeOut {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}
.seat-action-label.fading {
  animation: actionFadeOut 0.4s ease-out forwards;
}

/* ── Dealer badge volant ── */
.dealer-badge-fly {
  position: fixed;
  background: var(--gold); color: #110900;
  border-radius: 50%; width: 18px; height: 18px;
  font-size: 0.55rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 600;
  transition: left 0.6s cubic-bezier(.4,0,.2,1),
              top  0.6s cubic-bezier(.4,0,.2,1),
              opacity 0.2s ease 0.55s;
}

/* ── All-in chips multi ── */
@keyframes allInChip {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);       opacity: 1; }
  60%  { transform: translate(var(--ax),var(--ay)) scale(1.3) rotate(var(--ar)); opacity: 1; }
  100% { transform: translate(var(--bx),var(--by)) scale(0.6) rotate(var(--ar)); opacity: 0; }
}
.allin-chip {
  position: fixed;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none; z-index: 550;
  animation: allInChip 0.7s cubic-bezier(.3,0,.7,1) forwards;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP LARGE (≥ 900px) — Agrandissement table + cartes
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── Ovale de la table ── */
  .felt-oval {
    width:  min(680px, 72vw) !important;
    height: min(300px, min(36vw, calc(100dvh - 300px))) !important;
  }

  /* ── Cartes communes (flop/turn/river) ── */
  .comm-row .pk {
    width: 72px !important;
    height: 104px !important;
    font-size: 1.55rem !important;
    border-radius: 8px !important;
  }
  .comm-row { gap: 9px !important; }

  /* ── Mes cartes dans la player-bar ── */
  .pb-cards .pk {
    width: 62px !important;
    height: 90px !important;
    font-size: 1.35rem !important;
  }
  .pb-cards { gap: 8px !important; }

  /* ── Avatars des joueurs ── */
  .seat-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
  }
  .seat-avatar.is-bot .seat-initial { font-size: 1.1em !important; }
  .seat-name   { font-size: 0.75rem !important; max-width: 90px !important; }
  .seat-money  { font-size: 0.72rem !important; }
  .seat-bet    { font-size: 0.6rem !important; }
  .seat-action-label { font-size: 0.58rem !important; }
  .seat { min-width: 60px !important; max-width: 95px !important; }

  /* Dealer badge + blind badges un peu plus grands */
  .seat.dealer .seat-avatar::after {
    width: 16px !important; height: 16px !important;
    font-size: 0.56rem !important;
    top: -5px !important; right: -5px !important;
  }
  .blind-badge {
    width: 16px !important; height: 16px !important;
    font-size: 0.5rem !important;
    top: -5px !important; left: -5px !important;
  }

  /* Cartes adversaires (xsm → un peu plus grandes) */
  .seat .pk.xsm {
    width: 26px !important;
    height: 38px !important;
    font-size: 0.64rem !important;
  }

  /* ── Scaler : plus de marge pour les sièges qui débordent ── */
  .table-scaler { padding: 80px 110px !important; }

  /* ── Player bar — plus haute, infos plus lisibles ── */
  .pb-avatar {
    width: 46px !important; height: 46px !important;
    font-size: 1.15rem !important;
  }
  .pb-name  { font-size: 0.9rem !important; }
  .pb-money { font-size: 0.8rem !important; }
  .pb-info  { min-width: 110px !important; }

  /* ── Timer SVG autour de l'avatar ── */
  .seat-timer {
    width: 170% !important; height: 170% !important;
    top: -35% !important; left: -35% !important;
  }

  /* ── Badge décompte : plus grand et écarté de l'arc sur grand écran ── */
  .seat-timer-badge {
    font-size: 0.88rem !important;
    margin-top: 16px !important;
    padding: 2px 7px !important;
    min-width: 32px !important;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .blind-chip  { width: 16px !important; height: 16px !important; top: -9px !important; left: -9px !important; }
  .dealer-chip { width: 16px !important; height: 16px !important; top: -9px !important; right: -9px !important; }
  .seat-avatar { width: 28px; height: 28px; font-size: 0.7rem; }
  .seat-name,.seat-money,.seat-action-label,.seat-bet { font-size: 0.48rem; }
.pill { font-size: 0.6rem; padding: 2px 5px; }
  .pk { width: 36px; height: 52px; font-size: 0.86rem; }
  .pk.sm { width: 28px; height: 40px; font-size: 0.66rem; }
  /* table-zone padding handled by table-scaler */
  /* Oval moins large : libère de l'espace pour les joueurs sur les côtés */
  .felt-oval { width: min(400px, 72vw) !important; }
}
@media (max-width: 500px) and (orientation: portrait) {
  /* Oval: compact to fit 10 seats */
  .felt-oval::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50% / 42%;
  border: 2px solid rgba(255,255,255,0.07);
  pointer-events: none;
}
.felt-oval { overflow: visible; width: 68vw; height: 42vw; min-height: 130px; }

  /* Cards */
  .pk { width: 28px; height: 40px; font-size: 0.68rem; }
  .pk.sm { width: 22px; height: 32px; font-size: 0.54rem; }

  /* Chips : très excentrés pour éviter le chevauchement avec le timer */
  .blind-chip  { width: 13px !important; height: 13px !important; top: -11px !important; left: -11px !important; }
  .dealer-chip { width: 13px !important; height: 13px !important; top: -11px !important; right: -11px !important; }
  /* Seats: tiny for 10-player tables */
  .seat-avatar { width: 18px; height: 18px; font-size: 0.46rem; }
  .seat-name { font-size: 0.36rem; }
  .seat-money,.seat-action-label,.seat-bet { font-size: 0.3rem; }
  .seat { min-width: 26px; max-width: 40px; gap: 0px; }
  .comm-row { gap: 2px; }

  /* Player bar */
  .player-bar-left { padding: 4px 10px; gap: 7px; }
  .pb-avatar { width: 28px; height: 28px; font-size: 0.72rem; }
  .pb-name { font-size: 0.68rem; }
  .pb-money { font-size: 0.58rem; }
  .pb-info { min-width: 60px; }

  /* table padding via scaler */
  /* Actions */
  .btn-action { padding: 8px 10px; font-size: 0.76rem; }
  .pct-row .btn-pct { flex: 1; padding: 10px 4px; font-size: 0.76rem; }
  .raise-row .raise-input { flex: 1; padding: 10px 6px; font-size: 0.84rem; }
  .my-zone { padding: 5px 8px; }
  .pot-bar { font-size: 0.7rem; }

.header-brand { font-size: 0.85rem; }
  #g-blind { display: none; }
}
  .btn-action { padding: 12px 14px; font-size: 0.84rem; flex: 1; min-width: 80px; text-align: center; }
  .pct-row { display: flex; gap: 5px; width: 100%; }
  .pct-row .btn-pct { flex: 1; padding: 10px 4px; font-size: 0.76rem; }
  .raise-row { display: flex; gap: 5px; flex: 2; min-width: 160px; }
  .raise-row .raise-input { flex: 1; padding: 10px 6px; font-size: 0.84rem; }
  .btn-allin { flex: 1.5; }
#g-blind { display: none; }
}

/* ── Phone LANDSCAPE (wide, short) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .blind-chip  { width: 14px !important; height: 14px !important; top: -10px !important; left: -10px !important; }
  .dealer-chip { width: 14px !important; height: 14px !important; top: -10px !important; right: -10px !important; }
  /* Oval: small, left side */
  .felt-oval::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50% / 42%;
  border: 2px solid rgba(255,255,255,0.07);
  pointer-events: none;
}
.felt-oval { overflow: visible; width: 52vw; height: 22vh; min-height: 100px; }
  .pk { width: 28px; height: 40px; font-size: 0.68rem; }
  .pk.sm { width: 22px; height: 32px; font-size: 0.56rem; }
  .comm-row { gap: 2px; }
  .seat-avatar { width: 24px; height: 24px; font-size: 0.62rem; }
  .seat-name,.seat-money,.seat-action-label { font-size: 0.42rem; }

  /* Fixed bars: very compact */
  .pot-bar { font-size: 0.65rem; padding: 1px 0; }
  .my-zone {
    bottom: 44px !important;
    padding: 3px 6px !important;
  }
  .player-bar { padding: 2px 6px !important; }
  .player-bar-left { padding: 2px 8px; gap: 5px; }
  .pb-avatar { width: 22px; height: 22px; font-size: 0.58rem; }
  .pb-name { font-size: 0.58rem; }
  .pb-money { font-size: 0.5rem; }
  .pb-info { min-width: 45px; }
  .pb-cards .pk { width: 22px; height: 32px; font-size: 0.56rem; }

  /* Actions: horizontal, compact */
  .action-grid { flex-direction: row !important; flex-wrap: wrap; gap: 3px; max-width: 100%; }
  .action-top-row { flex: none; display: flex; gap: 3px; }
  .action-top-row .btn-action { padding: 6px 10px; font-size: 0.68rem; }
  .pct-row { flex: none; gap: 4px; }
  .btn-pct {
    padding: 9px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    border-width: 1.5px;
  }
  .raise-row { flex: none; gap: 3px; }
  .raise-input { width: 52px; padding: 5px 4px; font-size: 0.68rem; }
  .btn-action { padding: 6px 10px; font-size: 0.68rem; }

.header { padding: 2px 6px; }
.pill { font-size: 0.56rem; padding: 1px 4px; }
  #g-blind, #g-players { display: none; }
  .game-area { padding-bottom: 90px !important; }
}



/* ══ GAME HEADER — OVERFLOW MENU MOBILE ══ */
#s-game .header {
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  overflow: visible;
}

/* Bouton ⋯ : caché sur desktop */
#g-overflow-btn { display: none; }

/* Menu déroulant */
#g-overflow-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 200;
  background: rgba(8,18,10,0.98);
  border: 1px solid var(--border-hi);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 6px 5px;
  min-width: 150px;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7);
}
#g-overflow-menu.open { display: flex; }
#g-overflow-menu .btn-sm {
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  border-radius: 3px;
  font-size: 0.8rem;
  justify-content: flex-start;
}
#g-overflow-menu .btn-sm:hover {
  background: rgba(255,255,255,0.06);
}

/* Sur mobile : cacher les boutons secondaires, montrer ⋯ */
@media (max-width: 540px) {
  #g-overflow-btn { display: inline-flex !important; align-items: center; }
  #fs-btn-game,
  #lang-toggle-game,
  #log-toggle-btn,
  #admin-start-btn,
  #admin-close-btn { display: none !important; }

  /* Hauteur uniforme pour tous les btn-sm du header jeu */
  #s-game .header .btn-sm {
    height: 30px;
    padding: 0 9px;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  #s-game .header-brand {
    font-size: 0.78rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #s-game .header-pills { display: none; }
  #s-game .header { gap: 4px; padding: 3px 8px; }
}


/* ═══════════════════════════════════════════════════════
   ANIMATIONS DE JEU
   ═══════════════════════════════════════════════════════ */

/* ── Distribution des cartes (hole cards) ── */
@keyframes dealCard {
  0%   { transform: translateY(60px) rotate(-8deg) scale(0.6); opacity: 0; }
  60%  { transform: translateY(-4px) rotate(1deg) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}
.pk-deal {
  animation: dealCard 0.38s cubic-bezier(.2,.8,.3,1) both;
}
.pk-deal:nth-child(2) { animation-delay: 0.15s; }

/* ── Flip cartes communes (amélioré) ── */
@keyframes cardFlip {
  0%   { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  55%  { transform: rotateY(-6deg) scale(1.06); opacity: 1; }
  80%  { transform: rotateY(3deg) scale(0.99); }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.pk-flip { animation: cardFlip 0.35s cubic-bezier(.3,0,.2,1) both; }
.pk-flip:nth-child(1) { animation-delay: 0s; }
.pk-flip:nth-child(2) { animation-delay: 0.09s; }
.pk-flip:nth-child(3) { animation-delay: 0.18s; }
.pk-flip:nth-child(4) { animation-delay: 0.27s; }
.pk-flip:nth-child(5) { animation-delay: 0.36s; }

/* ── Joueur actif — anneau pulsant ── */
@keyframes activeRing {
  0%   { box-shadow: 0 0 0 0 rgba(200,168,74,0.7), 0 0 12px rgba(200,168,74,0.4); }
  50%  { box-shadow: 0 0 0 5px rgba(200,168,74,0), 0 0 20px rgba(200,168,74,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(200,168,74,0.7), 0 0 12px rgba(200,168,74,0.4); }
}
.seat.active .seat-avatar {
  animation: activeRing 1.2s ease-in-out infinite !important;
}

/* ── Mon tour — barre actions pulse ── */
@keyframes myTurnBorder {
  0%,100% { border-top-color: var(--gold); box-shadow: 0 -3px 18px rgba(200,168,74,0.25); }
  50%     { border-top-color: #ffe066;    box-shadow: 0 -3px 32px rgba(200,168,74,0.55); }
}
.my-zone.my-turn-active {
  animation: myTurnBorder 1.5s ease-in-out infinite;
}

/* ── Gagnant — explosion d'étoiles ── */
@keyframes starPop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg);   opacity: 1; }
  60%  { transform: translate(var(--tx),var(--ty)) scale(1) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0.3) rotate(var(--rot)); opacity: 0; }
}
.win-star {
  position: fixed;
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 600;
  animation: starPop 1.1s cubic-bezier(.2,.8,.3,1) forwards;
  left: 50%; top: 40%;
}

/* ── Action joueur — badge flash ── */
@keyframes actionFlash {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.seat-action-label.flash {
  animation: actionFlash 0.3s ease-out both;
}

/* ── Pot — comptage animé ── */
@keyframes potBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); color: #ffe066; }
  100% { transform: scale(1); }
}
.pot-bump { animation: potBump 0.35s ease-out; }

/* ── Pli (fold) — carte qui tombe ── */
@keyframes foldCard {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(30px) rotate(15deg); opacity: 0; }
}
.pk-fold { animation: foldCard 0.28s ease-in forwards; }

/* ── Jeton volant ── */
.flying-chip {
  position: fixed;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066, #c8a820);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.3);
  font-size: 0.4rem; color: #3a2000; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 500;
  transition: left 0.5s cubic-bezier(.4,0,.2,1),
              top  0.5s cubic-bezier(.25,0.46,0.45,0.94),
              opacity 0.18s ease 0.42s,
              transform 0.5s ease;
}

/* ══ CARD FLIP ANIMATION — (replaced above) ══ */
@keyframes _cardFlip_unused {
  0%   { transform: rotateY(90deg) scale(0.85); opacity: 0; }
  60%  { transform: rotateY(-8deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0deg)  scale(1);    opacity: 1; }
}
.pk-flip { animation: cardFlip 0.32s cubic-bezier(.4,0,.2,1) both; }
.pk-flip:nth-child(2) { animation-delay: 0.07s; }
.pk-flip:nth-child(3) { animation-delay: 0.14s; }
.pk-flip:nth-child(4) { animation-delay: 0.21s; }
.pk-flip:nth-child(5) { animation-delay: 0.28s; }

/* ══ CHIP ANIMATION ══ */
.flying-chip {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c040, #c8a820);
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  font-size: 0.45rem; color: #3a2000; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 500;
  transition: left 0.55s cubic-bezier(.4,0,.2,1),
              top  0.55s cubic-bezier(.4,0,.2,1),
              opacity 0.2s ease 0.45s,
              transform 0.55s ease;
}

/* ══ HAND STRENGTH DISPLAY ══ */
#hand-strength {
  /* Pastille centrée au-dessus des boutons dans my-zone */
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 2px 10px;
  background: rgba(4,10,6,0.92);
  border-radius: 20px;
  border: 1px solid rgba(200,168,74,0.3);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color 0.3s ease, border-color 0.3s ease;
  z-index: 28;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}

/* ══ PANNEAU RÉACTIONS FLOTTANT (header) ══ */
#g-reaction-panel {
  flex-direction: column;
  background: rgba(4,10,6,0.98);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px 12px;
  flex-shrink: 0;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.react-panel-title {
  font-size: 0.52rem;
  color: var(--gold-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.react-panel-close {
  background: none; border: none; color: var(--text);
  cursor: pointer; font-size: 0.9rem; padding: 0 2px; line-height: 1;
}
.react-grid {
  display: grid;
  grid-template-columns: repeat(13, 36px); /* 13 colonnes de 36px */
  gap: 3px;
  justify-content: center;
}
@media (max-width: 900px) {
  .react-grid { grid-template-columns: repeat(9, 36px); }
}
@media (max-width: 600px) {
  .react-grid { grid-template-columns: repeat(6, 32px); }
}
.react-btn {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 1.3rem;   /* emoji plus grand */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, background 0.12s, border-color 0.12s;
  position: relative;
  padding: 0;          /* pas de padding → cellule compacte */
  width: 36px;         /* taille fixe petite */
  height: 36px;
}
@media (max-width: 600px) {
  .react-btn { font-size: 1.1rem; width: 32px; height: 32px; }
}
.react-btn:hover {
  background: rgba(200,168,74,0.15);
  border-color: var(--gold-dim);
  transform: scale(1.2);
}
.react-btn:active { transform: scale(0.92); }
.react-btn .rc {
  position: absolute;
  bottom: 1px; right: 3px;
  font-size: 0.45rem;
  font-family: monospace;
  color: var(--gold);
  line-height: 1;
  pointer-events: none;
}

/* Ancien .reaction-bar (dans chat) — masqué */
/* ══ RÉACTIONS RAPIDES ══ */
.reaction-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(4,10,6,0.95);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.reaction-bar-label {
  font-size: 0.55rem;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 1px;
  opacity: 0.6;
}
.reaction-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
  display: flex; align-items: center; gap: 4px;
  line-height: 1;
  position: relative;
  overflow: visible;
}
.reaction-btn:hover {
  background: rgba(200,168,74,0.15);
  border-color: var(--gold-dim);
  transform: scale(1.15);
}
.reaction-btn:active { transform: scale(0.92); }
.reaction-btn .react-count {
  font-size: 0.6rem;
  font-family: monospace;
  color: var(--gold);
  min-width: 10px;
}

/* Emoji flottant animé au-dessus de la table */
@keyframes floatReaction {
  0%   { transform: translateY(0)  scale(0.5) rotate(-8deg); opacity: 0; }
  15%  { transform: translateY(-20px) scale(1.3) rotate(5deg);  opacity: 1; }
  70%  { transform: translateY(-120px) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(-180px) scale(0.8) rotate(8deg); opacity: 0; }
}
.floating-reaction {
  position: fixed;
  font-size: 2.2rem;
  pointer-events: none;
  z-index: 650;
  animation: floatReaction 2.2s cubic-bezier(.2,.8,.3,1) forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Badge réaction sur avatar joueur */
@keyframes reactionBadge {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  30%  { transform: scale(1.3) rotate(5deg);  opacity: 1; }
  70%  { transform: scale(1)   rotate(0deg);  opacity: 1; }
  100% { transform: scale(0.9) rotate(0deg);  opacity: 0; }
}
.seat-reaction {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  pointer-events: none;
  animation: reactionBadge 2.5s ease forwards;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* ══ RECONNECT BANNER ══ */
#reconnect-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: rgba(192,57,43,0.95);
  color: #fff; text-align: center;
  padding: 6px 12px; font-size: 0.8rem;
  font-family: 'Cinzel', serif; letter-spacing: 0.08em;
  display: none; align-items: center; justify-content: center; gap: 10px;
  animation: fadeIn 0.3s ease;
}
#reconnect-banner.visible { display: flex; }
#reconnect-banner .rc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ══ HANDS HELP OVERLAY ══ */
#hands-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.82); padding: 12px;
  animation: fadeIn 0.2s ease;
}
.hands-card {
  background: linear-gradient(160deg,#071206 0%,#0e2010 60%,#071206 100%);
  border: 1px solid var(--gold-dim); border-top: 3px solid var(--gold);
  border-radius: 10px; padding: 16px 18px;
  max-width: min(460px, 96vw); max-height: 90dvh;
  overflow-y: auto; width: 100%;
  box-shadow: 0 0 60px rgba(200,168,74,0.18), 0 20px 50px rgba(0,0,0,0.8);
}
.hands-title {
  font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); text-align: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.hand-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-bottom: 1px solid rgba(200,168,74,0.07);
  border-radius: 4px; transition: background 0.12s;
}
.hand-row:hover { background: rgba(255,255,255,0.03); }
.hand-rank {
  width: 20px; text-align: center; flex-shrink: 0;
  font-size: 0.65rem; color: var(--gold-dim); font-family: 'Cinzel', serif;
}
.hand-cards { display: flex; gap: 2px; flex-shrink: 0; }
.hc {
  width: 22px; height: 32px; border-radius: 3px;
  background: #f8f5ee; border: 1px solid #ccc;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700; line-height: 1.1;
  color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hc.r { color: #c0392b; }
.hc.hi { background: linear-gradient(135deg,#fff9e6,#f5e6b0); border-color: var(--gold); box-shadow: 0 0 5px rgba(200,168,74,0.5); }
.hand-info { flex: 1; min-width: 0; }
.hand-name {
  font-size: 0.78rem; color: var(--text-hi); font-weight: 600;
  font-family: 'Cinzel', serif; letter-spacing: 0.04em;
}
.hand-desc { font-size: 0.64rem; color: var(--text); margin-top: 1px; }
.hands-close {
  display: block; width: 100%; margin-top: 14px;
  background: rgba(200,168,74,0.12); border: 1px solid var(--gold-dim);
  color: var(--gold); padding: 9px; border-radius: 4px;
  font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.1em; cursor: pointer; text-align: center;
  transition: background 0.15s;
}
.hands-close:hover { background: rgba(200,168,74,0.22); }

/* ══ ANIMATIONS — Distribution, jetons, flip, stats ══ */

/* Carte volante lors de la distribution */
.fly-card {
  position: fixed; pointer-events: none; z-index: 400;
  width: 26px; height: 37px;
  background: linear-gradient(135deg, #1a3a8a 0%, #2a5acc 60%, #1a3a8a 100%);
  border-radius: 3px; border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  transition: left 0.42s cubic-bezier(.2,.8,.3,1),
              top  0.42s cubic-bezier(.2,.8,.3,1),
              transform 0.42s ease, opacity 0.15s ease;
}
.fly-card.mine {
  background: linear-gradient(135deg, #1a5c2a 0%, #27ae60 60%, #1a5c2a 100%);
}

/* Jeton volant vers le pot */
.fly-chip {
  position: fixed; pointer-events: none; z-index: 400;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5e67a, #c8a850 60%, #8b6914);
  border: 2px solid #5a3800;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.38rem; font-weight: 900; color: #3d2b00;
  transition: left 0.5s cubic-bezier(.3,.9,.4,1),
              top  0.5s cubic-bezier(.3,.9,.4,1),
              opacity 0.2s ease 0.35s, transform 0.5s ease;
}

/* Flip 3D des cartes communes */
@keyframes flipCard3D {
  0%   { transform: perspective(400px) rotateY(-90deg) scale(0.85); opacity: 0; }
  55%  { transform: perspective(400px) rotateY(8deg)   scale(1.04); opacity: 1; }
  80%  { transform: perspective(400px) rotateY(-3deg)  scale(1); }
  100% { transform: perspective(400px) rotateY(0deg)   scale(1); opacity: 1; }
}
.pk.flip-reveal {
  animation: flipCard3D 0.45s cubic-bezier(.25,.8,.25,1) both;
}

/* Panneau statistiques de session */
#stats-overlay {
  position: fixed; top: 36px; right: 0;
  width: 240px; max-height: calc(100vh - 36px);
  background: rgba(4,10,6,0.97);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: 200; overflow-y: auto;
  animation: slideDown 0.2s ease;
}
.stats-header {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-dim);
}
.stats-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-size: 0.62rem; color: var(--text); }
.stat-val { font-size: 0.72rem; font-weight: 700; font-family: 'Inconsolata', monospace; }
.stat-val.pos { color: #4cff88; }
.stat-val.neg { color: #ff6b6b; }
.stat-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.hand-hist-item {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 8px; font-size: 0.58rem;
}
.hand-hist-cards { display: flex; gap: 3px; margin-top: 3px; }
.hand-hist-result { margin-top: 3px; font-weight: 700; }



/* Loading dots */
@keyframes blink {
  0%,80%,100% { opacity: 0.2; }
  40%          { opacity: 1; }
}
.ld span { animation: blink 1.3s infinite; }
.ld span:nth-child(2) { animation-delay: 0.22s; }
.ld span:nth-child(3) { animation-delay: 0.44s; }

.btn-join {
  background: var(--gold);
  color: #110900;
  border: none;
  padding: 4px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-join:hover { background: var(--gold-hi); }
.game-row { cursor: pointer; }

/* ═══ GAME SCREEN ═══ */
#s-game { overflow: visible; flex-direction: column; }

.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 300px; /* fallback si flex échoue */
  overflow: visible;
  /* Space for fixed bottom bars */
  padding-bottom: clamp(110px, 17dvh, 140px);
}

.table-zone { display:flex; align-items:center; justify-content:center; overflow:visible; position:relative;
  flex: 1;
  min-height: 160px; /* garde-fou : ne jamais s'effondrer */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.table-scaler { overflow: visible;
  padding: 30px 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  flex-shrink: 0;
  min-width: 300px;  /* garantit scrollWidth > 0 */
  min-height: 150px;
}

.felt-oval::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50% / 42%;
  border: 2px solid rgba(255,255,255,0.07);
  pointer-events: none;
}
.felt-oval { overflow: visible;
  width: min(520px, 90vw);
  height: min(240px, min(46vw, calc(100dvh - 250px)));
  min-height: 110px;
  background:
    /* Halo éclairage central (lampe au-dessus) */
    radial-gradient(ellipse 55% 45% at 50% 45%, rgba(255,255,220,0.07) 0%, transparent 70%),
    /* Ombres de bord (profondeur) */
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%),
    /* Texture tissu — lignes diagonales très fines */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.06) 3px,
      rgba(0,0,0,0.06) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    ),
    /* Couleur de base dégradée */
    radial-gradient(ellipse 80% 60% at 50% 50%, #1e6b1e 0%, #0f3d0f 55%, #091f09 100%);
  border-radius: 50% / 45%;
  border: 8px solid #6b3e18;
  box-shadow:
    0 0 0 3px #3a2208,
    0 0 0 5px rgba(107,62,24,0.3),
    inset 0 2px 16px rgba(0,0,0,0.5),
    inset 0 -4px 20px rgba(0,0,0,0.3),
    0 20px 60px rgba(0,0,0,0.8),
    0 0 40px rgba(0,0,0,0.4);
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}

/* Community cards — centred inside oval */
.comm-row {
  position: absolute;
  top: 56%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 5px;
  align-items: center;
}

/* Pot display */
.pot-display { display: none; }

.pot-bar {
  text-align: center;
  padding: 3px 0;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}

.my-seat-row {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  flex-shrink: 0;
}

/* Seats */
.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  max-width: 68px;
}

.seat-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(200,168,74,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; color: var(--text-hi);
  font-family: 'Cinzel', serif;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.me-oval-seat .seat-avatar {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 8px rgba(39,174,96,0.4);
}
.seat.active .seat-avatar {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(200,168,74,0.6);
}
/* Countdown arc around active seat avatar */
.seat-timer {
  position: absolute;
  width: 160%; height: 160%;
  top: -30%; left: -30%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.seat-timer circle.bg  { fill:none; stroke:rgba(0,0,0,0.45); stroke-width:4.5; }
.seat-timer circle.arc { fill:none; stroke-width:4; stroke-linecap:round; }
/* Fond opaque derrière le chiffre */
.seat-timer circle.center-bg {
  fill: transparent;
  stroke: none;
}
.seat-timer text {
  font-size: 10px;
  font-family: monospace;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}
/* Quand le timer tourne : initiale ET emoji toujours visibles (au-dessus du SVG arc) */
.seat-avatar.timing > .seat-initial {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 6;
}
.seat-avatar.emoji-av.timing > .seat-initial { display: flex; position: relative; z-index: 6; }
.seat.active .seat-name,
.seat.active .seat-money { opacity: 0.35; transition: opacity 0.3s; }
/* Dealer chip : rendu via SVG chipSvg() dans renderSeats */
.dealer-chip {
  position: absolute; top:-8px; right:-8px;
  z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  animation: chipPop 0.4s cubic-bezier(.17,.67,.35,1.45) both;
}
/* Badges SB / BB */
.blind-chip {
  position: absolute; top:-8px; left:-8px;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation: chipPop 0.4s cubic-bezier(.17,.67,.35,1.45) both;
}
@keyframes chipPop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  65%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.seat.folded .seat-avatar::before {
  content: '✕';
  position: absolute;
  font-size: 0.7rem;
  color: rgba(255,80,80,0.9);
  font-weight: 900;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.seat.me .seat-avatar { border-color: var(--green); }

/* Eliminated / sitting-out seat: stays in place around the felt so the
   other players don't visually rotate between hands, but appears faded
   with a dim border and a small "OUT" badge. The slight grayscale also
   defuses any colour cue (turn highlight, dealer chip) that may linger
   from a previous hand. */
.seat.seat-out {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;
}
.seat.seat-out::after {
  content: 'OUT';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(220, 80, 80, 0.85);
  background: rgba(0,0,0,0.55);
  padding: 1px 5px;
  border: 1px solid rgba(220, 80, 80, 0.5);
  border-radius: 2px;
  z-index: 4;
  pointer-events: none;
}

.seat-name {
  font-size: 0.68rem; color: var(--text-hi);
  white-space: nowrap; text-overflow: ellipsis;
  max-width: 68px; overflow: hidden; text-align: center;
}
.seat-money {
  font-size: 0.7rem; color: var(--gold);
  font-family: 'Inconsolata', monospace;
}
.seat-bet {
  font-size: 0.52rem;
  background: rgba(0,0,0,0.6); border: 1px solid var(--border);
  border-radius: 20px; padding: 1px 5px;
  color: var(--cream); white-space: nowrap;
}
.seat-action-label {
  font-size: 0.5rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text);
}

@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 10px rgba(200,168,74,0.5); }
  50%      { box-shadow: 0 0 22px rgba(200,168,74,0.9); }
}

/* ═══ POKER CARDS ═══ */
.pk {
  width: 42px; height: 60px;
  border-radius: 4px;
  background: #fff; color: #111;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800;
  /* Ombre portée multi-couche pour effet 3D */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset,
    2px 4px 8px rgba(0,0,0,0.45),
    4px 8px 20px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.15);
  line-height: 1.1; user-select: none; flex-shrink: 0;
}
.pk.red { color: #c0392b; }
.pk.back {
  background: linear-gradient(135deg, #1a3a8a 0%, #2a5acc 100%);
  color: transparent; font-size: 0;
}
.pk.back::after { content: '♠'; font-size: 1.3rem; color: rgba(255,255,255,0.12); }
.pk.sm { width: 32px; height: 46px; font-size: 0.76rem; font-weight: 700; }
.pk.md { width: 46px; height: 66px; font-size: 1.05rem; font-weight: 800; }
.pk.xsm { width: 20px; height: 29px; font-size: 0.5rem; font-weight: 700; border-radius: 3px; }
.pk.lg { width: 58px; height: 84px; font-size: 1.35rem; font-weight: 900; }
.pk .c-rank { font-size: 1em; line-height: 1; }
.pk .c-suit { font-size: 0.9em; line-height: 1; }
/* ♠ pique : fond légèrement bleuté pour distinguer de ♣ trèfle (tous deux noirs) */
.pk.spade { background: linear-gradient(160deg, #f4f7ff 0%, #edf1fc 100%); }

/* ── Bottom zone: my cards + actions ── */
.my-zone {
  position: fixed;
  bottom: 56px; /* above player-bar */
  left: 0; right: 0;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(4,10,6,0.95);
  border-top: 1px solid var(--border);
  gap: 8px;
  /* Nécessaire pour que #hand-strength se positionne par rapport à this */
  overflow: visible;
}

.my-cards {
  display: flex;
  gap: 6px;
  align-items: center;
}

.my-label {
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.my-stack {
  font-size: 0.7rem;
  color: var(--gold);
  margin-top: 2px;
}
.me-info {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
}

.action-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.btn-action {
  padding: 8px 14px;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: none;
  transition: filter 0.12s, transform 0.08s;
  white-space: nowrap;
}
.btn-action:active { transform: scale(0.96); }
.btn-action:hover  { filter: brightness(1.15); }

.btn-fold  { background: #6b2020; color: #ffd0d0; }
.btn-check { background: #1a5c1a; color: #c0ffc0; }
.btn-call  { background: #1a4a8a; color: #c0d8ff; }
.btn-raise { background: var(--gold); color: #110900; }
.btn-allin { background: #8a1a1a; color: #ffd0d0; outline: 2px solid #c0392b; }

.raise-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-hi);
  border-radius: 2px;
  color: var(--cream);
  padding: 7px 8px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  width: 72px;
  outline: none;
}
.raise-input:focus { border-color: var(--gold); }

/* ══ PANNEAUX FLOTTANTS (chat + réactions) — hors du flux flex ══
   position:fixed → la zone de table garde toujours toute sa hauteur */
#g-chat-panel {
  position: fixed !important;
  top: 36px;           /* juste sous le header */
  left: 0; right: 0;
  z-index: 100;
  max-height: min(280px, 38dvh) !important;
  background: rgba(4,10,6,0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#g-reaction-panel {
  position: fixed !important;
  top: 36px;
  left: 0; right: 0;
  z-index: 101;
  background: rgba(4,10,6,0.98);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
/* Log panel — same visual treatment as #g-chat-panel so the two
   feel like siblings (the user opens them with adjacent header
   buttons). Only difference is z-index 99 vs 100, keeping the chat
   one tick above when both are open. */
#g-log-panel {
  position: fixed !important;
  top: 36px;
  left: 0; right: 0;
  z-index: 99;
  max-height: min(280px, 38dvh) !important;
  background: rgba(4,10,6,0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  display: flex; /* makes flex-direction:column from inline style effective */
  flex-direction: column;
}
/* Log message rows — mirror the .chat-msgs basic look without the
   bubble-style backgrounds (log lines are denser, more like a
   monospace journal). */
.log-msgs {
  font-family: 'Inconsolata', monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--cream);
}
.log-msgs > div {
  padding: 1px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.log-msgs > div:last-child { border-bottom: none; }
/* Custom scrollbar matching the chat panel */
.log-msgs::-webkit-scrollbar { width: 6px; }
.log-msgs::-webkit-scrollbar-track { background: transparent; }
.log-msgs::-webkit-scrollbar-thumb {
  background: rgba(200,168,74,0.18);
  border-radius: 3px;
}
.log-msgs::-webkit-scrollbar-thumb:hover { background: rgba(200,168,74,0.32); }

.g-chat-panel-header { display:flex; align-items:center; justify-content:space-between; padding:4px 10px; background:rgba(0,0,0,0.4); border-bottom:1px solid var(--border); flex-shrink:0; }
.gchat-input { display:flex; gap:5px; padding:5px 10px; background:rgba(4,10,6,0.97); border-bottom:1px solid var(--border); flex-shrink:0; }
.gchat-input input { flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:2px; color:var(--cream); padding:5px 8px; font-family:'Inconsolata',monospace; font-size:0.76rem; outline:none; }
.gchat-input input:focus { border-color:var(--gold); }
.gchat-input button { background:rgba(200,168,74,0.12); border:1px solid var(--gold-dim); color:var(--gold); padding:5px 10px; border-radius:2px; cursor:pointer; font-size:0.8rem; }

.waiting-msg {
  color: var(--text); font-size: 0.8rem;
  font-style: italic; padding: 4px 0;
}

/* ══ PASSWORD PROMPT ══ */
#password-prompt {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75);
}
.pp-card {
  background: #060e08; border: 1px solid var(--gold-dim);
  border-top: 3px solid var(--gold); border-radius: 8px;
  padding: 20px 24px; width: min(340px, 92vw);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.pp-title { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold); letter-spacing: 0.1em; }
.pp-label { font-size: 0.65rem; color: var(--gold-dim); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; }
.pp-input { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 2px; color: var(--cream); padding: 9px 11px; font-family: 'Inconsolata', monospace; font-size: 0.9rem; outline: none; width: 100%; }
.pp-input:focus { border-color: var(--gold); }
.pp-btns { display: flex; gap: 8px; }
.pp-btns .btn-primary { flex: 1; padding: 9px; font-size: 0.76rem; }
.pp-cancel { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 9px 16px; border-radius: 2px; cursor: pointer; font-family: 'Inconsolata', monospace; font-size: 0.76rem; }
.pp-cancel:hover { border-color: var(--border-hi); color: var(--text-hi); }

/* ══ WINNER OVERLAY ══ */
.winner-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.78);
  padding: 12px;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.winner-card {
  background: linear-gradient(160deg, #091808 0%, #0f2410 60%, #081508 100%);
  border: 1px solid var(--gold-dim); border-top: 3px solid var(--gold);
  border-radius: 10px; padding: 18px 22px;
  max-width: min(440px, 94vw); max-height: 90dvh; overflow-y: auto; width: 100%;
  box-shadow: 0 0 80px rgba(200,168,74,0.2), 0 24px 60px rgba(0,0,0,0.8);
  animation: popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes popIn { from { transform:scale(0.75); opacity:0 } to { transform:scale(1); opacity:1 } }
.wc-header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.wc-trophy { font-size:2rem; line-height:1; }
.wc-titles { flex:1; }
.wc-label { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim); }
.wc-name { font-family:'Cinzel',serif; font-size:clamp(1rem,4vw,1.4rem); font-weight:700; color:var(--gold); }
.wc-gain { font-size:clamp(0.9rem,3.5vw,1.15rem); color:#4cff88; font-weight:700; text-align:right; }
.wc-stats { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.wc-stat { flex:1; min-width:65px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:4px; padding:6px 8px; text-align:center; }
.wc-stat-label { font-size:0.56rem; color:var(--gold-dim); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px; }
.wc-stat-value { font-size:0.85rem; color:var(--cream); font-weight:700; }
.wc-section { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:5px; }
.wc-cards-row { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.wc-players { margin-bottom:14px; }
.wc-player-row { display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:4px; margin-bottom:3px; background:rgba(255,255,255,0.02); }
.wc-player-row.wc-winner { background:rgba(200,168,74,0.08); border:1px solid rgba(200,168,74,0.2); }
.wc-player-row.wc-me-row { border-left:3px solid var(--green); }
.wc-player-av { width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,0.5); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:var(--text-hi); flex-shrink:0; }
.wc-player-info { flex:1; min-width:0; }
.wc-player-name { font-size:0.7rem; color:var(--text-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-player-stack { font-size:0.58rem; color:var(--text); }
.wc-player-cards { display:flex; gap:2px; }
.wc-player-delta { font-size:0.76rem; font-weight:700; flex-shrink:0; min-width:48px; text-align:right; }
.wc-player-delta.pos { color:#4cff88; }
.wc-player-delta.neg { color:rgba(255,100,100,0.75); }
.winner-dismiss { background:var(--gold); color:#110900; border:none; padding:9px 24px; font-family:'Cinzel',serif; font-size:0.76rem; font-weight:700; border-radius:4px; cursor:pointer; letter-spacing:0.08em; transition:background 0.15s; display:block; width:100%; margin-top:4px; }
.winner-dismiss:hover { background:var(--gold-hi); }


/* ── Player bar + my-zone : cachées hors jeu (contrôlées par body.in-game) ── */
body:not(.in-game) .player-bar,
body:not(.in-game) .my-zone {
  display: none !important;
}

/* ── Player bar (me) ── */
.player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 3px 6px;
  padding-bottom: max(3px, env(safe-area-inset-bottom));
  background: rgba(4,10,6,0.97);
  border-top: 1px solid rgba(39,174,96,0.3);
}
.player-bar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(39,174,96,0.4);
  border-radius: 8px;
  padding: 5px 14px;
}
.pb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--green);
  box-shadow: 0 0 8px rgba(39,174,96,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1rem; color: var(--text-hi);
  flex-shrink: 0;
}
.pb-info { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.pb-name { font-size: 0.8rem; color: var(--green); font-weight: 700; }
.pb-money { font-size: 0.7rem; color: var(--gold); }
.pb-cards {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
/* Override pk size specifically in player bar */
.pb-cards .pk { width: 42px; height: 60px; font-size: 1rem; font-weight: 800; }
.pb-action {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text);
  min-width: 50px;
}
.player-bar.pb-active .player-bar-left {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(200,168,74,0.4);
  animation: pulse-gold 1.5s infinite;
}

/* Action grid */
.action-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
/* Row 1: Fold + Check/Call */
.action-grid > .btn-fold,
.action-grid > .btn-check,
.action-grid > .btn-call {
  flex: 1;
}
/* First two buttons side by side */
.action-top-row {
  display: flex; gap: 6px;
}
.action-top-row .btn-action { flex: 1; }

.pct-row {
  display: flex; gap: 5px;
}
.btn-pct {
  flex: 1;
  background: rgba(200,168,74,0.12); border: 1px solid var(--gold-dim);
  color: var(--gold); padding: 8px 6px; border-radius: 3px; cursor: pointer;
  font-family: 'Inconsolata',monospace; font-size: 0.78rem; text-align: center;
}
.btn-pct:hover { background: rgba(200,168,74,0.28); }
.btn-pct:disabled,
.btn-action:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(0.7);
  pointer-events: none;
}
.raise-input:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02) !important;
}
.raise-row { display: flex; gap: 5px; align-items: stretch; }
.raise-row .raise-input { flex: 1; }
.raise-row .btn-raise { flex: 2; }

/* Action log */
.game-log {
  position: fixed;
  bottom: 160px; left: 8px;
  width: 190px; max-height: 130px;
  overflow-y: auto;
  background: rgba(0,0,0,0.6);
  border-radius: 4px; padding: 5px 7px;
  font-size: 0.62rem; color: var(--text);
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.05);
}
.log-line { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.g-chat-input { display:flex; gap:6px; padding:5px 10px; background:rgba(4,10,6,0.97); border-bottom:1px solid var(--border); }
.g-chat-input input { flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:2px; color:var(--cream); padding:4px 7px; font-family:'Inconsolata',monospace; font-size:0.76rem; outline:none; }
.g-chat-input input:focus { border-color:var(--gold); }

/* Badge timer sous le cercle avatar */
.seat-timer-badge {
  font-size: 0.72rem;
  font-family: 'Inconsolata', monospace;
  font-weight: 900;
  color: #ffe234;
  letter-spacing: 0.05em;
  line-height: 1;
  min-width: 26px;
  text-align: center;
  margin-top: 10px;
  padding: 1px 5px;
  background: rgba(0,0,0,0.62);
  border-radius: 3px;
  border: 1px solid rgba(200,168,74,0.35);
  text-shadow: 0 0 8px rgba(255,220,50,0.9), 0 1px 3px rgba(0,0,0,1);
  box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}

/* ══ Slider de mise mobile ══════════════════════════════════ */
.raise-row-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
}
.raise-slider {
  flex: 1;
  accent-color: var(--gold, #c8a84a);
  height: 4px;
  cursor: pointer;
  min-width: 0;
}
.raise-display {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  color: var(--gold, #c8a84a);
  font-weight: 700;
  min-width: 42px;
  text-align: center;
  flex-shrink: 0;
}

/* ══ Combinaison gagnante dans l'overlay winner ═════════════ */
.wc-best-hand {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold, #c8a84a);
  background: rgba(200, 168, 74, 0.1);
  border: 1px solid rgba(200, 168, 74, 0.3);
  border-radius: 6px;
  padding: 8px 14px;
  margin: 8px 0 4px;
  letter-spacing: 0.04em;
}


/* ══ WAITING PANEL ══
   Rich waiting-room display shown between JoinGameAck and
   GameStartInitial. Lives inside the same #g-actions container that
   normally hosts the action buttons; replaces the previous plain
   .waiting-msg italic string. */
.waiting-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 10px 14px; max-width: 480px; margin: 0 auto;
}
.wp-title {
  font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.1em;
  color: var(--gold); text-transform: uppercase;
}
.wp-count {
  font-size: 0.88rem; color: var(--cream);
}
.wp-count b { color: var(--gold); font-weight: 700; }
.wp-bar {
  display: flex; gap: 6px; margin: 2px 0;
}
.wp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--gold-dim);
}
.wp-dot-on  { background: var(--gold); box-shadow: 0 0 6px rgba(200,168,74,0.7); }
.wp-dot-off { background: transparent; }
.wp-ok, .wp-need {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 0;
}
.wp-ok   { color: #58c97a; }
.wp-need { color: #e0a040; }
.wp-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  width: 100%;
}
.wp-player {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: 0.78rem;
}
.wp-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.wp-av.emoji-av { font-size: 1.05rem; line-height: 1; }
.wp-av-letter   { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.wp-name  { color: var(--cream); }
.wp-me    {
  font-size: 0.6rem; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(200,168,74,0.12); padding: 1px 5px; border-radius: 3px;
}
.wp-hint {
  font-size: 0.74rem; color: var(--gold-dim);
  font-style: italic; margin-top: 4px; text-align: center;
}
.wp-hint-admin { color: #58c97a; font-style: normal; font-weight: 600; }
/* When the action-bar hosts the waiting panel (no real action buttons
   yet), override its default right-alignment so the panel sits in the
   middle of the bottom strip. Once the game starts, .waiting-panel is
   replaced by buttons and the default flex-end alignment kicks back in. */
.action-bar:has(.waiting-panel) {
  justify-content: center;
}
/* Fallback for browsers that don't support :has() — we also widen the
   panel itself so it occupies the full bar width and centres its inner
   contents via its own align-items:center. Modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+) all support :has(), but this belt-and-
   braces approach makes the centring work even on older mobile Safari. */
.waiting-panel { width: 100%; }

/* Start-now banner — shown when the admin can launch with bots.
   Pulsing animation draws attention without being too noisy. */
.wp-ready-row {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 8px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(88,201,122,0.10), rgba(88,201,122,0.04));
  border: 1px solid rgba(88,201,122,0.4);
  border-radius: 6px;
  animation: wpReadyAppear 0.4s ease-out;
}
@keyframes wpReadyAppear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wp-ready-label {
  font-size: 0.78rem; color: #88e4a3; font-weight: 600;
  letter-spacing: 0.04em;
}
.wp-ready-btn {
  padding: 9px 18px;
  background: linear-gradient(180deg, rgba(88,201,122,0.35), rgba(88,201,122,0.18));
  border: 1px solid #58c97a;
  border-radius: 4px;
  color: #d0ffd8;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  animation: wpReadyPulse 1.6s ease-in-out infinite;
  transition: transform 0.12s;
}
.wp-ready-btn:hover {
  background: linear-gradient(180deg, rgba(88,201,122,0.55), rgba(88,201,122,0.3));
  transform: scale(1.04);
}
.wp-ready-btn:active { transform: scale(0.97); }
@keyframes wpReadyPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(88,201,122,0.5),
                0 1px 4px rgba(0,0,0,0.4) inset;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(88,201,122,0),
                0 1px 4px rgba(0,0,0,0.4) inset;
  }
}

/* On mobile, keep things compact */
@media (max-width: 640px) {
  .waiting-panel { padding: 8px 10px; gap: 5px; }
  .wp-ready-row { padding: 8px 10px; gap: 5px; }
  .wp-ready-label { font-size: 0.72rem; }
  .wp-ready-btn { padding: 7px 14px; font-size: 0.74rem; }
  .wp-title { font-size: 0.82rem; }
  .wp-player { font-size: 0.72rem; padding: 2px 8px 2px 3px; }
  .wp-av { width: 20px; height: 20px; }
}


/* ══ END-OF-GAME OVERLAY ══
   Full-screen panel shown when the tournament finishes (EndOfGame
   message). Style is heavier than the per-hand winner-overlay:
   bigger trophy, dramatic gold gradient, dedicated stats section. */
.endgame-overlay {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: endgameFadeIn 0.4s ease-out;
}
@keyframes endgameFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.endgame-card {
  background: linear-gradient(160deg, #0a1f0a 0%, #142a18 50%, #08160a 100%);
  border: 1px solid var(--gold);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  padding: 22px 28px;
  max-width: 480px; width: calc(100% - 32px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 60px rgba(200,168,74,0.15);
  display: flex; flex-direction: column; gap: 14px;
  animation: endgamePop 0.55s cubic-bezier(0.2,0.9,0.3,1.1);
}
@keyframes endgamePop {
  0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
.eg-trophy {
  text-align: center; font-size: 3rem; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255,200,80,0.4));
  animation: trophyBob 2.2s ease-in-out infinite;
}
@keyframes trophyBob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-4px) rotate(2deg); }
}
.eg-title {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.25rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(200,168,74,0.3);
}
.eg-winner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(200,168,74,0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
}
.eg-winner-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  font-size: 1.6rem; line-height: 1;
  border: 2px solid var(--gold);
}
.eg-winner-av.letter { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.eg-winner-label { font-size: 0.65rem; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.12em; }
.eg-winner-name  { font-size: 1.05rem; color: var(--cream); font-weight: 600; }
.eg-winner.me {
  background: rgba(88,201,122,0.12);
  border-color: rgba(88,201,122,0.5);
}
.eg-winner.me .eg-winner-av { border-color: #58c97a; }
.eg-stats-section {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px;
}
.eg-stats-title {
  font-size: 0.62rem; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: 8px;
}
.eg-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; padding: 3px 0;
}
.eg-stat-label { color: var(--text); }
.eg-stat-val   { color: var(--cream); font-weight: 600; font-family: 'Inconsolata',monospace; }
.eg-stat-val.pos { color: #58c97a; }
.eg-stat-val.neg { color: #e07070; }
.eg-stat-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 6px 0;
}
.eg-actions {
  display: flex; gap: 10px; margin-top: 4px;
}
.eg-btn {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.eg-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--gold-dim); }
.eg-btn.primary {
  background: linear-gradient(180deg, rgba(200,168,74,0.25), rgba(200,168,74,0.12));
  border-color: var(--gold);
  color: var(--gold-hi);
}
.eg-btn.primary:hover {
  background: linear-gradient(180deg, rgba(200,168,74,0.4), rgba(200,168,74,0.2));
}
@media (max-width: 640px) {
  .endgame-card { padding: 16px 18px; gap: 10px; }
  .eg-trophy { font-size: 2.4rem; }
  .eg-title { font-size: 1rem; letter-spacing: 0.14em; }
  .eg-winner-av { width: 32px; height: 32px; font-size: 1.4rem; }
  .eg-winner-name { font-size: 0.95rem; }
  .eg-stat-row { font-size: 0.74rem; }
}


/* ══ AUTO CHECK/FOLD CHECKBOX ══
   Rendered above the action grid by renderMyTurnActions() so the user
   can arm the auto-action for their NEXT turn within the same hand.
   Deliberately discreet — small, low-contrast — because it represents
   a fully optional courtesy feature, not a primary action button. */
.auto-cf-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin: 0 0 6px;
  font-size: 0.72rem;
  color: var(--gold-dim);
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  /* Force the checkbox row to take its own line above the action grid,
     regardless of viewport width. Without this, on desktop and tablet
     the .action-bar's justify-content:flex-end shoves it to the left
     of the action-grid (the rest of the bar), producing the cosmetic
     desync the user reported. flex-basis:100% guarantees the row
     wraps to its own line in every breakpoint. */
  flex-basis: 100%;
  justify-content: center;
}
.auto-cf-row:hover {
  color: var(--gold);
  background: rgba(200,168,74,0.06);
}
.auto-cf-row input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px; height: 14px;
  cursor: pointer;
}
.auto-cf-row input:checked + span {
  color: var(--gold);
  font-weight: 600;
}
/* On mobile, push the checkbox flush with the action grid so it doesn't
   eat too much vertical space. */
@media (max-width: 640px) {
  .auto-cf-row { font-size: 0.66rem; padding: 3px 6px; margin-bottom: 4px; }
  .auto-cf-row input[type="checkbox"] { width: 12px; height: 12px; }
}


/* ══ SPECTATOR BANNER ══
   Shown at the top of the game screen (just below the header,
   above the pot strip) when the user is watching as a spectator.
   Subtle blue tint to differentiate from regular player view, with
   a small animated pulse on the eye emoji to draw attention without
   being noisy. */
#g-spectator-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(80,140,200,0.15), rgba(80,140,200,0.05));
  border-bottom: 1px solid rgba(80,140,200,0.35);
  font-size: 0.75rem;
  color: #a8d0f0;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#g-spectator-banner .sb-eye {
  font-size: 1rem;
  animation: sbEyePulse 2.4s ease-in-out infinite;
}
@keyframes sbEyePulse {
  0%,100% { opacity: 0.75; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.15); }
}
@media (max-width: 640px) {
  #g-spectator-banner { padding: 5px 10px; font-size: 0.66rem; }
  #g-spectator-banner .sb-eye { font-size: 0.9rem; }
}

/* Replacement message that occupies the action area when the user
   is a spectator. Same vertical footprint as the action buttons so
   the layout doesn't jump around between hands. */
.spectator-message {
  width: 100%;
  padding: 18px 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gold-dim);
  background: rgba(80,140,200,0.06);
  border: 1px solid rgba(80,140,200,0.25);
  border-radius: 4px;
  font-style: italic;
}
.spectator-message .sm-icon {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 4px;
  font-style: normal;
}
@media (max-width: 640px) {
  .spectator-message { padding: 14px 10px; font-size: 0.72rem; }
}


/* ══ QUIT-GAME CONFIRMATION DIALOG ══
   Centred modal with 2 buttons: Quit / Cancel. Shown when the user
   clicks the ✕ from inside a game. Gold-bordered card matching the
   rest of the UI, with backdrop blur and a soft pop animation. */
/* Shared modal container for the three confirmation dialogs:
   #leave-dialog (quit a game in progress)
   #disconnect-dialog (disconnect from the lobby)
   #quick-create-dialog (set player count on a quick-create) — this one
   already has its own rule because it was added in a separate commit
   with the same body; consolidating could be a future cleanup. */
#leave-dialog,
#disconnect-dialog {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: ldFade 0.25s ease-out;
}
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
.ld-card {
  background: linear-gradient(160deg, #0c1a0e 0%, #142a18 60%, #08160a 100%);
  border: 1px solid var(--gold-dim);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  padding: 22px 24px;
  max-width: 400px; width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  animation: ldPop 0.35s cubic-bezier(0.2,0.9,0.3,1.1);
}
@keyframes ldPop {
  from { transform: scale(0.9) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}
.ld-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin-bottom: 12px;
}
.ld-body {
  font-size: 0.85rem; color: var(--cream);
  text-align: center; margin-bottom: 18px; line-height: 1.4;
}
.ld-buttons {
  display: flex; flex-direction: column; gap: 8px;
}
.ld-btn {
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ld-btn:hover  { background: rgba(255,255,255,0.08); }
.ld-btn:active { transform: scale(0.98); }
.ld-btn.ld-quit {
  background: linear-gradient(180deg, rgba(192,57,43,0.22), rgba(192,57,43,0.1));
  border-color: rgba(192,57,43,0.5);
  color: #fad6d0;
}
.ld-btn.ld-quit:hover { background: linear-gradient(180deg, rgba(192,57,43,0.35), rgba(192,57,43,0.18)); }
.ld-btn.ld-cancel { color: var(--gold-dim); }
@media (max-width: 640px) {
  .ld-card { padding: 16px 18px; }
  .ld-title { font-size: 0.9rem; }
  .ld-body { font-size: 0.78rem; }
  .ld-btn { padding: 9px 12px; font-size: 0.72rem; }
}


/* ══ QUICK-CREATE DIALOG ══
   Reuses the .ld-* styles from the leave-dialog (gold card, backdrop,
   buttons). Adds a centred input row and a green 'Create' button to
   match the semantic 'positive action' colour used elsewhere. */
#quick-create-dialog {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: ldFade 0.25s ease-out;
}
.qc-control {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 0 0 18px;
}
.qc-control label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-dim);
}
.qc-control input[type="number"] {
  width: 70px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'Inconsolata', monospace;
  font-size: 1.1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
.qc-control input[type="number"]:focus { border-color: var(--gold); }
.ld-btn.ld-create {
  background: linear-gradient(180deg, rgba(88,201,122,0.22), rgba(88,201,122,0.1));
  border-color: rgba(88,201,122,0.5);
  color: #d6f5dc;
}
.ld-btn.ld-create:hover { background: linear-gradient(180deg, rgba(88,201,122,0.35), rgba(88,201,122,0.18)); }
@media (max-width: 640px) {
  .qc-control { gap: 8px; }
  .qc-control input[type="number"] { font-size: 1rem; width: 60px; padding: 6px 8px; }
}


/* ══ PLAYERS ONLINE DROPDOWN PANEL ══
   Triggered by clicking the #h-players pill in the lobby header.
   Same visual chrome as #g-chat-panel / #g-log-panel so the three
   dropdowns feel like siblings. Adds a search input row above the
   scrollable list for quick filtering when many players are online. */
#players-panel {
  position: fixed !important;
  top: 36px;
  left: 0; right: 0;
  z-index: 99;
  max-height: min(360px, 50dvh) !important;
  background: rgba(4,10,6,0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
.players-search {
  padding: 6px 10px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.players-search input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--cream);
  padding: 5px 10px;
  font-family: 'Inconsolata', monospace;
  font-size: 0.78rem;
  outline: none;
  box-sizing: border-box;
}
.players-search input:focus { border-color: var(--gold); }
/* Body container — the inline style on the element sets flex/min-height/
   overflow/padding/background to match the chat panel pattern exactly.
   This rule keeps only the bits inline styles don't cover. */
.players-list {
  font-family: 'Inconsolata', monospace;
  font-size: 0.78rem;
}
.players-list .pl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;          /* container provides the 12px lateral padding now */
  font-family: 'Inconsolata', monospace;
  font-size: 0.78rem;
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.players-list .pl-row:last-child { border-bottom: none; }
.players-list .pl-row:hover { background: rgba(200,168,74,0.08); }
.players-list .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players-list .pl-id   { color: var(--gold-dim); font-size: 0.66rem; }
.players-list .pl-row.pl-me { color: var(--gold); }
.players-list .pl-row.pl-me .pl-id::before { content: '⭐ '; }
.players-list .pl-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
  color: var(--gold-dim);
  font-size: 0.74rem;
}
/* Custom scrollbar matching chat/log */
.players-list::-webkit-scrollbar { width: 6px; }
.players-list::-webkit-scrollbar-track { background: transparent; }
.players-list::-webkit-scrollbar-thumb {
  background: rgba(200,168,74,0.18);
  border-radius: 3px;
}
.players-list::-webkit-scrollbar-thumb:hover { background: rgba(200,168,74,0.32); }