:root {
  color-scheme: dark;
  --bg: #191719;
  --panel: #211e20;
  --panel-soft: #2b2528;
  --felt: #532832;
  --felt-deep: #321d24;
  --line: #49383d;
  --line-soft: #60474b;
  --text: #f1e5d5;
  --muted: #aaa098;
  --gold: #d1ac70;
  --red: #b7443c;
  --green-muted: #91a18e;
  --shadow: 0 16px 44px #0008;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  background: radial-gradient(ellipse at 50% -18%, #38242a 0, #211d20 34%, var(--bg) 73%);
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background-image: radial-gradient(#d9b77e .5px, transparent .5px);
  background-size: 29px 29px;
}
button, input, select { font: inherit; }
button {
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 750;
  color: var(--text);
  background: var(--panel-soft);
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, opacity .14s ease;
  -webkit-tap-highlight-color: transparent;
}
button:hover:not(:disabled):not(.seat) { transform: translateY(-1px); border-color: #89644c; }
button:active:not(:disabled):not(.seat) { transform: translateY(1px) scale(.99); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.app-shell { position: relative; width: min(1540px, 100%); margin: 0 auto; padding: 10px 22px 24px; }
.topbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.brand-lockup { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-lockup img { display: block; width: clamp(155px, 19vw, 206px); height: auto; }
.table-identity { display: grid; gap: 3px; min-width: 0; }
.table-identity strong { color: #f2e6cf; font-size: 16px; letter-spacing: .015em; }
.table-identity span { color: var(--muted); font-size: 11px; }
.topbar-right { display: flex; align-items: center; gap: 9px; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 12px; }
.main-nav button { min-height: 34px; padding: 7px 10px; border: 1px solid transparent; background: transparent; color: #d1c3b2; font-size: 11px; }
.main-nav button:hover { border-color: #634a3e; background: #2a211f; color: #f0dfbd; }
.connection { display: flex; align-items: center; gap: 7px; border: 1px solid #51443d; border-radius: 999px; padding: 6px 10px; color: #c6b9a9; font-size: 11px; white-space: nowrap; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #82776f; }
.connection.connected i { background: var(--green-muted); box-shadow: 0 0 8px #91a18e80; }
.connection.reconnecting i { background: var(--gold); }
.connection.disconnected i { background: var(--red); }
.connection-recovery { position: fixed; z-index: 100; top: 72px; left: 50%; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(660px,calc(100vw - 24px)); padding: 12px 14px; transform: translateX(-50%); border: 1px solid #876f4c; border-left: 3px solid var(--gold); border-radius: 10px; background: #211d1df5; color: #efe4d5; box-shadow: 0 12px 36px #0009; }
.connection-recovery strong { color: #e2c17d; font-size: 12px; }
.connection-recovery p { margin: 4px 0 0; color: #c8bbb0; font-size: 10px; line-height: 1.4; }
.connection-recovery-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.connection-recovery-actions button { min-height: 34px; }
.room-code { display: flex; align-items: center; gap: 4px; border: 1px solid #51443d; border-radius: 999px; padding: 3px 4px 3px 10px; color: #e5cf9e; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.room-code button { min-height: 27px; width: 28px; padding: 0; border-radius: 50%; background: transparent; color: #e5cf9e; font-size: 17px; }
.icon-button { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 1px solid #5c473e; border-radius: 50%; background: #211918; color: #e2c17d; font-size: 20px; }
.icon-button:hover:not(:disabled) { background: #362522; border-color: var(--gold); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.06; letter-spacing: -.025em; }
h2 { margin-bottom: 12px; font-size: 16px; }
.muted, .hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.hint { margin: 5px 0 0; }
.error { min-height: 18px; margin: 9px 0 0; color: #f09084; font-size: 12px; }
.home { display: grid; gap: 22px; }
.home-intro { max-width: 720px; }
.home-intro h1 { margin-bottom: 14px; }
.home-hero { max-width: 760px; padding: clamp(16px, 3vw, 30px) 0 2px; }
.home-hero h1 { font-size: clamp(38px, 6vw, 66px); }
.home-hero .muted { max-width: 570px; font-size: 14px; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mode-card { position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid #5b4540; border-radius: 18px; background: linear-gradient(155deg, #2a2022, #191719 75%); box-shadow: var(--shadow); }
.mode-card::after { position: absolute; right: -55px; bottom: -100px; width: 280px; height: 240px; border: 1px solid #cba45b26; border-radius: 50%; content: ""; pointer-events: none; }
.mode-card h2 { margin: 0 0 8px; color: #f3e8d7; font-size: 24px; }
.mode-card > p:not(.eyebrow) { max-width: 470px; color: #b9ada0; font-size: 13px; line-height: 1.6; }
.mode-card .primary { z-index: 1; width: auto; min-width: 190px; margin-top: auto; }
.mode-art { position: relative; width: 100%; height: 145px; margin-bottom: 12px; overflow: hidden; border: 1px solid #c69b5b35; border-radius: 13px; background: radial-gradient(ellipse at 50% 48%, #763839, #452528 62%, #24191a); }
.mode-art::before { position: absolute; inset: 20px 12%; border: 5px solid #b18a53; border-radius: 50%; box-shadow: inset 0 0 0 3px #291a1c, 0 0 22px #0008; content: ""; }
.art-chip { position: absolute; z-index: 1; left: 50%; top: 53%; display: grid; place-items: center; width: 64px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 5px dashed #dfc07d; border-radius: 50%; background: #702d36; color: #f3e5c1; font-size: 34px; box-shadow: 0 8px 20px #0008; }
.art-card { position: absolute; z-index: 2; left: calc(50% - 47px); top: 32px; display: grid; place-items: center; width: 47px; height: 66px; transform: rotate(-10deg); border: 1px solid #e8dcc8; border-radius: 5px; background: #f5efe4; color: #28201c; font-size: 22px; font-weight: 900; box-shadow: 0 5px 12px #0008; }
.art-card span, .headsup-board span { color: #a4393a; }
.second-card { left: calc(50% + 3px); transform: rotate(9deg); }
.headsup-art::before { inset: 24px 21%; border-width: 4px; }
.headsup-seat { position: absolute; z-index: 1; left: 50%; padding: 5px 11px; transform: translateX(-50%); border: 1px solid #d8b36e6c; border-radius: 999px; background: #211817; color: #ead7ae; font-size: 9px; letter-spacing: .1em; }
.top-seat { top: 9px; }.bottom-seat { bottom: 9px; }
.headsup-board { position: absolute; z-index: 1; top: 48%; left: 50%; transform: translate(-50%,-50%); padding: 8px 12px; border-radius: 7px; background: #171211; color: #f4eadb; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.available-games { padding: 18px; }
.available-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.available-heading h2 { margin-bottom: 0; font-size: 19px; }
.available-actions, .mode-choice-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; }
.open-table-list { display: grid; gap: 8px; }
.open-table-list.panel { padding: 14px; }
.open-table-card { display: grid; grid-template-columns: minmax(140px,1fr) minmax(180px,1.1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #51403a; border-radius: 12px; background: #191514; }
.open-table-card h3 { margin: 0 0 3px; font-size: 14px; }
.open-table-card p { margin-bottom: 2px; }
.open-table-card .eyebrow { font-size: 8px; }
.open-table-facts { display: flex; flex-wrap: wrap; gap: 7px 12px; color: #d3c5b1; font-size: 10px; }
.subpage { max-width: 1050px; margin: 0 auto; }
.subpage-heading { margin: 0 0 18px; }
.subpage-heading h1 { margin: 4px 0 10px; }
.back-link { min-height: 30px; padding: 4px 0; margin-bottom: 14px; background: transparent; color: #ddc185; }
.headsup-form { max-width: 820px; }
.custom-blinds { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.profile-placeholder { display: flex; align-items: center; gap: 14px; max-width: 560px; }
.profile-placeholder .profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 23px; }
.heads-up-info-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 17px; min-height: 34px; margin: 0 auto 5px; padding: 7px 12px; border: 1px solid #725734; border-radius: 10px; background: linear-gradient(90deg,#211918,#2d211e,#211918); color: #e8ddca; font-size: 10px; text-align: center; }
.heads-up-info-bar strong { color: var(--gold); letter-spacing: .08em; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 18px; align-items: start; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(155deg, #251d1bfa, #191513fa); box-shadow: var(--shadow); }
label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
input, select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #55433e; border-radius: 9px; background: #151210; color: var(--text); }
input:focus, select:focus { border-color: var(--gold); outline: 2px solid #d8b36e33; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.check-option { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #1b1715; cursor: pointer; }
.check-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--gold); }
.check-option span { display: grid; gap: 3px; }
.check-option strong { color: var(--text); font-size: 12px; }
.check-option small { color: var(--muted); font-size: 10px; line-height: 1.45; }
button.primary, button.raise { background: var(--gold); color: #211713; }
button.primary { width: 100%; margin-top: 14px; }
button.secondary { border-color: #57433d; background: #302623; color: #eee7db; }
button.fold { background: #a84039; color: #fff8f0; }
button.call { border-color: #5d6658; background: #343b34; color: #f1eee7; }
.rule-note { margin-top: 14px; padding: 11px 12px; border: 1px solid #57403a; border-radius: 10px; background: #211918; color: #d4c9bb; font-size: 11px; line-height: 1.5; }
.lobby-panel { max-width: 1080px; margin: 0 auto; }
.lobby-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; }
.lobby-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.lobby-code-row #lobbyCode { margin: 0; }
#lobbyCode { color: var(--gold); font-size: clamp(42px, 9vw, 76px); letter-spacing: .1em; margin-bottom: 4px; }
.share-box { min-width: min(340px, 100%); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #171412; }
.share-box span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.share-box code { display: block; margin-bottom: 8px; overflow-wrap: anywhere; color: #e1c68c; font-size: 11px; }
.lobby-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 22px; }
.pill { display: inline-block; padding: 3px 8px; border: 1px solid #665044; border-radius: 999px; color: #dfc79d; font-size: 10px; font-weight: 800; }
.player-list { display: grid; gap: 6px; }
.player-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #4b3935; border-radius: 9px; background: #1b1715; font-size: 12px; }
.player-row.you { border-color: #9b7546; background: #2b201b; }
.player-row .dot { width: 7px; height: 7px; border-radius: 50%; background: #62534a; }
.player-row .dot.online { background: var(--green-muted); }
.player-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row .tag { color: var(--muted); font-size: 9px; }
.player-row .tag.ready { color: #b7c5ac; }
.button-row { display: flex; gap: 8px; margin-top: 14px; }
.button-row button { flex: 1; }
.settings-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: 12px; }
.settings-list dt { color: var(--muted); }
.settings-list dd { margin: 0; text-align: right; font-weight: 700; }

/* Table layout */
#gamePanel { min-width: 0; }
.status-banner, .spectator-banner, .winner-banner { margin: 0 auto 8px; max-width: 860px; text-align: center; }
.status-banner { padding: 7px 12px; border: 1px solid #805348; border-radius: 9px; background: #30201e; color: #eee6dc; font-size: 12px; font-weight: 700; }
.spectator-banner { padding: 7px 10px; border: 1px solid #7d5842; border-radius: 9px; background: #2c211c; color: #e7c58c; font-size: 11px; }
.winner-banner { display: none; padding: 7px 10px; border: 1px solid #a37d49; border-radius: 9px; background: #30231c; color: #eed08e; font-size: 12px; font-weight: 800; }
.winner-banner.show { display: block; }
.rabbit { display: block; min-height: 34px; margin: 0 auto 8px; border-color: #9d5a4a; background: #71332f; color: #f4e8d6; font-size: 11px; }
.table-scene { position: relative; isolation: isolate; width: 100%; height: clamp(422px, 56vh, 580px); margin: 2px auto 0; }
.table-rail { position: absolute; inset: 56px 7.5%; border: 2px solid #87623f; border-radius: 50%; background: linear-gradient(150deg, #392723, #171413 52%, #3d2823); box-shadow: 0 20px 38px #0009, inset 0 1px 0 #f4cf7b33, inset 0 -9px 14px #0008; }
.table-felt { position: absolute; inset: 12px; overflow: visible; border: 1px solid #895e51; border-radius: 50%; background: radial-gradient(ellipse at 50% 46%, #603536 0, #48292b 54%, #321d20 100%); box-shadow: inset 0 0 45px #17090b88, inset 0 1px 0 #efd9b21e; }
.table-felt::after { content: ""; position: absolute; inset: 16px; border: 1px solid #d5b47e38; border-radius: 50%; pointer-events: none; }
.table-center { position: absolute; z-index: 4; left: 50%; top: 47%; display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(82%, 520px); translate: -50% -50%; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: none; }
.table-message-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 25px; min-height: 25px; overflow: hidden; padding: 3px 10px; border: 1px solid #805348; border-radius: 8px; background: #30201e; color: #eee6dc; font-size: 11px; font-weight: 750; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.table-message-slot.empty { visibility: hidden; }
.table-message-slot.is-transition { border-color: #755c3f; background: #28201c; color: #dfc48b; }
.table-message-slot.is-result { border-color: #a37d49; background: #30231c; color: #eed08e; }
.table-message-slot.special-result { border-color: #d2ad64; background: linear-gradient(90deg, #2f231b, #45321f, #2f231b); color: #f5dfa7; box-shadow: 0 0 14px #c49b4b3d; }
.hand-pill { color: #d2c2ae; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.pot, .pot-side { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid #735648; border-radius: 9px; background: linear-gradient(155deg, #33241f, #201817); color: #efd3a0; white-space: nowrap; box-shadow: 0 3px 8px #0005; }
.pot { order: 2; padding-inline: 10px; border-color: #a98038; }
.pot-copy { display: grid; gap: 1px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pot-label { color: #d0bda4; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.pot strong { font-size: 13px; }
.side-pots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(760px, 100%); margin: 0 auto 8px; }
.side-pots:empty { display: none; }
.pot-side strong { font-size: 10px; }
.equity-breakdown { width: min(360px, 100%); margin: 0 auto 8px; border: 1px solid #735648; border-radius: 8px; background: #211917ed; color: #ddd0bc; font-size: 10px; text-align: left; box-shadow: 0 3px 9px #0005; }
.equity-breakdown summary { display: flex; justify-content: space-between; padding: 5px 8px; color: #e5c27c; font-weight: 800; cursor: pointer; list-style: none; }
.equity-breakdown summary::-webkit-details-marker { display: none; }
.equity-breakdown summary span { color: #a99a87; font-weight: 600; }
.equity-lines { display: grid; gap: 5px; padding: 0 8px 7px; }
.equity-pot { display: grid; grid-template-columns: 1fr; gap: 2px; padding-top: 4px; border-top: 1px solid #493a32; }
.equity-pot strong { color: #e8d5b7; font-size: 8px; }
.equity-pot span { display: flex; justify-content: space-between; gap: 10px; color: #c6b9a6; }
.equity-pot span small { color: #a99a87; font-size: 7px; white-space: nowrap; }
.equity-pot b { color: #f0d08c; }
.chip-stack-visual { display: block; flex: 0 0 auto; width: 30px; height: 29px; overflow: visible; filter: drop-shadow(0 2px 2px #0008); }
.pot .chip-stack-visual { width: 36px; height: 34px; }
.board { order: 1; display: flex; justify-content: center; align-items: center; gap: clamp(4px, .7vw, 9px); min-height: 70px; }
.card, .card-slot { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; width: clamp(39px, 4vw, 52px); height: clamp(56px, 5.6vw, 72px); border-radius: 6px; }
.card { background: linear-gradient(160deg, #fffdf6, #e9e2d5); color: #201c19; font-weight: 850; box-shadow: 0 3px 0 #948879, 0 7px 14px #0003; line-height: 1; }
.card.red { color: #b83236; }
.card b { font-size: 17px; }
.card i { margin-top: 2px; font-size: 22px; font-style: normal; }
.card-slot { border: 1px solid #d7c19a4a; background: #251c1d38; box-shadow: inset 0 1px 3px #0004; }
.seats { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.seat { position: absolute; left: var(--seat-x); top: var(--seat-y); display: flex; align-items: center; gap: 6px; width: clamp(98px, 9.4vw, 124px); min-height: 54px; padding: 6px 7px; transform: none; translate: -50% -50%; transition: left .45s cubic-bezier(.2,.75,.25,1), top .45s cubic-bezier(.2,.75,.25,1), border-color .14s ease, background-color .14s ease, box-shadow .14s ease; overflow: visible; border: 1px solid #74584d; border-radius: 10px; background: linear-gradient(155deg, #211a18f5, #171312f5); color: var(--text); text-align: left; box-shadow: 0 7px 18px #0008, inset 0 1px 0 #fff1; pointer-events: auto; }
.heads-up-table .seat { width: clamp(145px, 16vw, 205px); min-height: 66px; padding: 8px 10px; }
.heads-up-table .table-rail { inset-inline: 13%; }
.heads-up-table .table-center { width: min(48%, 540px); }
.heads-up-table .card, .heads-up-table .card-slot { width: clamp(40px, 5.3vw, 64px); height: clamp(60px, 8vw, 90px); }
.seat:hover { z-index: 5; transform: none; translate: -50% -50%; border-color: #bd9656; box-shadow: 0 8px 18px #0008; }
.seat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.seat.actor { border-color: #d0a75d; box-shadow: 0 0 0 1px #d0a75d8a, 0 0 0 4px #d0a75d21, 0 7px 18px #0007; }
.seat.folded { opacity: .48; }
.seat.winner { border-color: #cfaa68; }
.seat.you-seat { background: linear-gradient(155deg, #34241e, #211715); }
.seat-avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border: 1px solid #c7a36a; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #e1c27f, #8c633b 72%, #553925); color: #221916; font-size: 11px; font-weight: 900; box-shadow: inset 0 1px 0 #fff2c5, 0 2px 5px #0006; }
.seat-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.dealer-button { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid #805f2e; border-radius: 50%; background: linear-gradient(145deg, #f4dc9e, #c29449); color: #291c12; font-size: 8px; font-weight: 950; line-height: 1; box-shadow: 0 1px 4px #0009; }
.seat.actor .seat-avatar { box-shadow: inset 0 1px 0 #fff2c5, 0 0 0 3px #d8b36e55; animation: seat-pulse 1.8s ease-in-out infinite; }
@keyframes seat-pulse { 0%,100% { box-shadow: inset 0 1px 0 #fff2c5, 0 0 0 2px #d8b36e3e; } 50% { box-shadow: inset 0 1px 0 #fff2c5, 0 0 0 4px #d8b36e28; } }
.seat-info { display: grid; min-width: 0; flex: 1; gap: 2px; }
.seat-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.seat .name { min-width: 0; overflow: hidden; color: #f1e8dc; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.seat .position { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #705747; border-radius: 4px; color: #d7c4a6; font-size: 7px; font-weight: 850; line-height: 1; }
.seat .position.dealer { border-color: #ad874b; background: #d4ae68; color: #211714; }
.seat-stack { color: #d3c7ba; font-size: 10px; font-weight: 700; white-space: nowrap; }
.seat-stack small { color: #978a7d; font-size: 8px; font-weight: 500; }
.seat-status { position: absolute; right: 6px; bottom: -8px; padding: 2px 5px; border: 1px solid #74523c; border-radius: 999px; background: #241a17; color: #d6b774; font-size: 7px; font-weight: 750; }
.seat-status.all-in-status { color: #f0d08c; }
.seat-bet { position: absolute; z-index: 3; right: 50%; bottom: -19px; transform: translateX(50%); padding: 3px 7px; border: 1px solid #74523c; border-radius: 999px; background: #241a17; color: #ebcb82; font-size: 8px; font-weight: 800; white-space: nowrap; }
.seat-bet.won { color: #f0d08c; }
.seat-equity { position: absolute; z-index: 4; top: -12px; right: -7px; display: flex; align-items: center; gap: 3px; padding: 2px 5px; border: 1px solid #a98038; border-radius: 999px; background: #201a19; color: #f0d08c; font-size: 8px; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 7px #0006; }
.seat-equity small { color: #bfae98; font-size: 6px; font-weight: 650; }
.seat-hole { display: flex; gap: 3px; margin-top: 3px; }
.seat-hole .card { width: 22px; height: 30px; border-radius: 4px; }
.seat-hole .card b { font-size: 9px; }
.seat-hole .card i { font-size: 12px; }
.seats.compact .seat { width: clamp(92px, 8vw, 116px); min-height: 46px; gap: 4px; padding: 5px; }
.seats.compact .seat-avatar { width: 22px; height: 22px; font-size: 9px; }
.seats.compact .seat .name { font-size: 9px; }
.seats.compact .seat-stack { font-size: 9px; }
.seats.crowded .seat { width: clamp(94px, 8vw, 116px); min-height: 48px; gap: 4px; padding: 5px; }
.seats.crowded .seat-avatar { width: 23px; height: 23px; font-size: 9px; }
.seats.crowded .seat .name { font-size: 9px; }
.seats.crowded .seat-stack { font-size: 9px; }
.bet-markers { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.bet-marker { position: absolute; left: var(--bet-x); top: var(--bet-y); display: flex; align-items: center; gap: 3px; width: max-content; padding: 1px 5px; border: 1px solid #a678577d; border-radius: 7px; background: #211615f0; translate: -50% -50%; color: #f5dda8; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 850; text-shadow: 0 1px 3px #000; opacity: 0; transform: scale(.78); transition: left .28s ease, top .28s ease, opacity .2s ease, transform .22s ease; }
.bet-marker.visible { opacity: 1; transform: scale(1); }
.bet-marker .chip-stack-visual { width: 22px; height: 21px; }
.bet-marker.collecting { opacity: 0; transform: scale(.55); }
.game-layout { width: min(980px, 100%); margin: 4px auto 0; }
.action-area { min-height: 184px; padding: 10px 12px; border: 1px solid #6b4e42; border-radius: 14px; background: linear-gradient(150deg, #261d1a, #1a1514); box-shadow: 0 10px 28px #0006; }
.hero-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 9px; border-bottom: 1px solid #4c3934; }
.hero-identity { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.hero-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid #b79356; border-radius: 50%; background: #5a3730; color: #f1dec0; font-size: 12px; font-weight: 900; }
.hero-identity div { display: grid; gap: 2px; }
.hero-identity strong { font-size: 11px; }
.hero-identity span:not(.hero-avatar) { color: var(--muted); font-size: 9px; }
.hero-cards { display: flex; gap: 5px; margin-right: auto; }
.hero-cards .card { width: 31px; height: 43px; }
.hero-cards .card b { font-size: 12px; }
.hero-cards .card i { font-size: 15px; }
.turn-clock { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 15px; margin: 0; }
#turnClockText { color: #e0bf78; font-size: 10px; font-weight: 800; }
.turn-clock.active #turnClockText { color: #f0cc7c; }
.turn-clock.urgent #turnClockText { color: #cf7765; }
.turn-track { width: min(210px, 34%); height: 4px; margin-top: 0; overflow: hidden; border-radius: 99px; background: #4b3530; }
.turn-fill { width: 0; height: 100%; border-radius: inherit; background: #bf5147; transition: width .15s linear; }
.bet-controls { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(320px, 1.15fr); align-items: center; gap: 14px; padding-top: 9px; }
.action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.action-row button { min-height: 43px; padding: 8px 9px; font-size: 12px; }
.bet-sizing { min-width: 0; }
.bet-sizing.unavailable { visibility: hidden; pointer-events: none; }
.bet-amount-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bet-amount-row label { margin: 0; white-space: nowrap; }
.amount-field { display: flex; align-items: center; gap: 6px; width: min(200px, 100%); padding-right: 8px; border: 1px solid #55433e; border-radius: 8px; background: #151210; }
.amount-field:focus-within { border-color: var(--gold); }
.amount-field input { min-width: 0; min-height: 34px; padding: 6px 8px; border: 0; background: transparent; outline: none; font-weight: 750; }
.amount-field span { color: #9b8d80; font-size: 9px; }
#amountSlider { display: block; width: 100%; height: 15px; min-height: 0; margin: 5px 0 0; padding: 0; accent-color: var(--gold); border: 0; background: transparent; cursor: pointer; }
.amount-range-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: -2px; color: #98897c; font-size: 8px; font-variant-numeric: tabular-nums; }
.amount-range-labels span:last-child { text-align: right; }
.amount-hint, #amountHint { margin: 0; color: #a99d91; font-size: 9px; }
.quick-sizes { display: flex; gap: 5px; margin-top: 5px; }
.size-button { flex: 1; min-height: 28px; padding: 4px 6px; border: 1px solid #55433e; border-radius: 7px; background: #221a18; color: #d6c9b8; font-size: 9px; }
.size-button:hover:not(:disabled) { border-color: #a07e51; color: #f0d49b; }
.size-button.all-in-size { color: #e0bf78; }
.spectating .bet-controls, .spectating .hero-summary { display: none; }
.spectator-access { display: grid; align-content: center; min-height: 76px; gap: 6px; color: #d9cbbb; font-size: 11px; text-align: center; }
.spectator-access strong { color: #e4c47f; font-size: 14px; }
.spectator-access span { color: var(--muted); }
.notice { min-height: 15px; margin: 5px 0 0; color: #e6c17d; font-size: 10px; }
.notice:empty { visibility: hidden; }
.table-info { display: flex; justify-content: center; gap: 8px; margin: 7px auto 0; }
.side-box { width: min(350px, 50%); border: 1px solid #4e3c36; border-radius: 9px; background: #1e1816; }
.side-box summary { display: flex; justify-content: space-between; gap: 18px; padding: 8px 10px; color: #d9ccbb; font-size: 10px; font-weight: 750; cursor: pointer; list-style: none; }
.side-box summary::-webkit-details-marker { display: none; }
.side-box summary span { color: #a28c6a; transition: transform .15s ease; }
.side-box[open] summary span { transform: rotate(180deg); }
.standings, .history { display: grid; gap: 4px; max-height: 180px; padding: 0 10px 9px; overflow: auto; }
.standing, .history-row { display: flex; justify-content: space-between; gap: 7px; color: #c8bdb1; font-size: 9px; }
.standing .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing.out { opacity: .5; }
.history-row { display: block; padding: 5px 0; border-bottom: 1px solid #3b2d29; line-height: 1.5; }
.tournament-result { width: min(980px, 100%); margin: 10px auto; padding: 16px; border: 1px solid #9b7745; border-radius: 12px; background: linear-gradient(145deg, #30231d, #1d1715); text-align: center; box-shadow: 0 10px 28px #0006; }
.tournament-result .eyebrow { margin-bottom: 5px; font-size: 9px; }
.tournament-result h2 { margin: 0 0 10px; color: #efd28f; font-size: clamp(16px, 2vw, 23px); }
.final-placements { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
.final-placements span { padding: 5px 8px; border: 1px solid #4e3c36; border-radius: 7px; background: #211917; color: #e0d6c8; font-size: 10px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); max-width: min(500px, 90vw); padding: 9px 13px; border: 1px solid #84554a; border-radius: 9px; background: #2b201d; color: #f0d29a; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.toast.show { opacity: 1; }
.toast.chat-toast { left: auto; right: 16px; bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); transform: none; }

/* Compact table chat, kept clear of the action controls. */
.chat-widget { position: fixed; z-index: 38; right: 16px; bottom: clamp(184px, 24vh, 244px); display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.chat-toggle { position: relative; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid #a27a42; border-radius: 50%; background: linear-gradient(145deg, #3b2925, #1c1514); color: #efd5a1; box-shadow: 0 6px 20px #0009; pointer-events: auto; }
.chat-toggle:hover:not(:disabled) { transform: translateY(-1px); border-color: #d5b470; }
.chat-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-unread { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid #f0d7a6; border-radius: 999px; background: #8d3938; color: #fff4df; font-size: 9px; font-weight: 900; }
.chat-panel { position: absolute; right: 0; bottom: 52px; display: flex; flex-direction: column; width: min(340px, calc(100vw - 26px)); height: min(390px, 42vh); min-height: 250px; overflow: hidden; border: 1px solid #80604b; border-radius: 13px; background: linear-gradient(160deg, #29201e, #171412); color: #eee5d8; box-shadow: 0 18px 55px #000c; pointer-events: auto; }
.chat-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 11px 12px 9px; border-bottom: 1px solid #4c3832; background: #241a18; }
.chat-header h2 { margin: 0; color: #f0dfbd; font-size: 13px; }
.chat-mode { margin: 3px 0 0; color: #a99a89; font-size: 9px; }
.chat-close { width: 28px; min-height: 28px; padding: 0; border: 1px solid #61463d; border-radius: 50%; background: #1b1514; color: #dec99e; font-size: 18px; line-height: 1; }
.chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; margin: 0; padding: 11px 12px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.chat-empty { margin: auto; color: #a99b8b; font-size: 11px; text-align: center; }
.chat-message { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 8px; min-width: 0; }
.chat-message-head { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
.chat-sender { overflow: hidden; color: #e4c581; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.chat-you { color: #d9b77a; font-size: 8px; }
.chat-time { color: #93877d; font-size: 8px; white-space: nowrap; }
.chat-message-text { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; color: #e3d9cd; font-size: 11px; line-height: 1.4; white-space: pre-wrap; }
.chat-error { display: none; flex: 0 0 auto; margin: 0; padding: 0 12px 5px; color: #e7a79c; font-size: 9px; }
.chat-error:not(:empty) { display: block; }
.chat-form { display: flex; flex: 0 0 auto; gap: 7px; padding: 9px; border-top: 1px solid #493632; }
.chat-form input { min-width: 0; flex: 1; min-height: 36px; padding: 7px 9px; border: 1px solid #65483e; border-radius: 8px; background: #120f0e; color: #f2e8dc; font-size: 11px; }
.chat-send { min-height: 36px; padding: 7px 11px; border: 1px solid #967443; border-radius: 8px; background: #392a21; color: #f0d7a7; font-size: 10px; }
.chat-read-only { flex: 0 0 auto; margin: 0; padding: 0 10px 10px; color: #b6a48f; font-size: 9px; }

/* Non-resizing stat explanations work with hover, keyboard focus, and touch. */
.profile-stat-label-row { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.stat-help { display: inline-grid; place-items: center; width: 16px; height: 16px; min-height: 16px; padding: 0; border: 1px solid #765845; border-radius: 50%; background: #241b18; color: #d6b576; font-size: 9px; font-weight: 850; line-height: 1; cursor: help; }
.stat-help:hover, .stat-help:focus-visible, .stat-help[aria-expanded="true"] { border-color: #d0ac68; background: #3b2922; color: #f5e3be; }
.stat-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(250px, calc(100vw - 24px)); padding: 8px 10px; border: 1px solid #927044; border-radius: 8px; background: #1b1514; color: #eee3d4; box-shadow: 0 8px 24px #000b; font-size: 10px; font-weight: 500; line-height: 1.45; pointer-events: auto; }

/* Dialogs and small menus */
.profile-dialog, .table-menu-dialog { width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; border: 1px solid #806a50; border-radius: 16px; background: transparent; color: var(--text); box-shadow: 0 24px 80px #000c; }
.profile-dialog::backdrop, .table-menu-dialog::backdrop { background: #100b0bd1; backdrop-filter: blur(4px); }
.profile-card, .table-menu-card { position: relative; padding: 22px; border-radius: inherit; background: radial-gradient(circle at 90% 0, #60322c 0, transparent 43%), linear-gradient(160deg, #29201e, #171412); }
.profile-close { position: absolute; top: 10px; right: 10px; width: 32px; min-height: 32px; padding: 0; border: 1px solid #684a40; border-radius: 50%; background: #1d1715; color: #f1e7d5; font-size: 21px; line-height: 1; }
.profile-heading { display: flex; align-items: center; gap: 12px; margin: 5px 0 16px; }
.profile-heading h2 { margin: 0 0 4px; color: #f4e5c1; font-size: 21px; }
.profile-avatar { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c9a850; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #d8b36e, #755126 72%); color: #171412; font-size: 19px; font-weight: 900; }
.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.profile-stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px; padding: 9px 10px; border: 1px solid #55403a; border-radius: 9px; background: #181413d9; }
.profile-stat-label { color: #d1c3b2; font-size: 10px; font-weight: 750; }
.profile-stat strong { color: #e0b96f; font-size: 15px; }
.profile-stat small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.profile-footnote { margin: 12px 0 0; color: #b7a99b; font-size: 10px; line-height: 1.5; }
.table-menu-dialog { width: min(350px, calc(100vw - 28px)); }
.table-menu-card { padding: 18px; }
.table-menu-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 34px 12px 0; }
.table-menu-heading h2 { margin: 0; color: #efdfbd; font-size: 16px; }
.table-menu-heading .profile-close { top: 12px; right: 12px; }
.menu-group { display: grid; gap: 4px; }
.menu-section-label { margin: 7px 2px 0; padding-top: 8px; border-top: 1px solid #493632; color: #cbae76; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.menu-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #e5d9ca; text-align: left; font-size: 11px; }
.menu-action:hover:not(:disabled) { transform: none; border-color: #55403a; background: #302321; }
.menu-action span { color: #c7a766; }
.sound-volume-label { display: flex; justify-content: space-between; margin: 5px 8px 0; color: #cfc1ad; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.sound-volume-label output { color: #e2c17d; font-variant-numeric: tabular-nums; }
.sound-volume { min-height: 20px; margin: 0 7px 4px; width: calc(100% - 14px); accent-color: #d8b36e; }
.audio-note { margin: 0 8px 4px; color: #a99a89; font-size: 9px; line-height: 1.35; }
.menu-action.leave-action { margin-top: 4px; border-top: 1px solid #493632; border-radius: 0 0 8px 8px; color: #d98b7f; }
.menu-note { margin: 8px 2px 0; color: #94877c; font-size: 9px; line-height: 1.4; }
.game-settings-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid #493632; }
.game-settings-panel h3 { margin-bottom: 4px; color: #e6d6bd; font-size: 12px; }
.game-settings-panel .hint { margin: 0 0 9px; font-size: 9px; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; justify-content: center; margin: 0; }
  .home-grid, .lobby-columns { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-mode { grid-column: 1 / -1; }
  .lobby-head { flex-direction: column; }
  .share-box { width: 100%; }
  .table-scene { height: clamp(480px, 54vh, 540px); }
  .seat { width: clamp(112px, 16vw, 145px); }
  .game-layout { width: min(760px, 100%); }
}

@media (max-width: 600px) {
  .connection-recovery { top: 62px; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }
  .connection-recovery-actions button { flex: 1; }
  .chat-widget { right: 10px; bottom: calc(252px + var(--safe-bottom)); }
  .chat-toggle { width: 40px; min-height: 40px; }
  .chat-panel { right: -2px; bottom: 48px; width: min(380px, calc(100vw - 20px)); height: min(42vh, 350px); min-height: 220px; }
  .chat-header { padding: 9px 10px 8px; }
  .chat-messages { padding: 9px 10px; }
  .chat-form { padding: 7px; }
}

@media (max-width: 600px) {
  html, body { min-height: 100%; }
  body { overflow-x: hidden; }
  .app-shell { padding: 7px 10px calc(18px + var(--safe-bottom)); }
  #gamePanel:not(.hidden) { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
  .topbar { min-height: 41px; gap: 6px; margin-bottom: 7px; }
  .table-identity strong { font-size: 13px; }
  .table-identity span { max-width: 44vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 5px; }
  .main-nav { overflow-x: auto; justify-content: flex-start; gap: 0; padding: 1px 0 4px; }
  .main-nav button { flex: 0 0 auto; min-height: 31px; padding: 6px 8px; font-size: 10px; }
  .mode-card { min-height: 330px; padding: 16px; }
  .mode-grid { grid-template-columns: 1fr; }
  .daily-mode { grid-column: auto; }
  .brand-lockup img { width: 144px; }
  .mode-art { height: 126px; }
  .open-table-card { grid-template-columns: 1fr auto; }
  .open-table-facts { grid-column: 1 / -1; order: 2; }
  .available-heading { align-items: flex-start; }
  .available-actions > button { flex: 1 1 140px; }
  .connection { gap: 5px; padding: 5px 7px; font-size: 9px; }
  .connection i { width: 6px; height: 6px; }
  .room-code { gap: 2px; padding: 2px 2px 2px 7px; font-size: 8px; }
  .room-code button { width: 24px; min-height: 25px; font-size: 15px; }
  .icon-button { width: 32px; min-height: 32px; font-size: 17px; }
  .table-message-slot { height: 24px; min-height: 24px; font-size: 9px; }
  .table-scene { height: clamp(400px, 103vw, 450px); margin-top: 0; }
  .heads-up-table .table-rail { inset: 36px 1%; }
  .heads-up-table .table-center { width: 70%; }
  .heads-up-table .seat { width: clamp(116px, 32vw, 148px); min-height: 56px; padding: 6px; }
  .heads-up-table .card, .heads-up-table .card-slot { width: clamp(28px, 8vw, 40px); height: clamp(46px, 12vw, 56px); }
  .table-rail { inset: 43px 2%; border-width: 1px; }
  .table-felt { inset: 8px; }
  .table-felt::after { inset: 10px; }
  .table-center { top: 45%; gap: 6px; width: 88%; }
  .hand-pill { font-size: 8px; }
  .board { min-height: 54px; gap: 3px; }
  .card, .card-slot { width: clamp(22px, 6.4vw, 38px); height: clamp(44px, 11.5vw, 54px); }
  .card b { font-size: 13px; }
  .card i { font-size: 16px; }
  .pot { padding-inline: 8px; }
  .pot .chip-stack-visual { width: 29px; height: 28px; }
  .pot-label { font-size: 7px; }
  .pot-side { gap: 3px; padding: 2px 4px; }
  .pot-side .chip-stack-visual { width: 19px; height: 18px; }
  .bet-marker { gap: 2px; padding-inline: 3px; font-size: 8px; }
  .bet-marker .chip-stack-visual { width: 18px; height: 17px; }
  .seat { width: clamp(84px, 23vw, 106px); min-height: 48px; gap: 4px; padding: 5px; border-radius: 9px; }
  .seats.compact .seat { width: clamp(68px, 18.5vw, 82px); min-height: 41px; gap: 3px; padding: 4px; }
  .seats.nine-max .seat { width: clamp(64px, 17.7vw, 74px); }
  .seats.compact .seat-avatar { width: 18px; height: 18px; font-size: 8px; }
  .seats.compact .seat-info { gap: 1px; }
  .seats.compact .seat-name-row { gap: 2px; }
  .seats.compact .seat .name { max-width: 38px; font-size: 7px; }
  .seats.compact .seat .position { padding: 1px 2px; font-size: 5px; }
  .seats.compact .seat-stack { font-size: 7px; }
  .seats.compact .seat-stack small { display: none; }
  .seats.crowded .seat-avatar { width: 18px; height: 18px; font-size: 8px; }
  .seats.crowded .seat-info { gap: 1px; }
  .seats.crowded .seat-name-row { gap: 2px; }
  .seats.crowded .seat .name { max-width: 38px; font-size: 7px; }
  .seats.crowded .seat .position { padding: 1px 2px; font-size: 5px; }
  .seats.crowded .seat-stack { font-size: 7px; }
  .seats.crowded .seat-stack small { display: none; }
  .seat-avatar { width: 23px; height: 23px; font-size: 10px; }
  .seat-info { gap: 2px; }
  .seat-name-row { gap: 3px; }
  .seat .name { font-size: 8px; }
  .seat .position { padding: 1px 3px; font-size: 6px; }
  .seat-stack { font-size: 8px; }
  .seat-stack small { font-size: 7px; }
  .seat-status { font-size: 7px; }
  .seat-bet { bottom: -15px; padding: 2px 5px; font-size: 7px; }
  .seat-equity { top: -11px; right: -5px; padding: 2px 4px; font-size: 7px; }
  .seat-equity small { font-size: 5px; }
  .seat-hole { gap: 2px; margin-top: 2px; }
  .seat-hole .card { width: 16px; height: 22px; }
  .seat-hole .card b { font-size: 7px; }
  .seat-hole .card i { font-size: 9px; }
  .game-layout { width: 100%; margin-top: auto; }
  .action-area { min-height: 178px; position: sticky; z-index: 10; bottom: var(--safe-bottom); padding: 8px; border-radius: 12px; box-shadow: 0 -5px 24px #0007; }
  .hero-summary { gap: 7px; padding-bottom: 7px; }
  .hero-identity { min-width: 98px; gap: 6px; }
  .hero-avatar { width: 26px; height: 26px; font-size: 10px; }
  .hero-identity strong { font-size: 10px; }
  .hero-identity span:not(.hero-avatar) { font-size: 8px; }
  .hero-cards { gap: 4px; }
  .hero-cards .card { width: 27px; height: 37px; }
  .hero-cards .card b { font-size: 10px; }
  .hero-cards .card i { font-size: 13px; }
  .turn-clock { grid-column: 1; width: 100%; }
  .turn-track { width: min(130px, 38%); }
  #turnClockText { font-size: 9px; }
  .bet-controls { grid-template-columns: 1fr; gap: 6px; padding-top: 7px; }
  .action-row { gap: 5px; }
  .action-row button { min-height: 46px; padding: 8px 4px; border-radius: 8px; font-size: 11px; }
  .bet-amount-row label { font-size: 9px; }
  .amount-field { width: min(175px, 58%); }
  .amount-field input { min-height: 32px; font-size: 12px; }
  #amountSlider { margin: 2px 0 0; }
  #amountHint { font-size: 8px; }
  .quick-sizes { margin-top: 3px; }
  .size-button { min-height: 30px; font-size: 9px; }
  .table-info { margin-top: 6px; }
  .side-box { width: 50%; }
  .side-box summary { padding: 7px 8px; font-size: 9px; }
  .standing, .history-row { font-size: 8px; }
  .home { gap: 14px; }
  .panel { padding: 16px; border-radius: 14px; }
  .field-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .profile-card, .table-menu-card { padding: 18px 15px; }
  .toast { bottom: calc(12px + var(--safe-bottom)); }
  .toast.chat-toast { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; bottom: auto; }
}

/* Feltlane brand and Daily Five puzzle surfaces. */
.brand-hero { margin: 0; color: #f1e5d5; font-family: Georgia, "Times New Roman", serif; font-size: clamp(39px,6vw,66px); font-weight: 600; letter-spacing: .12em; }
.hero-tagline { margin: 5px 0 12px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px,2.4vw,25px); letter-spacing: .025em; }
.daily-art { display: flex; align-items: center; justify-content: center; gap: 8px; }
.daily-art::before { inset: 21px 11%; }
.daily-card-back { position: relative; display: grid; place-items: center; width: clamp(35px,4vw,48px); height: clamp(53px,6vw,68px); border: 1px solid #c9a76d; border-radius: 6px; outline: 2px solid #39282a; outline-offset: -4px; background: repeating-linear-gradient(45deg,#542d36 0 4px,#42252c 4px 8px); color: #e5cb94; font: 22px Georgia,serif; box-shadow: 0 5px 11px #0008; }
.daily-card-back:nth-child(1),.daily-card-back:nth-child(5) { transform: translateY(9px) rotate(-8deg); }
.daily-card-back:nth-child(2),.daily-card-back:nth-child(4) { transform: translateY(2px) rotate(-3deg); }
.daily-card-back:nth-child(3) { transform: translateY(-4px); }
.daily-home-status { min-height: 18px; color: #d1ac70; font-size: 11px; }
.daily-challenge-link { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding: 12px 15px; border-left:2px solid var(--gold); border-radius: 0 9px 9px 0; background:#221d20; color:#d2c6b8; font-size:11px; }
.daily-challenge-link .eyebrow { margin:0; font-size:9px; }
.daily-challenge-link button { margin-left:auto; }
/* Daily Five puzzle and hand builder */
.daily-page { max-width: 1010px; }
.daily-title,.daily-actions,.daily-puzzle-meta,.daily-board-heading,.daily-select-heading,.daily-controls,.daily-deck-heading {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.daily-title { margin:12px 0; }
.daily-title h1 { margin:0; font-size:clamp(24px,4vw,36px); }
.daily-actions { flex-wrap:wrap; justify-content:flex-end; }
.daily-actions button,.daily-controls button { min-height:34px; padding:5px 10px; font-size:11px; }
.daily-layout { display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:14px; align-items:start; }
.daily-shell { min-width:0; padding:15px; border-color:#594347; background:linear-gradient(135deg,#251d21,#191719); }
.daily-puzzle-meta { color:#c8bcae; font-size:11px; }
.daily-puzzle-meta strong { color:#efdfbf; }
.daily-starting-clue { margin:8px 0 12px; padding:8px 10px; border-left:3px solid var(--gold); border-radius:0 6px 6px 0; background:#39262c; color:#f1e5d5; font-size:14px; font-weight:750; }
.daily-board-heading,.daily-select-heading { margin-bottom:8px; }
.daily-board-heading h2,.daily-select-heading h2 { margin:0; color:#eee2ce; font:18px Georgia,serif; }
.daily-board-heading span,.daily-select-heading span { color:#cfbea7; font-size:11px; }
.daily-board { display:grid; gap:4px; }
.daily-board-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.daily-board-card { position:relative; display:flex; align-items:center; justify-content:center; gap:4px; height:34px; border:1px solid #6a5a57; border-radius:5px; background:#eee2d2; color:#221e1e; font-size:14px; font-weight:850; }
.daily-board-card i { font-style:normal; }
.daily-board-card.red,.daily-card.red,.daily-deck button.red { color:#a3313e; }
.daily-board-card small { position:absolute; right:4px; bottom:2px; font-size:9px; }
.daily-board-card.empty { background:#201c20; border:1px dashed #554448; }
.daily-board-row.current .daily-board-card { border-color:#c5a56c; }
.daily-board-row.current .daily-board-card.empty { background:#38262d; border-style:solid; }
.daily-board-card.exact,.daily-legend .exact { border-color:#6f9377; background:#385541; color:#fcf0df; }
.daily-board-card.rank,.daily-legend .rank { border-color:#ad8a49; background:#73582f; color:#fff0ce; }
.daily-board-card.miss,.daily-legend .miss { border-color:#625d63; background:#3a373b; color:#e5ddd3; }
.daily-board-row.revealing .daily-board-card { animation:daily-five-flip .25s ease both; }
.daily-board-row.revealing .daily-board-card:nth-child(2) { animation-delay:.035s; }
.daily-board-row.revealing .daily-board-card:nth-child(3) { animation-delay:.07s; }
.daily-board-row.revealing .daily-board-card:nth-child(4) { animation-delay:.105s; }
.daily-board-row.revealing .daily-board-card:nth-child(5) { animation-delay:.14s; }
@keyframes daily-five-flip { from { transform:rotateX(85deg); opacity:.55; } to { transform:rotateX(0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .daily-board-row.revealing .daily-board-card { animation:none; } }
.daily-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.daily-legend span { padding:3px 6px; border-radius:4px; font-size:10px; }
.daily-howto { margin-top:9px; color:#d5c8b6; font-size:11px; }
.daily-howto summary,.daily-card-picker summary { color:#e3bf82; cursor:pointer; font-weight:750; }
.daily-howto p { margin:7px 0 0; line-height:1.5; }
.daily-selection { display:grid; grid-template-columns:repeat(5,minmax(0,52px)); gap:6px; }
.daily-card,.daily-slot { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; height:43px; min-height:0; padding:0; border:1px solid #c5a56c; border-radius:6px; background:#f1e5d5; color:#201c1d; font-size:14px; font-weight:850; }
.daily-card small,.daily-deck small { font-size:15px; }
.daily-slot { border:1px dashed #614a50; background:#241c20; }
.daily-card.kept { background:#375343; color:#fff1da; border-color:#80a488; opacity:1; }
.daily-controls { justify-content:flex-end; margin-top:9px; }
.daily-controls .primary { width:auto; margin:0; }
.daily-lock-toggle { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; margin:0 auto 0 0; color:#ddcbb9; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; }
.daily-lock-toggle input { width:16px; height:16px; min-height:0; padding:0; margin:0; accent-color:var(--gold); }
.daily-validation { min-height:38px; display:grid; align-content:center; color:#dfcdb7; font-size:12px; line-height:1.35; }
.daily-validation p { margin:0; }
.daily-card-picker { border-top:1px solid #514048; padding-top:7px; font-size:12px; }
.daily-deck-heading { margin:7px 0; }
.daily-deck-heading .daily-lock-toggle { margin:0; }
.daily-suit-filter { display:flex; gap:4px; }
.daily-suit-filter button { min-width:31px; min-height:30px; padding:3px 6px; font-size:13px; }
.daily-suit-filter button[aria-pressed="true"] { border-color:var(--gold); background:#573440; }
.daily-deck { display:grid; grid-template-columns:repeat(var(--daily-ranks,13),minmax(0,44px)); gap:4px; max-height:190px; overflow:auto; padding:2px; }
.daily-deck button { display:flex; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:34px; padding:1px; border:1px solid #d5c6b2; border-radius:5px; background:#efe5d7; color:#201d1c; font-size:11px; font-weight:850; }
.daily-deck button:disabled { opacity:.42; }
.daily-deck button.ruled-out { filter:grayscale(1); opacity:.3; text-decoration:line-through; }
.daily-deck button.selected { background:#edd18c; border-color:#eedca5; outline:1px solid var(--gold); }
.daily-deck button.tested-exact { background:#395743; border-color:#8aaf91; color:#fff3df; opacity:1; }
.daily-known-info { display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; margin-top:10px; padding-top:8px; border-top:1px solid #514048; color:#dbcdbd; font-size:11px; line-height:1.4; }
.daily-known-info h3 { flex-basis:100%; margin:0 0 2px; color:#e7c78e; font-size:12px; }
.daily-known-info span { padding:2px 5px; border-radius:4px; background:#362a2e; }
.daily-known-info .known-confirmed { color:#deefde; background:#33493b; }
.daily-result { padding:12px; border:1px solid #725b3e; border-radius:8px; background:#292123; color:#f0e3cf; }
.daily-result strong { display:block; margin-bottom:4px; color:var(--gold); font:18px Georgia,serif; }
.daily-result small { display:block; margin-top:5px; font-size:11px; }
.daily-reveal { margin:8px 0; color:#f6e0ad; font-size:22px; }
@media (min-width:761px) and (max-height:690px) {
  .daily-title { margin:7px 0; }
  .daily-shell { padding:11px; }
  .daily-board-card { height:29px; }
  .daily-deck { max-height:150px; }
}
@media (max-width:760px) {
  .daily-layout { grid-template-columns:minmax(0,1fr); gap:9px; }
  .daily-title { margin:7px 0; }
  .daily-shell { padding:10px; }
  .daily-board-card { height:26px; }
  .daily-board { gap:3px; }
  .daily-deck { grid-template-columns:repeat(min(7,var(--daily-ranks,13)),minmax(0,1fr)); max-height:min(42dvh,305px); }
  .daily-deck button { min-height:42px; }
  .daily-controls button { min-height:38px; }
}
@media (max-width:360px) {
  .daily-controls { flex-wrap:wrap; }
  .daily-lock-toggle { flex:1 1 auto; }
}

@media (max-width: 370px) {
  .app-shell { padding-left: 7px; padding-right: 7px; }
  .table-identity strong { font-size: 12px; }
  .table-identity span { max-width: 38vw; }
  .connection { padding: 4px 5px; }
  .room-code { font-size: 7px; }
  .seat { width: 82px; gap: 3px; padding: 4px; }
  .seats.compact .seat { width: 68px; }
  .seats.nine-max .seat { width: 64px; }
  .seat-hole .card { width: 14px; height: 19px; }
  .seat-avatar { width: 20px; height: 20px; }
  .seat .name { max-width: 48px; }
  .board .card, .board .card-slot { width: 22px; height: 34px; }
  .board .card b { font-size: 11px; }
  .board .card i { font-size: 13px; }
  .board { min-height: 44px; }
}

@media (max-width: 600px) {
  .lobby-head { flex-direction: column; }
  .lobby-code-row { gap: 4px 9px; }
  .lobby-code-row #lobbyCode { font-size: clamp(38px, 12vw, 56px); }
  .lobby-code-row button { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .share-box { width: 100%; min-width: 0; }
  .player-row { flex-wrap: wrap; }
  .player-row .tag { font-size: 8px; }
  .action-row button { white-space: normal; line-height: 1.15; }
  .tournament-result { padding: 12px 8px; }
}

/* Heads-Up series and match-statistics surfaces. */
.heads-up-series-panel { width: min(1100px, calc(100% - 24px)); margin: 0 auto 8px; padding: 9px 13px; border: 1px solid #765c38; border-radius: 12px; background: linear-gradient(120deg,rgba(25,19,19,.96),rgba(44,30,28,.96),rgba(25,19,19,.96)); color: #efe6d5; box-shadow: 0 8px 24px #08050655; }
.series-scoreboard { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.series-score { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; width: min(680px,100%); gap: 14px; text-align: center; }
.series-score strong { overflow: hidden; color: #f3e8d5; font-size: clamp(13px,2vw,17px); text-overflow: ellipsis; white-space: nowrap; }
.series-score strong:first-child { text-align: right; }
.series-score strong:last-child { text-align: left; }
.series-score b { min-width: 68px; color: var(--gold); font-size: clamp(20px,3vw,27px); font-variant-numeric: tabular-nums; }
.series-score b i { color: #9c8360; font-size: .75em; font-style: normal; }
.series-context { color: #b6a890; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.series-match-message { display: grid; gap: 4px; width: min(680px,100%); margin: 8px auto 0; padding: 9px 12px; border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0; background: #120e0f88; font-size: 12px; }
.series-match-message .eyebrow { margin: 0; color: var(--gold); font-size: 9px; letter-spacing: .11em; }
.series-match-message h2 { margin: 0; font-size: 18px; }
.series-match-message span { color: #c2b7a5; font-size: 11px; }
.series-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.series-waiting { color: #cbbda8; font-size: 12px; }
.heads-up-match-stats { margin: 8px auto 0; width: min(680px,100%); color: #d9cebd; }
.heads-up-match-stats summary { width: fit-content; margin: auto; color: #d5bd8c; cursor: pointer; font-size: 11px; }
.match-stats-table { width: 100%; margin-top: 7px; border-collapse: collapse; font-size: 11px; }
.match-stats-table th,.match-stats-table td { padding: 5px 7px; border-bottom: 1px solid #6f574033; text-align: right; }
.match-stats-table thead th { color: #dbc89e; }
.match-stats-table th:first-child { text-align: left; }
.match-stats-table td { color: #f0e8dc; font-variant-numeric: tabular-nums; }
.series-gated { filter: saturate(.82); }
@media (max-width: 600px) {
  .heads-up-series-panel { width: calc(100% - 12px); padding: 8px; }
  .series-score { gap: 6px; }
  .series-score strong { font-size: 12px; }
  .series-score b { min-width: 54px; font-size: 20px; }
  .series-match-message { padding: 8px; font-size: 11px; }
  .series-actions button { flex: 1 1 auto; min-height: 40px; }
  .match-stats-table { font-size: 10px; }
  .match-stats-table th,.match-stats-table td { padding: 4px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-animation-mode]) *, :root:not([data-animation-mode]) *::before, :root:not([data-animation-mode]) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Premium table feedback: authoritative turns, events, and tournament state. */
.tournament-info-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; min-height: 32px; margin: 0 auto 4px; padding: 5px 10px; border: 1px solid #69503d; border-left: 2px solid #b99558; border-radius: 8px; background: linear-gradient(100deg, #211a18, #2b211d 50%, #211a18); color: #d9cbbb; font-size: 9px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tournament-info-bar span + span::before { content: "·"; margin-right: 9px; color: #806547; }
.tournament-info-bar .tour-info-level, .tournament-info-bar .tour-info-status { color: #e1c27f; font-weight: 850; }
.tournament-info-bar .tour-info-status { text-transform: capitalize; }
.seat.turn-active { border-color: #caa15b; box-shadow: 0 0 0 1px #cba45d88, 0 0 18px #b88b3c2e, 0 7px 18px #0008; }
.seat.winner { border-color: #d2b06c; box-shadow: 0 0 0 1px #d2b06c75, 0 0 15px #b98b3c3b, 0 7px 18px #0008; }
.seat.turn-active .seat-avatar { isolation: isolate; }
.seat.turn-active .seat-avatar::before { content: ""; position: absolute; z-index: 0; inset: -5px; border-radius: 50%; background: conic-gradient(var(--turn-color, #d9b76f) var(--turn-progress, 100%), #392c27 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); filter: drop-shadow(0 0 3px var(--turn-color, #d9b76f)); pointer-events: none; }
.seat.turn-active .seat-avatar { outline: 1px solid var(--turn-color, #d9b76f); outline-offset: 2px; }
.seat.turn-urgent .seat-avatar::before { animation: turn-ring-pulse 1.25s ease-in-out infinite; }
@keyframes turn-ring-pulse { 0%,100% { filter: drop-shadow(0 0 2px #b65e4d55); } 50% { filter: drop-shadow(0 0 6px #b65e4d99); } }
.seat-equity-track { display: block; width: 29px; height: 3px; overflow: hidden; border-radius: 99px; background: #513237; }
.seat-equity-track b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #97703c, #e4c27e); transition: width .45s ease; }
.seat-hand-name { position: absolute; z-index: 4; right: 50%; bottom: -22px; translate: 50% 0; padding: 2px 5px; border: 1px solid #775c3d; border-radius: 999px; background: #211a17; color: #e5ca92; font-size: 7px; white-space: nowrap; }
.seat-action-label { position: absolute; z-index: 7; left: 50%; top: -24px; translate: -50% 0; padding: 4px 7px; border: 1px solid #78634c; border-radius: 6px; background: #27211e; color: #eee3d2; font-size: 8px; font-weight: 900; letter-spacing: .035em; white-space: nowrap; pointer-events: none; animation: action-label-in .16s ease-out both; }
.action-fold { border-color: #625958; color: #b9b0aa; }
.action-check { border-color: #726d62; color: #e5ddcc; }
.action-call { border-color: #657660; background: #28352c; color: #d3e0cb; }
.action-raise { border-color: #ac884b; background: #3b2e20; color: #f0d18c; }
.action-allin { border-color: #b39057; background: linear-gradient(120deg, #55272a, #30201e); color: #f0d18c; }
@keyframes action-label-in { from { opacity: 0; translate: -50% 4px; } to { opacity: var(--action-opacity, 1); translate: -50% 0; } }
.card-back { border: 1px solid #b9975c; background: repeating-linear-gradient(45deg, #492b2c 0 3px, #382123 3px 6px); box-shadow: inset 0 0 0 2px #30201c, inset 0 0 0 3px #927044, 0 3px 0 #241718, 0 7px 14px #0005; }
.card-deal { transform-style: preserve-3d; will-change: transform, opacity; }
.card.winning-card { outline: 2px solid #d3b36e; outline-offset: 2px; box-shadow: 0 0 12px #d3b36e75, 0 3px 0 #948879, 0 7px 14px #0005; }
.table-felt.showdown-highlights .board .card:not(.winning-card) { filter: brightness(.78); }
.winner-banner { opacity: 0; transform: translateY(-4px); transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease; }
.winner-banner.show { opacity: 1; transform: translateY(0); }
.winner-banner.winner-special { border-color: #d2ad64; background: linear-gradient(90deg, #2f231b, #45321f, #2f231b); color: #f5dfa7; box-shadow: 0 0 16px #c49b4b3d; }
.award-chip-flight { position: absolute; z-index: 8; width: 17px; height: 17px; border: 2px dashed #f3d89a; border-radius: 50%; background: radial-gradient(circle, #d9b56f 0 38%, #8f572e 42% 100%); box-shadow: 0 2px 8px #000a, 0 0 8px #d9b56f75; pointer-events: none; }
:root[data-animation-mode="off"] *, :root[data-animation-mode="off"] *::before, :root[data-animation-mode="off"] *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
:root[data-animation-mode="reduced"] *, :root[data-animation-mode="reduced"] *::before, :root[data-animation-mode="reduced"] *::after { animation-duration: .15s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }

@media (max-width: 600px) {
  .tournament-info-bar { justify-content: flex-start; gap: 4px 9px; padding: 5px 7px; font-size: 8px; line-height: 1.25; }
  .tournament-info-bar span + span::before { margin-right: 5px; }
}