/* ===== ICON SET ===== */
/* Self-hosted SVG sprite (assets/icons.svg, Tabler Icons, MIT-licensed) - replaces emoji
   in the UI chrome so icons render identically for every player instead of varying by
   OS/browser emoji font. .icon sizes to the surrounding text via 1em and inherits color
   via currentColor, so it drops into existing button/label styles without extra rules. */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* ===== ROOT VARIABLES ===== */
:root {
    --felt-green: #1a7a3a;
    --felt-dark: #0d4a2a;
    --felt-darker: #061a0e;
    --gold-primary: #ffd700;
    --gold-dark: #b8860b;
    --gold-light: #f0c800;
    --card-white: #f5f5f5;
    --card-shadow: rgba(0,0,0,0.5);
    --text-light: #c9d1d9;
    --text-dark: #0d1117;
    --chip-red: #cc0000;
    --chip-blue: #0044cc;
    --chip-green: #00cc00;
    --chip-gold: #cc9900;
    --fly-duration: 0.45s;
}

/* ===== BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    background: radial-gradient(ellipse at center, #1a1a2e, #0a0a12);
    color: var(--text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* v3 is a vertical/portrait layout by design - the oval table and stacked lobby overlap
   badly in landscape, which is what #rotate-device-overlay below exists to block. */
#rotate-device-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: #0d1117;
    color: var(--text-light);
}
#rotate-device-overlay p {
    max-width: 260px;
    font-size: 1rem;
    line-height: 1.5;
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    /* max-height alone isn't enough to tell a phone-in-landscape apart from a desktop
       browser window someone's just resized smaller - dragging a window narrower/shorter
       can easily land on the exact same dimensions as a phone, incorrectly blocking normal
       desktop play. pointer:coarse (true for touchscreens, false for mouse/trackpad) is the
       actual reliable signal for "this is a touch device", so combine both rather than
       relying on viewport size alone. */
    .game-container { display: none; }
    #rotate-device-overlay { display: flex; }
}

.game-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1a1a2e, #12121f);
    padding: 15px;
    border-radius: 24px;
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.06),
        inset 0 0 80px rgba(0,0,0,0.5),
        0 20px 60px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,215,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== GLASS PANEL ===== */
.glass-panel {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ===== AVATAR (see renderAvatarHTML in game.js) =====
   .avatar-initial is always present underneath any <img> - it's the fallback for guests/
   Telegram/Google users with no photo, AND the safety net if a photo URL ever fails to
   load (the <img>'s onerror just hides itself, revealing this). */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
.avatar-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== SCREEN MANAGEMENT ===== */
.screen {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.screen.active {
    display: flex;
}

/* ===== HEADER ===== */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.header .header-logo {
    font-size: 1.6rem;
    color: var(--gold-primary);
    opacity: 0.5;
    margin: 0 8px;
}
.header h1 {
    margin: 0;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 2px;
    flex-grow: 1;
    color: var(--text-light);
    text-shadow: 0 0 30px rgba(255,215,0,0.05);
}
.boom { 
    color: var(--gold-primary); 
    font-weight: bold; 
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

/* The installation's own logo above the game name (loading and login screens); filled in by server.js (applyBranding), absent when none is set. */
.brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    margin: 6px auto 8px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* The admin's own title under the game name (loading and login screens); filled in by server.js (applyBranding), absent when no title is set. */
.brand-subtitle {
    text-align: center;
    color: var(--gold-primary);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.05rem;
    margin: -8px 16px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.btn.icon-btn {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #8b949e;
    font-size: 1.2rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    position: absolute;
    z-index: 999;
}
.btn.icon-btn:hover { 
    background: rgba(255,215,0,0.1); 
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    transform: scale(1.05);
}
#rules-btn { left: 0; top: 5px; }
#my-history-btn { left: 48px; top: 5px; }
#room-history-btn { left: 96px; top: 5px; }
#room-settings-popup-toggle { left: 144px; top: 5px; }
#leave-btn { right: 0; top: 5px; }
#logout-btn { right: 0; top: 5px; }

/* ===== PREMIUM BUTTON ===== */
.btn-premium {
    background: linear-gradient(145deg, #ffd700, #e6b800);
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    color: #000;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 20px rgba(255,215,0,0.25),
        inset 0 2px 4px rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.btn-premium:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 30px rgba(255,215,0,0.35),
        inset 0 2px 4px rgba(255,255,255,0.3);
}
.btn-premium:active:not(:disabled) {
    transform: translateY(0px);
}
.btn-premium:disabled {
    background: #444;
    color: #888;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ===== LOBBY HEADER BAR (see index.html) ===== */
.lobby-header-bar {
    justify-content: space-between;
    background: linear-gradient(160deg, #1c4a5e, #0d2530);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.lobby-header-bar h1 { font-size: 1.15rem; }
.lobby-header-exit {
    background: rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.12);
}
.lobby-header-chips {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 20px;
    padding: 6px 8px 6px 14px;
    font-weight: bold;
    color: var(--gold-primary);
    flex-shrink: 0;
}
.lobby-header-topup-btn {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(145deg, #ffd700, #e6b800);
    border: none; color: #000; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.lobby-header-topup-btn .icon { width: 14px; height: 14px; }
.lobby-profile-group { display: flex; align-items: center; gap: 10px; }
.lobby-header-exit,
.lobby-profile-group .icon-btn {
    /* .btn.icon-btn is position:absolute by default (it was built for the in-game action
       bar's fixed-corner buttons, each with its own #id { left/right/top } rule elsewhere
       in this file) - these are new buttons living in normal flex rows instead, with no
       such rule, so left at the default they'd float at undefined coordinates instead of
       taking their place in the row. Confirmed via live testing - this is exactly what
       caused the header/profile-row icons to overlap instead of sitting where the flex
       layout put them. !important because .btn.icon-btn (two classes, higher specificity
       than .lobby-header-exit's one) would otherwise win and keep position:absolute even
       though this rule comes later in the file - source order is only a tiebreaker for
       EQUAL specificity, never a substitute for it. */
    position: static !important;
}
.lobby-header-exit { width: 40px; height: 40px; }
.lobby-profile-group .icon-btn { width: 36px; height: 36px; }

/* ===== LOBBY NAV TILES (see index.html) - two big primary-action tiles (Quick Join,
   Create Room), replacing the old single hero button + collapsed text-link toggle.
   Rules/Profile stay as the smaller header icons above them - primary vs secondary
   actions getting visually distinct treatment. */
.lobby-nav-tiles { display: flex; gap: 10px; margin-bottom: 14px; }
.lobby-tile {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 16px 10px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    color: #000;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.15s ease;
}
.lobby-tile:active { transform: translateY(1px); }
.lobby-tile .icon { width: 26px; height: 26px; }
.lobby-tile-label { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
.lobby-tile-sub { font-size: 0.7rem; font-weight: normal; opacity: 0.75; min-height: 1em; }
.lobby-tile-quickjoin {
    background: linear-gradient(145deg, #ffd700, #e6b800);
}
.lobby-tile-quickjoin:not(:disabled) { animation: quickJoinPulse 2.4s ease-in-out infinite; }
@keyframes quickJoinPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
    50% { box-shadow: 0 4px 28px rgba(255,215,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
}
.lobby-tile-create {
    background: linear-gradient(145deg, #4a9d94, #2d6d66);
    color: #fff;
}
.lobby-tile-create.lobby-tile-active {
    background: linear-gradient(145deg, #2d6d66, #1c4a45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 2px 6px rgba(0,0,0,0.3);
}
.lobby-tile-sub .icon { width: 11px; height: 11px; vertical-align: -1px; }

.dealer-decision-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}
.dealer-decision-buttons.hidden {
    display: none;
}
.dealer-decision-buttons .btn-premium,
.dealer-decision-buttons .btn-secondary {
    width: auto;
    flex: 1;
    min-width: 0;
}
.btn-secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px 20px;
    color: #c9d1d9;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.14);
}

/* ===== LOGIN SCREEN ===== */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
    padding: 24px;
}
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 0.85rem; color: #8b949e; font-weight: 500; }
.input-group input { 
    padding: 12px 16px; 
    background: rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 10px; 
    color: white; 
    font-size: 1rem; 
    transition: all 0.3s ease;
}
.input-group input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 20px rgba(255,215,0,0.05);
}

/* ===== LOBBY SCREEN ===== */
.lobby-content { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; }
.player-info-bar { 
    display: flex; justify-content: flex-end; 
    padding: 10px 16px; 
    font-size: 1rem; 
    flex-shrink: 0;
}
/* Room list filter tabs - sits between the Create Room panel and the room cards.
   Pill style echoes the gold/dark chrome used elsewhere (tile labels, ribbon bars)
   rather than introducing a new accent color. */
.room-list-tabs { display: flex; gap: 6px; flex-shrink: 0; }
.room-tab {
    flex: 1;
    padding: 8px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #8b949e;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.room-tab:hover { border-color: rgba(255,215,0,0.3); color: #d9e6df; }
.room-tab.active {
    background: rgba(255,215,0,0.12);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}
.room-tab-count { opacity: 0.75; font-weight: normal; }
.room-list { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 200px; overflow-y: auto; }
.room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.room-item:hover {
    border-color: var(--gold-primary);
    background: rgba(255,215,0,0.03);
}
.room-item strong { display: block; font-size: 1.1rem; color: var(--gold-primary); }
.room-item .room-id { font-size: 0.8rem; color: #8b949e; }

/* ===== ROOM LIST CARD (see renderLobbyList in game.js) - "felt" style, echoing the
   actual in-game table felt (same green radial-gradient language) rather than a plain
   flat dark card, plus a corner ribbon + prominent min-bet stat, closer to the reference
   look than the earlier plainer card design. ===== */
.room-felt-card {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    /* Overrides .room-item's own gap:12px, which was stacking on top of this card's own
       margin-bottom rules below and doubling the space between rows (~20px instead of
       the intended 8px) - that stacked gap was the "empty space" eyesore. Spacing between
       rows is now owned by gap alone; the per-element margins were removed to match. */
    gap: 6px;
    background: radial-gradient(ellipse at 30% 20%, #1f5c3a, #0d2818 75%);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px 12px 7px;
    cursor: pointer;
}
.room-felt-card-disabled { cursor: not-allowed; opacity: 0.6; }
.room-card-active { border-color: rgba(255,107,107,0.4); }
/* Full-width bar across the very top of the card (pulled to the card's own edges via
   negative margin, matching its rounded corners) rather than a small diagonal corner
   ribbon - reads as a proper banner/top-layer instead of a decorative corner accent. */
.room-felt-ribbon-bar {
    margin: -8px -12px 0;
    padding: 4px 12px;
    background: linear-gradient(90deg, #ff8c00, #ffb347);
    color: #1a1a1a;
    font-weight: 900;
    font-size: 0.68rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 11px 11px 0 0;
}
.room-hot-badge { position: absolute; top: 18px; right: 10px; font-size: 0.9rem; line-height: 1; }
/* Top-left counterpart to .room-hot-badge - only shown when the room's creator overrode
   at least one setting (settings.isCustom). Global rooms get no badge at all, so the
   common case stays visually quiet. */
.room-custom-badge {
    position: absolute;
    top: 18px;
    left: 10px;
    background: rgba(255,215,0,0.15);
    border: 1px solid rgba(255,215,0,0.4);
    color: var(--gold-primary);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.4;
}
/* Matches .room-history-lobby-btn's look exactly - same row, same weight, just a
   different icon/action. */
.room-settings-lobby-btn {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    color: #d9e6df;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.room-settings-lobby-btn .icon { width: 13px; height: 13px; }
.room-felt-dealer-row {
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.room-card-dealer {
    font-size: 0.7rem; color: #d9e6df; display: inline-flex; align-items: center; gap: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-card-dealer .icon { width: 11px; height: 11px; }
.room-felt-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.room-felt-right-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.room-felt-stat {
    flex-shrink: 0; text-align: right;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 8px;
    padding: 2px 8px;
}
.room-felt-stat-label { display: block; font-size: 0.52rem; color: #d9e6df; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }
.room-felt-stat-value { display: flex; align-items: center; justify-content: flex-end; gap: 2px; font-weight: 900; font-size: 0.85rem; color: var(--gold-primary); }
.room-felt-stat-value .icon { width: 11px; height: 11px; }
.room-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-history-lobby-btn {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    color: #d9e6df;
    border-radius: 7px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.room-history-lobby-btn .icon { width: 13px; height: 13px; }
.seat-dots { display: inline-flex; gap: 3px; }
.seat-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); display: inline-block; }
.seat-dot-filled { background: var(--gold-primary); }
.room-list-empty {
    text-align: center; padding: 30px 20px; color: #8b949e;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.join-room-btn { 
    background: linear-gradient(145deg, #238636, #1a6e2a);
    color: white; 
    border: none; 
    padding: 8px 18px; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease;
}
.join-room-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(35,134,54,0.3);
}
.join-room-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
}
.create-room-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.create-room-area input {
    padding: 12px 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
}
.create-room-area input:focus {
    outline: none;
    border-color: var(--gold-primary);
}

.mode-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 6px;
    background: rgba(255,215,0,0.12);
    color: var(--gold-primary);
    border: 1px solid rgba(255,215,0,0.3);
}
.dealer-badge {
    color: var(--gold-primary);
    font-size: 0.8rem;
    margin-left: 4px;
}

/* ===== PLAYER LIST ===== */
.player-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 0.8rem;
}
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}
.player-item:hover {
    border-color: var(--gold-primary);
}
.player-item .p-name { 
    color: var(--text-light); 
    font-weight: bold; 
    font-size: 0.85rem;
}
.player-item .p-chips { 
    color: var(--gold-primary); 
    font-size: 0.75rem;
}
.history-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #8b949e;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.history-btn:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    transform: scale(1.05);
}

/* ===== PLAYER CARDS IN LIST ===== */
/* (sizing/appearance defined once, later in the file, alongside .pc-rank/.pc-suit -
   having a second conflicting rule here used to make dealing-phase cards render at
   a different size than result-phase cards) */
.player-cards-container {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* ===== POPUPS ===== */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}
.popup-overlay.hidden {
    display: none !important;
}
.popup-content {
    max-width: 420px;
    width: 90%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px;
    animation: slideUp 0.3s ease;
}
.rules-infographic { width: 100%; border-radius: 10px; margin-bottom: 0; display: block; }
/* Wider than the default .popup-content (420px) specifically for this popup, so the
   infographic renders bigger/more readable rather than being squeezed down to a narrow
   default popup width - especially noticeable on desktop, where 420px in a large browser
   window looked cramped for a detailed reference image like this. */
.rules-popup-content { max-width: 480px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== RULES ===== */
.compact-rules .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.compact-rules .header-row { 
    border-bottom: 2px solid var(--gold-primary); 
    padding: 10px 0; 
    color: var(--gold-primary);
}
.compact-rules .mult { color: var(--gold-primary); font-weight: bold; }
.compact-rules .emoji { margin-left: 6px; font-size: 0.9rem; }

/* ===== HISTORY POPUP ===== */
.history-popup {
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold-primary);
    margin-bottom: 15px;
}
.history-header h3 { color: var(--gold-primary); margin: 0; font-size: 1.1rem; }
.history-list { overflow-y: auto; max-height: 400px; flex: 1; }
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 3px; }
.history-item {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}
.history-item:hover { border-color: var(--gold-primary); }
.history-cards { font-size: 0.9rem; color: var(--text-light); font-weight: bold; margin-bottom: 4px; }
.history-details { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.8rem; }
.history-hand { color: #58a6ff; font-weight: bold; }
.history-result { font-weight: bold; padding: 2px 10px; border-radius: 4px; background: rgba(0,0,0,0.2); }
.history-multiplier { color: var(--gold-primary); font-weight: bold; }
.history-chips { font-weight: bold; }
.history-time { color: #8b949e; font-size: 0.7rem; margin-left: auto; }

/* ===== PREMIUM TABLE ===== */
.table-area {
    background: radial-gradient(ellipse at 50% 40%, var(--felt-green) 0%, var(--felt-dark) 55%, var(--felt-darker) 100%);
    border-radius: 140px 140px 140px 140px;
    padding: 30px 20px 25px;
    border: none;
    box-shadow: 
        inset 0 0 100px rgba(0,0,0,0.6),
        0 0 40px rgba(0,0,0,0.8),
        0 0 80px rgba(0,50,0,0.15);
    position: relative;
    min-height: 280px;
}
.table-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 21px),
        radial-gradient(ellipse at 40% 30%, rgba(255,215,0,0.03), transparent 60%);
    border-radius: 140px;
    pointer-events: none;
}
.table-area::after {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 160px;
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.table-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,215,0,0.05);
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 10px;
    pointer-events: none;
    z-index: 0;
    text-shadow: 0 0 40px rgba(255,215,0,0.03);
}
.dealer-area {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; z-index: 1;
}
.dealer-label {
    color: #ffd700; font-size: 0.7rem; font-weight: bold; letter-spacing: 3px;
    text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
}
.opponent-hand { display: flex; gap: 16px; justify-content: center; position: relative; z-index: 1; }
.player-area { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; margin-top: 8px; }
.player-hand { display: flex; gap: 16px; justify-content: center; position: relative; z-index: 1; }
.player-label { color: #ffd700; font-size: 0.7rem; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5); }
.community-cards { display: flex; gap: 12px; justify-content: center; position: relative; z-index: 1; margin: 6px 0; }

/* ===== CARD LAYOUT ===== */
.card {
    width: 56px; height: 80px;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3), inset 0 -3px 8px rgba(0,0,0,0.06), inset 0 3px 8px rgba(255,255,255,0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; user-select: none; flex-shrink: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card .card-top, .card .card-bottom {
    position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 0.9; font-weight: bold;
}
.card .card-top { top: 4px; left: 6px; }
.card .card-bottom { bottom: 4px; right: 6px; }
.card .card-rank { font-size: 0.75rem; font-weight: bold; line-height: 1; }
.card .card-suit-small { font-size: 0.6rem; line-height: 1; }
.card .card-center { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.card .card-suit-large { font-size: 2.4rem; font-weight: bold; line-height: 1; }
.card::after {
    content: ''; position: absolute; top: 2px; left: 4px; right: 4px; height: 28%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 8px 8px 50% 50%; pointer-events: none;
}
.card:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3), inset 0 -3px 8px rgba(0,0,0,0.06), inset 0 3px 8px rgba(255,255,255,0.9); z-index: 10; }
.card.back { background: linear-gradient(145deg, #1a2a6a, #2a4a8a); border: 3px solid var(--gold-dark); box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3); color: transparent; }
.card.back::before { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 2px solid rgba(255,215,0,0.2); border-radius: 6px; }
.card.back::after { content: '♠'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2rem; color: rgba(255,215,0,0.15); text-shadow: 0 0 40px rgba(255,215,0,0.08); background: none; height: auto; }
.card.empty { background: rgba(255,255,255,0.04); border: 2px dashed rgba(255,255,255,0.08); box-shadow: none; color: transparent; }
.card.empty::after { display: none; }

/* ===== FLYING CARD ANIMATION ===== */
.card-flying {
    position: fixed !important; width: 50px; height: 70px; border-radius: 6px;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    z-index: 9998; pointer-events: none; transition: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.2rem; border: 1px solid rgba(0,0,0,0.15);
    transform-origin: center center;
}
.card-flying .card-rank-fly { font-size: 0.8rem; font-weight: bold; }
.card-flying .card-suit-fly { font-size: 1.6rem; }
/* .card-flying.fly-colored - no rule needed here; color is set inline per-suit in
   dealCardWithFly (game.js), see CARD_SUIT_COLORS there. The class itself is added but
   never queried by anything - purely a semantic marker distinguishing a suit-colored
   flying card from a face-down one (.fly-back, which does have its own rule below). */
.card-flying.fly-back { background: linear-gradient(145deg, #1a2a6a, #2a4a8a); border: 3px solid var(--gold-dark); }
.card-flying.fly-back::after { content: '♠'; font-size: 2.2rem; color: rgba(255,215,0,0.15); }

/* ===== CARD DEALING ANIMATION ===== */
.card.dealing { animation: cardDeal 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes cardDeal {
    0% { transform: scale(0.7) rotateY(90deg) translateY(-20px); opacity: 0; }
    60% { transform: scale(1.05) rotateY(-5deg) translateY(2px); opacity: 1; }
    100% { transform: scale(1) rotateY(0deg) translateY(0); opacity: 1; }
}
/* Kept as a CSS-level fallback matching CARD_SUIT_COLORS in game.js (4-color: hearts red,
   diamonds blue, clubs green, spades black) rather than removed outright - these target
   the rank/suit spans directly via [data-suit], which is MORE specific than the color
   renderCardInSlot sets inline on the parent .card, so it was silently overriding that
   inline color back to the old 2-color scheme the instant a community card landed (it
   never applied mid-flight, since the flying element is .card-flying, a different class -
   which is why flight showed the right color and landing didn't). Updated to match
   instead of deleted, so the two can never disagree again regardless of which element
   the color happens to be set on. */
.card[data-suit="♥"] .card-rank, .card[data-suit="♥"] .card-suit-small, .card[data-suit="♥"] .card-suit-large { color: #e0413a; }
.card[data-suit="♦"] .card-rank, .card[data-suit="♦"] .card-suit-small, .card[data-suit="♦"] .card-suit-large { color: #2f7de0; }
.card[data-suit="♣"] .card-rank, .card[data-suit="♣"] .card-suit-small, .card[data-suit="♣"] .card-suit-large { color: #1a9c4a; }
.card[data-suit="♠"] .card-rank, .card[data-suit="♠"] .card-suit-small, .card[data-suit="♠"] .card-suit-large { color: #141412; }

@media (max-width: 420px) {
    .card { width: 44px; height: 64px; }
    .card .card-rank { font-size: 0.6rem; }
    .card .card-suit-small { font-size: 0.5rem; }
    .card .card-suit-large { font-size: 1.8rem; }
    .card .card-top { top: 3px; left: 4px; }
    .card .card-bottom { bottom: 3px; right: 4px; }
    .opponent-hand { gap: 10px; }
    .player-hand { gap: 10px; }
    .community-cards { gap: 8px; }
    .table-area { border-radius: 60px; padding: 20px 12px 16px; min-height: 200px; }
    .table-center { font-size: 1.8rem; letter-spacing: 6px; }
    .game-container { padding: 10px; }
    .header h1 { font-size: 1rem; }
    .header .header-logo { font-size: 1.2rem; }
    .stat-box { font-size: 0.7rem; padding: 4px 8px; height: 32px; }
    .bet-controls input { width: 32px; font-size: 0.8rem; }
    .player-list { grid-template-columns: 1fr; }
    .player-item { flex: 1 1 100%; }
    .player-card-slot { width: 18px; height: 24px; font-size: 0.45rem; }
    .player-cards-container { gap: 2px; }
    .quick-bet-btn { font-size: 0.5rem; padding: 1px 4px; }
    #my-history-btn { left: 38px; top: 5px; }
    #room-history-btn { left: 76px; top: 5px; }
    #room-settings-popup-toggle { left: 114px; top: 5px; }
    .btn.icon-btn { width: 32px; height: 32px; font-size: 0.9rem; }
    .btn-premium { font-size: 0.9rem; padding: 10px 16px; }
    .dealer-label, .player-label { font-size: 0.6rem; }
}

/* ===== CONTROLS ===== */
.controls { margin-top: 15px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.top-stats { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; }
.stat-box { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex: 1; height: 38px; box-sizing: border-box; transition: all 0.3s ease; }
.stat-box:hover { border-color: var(--gold-primary); }
.chip-display { border-color: rgba(255,215,0,0.2); background: rgba(255,215,0,0.05); }
.chip-display .chip-icon { margin-right: 4px; }
.chip-display span { text-shadow: 0 0 20px rgba(255,215,0,0.15); }
.stake-display { border-color: rgba(88,166,255,0.2); color: #58a6ff; }
.stake-display span { transition: color 0.3s ease; }
.stake-display span.positive { color: #2ea043; }
.stake-display span.negative { color: #ff6b6b; }
.stake-display span.zero { color: #58a6ff; }
.bet-controls { border-color: rgba(255,255,255,0.06); gap: 4px; font-weight: bold; flex-wrap: wrap; height: auto; min-height: 38px; padding: 4px 8px; }
.bet-controls label { font-size: 0.75rem; color: #8b949e; }
.bet-controls input { width: 40px; padding: 2px 0; background: transparent; border: none; color: white; text-align: center; font-weight: bold; font-size: 0.95rem; outline: none; }
.bet-controls input:disabled { opacity: 0.5; cursor: not-allowed; color: #8b949e; }
.quick-bets { display: flex; gap: 3px; }
.quick-bet-btn { background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.1); border-radius: 4px; color: var(--gold-primary); padding: 1px 6px; font-size: 0.6rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
.quick-bet-btn:hover { background: rgba(255,215,0,0.15); transform: scale(1.05); }
.buttons { display: flex; width: 100%; justify-content: center; }
.result-box { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,215,0,0.08); border-radius: 12px; padding: 12px; margin-top: 12px; text-align: center; font-size: 0.9rem; min-height: 45px; font-weight: bold; color: var(--gold-primary); box-shadow: inset 0 0 30px rgba(255,215,0,0.02); transition: all 0.3s ease; line-height: 1.6; }
.result-box.win { border-color: #2ea043; box-shadow: 0 0 40px rgba(46,160,67,0.08); animation: winPulse 0.5s ease; }
.result-box.lose { border-color: #ff6b6b; box-shadow: 0 0 40px rgba(255,107,107,0.08); }
.result-box.push { border-color: var(--gold-primary); box-shadow: 0 0 40px rgba(255,215,0,0.08); }
@keyframes winPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.status-box { text-align: center; font-size: 0.8rem; color: #8b949e; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.2); margin-top: 5px; transition: all 0.3s ease; }
.status-box.waiting { color: var(--gold-primary); animation: pulse 1.5s ease-in-out infinite; background: rgba(255,215,0,0.05); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.98); } }
#leave-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
#leave-btn:not(:disabled):hover { background: rgba(255,107,107,0.1); border-color: #ff6b6b; color: #ff6b6b; }
.active-mult { background: rgba(255, 215, 0, 0.12) !important; border-left: 3px solid var(--gold-primary) !important; }
.room-item .room-id.active { color: #ff6b6b !important; animation: pulse 1.5s ease-in-out infinite; }

/* ================================================================
   ===== V2 LANDSCAPE REDESIGN =====
   ================================================================ */
.game-container.v2-wide { max-width: 100%; width: 96vw; min-height: 0; padding: 8px 10px; }
.v2-screen { gap: 6px; padding: 0; height: 100%; }

/* ===== TOP BAR ===== */
.v2-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.v2-topbar-icons { display: flex; gap: 5px; position: relative; }
.v2-icon-btn { position: static !important; width: 24px !important; height: 24px !important; font-size: 0.75rem !important; border-radius: 6px !important; }
.v2-topbar-room { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #8b949e; flex-wrap: wrap; justify-content: center; }
.v2-topbar-room strong { color: #ffd700; letter-spacing: 0.5px; }
.v2-copy-btn { background: none; border: 1px solid #30363d; border-radius: 5px; color: #8b949e; padding: 1px 6px; cursor: pointer; font-size: 0.68rem; }

/* ===== DROPDOWN MENU (v3) =====
   Consolidates what used to be separate topbar icons (History/Settings/Rules/Leave)
   and bottom-bar action pills (Spectate/Join as Player/Auto-Play) into a single
   menu, opened from one hamburger button top-left. */
.v3-menu-wrapper { position: relative; }
.v3-menu-btn {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #30363d;
    color: #e6edf3;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.v3-menu-btn:hover { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); }
.v3-menu-spacer { width: 28px; flex-shrink: 0; }
.v3-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    background: linear-gradient(145deg, #1a1a2e, #12121f);
    border: 1px solid rgba(255,215,0,0.15);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}
.v3-dropdown-menu.hidden { display: none; }
.v3-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e6edf3;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.v3-menu-item span { flex: 1; }
.v3-menu-item:hover { background: rgba(255,255,255,0.07); }
.v3-menu-item-active { color: #ffd700; }
.v3-menu-item-danger { color: #ff6b6b; }
.v3-menu-item-danger:hover { background: rgba(255,107,107,0.1); }
.v3-menu-toggle-item input[type="checkbox"] { margin: 0; flex-shrink: 0; cursor: pointer; }

/* ===== SETTINGS BAR ===== */
.v2-settings-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.v2-settings-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.v2-action-pill { padding: 3px 9px; background: rgba(255,255,255,0.05); border: 1px solid #30363d; border-radius: 7px; color: #8b949e; cursor: pointer; font-size: 0.68rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.v2-action-pill-active { background: rgba(46,160,67,0.15); border-color: #2ea043; color: #2ea043; font-weight: bold; }
.v2-toggle-pill input { cursor: pointer; margin: 0; }
.v2-spectating-banner { text-align: center; padding: 6px; background: rgba(88,166,255,0.1); border: 1px solid #58a6ff; border-radius: 7px; color: #58a6ff; font-weight: bold; font-size: 0.72rem; flex-shrink: 0; }

/* ===== OVAL TABLE (v3) =====
   Single ring container: the felt oval holds the centered pot/dealer/deck
   panel (.v2-table-area, absolutely centered) and the 9 seats
   (.v2-player-grid / .v3-seat-ring) positioned around its perimeter via
   nth-child. Seat coordinates were computed for a 9-point ellipse
   (rx 46%, ry 44%) starting at bottom-center and going clockwise. */
.v3-table-oval {
    position: relative;
    /* Where the round counter sits; the white status message hangs off this too (see
       .v3-table-status-message) so the two can't drift apart. 12% on a tall table, but
       never above 92px: the top-row seats' floating amount tags reach ~80px below the
       felt's top edge, and the counter should stay clear of them on short screens. */
    --round-top: max(12%, 92px);
    flex: 1;
    min-height: 0;
    /* Both bumped up from 85%/420px - border-width grew from 26px to 65px to fix the
       rail's corner curve (see the RAIL comment below), and since box-sizing:border-box
       is in effect globally, a fatter border directly eats into this element's interior
       (where seats/cards/deck/cut all live) unless the outer box grows to compensate.
       Community cards looking smaller and seats appearing to shift position were both
       downstream of this same cause - seats are positioned as % of this box's interior,
       so a smaller interior recomputes every seat's pixel position too, even though
       none of their percentages changed. Sized to restore roughly the original interior
       play area at the new border thickness. */
    width: 94%;
    max-width: 480px;
    margin: 0 auto;
    /* Plain, unrounded green fill (matches the felt's own dark green tone) - this is
       what shows in the small gap between the rounded felt (::before below, now at a
       50px radius) and this box's true square corner, instead of the raw black page
       background showing through there. Was a dark rail-tone color first, but that
       just meant the gap blended with the RAIL instead of the felt - the actual ask
       was for it to read as more felt, not less rail, so green matches the intent
       directly. Every earlier attempt to fix this by adding more background/shadow
       layers on THIS element failed because ALL of an element's own background and
       box-shadow layers share the SAME border-radius clip - piling on more layers
       here, at any color/blur/opacity, can never paint outside that one shared curve.
       A genuinely separate box (the ::before pseudo-element) is the only way to get a
       second, independently-shaped layer. */
    background: #071f10;
    border-style: solid;
    border-width: 65px;
    border-image-source: url('assets/table_rail.png');
    border-image-slice: 70;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
    /* Outer drop-shadow, not inset - unaffected by the corner-clip issue explained
       above since it paints outside the box, not inside it. Kept on the soft/blurred
       side (30px blur) so its own now-square corners (this element intentionally has no
       border-radius, see above) aren't sharply visible against the rail's rounded
       shape. */
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
/* The felt (dot texture + gradient + green glow rim) - a separate layer from
   .v3-table-oval's own square dark fill above, sized to exactly the interior (inset:0,
   never overlapping the border). Left square (no radius) - the rail's own opaque
   corner pixels are what create the rounded illusion, and any radius attempted here
   (small or large) kept revealing a gap behind the cut corner that didn't fully
   resolve after several rounds, so back to relying on the rail alone for the curve. */
.v3-table-oval::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.2px) 0 0 / 14px 14px,
        radial-gradient(ellipse at center, #0d3a1f 0%, #071f10 75%);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.06),
        inset 0 0 40px rgba(0,0,0,0.6),
        /* The glow ring - sits just inside the rail, fading into the felt, matching the
           reference photo's neon-green edge light. */
        inset 0 0 18px 2px rgba(70,230,120,0.55),
        inset 0 0 3px 1px rgba(140,255,180,0.7);
    z-index: 0;
}
/* Inner stitched outline (the lighter rounded-rect line inset from the rail in the
   reference photo, marking the action area) - a separate pseudo-element rather than a
   border on .v3-table-oval itself, since it needs to sit inset from the edges rather
   than flush against them. */
.v3-table-oval::after {
    content: '';
    position: absolute;
    top: 12%;
    left: 8%;
    right: 8%;
    bottom: 12%;
    border: 1.5px dashed rgba(210,255,225,0.22);
    border-radius: 45% / 30%;
    pointer-events: none;
    z-index: 0;
}
/* Round counter and this player's win/lose amount, shown as plain text on the felt
   (matching the reference layout - no background box) above/below the community-cards+
   deck/cut block respectively. Positioned by top:% estimated against a screenshot, not
   pixel-measured - may need a small adjustment once seen live, same as the seat ring
   positions were. */
.v3-table-round-display {
    position: absolute;
    top: var(--round-top);
    left: 50%;
    transform: translateX(-50%);
    /* left:50% gives the box only HALF the felt's width to fit in, so on a narrow table
       "ROUNDS 44" wrapped onto two lines and the second line ran into the status text
       below it. Never wrap - it's one short label. */
    white-space: nowrap;
    color: #ff6b6b;
    font-weight: bold;
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.9);
    z-index: 2;
    pointer-events: none;
}
/* Moved onto the felt from the bottom-of-screen bar these used to live in (see the HTML
   comment above #status-message) - same .status-box/.v2-status-message look (dark
   translucent pill), just repositioned and narrowed so they read as part of the table
   rather than a full-width bar. Round display nudged up (24% -> 20%) to free the space
   #status-message now sits in, just under the rail. */
.v3-table-status-message {
    /* Two spots, chosen by the status text's own colour (game.js swaps the 'waiting'
       class on/off with every status update):
       - plain / white status (bet prompts, "You're being offered the dealer seat...",
         "Waiting for the dealer to decide...", Game Over, etc.) sits directly under the
         round counter (.v3-table-round-display, one line, ~24px tall) - this rule.
       - yellow 'waiting' status (pulsing) goes back to the original spot under the
         win/lose/push text - see .v3-table-status-message.waiting below.
       That keeps the white status and the yellow #dealer-decision-status banner (which is
       always yellow, and lives under win/lose) from ever landing on top of each other -
       e.g. a player being offered the dealer seat sees BOTH at once. */
    position: absolute;
    top: calc(var(--round-top) + 34px);
    left: 0;
    right: 0;
    /* z-index:7 - went through two rounds of incrementally losing z-index ties on this
       table (first .v2-table-area at 2, then #player-list/.v3-seat-ring at 3) before
       actually checking what else exists on the felt. Per-seat floating bet/amount tags
       (.v2-player-tab-bettag/-amounttag) sit at z-index:6, the highest of anything else
       in this whole area - 7 clears every one of them at once instead of chasing the
       next tie individually. */
    z-index: 7;
    width: 78%;
    max-width: 320px;
    margin: 0 auto;
    /* .status-box's `transition: all` would otherwise make the message visibly slide
       between the two spots whenever its colour state flips - only fade colours. */
    transition: color 0.3s ease, background 0.3s ease;
}
.v3-table-status-message.waiting {
    top: calc(64% + 95px);
}
.v3-table-decision-status {
    position: absolute;
    top: calc(64% + 95px);
    left: 0;
    right: 0;
    z-index: 7;
    width: 78%;
    max-width: 320px;
    margin: 0 auto;
}
.v3-table-winlose-display {
    position: absolute;
    top: calc(64% + 50px);
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.9);
    z-index: 2;
    pointer-events: none;
}
/* ===== RAIL (v3) =====
   The dark rail + wood accents are a single 9-slice border-image sourced from
   the real reference table photo (assets/table_rail.png). border-image never
   respects border-radius when drawing the image itself, so it always paints a
   square corner region using the photo's own baked-in curve to fake the
   rounded look at whatever scale border-width implies - the slice is sized
   generously (70px) to fully capture that curve. Only the 4 edge strips
   (where the wood pieces are) stretch, and only along their length - never
   their thickness - so the wood grain never warps no matter how tall/short/
   wide the table ends up on a given screen.
   border-width is 65px (up from an original 26px) so the corner curve
   renders at a big enough pixel size to look smooth rather than chunky.
   The felt (::before, above) is left square - relies entirely on this
   rail's own opaque corner pixels for the rounded look, same as the
   original design. */

/* ===== TABLE AREA - centered pot/dealer/deck panel ===== */
.v2-table-area {
    position: absolute;
    top: 45%;
    left: 50%;
    /* +15px nudges the whole community/deck/cut group down slightly, per request. */
    transform: translate(-50%, calc(-50% + 35px));
    /* Widened from 82% so the 5 community card slots (which fill this width edge to
       edge via .v2-table-community .community-cards below) spread further across the
       felt instead of clustering narrow in the center. */
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    /* No background/border/radius here on purpose - cards, deck, and cut sit directly on
       the felt now, matching the reference photo (which has no separate framed panel
       around them, just the inner dashed guideline oval already drawn on the felt
       itself above). Kept as a plain positioning wrapper rather than removed entirely,
       since game.js still targets this element to lay out its children. */
    min-height: 55px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    z-index: 2;
}

/* ===== COMMUNITY ===== */
.v2-table-community {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: center;
}
.v2-table-community .community-cards {
    display: flex;
    /* Switched from justify-content:space-between to center - space-between only looks
       centered if the 5 fixed-width cards happen to sum up to exactly this container's
       width, which they don't reliably, and any mismatch reads as the whole row being
       offset to one side. center is immune to that - it centers the row's total width
       regardless of exact fit, so a slightly bigger gap fills the space instead. */
    gap: 10px;
    width: 100%;
    justify-content: center;
}

/* ===== DECK AND CUT SECTION ===== */
.v2-table-deck {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}
/* Deck card + "DECK" label, and cut card + "CUT" label, each stack
   vertically (label below its own card) as a self-contained group; the two
   groups then sit side by side within .v2-table-deck above. */
.v2-deck-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.v2-deck-stack {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.v2-deck-stack .card {
    width: 30px;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
}
.v2-deck-stack .card.back {
    border-color: #8b6914;
}
.v2-deck-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 2;
}
.v2-deck-label {
    color: #8b949e;
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.v2-cut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* .v2-cut-card .card's actual sizing lives in the merged rule further down (shared with
   .v2-table-community/.v2-deck-stack) - a separate, now-superseded rule used to live
   here setting width:30px/border-radius:5px, dead weight since the later merged rule
   already wins for both properties (same specificity, later in the file). Removed to
   avoid confusion for future edits. */
.v2-cut-label {
    color: #8b949e;
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Table cards sizing - fluid, not a fixed px + breakpoint, so there's no
   mismatch between card size and text size at any screen width (that
   mismatch is exactly what caused the last two bugs). Width scales smoothly
   with viewport via clamp(); height follows via aspect-ratio instead of a
   separate value that could fall out of sync. The card's own font-size is
   also clamped, and every corner/center text size below is defined as an
   `em` multiple of it - so resizing the card automatically and correctly
   resizes all its text together from this one place. */
/* Community cards: flex:1 with min-width:0 makes flexbox compute the exact
   width that guarantees all 5 fit in the row - this can't overflow no
   matter the screen size, unlike a vw-based estimate (which still didn't
   match the real available space closely enough and kept overflowing).
   max-width caps how big they get on wide screens. Height follows via
   aspect-ratio, and font-size is set the same way as before so all the
   corner/center text (defined in em below) scales correctly with whatever
   width flexbox lands on. */
/* Community cards merged into the exact same selector as DECK/CUT (rather than a
   separately-written copy of the same values) so there's zero room for them to
   compute differently - a separate rule with identical-looking values still diverged
   in practice (5 cards in a row vs 2 - something about that flex context was still
   affecting the result), so this guarantees it by construction instead. */
.v2-table-community .card,
.v2-deck-stack .card,
.v2-cut-card .card {
    flex: 0 0 auto;
    width: clamp(30px, 10vw, 48px);
    height: auto;
    aspect-ratio: 48 / 67;
    border-radius: 7px;
}
.v2-table-community .card {
    font-size: clamp(9px, 2.6cqw, 16px);
    container-type: inline-size;
}
.v2-deck-stack .card,
.v2-cut-card .card {
    font-size: clamp(10px, 3.3vw, 16px);
}
.v2-table-community .card::after,
.v2-deck-stack .card::after,
.v2-cut-card .card::after {
    font-size: 1.3em;
}

/* ===== 9-SEAT RING (v3) =====
   .v2-player-grid is now the ring container: position:relative, filling the
   oval. Each seat (.v2-player-tab) is absolutely positioned and centered on
   its point via translate(-50%,-50%). Seat 1 is bottom-center; seats 2-9 go
   clockwise around the ellipse. */
.v2-player-grid.v3-seat-ring {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Self-picked seating: when a spectator claims their first seat (or an already-seated
       player switches seats), renderPlayerList briefly sets this to opacity:0 then back to
       1 on the next frame - every other seat's physical position on the ring is computed
       relative to MY OWN seat, so claiming/switching seats instantly rearranges everyone
       else's position. A quick fade softens that snap into something that reads as
       deliberate instead of jarring, without needing to keep player cards as persistent DOM
       nodes across renders (a bigger structural change, not attempted here). */
    transition: opacity 0.35s ease;
}
/* Frameless (per request) - the seat is no longer a boxed card; avatar+ring, cards, and
   two small text pills (name, chips) float directly on the felt, matching the reference
   photo. This rule is now pure layout/positioning - no background/border/shadow of its
   own. The empty/claimable "tap to sit" state is the one exception that still gets a
   visible box (see .v2-player-tab-empty below), since there's no avatar/cards to anchor
   an empty seat visually otherwise. */
.v2-player-tab {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    /* Compact (Option A) - Option B (clamp 92-128px) overlapped neighboring seats on a
       real phone (top-row pair nearly merged, right-side seats pushed toward/past the
       rail with cards clipped) - confirmed live, not just a mockup guess. This sizing
       keeps the avatar+ring+cards layout but close to the original pre-redesign width. */
    width: clamp(76px, 23vw, 104px);
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-width: 0;
}
/* The -13px/+13px nudges below were tuned for the original 26px border-width (roughly
   half of it, nestling seats toward the rail); scaled to -32px/+32px to match now that
   border-width is 65px, so seats sit centered against the (now much thicker) wood
   frame again instead of crowding into the felt. */
/* nth-child(4)/(7) raised from top:26% to match (5)/(6)'s row, and all four brought up
   closer to the felt's top edge - per user's drawn reference showing all 4 "top row"
   seats (left edge, center-left, center-right, right edge) level with each other near
   the top, instead of the side ones sitting noticeably lower than the center ones. */
/* Reverted (4)/(7) back near their original position (they got moved way too high last
   time), and pushed (5)/(6) up further instead - those two were the pair that actually
   needed to move closer to the rail, not the side seats. */
/* Hand-tuned by the user directly against the live rendered table, replacing the
   estimated values from earlier - these are the final, confirmed-correct positions. */
.v3-seat-ring > :nth-child(1) { left: 50%; top: 100%; }
.v3-seat-ring > :nth-child(2) { left: 0%; top: 95%; transform: translate(calc(-50% - 32px), -50%); }
.v3-seat-ring > :nth-child(3) { left: 0%; top: 68%; transform: translate(calc(-50% - 32px), -50%); }
.v3-seat-ring > :nth-child(4) { left: 0%; top: 23%; transform: translate(calc(-50% - 32px), -50%); }
.v3-seat-ring > :nth-child(5) { left: 24%; top: 0%; }
.v3-seat-ring > :nth-child(6) { left: 76%; top: 0%; }
.v3-seat-ring > :nth-child(7) { left: 100%; top: 23%; transform: translate(calc(-50% + 32px), -50%); }
.v3-seat-ring > :nth-child(8) { left: 100%; top: 68%; transform: translate(calc(-50% + 32px), -50%); }
.v3-seat-ring > :nth-child(9) { left: 100%; top: 95%; transform: translate(calc(-50% + 32px), -50%); }
/* Empty/claimable seat - the one state that keeps a visible box, since there's nothing
   else (no avatar, no cards) to show where an open seat is. Owns its own full
   background/border now that the base rule above no longer provides one. */
.v2-player-tab-empty {
    opacity: 0.35;
    cursor: default;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 5px 6px;
}
.v2-player-tab-empty:hover { border-color: rgba(255,255,255,0.15); }
/* Self-picked seating: overrides .v2-player-tab-empty's non-interactive styling above for
   an actually-tappable seat (empty, or bot-occupied and displaceable) - higher opacity and
   a gold-tinted border/hover since claiming a seat is a primary action, same accent used
   elsewhere for primary CTA/own-seat/dealer-crown. Declared after .v2-player-tab-empty so
   its opacity/cursor correctly win when both classes land on the same empty-and-claimable
   seat. */
.v2-player-tab-claimable {
    cursor: pointer;
    opacity: 0.75;
    border-style: solid;
    border-color: rgba(255,215,0,0.35);
}
.v2-player-tab-claimable:hover {
    opacity: 1;
    border-color: var(--gold-primary);
    background: rgba(90,70,0,0.35);
}
/* Empty seat = a small avatar-sized teal circle labelled "Empty" (replaces the wide, faint,
   rail-clipped "+ Tap to sit" box). Three classes so it beats the shared .v2-player-tab-claimable
   rules above, which bot-occupied (displaceable) seats ALSO use and must keep unchanged. The
   seat div stays the tap target - 52px, a bit bigger than the 44px circle so a thumb can't
   miss it. Its centre is the same anchor point the old box used, so no seat layout moves. */
.v2-player-tab.v2-player-tab-empty.v2-player-tab-claimable {
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
.v2-player-tab-empty-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2aa08a;
    border: 3px solid #0d4a3f;
    color: #eafff9;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s ease, transform 0.1s ease;
}
.v2-player-tab-empty:hover .v2-player-tab-empty-circle { background: #33b39c; }
.v2-player-tab-empty:active .v2-player-tab-empty-circle { transform: scale(0.94); }
/* Side seats' anchor sits on the rail's edge; nudge the small circle a little onto the felt
   (margin, not transform, so the ring's existing translate rules stay untouched). */
.v3-seat-ring > .v2-player-tab-empty:nth-child(2),
.v3-seat-ring > .v2-player-tab-empty:nth-child(3),
.v3-seat-ring > .v2-player-tab-empty:nth-child(4) { margin-left: 8px; }
.v3-seat-ring > .v2-player-tab-empty:nth-child(7),
.v3-seat-ring > .v2-player-tab-empty:nth-child(8),
.v3-seat-ring > .v2-player-tab-empty:nth-child(9) { margin-left: -8px; }
/* "You" and "readied up" used to tint the whole card's background/border; with no card
   background left, both now live on the avatar ring instead (readied-up already did via
   .v2-player-tab-avatar-ring-ready below - only "you" needed a new home, as a permanent
   gold outline around the ring regardless of ready/timer state). */
.v2-player-tab-me .v2-player-tab-avatar-ring { box-shadow: 0 0 0 2px var(--gold-primary); }
.v2-player-tab-spectator { opacity: 0.55; }


/* ===== SEAT TOP ROW: avatar + timer ring, cards ===== *
   Avatar-with-ring sits directly against the hole cards (gap:0, touching per request)
   instead of the old cards-alone row - badge+name live below this row as their own pill
   (.v2-player-tab-nameline) instead of floating above the card. */
.v2-player-tab-top {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    justify-content: center;
}
.v2-player-tab-avatar-wrap { position: relative; flex-shrink: 0; z-index: 2; width: 30px; height: 30px; }
/* The countdown ring - drawn as an SVG stroke overlay (see below), not a CSS
   conic-gradient background as this originally shipped. Repainting a conic-gradient
   several times a second for the length of a ready-wait window is expensive on a lot of
   budget Android GPUs (no hardware path for angular gradients); an SVG stroke's
   dashoffset is a much cheaper, long-established animation path by comparison - see
   readyRingProgress/paintReadyRing in game.js. */
.v2-player-tab-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    transform: rotate(-90deg); /* so the sweep starts at 12 o'clock, matching the old conic-gradient's 0deg */
    opacity: 0;
    pointer-events: none;
    z-index: 3; /* above .v2-player-tab-avatar-ring (z-index:2) - it's a thin stroke only
                   (fill:none), so sitting on top never covers the avatar photo, but
                   sitting BELOW it would have the avatar's own background paint over
                   and hide the ring entirely */
}
.v2-player-tab-ring-svg[data-ring-active="1"] { opacity: 1; }
.v2-player-tab-ring-track { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 2; }
.v2-player-tab-ring-progress { fill: none; stroke-width: 2; stroke-linecap: round; }
/* The avatar circle itself - neutral by default, tinted green once the seat has readied
   up (.v2-player-tab-avatar-ring-ready). No longer touches the countdown ring at all -
   that's the SVG overlay above now, a sibling rather than this element's own background. */
.v2-player-tab-avatar-ring {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.v2-player-tab-avatar-ring-ready { background: rgba(46,160,67,0.4); }
/* Small dark pill behind the name (badge+name) and, separately, the chips line -
   replaces the old single boxed card background now that there isn't one. Sized to
   hug its own content (inline-flex), not stretch full width, so it reads as a
   floating HUD label rather than another box. */
.v2-player-tab-pill {
    background: rgba(0,0,0,0.55);
    border-radius: 7px;
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.v2-player-tab-nameline {
    gap: 3px;
}
.v2-player-tab-badge {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    font-size: 0.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.v2-player-tab-badge-dealer {
    background: radial-gradient(circle at 32% 28%, #fff9dc, #ffd700 55%, #b8860b);
    color: #3a2a00;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 6px rgba(255,215,0,0.5);
}
.v2-player-tab-bottag { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 3; padding: 0 3px; border-radius: 4px; font-size: 7px; line-height: 10px; font-weight: 800; letter-spacing: 0.04em; color: #e6edf3; background: rgba(8,12,16,0.92); border: 1px solid rgba(255,255,255,0.35); pointer-events: none; }
.v2-player-tab-badge-seatnum {
    background: radial-gradient(circle at 32% 28%, #d8ecff, #58a6ff 55%, #1f6feb);
    color: #06213f;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 5px rgba(88,166,255,0.5);
}

/* ===== FLOATING BET TAG ===== *
   Sits below the seat and only renders when the player has an active bet (see
   `showBet` in renderPlayerList) - no empty tag hanging under an unbet seat. */
.v2-player-tab-bettag {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 6;
    color: #ffd700;
    font-weight: bold;
    font-size: 0.72rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.9);
}

/* ===== FLOATING RESULT AMOUNT TAG ===== *
   Same position/pattern as .v2-player-tab-bettag above - the two never show at once
   (game.js's showBet excludes any seat that already has a result), so the win/lose
   amount takes over that same floating spot below the seat once a round resolves. */
.v2-player-tab-amounttag {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 6;
    font-weight: bold;
    font-size: 0.72rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.9);
}

/* ===== RESULT OUTCOME COLORING ===== *
   Used to tint the whole seat card's background; with no card background left, this
   now tints the chips pill instead (applied to .v2-player-tab-info, see
   renderPlayerList in game.js) - still reads win/lose at a glance without needing
   the hand-result text row that sat here before (dropped per request; the amount
   tag above plus this pill's own color already cover it). */
.v2-player-tab-info-win {
    background: rgba(24,90,40,0.85);
    color: #dfffe6;
}
.v2-player-tab-info-lose {
    background: rgba(110,24,24,0.85);
    color: #ffe1e1;
}
.v2-player-tab-name {
    color: #c9d1d9;
    font-weight: bold;
    font-size: 0.64rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
}
.v2-player-tab-name-empty { color: #555; font-weight: normal; text-shadow: none; }
.v2-player-tab-info {
    color: #ffd700;
    font-size: 0.58rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-player-tab-cards {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
/* Overlap the second card over the first (per request, saves space and matches the
   reference photo's fanned look) instead of sitting side by side with a gap. z-index
   via source order (later element paints on top) - no explicit z-index needed since
   these aren't positioned.
   -9px (card width 20px) only left 11px of the first card visible - enough for a
   single-character rank (2-9, J, Q, K, A) but NOT for "10", the one two-character rank
   in this deck, whose "0" landed right in the now-covered region and read as a bare "1".
   -4px leaves 16px visible, comfortably fitting "10" (anchored at .pc-index's left:2px
   below) with room to spare, at the cost of a slightly less dramatic fan. */
.v2-player-tab-cards .player-card-slot + .player-card-slot {
    margin-left: -4px;
}
/* Scoped smaller than the base .player-card-slot (26x37 / 18x24 below 420px) - that
   base size was tuned for the old cards-alone row; next to a 30px avatar in this
   narrower Option A card it needs to be noticeably smaller. Scoped to this context only
   (.player-card-slot is also used standalone by clearAllPlayerCards/renderMiniCardInSlot's
   className resets, which must keep their own default size). Also switches from the
   centered rank+suit look to a corner index (rank over suit, top-left) per request -
   .pc-index is the small wrapper formatCardSlotHTML now renders both into, positioned
   absolutely so the corner placement doesn't depend on this element's own layout mode.
   Real card-art images may replace this CSS-drawn face later; nothing here depends on
   that not happening. */
.v2-player-tab-cards .player-card-slot {
    width: 20px; height: 28px;
    position: relative;
}
.v2-player-tab-cards .pc-index {
    position: absolute;
    top: 1px;
    left: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.85;
}
.v2-player-tab-cards .pc-rank { font-size: 0.62rem; }
.v2-player-tab-cards .pc-suit { font-size: 0.5rem; margin-left: 0; }
.player-card-slot {
    width: 26px; height: 37px; border-radius: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #8b949e;
    font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; flex-shrink: 0;
    line-height: 1; white-space: nowrap; overflow: hidden;
}
.player-card-slot .pc-rank { font-size: 1em; }
.player-card-slot .pc-suit { font-size: 0.8em; margin-left: 0.5px; }
.player-card-slot.has-card { background: white; border-color: rgba(0,0,0,0.2); }

/* ===== BOTTOM BAR ===== */
.v2-bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.v2-bottom-bar-row1,
.v2-bottom-bar-row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Hidden in v3 - both are already shown in the local player's own seat card
   (chips in .v2-player-tab-info, stake change in .v2-player-tab-amounttag), so
   showing them again here was pure duplication. Kept as display:none rather
   than removed - game.js updates their text/className in ~25 places across
   many event handlers, and hiding is a much lower-risk way to get the same
   visual result without touching all of that logic. */
.v2-chip-display, .v2-stake-display {
    display: none;
}
.v2-bet-controls {
    flex: 0 0 auto;
    min-width: 78px;
    height: 34px;
    justify-content: center;
    display: flex; align-items: center; gap: 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 7px;
    padding: 4px 6px;
}
.v2-bet-controls label { color: #8b949e; font-size: 0.68rem; white-space: nowrap; }
/* Display-only: readonly + not focusable (see index.html), and no pointer events at all so a
   tap on it can never focus it and pop the keyboard. Bet is changed with .bet-step-btn. */
.v2-bet-controls input {
    width: 44px; background: transparent; border: none; color: #e6edf3;
    font-size: 0.85rem; font-weight: bold; text-align: center; min-width: 0; padding: 0;
    pointer-events: none; user-select: none; -webkit-user-select: none; outline: none;
}
/* +/- bet buttons: share whatever width is left after the bet box (equal widths), same
   height as the box so the bottom bar's height doesn't jump around. touch-action:manipulation
   stops the double-tap-zoom delay so quick repeated taps (+10, +10, +10) all register. */
.bet-step-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s ease, transform 0.1s ease;
}
.bet-step-minus { color: #ff8b8b; }
.bet-step-plus { color: #7ee787; }
.bet-step-btn:active:not(:disabled) { background: rgba(255,255,255,0.18); transform: scale(0.94); }
.bet-step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.v2-bet-controls .quick-bets { display: flex; gap: 3px; }
.v2-bet-controls .quick-bet-btn { padding: 2px 6px; font-size: 0.65rem; }
.v2-deal-btn {
    width: auto;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.v2-bottom-bar .dealer-decision-buttons .btn-premium,
.v2-bottom-bar .dealer-decision-buttons .btn-secondary {
    padding: 8px 6px;
    font-size: 0.75rem;
    letter-spacing: 0px;
    white-space: nowrap;
}
.v2-bottom-bar .dealer-decision-buttons {
    /* Was a fixed 300px that never shrank, so on a narrow phone the row overflowed and
       needed a sideways scroll - see the grid rule below for the other half of the cause. */
    width: min(300px, 100%);
    min-width: 0;
    flex-shrink: 0;
}
/* While a decision (Pay & Stay / Pass Seat / Accept Seat / Pass...) is showing, the DEAL
   button is hidden with visibility:hidden - deliberately, so the row keeps its height and
   the table above doesn't resize (see setDealBtnVisible in game.js) - but that also kept
   its ~100px of WIDTH reserved on the left, pushing the two decision buttons right and
   past the edge (off-centre + horizontal scroll). In this state, stack the invisible DEAL
   button and the decision buttons in the SAME grid cell instead of side by side: the row
   keeps its height, the decision buttons get the whole width and sit centred. The
   spectator pill (only present sometimes) keeps its own small column on the right. */
.v2-bottom-bar-row2:has(> .dealer-decision-buttons:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4px;
    justify-items: center;
    align-items: center;
}
.v2-bottom-bar-row2:has(> .dealer-decision-buttons:not(.hidden)) > .v2-deal-btn,
.v2-bottom-bar-row2:has(> .dealer-decision-buttons:not(.hidden)) > .dealer-decision-buttons {
    grid-column: 1;
    grid-row: 1;
}
.v2-bottom-bar-row2:has(> .dealer-decision-buttons:not(.hidden)) > .v2-settings-actions-inline {
    grid-column: 2;
    grid-row: 1;
}
.v2-settings-actions-inline {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.v2-settings-actions-inline .v2-action-pill {
    padding: 3px 6px;
    font-size: 0.6rem;
    gap: 2px;
}
.v2-result-message, .v2-status-message {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-height: 0;
}

/* (forced-landscape rotation removed for v3 - no fallback sizing needed) */

/* Extra small screens: further shrink table cards */
@media (max-width: 480px) {
    .v2-table-area {
        padding: 4px 8px;
        gap: 6px;
        min-height: 45px;
    }
    .v2-deck-count { font-size: 0.6rem; }
    .v2-deck-label { font-size: 0.45rem; }
    .v2-cut-label { font-size: 0.45rem; }
    .v2-table-deck { gap: 4px; }
}

/* ===== STANDARD MINI-CARD PATTERN ===== */
/* This ensures the mini cards look like real playing cards:
   Top-left corner: rank + suit. Bottom-right corner: rank + suit (rotated).
   Center: large suit (sized to match the card). */

/* Center suit sizing for table cards */
.v2-table-dealer-hand .card .card-suit-large,
.v2-table-community .card .card-suit-large,
.v2-deck-stack .card .card-suit-large,
.v2-cut-card .card .card-suit-large {
    font-size: 1.5em !important;  /* Proper size for the card - kept clear of the corners below */
}

/* Corner rank sizing for table cards */
.v2-table-dealer-hand .card .card-rank,
.v2-table-community .card .card-rank,
.v2-deck-stack .card .card-rank,
.v2-cut-card .card .card-rank {
    font-size: 0.9em !important;
}

/* Corner small suit sizing for table cards */
.v2-table-dealer-hand .card .card-suit-small,
.v2-table-community .card .card-suit-small,
.v2-deck-stack .card .card-suit-small,
.v2-cut-card .card .card-suit-small {
    font-size: 0.7em !important;
}

/* Adjust corner positions to look balanced on the mini card */
.v2-table-dealer-hand .card .card-top,
.v2-table-community .card .card-top,
.v2-deck-stack .card .card-top,
.v2-cut-card .card .card-top {
    top: 2px;
    left: 3px;
}

.v2-table-dealer-hand .card .card-bottom,
.v2-table-community .card .card-bottom,
.v2-deck-stack .card .card-bottom,
.v2-cut-card .card .card-bottom {
    bottom: 2px;
    right: 3px;
}

/* ===== Custom Room Settings: tap-only steppers (no typing, so no keyboard) ===== */
#room-settings-fields { margin-top: 8px; }
.rs-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 2px 10px;
}
.rs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 0;
    border-top: 1px solid #21262d;
}
.rs-row:first-child { border-top: none; }
.rs-label { color: #c9d1d9; font-size: 0.8rem; min-width: 0; }
.rs-stepper, .rs-seg { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rs-btn, .rs-seg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s ease, transform 0.1s ease;
}
.rs-minus { color: #ff8b8b; }
.rs-plus { color: #7ee787; }
.rs-btn:active, .rs-seg-btn:active { transform: scale(0.94); background: rgba(255,255,255,0.18); }
.rs-value { min-width: 46px; text-align: center; color: #e6edf3; font-size: 0.95rem; font-weight: bold; }
.rs-value.changed { color: #ffd700; }
.rs-seg-btn { color: #c9d1d9; padding: 0 9px; min-width: 0; }
.rs-seg-btn.on { background: #ffd700; color: #111; border-color: #ffd700; }
.rs-note { color: #8b949e; font-size: 0.68rem; text-align: right; margin: 6px 2px 0; }


/* ===== Request Topup popup (real accounts) ===== */
.topup-popup-content { max-width: 420px; text-align: left; }
.topup-header {
    display: flex; align-items: center; justify-content: space-between;
    color: #ffd700; font-size: 1.05rem; font-weight: bold; margin-bottom: 6px;
}
.topup-label {
    color: #8b949e; font-size: 0.72rem; margin: 16px 0 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.topup-amount-row { display: flex; align-items: center; gap: 4px; }
.topup-step-btn {
    flex: 1 1 0; min-width: 0; height: 40px; padding: 0;
    border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.78rem; font-weight: bold; white-space: nowrap; cursor: pointer;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent; transition: background 0.1s ease, transform 0.1s ease;
}
.topup-step-minus { color: #ff8b8b; }
.topup-step-plus { color: #7ee787; }
.topup-step-btn:active { transform: scale(0.94); background: rgba(255,255,255,0.18); }
.topup-amount-value { flex: 0 0 auto; min-width: 84px; text-align: center; font-size: 1.25rem; font-weight: bold; color: #ffd700; }
.topup-hint { color: #8b949e; font-size: 0.7rem; text-align: center; margin-top: 4px; }
.topup-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.topup-method-btn {
    padding: 9px 14px; border-radius: 8px; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14); color: #c9d1d9; font-size: 0.85rem; font-weight: bold;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.topup-method-btn.on { background: #ffd700; color: #111; border-color: #ffd700; }
.topup-pay-info { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid #30363d; }
.topup-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topup-code { font-family: monospace; font-size: 1.05rem; color: #fff; word-break: break-all; user-select: all; -webkit-user-select: all; }
.topup-copy-btn {
    flex-shrink: 0; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14); color: #c9d1d9; font-size: 0.75rem; font-weight: bold;
    cursor: pointer; touch-action: manipulation;
}
.topup-input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px;
    background: #0d1117; border: 1px solid #30363d; color: white; font-size: 0.9rem;
}
.topup-error { color: #f85149; font-size: 0.8rem; margin-top: 10px; min-height: 1em; }

/* ===== Topup popup: tabs + "My history" list ===== */
.topup-tabs { display: flex; gap: 6px; margin: 4px 0 4px; }
.topup-tab {
    flex: 1; padding: 9px 6px; border-radius: 8px; background: transparent;
    border: 1px solid rgba(255,255,255,0.14); color: #8b949e; font-size: 0.82rem; font-weight: bold;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.topup-tab.active { background: rgba(255,215,0,0.12); border-color: #ffd700; color: #ffd700; }
.topup-link-btn {
    background: none; border: none; color: #58a6ff; font-size: 0.78rem; cursor: pointer;
    text-decoration: underline; padding: 8px 4px 0; touch-action: manipulation;
}
.topup-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.topup-history-item {
    padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid #30363d;
}
.topup-history-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topup-history-amount { font-weight: bold; color: #fff; font-size: 0.95rem; }
.topup-history-badge { font-size: 0.7rem; font-weight: bold; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.topup-history-badge.pending { color: #ffd700; background: rgba(255,215,0,0.12); }
.topup-history-badge.approved { color: #3fb950; background: rgba(63,185,80,0.12); }
.topup-history-badge.denied { color: #f85149; background: rgba(248,81,73,0.12); }
.topup-history-meta { color: #8b949e; font-size: 0.75rem; margin-top: 4px; line-height: 1.4; word-break: break-word; }
.topup-history-note { color: #c9d1d9; font-size: 0.78rem; margin-top: 6px; word-break: break-word; }

/* Close button of the topup popup. Deliberately NOT .btn.icon-btn: that class is
   position:absolute (built for the in-game corner buttons), which floated this button over
   the popup's title at the top-left instead of leaving it on the right of the header row. */
.topup-close-btn {
    width: 34px; height: 34px; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; color: #8b949e; font-size: 1rem; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.topup-close-btn:active { background: rgba(255,215,0,0.12); color: #ffd700; }

/* ===== Topup: receipt photo ===== */
.topup-receipt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topup-receipt-preview { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topup-receipt-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #30363d; flex-shrink: 0; }
.topup-receipt-preview span { color: #8b949e; font-size: 0.75rem; }
.topup-history-receipt { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #8b949e; font-size: 0.75rem; flex-wrap: wrap; }
.topup-history-receipt .topup-link-btn { padding: 0 2px; font-size: 0.75rem; }

/* ===== Topup: payment QR code ===== */
.topup-qr-block { margin-top: 10px; }
.topup-qr-img {
    display: block; width: 100%; max-width: 240px; margin: 8px auto; padding: 8px; box-sizing: border-box;
    background: #fff; border-radius: 10px; -webkit-touch-callout: default; user-select: auto;
}
.topup-qr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.topup-qr-msg { font-size: 0.75rem; text-align: center; margin-top: 6px; min-height: 1em; }
.topup-qr-msg.ok { color: #3fb950; }
.topup-qr-msg.err { color: #f85149; }

/* ================================================================
   ===== LOBBY RESTYLE (Stage 1) - "Green and gold" =====
   ================================================================
   Everything the lobby draws takes its colours from the --lb-* variables below, so another look is
   just another set of values (a later stage adds the other themes). Only the lobby uses them - the
   table, cards, seats and popups elsewhere keep their own colours. The older .lobby-header-bar /
   .lobby-tile / .player-info-bar rules above are no longer used by the markup and are left in place. */
:root {
    --lb-bg: #07120f;
    --lb-surface: #0e1f1a;
    --lb-border: #2b3f36;
    --lb-text: #f3eddc;
    --lb-muted: #cfe0d6;
    --lb-muted2: #a9bdb2;
    --lb-muted3: #8fa59b;
    --lb-faint: #6f8f7f;
    --lb-nav: #0b1713;
    --lb-accent: #e8b84a;
    --lb-on-accent: #1a1405;
    --lb-chip: #1d3329;
    --lb-banner: #0f3a2c;
    --lb-banner-border: #3a5a4a;
    --lb-quick: #12251e;
    --lb-outline: #4a6a5a;
    --lb-tag: #b3301e;
    --lb-live: #4fd18b;
    --lb-card-face: #f3eddc;
}

/* While the lobby is showing, the shared outer frame drops its padding/gradient so the lobby can fill
   the screen edge to edge. (:has is supported by every current phone browser and Telegram; on an old
   one the frame simply keeps its usual look and the lobby still works.) */
.game-container:has(#lobby-screen.active) {
    background: var(--lb-bg);
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
#lobby-screen {
    background: var(--lb-bg);
    color: var(--lb-text);
    max-width: 520px;
    margin: 0 auto;
}
#lobby-screen .lobby-content.lb-scroll {
    gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 16px 20px;
    -webkit-overflow-scrolling: touch;
}
#lobby-screen > #install-hint-banner { margin: 8px 16px 0; flex-shrink: 0; }

.lb-grow { flex: 1; }
#lobby-screen button { font-family: inherit; }
#lobby-screen .lb-avatar-btn:focus-visible,
#lobby-screen .lb-chip-btn:focus-visible,
#lobby-screen .lb-btn:focus-visible,
#lobby-screen .lb-tile:focus-visible,
#lobby-screen .lb-tab:focus-visible,
#lobby-screen .lb-play-btn:focus-visible,
#lobby-screen .lb-sheet-row:focus-visible,
#lobby-screen .lb-sheet-close:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }

/* ----- header: avatar + chips pill ----- */
.lb-header { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lb-avatar-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; box-sizing: border-box;
    border-radius: 50%; border: 2px solid var(--lb-accent);
    background: var(--lb-surface); cursor: pointer; flex-shrink: 0;
}
.lb-chips {
    flex: 1; min-width: 0; height: 52px; box-sizing: border-box;
    border-radius: 26px; background: var(--lb-surface); border: 1px solid var(--lb-border);
    display: flex; align-items: center; gap: 8px; padding: 0 4px 0 14px;
}
.lb-chips .lb-chips-icon { width: 22px; height: 22px; color: var(--lb-accent); }
.lb-chips-num {
    font-weight: 800; font-size: 1.15rem; letter-spacing: 0.2px; color: var(--lb-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.lb-chip-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; flex-shrink: 0;
    background: var(--lb-accent); color: var(--lb-on-accent);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lb-chip-btn .icon { width: 20px; height: 20px; stroke-width: 2.6; }
.lb-chip-btn-out { background: transparent; color: var(--lb-accent); border: 1.5px solid var(--lb-accent); }

/* ----- shared cards and buttons ----- */
.lb-card {
    background: var(--lb-surface); border: 1px solid var(--lb-border);
    border-radius: 18px; padding: 16px; box-sizing: border-box; flex-shrink: 0;
}
.lb-btn {
    flex: 1; height: 46px; box-sizing: border-box; padding: 0 18px;
    border-radius: 12px; border: 1px solid transparent;
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: transform 0.15s ease;
}
.lb-btn:active:not(:disabled) { transform: translateY(1px); }
.lb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lb-btn-primary { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-on-accent); }
.lb-btn-outline { background: transparent; border-color: var(--lb-outline); color: var(--lb-text); font-weight: 500; }
.lb-btn-sm { flex: none; height: 44px; }

/* ----- 0-chips notice (real accounts only; game.js toggles it) ----- */
.lb-zero { text-align: center; border-color: var(--lb-accent); }
.lb-zero-text { color: var(--lb-accent); font-size: 0.9rem; margin-bottom: 10px; }

/* ----- welcome banner ----- */
.lb-banner {
    position: relative; height: 184px; flex-shrink: 0; box-sizing: border-box;
    border-radius: 20px; background: var(--lb-banner); border: 1px solid var(--lb-banner-border); overflow: hidden;
}
.lb-banner-text { position: absolute; left: 20px; top: 24px; width: 52%; max-width: 210px; }
.lb-banner-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--lb-accent); }
.lb-banner-title { font-weight: 800; font-size: 34px; line-height: 1.05; margin-top: 4px; color: var(--lb-text); }
.lb-banner-sub { font-size: 13px; line-height: 1.4; margin-top: 8px; color: var(--lb-muted); }
.lb-fan-card {
    position: absolute; width: 62px; height: 90px; border-radius: 8px;
    background: var(--lb-card-face); box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.lb-fan-card span { display: block; padding: 6px 0 0 7px; font-weight: 800; font-size: 17px; line-height: 1; color: #141413; }
.lb-fan-card span.lb-red { color: #b3301e; }
.lb-fan-1 { right: 70px; top: 44px; transform: rotate(-14deg); }
.lb-fan-2 { right: 40px; top: 36px; transform: rotate(-2deg); }
.lb-fan-3 { right: 12px; top: 44px; transform: rotate(11deg); }

/* ----- tile row ----- */
.lb-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex-shrink: 0; }
.lb-tile {
    position: relative; box-sizing: border-box; min-height: 78px; border-radius: 14px;
    border: 1px solid var(--lb-border); background: var(--lb-surface); color: var(--lb-text);
    padding: 10px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; font-size: 11px; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer;
}
.lb-tile .icon { width: 26px; height: 26px; color: var(--lb-accent); }
.lb-tile:disabled { border-style: dashed; background: var(--lb-nav); color: var(--lb-muted2); cursor: default; }
.lb-tile:disabled .icon { color: var(--lb-faint); }
.lb-soon {
    position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--lb-accent); background: var(--lb-chip); border-radius: 6px; padding: 2px 5px; line-height: 1.2;
}

/* ----- Quick Join card ----- */
.lb-quick { background: var(--lb-quick); border-color: var(--lb-accent); }
.lb-quick-top { display: flex; align-items: center; justify-content: space-between; }
.lb-tag { display: none; background: var(--lb-tag); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 1px; border-radius: 6px; padding: 3px 9px; }
.lb-live { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--lb-muted); margin-left: auto; }
.lb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lb-live); }
/* game.js (updateQuickJoinStat) adds these only when the numbers are real: someone is online / a game is running */
.lb-quick.lb-quick-hot .lb-tag { display: inline-block; }
.lb-quick.lb-quick-live .lb-live { display: inline-flex; }
.lb-quick-title { font-weight: 800; font-size: 1.3rem; margin-top: 4px; }
.lb-quick-stat { font-size: 12px; color: var(--lb-muted); min-height: 1.2em; margin-top: 4px; }
.lb-quick-stat .icon { width: 12px; height: 12px; vertical-align: -1px; }
.lb-quick-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ----- Create a table card ----- */
.lb-create { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
.lb-create-text { flex: 1; min-width: 0; }
.lb-create-title { font-weight: 800; font-size: 1rem; }
.lb-create-sub { font-size: 12px; color: var(--lb-muted2); margin-top: 3px; }
.lb-create .lb-btn-outline { flex: none; height: 44px; color: var(--lb-accent); border-color: var(--lb-accent); font-weight: 700; }
.lb-create .lb-btn-outline.lobby-tile-active { background: var(--lb-accent); color: var(--lb-on-accent); }
#lobby-screen .create-room-area { margin-top: -6px; }
#lobby-screen #create-room-btn { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-on-accent); border-radius: 12px; font-weight: 700; }

/* ----- open tables: section title, filter tabs, list (cards themselves keep their felt look) ----- */
.lb-section-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.lb-section-title .icon { color: var(--lb-accent); }
#lobby-screen .room-tab { background: var(--lb-surface); border-color: var(--lb-border); color: var(--lb-muted3); }
#lobby-screen .room-tab:hover { border-color: var(--lb-outline); color: var(--lb-text); }
#lobby-screen .room-tab.active { background: var(--lb-chip); border-color: var(--lb-accent); color: var(--lb-accent); }
/* the whole lobby scrolls as one page - the list no longer scrolls inside its own small box */
#lobby-screen .room-list { flex: none; min-height: 0; overflow: visible; }
#lobby-screen .room-list-empty { color: var(--lb-muted2); }

/* ----- bottom tab bar ----- */
.lb-tabbar {
    height: calc(84px + env(safe-area-inset-bottom)); flex-shrink: 0; box-sizing: border-box;
    background: var(--lb-nav); border-top: 1px solid var(--lb-border);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 6px env(safe-area-inset-bottom);
}
.lb-tab {
    border: 0; background: transparent; color: var(--lb-muted3); font-size: 11px; font-weight: 500;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: pointer;
}
.lb-tab .icon { width: 24px; height: 24px; }
.lb-tab-active { color: var(--lb-accent); font-weight: 700; }
.lb-tab:disabled { color: var(--lb-faint); cursor: default; }
.lb-soon-nav { position: static; background: transparent; padding: 0; }
.lb-tab-center { display: flex; flex-direction: column; align-items: center; }
.lb-play-btn {
    width: 62px; height: 62px; border-radius: 50%; margin-top: -20px; padding: 0;
    border: 4px solid var(--lb-nav); background: var(--lb-accent); color: var(--lb-on-accent);
    display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; cursor: pointer;
}
.lb-play-label { font-size: 11px; font-weight: 700; color: var(--lb-text); margin-top: 4px; }

/* ----- "Me" bottom sheet (sound, rules, account, log out) ----- */
.lb-sheet-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9998;
    display: flex; align-items: flex-end; justify-content: center;
}
.lb-sheet-overlay.hidden { display: none; }
.lb-sheet {
    width: 100%; max-width: 520px; box-sizing: border-box; background: var(--lb-surface);
    border-top: 1px solid var(--lb-border); border-radius: 20px 20px 0 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
}
.lb-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--lb-outline); margin: 0 auto 6px; }
.lb-sheet-row {
    position: static; display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; box-sizing: border-box;
    border-radius: 14px; border: 1px solid var(--lb-border); background: var(--lb-nav); color: var(--lb-text);
    padding: 0 16px; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.lb-sheet-row .icon { width: 22px; height: 22px; color: var(--lb-accent); }
.lb-sheet-row-danger, .lb-sheet-row-danger .icon { color: #ff8a7a; }
.lb-sheet-close { height: 48px; border: 0; background: transparent; color: var(--lb-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.lb-sheet-version { text-align: center; font-size: 12px; color: var(--lb-faint); min-height: 1em; }

/* ================================================================
   ===== LOBBY THEMES (Stage 2) =====
   ================================================================
   Green and gold is the default (the --lb-* values on :root above). The other two are the same variables with
   different values, switched by data-theme on <html> (set from the saved choice - see the small script in the
   page <head> and applyLobbyTheme in game.js). The [data-prev] selectors give each Appearance preview its own
   theme's colours no matter which theme is active. Only the lobby reads these variables. */
.lb-prev[data-prev="green"], .lb-theme-dots[data-prev="green"] {
    --lb-bg: #07120f; --lb-surface: #0e1f1a; --lb-border: #2b3f36; --lb-text: #f3eddc;
    --lb-muted: #cfe0d6; --lb-muted2: #a9bdb2; --lb-muted3: #8fa59b; --lb-faint: #6f8f7f;
    --lb-nav: #0b1713; --lb-accent: #e8b84a; --lb-on-accent: #1a1405; --lb-chip: #1d3329;
    --lb-banner: #0f3a2c; --lb-banner-border: #3a5a4a; --lb-quick: #12251e; --lb-outline: #4a6a5a; --lb-tag: #b3301e;
}
:root[data-theme="burgundy"], .lb-prev[data-prev="burgundy"], .lb-theme-dots[data-prev="burgundy"] {
    --lb-bg: #14070b; --lb-surface: #221015; --lb-border: #4a2a31; --lb-text: #f6ecdc;
    --lb-muted: #e7cfc6; --lb-muted2: #c9a9a0; --lb-muted3: #b99a92; --lb-faint: #8c6c66;
    --lb-nav: #0f0508; --lb-accent: #e6c79c; --lb-on-accent: #1f0d10; --lb-chip: #3a1d23;
    --lb-banner: #3a1118; --lb-banner-border: #5a2a32; --lb-quick: #2a1318; --lb-outline: #6a4048; --lb-tag: #c03a4a;
}
:root[data-theme="night"], .lb-prev[data-prev="night"], .lb-theme-dots[data-prev="night"] {
    --lb-bg: #0a0b1e; --lb-surface: #151736; --lb-border: #2b2f63; --lb-text: #eef0ff;
    --lb-muted: #d6d9ff; --lb-muted2: #a7acd8; --lb-muted3: #9298cc; --lb-faint: #6e74b0;
    --lb-nav: #070815; --lb-accent: #46e3ff; --lb-on-accent: #04222a; --lb-chip: #1d2250;
    --lb-banner: #241f6b; --lb-banner-border: #4a43b0; --lb-quick: #1a1c42; --lb-outline: #4a4f8f; --lb-tag: #c8344a;
}

/* ----- Appearance picker (opened from Me) ----- */
.lb-sheet-appearance { max-height: 92vh; overflow-y: auto; }
.lb-sheet-title { font-weight: 800; font-size: 1.15rem; color: var(--lb-text); margin: 2px 2px 0; }
.lb-sheet-lead { font-size: 13px; line-height: 1.5; color: var(--lb-muted); margin: 0 2px 4px; }
.lb-theme-card {
    display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left;
    border-radius: 18px; border: 1px solid var(--lb-border); background: var(--lb-nav); color: var(--lb-text);
    padding: 14px; cursor: pointer;
}
.lb-theme-card[aria-pressed="true"] { border: 2px solid var(--lb-accent); padding: 13px; }
.lb-theme-card:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }
.lb-theme-text { flex: 1; min-width: 0; display: block; }
.lb-theme-name { display: block; font-weight: 800; font-size: 1rem; }
.lb-theme-default {
    display: inline-block; margin-left: 6px; vertical-align: middle; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    color: var(--lb-accent); border: 1px solid var(--lb-accent); border-radius: 6px; padding: 1px 6px;
}
.lb-theme-sub { display: block; font-size: 13px; color: var(--lb-muted); margin-top: 4px; line-height: 1.4; }
.lb-theme-dots { display: flex; gap: 6px; margin-top: 10px; }
.lb-theme-dots i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: block; }
.lb-theme-dots i:nth-child(1) { background: var(--lb-bg); }
.lb-theme-dots i:nth-child(2) { background: var(--lb-banner); }
.lb-theme-dots i:nth-child(3) { background: var(--lb-accent); }
.lb-theme-mark {
    width: 28px; height: 28px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--lb-outline); display: flex; align-items: center; justify-content: center;
}
.lb-theme-mark svg { display: none; width: 16px; height: 16px; stroke: var(--lb-on-accent); }
.lb-theme-card[aria-pressed="true"] .lb-theme-mark { background: var(--lb-accent); border-color: var(--lb-accent); }
.lb-theme-card[aria-pressed="true"] .lb-theme-mark svg { display: block; }
.lb-prev {
    position: relative; display: block; width: 74px; height: 112px; flex-shrink: 0; box-sizing: border-box;
    border-radius: 12px; background: var(--lb-bg); border: 1px solid var(--lb-border); overflow: hidden;
}
.lb-prev-banner { position: absolute; left: 7px; right: 7px; top: 10px; height: 30px; border-radius: 6px; background: var(--lb-banner); border: 1px solid var(--lb-banner-border); }
.lb-prev-tiles { position: absolute; left: 7px; right: 7px; top: 46px; display: flex; gap: 3px; }
.lb-prev-tiles i { flex: 1; height: 12px; border-radius: 3px; background: var(--lb-surface); border: 1px solid var(--lb-border); display: block; }
.lb-prev-quick { position: absolute; left: 7px; right: 7px; top: 64px; height: 24px; border-radius: 6px; background: var(--lb-quick); border: 1px solid var(--lb-accent); }
.lb-prev-btn { position: absolute; left: 12px; width: 34px; top: 74px; height: 8px; border-radius: 4px; background: var(--lb-accent); }
.lb-prev-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--lb-nav); border-top: 1px solid var(--lb-border); }

/* ================================================================
   ===== LOBBY ROOM CARDS: theme tint + hover fix =====
   ================================================================
   The room cards keep their "felt" look but the felt now takes a tint of the active lobby theme (green stays
   green in Green and gold; deep wine in Burgundy; deep indigo in Electric night). The in-game table itself is
   not touched. The :hover rule below also fixes the old .room-item:hover, which replaced the felt with a flat
   dark fill whenever the pointer was over a card - now the felt stays and only the border brightens. */
:root { --lb-felt: #1f5c3a; --lb-felt-dark: #0d2818; }
:root[data-theme="burgundy"] { --lb-felt: #5e2230; --lb-felt-dark: #2a0e15; }
:root[data-theme="night"] { --lb-felt: #2c3278; --lb-felt-dark: #12163f; }
#lobby-screen .room-felt-card,
#lobby-screen .room-felt-card:hover {
    background: radial-gradient(ellipse at 30% 20%, var(--lb-felt), var(--lb-felt-dark) 75%);
}
#lobby-screen .room-felt-card { border-color: var(--lb-border); }
#lobby-screen .room-felt-card:hover { border-color: var(--lb-accent); }
#lobby-screen .room-felt-card.room-card-active { border-color: rgba(255,107,107,0.4); }
#lobby-screen .room-felt-card.room-card-active:hover { border-color: rgba(255,107,107,0.8); }
#lobby-screen .room-felt-stat { border-color: var(--lb-outline); }
#lobby-screen .room-felt-stat-value { color: var(--lb-accent); }
#lobby-screen .room-custom-badge { color: var(--lb-accent); border-color: var(--lb-accent); background: var(--lb-chip); }
#lobby-screen .seat-dot-filled { background: var(--lb-accent); }

/* ----- My hands (lobby) ----- */
.lb-hands-list { display: flex; flex-direction: column; gap: 8px; }
.lb-hands-empty { text-align: center; color: var(--lb-muted2); padding: 24px 8px; font-size: 14px; line-height: 1.5; }
.lb-hand-row {
    display: flex; align-items: center; gap: 12px; box-sizing: border-box;
    border-radius: 14px; border: 1px solid var(--lb-border); background: var(--lb-nav); padding: 10px 14px;
}
.lb-hand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-hand-cards { font-weight: 700; font-size: 15px; color: var(--lb-text); overflow-wrap: anywhere; }
.lb-hand-type { font-size: 12px; color: var(--lb-muted); }
.lb-hand-time { font-size: 11px; color: var(--lb-muted3); }
.lb-hand-result { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-size: 12px; font-weight: 700; }
.lb-hand-result strong { font-size: 16px; }
.lb-hand-win { color: var(--lb-live); }
.lb-hand-lose { color: #ff8a7a; }
.lb-hand-push { color: var(--lb-muted); }

/* ================================================================
   ===== LOBBY PAGES (Stage A) =====
   ================================================================
   The lobby is now several pages (Lobby, Tables, My hands, Me, Me > Appearance) that the bottom bar switches
   between. Only the active page is shown; the bar never leaves the screen. */
#lobby-screen .lb-page:not(.lb-page-active) { display: none; }
.lb-title-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lb-page-title { margin: 0; font-weight: 800; font-size: 1.5rem; color: var(--lb-text); }
.lb-back-btn {
    width: 44px; height: 44px; flex-shrink: 0; padding: 0; border-radius: 50%;
    border: 1px solid var(--lb-border); background: var(--lb-surface); color: var(--lb-text);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lb-back-btn .icon { width: 22px; height: 22px; }
.lb-back-btn:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }

/* ================================================================
   ===== LOBBY PAGE TITLE BANNERS =====
   ================================================================
   Each lobby page (Tables, My hands, Me, Appearance, Wallet, How to play) has its title on a slim picture strip instead of
   plain text. The six pictures (assets/banners/<page>.webp, 1200 x 140, about 5-15 KB each) are deliberately BLACK AND WHITE:
   the strip lays the active theme's felt colour over them (background-blend-mode: color keeps the picture's light and dark
   and takes only the hue from --lb-felt), so the same six files look native in Green and gold, Burgundy and Electric night
   with nothing per theme to maintain. The title stays real text (readable, translatable) on a dark fade over the quiet left
   side of the picture; the interesting part of each picture is on the right. The row keeps the height of the sub-pages'
   44px back button (plus a 2px inset), so a page with a back arrow and one without line up. The background is painted by the
   row itself, so there is no extra element and no script; a page that is not showing does not load its picture. */
.lb-pagebanner {
    --lb-bn-fade: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.7) 46%, rgba(0, 0, 0, 0.25) 72%, rgba(0, 0, 0, 0) 94%);
    --lb-bn-tint: linear-gradient(var(--lb-felt), var(--lb-felt));
    position: relative; box-sizing: border-box; min-height: 50px; padding: 2px 14px 2px 2px;
    border-radius: 14px; overflow: hidden; border: 1px solid var(--lb-banner-border);
    background-color: var(--lb-surface);
    background-repeat: no-repeat;
    background-size: auto, auto, cover;
    background-position: left center, left center, right center;
    background-blend-mode: normal, color, normal;
}
.lb-pagebanner > .lb-page-title:first-child { margin-left: 12px; }
.lb-pagebanner .lb-page-title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.8); }
.lb-pagebanner .lb-back-btn { background: rgba(0, 0, 0, 0.4); }
.lb-pagebanner-tables     { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/tables.webp'); }
.lb-pagebanner-hands      { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/hands.webp'); }
.lb-pagebanner-me         { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/me.webp'); }
.lb-pagebanner-appearance { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/appearance.webp'); }
.lb-pagebanner-wallet     { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/wallet.webp'); }
.lb-pagebanner-howto      { background-image: var(--lb-bn-fade), var(--lb-bn-tint), url('assets/banners/howto.webp'); }
.lb-page-lead { font-size: 14px; line-height: 1.5; color: var(--lb-muted); margin: 0; flex-shrink: 0; }
.lb-page-note { font-size: 12px; line-height: 1.5; color: var(--lb-muted3); margin: 0; flex-shrink: 0; }
#lb-page-tables .lb-quick-actions { margin-top: 0; }

/* ----- Me page ----- */
.lb-profile { display: flex; align-items: center; gap: 14px; padding: 14px; }
.lb-me-avatar { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--lb-accent); flex-shrink: 0; overflow: hidden; }
.lb-profile-text { flex: 1; min-width: 0; }
.lb-profile-name { font-weight: 800; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-profile-chips { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lb-muted); margin-top: 3px; }
.lb-profile-chips .icon { width: 14px; height: 14px; color: var(--lb-accent); }
.lb-row {
    position: static; display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; box-sizing: border-box; flex-shrink: 0;
    border-radius: 14px; border: 1px solid var(--lb-border); background: var(--lb-nav); color: var(--lb-text);
    padding: 0 16px; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.lb-row:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }
.lb-row .icon { width: 22px; height: 22px; color: var(--lb-accent); flex-shrink: 0; }
.lb-row .lb-chev { width: 18px; height: 18px; color: var(--lb-muted3); }
.lb-row-label { flex: 1; }
.lb-row-value { font-size: 13px; font-weight: 500; color: var(--lb-muted2); }
.lb-row-danger, .lb-row-danger .icon { color: #ff8a7a; }
.lb-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--lb-accent); position: relative; flex-shrink: 0; }
.lb-switch i { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lb-on-accent); display: block; }
.sound-toggle-btn.lb-sound-off .lb-switch { background: var(--lb-chip); }
.sound-toggle-btn.lb-sound-off .lb-switch i { right: auto; left: 3px; background: var(--lb-muted3); }

/* ================================================================
   ===== LOBBY: hot table + How to play page (Stage B) ===== */
.lb-section-row { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; margin-top: 2px; }
.lb-section-row .lb-section-title { margin-top: 0; }
.lb-link-btn { min-height: 44px; border: 0; background: transparent; color: var(--lb-muted); font-size: 13px; font-weight: 500; padding: 0 0 0 12px; cursor: pointer; }
.lb-link-btn:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }
.lb-hot-table { flex-shrink: 0; margin-top: -8px; }
.lb-hot-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--lb-muted2); font-size: 14px; }
.lb-rank-list { border: 1px solid var(--lb-border); border-radius: 16px; background: var(--lb-nav); overflow: hidden; flex-shrink: 0; }
.lb-rank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--lb-chip); }
.lb-rank-row:last-child { border-bottom: 0; }
.lb-rank-name { font-size: 14px; font-weight: 500; display: flex; flex-direction: column; gap: 1px; }
.lb-rank-name small { font-size: 11px; color: var(--lb-muted3); font-weight: 400; }
.lb-rank-mult { font-weight: 800; font-size: 1rem; color: var(--lb-accent); }
.lb-rules-img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--lb-border); flex-shrink: 0; }


/* ================================================================
   ===== GAME ROOM REDESIGN - stage T1: table surface and seats =====
   ================================================================
   The old rail image + felt layers are replaced by one SVG drawn by tsLayout() in game.js (inside #table-surface). It also
   writes the nine seat positions onto #player-list as --sx1..--sy9, so a seat's avatar is always centred exactly on its
   socket in the rail. The seat markup built by renderPlayerList is unchanged - only how it is laid out is new:
   the two hole cards fan out behind the top of the avatar, and the name + chips sit in one small plate beneath. */
.v3-table-oval {
    border: 0;
    border-image: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
}
.v3-table-oval::before, .v3-table-oval::after { display: none; }
#table-surface { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#table-surface svg { display: block; width: 100%; height: 100%; overflow: visible; }

.v3-table-oval .v2-player-tab { --av: 46px; --cw: 22px; --ch: 31px; width: 72px; min-height: 0; gap: 0; }
.v3-table-oval .v2-player-tab-me { --av: 56px; --cw: 34px; --ch: 48px; width: 92px; }
.v3-table-oval .v2-player-tab-empty { --av: 52px; }
.v3-seat-ring > :nth-child(1) { left: var(--sx1, 50%); top: var(--sy1, 100%); --bet-dx: var(--bd1, 1); }
.v3-seat-ring > :nth-child(2) { left: var(--sx2, 12%); top: var(--sy2, 90%); --bet-dx: var(--bd2, 1); }
.v3-seat-ring > :nth-child(3) { left: var(--sx3, 8%); top: var(--sy3, 68%); --bet-dx: var(--bd3, 1); }
.v3-seat-ring > :nth-child(4) { left: var(--sx4, 8%); top: var(--sy4, 30%); --bet-dx: var(--bd4, 1); }
.v3-seat-ring > :nth-child(5) { left: var(--sx5, 30%); top: var(--sy5, 8%); --bet-dx: var(--bd5, 1); }
.v3-seat-ring > :nth-child(6) { left: var(--sx6, 70%); top: var(--sy6, 8%); --bet-dx: var(--bd6, -1); }
.v3-seat-ring > :nth-child(7) { left: var(--sx7, 92%); top: var(--sy7, 30%); --bet-dx: var(--bd7, -1); }
.v3-seat-ring > :nth-child(8) { left: var(--sx8, 92%); top: var(--sy8, 68%); --bet-dx: var(--bd8, -1); }
.v3-seat-ring > :nth-child(9) { left: var(--sx9, 88%); top: var(--sy9, 90%); --bet-dx: var(--bd9, -1); }
.v3-table-oval .v3-seat-ring > .v2-player-tab { margin: 0; transform: translate(-50%, calc(var(--av) / -2)); }

/* avatar: bigger, sitting in its socket */
.v3-table-oval .v2-player-tab-top { position: relative; display: block; width: var(--av); height: var(--av); }
.v3-table-oval .v2-player-tab-avatar-wrap { position: absolute; inset: 0; width: var(--av); height: var(--av); z-index: 2; }
.v3-table-oval .v2-player-tab-avatar-ring { width: var(--av); height: var(--av); padding: 2px; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.v3-table-oval .v2-player-tab-ring-svg { width: var(--av); height: var(--av); }
.v3-table-oval .v2-player-tab-me .v2-player-tab-avatar-ring { box-shadow: 0 0 0 2px var(--lb-accent), 0 3px 8px rgba(0,0,0,0.5); }
.v3-table-oval .v2-player-tab-dealer .v2-player-tab-avatar-ring { box-shadow: 0 0 0 2px var(--lb-accent), 0 3px 8px rgba(0,0,0,0.5); }

/* the two hole cards: a small fan rising from behind the avatar (nothing sticks out sideways) */
.v3-table-oval .v2-player-tab-cards { position: absolute; left: 50%; top: calc(var(--ch) * -0.62); width: var(--cw); height: var(--ch); transform: translateX(-50%); display: block; z-index: 1; }
.v3-table-oval .v2-player-tab-cards .player-card-slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); margin: 0; border-radius: 4px; transform-origin: 50% 100%; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.v3-table-oval .v2-player-tab-cards .player-card-slot:nth-child(1) { transform: translateX(-34%) rotate(-9deg); }
.v3-table-oval .v2-player-tab-cards .player-card-slot:nth-child(2) { transform: translateX(34%) rotate(9deg); }
.v3-table-oval .v2-player-tab-cards .player-card-slot:not(.has-card) { visibility: hidden; }
.v3-table-oval .v2-player-tab-cards .pc-index { top: 2px; left: 3px; }
.v3-table-oval .v2-player-tab-cards .pc-rank { font-size: 0.7rem; font-weight: 800; }
.v3-table-oval .v2-player-tab-cards .pc-suit { font-size: 0.6rem; }
.v3-table-oval .v2-player-tab-me .v2-player-tab-cards .pc-index { top: 3px; left: 4px; }
.v3-table-oval .v2-player-tab-me .v2-player-tab-cards .pc-rank { font-size: 1.05rem; }
.v3-table-oval .v2-player-tab-me .v2-player-tab-cards .pc-suit { font-size: 0.9rem; }

/* name + chips in one plate */
.v3-table-oval .v2-player-tab-nameline, .v3-table-oval .v2-player-tab-info { width: 100%; box-sizing: border-box; background: var(--lb-nav); border: 1px solid var(--lb-border); border-radius: 0; padding: 0 4px; justify-content: center; }
.v3-table-oval .v2-player-tab-nameline { margin-top: 3px; border-radius: 9px 9px 0 0; border-bottom: 0; padding-top: 1px; }
.v3-table-oval .v2-player-tab-info { border-radius: 0 0 9px 9px; border-top: 0; padding-bottom: 1px; color: var(--lb-accent); font-weight: 800; font-size: 0.64rem; }
.v3-table-oval .v2-player-tab-info .icon { width: 0.7rem; height: 0.7rem; }
.v3-table-oval .v2-player-tab-name { flex: 1; min-width: 0; max-width: none; font-size: 0.66rem; text-align: center; color: var(--lb-text); }
.v3-table-oval .v2-player-tab-me .v2-player-tab-name, .v3-table-oval .v2-player-tab-me .v2-player-tab-info { font-size: 0.72rem; }
.v3-table-oval .v2-player-tab-badge { width: 12px; height: 12px; font-size: 0.46rem; }
.v3-table-oval .v2-player-tab-info-win { background: rgba(24,90,40,0.92); color: #dfffe6; }
.v3-table-oval .v2-player-tab-info-lose { background: rgba(110,24,24,0.92); color: #ffe1e1; }

/* a player's bet: a small chip on the side of the avatar that faces the middle of the table (sits on the printed spot) */
.v3-table-oval .v2-player-tab-bettag {
    left: calc(50% + var(--bet-dx, 1) * (var(--av) / 2 + 15px)); top: calc(var(--av) / 2); bottom: auto; transform: translate(-50%, -50%);
    min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 5px; border-radius: 12px; background: #c8344a; border: 2px dashed #fff; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; text-shadow: none; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.v3-table-oval .v2-player-tab-bettag .icon { display: none; }

/* an empty seat: an empty socket with a plus */
.v3-table-oval .v2-player-tab-empty-circle { width: 46px; height: 46px; background: rgba(0,0,0,0.35); border: 2px dashed rgba(255,255,255,0.38); color: rgba(255,255,255,0.85); font-size: 0; }
.v3-table-oval .v2-player-tab-empty-circle::before { content: '+'; font-size: 26px; font-weight: 300; line-height: 1; }
.v3-table-oval .v2-player-tab-empty:hover .v2-player-tab-empty-circle { background: rgba(255,255,255,0.12); }

/* the community card slots no longer draw their own dashed outline - the table has the boxes printed on it */
.v2-table-community .card.empty { border-color: transparent; background: transparent; }

/* the messages on the felt: kept in the clear bands between the top seats, the cards and the bottom seats */
.v3-table-oval { --round-top: 112px; }
.v3-table-status-message.waiting, .v3-table-decision-status { top: 66%; width: 62%; max-width: 230px; }
.v3-table-winlose-display { top: 59%; }

.v3-table-status-message { width: 56%; max-width: 200px; }
.v3-table-oval .v3-table-status-message, .v3-table-oval .v3-table-decision-status { font-size: 0.8rem; padding: 5px 10px; }


/* ----- bet bar (room redesign): minus chips left, the bet in the middle, plus chips right ----- */
.v2-bottom-bar-row1 { gap: 5px; justify-content: space-between; padding: 0 2px; overflow: visible; }
.bet-step-btn { --chip-col: #2f6fb8; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; font-size: 0.64rem; font-weight: 800; }
.bet-step-btn[data-step="50"], .bet-step-btn[data-step="-50"] { --chip-col: #b8321f; }
.bet-step-btn[data-step="100"], .bet-step-btn[data-step="-100"] { --chip-col: #2b8a57; }
.bet-step-plus { background: var(--chip-col); border: 3px dashed rgba(255,255,255,0.78); color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.bet-step-minus { background: rgba(8,10,10,0.78); border: 3px dashed var(--chip-col); color: #ffb4a6; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.bet-step-btn:active:not(:disabled) { background: var(--chip-col); filter: brightness(1.2); }
.bet-step-btn.at-limit { opacity: 0.32; box-shadow: none; }
.v2-bet-controls { flex: 0 0 auto; width: 64px; min-width: 0; height: 42px; flex-direction: column; gap: 0; border-radius: 12px; border: 1px solid var(--lb-accent); background: rgba(0,0,0,0.6); padding: 2px 4px; }
.v2-bet-controls label { font-size: 0.5rem; letter-spacing: 1px; text-transform: uppercase; color: var(--lb-accent); font-weight: 700; }
.v2-bet-controls input { width: 100%; font-size: 1.05rem; font-weight: 800; color: var(--lb-text); }
.v2-deal-btn { width: 100%; height: 48px; padding: 0; border-radius: 24px; border: 0; background: linear-gradient(180deg, #3fcf86, #1f9b5c); color: #04210f; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.6px; box-shadow: 0 6px 16px rgba(31,155,92,0.35); }
.v2-deal-btn:disabled { opacity: 0.45; filter: grayscale(0.4); box-shadow: none; }

/* the round counter: a small pill in the theme's accent instead of big red text */
.v3-table-round-display { font-size: 0.78rem; letter-spacing: 2px; color: var(--lb-accent); background: rgba(0,0,0,0.5); padding: 2px 12px; border-radius: 11px; text-shadow: none; line-height: 1.4; }

.v2-bottom-bar-row1 { gap: 4px; }
.bet-step-btn { width: 36px; height: 36px; font-size: 0.6rem; border-width: 2.5px; }
.v2-bet-controls { width: 62px; }

/* result text sits below the deck/cut labels, and my own +/- amount beside my avatar (not on top of the bet box) */
.v3-table-winlose-display { top: 63.5%; font-size: 1.15rem; }
.v3-table-status-message.waiting, .v3-table-decision-status { top: 69%; }
.v3-table-oval .v2-player-tab-me .v2-player-tab-amounttag { left: calc(50% - var(--av) / 2 - 24px); bottom: auto; top: calc(var(--av) / 2 - 8px); }

/* chips share the row evenly, so six of them plus the bet box fit even on a 320 px phone */
.bet-step-btn { flex: 1 1 0; width: auto; max-width: 36px; height: auto; aspect-ratio: 1 / 1; }
.v2-bet-controls { width: 58px; }
.v3-table-round-display:empty { display: none; }
@media (max-height: 700px) { .v3-table-oval .v3-table-status-message, .v3-table-oval .v3-table-decision-status { font-size: 0.68rem; padding: 3px 8px; } }

.v2-bottom-bar { width: 100%; max-width: 480px; align-self: center; }


/* the deal row never scrolls sideways, and the dealer's own two buttons use the same pill style as DEAL */
.v2-bottom-bar-row1, .v2-bottom-bar-row2 { overflow: visible; }
.v2-deal-btn { flex: 1 1 0; width: auto; min-width: 0; }
.v2-bottom-bar .dealer-decision-buttons:not(.hidden) { display: flex; gap: 8px; width: 100%; min-width: 0; flex-shrink: 1; }   /* :not(.hidden) - or it would override .hidden and show for every player */
.v2-bottom-bar .dealer-decision-buttons .btn-premium,
.v2-bottom-bar .dealer-decision-buttons .btn-secondary {
    flex: 1 1 0; min-width: 0; height: 48px; padding: 0 10px; border-radius: 24px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.4px; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.v2-bottom-bar .dealer-decision-buttons .btn-premium { border: 0; background: linear-gradient(180deg, #3fcf86, #1f9b5c); color: #04210f; box-shadow: 0 6px 16px rgba(31,155,92,0.35); }
.v2-bottom-bar .dealer-decision-buttons .btn-secondary { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.35); color: var(--lb-text); }


/* spectators: a small eye + number in the table's empty top-right corner (the word is kept for screen readers via the title) */
.ts-spectators { position: absolute; top: 0; right: 0; z-index: 8; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: rgba(0,0,0,0.55); border: 1px solid var(--lb-border); border-radius: 12px; color: var(--lb-text); font-size: 0.7rem; font-weight: 800; }
.ts-spectators .icon { width: 0.85rem; height: 0.85rem; color: var(--lb-accent); }
.ts-spectators .sp-word { display: none; }


/* the dealer's seat: a slightly bigger avatar, a crown instead of the old "D" badge, a gold-edged plate, and the round count beside the chips */
.v3-table-oval .v2-player-tab-dealer { --av: 50px; --cw: 26px; --ch: 36px; }
.v3-table-oval .v2-player-tab-me.v2-player-tab-dealer { --av: 56px; --cw: 34px; --ch: 48px; }
.v3-table-oval .v2-player-tab-dealer .v2-player-tab-nameline, .v3-table-oval .v2-player-tab-dealer .v2-player-tab-info { border-color: var(--lb-accent); }
.v3-table-oval .v2-player-tab-badge-dealer { background: none; box-shadow: none; width: auto; height: auto; color: var(--lb-accent); }
.v3-table-oval .v2-player-tab-badge-dealer .icon { width: 12px; height: 12px; }
.v3-table-oval .v2-player-tab-dealer .dealer-rounds { color: var(--lb-muted); font-weight: 700; margin-left: 3px; }


/* ================================================================
   ===== SUIT-COLOURED CARDS (same design as the PokerStars-style reference) =====
   A gradient face in the suit's colour (the game's four-colour deck), a small white rank with the suit pip under it in the
   top-left corner, and one big white rank filling the bottom-right. Used by the table cards, the seat cards and the flying card. */
.card[data-suit="♥"], .player-card-slot[data-suit="♥"], .card-flying[data-suit="♥"] { --face-hi: #e24c42; --face: #ae2820; }
.card[data-suit="♦"], .player-card-slot[data-suit="♦"], .card-flying[data-suit="♦"] { --face-hi: #3f88ee; --face: #1b4cb0; }
.card[data-suit="♣"], .player-card-slot[data-suit="♣"], .card-flying[data-suit="♣"] { --face-hi: #2fb85a; --face: #107532; }
.card[data-suit="♠"], .player-card-slot[data-suit="♠"], .card-flying[data-suit="♠"] { --face-hi: #44484f; --face: #121418; }
.card[data-suit]:not([data-suit=""]):not(.back):not(.empty), .card-flying[data-suit] {
    background: linear-gradient(180deg, var(--face-hi), var(--face)) !important;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.15);
    color: #fff;
}
/* table cards */
.card[data-suit] .card-center { display: none; }
.card[data-suit]::after { display: none; }
.card[data-suit] .card-top { top: 3%; left: 9%; align-items: flex-start; gap: 0; line-height: 1; }
.card[data-suit] .card-top .card-rank { font-size: 36cqw !important; font-weight: 700; color: #fff; }
.card[data-suit] .card-top .card-suit-small { font-size: 28cqw !important; color: #fff; }
.card[data-suit] .card-bottom { top: auto; left: auto; bottom: 2%; right: 8%; }
.card[data-suit] .card-bottom .card-suit-small { display: none; }
.card[data-suit] .card-bottom .card-rank { font-size: 76cqw !important; font-weight: 600; color: #fff; line-height: 1; }
.card[data-rank="10"] .card-bottom .card-rank { font-size: 54cqw !important; letter-spacing: -0.06em; }
.v2-cut-card .card[data-suit], .v2-deck-stack .card[data-suit], .v2-table-community .card[data-suit] { container-type: inline-size; }

/* the flying card (while a card is being dealt) */
.card-flying[data-suit] { container-type: inline-size; display: block; border-radius: 8px; overflow: hidden; }
.card-flying .fly-corner { position: absolute; top: 3%; left: 9%; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; color: #fff; }
.card-flying .fly-r { font-size: 36cqw; font-weight: 700; }
.card-flying .fly-s { font-size: 28cqw; }
.card-flying .fly-big { position: absolute; right: 8%; bottom: 2%; font-size: 76cqw; font-weight: 600; line-height: 1; color: #fff; }
.card-flying[data-rank="10"] .fly-big { font-size: 54cqw; letter-spacing: -0.06em; }

/* small cards at the seats: corner rank + pip, plus a bigger rank on the right, kept inside the part the avatar does not cover */
.pc-big { display: none; }
.player-card-slot[data-suit].has-card { background: linear-gradient(180deg, var(--face-hi), var(--face)) !important; border: 1px solid rgba(255,255,255,0.28) !important; color: #fff !important; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-index { position: absolute; top: 4%; left: 9%; inset: auto; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-rank { position: static; transform: none; font-size: calc(var(--cw, 22px) * 0.5); font-weight: 700; color: #fff; line-height: 1; text-shadow: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { position: static; font-size: calc(var(--cw, 22px) * 0.34); color: #fff; line-height: 1; margin: 0; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { display: block; position: absolute; right: 7%; top: 14%; font-size: calc(var(--cw, 22px) * 0.82); font-weight: 600; line-height: 1; color: #fff; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { font-size: calc(var(--cw, 22px) * 0.56); letter-spacing: -0.06em; }

/* seat cards are too small for two ranks: just the pip in the corner and one big rank, in the part the avatar leaves visible */
.v2-player-tab-cards .player-card-slot[data-suit] .pc-rank { display: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { font-size: calc(var(--cw, 22px) * 0.32); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { right: auto; left: 50%; transform: translateX(-42%); top: 20%; font-size: calc(var(--cw, 22px) * 0.76); font-weight: 700; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { font-size: calc(var(--cw, 22px) * 0.54); transform: translateX(-46%); }

.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { left: 60%; transform: translateX(-50%); top: 22%; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { left: 62%; transform: translateX(-50%); }


/* "10" is the same size as every other rank (just set a little tighter so two digits fit) */
.card[data-rank="10"] .card-bottom .card-rank { font-size: 76cqw !important; letter-spacing: -0.12em; }
.card-flying[data-rank="10"] .fly-big { font-size: 76cqw; letter-spacing: -0.12em; }

/* seat cards: the fan rises higher so more of each card shows above the avatar, and the rank sits fully inside that visible part */
.v3-table-oval .v2-player-tab-cards { top: calc(var(--ch) * -0.78); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { top: 4%; left: 9%; font-size: calc(var(--cw, 22px) * 0.3); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { left: 50%; transform: translateX(-50%); top: 24%; font-size: calc(var(--cw, 22px) * 0.64); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { left: 50%; transform: translateX(-50%); font-size: calc(var(--cw, 22px) * 0.64); letter-spacing: -0.1em; }

/* small seat cards: no pip (the card colour already shows the suit) - it only collided with the rank */
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { display: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { top: 16%; font-size: calc(var(--cw, 22px) * 0.7); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { top: 22%; font-size: calc(var(--cw, 22px) * 0.62); }


/* seat cards (players and the dealer): rank with its suit symbol right under it, centred - like the original index, but bigger */
.v2-player-tab-cards .player-card-slot[data-suit] .pc-index { position: absolute; inset: 0; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7%; line-height: 1; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-rank { display: block; position: static; transform: none; font-size: calc(var(--cw, 22px) * 0.58); font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { display: block; position: static; font-size: calc(var(--cw, 22px) * 0.44); line-height: 1; margin: 1px 0 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { display: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-index { letter-spacing: -0.04em; }


/* ===== seat cards = the table-card design (same sizes, same place as before) =====
   Gradient face in the suit colour, small rank + pip top-left, one big rank bottom-right - all sized from the card's own width (cqw),
   so it is the table-card face at a smaller size. The fan stays tucked behind the top of the avatar, exactly as before, so the lower part
   of the big rank is covered by the avatar. */
.v3-table-oval .v2-player-tab-cards { top: calc(var(--ch) * -0.62); }
.player-card-slot[data-suit].has-card { container-type: inline-size; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-index { position: absolute; inset: auto; top: 3%; left: 9%; right: auto; bottom: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; letter-spacing: 0; line-height: 1; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-rank { display: block; position: static; transform: none; font-size: 36cqw; font-weight: 700; line-height: 1; color: #fff; text-shadow: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-suit { display: block; position: static; font-size: 28cqw; line-height: 1; margin: 0; color: #fff; text-shadow: none; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big { display: block; position: absolute; left: auto; top: auto; right: 8%; bottom: 2%; transform: none; font-size: 76cqw; font-weight: 600; line-height: 1; color: #fff; }
.v2-player-tab-cards .player-card-slot[data-suit] .pc-big-10 { left: auto; top: auto; right: 8%; transform: none; font-size: 76cqw; letter-spacing: -0.12em; }

/* ================================================================
   ===== LOBBY PROMO BANNER (rotating, managed in Admin > Banners) =====
   Same proportions as the preview in the admin screen (everything is sized from the slide's own width), so what the admin sees is
   what players get. The track is a plain scroll-snap strip: swiping is the browser's own, and it costs nothing on a low-end phone. */
.lb-promo { position: relative; margin: 0 0 14px; }
.lb-promo[hidden] { display: none; }
.lb-promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 18px; -webkit-overflow-scrolling: touch; }
.lb-promo-track::-webkit-scrollbar { display: none; }
.lb-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; box-sizing: border-box; background: #06100c; border: 1px solid var(--lb-border, rgba(232,184,74,0.35)); border-radius: 18px; color: #f4efe0; --bn-scale: 1; }
.lb-slide[data-tappable="1"] { cursor: pointer; }
.lb-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.lb-slide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,12,9,0.78) 0%, rgba(4,12,9,0.55) 42%, rgba(4,12,9,0) 68%); }
.lb-slide.right .lb-slide-shade { background: linear-gradient(270deg, rgba(4,12,9,0.78) 0%, rgba(4,12,9,0.55) 42%, rgba(4,12,9,0) 68%); }
.lb-slide-text { position: absolute; top: 9%; bottom: 15%; width: 54%; overflow: hidden; overflow-wrap: break-word; }
.lb-slide.left .lb-slide-text { left: 5.5%; text-align: left; }
.lb-slide.right .lb-slide-text { right: 5.5%; text-align: right; }
.lb-slide-eyebrow { font-size: calc(3cqw * var(--bn-scale) * var(--bn-fit, 1)); letter-spacing: 0.75cqw; font-weight: 700; color: var(--lb-accent, #e8b84a); }
.lb-slide-title { font-size: calc(10.4cqw * var(--bn-scale) * var(--bn-fit, 1)); font-weight: 900; line-height: 1.05; margin-top: 1.2cqw; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.lb-slide-body { font-size: calc(3.7cqw * var(--bn-scale) * var(--bn-fit, 1)); line-height: 1.35; margin-top: 1.8cqw; color: #dfe8e2; }
.lb-slide-btn { display: inline-block; margin-top: 3cqw; padding: 1.6cqw 4cqw; border-radius: 6cqw; background: var(--lb-accent, #e8b84a); color: #241a05; font-size: calc(3.4cqw * var(--bn-scale) * var(--bn-fit, 1)); font-weight: 800; }
.lb-slide.f-serif .lb-slide-text { font-family: Georgia, 'Times New Roman', serif; }
.lb-slide.f-condensed .lb-slide-text { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif-condensed, Impact, sans-serif; letter-spacing: 0.02em; }
.lb-slide.f-rounded .lb-slide-text { font-family: 'Arial Rounded MT Bold', 'Nunito', 'Varela Round', system-ui, sans-serif; }
.lb-slide.f-mono .lb-slide-text { font-family: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; }
.lb-slide.f-script .lb-slide-text { font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive; }
.lb-promo-dots { position: absolute; left: 5.5%; right: 5.5%; bottom: 9px; display: flex; gap: 6px; pointer-events: none; }
.lb-promo-dots.right { justify-content: flex-end; }
.lb-promo-dots span { width: 5px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.45); transition: width 0.25s, background 0.25s; }
.lb-promo-dots span.on { width: 16px; background: var(--lb-accent, #e8b84a); }
@media (prefers-reduced-motion: reduce) { .lb-promo-dots span { transition: none; } }

/* ================================================================
   ===== WALLET PAGE (top up + withdraw) ===== */
.lb-wallet-balance { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lb-wallet-balance-label { color: var(--lb-muted2); font-size: 13px; }
.lb-wallet-balance-num { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: var(--lb-text); }
.lb-wallet-balance-num .icon { width: 22px; height: 22px; color: var(--lb-accent); }
.lb-seg { display: flex; gap: 6px; padding: 4px; background: var(--lb-nav); border: 1px solid var(--lb-border); border-radius: 14px; margin-bottom: 12px; }
.lb-seg-btn { flex: 1; height: 42px; border: 0; border-radius: 11px; background: transparent; color: var(--lb-muted2); font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lb-seg-btn.lb-seg-on { background: var(--lb-accent); color: #1a1405; }
.lb-wallet-panel.hidden { display: none !important; }
.lb-wallet-card { background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: 18px; padding: 16px; box-sizing: border-box; text-align: left; }
.lb-wallet-card .topup-tab.active { background: rgba(255,255,255,0.06); border-color: var(--lb-accent); color: var(--lb-accent); }

/* The Wallet's inner controls were written for the old dark popup and carry its fixed gold / grey colours. Inside the
   Wallet card they take the lobby theme instead (green, burgundy, night). Status colours keep their meaning: pending
   amber, approved green, denied red, errors red, the -/+ amount buttons red/green - and the QR keeps its white
   background so it stays scannable. Scoped to .lb-wallet-card, so the old popup rules are untouched. */
.lb-wallet-card .topup-label { color: var(--lb-muted3); }
.lb-wallet-card .topup-hint,
.lb-wallet-card .topup-history-meta,
.lb-wallet-card .topup-history-receipt,
.lb-wallet-card .topup-receipt-preview span { color: var(--lb-muted3); }
.lb-wallet-card .topup-tab { color: var(--lb-muted2); border-color: var(--lb-border); }
.lb-wallet-card .topup-amount-value { color: var(--lb-accent); }
.lb-wallet-card .topup-step-btn { background: var(--lb-chip); border-color: var(--lb-border); }
.lb-wallet-card .topup-step-btn:active { background: var(--lb-quick); }
.lb-wallet-card .topup-method-btn { background: var(--lb-chip); border-color: var(--lb-border); color: var(--lb-muted); }
.lb-wallet-card .topup-method-btn.on { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-on-accent); }
.lb-wallet-card .topup-copy-btn { background: var(--lb-chip); border-color: var(--lb-border); color: var(--lb-muted); }
.lb-wallet-card .topup-link-btn { color: var(--lb-accent); }
.lb-wallet-card .topup-pay-info,
.lb-wallet-card .topup-history-item { background: var(--lb-bg); border-color: var(--lb-border); }
.lb-wallet-card .topup-code,
.lb-wallet-card .topup-history-amount { color: var(--lb-text); }
.lb-wallet-card .topup-history-note { color: var(--lb-muted); }
.lb-wallet-card .topup-input { background: var(--lb-bg); border-color: var(--lb-border); color: var(--lb-text); }
.lb-wallet-card .topup-input::placeholder { color: var(--lb-faint); }
.lb-wallet-card .topup-receipt-preview img { border-color: var(--lb-border); }
.lb-wallet-card .btn-secondary { background: var(--lb-chip); border-color: var(--lb-border); color: var(--lb-muted); }
.lb-wallet-card .btn-premium { background: var(--lb-accent); color: var(--lb-on-accent); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.lb-wallet-card .btn-premium:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.lb-wallet-card .btn-premium:disabled { background: var(--lb-chip); color: var(--lb-faint); box-shadow: none; }

/* Keep screen on while playing (Me page row): same switch as Sound, driven by its own class */
.keepawake-toggle-btn.keepawake-off .lb-switch { background: var(--lb-chip); }
.keepawake-toggle-btn.keepawake-off .lb-switch i { right: auto; left: 3px; background: var(--lb-muted3); }
.lb-row-hint { padding: 0 6px 4px; font-size: 12px; line-height: 1.4; color: var(--lb-muted3); }

/* A seat whose player lost their connection (phone locked, network drop): greyed out with a small AWAY label, so the others see it is not just slow */
.v2-player-tab-away .v2-player-tab-avatar-ring { filter: grayscale(0.9) brightness(0.72); }
.v2-player-tab-away .v2-player-tab-nameline, .v2-player-tab-away .v2-player-tab-info { opacity: 0.6; }
.v2-player-tab-awaytag { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 3; padding: 0 4px; border-radius: 4px; font-size: 7px; line-height: 10px; font-weight: 800; letter-spacing: 0.06em; color: #1b1405; background: #e0a825; white-space: nowrap; pointer-events: none; }