:root {
    color-scheme: dark;
    --bg-darkest: #0c1916;
    --bg-dark: #12231e;
    --bg-mid: #19392e;
    --bg-light: #21362e;
    --primary: #bce784;
    --primary-mid: #648a6e;
    --primary-light: #d1e8cb;
    --text-light: #f0f3eb;
    --text-muted: #9bafa3;
    --text-gold: #e7c890;
    --danger: #ee9992;
    --success: #bce784;
    --border-blue: #2b4137;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-darkest); color: var(--text-light); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; }
button { cursor: pointer; white-space: nowrap; }
button:disabled { opacity: .45; cursor: not-allowed; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.navbar { min-height: 76px; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-blue); }
.navbar-title { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-mark { font-size: 30px; color: var(--primary); }
.pixel-title { display: block; font-size: 18px; font-weight: 750; letter-spacing: 2px; }
.brand-caption { display: block; font-size: 11px; letter-spacing: 3px; color: var(--text-muted); }
.navbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.connection-status { font-size: 12px; margin-right: 10px; white-space: nowrap; }
.connected { color: var(--primary); }
.disconnected { color: var(--danger); }
.pixel-btn { border: 1px solid #45614e; background: #20362c; color: var(--text-light); border-radius: 8px; min-height: 44px; padding: 10px 18px; font-weight: 600; transition: background .15s; }
.pixel-btn:hover:not(:disabled) { background: #304c3b; }
.pixel-btn-small { padding: 10px 14px; font-size: 15px; }
.pixel-btn-primary { background: var(--primary); color: #152410; border-color: var(--primary); }
.pixel-btn-primary:hover:not(:disabled) { background: #d1f5a3; }
.pixel-btn-danger { color: var(--danger); border-color: #6a4a42; background: #302820; }
.main-container { display: grid; grid-template-columns: minmax(0, 1fr) 320px; max-width: 1800px; margin: auto; }
.table-area { min-width: 0; padding: 28px 28px 16px; }
.eyebrow { display: block; font-size: 11px; letter-spacing: 1.8px; font-weight: 600; color: var(--text-muted); }
h1 { margin: 6px 0; font-size: 28px; font-weight: 650; letter-spacing: -1px; }
.poker-table { position: relative; isolation: isolate; }
.table-arena { position: relative; height: clamp(640px, calc(100dvh - 300px), 800px); isolation: isolate; }
.table-arena.many-seats { min-height: 860px; }
.table-arena:has(.hand-result) { min-height: 760px; }
.table-arena.many-seats:has(.hand-result) { min-height: 860px; }
.table-felt { position: absolute; inset: 16% 9%; border: 10px solid #2a4537; border-radius: 48%; background: radial-gradient(ellipse, #24523f, #193e30 75%); box-shadow: 0 0 0 1px #58724b, inset 0 0 0 2px #375b42, 0 20px 40px #0003; z-index: -1; }
.table-felt::after { content: ''; position: absolute; inset: 15px; border: 1px solid #5f785047; border-radius: inherit; }
.seats { display: contents; }
.seat { position: absolute; left: var(--seat-x); top: var(--seat-y); transform: translate(-50%, -50%); width: 204px; padding: 14px; background: #172d24; border: 1px solid #45614b; border-radius: 12px; box-shadow: 0 5px 18px #0004; }
.seat-top { display: flex; gap: 8px; align-items: center; position: relative; }
.seat-avatar { width: 48px; height: 48px; background: #294b38; border-radius: 9px; image-rendering: pixelated; }
.seat-identity { min-width: 0; }
.seat-identity strong { display: block; font-size: 18px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 132px; }
.seat-identity span { display: block; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text-gold); }
.seat-identity small { font-size: 12px; color: var(--text-muted); }
.seat-identity em { margin-left: 5px; font-size: 13px; color: var(--primary); font-style: normal; }
.seat-position { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.seat-position:empty { display: none; }
.position-badge, .first-actor-badge, .current-actor-badge { display: inline-block; padding: 3px 7px; border-radius: 5px; font-size: 13px; font-weight: 750; line-height: 1.4; }
.position-badge { color: #f3f6ed; background: #395443; border: 1px solid #799781; }
.position-btn { color: #2e2411; background: #e9c77e; border-color: #f4dca5; }
.position-sb { color: #d9f1ff; background: #214d67; border-color: #629aba; }
.position-bb { color: #ffead6; background: #754622; border-color: #c69361; }
.first-actor-badge { color: #e8eee1; background: #344638; border: 1px dashed #94aa84; }
.current-actor-badge { color: #182710; background: var(--primary); }
.seat-bottom { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.hole-cards { display: flex; gap: 4px; }
.playing-card { background: #faf7ed; color: #1c2d27; width: 54px; height: 76px; border: 1px solid #ebe9d8; border-radius: 6px; display: inline-flex; flex-direction: column; justify-content: space-between; padding: 5px 7px; font-family: Georgia, serif; font-size: 22px; line-height: 1; box-shadow: 0 2px 4px #0002; flex-shrink: 0; }
.playing-card > span { align-self: flex-end; font-size: 25px; }
.playing-card.red { color: #be453e; }
.playing-card.card-back { background: repeating-linear-gradient(45deg, #324e3d, #324e3d 3px, #3c5945 3px, #3c5945 5px); border: 2px solid #a1b393; color: #a6b994; justify-content: center; align-items: center; font-size: 20px; }
.playing-card.card-slot { color: #78947e; background: #15362766; border: 1px dashed #78947e80; justify-content: center; align-items: center; box-shadow: none; }
.seat .playing-card { width: 36px; height: 50px; font-size: 17px; padding: 3px; border-radius: 3px; }
.seat .playing-card > span { font-size: 19px; }
.seat-action { display: flex; flex-direction: column; min-width: 0; font-size: 16px; color: #c9d8cb; }
.seat-action small { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.seat.is-thinking { border: 2px solid var(--primary); box-shadow: 0 0 0 4px #bce78418, 0 5px 18px #0004; }
.seat.is-thinking .seat-action > span { color: var(--primary); }
.seat.is-folded { opacity: .6; }
.own-seat { width: 240px; background: #253c2d; border-color: #86a76e; }
.own-seat .seat-identity strong { max-width: 132px; }
.own-seat .playing-card { width: 48px; height: 66px; font-size: 24px; padding: 4px; }
.own-seat .playing-card > span { font-size: 25px; }
.own-seat .seat-action { font-size: 16px; }
.community-board { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: max-content; }
.pot-label { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: #cbd6c2; margin: 10px 0 14px; font-size: 13px; }
.pot-label strong { font-size: 34px; font-weight: 600; letter-spacing: -1px; color: #f0ebce; font-variant-numeric: tabular-nums; }
.pot-label small { color: #9bb09e; font-size: 11px; }
.community-cards { display: flex; justify-content: center; gap: 6px; }
.board-caption { display: block; margin-top: 18px; font-size: 8px; color: #99b59c; letter-spacing: 1.5px; }
.empty-table { height: 100%; min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 40%; background: radial-gradient(ellipse at center, #23463270, transparent 65%); }
.empty-cards { display: flex; margin-bottom: 35px; }
.empty-cards .playing-card { width: 76px; height: 108px; font-size: 34px; padding: 10px; transform: rotate(-12deg); }
.empty-cards .playing-card + .playing-card { transform: rotate(12deg) translateY(-6px); margin-left: -8px; }
.empty-cards .playing-card > span { font-size: 42px; }
.empty-table h2 { font-size: 32px; letter-spacing: -1px; margin: 12px 0; font-weight: 600; }
.empty-table p { color: var(--text-muted); margin: 0; line-height: 1.9; }
.table-rules { display: flex; gap: 20px; font-size: 11px; color: #a8b7a8; margin-top: 30px; }
.human-action-panel { display: none; padding: 16px; background: #203729; border: 1px solid #718d54; border-radius: 12px; gap: 14px; position: relative; bottom: auto; z-index: 10; box-shadow: 0 4px 24px #0005; }
body.is-admin .human-action-panel.active { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.human-action-info { display: flex; flex-direction: column; gap: 2px; }
#humanActionTitle { color: var(--primary); font-size: 17px; font-weight: 700; }
#humanActionHint, #actionCountdown { font-size: 11px; color: #c0cbbb; }
#actionCountdown { color: #a8b995; }
.human-action-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.raise-control { display: flex; gap: 6px; }
.raise-input { width: 90px; max-width: 90px; height: 44px; }
.status-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 0; color: #c3d0c5; font-size: 18px; font-weight: 600; }
.stage-indicator { display: flex; gap: 4px; }
.stage-dot { padding: 5px 10px; border-radius: 5px; color: #a1b19f; }
.stage-dot.active { background: #304b32; color: #d3edb4; }
.status-item.gold { color: var(--text-gold); }
.side-panel { padding: 28px 18px 18px; border-left: 1px solid var(--border-blue); background: #102019; display: flex; flex-direction: column; min-width: 0; height: calc(100dvh - 76px); min-height: 600px; position: sticky; top: 0; }
.side-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-weight: 600; }
.side-heading small { color: #8eaa8c; font-size: 9px; letter-spacing: 1.5px; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-blue); margin-bottom: 16px; }
.tab-btn { flex: 1; min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); padding: 8px 4px; font-size: 15px; white-space: nowrap; }
.tab-btn.active { border-color: var(--primary); color: var(--primary); }
.tab-content { display: none; overflow-y: auto; min-height: 0; }
.tab-content.active { display: block; flex: 1; }
.log-container { height: 100%; overflow-y: auto; }
.log-entry { font-size: 14px; padding: 9px 8px; border-bottom: 1px solid #2b413750; line-height: 1.7; overflow-wrap: anywhere; }
.timestamp { color: #869d8a; font-size: 10px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.log-entry.system, .log-entry.thinking { color: #9cb39c; }
.log-entry.win { color: var(--text-gold); }
.log-entry.fold { color: #adb7aa; }
.log-entry.error { color: var(--danger); }
.pixel-input, .pixel-select { width: 100%; min-height: 44px; padding: 9px 10px; background: #0d1e16; border: 1px solid #426048; border-radius: 6px; color: var(--text-light); }
.pixel-input:disabled { opacity: .6; }
.form-group { margin-bottom: 12px; }
.form-label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 12px; }
.player-card, .settings-section { border: 1px solid var(--border-blue); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #14271c; }
.player-card-header, .model-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.player-card-title { color: var(--primary-light); }
.model-item { padding: 12px 0; border-bottom: 1px solid var(--border-blue); flex-wrap: wrap; }
.model-item-name { overflow-wrap: anywhere; }
.model-item-actions { display: flex; gap: 8px; }
.style-badge { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.settings-title { color: var(--primary-light); margin-bottom: 16px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.setting-label { font-size: 12px; color: var(--text-muted); }
.setting-value { width: 90px; }
.toggle-switch input { width: 22px; height: 22px; accent-color: var(--primary); }
.modal-overlay { display: none; position: fixed; inset: 0; padding: 16px; background: #06130ce6; align-items: center; justify-content: center; z-index: 100; }
.modal-overlay.active { display: flex; }
.modal-card { width: 400px; max-width: 100%; background: #182e21; border: 1px solid #56714d; border-radius: 16px; padding: 30px; position: relative; }
.modal-title { font-size: 21px; font-weight: 650; margin: 8px 0 10px; }
.modal-description { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.modal-close { border: 0; background: none; color: var(--text-muted); position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; font-size: 25px; }
.modal-error { color: var(--danger); min-height: 20px; margin-top: 10px; font-size: 13px; }
.admin-only, .admin-tab { display: none !important; }
body.is-admin .admin-only { display: flex !important; }
body.is-admin .admin-tab { display: block !important; }
body.is-admin .admin-only-inline { display: inline !important; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #3b533e; border-radius: 4px; }
@media (max-width: 1150px) {
    .main-container { grid-template-columns: minmax(0, 1fr); }
    .side-panel { position: static; height: 420px; min-height: 0; border-left: 0; border-top: 1px solid var(--border-blue); padding: 20px 28px; }
    .side-heading { margin-bottom: 8px; }
    .table-area { padding-bottom: 24px; }
    .table-arena { height: 660px; }
}
@media (max-width: 600px) {
    .navbar { padding: 12px 16px; gap: 12px; min-height: 70px; align-items: flex-start; }
    .navbar-title { gap: 8px; }
    .pixel-title { font-size: 14px; letter-spacing: 1px; }
    .brand-caption { font-size: 10px; letter-spacing: 2px; }
    .brand-mark { font-size: 25px; }
    .navbar-controls { gap: 4px; }
    .connection-status { margin: 0; font-size: 10px; }
    .navbar-controls > .pixel-btn { padding: 6px 8px; font-size: 11px; }
    #btnAdminLabel { display: none !important; }
    .game-controls { order: 3; width: 100%; justify-content: flex-end; }
    .game-controls .pixel-btn { min-height: 44px; padding: 6px 10px; font-size: 12px; }
    body.is-admin .navbar { flex-wrap: wrap; }
    body.is-admin .navbar-controls { flex: 1 1 100%; justify-content: flex-start; }
    body.is-admin .game-controls { width: auto; order: 0; margin-right: auto; }
    .table-area { padding: 22px 16px 18px; }
    h1 { font-size: 23px; }
    .poker-table { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 20px; padding: 12px 0; }
    .table-felt { inset: 12px -2px; border-width: 4px; border-radius: 90px; }
    .table-felt::after { display: none; }
    .seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 4px 4px 0; }
    .seat { position: relative; transform: none; left: auto; top: auto; width: auto; padding: 9px; min-width: 0; box-shadow: 0 4px 10px #0003; }
    .seat-avatar { width: 38px; height: 38px; }
    .position-badge, .first-actor-badge, .current-actor-badge { font-size: 12px; padding: 3px 5px; }
    .seat-identity strong { font-size: 16px; max-width: 105px; }
    .seat-identity span { font-size: 18px; }
    .seat-identity small { display: none; }
    .seat-action small { font-size: 12px; white-space: normal; }
    .own-seat { width: 244px; }
    .own-seat .seat-identity strong { font-size: 18px; }
    .own-seat .playing-card { width: 45px; height: 62px; font-size: 22px; }

    .community-board .playing-card { width: 43px; height: 60px; }
    .community-board .eyebrow { font-size: 10px; }
    .pot-label { margin: 4px 0 10px; }
    .pot-label strong { font-size: 28px; }
    .board-caption { margin-top: 12px; font-size: 7px; }


    .poker-table:has(.empty-table) { padding-bottom: 0; }
    .empty-table { min-height: 380px; }
    .empty-table h2 { font-size: 27px; }
    .empty-cards { margin-bottom: 30px; }
    .empty-cards .playing-card { width: 64px; height: 90px; font-size: 28px; }
    .empty-cards .playing-card > span { font-size: 32px; }
    .table-rules { gap: 12px; font-size: 9px; margin-top: 24px; }
    .human-action-panel { position: sticky; bottom: 0; margin: 12px -16px 0; border-radius: 14px 14px 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .human-action-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
    .human-action-controls .pixel-btn { padding: 12px 8px; font-size: 15px; }
    .raise-control { grid-column: span 2; grid-row: 2; }
    .raise-input { flex: 1; width: 0; min-width: 0; max-width: none; }
    .raise-control .pixel-btn { flex: 1; }
    .human-action-controls > .pixel-btn:last-child { grid-column: 3; }
    #humanActionHint { font-size: 13px; }
    #humanActionTitle { font-size: 18px; }
    .pixel-input, .pixel-select { font-size: 16px; }
    .status-bar { font-size: 16px; gap: 10px; }
    .stage-indicator { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid var(--border-blue); padding-top: 8px; }
    .stage-dot { flex: 1; text-align: center; }
    .side-panel { padding: 20px 16px; height: 420px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.action-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.action-hand { display: flex; gap: 4px; }
.action-hand .playing-card { width: 32px; height: 46px; font-size: 16px; padding: 4px; }
.action-hand .playing-card > span { font-size: 17px; }
@media (max-width: 600px) {
    .action-summary { width: 100%; }
    .human-action-info { min-width: 0; }
    #humanActionHint { max-width: 250px; }
    .human-action-controls > .pixel-btn:nth-child(2) { grid-column: 2 / 4; }
    .human-action-controls > .pixel-btn:last-child { grid-column: 3; grid-row: 2; }
}

/* Persistent, readable action and settlement feedback. */
.action-ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 54px; padding: 12px 16px; margin-top: 12px; background: #142a21; border: 1px solid #35513d; border-radius: 10px; color: #b0c4b6; font-size: 15px; }
.action-ticker > span { font-size: 12px; color: #b7c7b0; }
.action-ticker.active { background: #30462a; border-color: #bce784; }
.action-ticker strong { color: #f2f5e9; font-size: 17px; }
.action-ticker b { color: var(--primary); font-size: 18px; }
.seat.has-recent-action { opacity: 1; border-color: #e7c890; box-shadow: 0 0 0 4px #e7c89022; z-index: 2; }
.action-flash, .winner-badge { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); padding: 7px 12px; border-radius: 8px; background: #e7c890; color: #202d1b; font-size: 16px; font-weight: 750; white-space: nowrap; box-shadow: 0 4px 16px #0005; }
.action-flash small { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
.action-fold { background: #e8ada6; }
.action-raise, .action-all_in { background: #e7c890; }
.action-check, .action-call { background: #c5e6a0; }
.seat.is-winner { opacity: 1; border: 2px solid #f0d488; box-shadow: 0 0 0 5px #f0d48826, 0 0 30px #efd08424; }
.winner-badge { background: #f0d488; font-size: 14px; }
.hand-result { width: 320px; max-width: 100%; padding: 18px 16px; margin-bottom: 14px; border: 1px solid #d5be7c; background: #203326f5; border-radius: 16px; box-shadow: 0 10px 30px #0004; }
.result-kicker { font-size: 12px; color: #ddcd9e; }
.hand-result h2 { margin: 4px 0 12px; color: #f4da94; font-size: 25px; }
.result-winners { max-height: 174px; overflow-y: auto; }
.result-winner { display: flex; flex-direction: column; padding: 7px 0; gap: 3px; }
.result-winner + .result-winner { border-top: 1px solid #d5be7c40; }
.result-winner strong { font-size: 22px; overflow-wrap: anywhere; }
.result-winner b { font-size: 19px; color: #f4da94; }
.result-winner small { font-size: 13px; }
.result-winner span { font-size: 15px; color: #d2dec7; }
.hand-result p { margin: 12px 0 0; font-size: 12px; color: #b7c7af; }
@media (max-width: 900px) {
    .table-arena, .table-arena.many-seats, .table-arena:has(.hand-result) { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 36px; padding: 30px 0; }
    .seats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px 14px; }
    .seat { position: relative; left: auto; top: auto; transform: none; width: auto; min-width: 0; }
    .community-board { position: relative; top: auto; bottom: auto; left: auto; transform: none; width: auto; align-self: center; }
    .hero-seat-slot { display: flex; justify-content: center; }
    .own-seat { width: 250px; }
    .table-felt { inset: 12px 0; border-radius: 90px; }
    .seat-identity strong { max-width: 120px; }
}
@media (max-width: 600px) {
    .poker-table { display: block; }
    .table-arena { gap: 36px; padding: 26px 4px; }
    .seats { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; gap: 36px 10px; }
    .seat { padding: 10px 8px; }
    .seat-top { gap: 6px; }
    .seat-identity strong { max-width: 100px; }
    .seat-bottom { gap: 6px; flex-wrap: wrap; }
    .seat-action { font-size: 15px; }
    .seat .playing-card { width: 30px; height: 43px; font-size: 16px; }
    .seat .playing-card > span { font-size: 17px; }
    .own-seat .playing-card { width: 48px; height: 66px; font-size: 24px; }
    .own-seat .playing-card > span { font-size: 26px; }
    .action-ticker { margin-top: 0; font-size: 13px; gap: 4px 8px; padding: 10px 12px; }
    .action-ticker strong, .action-ticker b { font-size: 16px; }
    .action-flash { font-size: 14px; padding: 6px 9px; max-width: 100%; white-space: normal; width: max-content; }
    .action-flash small { font-size: 10px; }
    .hand-result { width: min(320px, calc(100vw - 52px)); }
}

/* Status messages float above the table without reserving vertical space. */
.table-notice { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 10px 14px; border: 1px solid var(--border-blue); border-radius: 8px; background: var(--bg-dark); color: var(--text-gold); font-size: 14px; pointer-events: none; }
.table-notice:empty { display: none; }

/* Analysis stays compact until the player asks for details. */
.poker-advisor { margin-top: 14px; background: #152a21; border: 1px solid #385440; border-radius: 12px; }
.poker-advisor[hidden], .poker-advisor [hidden] { display: none !important; }
.analysis-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
#analysisMetrics { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; flex: 1; font-size: 14px; color: #b8c9bc; }
#analysisMetrics strong { font-size: 21px; color: #d4efad; font-variant-numeric: tabular-nums; }
#analysisMetrics b { color: #e6ce98; font-size: 16px; }
.analysis-details { border-top: 1px solid #385440; padding: 16px; }
.analysis-numbers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 22px; }
.analysis-numbers span { display: block; color: #a5baa9; font-size: 13px; }
.analysis-numbers strong { display: block; margin-top: 4px; font-size: 17px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.analysis-threats { font-size: 14px; color: #e6ce98; margin: 18px 0; }
.analysis-coach { border-top: 1px solid #385440; padding-top: 14px; }
#analysisAdvice { font-size: 16px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.analysis-assumptions { margin: 16px 0 0; font-size: 12px; line-height: 1.7; color: #a5baa9; }
@media (max-width: 600px) {
    .analysis-summary { padding: 10px; gap: 8px; flex-wrap: wrap; }
    #analysisMetrics { gap: 4px 12px; font-size: 13px; min-width: 140px; }
    #analysisMetrics strong { font-size: 18px; }
    #analysisMetrics b { font-size: 14px; }
    .analysis-details { padding: 12px; }
    .analysis-numbers { gap: 14px; }
    .analysis-numbers strong { font-size: 15px; }
    #analysisToggle { padding: 8px 10px; font-size: 14px; }
}

/* Keep decisions together; put detailed analysis beside the table on desktop. */
.table-area { padding: 16px 24px; }
.status-bar { padding: 0 0 10px; gap: 8px; font-size: 17px; }
.action-ticker { margin-top: 0; min-height: 44px; padding: 8px 12px; }
.action-topline { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.human-action-panel { gap: 8px 14px; padding: 12px 14px; }
.poker-advisor { margin: 0; border: 0; background: none; border-radius: 0; }
.analysis-summary { padding: 0; gap: 8px; }
#analysisMetrics { flex: none; min-width: 0; font-size: 13px; }
#analysisMetrics strong { font-size: 18px; }
#analysisToggle { padding: 6px 10px; min-height: 36px; font-size: 13px; }
.analysis-details { padding: 14px; border: 1px solid #385440; border-radius: 12px; background: #152a21; }
.analysis-details[hidden], .analysis-details [hidden] { display: none !important; }
.analysis-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.analysis-heading > strong { color: var(--primary); font-size: 18px; }
.analysis-heading button { min-height: 36px; padding: 5px 10px; font-size: 13px; }
@media (min-width: 1151px) {
    .table-arena { height: clamp(580px, calc(100dvh - 300px), 720px); }
    .side-panel { padding-top: 18px; }
    .side-heading { margin-bottom: 16px; }
    .human-action-dock { position: sticky; bottom: 12px; z-index: 10; }
}
@media (max-width: 1150px) {
    .human-action-dock { position: sticky; bottom: 0; z-index: 10; }
    .human-action-panel { position: relative; bottom: auto; margin: 0; }
}
@media (max-width: 600px) {
    .table-area { padding: 12px 12px 18px; }
    .status-bar { font-size: 15px; }
    .stage-dot { padding: 4px 7px; }
    .poker-table { padding-top: 0; }
    .table-arena { gap: 26px; padding: 22px 4px; }
    .seats { gap: 30px 10px; }
    .human-action-dock { margin: 0 -12px; }
    .human-action-panel { border-radius: 12px 12px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    #humanActionTitle { font-size: 16px; }
    .analysis-summary { flex-wrap: nowrap; gap: 6px; }
    #analysisMetrics { font-size: 12px; }
    #analysisMetrics strong { font-size: 16px; }
    #analysisToggle { font-size: 12px; padding: 6px 8px; }
    .human-action-controls .pixel-btn { padding: 9px 6px; }
    .analysis-numbers { gap: 12px; }
}

/* Auxiliary tools are closed until requested. */
.main-container { grid-template-columns: minmax(0,1fr); max-width: 1440px; }
.table-area { width: 100%; max-width: 1160px; margin-inline: auto; }
.side-panel { display: none; }
.side-heading button { min-height: 36px; padding: 5px 10px; font-size: 13px; }
@media (max-width: 1150px) {
    .side-panel[data-open="true"] { position: fixed; inset: 0 0 0 auto; width: min(380px,100%); height: 100dvh; min-height: 0; z-index: 40; border-left: 1px solid #45614e; box-shadow: -20px 0 60px #0008; padding: 20px 16px; }
}

/* Records and configuration have separate navigation contexts. */
.side-panel[data-mode="records"] > .tab-bar { display: none; }
.side-panel[data-mode="settings"] .tab-btn[data-tab="log"] { display: none; }

@media (max-width: 1150px) {
    .side-panel[data-open="true"] { top: var(--drawer-top, 0px); height: calc(100dvh - var(--drawer-top, 0px)); }
}

/* Separate overlay drawers; the table keeps its width while tools slide in. */
.side-panel, #analysisDrawer {
    display: none; position: fixed; top: var(--drawer-top, 76px); bottom: 0;
    width: min(380px, calc(100vw - 16px)); height: auto; min-height: 0;
    z-index: 40; background: #102019; padding: 18px; overflow: hidden;
}
.side-panel[data-open="true"] {
    display: flex; left: auto; right: 0; top: var(--drawer-top, 76px); bottom: 0;
    width: min(380px, calc(100vw - 16px)); height: auto;
    box-shadow: -12px 0 32px #0006; border-left: 1px solid #45614e;
    animation: drawer-from-right .2s ease-out;
}
#analysisDrawer { left: 0; right: auto; border-right: 1px solid #45614e; box-shadow: 12px 0 32px #0006; overflow-y: auto; overscroll-behavior: contain; }
#analysisDrawer:has(#analysisDetails:not([hidden])) { display: block; animation: drawer-from-left .2s ease-out; }
#analysisDrawer .analysis-details { border: 0; padding: 0; background: none; }
#analysisDrawer .analysis-numbers { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#analysisDrawer .analysis-heading { position: sticky; top: -18px; background: #102019; padding: 10px 0; z-index: 1; }
@media (max-width: 600px) {
    #analysisDrawer { bottom: var(--drawer-bottom, 0px); padding: 12px; }
}
@keyframes drawer-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes drawer-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    #analysisDrawer:has(#analysisDetails:not([hidden])), .side-panel[data-open="true"] { animation: none; }
}
/* Keep tool entry buttons reachable even after scrolling the table. */
.navbar { position: sticky; top: 0; z-index: 50; background: var(--bg-darkest); }