@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ══════════════════════════════════════════════════
   DESIGN TOKENS — Richup-style chrome, dark green
══════════════════════════════════════════════════ */
:root {
    /* Cards */
    --card-w: 56px;
    --card-h: 80px;
    --card-r: 6px;
    --card-w-you: 88px;
    --card-h-you: 126px;
    --card-w-comm: 60px;
    --card-h-comm: 86px;

    /* ── Background — deep green-black ── */
    --bg-0: #08130c;        /* page background */
    --bg-1: #0c1d12;        /* deeper panels */

    /* ── Panel surfaces (the cards) ── */
    --surface-1: #14271a;   /* main panel */
    --surface-2: #1d3826;   /* elevated panel / hover */
    --surface-3: #284a32;   /* row-hover */
    --surface-glass: rgba(20, 39, 26, 0.85);

    /* ── Borders / hairlines ── */
    --hairline: rgba(255,255,255,0.06);
    --hairline-strong: rgba(255,255,255,0.12);

    /* ── Brand accents (vibrant emerald) ── */
    --accent:        #22c55e;   /* primary green */
    --accent-hover:  #4ade80;
    --accent-dim:    rgba(34,197,94,0.22);
    --accent-glow:   rgba(74,222,128,0.45);
    --accent-2:      #16a34a;   /* deeper green for active */

    /* ── Poker identity (felt + gold) ── */
    --felt-c:    #0d3a20;       /* slightly darker than chrome to differentiate */
    --felt-mid:  #114e2a;
    --felt-edge: #051208;
    --rail:      #1a2820;       /* dark green-grey rail (not the table interior green) */
    --gold:      #f5c84c;
    --gold-lt:   #ffd96b;
    --gold-dim:  rgba(245,200,76,0.32);
    --gold-glow: rgba(255,217,107,0.5);

    /* ── Action colors ── */
    --c-fold:  #ef4444;
    --c-call:  #22c55e;
    --c-raise: #3b82f6;
    --c-allin: #a855f7;

    /* ── Status ── */
    --c-win:   #4ade80;
    --c-lose:  #f87171;
    --c-warn:  #facc15;

    /* ── Text (cool green-tinted greys) ── */
    --t-1: #f3f7f4;
    --t-2: #b1c4b6;
    --t-3: #7a9181;
    --t-4: #526157;

    /* ── Typography ── */
    --f-ui:   'Nunito', system-ui, -apple-system, sans-serif;
    --f-head: 'Nunito', system-ui, sans-serif;

    /* ── Motion ── */
    --ease-out:    cubic-bezier(.22,.61,.36,1);
    --ease-snap:   cubic-bezier(.5,1.6,.4,1);
    --ease-in-out: cubic-bezier(.65,0,.35,1);
    --d-fast: 140ms;
    --d-med:  280ms;
    --d-slow: 480ms;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 4px rgba(0,0,0,.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:  0 12px 48px rgba(0,0,0,.6);
    --shadow-glow-accent: 0 0 28px rgba(34,197,94,0.4);
    --shadow-glow-win:    0 0 28px rgba(74,222,128,0.5);

    /* ── Layout ── */
    --hud-h: 56px;
    --your-zone-h: 200px;
    --controls-h: 124px;
}

/* ══════════════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden], .hidden { display: none !important; }

button {
    font-family: var(--f-ui);
    cursor: pointer;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    background: none;
}
input, select { font-family: var(--f-ui); color: inherit; }

body {
    font-family: var(--f-ui);
    height: 100dvh;
    overflow: hidden;
    color: var(--t-1);
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    background: var(--bg-0);
}

/* ══════════════════════════════════════════════════
   BUTTON SYSTEM — Richup-style pills
══════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: var(--f-ui);
    font-size: .98rem;
    font-weight: 700;
    color: var(--t-1);
    background: var(--surface-2);
    border: 1px solid transparent;
    transition: transform var(--d-fast) var(--ease-out),
                background var(--d-fast),
                box-shadow var(--d-fast),
                opacity var(--d-fast);
    width: 100%;
}
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 20px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-gold {
    background: var(--gold);
    color: #2a1c00;
    box-shadow: 0 6px 20px rgba(245,200,76,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-gold:hover { background: var(--gold-lt); }

.btn-ghost {
    background: transparent;
    border: 1.5px solid var(--accent-dim);
    color: var(--accent);
}
.btn-ghost:hover { background: rgba(34,197,94,.1); border-color: var(--accent); }

.btn-quiet {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--t-3);
    font-size: .82rem;
    padding: 10px 16px;
}
.btn-quiet:hover { color: var(--t-2); border-color: var(--hairline-strong); background: var(--surface-2); }

.btn-fold {
    background: var(--c-fold);
    color: #fff;
    box-shadow: 0 6px 20px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-fold:hover { background: #f15555; }

.btn-bot {
    background: rgba(59,130,246,.18);
    border: 1px solid rgba(59,130,246,.35);
    color: #93c5fd;
    font-size: .9rem;
}
.btn-bot:hover { background: rgba(59,130,246,.3); }
.btn-bot-fill {
    background: rgba(168,85,247,.18);
    border: 1px solid rgba(168,85,247,.35);
    color: #d8b4fe;
    font-size: .9rem;
}
.btn-bot-fill:hover { background: rgba(168,85,247,.3); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    color: var(--t-2);
    transition: color var(--d-fast), background var(--d-fast), transform var(--d-fast);
}
.icon-btn:hover  { color: var(--accent); background: var(--surface-2); border-color: var(--accent-dim); }
.icon-btn:active { transform: scale(.92); }

/* ══════════════════════════════════════════════════
   FULL-SCREEN PANELS — three-column on desktop
══════════════════════════════════════════════════ */
.screen {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;     /* vertically center main menu */
    gap: 16px;
    padding: 28px 18px env(safe-area-inset-bottom);
    background:
        radial-gradient(circle at 50% 0%, rgba(34,197,94,.08) 0%, transparent 50%),
        var(--bg-0);
    overflow-y: auto;
    animation: screenIn .4s var(--ease-out);
}
/* If content overflows on short viewports, fall back to top-aligned scrolling
   (otherwise centered content gets clipped at both ends). */
@media (max-height: 720px) {
    .screen { justify-content: flex-start; padding-top: 24px; }
}
@keyframes screenIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lobby-logo {
    color: var(--accent);
    width: 56px; height: 56px;
    filter: drop-shadow(0 2px 14px var(--accent-glow));
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-4px) rotate(1deg); }
}

.lobby-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--t-1);
    text-align: center;
    margin-top: 8px;
}
.lobby-sub {
    font-size: .92rem;
    color: var(--t-3);
    font-weight: 600;
    margin-top: -4px;
}
.screen-title {
    font-size: 1.3rem; font-weight: 800;
    color: var(--t-1);
    text-align: center;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}

/* Panel — the Richup card */
.card-panel {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 20px 22px;
    width: min(380px, 100%);
    display: flex; flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-md);
}
.panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-1);
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 6px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
    font-size: .82rem;
    color: var(--t-2);
    font-weight: 600;
}
.field-input {
    background: var(--bg-1);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--t-1);
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.field-input:focus { border-color: var(--accent); background: var(--bg-1); outline: 2px solid var(--accent-dim); outline-offset: -1px; }
.field-code {
    letter-spacing: 10px;
    font-size: 1.6rem;
    color: var(--accent);
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
}

.opt-row { display: flex; gap: 6px; }
.opt {
    flex: 1; padding: 10px 4px;
    background: var(--bg-1);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font-size: .88rem; font-weight: 700;
    color: var(--t-3);
    transition: all var(--d-fast);
}
.opt:hover { color: var(--t-1); border-color: var(--hairline-strong); background: var(--surface-2); }
.opt.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34,197,94,.3);
}

.lobby-actions { display: flex; flex-direction: column; gap: 10px; width: min(380px, 100%); }
#join-panel    { display: flex; flex-direction: column; gap: 12px; width: min(380px, 100%); }

.error-msg {
    color: var(--c-lose);
    font-size: .88rem;
    text-align: center;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 10px;
    padding: 10px 14px;
    width: min(380px, 100%);
    animation: shake .3s var(--ease-out);
    font-weight: 600;
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}

/* ══════════════════════════════════════════════════
   WAITING ROOM — three-column on desktop
══════════════════════════════════════════════════ */
@media (min-width: 980px) {
    #waiting-room {
        display: grid;
        grid-template-columns: 320px 1fr 320px;
        grid-template-rows: auto 1fr;
        gap: 20px;
        padding: 24px;
        align-items: start;
        justify-items: stretch;
    }
    #waiting-room .screen-title { grid-column: 1 / -1; }
    #waiting-room .room-code-block { grid-column: 1; grid-row: 2; align-self: start; }
    #waiting-room .player-list-wrap { grid-column: 2; grid-row: 2; max-width: 420px; justify-self: center; width: 100%; }
    #waiting-room .settings-wrap { grid-column: 3; grid-row: 2; }
    #waiting-room .hint-text { display: none; }
}

.room-code-block {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 18px 20px;
    width: min(380px, 100%);
    display: flex; flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-md);
}
.rc-block-title {
    font-size: .98rem;
    font-weight: 700;
    color: var(--t-1);
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}
.rc-share-row {
    display: flex; align-items: center; gap: 8px;
}
.rc-link-display {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .88rem;
    color: var(--t-2);
    font-family: ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.btn-copy {
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    transition: background var(--d-fast);
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.btn-copy:hover { background: var(--accent-hover); }

.rc-code-display {
    text-align: center;
    padding: 14px 0;
}
.rc-code-display .rc-label {
    display: block;
    font-size: .7rem; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--t-3);
    font-weight: 700;
    margin-bottom: 6px;
}
.rc-code {
    font-size: 2rem; font-weight: 800;
    letter-spacing: 8px;
    color: var(--accent);
}

.hint-text {
    font-size: .88rem; color: var(--t-3);
    font-weight: 600;
    text-align: center;
}

.player-list-wrap {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 18px 20px;
    width: min(380px, 100%);
    box-shadow: var(--shadow-md);
}
.player-list {
    list-style: none;
    overflow: hidden;
    overflow-y: auto;
    max-height: 340px;
}
.wr-player {
    display: flex; align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--hairline);
    font-size: 1rem;
    animation: slideIn .3s var(--ease-out);
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.wr-player:last-child { border-bottom: none; }
.wr-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.12);
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; color: #fff;
}
.wr-player.is-bot .wr-avatar { background: #3b82f6; }
.wr-player .wr-name { flex: 1; font-weight: 700; }
.wr-player.is-bot .wr-name { color: #93c5fd; }
.wr-player.is-bot .wr-name::after { content: '🤖'; margin-left: 6px; opacity: .8; }
.wr-player .wr-style {
    font-size: .68rem; letter-spacing: 1px;
    color: var(--t-3); text-transform: uppercase;
    background: rgba(255,255,255,.06);
    padding: 3px 8px; border-radius: 8px;
    font-weight: 700;
}
.wr-player.host-mark .wr-name::before { content: '👑 '; }
.wr-stack {
    color: var(--accent);
    font-size: .92rem; font-weight: 800;
}

.settings-wrap { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); }

#wr-host-controls {
    width: min(380px, 100%);
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 12px;
}
.bot-row { display: flex; gap: 8px; }
.guest-msg {
    width: min(380px, 100%);
    text-align: center;
    font-size: .92rem; color: var(--t-3);
    padding: 16px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    font-weight: 600;
    margin-top: 12px;
}

/* ══════════════════════════════════════════════════
   TABLE WRAPPER
══════════════════════════════════════════════════ */
#table-wrapper {
    position: fixed; inset: 0;
    display: grid;
    /* controls row is `auto` so the raise panel can grow it without a layout jump */
    grid-template-rows: var(--hud-h) 1fr var(--your-zone-h) auto;
    background:
        radial-gradient(circle at 50% 30%, rgba(34,197,94,.05) 0%, transparent 40%),
        var(--bg-0);
    animation: screenIn .4s var(--ease-out);
}

/* ══════════════════════════════════════════════════
   HUD BAR
══════════════════════════════════════════════════ */
.hud-bar {
    grid-row: 1;
    /* Grid layout keeps phase-pill perfectly centered regardless of left/right widths */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 14px;
    padding-top: env(safe-area-inset-top, 0);
    gap: 8px;
    z-index: 50;
    background: linear-gradient(180deg, rgba(12,8,22,.8) 0%, transparent 100%);
}
.hud-left  { display: flex; align-items: center; gap: 6px; justify-self: start; min-width: 0; }
.hud-right { display: flex; align-items: center; gap: 6px; justify-self: end;   min-width: 0; }
.hud-center { display: flex; justify-content: center; }
.pill {
    display: flex; align-items: center; gap: 7px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 22px;
    padding: 6px 14px 6px 12px;
}

/* YOU pill — player identity in HUD-LEFT */
.you-pill {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface-1);
    border: 1px solid var(--accent-dim);
    border-radius: 22px;
    padding: 4px 14px 4px 4px;
    box-shadow: 0 0 12px rgba(34,197,94,.15);
}
.you-pill-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
}
.you-pill-meta {
    display: flex; flex-direction: column; gap: 1px;
    line-height: 1.1;
}
.you-pill-name {
    font-size: .68rem; font-weight: 700;
    color: var(--accent);
    letter-spacing: .3px;
    max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.you-pill-row {
    display: flex; align-items: center; gap: 6px;
}
.you-pill-stack {
    font-size: .92rem; font-weight: 800;
    color: var(--t-1);
    letter-spacing: .2px;
    white-space: nowrap;
}
.you-pill-bet {
    font-size: .74rem; font-weight: 800;
    color: var(--gold-lt);
    background: rgba(245,200,76,.18);
    border: 1px solid rgba(245,200,76,.35);
    padding: 1px 7px;
    border-radius: 8px;
    letter-spacing: .2px;
    white-space: nowrap;
    transition: opacity var(--d-fast);
}
.pill-label {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--t-3);
}
.pill-val {
    font-size: .96rem; font-weight: 800;
    color: var(--accent);
}
.pill-val--blue { color: #60a5fa; }
.phase-pill {
    font-size: 1rem; font-weight: 800;
    color: var(--t-1);
    background: var(--surface-1);
    border: 1px solid var(--accent-dim);
    border-radius: 22px;
    padding: 7px 18px;
    box-shadow: 0 0 14px rgba(34,197,94,.18);
}
.room-pill { user-select: text; }

/* ══════════════════════════════════════════════════
   OVAL TABLE
══════════════════════════════════════════════════ */
#oval-table {
    grid-row: 2;
    /* Anchor oval to BOTTOM of its row so spare space sits ABOVE — hosts opponent identity widgets. */
    align-self: end;
    position: relative;
    margin: 0 auto 16px;        /* small gap below oval for the bet-floating chip */
    width: min(94vw, 600px);
    aspect-ratio: 1.7;
    /* Cap to leave room for identity widgets above + bet-float below.
       calc fallback ensures oval shrinks gracefully on short viewports. */
    max-height: min(220px, calc(100% - 60px), 30vh);
    min-height: 130px;
    border-radius: 50%;
    border: 9px solid var(--rail);
    box-shadow:
        0 0 0 2px #0a0510,
        0 0 0 5px rgba(34,197,94,.18),
        inset 0 0 60px rgba(0,0,0,.5),
        0 12px 50px rgba(0,0,0,.7);
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%,
            #1f6a3a 0%, var(--felt-c) 60%, #07210e 100%);
    overflow: visible;
}

/* Deck origin for fly animations */
#deck-anchor {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ── Community area ── */
#community-area {
    position: absolute;
    /* Pushed slightly below center so opponent cards/bet-chips at the top of
       the oval have ~15px more clearance from the community-card row. */
    left: 50%; top: 56%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    pointer-events: none; z-index: 5;
}
#community-cards {
    display: flex; gap: 5px; align-items: center;
    min-height: calc(var(--card-h-comm) + 6px);
}
.community-slot {
    width: var(--card-w-comm); height: var(--card-h-comm);
    border-radius: var(--card-r);
    border: 1.5px dashed rgba(245,200,76,.16);
    background: rgba(0,0,0,.18);
    flex-shrink: 0;
}
.community-slot .card { width: var(--card-w-comm); height: var(--card-h-comm); }

#pot-display {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    pointer-events: none;
}
.pot-chips {
    display: flex; align-items: flex-end; gap: 2px;
    min-height: 28px;
}
.pot-label {
    font-size: .98rem; font-weight: 800;
    color: var(--gold);
    text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 14px rgba(245,200,76,.3);
    padding: 5px 16px;
    background: rgba(0,0,0,.55);
    border-radius: 14px;
    border: 1px solid rgba(245,200,76,.22);
    transition: transform var(--d-med) var(--ease-snap);
}
.pot-label.bump { transform: scale(1.14); color: var(--gold-lt); }
#side-pots {
    font-size: .7rem; font-weight: 600;
    color: var(--t-2);
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
#side-pots span { margin: 0 5px; }

/* ══════════════════════════════════════════════════
   CHIP STACKS
══════════════════════════════════════════════════ */
.chip-stack {
    display: flex; align-items: flex-end; gap: 1px;
    min-height: 18px;
}
.chip-col {
    position: relative;
    width: 14px;
    display: flex; flex-direction: column-reverse;
    align-items: center;
}
.chip {
    width: 14px; height: 4px;
    border-radius: 50%;
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 2px rgba(0,0,0,.5);
    margin-top: -2px;
    border: 1px solid rgba(0,0,0,.35);
}
.chip:first-child { margin-top: 0; }
.chip-1     { background: #f8f8f8; border-color: #c84a4a; }
.chip-5     { background: #ef4444; }
.chip-25    { background: #22c55e; }
.chip-100   { background: #1a1a1a; }
.chip-500   { background: #a855f7; }
.chip-1000  { background: linear-gradient(180deg, #ffd96b, #f5c84c); border-color: #6b5117; }
.chip-stack--lg .chip { width: 18px; height: 5px; margin-top: -3px; }
.chip-stack--lg .chip:first-child { margin-top: 0; }
.chip-stack--lg .chip-col { width: 18px; }

/* ══════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════ */
.card {
    width: var(--card-w); height: var(--card-h);
    border-radius: var(--card-r);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,.7);
    background: #fff;
    /* Always have an opacity transition so cards softly appear even when keyframe animations are disabled */
    transition: transform var(--d-med) var(--ease-out),
                box-shadow var(--d-med) var(--ease-out),
                opacity var(--d-fast) var(--ease-out);
}
.card img { width: 100%; height: 100%; display: block; object-fit: cover; -webkit-user-drag: none; }

@keyframes dealFly {
    0%   { opacity: 0; transform: translate(var(--deal-from-x, 0px), var(--deal-from-y, 0px)) scale(.5) rotate(-25deg); }
    35%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
.card.dealing {
    animation: dealFly .55s var(--ease-out) backwards;
    animation-delay: var(--deal-delay, 0ms);
}

@keyframes flipReveal {
    0%   { transform: rotateY(180deg) scale(.7); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: rotateY(0deg) scale(1);   opacity: 1; }
}
.card.flipping {
    animation: flipReveal .6s var(--ease-out) backwards;
    animation-delay: var(--flip-delay, 0ms);
    backface-visibility: hidden;
}

.card.winning-card {
    transform: translateY(-10px) scale(1.08);
    box-shadow: 0 0 0 3px var(--c-win), var(--shadow-glow-win);
    z-index: 56;
    position: relative;
}
.card.dim-card { opacity: .28; filter: saturate(.18); }

/* ══════════════════════════════════════════════════
   OPPONENT SEATS
══════════════════════════════════════════════════ */
.seat {
    position: absolute;
    /* Anchor at oval rim; content stacks DOWN from anchor (cards+bet inside oval),
       identity widget extends UP from anchor (sits OUTSIDE oval rim). */
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: all;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: opacity var(--d-med), filter var(--d-med);
    animation: seatAppear .4s var(--ease-out);
}
@keyframes seatAppear {
    from { opacity: 0; transform: translateX(-50%) scale(.85); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.seat.folded { opacity: .42; filter: saturate(.4); }
.seat.eliminated { opacity: .18; filter: grayscale(1); pointer-events: none; }

/* Identity widget — sits ABOVE the seat anchor → outside the oval rim.
   No background plate; just avatar + small text labels. Keeps the table clean. */
.seat-id {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}

.seat-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.65);
    transition: transform var(--d-med) var(--ease-snap), box-shadow var(--d-med), border-color var(--d-fast);
    margin-bottom: 2px;
}
/* Per-player color cycled by seat index — applies to humans AND bots so every
   player has a unique color across the whole UI. The 🤖 emoji + AI-style badge
   are what mark a bot, not the avatar color. */
.seat[data-cidx="0"] .seat-avatar { background: #ef4444; }
.seat[data-cidx="1"] .seat-avatar { background: #f97316; }
.seat[data-cidx="2"] .seat-avatar { background: #facc15; color: #2a1c00; }
.seat[data-cidx="3"] .seat-avatar { background: #22c55e; }
.seat[data-cidx="4"] .seat-avatar { background: #14b8a6; }
.seat[data-cidx="5"] .seat-avatar { background: #3b82f6; }
.seat[data-cidx="6"] .seat-avatar { background: #a855f7; }
.seat[data-cidx="7"] .seat-avatar { background: #ec4899; }

.timer-ring {
    position: absolute; top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    pointer-events: none;
    z-index: 3;
}
.timer-ring circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* Name no longer rendered in-table — kept as a tooltip on the avatar */
.seat-name { display: none; }

.seat-stack {
    font-size: .76rem; font-weight: 800;
    color: var(--t-1);
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.95);
    background: rgba(0,0,0,.7);
    border: 1px solid rgba(255,255,255,.06);
    padding: 1px 7px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Cards live ABOVE the plate (small face-down rectangles).
   This keeps the plate compact so it doesn't intrude into the community area. */
.seat-cards {
    display: flex; gap: 2px; align-items: center; justify-content: center;
    position: relative;
    min-height: 0;
}
.seat .card {
    width: 22px; height: 32px;
    box-shadow: 0 2px 5px rgba(0,0,0,.5);
    border-radius: 4px;
}

/* Bet chip — sits BELOW the plate but pulled close so it doesn't drift toward community */
.seat-bet {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: .78rem; font-weight: 800;
    color: var(--gold-lt);
    background: rgba(0,0,0,.7);
    border: 1px solid rgba(245,200,76,.32);
    border-radius: 12px;
    padding: 2px 9px 2px 7px;
    min-height: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform var(--d-med) var(--ease-snap);
    opacity: 0;
}
.seat-bet:not(:empty) { opacity: 1; }
.seat-bet.new { animation: betIn .35s var(--ease-snap); }
@keyframes betIn {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.dealer-btn {
    position: absolute;
    top: -2px; right: -14px;
    width: 22px; height: 22px;
    background: radial-gradient(circle at 30% 30%, #fff, #c8c8c8 70%, #888);
    color: #1a1a1a;
    border-radius: 50%;
    font-size: .72rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 -2px 0 rgba(0,0,0,.18);
    z-index: 25;
    pointer-events: none;
    border: 1.5px solid rgba(0,0,0,.25);
}

/* AI personality badge — flows naturally at the bottom of .seat-id, below the stack
   pill (was previously absolute and overlapped the stack). */
.ai-style-badge {
    font-size: .54rem; letter-spacing: 1px; font-weight: 800;
    padding: 1px 7px; border-radius: 9px;
    text-transform: uppercase; white-space: nowrap;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,.4);
    margin-top: 2px;
    line-height: 1.2;
}
.badge-tight   { background: #3b82f6; color: #fff; }
.badge-loose   { background: #22c55e; color: #fff; }
.badge-aggro   { background: #ef4444; color: #fff; }
.badge-calling { background: #a855f7; color: #fff; }

.seat.acting .seat-avatar {
    box-shadow: 0 0 0 3px var(--accent), 0 0 22px var(--accent-glow);
    border-color: var(--accent);
    transform: scale(1.1);
}

.seat.winner .seat-avatar {
    border-color: var(--c-win);
    box-shadow: 0 0 0 3px var(--c-win), var(--shadow-glow-win);
    animation: winnerPulse 1.4s ease-in-out infinite;
}
@keyframes winnerPulse {
    0%,100% { box-shadow: 0 0 0 3px var(--c-win), 0 0 22px rgba(74,222,128,.4); }
    50%     { box-shadow: 0 0 0 4px var(--c-win), 0 0 36px rgba(74,222,128,.7); }
}
.seat.winner .seat-name  { color: var(--c-win); }
.seat.winner .seat-stack { color: var(--c-win); }
.seat.winner { z-index: 56; }

.seat-status {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-size: .76rem; font-weight: 900;
    letter-spacing: 1.6px;
    padding: 3px 10px;
    border: 2px solid currentColor;
    border-radius: 4px;
    color: var(--c-lose);
    background: rgba(0,0,0,.6);
    pointer-events: none;
    z-index: 5;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--d-med);
}
.seat.folded .seat-status.folded-label { opacity: 1; color: var(--c-lose); }
.seat.allin  .seat-status.allin-label  { opacity: 1; color: var(--c-allin); }

/* ══════════════════════════════════════════════════
   YOUR ZONE — minimal: just cards + hand-strength + floating bet
══════════════════════════════════════════════════ */
#your-zone {
    grid-row: 3;
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 12px 14px 8px;
    z-index: 30;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
    border-top: 1px solid var(--hairline);
}

/* When it's your turn, YOUR ZONE glows along its top edge — no overlapping banner needed */
#your-zone.your-turn {
    border-top: 2px solid var(--accent);
    box-shadow: inset 0 8px 32px -8px rgba(34,197,94,.4);
    animation: turnPulse 1.4s ease-in-out infinite;
}
@keyframes turnPulse {
    0%,100% { box-shadow: inset 0 8px 32px -8px rgba(34,197,94,.35); }
    50%     { box-shadow: inset 0 12px 44px -10px rgba(74,222,128,.6); }
}

/* Your bet — small floating chip + amount above your cards (sits in the 16px gap
   between oval bottom and YOUR ZONE top — no overlap with oval rim) */
.your-bet-floating {
    position: absolute;
    top: -18px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 800;
    color: var(--gold-lt);
    background: rgba(0,0,0,.78);
    border: 1px solid rgba(245,200,76,.4);
    border-radius: 14px;
    padding: 3px 12px 3px 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    z-index: 32;
    opacity: 0;
    transition: opacity var(--d-med);
}
.your-bet-floating.has-bet { opacity: 1; }
.your-bet-chips { display: flex; gap: 1px; min-height: 16px; }
.your-bet-amount { font-size: .9rem; font-weight: 800; color: var(--gold-lt); }

.your-cards-area {
    display: flex; align-items: center;
    min-height: var(--card-h-you);
}
#your-cards { display: flex; gap: 6px; perspective: 600px; }
#your-cards .card {
    width: var(--card-w-you); height: var(--card-h-you);
    box-shadow: 0 6px 18px rgba(0,0,0,.7);
}

#hand-strength {
    font-size: .88rem; font-weight: 800;
    color: var(--accent);
    background: var(--surface-1);
    border: 1.5px solid var(--accent-dim);
    border-radius: 22px;
    padding: 5px 16px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    transition: color var(--d-med), border-color var(--d-med), opacity var(--d-med);
}
#hand-strength.strong  { color: var(--c-win); border-color: rgba(74,222,128,.5); box-shadow: var(--shadow-md), 0 0 18px rgba(74,222,128,.3); }
#hand-strength.medium  { color: var(--gold); border-color: var(--gold-dim); }
#hand-strength.weak    { color: var(--t-2); border-color: var(--hairline-strong); }

/* ══════════════════════════════════════════════════
   CONTROLS SHEET
══════════════════════════════════════════════════ */
#controls-sheet {
    grid-row: 4;
    z-index: 70;
    padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background: linear-gradient(180deg, rgba(12,8,22,.55) 0%, rgba(12,8,22,.96) 30%);
    border-top: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 7px;
}
#action-log {
    font-size: .82rem; font-weight: 600;
    color: var(--t-2);
    text-align: center;
    /* Show ~5 lines, scroll for older entries (auto-scrolls to newest on append) */
    min-height: 18px; max-height: 96px;
    overflow-y: auto; overflow-x: hidden;
    padding: 4px 6px;
    border-bottom: 1px solid var(--hairline);
    line-height: 1.5;
    /* Slim scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
#action-log::-webkit-scrollbar       { width: 4px; }
#action-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.log-line { animation: logIn .25s var(--ease-out); padding: 1px 0; }
@keyframes logIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#action-log .log-you   { color: var(--accent); font-weight: 800; }
#action-log .log-name  { font-weight: 700; }
#action-log .log-raise { color: #60a5fa; font-weight: 700; }
#action-log .log-fold  { color: var(--t-4); }
#action-log .log-win   { color: var(--c-win); font-weight: 800; }
#action-log .log-allin { color: #c480ff; font-weight: 700; font-size: .9em; }
#action-log .log-divider {
    color: var(--t-3); font-weight: 700;
    font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase;
    padding: 4px 0 2px; opacity: .8;
}
.log-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Raise panel ── */
#raise-panel {
    display: flex; flex-direction: column;
    gap: 9px;
    padding: 10px 4px 4px;
    animation: slideUp .25s var(--ease-out);
    /* Cap height so opening the panel can't push other panels off-screen on short viewports */
    max-height: min(280px, 42vh);
    overflow-y: auto;
}
.raise-slider-row {
    display: flex; flex-direction: column; gap: 4px;
}
#raise-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent) var(--fill, 0%), rgba(255,255,255,.12) var(--fill, 0%));
    outline: none;
}
#raise-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    cursor: grab;
    border: 3px solid #fff;
    box-shadow: 0 0 12px var(--accent-glow), 0 2px 4px rgba(0,0,0,.4);
}
#raise-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 0 12px var(--accent-glow), 0 2px 4px rgba(0,0,0,.4);
    cursor: grab;
}
#raise-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.raise-bounds {
    display: flex; justify-content: space-between;
    font-size: .68rem; font-weight: 600;
    color: var(--t-3);
    padding: 0 2px;
}

.raise-input-row {
    display: flex; align-items: stretch; gap: 8px;
}
.raise-step {
    width: 42px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    font-size: 1.4rem; font-weight: 800;
    color: var(--accent);
    transition: background var(--d-fast), transform var(--d-fast);
}
.raise-step:hover  { background: var(--surface-3); }
.raise-step:active { transform: scale(.94); }
.raise-amount-wrap {
    flex: 1;
    display: flex; align-items: center;
    background: var(--bg-1);
    border: 1.5px solid var(--accent-dim);
    border-radius: 10px;
    padding: 0 12px;
    gap: 4px;
}
.raise-currency {
    font-size: 1.05rem; font-weight: 800;
    color: var(--accent);
}
#raise-amount {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    font-family: var(--f-ui);
    font-size: 1.18rem; font-weight: 800;
    color: var(--t-1);
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
}
#raise-amount::-webkit-outer-spin-button,
#raise-amount::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.raise-presets { display: flex; gap: 6px; }
.raise-preset {
    flex: 1;
    padding: 8px 4px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--t-2);
    font-size: .76rem; font-weight: 700;
    line-height: 1.3;
    transition: all var(--d-fast);
}
.raise-preset:hover  { background: var(--surface-3); color: var(--t-1); border-color: var(--hairline-strong); }
.raise-preset:active { transform: scale(.96); }
.raise-preset.is-allin {
    background: rgba(168,85,247,.16);
    border-color: rgba(168,85,247,.4);
    color: #d8b4fe;
}
.raise-preset.is-allin:hover { background: rgba(168,85,247,.28); }

.raise-actions { display: flex; gap: 8px; }
.btn-raise-cancel {
    flex: 0 0 90px;
    padding: 12px 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--t-3);
    font-size: .88rem; font-weight: 700;
    transition: all var(--d-fast);
}
.btn-raise-cancel:hover { color: var(--t-1); background: var(--surface-2); }
.btn-raise-confirm {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--c-raise);
    color: #fff;
    font-size: .98rem; font-weight: 800;
    box-shadow: 0 4px 14px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: filter var(--d-fast), transform var(--d-fast);
}
.btn-raise-confirm:hover  { filter: brightness(1.1); }
.btn-raise-confirm:active { transform: translateY(1px) scale(.98); }
.btn-raise-confirm:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

#action-buttons { display: flex; gap: 9px; }
#action-buttons button {
    flex: 1;
    padding: 16px 6px;
    border-radius: 11px;
    font-size: 1rem; font-weight: 800;
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform var(--d-fast), filter var(--d-fast), background var(--d-fast);
}
#action-buttons button:hover  { filter: brightness(1.1); }
#action-buttons button:active { transform: translateY(1px) scale(.98); }
.btn-fold-action  { background: var(--c-fold); }
.btn-check-action { background: var(--surface-3); color: var(--t-1); }
.btn-call-action  { background: var(--c-call); }
.btn-raise-action { background: var(--c-raise); }

#waiting-label {
    text-align: center; padding: 14px 0 6px;
    font-size: .92rem; font-weight: 700;
    color: var(--t-3);
}

/* ══════════════════════════════════════════════════
   CHIP FLY ANIMATION
══════════════════════════════════════════════════ */
.fly-chip {
    position: fixed; z-index: 65; pointer-events: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold-lt), var(--gold) 60%, #6b5117);
    border: 1.5px solid #2a1c00;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    transition: transform .55s cubic-bezier(.45,.05,.55,.95), opacity .55s;
}

/* ══════════════════════════════════════════════════
   ACTION TIMER BAR
══════════════════════════════════════════════════ */
#action-timer-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 80;
    background: rgba(0,0,0,.5);
}
#action-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-win) 0%, var(--accent) 60%, var(--c-lose) 100%);
    width: 100%;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ══════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════ */
.modal {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px 28px;
    text-align: center;
    min-width: 320px; max-width: 92vw;
    box-shadow: var(--shadow-lg);
    animation: modalIn .35s var(--ease-snap);
}
@keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-title {
    font-size: 1.15rem; font-weight: 800;
    color: var(--t-1);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}
.modal-text {
    font-size: .96rem; color: var(--t-2);
    margin-bottom: 18px;
    line-height: 1.5;
    font-weight: 600;
}
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ══════════════════════════════════════════════════
   GAME OVER MODAL — final standings + play-again
══════════════════════════════════════════════════ */
#gameover-modal {
    min-width: 360px;
    max-width: 460px;
    padding: 20px 24px 22px;
}
.gameover-trophy {
    font-size: 2.4rem;
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 12px rgba(245,200,76,.5));
}
.gameover-title {
    font-size: 1.2rem; font-weight: 800;
    text-align: center;
    color: var(--gold);
    margin-bottom: 4px;
}
.gameover-subtitle {
    font-size: .76rem; font-weight: 700;
    color: var(--t-3);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}
.gameover-standings {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    max-height: 340px;
    overflow-y: auto;
}
.standing-row {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    font-size: .88rem;
}
.standing-row.is-winner {
    background: linear-gradient(180deg, rgba(245,200,76,.18), rgba(245,200,76,.06));
    border-color: rgba(245,200,76,.4);
    box-shadow: 0 0 16px rgba(245,200,76,.18);
}
.standing-row.is-me { outline: 2px solid var(--accent); outline-offset: -1px; }

.standing-rank {
    flex: 0 0 32px;
    font-family: var(--f-head);
    font-size: 1rem; font-weight: 800;
    color: var(--t-2);
    text-align: center;
}
.standing-row.is-winner .standing-rank { color: var(--gold); }

.standing-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255,255,255,.18);
}

.standing-name {
    flex: 0 1 auto;
    font-weight: 700;
    color: var(--t-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 110px;
}
.standing-row.is-me .standing-name::after {
    content: ' (you)';
    color: var(--accent);
    font-weight: 700;
    font-size: .82em;
}

.standing-stats {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: flex-end;
    font-size: .68rem; font-weight: 600;
    color: var(--t-3);
    line-height: 1.3;
    text-align: right;
}
.standing-stats .biggest { color: var(--gold-lt); font-weight: 700; }

.standing-stack {
    flex: 0 0 auto;
    font-family: var(--f-head);
    font-size: 1rem; font-weight: 800;
    color: var(--t-1);
    min-width: 64px;
    text-align: right;
}

.gameover-actions { display: flex; flex-direction: column; gap: 8px; }
.gameover-guest-msg {
    text-align: center;
    font-size: .82rem; color: var(--t-3);
    margin-top: 12px;
    font-weight: 600;
}

/* Slim scrollbar for the standings list */
.gameover-standings { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.gameover-standings::-webkit-scrollbar       { width: 4px; }
.gameover-standings::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ══════════════════════════════════════════════════
   SPECTATOR BANNER (eliminated mid-game)
══════════════════════════════════════════════════ */
#spectator-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.7));
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: slideUp .35s var(--ease-out);
}
.spec-icon {
    font-size: 1.6rem;
    line-height: 1;
}
.spec-title {
    font-family: var(--f-head);
    font-size: .96rem; font-weight: 800;
    color: var(--t-1);
    letter-spacing: 1px;
}
.spec-sub {
    font-size: .76rem; font-weight: 600;
    color: var(--t-3);
    margin-top: 2px;
}

/* When eliminated, hide the cards/bet-floating — banner takes their place */
body.spectating #your-cards,
body.spectating .your-bet-floating,
body.spectating #hand-strength { display: none !important; }
body.spectating .your-cards-area { min-height: 0; }

/* Showdown strip — top of viewport, won't cover YOUR ZONE or community cards */
#showdown-modal {
    position: fixed;
    left: 50%;
    top: calc(var(--hud-h) + 14px);
    transform: translateX(-50%);
    z-index: 90;
    background: var(--surface-1);
    border: 1px solid var(--accent-dim);
    border-radius: 14px;
    padding: 14px 28px 12px;
    text-align: center;
    min-width: 280px; max-width: 88vw;
    box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
    animation: showdownIn .5s var(--ease-snap);
}
@keyframes showdownIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.92); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.sd-title  { font-size: .82rem; font-weight: 800; color: var(--accent);
             margin-bottom: 4px; letter-spacing: 1px; }
.sd-winner { font-size: 1.08rem; font-weight: 800; color: var(--c-win); }
.sd-hand   { font-size: .82rem; color: var(--t-3); margin-top: 2px; font-weight: 600; }
.sd-pot    { font-size: 1.6rem; font-weight: 800; color: var(--gold-lt); margin: 8px 0 4px;
             text-shadow: 0 2px 12px rgba(245,200,76,.35); }

#dark-overlay {
    position: fixed; inset: 0; z-index: 55;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.88) 80%);
    pointer-events: none; opacity: 0;
    transition: opacity var(--d-slow) var(--ease-out);
}
#dark-overlay:not(.hidden) { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════════════════
   SETTINGS — Richup-style icon-row layout
══════════════════════════════════════════════════ */
.settings-list {
    display: flex; flex-direction: column;
    gap: 0;
    margin-bottom: 18px;
    text-align: left;
}
.setting-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
}
.setting-row:last-child { border-bottom: none; }
.setting-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--t-3);
}
.setting-text { flex: 1; }
.setting-label {
    font-size: .96rem; font-weight: 700;
    color: var(--t-1);
    display: block;
}
.setting-desc {
    font-size: .78rem; font-weight: 500;
    color: var(--t-3);
    margin-top: 2px;
    line-height: 1.35;
}
.setting-val {
    font-size: .88rem; font-weight: 800;
    color: var(--accent); min-width: 40px;
    text-align: right;
}
.slider {
    flex: 0 0 110px;
    -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,.15);
    outline: none;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-glow);
    border: 2px solid #fff;
}
.slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Toggle switch — Richup style */
.switch {
    position: relative;
    display: inline-block;
    width: 42px; height: 24px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.12);
    border-radius: 24px;
    transition: background var(--d-fast);
    cursor: pointer;
}
.switch-track::before {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--d-fast) var(--ease-out);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

.settings-actions { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════════════════
   CHAT PANEL
══════════════════════════════════════════════════ */
.chat-btn { position: relative; }
.chat-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--c-fold);
    color: #fff;
    border-radius: 8px;
    font-size: .58rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-0);
    line-height: 1;
}

#chat-panel {
    position: fixed;
    top: calc(var(--hud-h) + 8px);
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    /* Compact floating panel — caps at 480px or 60% of available viewport, whichever is smaller */
    height: min(480px, 60vh);
    max-height: calc(100vh - var(--hud-h) - 24px);
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    z-index: 60;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    animation: chatSlideIn .25s var(--ease-out);
    overflow: hidden;            /* respect rounded corners */
}
@keyframes chatSlideIn {
    from { transform: translateY(-8px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.chat-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}
.chat-header h3 {
    font-size: .96rem; font-weight: 800;
    color: var(--t-1); letter-spacing: .2px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.chat-empty {
    text-align: center;
    color: var(--t-3);
    font-size: .86rem;
    padding: 32px 8px;
    font-weight: 600;
}

.chat-msg {
    display: flex; gap: 10px;
    align-items: flex-start;
    animation: msgIn .25s var(--ease-out);
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255,255,255,.15);
}
.chat-msg-content {
    flex: 1; min-width: 0;
    line-height: 1.35;
}
.chat-msg-name {
    font-size: .72rem; font-weight: 700;
    color: var(--t-3);
    margin-bottom: 2px;
    letter-spacing: .2px;
}
.chat-msg.is-me .chat-msg-name { color: var(--accent); }
.chat-msg-text {
    font-size: .92rem;
    color: var(--t-1);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-emotes {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px 0;
    border-top: 1px solid var(--hairline);
    flex-shrink: 0;
}
.chat-emote {
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    font-size: .82rem; font-weight: 600;
    color: var(--t-2);
    transition: background var(--d-fast), color var(--d-fast), transform var(--d-fast);
}
.chat-emote:hover  { background: var(--surface-3); color: var(--t-1); }
.chat-emote:active { transform: scale(.96); }

.chat-input-row {
    display: flex; gap: 6px;
    padding: 12px 14px;
    flex-shrink: 0;
}
#chat-input {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--t-1);
    font-size: .92rem;
    font-weight: 500;
    outline: none;
    transition: border-color var(--d-fast);
}
#chat-input:focus { border-color: var(--accent); }
.chat-send {
    width: 40px; flex-shrink: 0;
    background: var(--accent);
    border-radius: 10px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--d-fast), transform var(--d-fast);
}
.chat-send:hover  { background: var(--accent-hover); }
.chat-send:active { transform: scale(.94); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }

/* Mobile: chat is a wider sheet, full-width minus margins */
@media (max-width: 540px) {
    #chat-panel {
        right: 8px; left: 8px;
        width: auto;
        height: min(440px, 70vh);
    }
}

/* ══════════════════════════════════════════════════
   DISCONNECTED OVERLAY
══════════════════════════════════════════════════ */
#disconnected-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(12,8,22,.92);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
}
.disc-msg { font-size: 1.3rem; font-weight: 800; color: var(--t-1); }
.disc-sub { font-size: .88rem; color: var(--t-3); font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }
.disc-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--hairline);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 540px) {
    /* Hide non-essential HUD pills on phones — keep only YOU pill, phase, and gear */
    .hud-bar .pill { display: none; }
    .hud-bar .room-pill { display: none; }
    .hud-bar { padding: 0 10px; gap: 6px; }
    .you-pill { padding: 3px 12px 3px 3px; gap: 7px; }
    .you-pill-avatar { width: 26px; height: 26px; font-size: .72rem; }
    .you-pill-name { font-size: .62rem; max-width: 90px; }
    .you-pill-stack { font-size: .84rem; }
    .you-pill-bet { font-size: .66rem; padding: 1px 6px; }
    .phase-pill { font-size: .82rem; padding: 5px 14px; letter-spacing: 1.4px; }

    /* Settings rows: stack control under text so they fit narrow modals */
    .setting-row { flex-wrap: wrap; row-gap: 8px; }
    .setting-row .slider { flex-basis: 100%; order: 5; }
    .setting-row .setting-val { order: 4; }
    .setting-row .switch { order: 4; }
}
@media (max-width: 420px) {
    :root {
        --card-w: 44px; --card-h: 63px;
        --card-w-you: 72px; --card-h-you: 103px;
        --card-w-comm: 46px; --card-h-comm: 66px;
        --your-zone-h: 178px;        /* bumped from 168 — fits cards + hand-strength */
    }
    #oval-table { width: 96vw; max-height: min(200px, 28vh); }
    .seat-stack { font-size: .68rem; padding: 1px 5px; }
    .seat-avatar { width: 30px; height: 30px; font-size: .72rem; }
    .timer-ring { width: 36px; height: 36px; }
    .seat .card { width: 20px; height: 28px; }
    .seat-cards { min-height: 28px; }
    .seat-bet { font-size: .68rem; padding: 1px 7px; }
    #action-buttons button { font-size: .82rem; padding: 12px 4px; letter-spacing: 1.4px; }
    .lobby-title { font-size: 1.6rem; }
    /* Stack the YOU pill row vertically on the smallest phones to save horizontal space */
    .you-pill-row { flex-direction: column; align-items: flex-start; gap: 1px; }
    .you-pill-bet { font-size: .62rem; }
}
@media (min-width: 680px) {
    :root {
        --card-w: 64px; --card-h: 92px;
        --card-w-you: 100px; --card-h-you: 144px;
        --card-w-comm: 70px; --card-h-comm: 100px;
        --your-zone-h: 230px;
    }
    #oval-table { width: min(70vw, 680px); max-height: 420px; }
    .seat .card { width: 32px; height: 46px; }
    .seat-cards { min-height: 46px; }
    .seat-avatar { width: 44px; height: 44px; font-size: 1.05rem; }
    .timer-ring { width: 50px; height: 50px; top: -3px; }
    .seat-name { font-size: .82rem; max-width: 110px; }
    .seat-stack { font-size: .96rem; }
    .your-avatar { width: 48px; height: 48px; font-size: 1.18rem; }
    .your-stack-text { font-size: 1.3rem; }
}
@media (max-height: 480px) and (orientation: landscape) {
    :root {
        --card-w: 38px; --card-h: 55px;
        --card-w-you: 58px; --card-h-you: 84px;
        --card-w-comm: 44px; --card-h-comm: 64px;
        --hud-h: 44px;
        --your-zone-h: 122px;
        --controls-h: 92px;
    }
    #oval-table { width: 80vw; max-height: min(180px, calc(100% - 16px)); margin-bottom: 10px; }
    .your-bet-floating { top: -14px; padding: 2px 10px 2px 6px; font-size: .76rem; }
    .seat .card { width: 20px; height: 28px; }
    .seat-cards { min-height: 28px; }
    .seat-avatar { width: 28px; height: 28px; font-size: .68rem; }
    .timer-ring { width: 36px; height: 36px; }
    .seat-stack { font-size: .68rem; padding: 1px 5px; }
    .seat-bet { font-size: .68rem; }
    #action-buttons button { padding: 10px 4px; font-size: .78rem; letter-spacing: 1.2px; }

    /* Showdown banner — full-width strip across the very top to avoid covering the table */
    #showdown-modal { top: var(--hud-h); padding: 6px 14px 6px; min-width: 320px; max-width: 96vw; }
    .sd-pot { font-size: 1.1rem; margin: 4px 0 2px; }
    .sd-winner { font-size: .88rem; }
    .sd-hand { font-size: .68rem; }
}