/*
 * NES EUCHRE - YAHOO CLASSIC STYLE
 * 
 * Design target: Classic Yahoo Euchre (early 2000s)
 * - Neutral tan/beige background
 * - Muted green felt table
 * - Soft borders, calm typography
 * - Social, "sit and play for hours" vibe
 * 
 * This is NOT retro NES and NOT modern UI.
 * This is early-2000s web game comfort.
 */

/* ===========================================
   CSS VARIABLES - Yahoo Classic Palette
   =========================================== */
:root {
    /* Background colors */
    --color-bg: #d4c8a8;              /* Tan/beige main background */
    --color-bg-secondary: #c9bc9a;    /* Slightly darker tan */
    --color-bg-light: #e0d5b8;        /* Lighter tan for highlights */
    
    /* Table */
    --color-table: #2d5a3d;           /* Muted green felt */
    --color-table-light: #3a6b4a;     /* Lighter green for contrast */
    --color-table-border: #1e3d29;    /* Dark green border */
    
    /* Borders - soft and subtle */
    --color-border: #a89878;          /* Soft tan border */
    --color-border-dark: #8a7a5a;     /* Darker border */
    --color-border-light: #c8b898;    /* Light border */
    
    /* Text colors */
    --color-text: #3a3020;            /* Dark brown text */
    --color-text-light: #5a5040;      /* Lighter brown */
    --color-text-muted: #7a7060;      /* Muted text */
    --color-text-on-table: #e8e0c8;   /* Light text on green table */
    
    /* Accent colors - muted, not neon */
    --color-primary: #4a7a5a;         /* Muted green for actions */
    --color-primary-hover: #5a8a6a;   /* Hover state */
    --color-highlight: #6a8a4a;       /* Highlight/active */
    --color-warning: #aa8844;         /* Warning/info */
    --color-error: #994444;           /* Error/danger */
    
    /* Card suit colors */
    --color-hearts: #aa3333;
    --color-diamonds: #aa3333;
    --color-clubs: #2a2a2a;
    --color-spades: #2a2a2a;
    
    /* Card */
    --color-card-bg: #f8f4e8;         /* Off-white card background */
    --color-card-border: #998866;     /* Card border */
    --color-card-selected: #4a7a5a;   /* Selected card highlight */
    
    /* Chat */
    --color-chat-bg: #f0ead8;         /* Light chat background */
    --color-chat-border: #b8a888;     /* Chat border */
    --color-chat-system: #666655;     /* System message color */

    /* Optional: card back image for face-down cards. */
    /* Drop your image at assets/card-back.png to use it automatically. */
    /* NOTE: include a version query to avoid cached-404 when adding the file later. */
    --card-back-image: url("assets/card-back.png?v=2025-12-21-17");

    /* ===========================================
       YAHOO-CLASSIC LEFT BAR (palette knobs)
       =========================================== */
    /* Primary teal (requested) */
    --yahoo-rail-primary: #2d979e;
    /* Lighter teal ramp (Yahoo-ish) */
    --yahoo-rail-bg-top: #cfecee;
    --yahoo-rail-bg-mid: #a7dde0;
    --yahoo-rail-bg-bot: #86c6ca;
    --yahoo-rail-border: var(--yahoo-rail-primary);
    --yahoo-rail-inset: rgba(255, 255, 255, 0.35);
    --yahoo-rail-text: rgba(0, 0, 0, 0.72);

    --yahoo-btn-bg: #d6eef0;
    --yahoo-btn-bg-hover: #e4f6f7;
    --yahoo-btn-border-dark: var(--yahoo-rail-primary);
    --yahoo-btn-border-mid: #5cb3b8;
    --yahoo-btn-border-light: #f5fbfc;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    
    /* Border radius - soft, not sharp */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    
    /* Border */
    --border-width: 1px;
    --border-style: solid;
    
    /* Font - simple sans-serif */
    --font-family: 'Trebuchet MS', 'Verdana', 'Arial', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-lg: 15px;
    --font-size-xl: 18px;
    --font-size-title: 22px;

    /* ===========================================
       LAYOUT TOKENS (responsiveness + consistency)
       =========================================== */
    /* Shared "frame" width so screens don't feel like they jump sizes */
    --app-max-width: 1060px;
    --app-gutter: 12px;

    /* Game sizing: prefer clamp-based scaling over transform zoom */
    /* Base card size (hand + general), keeps ratio ~ 68x98 */
    --card-w: clamp(54px, 5.2vmin, 68px);
    --card-h: calc(var(--card-w) * 1.441);

    /* Trick cards slightly smaller than hand cards */
    --trick-card-w: clamp(50px, 4.6vmin, 62px);
    --trick-card-h: calc(var(--trick-card-w) * 1.42);

    /* Turned-up card (kitty) sits between hand + trick sizes */
    --kitty-card-w: clamp(54px, 5.0vmin, 68px);
    --kitty-card-h: calc(var(--kitty-card-w) * 1.441);

    /* Felt/table square: scale by viewport min dimension, cap at classic size */
    --table-size: clamp(300px, 58vmin, 640px);

    /* Trick rake animation tuning */
    /* Further = ends closer to winner player card */
    /* ~30% more travel (ends closer to winner card) */
    --trick-rake-distance: clamp(156px, 22vmin, 312px);
    /* 1 second shorter than 2.6s */
    --trick-rake-duration: 1.6s;
}

/* Screen-reader only (accessible headings/labels without visual noise). */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Allow the table to breathe more on wider screens.
   IMPORTANT: table is a square, so widening also increases height.
   We only do this when the viewport is both wide enough AND tall enough. */
@media (min-width: 1180px) and (min-height: 720px) {
    #game-screen {
        /* Slight bump for 13" laptops / 1080p-ish screens */
        --app-max-width: 1140px;
        --table-size: clamp(310px, 60vmin, 680px);
    }
}

@media (min-width: 1400px) and (min-height: 760px) {
    #game-screen {
        /* Wider "frame" so we don't waste huge left/right margins on 1440p/4K */
        --app-max-width: 1240px;
        /* Match 1240px frame: 260 + 720 + 260 = 1240 */
        --table-size: clamp(320px, 62vmin, 720px);
    }
}

/* ===========================================
   RESET & BASE
   =========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
    /* Prevent subtle horizontal "nudge" when scrollbars appear/disappear (short screens). */
    scrollbar-gutter: stable;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.4;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */
.hidden {
    display: none !important;
}

/* ===========================================
   SCREEN CONTAINERS
   =========================================== */
.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ===========================================
   BUTTONS - Flat, understated Yahoo style
   =========================================== */
.nes-btn {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: var(--border-width) var(--border-style) var(--color-border-dark);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-height: 28px;
}

.nes-btn:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
}

.nes-btn:active {
    background-color: var(--color-border);
}

.nes-btn:focus {
    outline: 1px dotted var(--color-text-muted);
    outline-offset: 1px;
}

.nes-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nes-btn-secondary {
    background-color: var(--color-bg);
}

.nes-btn-small {
    min-height: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* ===========================================
   INPUTS - Simple, clean
   =========================================== */
.nes-input {
    background-color: #fff;
    color: var(--color-text);
    border: var(--border-width) var(--border-style) var(--color-border-dark);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.nes-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.nes-input::placeholder {
    color: var(--color-text-muted);
}

/* ===========================================
   LOBBY SCREEN
   =========================================== */
.lobby-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: auto; /* allow internal scroll if height is tight */
    gap: var(--spacing-xl);
    padding: 28px 16px;
}

.lobby-card {
    width: min(var(--app-max-width), 96vw);
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-secondary));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    padding: 22px 22px 16px;
}

.lobby-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.game-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-logo {
    /* ~25% smaller than previous sizing */
    width: clamp(180px, 40vw, 380px);
    /* Hard cap by viewport height to prevent lobby scroll on short screens */
    max-height: 24vh;
    max-width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    opacity: 0.96;
    /* Keep styling minimal; let the art carry it. */
    filter: saturate(0.96) contrast(0.98);
}

/* NOTE: If the logo has a transparent background (preferred), do NOT use blend modes here.
   Blend modes (like multiply) will tint true whites (e.g., the cards) with the tan background. */

/* Fade the logo edges so it doesn't look like it's in a rectangular "box". */
@supports ((-webkit-mask-image: radial-gradient(circle, #000, transparent)) or (mask-image: radial-gradient(circle, #000, transparent))) {
    .game-logo {
        /* Stronger, symmetric fade so any rectangular matte disappears on all sides. */
        -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 28%, rgba(0,0,0,0) 66%);
        mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 28%, rgba(0,0,0,0) 66%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        /* Bigger mask = gentler, wider falloff before the image bounds */
        -webkit-mask-size: 240% 240%;
        mask-size: 240% 240%;
    }
}

.lobby-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    letter-spacing: 0.2px;
}

.name-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.name-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.name-input {
    width: 240px;
    text-align: center;
}

.name-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.game-title {
    font-size: 28px;
    color: var(--color-text);
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.4px;
}

.lobby-profile.complete {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(0, 0, 0, 0.06);
}
.lobby-profile.complete .name-hint {
    display: none;
}

.lobby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.lobby-section {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.65);
}

.lobby-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lobby-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.lobby-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 0;
    padding: 6px 10px 7px;
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.1px;
    cursor: pointer;
    text-align: center;
    text-transform: none;
    /* Make these read like tabs/links, not action buttons */
    border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}

.lobby-tab.active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}

.lobby-tab:hover {
    color: var(--color-text);
    border-bottom-color: rgba(74, 122, 90, 0.65);
}

.lobby-tab:focus {
    outline: 1px dotted var(--color-text-muted);
    outline-offset: 2px;
}

.lobby-tabpanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.action-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.action-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text);
}

.action-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
}

.action-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 12px;
}
.action-divider::before,
.action-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(0, 0, 0, 0.12);
}
.action-divider span {
    padding: 0 6px;
}

.action-primary {
    min-width: 160px;
}

.action-primary-cta {
    background: var(--color-primary);
    color: #fff;
    border-color: rgba(30, 70, 55, 0.9);
    box-shadow: 0 6px 14px rgba(74, 122, 90, 0.25);
}
.action-primary-cta:hover {
    background: var(--color-primary-hover);
}
.action-primary-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Join button disabled state clarity */
#join-room-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lobby-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
}

.join-section {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.join-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.join-stack #room-code-input {
    width: 160px;
    text-align: center;
}

.join-stack #join-room-btn {
    width: 100%;
    min-width: 220px;
}

#room-code-input {
    width: 100px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lobby-message {
    color: var(--color-text-light);
    min-height: 20px;
    text-align: center;
    font-size: var(--font-size-sm);
    margin-top: 10px;
}

.lobby-message.error {
    color: var(--color-error);
}

/* ===========================================
   AVATAR SELECTION - Lobby
   =========================================== */
.avatar-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.profile-local-play {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

.profile-local-play .action-primary-cta {
    min-width: 220px;
}

.nes-select {
    background-color: #fff;
    color: var(--color-text);
    border: var(--border-width) var(--border-style) var(--color-border-dark);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.nes-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.local-ai-settings {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.local-ai-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.avatar-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.avatar-options {
    display: grid;
    grid-template-columns: repeat(6, 40px);
    justify-content: center;
    gap: var(--spacing-xs);
}

.avatar-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.1s ease, transform 0.1s ease;
    padding: 0;
}

/* Responsive: stack sections on narrow screens */
@media (max-width: 740px) {
    .lobby-card {
        padding: 18px 14px 14px;
    }
    .lobby-grid {
        grid-template-columns: 1fr;
    }
    .avatar-options {
        grid-template-columns: repeat(6, 40px);
    }
}

.avatar-btn:hover {
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.avatar-btn.selected {
    border-color: var(--color-primary);
    background-color: var(--color-bg-secondary);
    box-shadow:
        0 0 0 2px rgba(56, 173, 169, 0.85),
        0 0 0 6px rgba(56, 173, 169, 0.18);
    transform: scale(1.08);
}

/* ===========================================
   WAITING SCREEN
   =========================================== */
.waiting-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: auto; /* allow internal scroll if height is tight */
    padding: 28px 16px;
}

.waiting-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--color-text);
}

.waiting-card {
    width: min(var(--app-max-width), 96vw);
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-secondary));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    padding: 18px 18px 16px;
}

.waiting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.waiting-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.waiting-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.waiting-leave-btn {
    background: transparent;
    border: none;
    padding: 0;
    min-height: auto;
    opacity: 0.85;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.waiting-leave-btn:hover {
    opacity: 1;
    color: var(--color-text);
}

/* Reserve space for Start Game (no layout shift) */
#start-game-btn.hidden {
    display: block !important;  /* override .hidden { display:none } */
    visibility: hidden;
    pointer-events: none;
}

/* Make Start Game match Create Room primary styling */
#start-game-btn {
    background: var(--color-primary);
    color: #fff;
    border-color: rgba(30, 70, 55, 0.9);
    box-shadow: 0 6px 14px rgba(74, 122, 90, 0.25);
}
#start-game-btn:hover {
    background: var(--color-primary-hover);
}

.waiting-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 18px;
    align-items: stretch;
}

.waiting-section {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Waiting room chat input lives under the chat box (keeps it visually connected) */
.waiting-chat-input-row {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
}

.waiting-chat-input-row .nes-input {
    flex: 1;
    min-width: 0;
}

.waiting-chat-input-row #waiting-chat-send-btn {
    min-width: 110px;
}

.room-code-display {
    font-size: var(--font-size-md);
    color: var(--color-text);
    background-color: var(--color-bg-light);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

#display-room-code {
    color: var(--color-primary);
    font-weight: bold;
}

.players-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background-color: var(--color-bg-light);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

/* Seats layout prototype (opt-in via URL): `?seats=table` */
.players-list.seats-table {
    display: grid;
    grid-template-columns: 1fr minmax(96px, 120px) 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ". north ."
        "west center east"
        ". south .";
    gap: 10px;
    align-items: center;
    justify-items: center;
    align-content: center;
    padding: 12px;
    /* felt arena */
    background:
        radial-gradient(120% 110% at 50% 45%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
        linear-gradient(145deg, var(--color-table-light), var(--color-table));
    border-color: rgba(30, 61, 41, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.players-list.seats-table::before {
    content: "";
    grid-area: center;
    width: min(120px, 100%);
    min-height: 120px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(30, 61, 41, 0.65);
    background:
        radial-gradient(120% 140% at 50% 35%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
        repeating-linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.03) 0px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        linear-gradient(145deg, var(--color-table-light), var(--color-table));
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.08);
}

.players-list.seats-table #slot-2 { grid-area: north; }
.players-list.seats-table #slot-0 { grid-area: south; }
.players-list.seats-table #slot-1 { grid-area: west; }
.players-list.seats-table #slot-3 { grid-area: east; }

.players-list.seats-table .player-slot {
    width: 220px;
    max-width: 240px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "label sit"
        "name sit"
        "status sit";
    column-gap: 10px;
    row-gap: 2px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}

.players-list.seats-table .slot-label {
    grid-area: label;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.players-list.seats-table .player-name {
    grid-area: name;
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.players-list.seats-table .player-status {
    grid-area: status;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.players-list.seats-table .seat-claim-btn {
    grid-area: sit;
    justify-self: end;
    align-self: center;
}

/* Direction hints (keeps original Seat 1..4 text too) */
.players-list.seats-table #slot-2 .slot-label::before { content: "North · "; }
.players-list.seats-table #slot-0 .slot-label::before { content: "South · "; }
.players-list.seats-table #slot-1 .slot-label::before { content: "West · "; }
.players-list.seats-table #slot-3 .slot-label::before { content: "East · "; }

.waiting-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    min-height: 18px;
}

.waiting-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Waiting room chat (reuses chat styles) */
.waiting-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    flex: 1;
}

.waiting-chat-box {
    flex: 1;
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.65);
    display: flex;
}

.waiting-chat-messages {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

@media (max-width: 740px) {
    .waiting-header {
        flex-direction: column;
        align-items: center;
    }
    .waiting-grid {
        grid-template-columns: 1fr;
    }
    .waiting-chat-box {
        min-height: 220px;
    }
}

.player-slot {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: var(--spacing-sm);
    align-items: center;
}

.player-slot .player-name {
    color: var(--color-text);
}

.slot-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.player-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.player-status.ready {
    color: var(--color-primary);
    font-weight: bold;
}

.player-status.not-ready {
    color: var(--color-text-muted);
}

.player-status.host {
    color: var(--color-warning);
    font-weight: bold;
}

.player-slot.filled {
    color: var(--color-text);
}

.player-slot.filled .player-name {
    color: var(--color-primary);
}

/* ===========================================
   GAME SCREEN LAYOUT
   Yahoo Classic: Table center, chat at bottom
   =========================================== */
#game-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg);
}

/* ===========================================
   YAHOO-STYLE LEFT BAR (prototype)
   Enable with: ?leftbar=1
   =========================================== */
#game-screen.leftbar {
    /* Reserve space for the fixed left rail */
    padding-left: 170px;
    box-sizing: border-box;
}

#game-screen.leftbar .utility-bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 170px;
    height: auto;
    padding: 10px 10px 12px;
    z-index: 60;
    pointer-events: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;

    /* Yahoo-classic teal rail */
    background: linear-gradient(180deg, var(--yahoo-rail-bg-top), var(--yahoo-rail-bg-mid) 55%, var(--yahoo-rail-bg-bot));
    border-right: 1px solid var(--yahoo-rail-border);
    box-shadow:
        inset 0 1px 0 var(--yahoo-rail-inset),
        inset -1px 0 0 rgba(0, 0, 0, 0.08);
}

#game-screen.leftbar .room-info {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 11px;
    color: var(--yahoo-rail-text);
    letter-spacing: 0.2px;
}

#game-screen.leftbar .utility-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 1;
}

#game-screen.leftbar .utility-actions .nes-btn {
    width: 100%;
    text-align: left;
    padding-left: 10px;
    border-radius: 2px;

    /* Yahoo-ish beveled buttons */
    background: linear-gradient(180deg, var(--yahoo-btn-bg-hover), var(--yahoo-btn-bg));
    color: rgba(0, 0, 0, 0.82);
    border-style: solid;
    border-width: 1px;
    border-color: var(--yahoo-btn-border-mid);
    box-shadow:
        inset 0 1px 0 var(--yahoo-btn-border-light),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset -1px 0 0 rgba(0, 0, 0, 0.10),
        inset 0 -1px 0 var(--yahoo-btn-border-dark);
}

#game-screen.leftbar .utility-actions .nes-btn:hover {
    background: linear-gradient(180deg, #e6f4f5, var(--yahoo-btn-bg-hover));
    border-color: var(--yahoo-btn-border-mid);
}

#game-screen.leftbar .utility-actions .nes-btn:active {
    background: linear-gradient(180deg, var(--yahoo-btn-bg), var(--yahoo-btn-bg-hover));
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transform: translateY(1px);
}

#game-screen.leftbar .utility-actions .nes-btn:focus {
    outline: 1px dotted rgba(0, 0, 0, 0.55);
    outline-offset: 2px;
}

/* Push Settings to the bottom of the left rail */
#game-screen.leftbar .utility-actions .utility-bottom-btn {
    margin-top: auto;
}

/* Remove the top padding reserved for the (old) top overlay bar */
#game-screen.leftbar .game-layout {
    padding-top: 0;
}

/* On tight screens, auto-fallback to the current top bar layout */
/* NOTE: keep this conservative so desktop windows still show the left rail. */
@media (max-width: 900px), (max-height: 700px) {
    #game-screen.leftbar {
        padding-left: 0;
    }
    #game-screen.leftbar .utility-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 28px;
        padding: 6px 10px;
        background: transparent;
        border-right: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        pointer-events: none;
    }
    #game-screen.leftbar .utility-actions {
        flex-direction: row;
        align-items: center;
        width: auto;
        pointer-events: auto;
    }
    #game-screen.leftbar .utility-actions .nes-btn {
        width: auto;
        text-align: center;
        padding-left: var(--spacing-md);
    }
    #game-screen.leftbar .room-info {
        background: rgba(240, 234, 216, 0.70);
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 999px;
        padding: 2px 8px;
        pointer-events: auto;
    }
    #game-screen.leftbar .game-layout {
        padding-top: clamp(20px, 3vh, 36px);
    }
}

/* ===========================================
   UTILITY BAR - Minimal top bar
   =========================================== */
.utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: transparent;
    border: none;
    flex-shrink: 0;
    height: 28px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none; /* let the table/seat interactions through */
}

.utility-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    pointer-events: auto;
}

.room-info {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    pointer-events: auto;
    background: rgba(240, 234, 216, 0.70);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 2px 8px;
}

#game-room-code {
    color: var(--color-text);
}

/* ===========================================
   GAME LAYOUT - Yahoo Classic style
   Table area takes center, chat at bottom
   =========================================== */
.game-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-top: clamp(20px, 3vh, 36px); /* space for overlay utility bar */
}

/* ===========================================
   TABLE AREA - Muted green felt, constrained width
   =========================================== */
.table-area {
    flex: 1;
    display: grid;
    grid-template-areas:
        ". top ."
        "left table right"
        ". bottom .";
    /* Ensure side seats have enough width so cards don't overlap the felt,
       but cap drift on wide screens so seats don't float away from the felt. */
    grid-template-columns:
        clamp(170px, 20vw, 260px)
        minmax(320px, var(--table-size))
        clamp(170px, 20vw, 260px);
    /* Reserve a real "lane" for top/bottom seats.
       The center row becomes the only row the felt is allowed to fill. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(8px, 1.6vh, var(--spacing-md));
    /* Give left/right seats more breathing room from the felt */
    column-gap: var(--spacing-md);
    row-gap: clamp(6px, 1.2vh, var(--spacing-md));
    min-height: 0;
    justify-content: center;
    align-content: stretch;
    max-width: var(--app-max-width);
    margin: 0 auto;
}

/* ===========================================
   SEATS - Player card style
   =========================================== */
.seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.seat-top {
    grid-area: top;
    align-self: end;
}

.seat-left {
    grid-area: left;
    align-self: center;
}

.seat-right {
    grid-area: right;
    align-self: center;
}

.seat-bottom {
    grid-area: bottom;
    align-self: start;
}

/* ===========================================
   PLAYER CARD - Modern card-style player info
   =========================================== */
.player-card {
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-secondary));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* "Mini playing card" container */
    padding: 0;
    overflow: hidden;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative; /* for transient action badges (PASS, etc.) */
    cursor: context-menu; /* avoid I-beam over text; hints right-click */
    user-select: none;
}

.is-hidden {
    /* Keep layout stable; render as a faint placeholder slot */
    opacity: 1;
}

/* Subtle local turn timer (bottom-right) */
.turn-timer-badge {
    position: absolute;
    bottom: 6px;
    right: 8px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    pointer-events: none;
}

/* Transient action badge (e.g., PASS) shown on player cards */
.player-action-badge {
    position: absolute;
    /* New card layout: keep the pill inside the card, centered under header */
    top: 34px;
    left: 50%;
    right: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.95);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    animation: playerActionBadgePop 900ms ease-out forwards;
    z-index: 4;
}

.player-action-badge.pass {
    background-color: rgba(0, 0, 0, 0.22);
}

/* Reactions: slightly brighter so emoji reads at a glance */
.player-action-badge.reaction {
    background-color: rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
    letter-spacing: 0.2px;
    /* Let reactions linger longer and stay compact */
    animation-duration: 3900ms;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Persistent "Thinking..." badge (same vibe as PASS, but not auto-fading) */
.player-action-badge.thinking {
    background-color: rgba(0, 0, 0, 0.22);
    top: 32px; /* a hair higher than PASS */
    transform: translate(-50%, 0);
    animation: none;
    opacity: 1;
}

/* Persistent "Dealing..." badge (dealer busy) */
.player-action-badge.dealing {
    background-color: rgba(170, 136, 68, 0.22);
    border-color: rgba(255, 255, 255, 0.40);
    top: 32px;
    transform: translate(-50%, 0);
    animation: none;
    opacity: 1;
}

/* Queued play acknowledgement (UI-only; brief flash like PASS). */
.player-action-badge.queued {
    background-color: rgba(0, 0, 0, 0.20);
    border-color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.3px;
}

@keyframes playerActionBadgePop {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    70% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

.player-card-header {
    display: grid;
    grid-template-columns: 24px 1fr 24px 24px 22px; /* avatar | name | suit | dealer | reactions */
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.32);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* Small reactions button (discoverability; right-click still works) */
.reaction-trigger-btn {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.38);
    color: rgba(0, 0, 0, 0.70);
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.player-card:hover .reaction-trigger-btn,
.player-card:focus-within .reaction-trigger-btn {
    opacity: 0.95;
}

.reaction-trigger-btn:hover {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(0, 0, 0, 0.22);
}

.reaction-trigger-btn:focus {
    outline: 1px dotted rgba(0, 0, 0, 0.6);
    outline-offset: 1px;
}

/* A touch more air between the felt and the local player's card */
.seat-bottom {
    margin-top: 14px;
}

.player-card .player-avatar {
    font-size: 18px;
    line-height: 1;
    cursor: inherit;
    user-select: none;
    width: 24px;
    text-align: center;
}

.player-card .player-name {
    font-size: 13px;
    color: var(--color-text);
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: inherit;
    user-select: none;
}

.player-card .maker-chip,
.player-card .dealer-chip {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    line-height: 1;
}

.player-card .dealer-chip {
    background-color: var(--color-warning);
    color: rgba(255, 255, 255, 0.96);
    font-size: 12px;
    letter-spacing: 0.2px;
    position: relative; /* for glow pseudo-element */
}

/* Dealer chip intro: subtle pop when dealer is established */
.player-card .dealer-chip.dealer-chip-intro {
    animation: dealerChipIntro 650ms ease-out;
}

@keyframes dealerChipIntro {
    0% {
        transform: scale(0.75);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        opacity: 0.65;
    }
    55% {
        transform: scale(1.12);
        box-shadow: 0 0 14px rgba(170, 136, 68, 0.35);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
        opacity: 1;
    }
}

/* Dealer chip glow: draw attention to the new dealer immediately */
.player-card .dealer-chip::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    box-shadow: 0 0 18px rgba(170, 136, 68, 0.55);
    opacity: 0;
    pointer-events: none;
}

.player-card .dealer-chip.dealer-chip-glow::after {
    animation: dealerChipGlow 1200ms ease-out 2;
}

@keyframes dealerChipGlow {
    0%   { opacity: 0; transform: scale(0.98); }
    18%  { opacity: 1; transform: scale(1.02); }
    55%  { opacity: 0.35; transform: scale(1.01); }
    100% { opacity: 0; transform: scale(1); }
}

.player-card .maker-chip {
    /* Suit-colored chip (red/black) */
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: var(--color-text);
    font-size: 16px;
    text-shadow: none;
}

.player-card .dealer-chip.is-hidden {
    background: rgba(255, 255, 255, 0.25);
    border-style: dashed;
    color: transparent; /* keep circle, hide "D" */
    box-shadow: none;
}

.player-card .maker-chip.is-hidden {
    background: rgba(255, 255, 255, 0.25);
    border-style: dashed;
    color: transparent;
    box-shadow: none;
    text-shadow: none;
}

.player-card .maker-chip.hearts,
.player-card .maker-chip.diamonds {
    color: var(--color-hearts);
}

.player-card .maker-chip.clubs,
.player-card .maker-chip.spades {
    color: var(--color-clubs);
}

.player-card-tricks {
    display: flex;
    gap: 2px;
    padding: 6px 8px 7px;
}

.player-card-tricks .trick-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.player-card-tricks .trick-pip.won {
    background-color: var(--color-primary);
    border-color: var(--color-table-border);
    box-shadow: 0 0 3px rgba(74, 122, 90, 0.5);
}

/* Current turn indicator */
.seat.current-turn .player-card {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 2px rgba(56, 173, 169, 0.25),
        0 0 10px rgba(74, 122, 90, 0.32);
}

/* Brief "hey" pulse when your turn begins */
.seat.turn-pulse .player-card {
    animation: localTurnPulse 650ms ease-out;
}

@keyframes localTurnPulse {
    0% {
        border-color: rgba(56, 173, 169, 0.95);
        box-shadow:
            0 0 0 3px rgba(56, 173, 169, 0.42),
            0 0 18px rgba(74, 122, 90, 0.46);
    }
    100% {
        border-color: var(--color-primary);
        box-shadow:
            0 0 0 2px rgba(56, 173, 169, 0.25),
            0 0 10px rgba(74, 122, 90, 0.32);
    }
}

/* Go-alone minimal seat styling */
.seat.sitting-out .player-card {
    opacity: 0.55;
    filter: grayscale(0.35);
}

.seat.went-alone .player-card {
    border-color: rgba(74, 122, 90, 0.7);
    box-shadow: 0 0 10px rgba(74, 122, 90, 0.22);
}

/* Persistent "ALONE" pill during go-alone hands (similar vibe to PASS badge) */
.seat.went-alone .player-card::after {
    content: "Alone";
    position: absolute;
    /* Keep the pill attached to the card (no floating off-card). */
    top: 34px;     /* just below header row */
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(74, 122, 90, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.95);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
}

/* Maker (called trump) minimal indicator */
/* Maker (called trump) now uses the .maker-chip element in the header */

.seat.current-turn .player-name {
    color: var(--color-primary);
    font-weight: bold;
}

/* Winner animation on player card */
.seat.trick-winner .player-card {
    animation: cardWinnerPulse 0.6s ease-out;
}

@keyframes cardWinnerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); box-shadow: 0 0 12px rgba(74, 122, 90, 0.6); }
    100% { transform: scale(1); }
}

/* ===========================================
   TABLE SURFACE - Green felt, proportional
   =========================================== */
.table-surface {
    grid-area: table;
    background-color: var(--color-table);
    /* Classic green felt (no image) */
    background-image:
        radial-gradient(120% 110% at 50% 45%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
        linear-gradient(145deg, var(--color-table-light), var(--color-table));
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    /* Softer edge + subtle "sunken" inner shadow */
    border: 3px solid rgba(30, 61, 41, 0.55);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden; /* clip felt effects to rounded corners */
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.08),
        inset 0 18px 28px rgba(0, 0, 0, 0.18),
        0 10px 18px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    /*
     * Taller felt without clipping seats:
     * - Fill the grid cell when space allows
     * - Cap growth on very tall screens
     * - Never force overflow when vertical space is tight
     */
    /* The felt must fit inside its grid row on short screens.
       Using explicit max block-size prevents it from bleeding into seat lanes. */
    width: min(100%, var(--table-size));
    height: min(100%, var(--table-size));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
}

/* ===========================================
   TABLE HUD - Top-left container
   =========================================== */
.table-hud {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6; /* above felt + trick placeholders */
    /* +20% scale (crisp: adjust sizes, not transform) */
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.table-trump-display {
    color: var(--color-text);
}

.table-hud-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
}

.table-hud-label {
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.table-hud-value {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.92);
    min-width: 41px;        /* keep value column aligned */
    text-align: right;      /* icon and 2/5 line up */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.table-hud-value #trump-suit {
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.92);
}

/* Remove the generic "tan pill" styling for trump inside the HUD */
.table-hud .trump-display {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    display: block;
    gap: 0;
}

.table-score-hud {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 6;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.table-score-row {
    display: grid;
    /* Fixed label column so avatar/score columns align across rows */
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    column-gap: 8px;
}

.table-score-label {
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 900;
    text-align: left;
}

.table-score-avatars {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end; /* align icons consistently near the score */
    min-width: 0;
    overflow: hidden;
}

.table-score-avatars .team-avatar {
    width: 18px;
    height: 18px;
    font-size: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.table-score-value {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    min-width: 22px;
    text-align: right;
}

.table-score-row-us .table-score-value {
    color: rgba(120, 220, 170, 0.95);
}

/* ===========================================
   TABLE TURN INDICATOR - Prominent, on table
   =========================================== */
.table-turn-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    /* +20% for readability */
    padding: calc(var(--spacing-xs) * 1.2) calc(var(--spacing-md) * 1.2);
    border-radius: calc(var(--radius-md) * 1.2);
    font-size: calc(var(--font-size-sm) * 1.2);
    font-weight: bold;
    white-space: nowrap;
    z-index: 5;
}

.table-turn-indicator:empty {
    display: none;
}

.table-turn-indicator.your-turn {
    background-color: rgba(74, 122, 90, 0.9);
    color: #fff;
}

/* Trick counter inside table HUD */
.table-trick-counter {
    color: var(--color-text);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.95;
}

.table-trick-counter:empty {
    display: inline;
}

/* ===========================================
   TABLE TRUMP INDICATOR - Center under trick stack
   =========================================== */
.table-trump-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px; /* slightly tighter without suit name */
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.table-trump-indicator.hidden {
    display: none;
}

.table-trump-chip {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.table-trump-icon {
    /* Make the suit glyph easier to read (esp. ♣/♠) without changing pill/chip size */
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    /* Subtle edge contrast so black suits read crisply */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

.table-trump-chip.hearts .table-trump-icon,
.table-trump-chip.diamonds .table-trump-icon {
    color: var(--color-hearts);
}

.table-trump-chip.clubs .table-trump-icon,
.table-trump-chip.spades .table-trump-icon {
    color: var(--color-clubs);
}

.table-trump-text {
    /* Match table HUD label typography (Dealer/Trick) */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

/* ===========================================
   TRICK AREA - Center of table
   =========================================== */
.trick-area {
    position: relative;
    width: 220px;
    height: 180px;
}

.trick-card {
    position: absolute;
    width: var(--trick-card-w);
    height: var(--trick-card-h);
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
}

.trick-card:empty {
    background-color: transparent;
    border: 1px dashed rgba(255,255,255,0.2);
}

.trick-card-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.trick-card-left {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.trick-card-right {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.trick-card-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.trick-card.hearts, .trick-card.diamonds {
    color: var(--color-hearts);
}

.trick-card.clubs, .trick-card.spades {
    color: var(--color-clubs);
}

/* ===========================================
   TRICK RAKE ANIMATION
   =========================================== */
/* Make the rake feel like a pile:
   1) cards "gather" toward center with slight rotation/overlap
   2) the pile rakes toward the winner with a bit of drift */

/* Cards have two baseline transforms:
   - Top/Bottom: translateX(-50%)
   - Left/Right: translateY(-50%)
   Keep that baseline in the keyframes to avoid "jumping". */

.trick-card-top.raking,
.trick-card-bottom.raking {
    animation: trickRakeFromX var(--trick-rake-duration) ease-in-out forwards;
}

.trick-card-left.raking,
.trick-card-right.raking {
    animation: trickRakeFromY var(--trick-rake-duration) ease-in-out forwards;
}

/* Variables set per-card by JS:
   --gather-dx/--gather-dy: pull toward center
   --rake-dx/--rake-dy: direction to winner (uses var(--trick-rake-distance))
   --rake-perp-x/--rake-perp-y: slight sideways drift so it doesn't look like a straight line
   --rake-rot / --rake-rot-end: small rotation */

@keyframes trickRakeFromX {
    0% {
        opacity: 1;
        transform: translateX(-50%);
    }
    40% {
        opacity: 1;
        transform:
            translateX(-50%)
            translate(var(--gather-dx, 0px), var(--gather-dy, 0px))
            rotate(var(--rake-rot, 0deg));
    }
    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            translate(
                calc(var(--gather-dx, 0px) + var(--rake-dx, 0px) + var(--rake-perp-x, 0px)),
                calc(var(--gather-dy, 0px) + var(--rake-dy, 0px) + var(--rake-perp-y, 0px))
            )
            scale(0.65)
            rotate(var(--rake-rot-end, var(--rake-rot, 0deg)));
    }
}

@keyframes trickRakeFromY {
    0% {
        opacity: 1;
        transform: translateY(-50%);
    }
    40% {
        opacity: 1;
        transform:
            translateY(-50%)
            translate(var(--gather-dx, 0px), var(--gather-dy, 0px))
            rotate(var(--rake-rot, 0deg));
    }
    100% {
        opacity: 0;
        transform:
            translateY(-50%)
            translate(
                calc(var(--gather-dx, 0px) + var(--rake-dx, 0px) + var(--rake-perp-x, 0px)),
                calc(var(--gather-dy, 0px) + var(--rake-dy, 0px) + var(--rake-perp-y, 0px))
            )
            scale(0.65)
            rotate(var(--rake-rot-end, var(--rake-rot, 0deg)));
    }
}

/* Winner indicator flash */
.seat.trick-winner .player-name {
    animation: winnerFlash 0.8s ease-out;
}

@keyframes winnerFlash {
    0% { color: var(--color-text); }
    40% { color: var(--color-primary); transform: scale(1.15); }
    100% { color: var(--color-text); transform: scale(1); }
}

/* ===========================================
   KITTY AREA - Turn up card
   =========================================== */
.kitty-area {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: 6; /* above felt + trick placeholders */
    pointer-events: none;
}

.kitty-card {
    /* Match primary card sizing */
    width: var(--kitty-card-w);
    height: var(--kitty-card-h);
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
}

.kitty-card.hearts, .kitty-card.diamonds {
    color: var(--color-hearts);
}

.kitty-card.clubs, .kitty-card.spades {
    color: var(--color-clubs);
}

/* Kitty facedown (during bidding round 2) uses the same card back art, but at kitty sizing. */
.kitty-card.card-back {
    width: var(--kitty-card-w);
    height: var(--kitty-card-h);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
}

/* Remove the fallback pip for the kitty card (we'll show the art). */
.kitty-card.card-back::after {
    content: "";
}

.kitty-label {
    font-size: 12px;
    color: var(--color-text-on-table);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* ===========================================
   HAND AREA - Above chat, cards evenly spaced
   =========================================== */
.hand-area {
    /* Keep the hand area lean so the table gets more height */
    /* Slightly tighter to "anchor" to your seat */
    margin-top: 0;
    padding: 8px var(--spacing-md) 10px;
    background-color: var(--color-bg-secondary);
    border-top: var(--border-width) var(--border-style) var(--color-border);
    flex-shrink: 0;
    /* Keep enough height for cards + tray padding without hardcoding for one screen size */
    min-height: calc(var(--card-h) + 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    position: relative; /* for discard prompt */
}

/* Dealer discard prompt: clear, cozy, non-intrusive */
.hand-area.is-discarding {
    box-shadow:
        inset 0 0 0 2px rgba(74, 122, 90, 0.35),
        0 -8px 18px rgba(0, 0, 0, 0.06);
}

.hand-area.is-discarding::before {
    content: "Choose a discard";
    position: absolute;
    /* Lift into the small gap above the tray, and keep it above cards */
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(74, 122, 90, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.3px;
    pointer-events: none;
    z-index: 5;
}

.hand-area.is-discarding .card {
    border-color: rgba(74, 122, 90, 0.65);
}

.hand-area.is-discarding .card:hover {
    border-color: var(--color-primary);
}

/* Hand area now only contains the hand; keep it centered */
.hand-area .hand-cards {
    justify-content: center;
}

.hand-cards {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm); /* Evenly spaced, no overlap */
    min-height: var(--card-h); /* Card height to prevent collapse */
    flex: 0 1 auto;
    width: min(920px, 100%);
    /* Subtle "card tray" plate so the hand feels owned by your seat */
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
    /* Allow "deal reveal" without extra DOM */
    transition: opacity 220ms ease, transform 220ms ease;
    will-change: opacity, transform;
}

/* While the table-centered deal overlay is active, keep the local hand hidden.
   This prevents "instant hand reveal" on refresh and lets us fade it in when ready. */
#game-screen.is-dealing #hand-area .hand-cards {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    pointer-events: none;
    /* Important: hide immediately to avoid a brief "flash" of the hand during shuffle/deal on some browsers.
       The fade-in still happens when the class is removed (base .hand-cards transition applies again). */
    transition-duration: 0ms;
}

/* Discard focus: dim everything except the hand tray */
#game-screen.is-discarding-phase .game-layout {
    position: relative;
}

#game-screen.is-discarding-phase .game-layout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 40; /* sits above table UI, below modals */
    pointer-events: none;
}

/* Keep the discard prompt + hand tray fully bright above the dim layer */
#game-screen.is-discarding-phase #hand-area {
    position: relative;
    z-index: 60;
}

#game-screen.is-discarding-phase #hand-area.is-discarding::before {
    z-index: 70;
}

.sitout-message {
    width: 100%;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding: var(--spacing-sm);
}

.hand-empty-message {
    width: 100%;
    text-align: center;
    color: rgba(58, 48, 32, 0.70);
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.2px;
    padding: 12px 8px;
}

/* ===========================================
   TEAM SCORE PANELS (Hand area left/right)
   =========================================== */
.team-score-panel {
    /* Wider, single-line panels (no vertical stacking) */
    width: clamp(170px, 20vw, 240px);
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-secondary));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-sm);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.team-score-panel-us {
    border-color: rgba(74, 122, 90, 0.45);
}

.team-score-avatars {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.team-avatar {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(138, 122, 90, 0.35);
    font-size: 16px;
    line-height: 1;
}

.team-score-number {
    margin-left: auto;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-text);
    line-height: 1;
}

.team-score-panel-us .team-score-number {
    color: var(--color-primary);
}

.team-score-label {
    display: none;
}

/* ===========================================
   CARDS - Clean, readable, evenly spaced
   =========================================== */
.card {
    width: var(--card-w);
    height: var(--card-h);
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease, border-color 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
}

.card:hover {
    border-color: var(--color-primary);
    transform: translateY(-6px);
    z-index: 1;
}

.card.selected {
    border-color: var(--color-card-selected);
    border-width: 2px;
    transform: translateY(-10px);
    z-index: 2;
}

/* Double-click hint */
.card:active {
    transform: translateY(-2px);
    transition: transform 0.05s ease;
}

.card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.card.disabled:hover {
    transform: none;
    border-color: var(--color-card-border);
}

.card-rank {
    font-size: var(--font-size-md);
    font-weight: bold;
    position: absolute;
    top: 3px;
    left: 5px;
}

.card-suit {
    font-size: var(--font-size-xl);
}

.card-rank-bottom {
    font-size: var(--font-size-md);
    font-weight: bold;
    position: absolute;
    bottom: 3px;
    right: 5px;
    transform: rotate(180deg);
}

.card.hearts, .card.diamonds {
    color: var(--color-hearts);
}

.card.clubs, .card.spades {
    color: var(--color-clubs);
}

/* Card back (for opponent hands) */
.card-back {
    width: 32px;
    height: 45px;
    background-color: #4466aa;
    border: 1px solid #335588;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--card-back-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.card-back::after {
    content: "♠";
    color: #335588;
    font-size: 16px;
}

/* If a card back image is set, hide the fallback pip. */
.card-back.has-image::after {
    content: "";
}

/* Use the real card-back art for the shuffle/deal overlay cards too (once loaded). */
html.has-card-back-image .deal-card {
    /* Use the image as the true base so no blue “frame” bleeds through. */
    background: var(--card-back-image) center / cover no-repeat;
}

html.has-card-back-image .deal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    /* Subtle glossy vignette like the old blue gradient had */
    background: radial-gradient(120% 100% at 50% 40%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
}

/* ===========================================
   ACTION BAR - Clear, prominent for actions
   =========================================== */
.action-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    min-height: 50px;
    flex-shrink: 0;
}

.action-btn {
    min-width: 100px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: bold;
}

#action-order-up {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-table-border);
}

#action-order-up:hover {
    background-color: var(--color-primary-hover);
}

/* Hide Play Card button - double-click cards instead */
#action-play-card {
    display: none !important;
}

/* Trump selection */
.trump-selection {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trump-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.trump-btn {
    min-width: 36px;
    font-size: var(--font-size-lg);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.trump-btn[data-suit="hearts"],
.trump-btn[data-suit="diamonds"] {
    color: var(--color-hearts);
}

.trump-btn[data-suit="clubs"],
.trump-btn[data-suit="spades"] {
    color: var(--color-clubs);
}

.trump-btn.disabled-suit {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===========================================
   CHAT PANEL - Bottom of screen, social focus
   Yahoo Classic: Chat is central to experience
   =========================================== */
.chat-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--color-chat-bg);
    border: 1px solid var(--color-chat-border);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    /* Centered container (not full-width) */
    width: min(var(--app-max-width), calc(100% - 24px));
    margin: 10px auto 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    /* Responsive height: larger on tall screens so chat isn't cramped */
    height: clamp(150px, 18vh, 260px);
}

.chat-panel.collapsed {
    height: auto;
}
.chat-panel.collapsed .chat-content,
.chat-panel.collapsed .chat-input-area {
    display: none;
}
.chat-panel.collapsed .chat-header {
    border-bottom: none;
}

/* On tall desktop displays (e.g. 1080p), give chat more room and avoid oversized felt */
@media (min-height: 900px) and (min-width: 1100px) {
    .chat-panel {
        height: clamp(190px, 22vh, 320px);
    }
    /* Keep the felt square; avoid tall-screen stretching */
}

/* Short-height laptops: chat should yield first so the table stack stays readable */
@media (max-height: 820px) {
    .chat-panel:not(.collapsed) {
        height: clamp(120px, 14vh, 190px);
    }
}

/* ===========================================
   SMALL LAPTOP / TIGHT HEIGHT (e.g. 13")
   Keep the same layout, but scale down the "table" stack.
   =========================================== */
@media (max-width: 980px), (max-height: 820px) {
    /* Allow scroll for the GAME screen only on tight viewports (avoid lobby scrolling). */
    #game-screen {
        overflow-y: auto;
        overflow-x: hidden;
    }
    .game-layout {
        overflow: visible;
    }

    /* Give the overlay utility bar more breathing room on small screens
       so the north seat doesn't get clipped behind it. */
    .game-layout {
        padding-top: 36px;
    }

    .table-area {
        /* Keep side seats from colliding with felt on tight viewports */
        grid-template-columns: minmax(160px, 1fr) minmax(240px, 440px) minmax(160px, 1fr);
        grid-template-rows: auto 1fr auto;
        align-content: stretch;
        padding: 10px;
        row-gap: 8px;
        column-gap: 14px; /* keep left/right seats off the felt */
        max-width: 760px;
    }

    .table-surface {
        /* Shrink the felt on small screens (~25%) to prevent top clipping */
        max-width: 360px;
        justify-self: center;
        align-self: center;
    }
    .table-surface {
        /* Tighten internal vertical rhythm so HUD/trump/score don't collide */
        gap: 6px;
    }

    /* Pull the bottom seat closer to the felt */
    .seat-bottom {
        margin-top: 6px;
    }

    .table-hud {
        top: 8px;
        left: 8px;
        padding: 5px 7px;
        gap: 3px;
        border-radius: 10px;
    }
    .table-hud-label,
    .table-hud-value {
        font-size: 10px;
    }
    .table-hud-row {
        column-gap: 8px;
    }
    .table-hud-value {
        min-width: 30px;
    }
    .table-hud-value #trump-suit {
        font-size: 11px;
    }

    /* Keep dealer name from expanding the HUD too wide on small screens */
    #table-dealer-name {
        display: inline-block;
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .table-turn-indicator {
        top: 8px;
        padding: 3px 7px;
        border-radius: 10px;
        font-size: 12px;
        /* Prevent the center pill from colliding with the left HUD on narrow felt */
        max-width: 176px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .table-score-hud {
        right: 8px;
        bottom: 8px;
        padding: 6px 8px;
        gap: 4px;
        min-width: 112px;
        border-radius: 10px;
    }
    .table-score-row {
        grid-template-columns: 38px 1fr auto;
        column-gap: 6px;
    }
    .table-score-label {
        font-size: 10px;
    }
    .table-score-avatars .team-avatar {
        width: 16px;
        height: 16px;
        font-size: 11px;
    }
    .table-score-value {
        font-size: 20px;
        min-width: 20px;
    }

    .table-trump-indicator {
        gap: 6px;
        padding: 4px 8px;
    }
    .table-trump-chip {
        width: 22px;
        height: 22px;
    }
    .table-trump-icon {
        font-size: 17px;
    }
    .table-trump-text {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .player-card {
        min-width: 160px;
        padding: 0;
    }
    .player-card .player-avatar {
        font-size: 16px;
    }
    .player-card .player-name {
        font-size: 12px;
        max-width: none;
    }
    .player-card-header {
        grid-template-columns: 22px 1fr 22px 22px 20px;
        padding: 5px 7px;
    }
    .reaction-trigger-btn {
        width: 20px;
        height: 20px;
        border-radius: 7px;
        font-size: 14px;
    }
    .player-card-tricks .trick-pip {
        width: 9px;
        height: 9px;
    }

    .trick-area {
        width: 180px;
        height: 145px;
    }
    .trick-card { font-size: 20px; }
    .card { font-size: 20px; }
    .hand-area {
        min-height: 102px;
        padding: 8px 10px;
    }
    .hand-cards {
        min-height: 84px;
    }

    .kitty-card { font-size: 20px; }
    .kitty-label {
        font-size: 11px;
    }

    /* On tight screens, chat should yield first (keep scroll inside chat). */
    .chat-panel:not(.collapsed) {
        height: clamp(120px, 14vh, 190px);
    }

    /* Also reclaim space when chat is collapsed (header-only state). */
    .chat-panel {
        margin: 6px auto 8px;
    }
    .chat-header {
        padding: 5px 10px;
    }
    .chat-toggle-btn {
        height: 22px;
        min-width: 26px;
        padding: 0 7px;
        border-radius: 7px;
        font-size: 13px;
    }
}

/* Lobby: prevent scroll on common laptop heights by tightening vertical rhythm. */
@media (max-height: 820px) {
    .lobby-container {
        padding: 14px 12px;
        gap: 14px;
        overflow: hidden;
    }
    .lobby-card {
        padding: 16px 16px 12px;
    }
    .lobby-header {
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .game-logo {
        width: clamp(160px, 38vw, 340px);
        max-height: 22vh;
    }
    .lobby-grid {
        gap: 12px;
    }
    .lobby-section {
        padding: 12px 12px 14px;
    }
}

/* Ultra-short screens: allow lobby to scroll rather than clipping controls. */
@media (max-height: 640px) {
    .lobby-container {
        overflow: auto;
    }
}

/* Extra-tight height (very small laptop / split-screen) */
@media (max-height: 740px) {
    :root {
        /* Slightly reduce base sizes without transform scaling */
        --table-size: clamp(280px, 54vmin, 560px);
        --card-w: clamp(52px, 5.0vmin, 64px);
        --trick-card-w: clamp(48px, 4.4vmin, 58px);
        --kitty-card-w: clamp(52px, 4.8vmin, 64px);
    }
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--spacing-md);
    background-color: var(--color-bg-light);
    border-bottom: var(--border-width) var(--border-style) var(--color-border-light);
    justify-content: space-between;
}

.chat-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-popout-btn {
    font-size: 12px;
    font-weight: 900;
}

/* Chat modal sizing (override base .modal-content centering) */
.modal-content.chat-modal-content {
    width: min(720px, 92vw);
    /* Fixed-ish height with viewport safety */
    height: min(640px, 78vh);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 10px 12px;
}

/* Help modal: readable, classic "rules panel" vibe */
.modal-content.help-modal-content {
    width: min(760px, 92vw);
    height: min(680px, 82vh);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 10px 12px;
}

.help-modal-body {
    margin-top: 10px;
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    overflow: auto;
    padding: 12px 12px 14px;
}

.help-section + .help-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.help-section-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--color-text);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.help-paragraph {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
}

.help-paragraph code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    padding: 1px 6px;
}

.help-list {
    margin-top: 8px;
    padding-left: 18px;
    color: var(--color-text-light);
    font-size: 12px;
    line-height: 1.5;
}

.help-list-tight {
    margin-top: 6px;
}

.help-list li + li {
    margin-top: 6px;
}

.help-callout {
    margin-top: 10px;
    padding: 10px 10px 10px;
    border-radius: 12px;
    background: rgba(240, 234, 216, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.help-callout-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: rgba(58, 48, 32, 0.92);
    margin-bottom: 6px;
}

.chat-modal-body {
    margin-top: 10px;
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* Force left alignment inside the scrolling body (some modal styles center text) */
    text-align: left !important;
}

.chat-modal-messages {
    height: 100%;
    padding: 10px 12px;
    /* Ensure messages use the full modal width */
    align-items: stretch;
    text-align: left !important;
}

/* In the popout modal, make each message row feel full-width */
.chat-modal-messages .chat-message {
    width: 100%;
    text-align: left !important;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.chat-title {
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-title-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.9;
}

.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(74, 122, 90, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.chat-unread-badge.hidden {
    display: none;
}

.chat-toggle-btn {
    height: 24px;
    min-width: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.chat-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.75);
}

.chat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* allow scroll child to size correctly in flex column */
}

.chat-messages {
    flex: 1;
    min-height: 0; /* critical: allow this box to become scroll container */
    overflow-y: auto;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-sm);
}

.chat-message {
    line-height: 1.3;
    /* Adopt the "system" message layout for all messages */
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid rgba(0, 0, 0, 0.18);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--color-text);
}

/* User/system accents */
.chat-message.user {
    background: rgba(74, 122, 90, 0.08);
    border-left-color: rgba(74, 122, 90, 0.45);
}
.chat-message.system {
    background: rgba(0, 0, 0, 0.04);
    border-left-color: rgba(0, 0, 0, 0.18);
    color: var(--color-chat-system);
}

.chat-ts {
    display: inline-block;
    margin-right: 8px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    vertical-align: baseline;
}

/* Sender badge (replaces "SYSTEM" tag + sender:) */
.chat-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.chat-tag-system {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.72);
}

.chat-tag-user {
    background: rgba(74, 122, 90, 0.18);
    color: rgba(32, 64, 46, 0.92);
    text-transform: none; /* names shouldn't be uppercased */
    letter-spacing: 0.2px;
}

/* Suit coloring (used in history + chat) */
.suit {
    font-weight: 900;
}
.suit.hearts,
.suit.diamonds {
    color: var(--color-hearts);
}
.suit.clubs,
.suit.spades {
    color: var(--color-clubs);
}

.chat-input-area {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: var(--border-width) var(--border-style) var(--color-border-light);
    background-color: var(--color-bg-light);
}

.chat-history .history-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: var(--color-text);
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-history .history-line .ts {
    color: var(--color-text-muted);
    margin-right: 8px;
}

/* ===========================================
   HISTORY MODAL - Professional log viewer
   =========================================== */
.history-modal-content {
    /* Keep the log viewport consistent, but reduce outer chrome/empty space */
    width: fit-content;
    max-width: 92vw;
    max-height: min(76vh, 680px);
    display: flex;
    flex-direction: column;
    align-items: stretch; /* override base .modal-content centering */
    text-align: left;     /* override base .modal-content centering */
    padding: 10px 12px;
}

.history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.history-modal-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.history-modal-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.history-modal-subtitle {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    width: 100%;
}

.history-log {
    margin-top: 10px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    width: min(640px, 86vw);
    height: min(520px, 62vh);
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
}

.history-log .history-line {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 3px 6px;
    border-radius: 6px;
    opacity: 1;
}

.history-log .history-line:nth-child(even) {
    background: rgba(56, 173, 169, 0.06);
}

.history-log .history-line:hover {
    background: rgba(56, 173, 169, 0.12);
}

.history-log .history-line .ts {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.history-log .history-line .text {
    color: var(--color-text);
    white-space: pre-wrap; /* allow wrapping on narrow screens */
    overflow-wrap: anywhere;
}

/* Card token chips (e.g. "Q♣") inside history */
.history-log .card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px 2px;
    margin: 0 1px;
    border-radius: 4px;
    background: rgba(248, 244, 232, 0.95); /* card bg */
    border: 1px solid rgba(153, 136, 102, 0.65); /* card border */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-weight: 900;
    letter-spacing: 0.1px;
}

.history-log .card-chip-rank {
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.85);
}

.history-log .card-chip.hearts .card-chip-rank,
.history-log .card-chip.diamonds .card-chip-rank {
    color: var(--color-hearts);
}

.history-log .card-chip.clubs .card-chip-rank,
.history-log .card-chip.spades .card-chip-rank {
    color: var(--color-clubs);
}

.history-log .card-chip .suit {
    font-size: 13px;
    line-height: 1;
}

/* Suit coloring inside history lines */
.history-log .history-line .suit {
    font-weight: 800;
}
.history-log .history-line .suit.hearts,
.history-log .history-line .suit.diamonds {
    color: var(--color-hearts);
}
.history-log .history-line .suit.clubs,
.history-log .history-line .suit.spades {
    color: var(--color-clubs);
}

/* ===========================================
   LAST TRICK / LAST HAND MODALS (Yahoo-ish)
   IMPORTANT: use higher specificity than base `.modal-content` so we don't get
   forced centering (which creates huge side gutters).
   =========================================== */
.modal-content.last-trick-modal-content,
.modal-content.last-hand-modal-content {
    /* Give the recap views more room, especially on laptops */
    width: min(980px, 96vw);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 10px 12px;
    box-sizing: border-box;
}

.last-trick-body,
.last-hand-body {
    margin-top: 10px;
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    overflow: auto;
    min-height: 140px;
    width: 100%;
    box-sizing: border-box;
}

/* Last Hand: use space better (cards-first), and allow multi-column layout when there's room */
.last-hand-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    align-content: start;
}

.last-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 6px 2px;
}

.trick-grid {
    display: grid;
    grid-template-areas:
        ". top ."
        "left . right"
        ". bottom .";
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 16px;
    justify-items: center;
    align-items: center;
    padding: 4px 2px;
    width: 100%;
}

.trick-grid-small {
    gap: 8px 12px;
}

/* Trick mini layout: compact 2×2 arrangement so it doesn't become a tall skinny column */
.trick-grid.trick-grid-small {
    grid-template-areas:
        "top top"
        "left right"
        "bottom bottom";
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 2px;
}

.trick-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.trick-grid-small .trick-slot {
    min-width: 0;
}

.trick-slot-top { grid-area: top; }
.trick-slot-left { grid-area: left; }
.trick-slot-right { grid-area: right; }
.trick-slot-bottom { grid-area: bottom; }

.trick-slot-name {
    font-size: 11px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.65);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trick-slot.is-winner .trick-slot-name {
    color: rgba(32, 64, 46, 0.92);
}

.trick-slot.is-winner .mini-card {
    outline: 2px solid rgba(74, 122, 90, 0.55);
    outline-offset: 2px;
}

.mini-card {
    width: clamp(42px, 5.2vmin, 54px);
    height: calc(clamp(42px, 5.2vmin, 54px) * 1.42);
    background: var(--color-card-bg);
    border: 1px solid rgba(153, 136, 102, 0.9);
    border-radius: 6px;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.mini-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.35);
    font-weight: 900;
}

.mini-card-rank {
    position: absolute;
    top: 4px;
    left: 6px;
    font-weight: 900;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.82);
}

.mini-card-suit {
    position: absolute;
    top: 18px;
    left: 7px;
    font-size: 14px;
}

.mini-card-rank-bottom {
    position: absolute;
    bottom: 4px;
    right: 6px;
    transform: rotate(180deg);
    font-weight: 900;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.82);
}

.mini-card.hearts .mini-card-rank,
.mini-card.hearts .mini-card-rank-bottom,
.mini-card.diamonds .mini-card-rank,
.mini-card.diamonds .mini-card-rank-bottom {
    color: var(--color-hearts);
}
.mini-card.clubs .mini-card-rank,
.mini-card.clubs .mini-card-rank-bottom,
.mini-card.spades .mini-card-rank,
.mini-card.spades .mini-card-rank-bottom {
    color: var(--color-clubs);
}

.hand-trick-row {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px 10px 12px;
    background: rgba(248, 244, 232, 0.55);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.hand-trick-row:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 10px;
    margin-top: 0;
}

.hand-trick-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.hand-trick-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: rgba(0, 0, 0, 0.78);
}

.hand-trick-winner {
    font-size: 11px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.62);
}

/* On tight heights, keep the recap usable without making cards microscopic */
@media (max-width: 980px), (max-height: 820px) {
    .modal-content.last-trick-modal-content,
    .modal-content.last-hand-modal-content {
        width: min(760px, 94vw);
    }
    .last-hand-body {
        grid-template-columns: 1fr;
    }
}

#chat-input {
    flex: 1;
}

#chat-send-btn {
    min-width: 60px;
}

/* ===========================================
   GAME INFO - Minimal, top right
   =========================================== */
.game-info {
    position: absolute;
    top: 38px;
    right: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 10;
}

.trump-display {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* (Legacy) icon-only trump rules used before the HUD existed */
.table-surface > .trump-display.table-trump-display {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: var(--color-text-on-table);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Table trump icon size (+35%) */
.table-surface > .trump-display.table-trump-display #trump-suit {
    font-size: calc(28px * 1.35);
}

#trump-suit {
    font-size: 28px;
    line-height: 1;
}

/* (Trump now renders in the centered indicator; legacy #trump-suit removed.) */

.turn-indicator {
    display: none; /* Hidden - using table indicator instead */
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */
.toast-container {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
}

/* ===========================================
   BETWEEN HANDS OVERLAY (shuffle / deal beat)
   Cosmetic only — gives players a mental reset.
   =========================================== */
.deal-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 20; /* above trick area + HUDs; below modals */
    pointer-events: none;
    background: rgba(0, 0, 0, 0.10);
}

.deal-overlay.hidden {
    display: none;
}

.deal-overlay-panel {
    width: min(360px, 86%);
    padding: 12px 14px 12px;
    border-radius: 14px;
    background: rgba(240, 234, 216, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.22);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    text-align: center;
}

.deal-overlay-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--color-text);
}

.deal-overlay-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.deal-overlay-cards {
    margin-top: 12px;
    height: 56px;
    position: relative;
}

.deal-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background:
        radial-gradient(120% 100% at 50% 40%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
        linear-gradient(145deg, rgba(68, 102, 170, 0.96), rgba(51, 85, 136, 0.96));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    opacity: 0.95;
}

/* Next hand teaser: calm, minimal motion (fills the post-summary gap). */
.deal-overlay.stage-next .deal-overlay-panel {
    animation: dealNextPulse 1400ms ease-in-out infinite;
}

.deal-overlay.stage-next .deal-card {
    animation: dealNextCards 1400ms ease-in-out infinite;
    opacity: 0.85;
}

.deal-overlay.stage-next .deal-card:nth-child(2) { animation-delay: 80ms; }
.deal-overlay.stage-next .deal-card:nth-child(3) { animation-delay: 160ms; }
.deal-overlay.stage-next .deal-card:nth-child(4) { animation-delay: 240ms; }
.deal-overlay.stage-next .deal-card:nth-child(5) { animation-delay: 320ms; }

@keyframes dealNextPulse {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

@keyframes dealNextCards {
    0%   { transform: translate(-50%, -50%) rotate(-1deg); }
    50%  { transform: translate(-50%, calc(-50% - 1px)) rotate(1deg); }
    100% { transform: translate(-50%, -50%) rotate(-1deg); }
}

/* Shuffle: small jitter, feels cozy not flashy */
.deal-overlay.stage-shuffle .deal-card {
    animation: dealShuffle 900ms ease-in-out infinite;
}
.deal-overlay.stage-shuffle .deal-card:nth-child(2) { animation-delay: 70ms; }
.deal-overlay.stage-shuffle .deal-card:nth-child(3) { animation-delay: 140ms; }
.deal-overlay.stage-shuffle .deal-card:nth-child(4) { animation-delay: 210ms; }
.deal-overlay.stage-shuffle .deal-card:nth-child(5) { animation-delay: 280ms; }

@keyframes dealShuffle {
    0%   { transform: translate(-50%, -50%) rotate(-2deg) translateY(0); }
    35%  { transform: translate(-50%, -52%) rotate(2deg) translateY(-1px); }
    70%  { transform: translate(-50%, -49%) rotate(-1deg) translateY(1px); }
    100% { transform: translate(-50%, -50%) rotate(-2deg) translateY(0); }
}

/* Game start: "cut for deal" moment — highlight a single jack (purely cosmetic). */
.deal-overlay.stage-cut .deal-card {
    animation: none;
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.96);
    filter: saturate(0.85);
}

.deal-overlay.stage-cut .deal-card:nth-child(3) {
    opacity: 0.98;
    filter: none;
    /* Card face */
    background:
        radial-gradient(120% 100% at 50% 40%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 242, 242, 0.98));
    border-color: rgba(0, 0, 0, 0.28);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.22),
        0 0 0 2px rgba(74, 122, 90, 0.22);
    animation: dealCutPop 1100ms ease-in-out infinite;
}

.deal-overlay.stage-cut .deal-card:nth-child(3)::after {
    content: "J♣";
    position: absolute;
    top: 6px;
    left: 7px;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: 0.2px;
    color: rgba(44, 44, 44, 0.92);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

@keyframes dealCutPop {
    0%   { transform: translate(-50%, -50%) scale(0.98) rotate(-1deg); }
    35%  { transform: translate(-50%, -52%) scale(1.04) rotate(1deg); }
    70%  { transform: translate(-50%, -50%) scale(1.01) rotate(-0.5deg); }
    100% { transform: translate(-50%, -50%) scale(0.98) rotate(-1deg); }
}

/* Deal: fan out + drift, then settle */
.deal-overlay.stage-deal .deal-card {
    animation: dealFan 950ms ease-out infinite;
}
.deal-overlay.stage-deal .deal-card:nth-child(1) { --dx: -54px; --dy: 6px;  animation-delay: 0ms; }
.deal-overlay.stage-deal .deal-card:nth-child(2) { --dx: -26px; --dy: -6px; animation-delay: 90ms; }
.deal-overlay.stage-deal .deal-card:nth-child(3) { --dx: 0px;  --dy: 8px;  animation-delay: 180ms; }
.deal-overlay.stage-deal .deal-card:nth-child(4) { --dx: 26px; --dy: -6px; animation-delay: 270ms; }
.deal-overlay.stage-deal .deal-card:nth-child(5) { --dx: 54px; --dy: 6px;  animation-delay: 360ms; }

@keyframes dealFan {
    0%   { transform: translate(-50%, -50%) scale(0.98); opacity: 0.0; }
    18%  { opacity: 0.95; }
    55%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--dx) * 0.06)); }
    100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.0; }
}

/* Ready: subtle fade so it doesn't feel like a hard cut */
.deal-overlay.stage-ready .deal-overlay-panel {
    animation: dealReadyPulse 900ms ease-in-out infinite;
}
@keyframes dealReadyPulse {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* ===========================================
   PLAYER REACTIONS MENU - right-click on seats
   =========================================== */
.reaction-menu {
    position: fixed;
    z-index: 1200;
    min-width: 180px;
    max-width: 240px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(240, 234, 216, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.20);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    color: var(--color-text);
    user-select: none;
}

.reaction-menu.hidden {
    display: none;
}

.reaction-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    margin-bottom: 6px;
}

.reaction-menu-avatar {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

.reaction-menu-name {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reaction-menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reaction-menu-item {
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.reaction-menu-item:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.18);
}

.reaction-menu-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.toast {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
}

.toast.toast-exit {
    animation: toastSlideOut 0.3s ease-in forwards;
}

.toast-title {
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.toast-hand {
    width: min(520px, calc(100vw - 24px));
    padding: 14px 16px 12px;
    text-align: left;
    border-radius: 12px;
}

.toast-hand-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.toast-hand-title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--color-text);
}

.toast-hand-big {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--color-text);
}

.toast.toast-win .toast-hand-big {
    color: var(--color-primary);
}
.toast.toast-lose .toast-hand-big {
    color: var(--color-error);
}

.toast-hand-headline {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(58, 48, 32, 0.92);
}

.toast-hand-reason {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-light);
}

.toast-hand-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.toast-hand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: rgba(58, 48, 32, 0.88);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.toast-hand-score {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(58, 48, 32, 0.82);
}

.toast.toast-win {
    border-color: var(--color-primary);
}

.toast.toast-win .toast-title {
    color: var(--color-primary);
}

.toast.toast-lose {
    border-color: var(--color-error);
}

.toast.toast-lose .toast-title {
    color: var(--color-error);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ===========================================
   MODAL - Trump Selection (positioned to show cards)
   =========================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 45, 35, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    z-index: 100;
    pointer-events: none;
}

.modal-content {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    min-width: 260px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

/* Bidding modals: keep focus, but don't "black out" the player's hand. */
#bid1-modal.modal,
#trump-modal.modal {
    /* Softer overall + a subtle "spotlight" near the bottom where the hand lives */
    background:
        radial-gradient(ellipse 70% 42% at 50% 86%,
            rgba(50, 45, 35, 0.06) 0%,
            rgba(50, 45, 35, 0.22) 48%,
            rgba(50, 45, 35, 0.34) 100%);
}

/* Hand summary should feel like a centered "scorecard", not a generic prompt. */
#hand-summary-modal {
    align-items: center;
    padding-top: 0;
}

.bid1-modal-content {
    min-width: 340px;
    padding: 16px 16px 14px;
    gap: 12px;
}

.bid1-turned-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
}

.bid1-card {
    width: 104px;
    height: 148px;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 6px;
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.bid1-card-rank {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 18px;
    font-weight: 900;
}

.bid1-card-suit {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
}

.bid1-card-rank-bottom {
    position: absolute;
    bottom: 8px;
    right: 10px;
    /* Override base rank positioning to avoid stretching/centering */
    top: auto;
    left: auto;
    transform: rotate(180deg);
    font-size: 18px;
    font-weight: 900;
}

.bid1-turned-preview.hearts,
.bid1-turned-preview.diamonds {
    color: var(--color-hearts);
}
.bid1-turned-preview.clubs,
.bid1-turned-preview.spades {
    color: var(--color-clubs);
}

.hand-summary-modal-content {
    min-width: 320px;
    /* Match the other action modals: centered, stacked, clean */
    width: min(380px, 92vw);
    padding: 16px 16px 14px;
    gap: 10px;
    align-items: center;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hand-summary-modal-content::before {
    /* Legacy divider from the old scorecard layout */
    display: none;
    content: "";
}

/* Tight-height laptops: keep it compact and centered */
@media (max-height: 820px) {
    .hand-summary-modal-content {
        width: min(360px, 94vw);
    }
}

.hand-summary-modal-content .modal-title {
    margin-bottom: 2px;
}

#hand-summary-points {
    align-self: center;
}

#hand-summary-headline {
    font-size: 14px;
    font-weight: 900;
    color: rgba(58, 48, 32, 0.92);
}

.hand-summary-reason {
    margin-top: 0;
}

.hand-summary-meta {
    justify-content: center;
    margin-top: 2px;
}

.hand-summary-score {
    margin-top: 4px;
}

.hand-summary-points {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--color-text);
    margin-top: 2px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.10);
    min-width: 96px;
}

.hand-summary-modal-content.hand-summary-win {
    border-color: var(--color-primary);
}

.hand-summary-modal-content.hand-summary-lose {
    border-color: var(--color-error);
}

.hand-summary-modal-content.hand-summary-win .hand-summary-points {
    color: var(--color-primary);
}

.hand-summary-modal-content.hand-summary-lose .hand-summary-points {
    color: var(--color-error);
}

.hand-summary-reason {
    font-size: 12px;
    color: var(--color-text-light);
    max-width: 46ch;
}

.hand-summary-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Short-height screens: keep it compact (do not widen). */
@media (max-height: 740px) {
    .hand-summary-modal-content {
        width: min(340px, 94vw);
    }
}

.hand-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: rgba(58, 48, 32, 0.88);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.hand-summary-chip#hand-summary-trump {
    font-variant-numeric: tabular-nums;
}

.hand-summary-chip:empty {
    display: none;
}

.hand-summary-score {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(58, 48, 32, 0.82);
}

@media (max-width: 460px) {
    .hand-summary-modal-content {
        min-width: 0;
        width: min(340px, 94vw);
        padding: 14px 14px 12px;
    }
}

.bid1-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.bid1-actions .nes-btn {
    min-width: 120px;
}

/* Confirm modal (Leave game, etc.) */
.modal-content.confirm-modal-content {
    width: min(360px, 92vw);
    padding: 16px 16px 14px;
}

.confirm-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: 6px;
}

.confirm-actions .nes-btn {
    min-width: 120px;
}

/* Settings modal */
.modal-content.settings-modal-content {
    width: min(520px, 94vw);
    max-height: min(78vh, 720px);
    align-items: stretch;
    text-align: left;
    padding: 10px 12px;
}

.settings-modal-body {
    margin-top: 10px;
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    padding: 12px 12px;
}

.settings-toggle {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.78);
}

.settings-help {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.25;
}

/* Lift the bidding modals upward so they don't cover the hand tray (all screen sizes). */
/* "Order up" */
#bid1-modal .modal-content,
/* "Call trump" */
#trump-modal .modal-content {
    transform: translateY(-12vh);
}

.modal-title {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    font-weight: bold;
    margin: 0;
}

.modal-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.trump-modal-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-xs);
    width: 100%;
}

.trump-modal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.trump-modal-btn:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-secondary);
}

.trump-modal-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.trump-modal-btn:disabled:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg);
}

.trump-modal-suit {
    font-size: 26px;
    line-height: 1;
}

.trump-modal-suit.hearts,
.trump-modal-suit.diamonds {
    color: var(--color-hearts);
}

.trump-modal-suit.clubs,
.trump-modal-suit.spades {
    color: var(--color-clubs);
}

/* Inline suit icon (e.g. "Order Up ♥") */
.inline-suit {
    font-weight: 900;
}

/* Slightly larger suit icon inside Order Up button */
#bid1-order-up .inline-suit {
    font-size: 1.2em; /* +20% */
    line-height: 1;
    vertical-align: -1px;
}
.inline-suit.hearts,
.inline-suit.diamonds {
    color: var(--color-hearts);
}
.inline-suit.clubs,
.inline-suit.spades {
    color: var(--color-clubs);
}

.trump-modal-label {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.modal-pass-btn {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
}

.alone-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    user-select: none;
}

.alone-toggle input {
    transform: translateY(1px);
}

/* ===========================================
   OVERLAY (Game Over, etc.)
   =========================================== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(100, 90, 70, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.overlay-content {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    text-align: center;
}

#game-over-title {
    font-size: var(--font-size-xl);
    color: var(--color-text);
    font-weight: normal;
}

#game-over-message {
    color: var(--color-text-light);
}

/* ===========================================
   SCROLLBAR - Subtle
   =========================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-dark);
}