/* ================= Table page layout ================= */
.table-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.viewport {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 214, 140, .07), transparent 70%),
    radial-gradient(ellipse at 50% 120%, #04060a 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #0d1219, #080a0e);
}
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; }
.scene > * { position: absolute; }
.spotlight {
  inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 46% at 50% 52%, rgba(255, 236, 190, .08), transparent 70%);
}

/* ---------- felt themes ---------- */
.scene, .scene[data-theme="classic"] { --felt-a: #23854f; --felt-b: #12592f; --felt-c: #083a1e; --line-c: rgba(242, 214, 140, .28); --back-a: #a3242b; --back-b: #5f1015; }
.scene[data-theme="midnight"] { --felt-a: #2462a8; --felt-b: #123866; --felt-c: #081d3a; --line-c: rgba(190, 215, 255, .26); --back-a: #1f3f78; --back-b: #0c1d3d; }
.scene[data-theme="royal"] { --felt-a: #9c2633; --felt-b: #63131c; --felt-c: #36080e; --line-c: rgba(242, 214, 140, .3); --back-a: #1f2b45; --back-b: #0d1424; }
.scene[data-theme="onyx"] { --felt-a: #3a3f48; --felt-b: #22262c; --felt-c: #121417; --line-c: rgba(226, 176, 74, .35); --back-a: #8a6a1e; --back-b: #3d2d08; }

/* ---------- table: brass trim → leather rail → felt ---------- */
.table {
  border-radius: 262px;
  background: linear-gradient(180deg, #d9b25a, #8a6420 50%, #c99a3a);
  padding: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6);
}
.scene.portrait .table { border-radius: 318px; }
.table::before {
  content: ''; position: absolute; inset: 4px; border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 50% 8%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(180deg, #3a2618, #1d120b 55%, #2b1b11);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.12), inset 0 -4px 10px rgba(0,0,0,.7);
}
.felt {
  position: absolute; inset: 42px; border-radius: 230px; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 75% 70% at 50% 42%, var(--felt-a) 0%, var(--felt-b) 62%, var(--felt-c) 100%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 18px 50px rgba(0,0,0,.55), inset 0 -12px 40px rgba(0,0,0,.45);
}
.scene.portrait .felt { inset: 36px; border-radius: 282px; }
.felt-line {
  position: absolute; inset: 62px; border-radius: 180px; border: 2px solid var(--line-c); opacity: .8;
}
.scene.portrait .felt-line { inset: 54px; border-radius: 230px; }
.felt-logo {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap;
  font-weight: 800; letter-spacing: 9px; font-size: 22px; color: rgba(255,255,255,.08);
}
.scene.portrait .felt-logo { bottom: 60px; font-size: 20px; letter-spacing: 6px; }
.blinds { display: none; }
.s-game { font-size: 13px; font-weight: 700; color: var(--accent-2); margin-bottom: 8px; }
.blinds-unused {
  transform: translate(-50%, -50%); white-space: nowrap; font-size: 13px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.38); z-index: 2;
}

/* ---------- dealer, tray, shoe ---------- */
.dealer { transform: translate(-50%, -50%); width: 178px; height: 226px; z-index: 0; }
.dealer-art { width: 178px; height: 226px; display: block; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.65)); }
.dealer-plate {
  position: absolute; right: -112px; top: 92px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent-2); background: rgba(10,13,18,.8); border: 1px solid rgba(226,176,74,.4); padding: 4px 10px; border-radius: 999px;
}
.dealer-bubble {
  z-index: 20; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #fbf8f1, #ece6d8); color: #1a1d22; font-weight: 700; font-size: 18px;
  padding: 9px 20px 9px 16px; border-radius: 999px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08);
  opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(.94);
  transition: opacity .22s, transform .22s;
}
.dealer-bubble::before {
  content: ''; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--dealer-img, url("../assets/dealers-3d/elena.webp")) 50% 6% / 190% auto no-repeat, #2a2f38; box-shadow: 0 0 0 2px #c9a24a;
}
.dealer-bubble.show { opacity: 1; transform: translate(-50%, -50%); }
.tray {
  transform: translate(-50%, -50%); z-index: 3; display: flex; gap: 3px; padding: 6px 8px; border-radius: 8px;
  background: linear-gradient(180deg, #14181e, #0a0c10); border: 1px solid #3a3f48;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.tray i {
  width: 26px; height: 22px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 55%, #000) 3px 4px);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.25), inset 0 -3px 4px rgba(0,0,0,.4);
}
.shoe {
  width: 54px; height: 34px; transform: translate(-50%, -50%) rotate(-12deg); z-index: 3; border-radius: 6px 12px 6px 6px;
  background: linear-gradient(160deg, #2a2f38, #0f1115); border: 1px solid #454b56; box-shadow: 0 6px 12px rgba(0,0,0,.55);
}
.shoe span { position: absolute; left: -9px; top: 6px; width: 22px; height: 20px; border-radius: 3px; background: linear-gradient(160deg, var(--back-a), var(--back-b)); box-shadow: inset 0 0 0 2px #f2ede2; transform: rotate(8deg); }

/* ---------- chairs ---------- */
.chair { width: 210px; height: 136px; z-index: 0; pointer-events: none; }
.chair-back {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 80px; border-radius: 40px 40px 70px 70px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,255,255,.12), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(0,0,0,.25) 36px 38px),
    linear-gradient(180deg, #3b2a20, #1a110c);
  box-shadow: 0 14px 30px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 10px rgba(0,0,0,.5);
  border: 1px solid #0c0806;
}
.chair-seat {
  position: absolute; left: 28px; right: 28px; top: 8px; height: 74px; border-radius: 30px;
  background: radial-gradient(ellipse at 50% 35%, #4a3527, #24170f);
  box-shadow: 0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------- seats ---------- */
.scene.portrait .seat { transform: translate(-50%, -50%) scale(1.25); }
.scene.portrait .chair { width: 250px; height: 160px; }
.scene.portrait .board { transform: translate(-50%, -50%) scale(.74); }
.scene.portrait .session { transform: scale(1.2); transform-origin: 0 0; }
.seat { width: 220px; transform: translate(-50%, -50%); z-index: 6; display: flex; flex-direction: column; align-items: center; }
.hole { height: 109px; display: flex; justify-content: center; position: relative; z-index: 0; margin-bottom: -30px; perspective: 600px; }
.hole .card { width: 78px; height: 109px; margin: 0 -6px; }
.hole .card { transform: rotate(var(--r, 0deg)); transform-origin: 50% 90%; }
.scene[data-holes="4"] .seat:not(.hero) .hole .card { width: 64px; height: 90px; margin: 0 -17px; }
.scene[data-holes="5"] .seat:not(.hero) .hole .card { width: 60px; height: 84px; margin: 0 -19px; }
.scene[data-holes="6"] .seat:not(.hero) .hole .card { width: 56px; height: 78px; margin: 0 -20px; }
.seat.hero .hole { height: 162px; margin-bottom: -28px; }
.seat.hero .hole .card { width: 116px; height: 162px; margin: 0 3px; transition: transform .18s ease-out; }
.seat.hero .hole .card:hover { transform: rotate(var(--r, 0deg)) translateY(-14px); }
.scene[data-holes="4"] .seat.hero .hole .card { width: 100px; height: 140px; margin: 0 -12px; }
.scene[data-holes="5"] .seat.hero .hole .card { width: 92px; height: 129px; margin: 0 -16px; }
.scene[data-holes="6"] .seat.hero .hole .card { width: 86px; height: 120px; margin: 0 -19px; }

.plate {
  position: relative; z-index: 1; width: 100%; height: 66px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 6px; border-radius: 40px;
  background: linear-gradient(180deg, rgba(36,44,56,.97), rgba(15,19,25,.97));
  border: 1px solid #3a4556; box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .25s, border-color .25s, opacity .25s;
}
.seat.hero .plate { height: 72px; border-color: #5a4a26; background: linear-gradient(180deg, rgba(48,42,30,.97), rgba(20,18,13,.97)); }
.avatar {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 35% 28%, #4a5869, #18202a 75%);
  box-shadow: inset 0 0 0 2px #56657a, 0 4px 10px rgba(0,0,0,.5);
}
.seat.hero .avatar { background: radial-gradient(circle at 35% 28%, #f4d27f, #8a6420 80%); color: #2a1c03; font-size: 24px; }
.ring { position: absolute; inset: -5px; width: 66px; height: 66px; transform: rotate(-90deg); pointer-events: none; }
/* turn ring: gold arc + glowing tip, driven from JS (see tickTurnClock) */
.ring .r-arc { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 182.2; stroke-dashoffset: 0; opacity: 0; transition: opacity .2s, stroke .3s; }
.ring .r-tip { fill: #fff6d8; opacity: 0; filter: drop-shadow(0 0 3px #ffd36b) drop-shadow(0 0 6px rgba(255, 200, 80, .8)); transition: opacity .2s; }
.ring.on .r-arc, .ring.on .r-tip { opacity: 1; }
.ring.warn .r-arc { stroke: #f4a63a; }
.ring.urgent .r-arc { stroke: #ff4d4f; }
.ring.urgent .r-tip { fill: #ffd6d6; filter: drop-shadow(0 0 4px #ff4d4f); }
.ring.on { filter: drop-shadow(0 0 6px rgba(226, 176, 74, .55)); }
.ring.urgent { filter: drop-shadow(0 0 8px rgba(255, 77, 79, .8)); animation: ring-pulse .5s ease-in-out infinite alternate; }
@keyframes ring-pulse { to { filter: drop-shadow(0 0 14px rgba(255, 77, 79, 1)); } }
.info { min-width: 0; flex: 1; line-height: 1.2; }
.name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.name small.hand { color: var(--accent-2); font-weight: 700; font-size: 12.5px; }
.name small.hand.win { color: #6ee7a8; }
.stack { color: var(--accent-2); font-weight: 800; font-size: 18px; margin-top: 1px; }
.pos {
  position: absolute; top: -10px; right: 14px; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  background: #222b38; color: var(--text-2); border: 1px solid #44516a; border-radius: 999px; padding: 2px 8px;
}
.seat.acting .plate { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(226,176,74,.35), 0 0 34px rgba(226,176,74,.35), 0 12px 28px rgba(0,0,0,.6); }
.seat.folded .plate { opacity: .5; }
.seat.sitting-out { opacity: .4; }
.seat.winner .plate { border-color: #4ad08a; box-shadow: 0 0 0 2px rgba(74,208,138,.45), 0 0 40px rgba(74,208,138,.5), 0 12px 28px rgba(0,0,0,.6); }
.seat.empty .plate { background: rgba(10,13,18,.55); border: 1.5px dashed #3c4656; box-shadow: none; justify-content: center; }
.seat.empty .avatar { display: none; }
.seat.empty .name { color: var(--muted); font-weight: 600; font-size: 14px; text-align: center; }

.tag, .reason { opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.tag {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap;
  font-size: 13px; font-weight: 800; letter-spacing: .3px; padding: 4px 12px; border-radius: 999px;
  background: #263040; color: var(--text-2); box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.tag.show { opacity: 1; transform: translate(-50%, 0); }
.tag.la-raise, .tag.la-bet { background: #5a3010; color: #ffc98f; }
.tag.la-call { background: #123a63; color: #a6d0ff; }
.tag.la-check { background: #17402c; color: #a2e9c2; }
.tag.la-fold { background: #2b2b2e; color: #9a9a9f; }
.tag.la-sb, .tag.la-bb { background: #2a2f3a; color: #c8cfda; }
.reason {
  position: absolute; top: calc(100% + 40px); left: 50%; transform: translateX(-50%); width: 240px; text-align: center;
  font-size: 11.5px; line-height: 1.35; color: var(--text-2); background: rgba(8,10,14,.85); padding: 5px 9px; border-radius: 8px;
}
.reason.show { opacity: 1; }

/* ---------- cards ---------- */
.card {
  width: 110px; height: 154px; border-radius: 8px; flex: none; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.15);
}
.card.face { background: #fff; overflow: hidden; }
.card.face img { width: 100%; height: 100%; display: block; pointer-events: none; }
.card.back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 9%, transparent 10%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--back-a), var(--back-b));
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 4px #f2ede2, inset 0 0 0 5px rgba(0,0,0,.25);
}
.card.slot { background: rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.card.dim { filter: brightness(.45) saturate(.5); }
.board { transform: translate(-50%, -50%); display: flex; gap: 12px; z-index: 4; perspective: 900px; }

/* ---------- chips ---------- */
.stack-chips { position: relative; display: inline-block; width: 30px; height: 30px; flex: none; }
.chip {
  position: absolute; left: 0; bottom: calc(var(--i) * 4px); width: 30px; height: 19px; border-radius: 50%;
  --c: #e8e3d6; --e: #fff;
  background:
    radial-gradient(ellipse 58% 58% at 50% 50%, var(--c) 0 62%, transparent 64%),
    repeating-conic-gradient(var(--c) 0 22deg, var(--e) 22deg 38deg);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 4px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25);
}
.chip.white { --c: #e8e3d6; --e: #6b7a99; }
.chip.red { --c: #c8272f; --e: #f3ede0; }
.chip.green { --c: #1f8a4c; --e: #f3ede0; }
.chip.black { --c: #22252c; --e: #e2b04a; }
.chip.purple { --c: #6b3fa0; --e: #f3ede0; }
.chip.gold { --c: #e0b23a; --e: #5a3d06; }
.chip.orange { --c: #e0702a; --e: #1c1f26; }
.chip.blue { --c: #2a6fd6; --e: #f3ede0; }

.bet {
  transform: translate(-50%, -50%); z-index: 5; display: none; align-items: flex-end; gap: 8px;
}
.bet.show { display: flex; }
.bet .num, .pot-label {
  font-weight: 700; font-size: 15px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08); margin-bottom: 2px;
}
.pot { transform: translate(-50%, -50%); z-index: 4; display: none; align-items: flex-end; gap: 10px; }
.pot.show { display: flex; }
.pot-label { font-size: 16px; font-weight: 600; color: var(--text-2); }
.pot-label b { color: #fff; margin-left: 4px; }
.flyer { transform: translate(-50%, -50%); z-index: 30; pointer-events: none; }

.dealer-button {
  width: 36px; height: 36px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #15181d;
  background: radial-gradient(circle at 40% 30%, #ffffff, #d9dce2);
  box-shadow: 0 3px 0 #9aa0aa, 0 6px 12px rgba(0,0,0,.5), inset 0 0 0 3px #fff, inset 0 0 0 4px #c7ccd4;
  transition: left .5s cubic-bezier(.3,.7,.2,1), top .5s cubic-bezier(.3,.7,.2,1);
}
.dealer-button[hidden] { display: none; }

/* ---------- session panel ---------- */
.session {
  left: 20px; top: 20px; width: 170px; padding: 12px 14px; z-index: 8; border-radius: 12px;
  background: rgba(14,18,24,.82); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.s-title { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.s-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); padding: 2px 0; }
.s-row b { color: var(--text); }
.up { color: #4ad08a !important; }
.down { color: #ff8a8e !important; }

/* ---------- action bar ---------- */
.action-bar {
  flex: none; height: 124px; position: relative; z-index: 15; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0d1117, #0a0d12); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.action-bar:not(.active) .raise-row, .action-bar:not(.active) .buttons { display: none; }
.action-bar.active .waiting { display: none; }
.waiting { color: var(--muted); font-size: 14px; letter-spacing: .3px; }
.raise-row { display: flex; align-items: center; gap: 10px; width: min(760px, 100%); }
.raise-row[hidden] { display: none !important; }
.presets { display: flex; gap: 5px; flex: none; }
.btn.preset { padding: 6px 11px; font-size: 12.5px; border-radius: 999px; background: #171e28; }
#raiseSlider { flex: 1; min-width: 100px; accent-color: var(--accent); }
.num-input { width: 96px; font: inherit; font-weight: 700; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: center; }
.buttons { display: flex; gap: 10px; width: min(760px, 100%); }
.btn.act { flex: 1; padding: 13px; font-size: 17px; font-weight: 800; border-radius: 12px; border: none; box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35); letter-spacing: .2px; }
.btn.act:hover { filter: brightness(1.08); }
.btn.act.fold { background: linear-gradient(180deg, #4c5462, #353b46); }
.btn.act.call { background: linear-gradient(180deg, #2f8fe8, #1b67b8); }
.btn.act.raise { background: linear-gradient(180deg, #f2a53c, #cf701b); color: #1d0f02; }
.btn.act.raise kbd { border-color: rgba(0,0,0,.25); }
.btn.act[hidden] { display: none; }

/* ---------- log ---------- */
.log-panel {
  position: absolute; top: 12px; bottom: 12px; right: 12px; width: min(320px, calc(100vw - 24px)); z-index: 25;
  background: rgba(16,21,28,.97); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.log-panel[hidden] { display: none; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
#log { list-style: none; margin: 0; padding: 8px 14px; overflow-y: auto; font-size: 13px; line-height: 1.65; color: var(--text-2); }
#log li.hand { margin-top: 10px; color: var(--accent-2); }
#log li.street { color: #9cc8ff; }
#log li.win { color: #8ee0b2; font-weight: 600; }

body.spectating .action-bar { height: 52px; }
@media (max-width: 760px) {
  .action-bar { height: 156px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .raise-row { flex-wrap: wrap; justify-content: center; }
  .presets { width: 100%; justify-content: center; }
  .btn.act { font-size: 15px; padding: 12px 6px; }
  .btn.act kbd { display: none; }
}
/* Phones in landscape: reclaim vertical space. */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { height: 46px; flex-wrap: nowrap; padding: 0 10px; gap: 10px; }
  .topbar .btn.sm { padding: 5px 9px; font-size: 12px; }
  .wallet-label, .play-tag { display: none; }
  .top-actions { width: auto; margin-left: auto; }
  .action-bar { height: 70px; flex-direction: row; gap: 10px; padding: 6px 12px; }
  .raise-row { width: auto; flex: 1; flex-wrap: nowrap; }
  .presets { display: none; }
  .buttons { width: auto; flex: 1.4; }
  .btn.act { padding: 10px 6px; font-size: 14px; }
  .btn.act kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dealer-button, .dealer-bubble, .tag { transition: none; }
  .dealer-art, .dealer.dealing .dealer-art { animation: none; }
}

/* ---------- dealer motion ---------- */
.dealer-art { transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.012); }
}
.dealer.dealing .dealer-art { animation: deal-lean 1s cubic-bezier(.3,.7,.3,1) 1, breathe 4.2s ease-in-out 1s infinite; }
@keyframes deal-lean {
  0% { transform: none; }
  30% { transform: translateY(8px) rotate(-1.6deg) scale(1.02); }
  60% { transform: translateY(6px) rotate(1.2deg) scale(1.02); }
  100% { transform: none; }
}

/* ---------- showdown highlight ---------- */
.scene.showdown #board .card.face:not(.hl),
.scene.showdown .seat.winner .hole .card.face:not(.hl) { filter: brightness(.5) saturate(.6); transition: filter .4s; }
.card.hl { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
#board .card.hl { transform: translateY(-12px); box-shadow: 0 0 0 3px #f4d27f, 0 0 26px rgba(244,210,127,.65), 0 10px 18px rgba(0,0,0,.5); }
.seat.winner .hole .card.hl { box-shadow: 0 0 0 3px #f4d27f, 0 0 22px rgba(244,210,127,.6); }
.seat.winner .plate { animation: winner-pulse 1.1s ease-in-out 3; }
@keyframes winner-pulse { 50% { box-shadow: 0 0 0 4px rgba(74,208,138,.55), 0 0 60px rgba(74,208,138,.75), 0 12px 28px rgba(0,0,0,.6); } }

.float-text {
  z-index: 40; pointer-events: none; white-space: nowrap; font-weight: 900; font-size: 34px; letter-spacing: .5px;
  color: #ffe08a; text-shadow: 0 2px 0 #7a5410, 0 0 18px rgba(255,200,80,.7), 0 6px 14px rgba(0,0,0,.6);
}

/* ---------- seat rotation ---------- */
.seat.joining { animation: join-seat .8s cubic-bezier(.2,.8,.2,1); }
@keyframes join-seat { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.seat.joining .plate { animation: join-plate .8s cubic-bezier(.2,.8,.2,1); }
@keyframes join-plate { from { transform: translateY(18px) scale(.85); } to { transform: none; } }

/* ================= Game lobby side panel ================= */
.app-body { flex: 1; display: flex; min-height: 0; }
.play-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.game-panel {
  flex: none; width: 360px; overflow-y: auto; padding: 18px 18px 22px; position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #121821, #0d1218); border-left: 1px solid var(--line);
}
.game-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
.game-panel .lobby-head { flex-direction: column; align-items: stretch; gap: 10px; }
.game-panel .mode-tabs button { flex: 1; }
.game-panel .games { grid-template-columns: repeat(2, 1fr); }
.game-panel .stakes { grid-template-columns: repeat(3, 1fr); }
.game-panel .stake { font-size: 13px; padding: 9px 2px; }
.game-panel .buyin-val { font-size: 26px; }
.game-panel .modal-actions .btn { padding: 11px; }
.game-panel .name-field { flex-wrap: wrap; }
.now-playing {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.np-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ad08a; box-shadow: 0 0 0 3px rgba(74,208,138,.2); flex: none; }
.np-dot.off { background: #6b7686; box-shadow: none; }
.panel-close, .games-toggle { display: none !important; }

@media (max-width: 1100px) {
  .game-panel { width: 320px; padding: 14px; }
}
/* Small screens: the lobby slides in over the table. */
@media (max-width: 900px) {
  .game-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 45;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: -20px 0 60px rgba(0,0,0,.6); padding-top: 54px;
  }
  .game-panel.open { transform: none; }
  .panel-close { display: inline-flex !important; position: absolute; top: 12px; right: 12px; }
  .games-toggle { display: inline-flex !important; }
}
.game-panel { gap: 12px; padding-bottom: 0; }
.game-panel .game-tab { padding: 8px 10px; }
.game-panel .game-tab small { display: none; }
.game-panel .buyin { padding: 12px 14px; gap: 6px; }
.game-panel .buyin-val { font-size: 24px; }
.game-panel .modal-actions {
  position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 12px 18px 14px;
  background: linear-gradient(180deg, rgba(13,18,24,0), #0d1218 22%);
}
.game-panel .disclaimer { padding-bottom: 16px; }
@media (max-width: 1100px) { .game-panel .modal-actions { margin: 0 -14px; padding: 12px 14px 14px; } }
.game-panel > p.muted.small { display: none; }

/* ---------- live (video) dealer ---------- */
.dealer-live { display: none; width: 100%; height: auto; }
.dealer.live { width: 360px; height: auto; margin-top: -14px; }
.dealer.live .dealer-art { display: none; }
.dealer.live .dealer-live { display: block; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .6)); }
.dealer.live .dealer-plate { top: 108px; right: -92px; }
.scene.portrait .dealer.live { width: 300px; }
.dealer.live .dealer-plate { display: none; }