/* Design tokens — spacing / radii / font sizes. Theme-independent (don't change between light/dark). Use these in new CSS instead of hard-coded px values so the visual system stays consistent. Existing rules throughout this file haven't been backported yet; convert opportunistically. */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 14px; --radius-pill: 999px; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --z-base: 1; --z-overlay: 100; --z-popover: 200; --z-toast: 300; --z-flip: 9999; } /* Light tokens are the default; dark tokens activate when JS sets data-theme="dark" on . The theme JS resolves 'auto' → matches OS preference at load + re-resolves on prefers-color-scheme change, so the actual data-theme attribute is always exactly "light" or "dark". */ :root { --bg: #f5f3ef; --fg: #1a1a1a; --accent: #c54a3a; --muted: #5a5a5a; --border: rgba(0,0,0,0.18); --hover: rgba(0,0,0,0.06); --selected: rgba(197,74,58,0.12); /* Card-table felt — a touch darker than --bg so cards stand out on it, with a faintly warmer hue suggesting parchment / aged felt. */ --felt: #ede8dc; --felt-edge: rgba(80,55,30,0.10); --felt-stitch: rgba(80,55,30,0.22); --card-shadow: 0 1px 2px rgba(60,40,20,0.12), 0 2px 6px rgba(60,40,20,0.05); /* Glassmorphism tokens (light). The bg is intentionally low-opacity (~38%) so the card-rain + cycle gradient + page behind reads THROUGH each panel as soft texture; the backdrop-filter blur + saturate compensates for the see-through and keeps text legible. The border + top-edge highlight + outer shadow give the panel the "lifted off the page" presence Apple uses. Tuned per-theme so both halves of the toggle feel like the same material. */ --glass-bg: rgba(245, 243, 239, 0.38); --glass-border: rgba(255, 255, 255, 0.55); --glass-highlight: rgba(255, 255, 255, 0.65); --glass-shadow: 0 8px 32px rgba(20, 16, 12, 0.10), 0 2px 6px rgba(20, 16, 12, 0.06); --glass-blur: blur(18px) saturate(1.6); color-scheme: light; } :root[data-theme="dark"] { --bg: #0d0d0d; --fg: #e8e6e2; --accent: #f0a060; --muted: #888; --border: rgba(255,255,255,0.18); --hover: rgba(255,255,255,0.06); --selected: rgba(240,160,96,0.18); /* Dark-mode felt: slightly LIGHTER than --bg so cards (which sit on --bg) read as recessed wells against a faintly illuminated felt. */ --felt: #181614; --felt-edge: rgba(255,220,170,0.05); --felt-stitch: rgba(255,220,170,0.10); --card-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.35); --glass-bg: rgba(18, 18, 22, 0.42); --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.16); --glass-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --glass-blur: blur(18px) saturate(1.7); color-scheme: dark; } /* Site-wide glass utility. Applied to .mode-card / .identity-card / .popover / etc. via class, OR via the variables directly when a panel needs custom border-radius / padding while keeping the material the same. Pairing strategy: - background: --glass-bg (low-opacity tint) - backdrop-filter: --glass-blur (blur + saturate) - border: 1px solid --glass-border (the "edge" of glass) - box-shadow: outer + inset top (lift + light-on-rim) */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* prevent transform-based card-throw from inducing horizontal scroll */ } main { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 4rem; position: relative; z-index: 1; overflow-x: clip; } /* (starfield removed — unreliable on mobile, replaced by card rain alone) */ /* ---- Unified nav (reusable header for any app under jakegonsalves.com) ---- */ .unified-nav { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.8rem; margin: -2rem -1rem 1.5rem; /* extends to viewport edges within `main` */ border-bottom: 1px solid var(--border); font-size: 0.85rem; background: var(--hover); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .unified-nav a, .unified-nav button { background: none; border: 0; padding: 0.2rem 0.4rem; color: var(--muted); text-decoration: none; font-family: inherit; font-size: inherit; cursor: pointer; transition: color 0.15s; } .unified-nav a:hover, .unified-nav button:hover { color: var(--fg); } .unified-nav .nav-current { color: var(--fg); font-weight: 600; margin-right: auto; } /* Breadcrumb segments: ← jakegonsalves.com / crib / ABCD Action buttons (theme/leaderboard/rules) sit on the right; the first .nav-action has margin-left:auto to push them apart from the crumbs. */ .unified-nav .nav-back { font-size: 1.05em; color: var(--muted); padding: 0.1rem 0.45rem; border-radius: 4px; line-height: 1; } .unified-nav .nav-back:hover { color: var(--accent); background: var(--bg); } .unified-nav .nav-segment { color: var(--muted); font-weight: 500; } .unified-nav .nav-segment:hover { color: var(--fg); } /* Tiny build-version tag — sits next to /crib so a deploy is visible at a glance. Lighter + smaller + monospace so it reads as metadata, not nav. */ .unified-nav .nav-version { color: var(--muted); font-size: 0.7em; opacity: 0.6; letter-spacing: 0.04em; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-left: -0.3rem; user-select: text; } .unified-nav .nav-version:empty { display: none; } .unified-nav .nav-room { color: var(--fg); font-weight: 700; letter-spacing: 0.04em; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .unified-nav .nav-room.hidden { display: none; } .unified-nav #nav-leaderboard-btn { margin-left: auto; } /* Icon-only nav buttons (e.g. 🔗 quick links). Compact so they don't crowd the labeled actions but stay tappable. */ .unified-nav .nav-icon-only { padding: 0.2rem 0.45rem; font-size: 1.05em; line-height: 1; } /* Mobile: collapse labeled actions to icon-only, drop chrome below the minimum useful set, tighten gaps. The breadcrumb (← / crib) and core actions (theme, leaderboard, share, rules) stay reachable end-to-end. */ @media (max-width: 700px) { .unified-nav { gap: 0.4rem; padding: 0.4rem 0.55rem; margin: -2rem -1rem 1rem; font-size: 0.82rem; } .unified-nav .nav-action-label { display: none; } .unified-nav .nav-action { padding: 0.35rem 0.5rem; font-size: 1.05em; line-height: 1; min-width: 2rem; /* finger-friendly tap target */ text-align: center; } .unified-nav .nav-home { font-size: 0.78em; } .unified-nav .nav-segment { font-size: 0.92em; } .unified-nav #nav-leaderboard-btn { margin-left: auto; } } @media (max-width: 420px) { /* On phone-narrow viewports the .com home link adds clutter without earning its keep — the back arrow already affords returning. */ .unified-nav .nav-home { display: none; } .unified-nav .nav-version { display: none; } .unified-nav { padding: 0.35rem 0.4rem; gap: 0.3rem; } } /* ---- Popover modal (rules) ---- */ .popover-overlay { position: fixed; inset: 0; /* Dim + blur the page behind so the glass popover sits on a legible bed (the popover material itself is see-through, so without this the underlying UI would shine through too chaotically). Lighter scrim than the prior 0.55 so a hint of the card-rain still reads through the glass. */ background: rgba(0,0,0,0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem; overflow-y: auto; animation: fade-in 0.18s ease-out; } .popover { /* Glass panel — sits above the dimmed/blurred .popover-overlay so the card-rain reads as a soft texture through the material, not a solid block. Same --glass-* tokens as .mode-card so the whole site reads as one consistent piece of frosted material. */ background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); border-radius: 14px; max-width: 760px; width: 100%; padding: 1.75rem 2rem 2rem; position: relative; animation: pop-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes pop-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .popover h2 { margin: 0 0 1rem; font-size: 1.1rem; color: var(--accent); letter-spacing: 0.05em; } .popover-close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.5rem; } .popover-close:hover { color: var(--fg); } .rules-block { margin-bottom: 1.25rem; } .rules-block h3 { margin: 0 0 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--muted); letter-spacing: 0.08em; text-transform: lowercase; } .rules-table { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--fg); } /* ============================================================ "How to play" popover — tabbed layout with friendlier copy. ============================================================ */ .popover.rules-popover { max-width: 720px; } .rules-intro { margin: 0 0 0.7rem; font-size: 0.95em; } .rules-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; border-bottom: 1px dashed var(--border); padding-bottom: 0.5rem; margin-bottom: 0.9rem; } .rules-tab { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 0.32rem 0.7rem; cursor: pointer; font: inherit; border-radius: 4px; font-size: 0.88em; } .rules-tab:hover { color: var(--fg); } .rules-tab.on { color: var(--fg); border-color: var(--accent); background: var(--hover); } .rules-stage { display: block; } .rules-stage.hidden { display: none; } .rules-stage h4 { margin: 0.75rem 0 0.3rem; font-size: 0.85rem; color: var(--accent); letter-spacing: 0.05em; text-transform: lowercase; } .rules-stage h4:first-child { margin-top: 0; } .rules-foot { margin: 0.65rem 0 0; font-size: 0.83em; line-height: 1.45; } /* Round flow numbered list — explicit step circles so we override the default

beta

 tag
   inside each card. Pre defaults to overflow:visible, but with `bigsuit`
   doing a transform:scale(1.9) on the suit glyph, the visual content can
   exceed the pre's box, and certain UAs (notably some WebKit builds when
   the parent has will-change/3D transforms) render a scrollbar on the pre.
   Force overflow:clip everywhere — pre content is static, you never need
   to scroll inside a card. #starter-area is a  itself so include it. */
#starter-area,
.stack-card pre, .bh-card pre, .seq-card-full pre,
.card-button, .card-button pre,
.rain-card pre, .sim-card pre {
    overflow: clip;
    scrollbar-width: none;
}
#starter-area::-webkit-scrollbar,
.stack-card pre::-webkit-scrollbar,
.bh-card pre::-webkit-scrollbar,
.seq-card-full pre::-webkit-scrollbar,
.card-button::-webkit-scrollbar,
.card-button pre::-webkit-scrollbar,
.rain-card pre::-webkit-scrollbar,
.sim-card pre::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Vertical-only margin on cards. The earlier `margin: 2px 0` shorthand
   was zeroing margin-left, which silently wiped out the .seq-card-full
   `-6em` overlap rule — that's why the piles looked barely stacked
   instead of like a real stack of cards. Use longhand to keep horizontal
   margins intact. */
.stack-card, .bh-card, .seq-card-full {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Final safety net: kill horizontal scrollbar at the viewport. Vertical
   scrolling is intentional (long games scroll); horizontal would only
   appear from animation artifacts. */
html, body { overflow-x: hidden; }

/* Invite toast — shown briefly when you create/join an empty room so the
   first thing you see is a clear way to bring friends in. Pulses on the
   room-code chip too. */
.invite-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin: 0.4rem 0 0.6rem;
    background: var(--hover);
    border: 1px dashed var(--accent);
    font-size: 0.9em;
    position: relative;
    animation: invite-slide 0.28s ease-out;
}
.invite-toast.hidden { display: none; }
.invite-toast-text { flex: 1; }
.invite-toast-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
}
@keyframes invite-slide {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}
#room-code-display { animation: room-pulse 1.8s ease-in-out 2; }
@keyframes room-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(197,74,58,0); }
    50%      { box-shadow: 0 0 10px rgba(197,74,58,0.45); }
}

/* "you deal" inline tag on the phase banner */
#phase-banner .phase-deal {
    display: inline-block;
    font-size: 0.7em;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 0.02rem 0.35rem;
    margin-left: 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.1em;
}

/* Self row in the hands panel (rendered face-up at the top of the list). */
.bot-hand.self {
    border-color: var(--accent);
    background: var(--hover);
}
.bot-hand.self .bh-name { font-weight: 700; }

/* Reveal toggle (training opt-in to see AI hands) */
#reveal-toggle {
    color: var(--muted);
    border-color: var(--border);
}
#reveal-toggle.on {
    color: var(--accent);
    border-color: var(--accent);
}
#reveal-toggle.disabled,
#reveal-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
}
#reveal-toggle.disabled:hover { background: transparent; }
#reveal-toggle.hidden { display: none; }

/* Idle indicators */
.bh-idle {
    margin-left: 0.4rem;
    font-size: 0.72em;
    letter-spacing: 0.03em;
    color: var(--muted);
    animation: bh-idle-fade 0.4s ease-out;
}
.bh-idle-idle { color: var(--accent); opacity: 0.85; }
@keyframes bh-idle-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* The pegging stack itself: stop reserving min-height that creates dead
   space during early sequences, since we now anchor it at the top of the
   game view directly under the sticky banner. */
.stack-cards { min-height: 0; padding: 4px 0 6px; }

/* (peg-compact was removed — the layout used to collapse for short stacks,
   which made the "starter & pegging" label flicker in and out and the
   total jump from below to inline as cards accumulated. The play surface
   is now a single stable layout: label on top, cards row, total below.) */

/* ---- Identity (avatar + color) picker ---- */

.identity-row { align-items: flex-start; }
.identity-row label { padding-top: 0.4rem; }
.picker-grid {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.avatar-btn, .color-btn {
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, transform 0.1s, background 0.1s;
    padding: 0.3rem 0.55rem;
    color: var(--fg);
}
.avatar-btn { font-size: 1.25rem; line-height: 1; }
.color-btn  { font-size: 0.82em; font-weight: 600; letter-spacing: 0.03em; }
.avatar-btn:hover, .color-btn:hover { border-color: var(--fg); transform: translateY(-2px); }
.avatar-btn.selected {
    border-color: var(--accent);
    background: var(--selected);
}
.color-btn.selected {
    border-color: var(--accent);
    /* No background fill — would override animated gradients (rainbow / aurora) */
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ---- Player color classes (used in player list, chat, banner, log) ---- */

.c-ember  { color: #e8623a; }
.c-lagoon { color: #3da9c5; }
.c-meadow { color: #6bc46d; }
.c-plum   { color: #b56bff; }
.c-sun    { color: #e8b842; }
.c-rose   { color: #f06fa0; }
.c-frost  { color: #88c8f0; }
.c-sand   { color: #c89a64; }

.c-rainbow {
    background: linear-gradient(90deg, #e8623a, #e8b842, #6bc46d, #3da9c5, #b56bff, #f06fa0, #e8623a) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: rainbow-shift 4s linear infinite;
}
@keyframes rainbow-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.c-shimmer {
    color: #ffd86b !important;
    text-shadow: 0 0 6px rgba(255, 216, 107, 0.45);
    animation: shimmer-pulse 1.8s ease-in-out infinite;
}
@keyframes shimmer-pulse {
    0%, 100% { opacity: 1;   text-shadow: 0 0 6px rgba(255,216,107,0.45); }
    50%      { opacity: 0.65; text-shadow: 0 0 14px rgba(255,216,107,0.75); }
}

.c-aurora {
    background: linear-gradient(90deg, #6bc46d, #3da9c5, #b56bff, #3da9c5, #6bc46d) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: aurora-flow 5s ease-in-out infinite;
}

/* Grandma's fire — animated flicker red ↔ orange ↔ gold */
.c-fire {
    color: #ff5511 !important;
    text-shadow: 0 0 8px rgba(255, 80, 0, 0.55);
    animation: fire-flicker 1.1s ease-in-out infinite;
    font-weight: 700;
}
@keyframes fire-flicker {
    0%, 100% {
        color: #ff5511 !important;
        text-shadow: 0 0 8px rgba(255, 80, 0, 0.55);
    }
    32% {
        color: #ffaa00 !important;
        text-shadow: 0 0 14px rgba(255, 130, 0, 0.75);
    }
    58% {
        color: #ff3300 !important;
        text-shadow: 0 0 10px rgba(255, 50, 0, 0.7);
    }
    78% {
        color: #ffcc40 !important;
        text-shadow: 0 0 12px rgba(255, 180, 0, 0.65);
    }
}
.grandma-btn {
    border-color: #ff5511 !important;
    transition: box-shadow 0.2s, transform 0.1s;
}
.grandma-btn:hover:not(:disabled) {
    box-shadow: 0 0 18px rgba(255, 100, 0, 0.55), 0 0 6px rgba(255, 200, 50, 0.4) inset;
    transform: translateY(-1px);
}
/* Lex (hard tier) — meadow accent on the button, subtle glow vs Glady's
   fiery one. Signals "strong but cool-headed." */
.hard-btn {
    border-color: #6bc46d !important;
    transition: box-shadow 0.2s, transform 0.1s;
}
.hard-btn:hover:not(:disabled) {
    box-shadow: 0 0 14px rgba(107, 196, 109, 0.5), 0 0 6px rgba(180, 230, 180, 0.35) inset;
    transform: translateY(-1px);
}
@keyframes aurora-flow {
    0%, 100% { background-position: 0%   50%; }
    50%      { background-position: 100% 50%; }
}

/* ---- Callout banners (rejoin, focused-join) ---- */

.callout-banner {
    border: 1px solid var(--accent);
    background: var(--selected);
    padding: 0.9rem 1.1rem;
    margin: 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.callout-banner .cb-text { flex: 1; min-width: 12em; }
.callout-banner code {
    background: var(--bg);
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    letter-spacing: 0.2em;
    font-size: 0.95em;
    margin: 0 0.2rem;
}
.callout-banner .cb-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-weight: 700;
}
.callout-banner .cb-primary:hover:not(:disabled) {
    background: var(--bg);
    color: var(--accent);
}

.focused-join-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
}
.focused-join-banner .fj-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.focused-join-banner .fj-blurb { margin: 0.2rem 0 0.4rem; font-size: 0.88em; }
.focused-join-banner .cb-primary { align-self: stretch; padding: 0.55rem 1rem; font-size: 1rem; }

/* ---- Identity card (lobby) ---- */

/* Compact identity shortcut — a single slim row that opens the identity panel
   (the name/avatar/color editor lives there now). Same glass material as
   .mode-card so the lobby still reads as one consistent frosted piece. */
.identity-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 1.25rem 0;
    padding: 0.6rem 1.1rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.identity-card:hover { border-color: var(--accent); background: var(--hover); }
.idcard-label { font-size: 0.85em; }
.idcard-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.idcard-edit {
    margin-left: auto;
    font-size: 0.82em;
    color: var(--muted);
    white-space: nowrap;
}
.identity-card:hover .idcard-edit { color: var(--accent); }
#id-prev-avatar { font-size: 1.4rem; line-height: 1; }
.id-prev-anon { font-style: italic; font-weight: 500; opacity: 0.75; }

/* Profile editor inside the identity panel */
.ip-profile { margin: 0.2rem 0 0.6rem; }
.ip-profile-status {
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px dashed var(--border, rgba(255,255,255,0.18));
    color: var(--muted);
}
.ip-profile-status.saved {
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--fg);
}
.ip-field { margin: 0.5rem 0; }
.ip-field > label {
    display: block;
    font-size: 0.78em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.ip-saved-flash {
    font-size: 0.74em;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    align-self: center;
}
.ip-saved-flash.show { opacity: 1; }
.ip-profile #name-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    color: inherit;
    font: inherit;
}
.ip-profile #name-input:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Corner X button on player cards. Same icon, dual meaning by context:
   - On someone else's card (host only) → kick that player
   - On your own card → leave the room (with confirmation)
   The self-leave variant gets a slight tonal tweak so the meaning isn't
   ambiguous when you hover over your own card. */
.player-card .pc-kick {
    margin-left: auto;
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 4px;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.player-card .pc-kick:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(197,74,58,0.08);
}
.player-card .pc-leave-self::after {
    /* discoverability hint that hovers visible just under the button */
    content: 'leave';
    position: absolute;
    right: 0.6rem;
    top: 1.9rem;
    font-size: 0.65em;
    color: var(--muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.player-card .pc-leave-self:hover::after { opacity: 1; }
.player-card.is-me { position: relative; }

/* Hidden YouTube iframe for the frog easter egg — kept offscreen + tiny. */
#frog-tune {
    position: fixed;
    width: 1px;
    height: 1px;
    bottom: 0;
    right: 0;
    opacity: 0.01;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}
#frog-tune iframe { width: 320px; height: 180px; border: 0; }

/* Frog cascade — 🐸 emojis rain from the top while the easter egg is active.
   Container is a full-viewport overlay above the content but below modals.
   Per-frog vars (--frog-drift, --frog-spin) randomize sway + rotation. */
#frog-rain {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9000;
}
.frog-drop {
    position: absolute;
    top: -3rem;
    line-height: 1;
    user-select: none;
    will-change: transform, opacity;
    animation-name: frog-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
@keyframes frog-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 1; }
    100% {
        transform: translate3d(var(--frog-drift, 0), 110vh, 0) rotate(var(--frog-spin, 0deg));
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .frog-drop { animation: none; display: none; }
}

/* ---- Talking indicator ---- */

.who-talking {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    margin: 0.5rem 0;
    border-left: 3px solid var(--accent);
    background: var(--hover);
    font-size: 0.88em;
    animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.who-talking .who-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.who-talking .who-item::after {
    content: '♪';
    color: var(--accent);
    animation: pulse 0.7s ease-in-out infinite;
    margin-left: 0.1rem;
}

.player-row.talking .player-name::after {
    content: ' ♪';
    color: var(--accent);
    animation: pulse 0.7s ease-in-out infinite;
}

.voice-btn.voice-talking,
.voice-btn.on.voice-talking {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--selected);
}

.game-header-actions { display: flex; gap: 0.5rem; }

.player.voice-talking { color: var(--accent); }

/* HTML player list rows */
.player-list { margin: 1rem 0; font-family: inherit; line-height: 1.45; }
.player-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.1rem 0; }
.player-row .host-mark { color: var(--accent); width: 1ch; text-align: center; }
.player-row .player-num { color: var(--muted); width: 2ch; }
.player-row .player-avatar { font-size: 1.1em; }
.player-row .player-name { font-weight: 600; }
.player-row .player-tag { color: var(--muted); font-size: 0.85em; }
.player-row.disconnected .player-name { opacity: 0.5; text-decoration: line-through; }

/* ============================================================
   Mobile responsive — under 700px viewport
   ============================================================ */

@media (max-width: 700px) {
    main { padding: 0.6rem 0.75rem 3rem; }

    /* Unified nav */
    .unified-nav {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.4rem 0.55rem;
        margin: -0.6rem -0.75rem 0.4rem;
        font-size: 0.82rem;
    }
    .unified-nav .nav-current { font-size: 0.95em; margin-right: auto; }
    .unified-nav button, .unified-nav a { padding: 0.2rem 0.4rem; font-size: 0.92em; }

    /* Lobby header — tighter to claw back vertical space above first content.
       The big gap previously visible on mobile was #sim's fixed min-height
       reserving ~6em of space even when no cards were animating. Setting
       min-height: 0 here lets the demo collapse to actual content height. */
    .lobby-top { gap: 0.4rem; margin-bottom: 0.35rem; }
    .lobby-title-block .title { margin: 0 0 0.2rem; }
    .lobby-title-block .tagline { margin: 0 0 0.2rem; }
    .title { font-size: clamp(0.55rem, 2vw, 0.85rem); }
    .tagline { font-size: 0.85rem; margin: 0.1rem 0; }
    /* On phones the sim demo wastes vertical real estate — the user is here
       to play, not watch a demo. Drop it entirely under 700px. */
    .lobby-demo { display: none; }

    /* Identity card (compact shortcut) */
    .identity-card { margin: 0.55rem 0; padding: 0.5rem 0.85rem; }
    .idcard-preview { font-size: 1rem; }
    .picker-grid { gap: 0.25rem; }
    .avatar-btn { font-size: 1.15rem; padding: 0.25rem 0.45rem; line-height: 1; }
    .color-btn { font-size: 0.78em; padding: 0.25rem 0.5rem; }

    /* Mode cards — pull mode-title/blurb closer to action buttons.
       display:contents flattens the .mode-card-text wrapper so the row's
       gap controls spacing uniformly between title, blurb, and actions. */
    .mode-stack { gap: 0.45rem; }
    .mode-card { padding: 0.65rem 0.85rem; }
    .mode-card-row { flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .mode-card-text { display: contents; }
    .mode-title { margin: 0; font-size: 0.95rem; }
    .mode-blurb { margin: 0; font-size: 0.78em; line-height: 1.35; }
    .mode-card-actions { flex-wrap: wrap; gap: 0.4rem; }
    /* Mobile touch targets: bump every mode-card action button to the
       44pt-min recommendation. Applied to both regular buttons AND
       `.small` (which the mode cards use for tighter desktop layout
       — on phones that's too small to tap reliably). */
    .mode-card-actions button,
    .mode-card-actions button.small {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
    }
    .ai-vs-row button,
    .ai-vs-row .share-pair button {
        min-height: 44px;
        padding: 0.7rem 0.6rem;
        font-size: 0.92rem;
    }
    .watch-btn { font-size: 1rem; font-weight: 600; }
    /* Primary lobby actions (create room / start game) get the same
       touch-target treatment so the host doesn't fumble the launch. */
    #create-btn, #join-btn, #start-btn {
        min-height: 44px;
        padding: 0.7rem 1.1rem;
        font-size: 1rem;
    }
    .mp-entry-actions { flex-direction: column; align-items: stretch; }
    .join-or { display: none; }
    .join-row { width: 100%; }
    .join-row input { flex: 1; }

    /* Multiplayer in-room */
    .mp-room-header { gap: 0.4rem; }
    .mp-room-header .mode-title { font-size: 0.92rem; }
    .mp-room-header code { font-size: 0.85em; padding: 0.05rem 0.4rem; }
    .mp-room-actions { gap: 0.3rem; flex-wrap: wrap; }
    .player-cards { grid-template-columns: 1fr; gap: 0.4rem; }
    .player-card { min-height: auto; padding: 0.6rem 0.75rem; }

    /* Game header — let actions wrap to a second row */
    .game-header { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
    .game-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.3rem;
        justify-content: flex-end;
    }
    .leave-prominent { margin-left: auto; }
    .gh-divider { display: none; }
    .game-header-actions button.small { padding: 0.3rem 0.55rem; font-size: 0.8em; }

    /* Replay transport — tighter on mobile */
    .replay-controls { padding: 0.4rem 0.55rem; font-size: 0.8em; gap: 0.3rem; }
    .replay-controls button { padding: 0.22rem 0.5rem; font-size: 0.95em; }
    .replay-controls .rw-step { padding: 0.16rem 0.42rem; }
    .rw-status { font-size: 0.9em; }
    .rw-tick { height: 1.4rem; }  /* bigger tap target */

    /* Board — smaller font + horizontal scroll fallback.
       JS reduces WIDTH from 60→30 cells at the same breakpoint so it fits. */
    #board {
        font-size: clamp(0.58rem, 2.1vw, 0.82rem);
        line-height: 1.2;
        overflow-x: auto;
        padding: 0.7rem 0;
    }

    /* Pegging / starter / counting */
    #starter-area, #counting-area { font-size: 0.82em; }
    .stack-card pre { font-size: 0.78em; line-height: 1.1; }
    .stack-cards { gap: 0.3rem; min-height: 0; }

    /* Card buttons (hand) — fit 4 per row on most phones */
    .card-row { gap: 0.3rem; }
    .card-button { padding: 0.25rem 0.35rem; font-size: 0.82em; line-height: 1.08; }

    /* Chat + voice */
    .chat-messages { max-height: 160px; min-height: 56px; font-size: 0.82em; padding: 0.4rem 0.55rem; }
    .chat-input { gap: 0.3rem; }
    .chat-input input {
        font-size: 16px;     /* prevents iOS auto-zoom on focus */
        padding: 0.4rem 0.55rem;
    }

    /* Score, hints, bot decision */
    #score-popup { font-size: clamp(1.05rem, 4vw, 1.6rem); top: 22%; }
    .hint-banner { font-size: 0.82em; padding: 0.35rem 0.6rem; }
    .bot-decision { font-size: 0.8em; padding: 0.5rem 0.65rem; }
    .bot-decision .bd-list, .bot-decision .bd-history { padding-left: 1.1rem; }
    #score-log { font-size: 0.8em; }

    /* Inline leaderboard */
    .lobby-leaderboard { margin-top: 1.5rem; padding-top: 1rem; }
    .ll-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .ll-tabs { width: 100%; }
    .lb-row {
        grid-template-columns: 2ch 2ch 1fr auto auto;
        gap: 0.25rem;
        font-size: 0.82em;
        padding: 0.3rem 0;
    }
    .lb-extra { display: none; }

    /* Popovers */
    .popover-overlay { padding: 1rem 0.5rem; }
    .popover { padding: 1.25rem 1.1rem 1.4rem; max-width: 95vw; max-height: 88vh; overflow-y: auto; }
    .popover h2 { font-size: 0.95rem; }
    .rules-table { font-size: 0.68rem; line-height: 1.4; }
    .rules-example h4 { font-size: 0.85rem; }
    .rules-example .ex-cards { gap: 0.3rem; }
    .rules-example .ex-cards .stack-card pre { font-size: 0.8em; }

    /* Decorative on mobile too — card rain stays behind the UI in
       the top third of the viewport. pointer-events: none + low
       z-index keeps it from blocking taps; the mask fade bottoms
       out before the play area so cards don't crowd the content. */
    .card-rain {
        display: block;
        height: 35vh;
        max-height: 280px;
    }
    .perfect-29-demo, #title-card-pop { display: none; }
}

/* Even tighter for the smallest phones */
@media (max-width: 380px) {
    main { padding: 0.85rem 0.55rem 2.5rem; }
    .title { font-size: clamp(0.48rem, 2.4vw, 0.7rem); }
    .avatar-btn { padding: 0.2rem 0.35rem; }
    .color-btn { font-size: 0.72em; padding: 0.2rem 0.4rem; }
    .card-button { font-size: 0.75em; padding: 0.2rem 0.3rem; }
    .stack-card pre { font-size: 0.7em; }
    #board { font-size: clamp(0.5rem, 1.9vw, 0.72rem); }
}

/* ============================================================
   Mobile chat tray.

   Desktop keeps the existing inline .chat-panel boxes (they live in
   the mp-room view and the game screen). On phones we hide those
   boxes — they ate too much vertical real estate — and surface chat
   via a floating button + slide-up bottom sheet. Single shared sheet
   (its data-chat-output / data-chat-form match the broadcast
   selectors, so messages flow in unchanged).
   ============================================================ */

.mobile-chat-fab {
    position: fixed;
    right: 0.9rem;
    bottom: 0.9rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: var(--bg);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 8500;
    display: none;
    align-items: center;
    justify-content: center;
}
.mobile-chat-fab.hidden { display: none; }
.mobile-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 0.65rem;
    background: var(--fg);
    color: var(--bg);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mobile-chat-badge.hidden { display: none; }

.mobile-chat-tray {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--accent);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    z-index: 8600;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: mobile-chat-slide 0.25s ease-out;
}
.mobile-chat-tray.hidden { display: none; }
@keyframes mobile-chat-slide {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
.mobile-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px dashed var(--border);
}
.mobile-chat-title { font-weight: 700; letter-spacing: 0.03em; }
.mobile-chat-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
}
.mobile-chat-close:hover { color: var(--fg); }
.mobile-chat-tray .chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.9rem;
    min-height: 30vh;
    max-height: 50vh;
}
.mobile-chat-tray .chat-input {
    display: flex;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px dashed var(--border);
}
.mobile-chat-tray .chat-input input {
    flex: 1;
    padding: 0.55rem 0.7rem;
    font-size: 16px;   /* prevents iOS zoom on focus */
    font-family: inherit;
}

/* Mobile voice button — lives in the tray header so chat + voice share
   one comms tray. When voice is active, the FAB itself swaps to a mic
   glyph (via ::after) so the user knows the call is live without
   reopening the tray. */
.mobile-voice-btn {
    margin-left: auto;
    margin-right: 0.4rem;
    font-family: inherit;
    font-size: 0.85em;
    padding: 0.35rem 0.7rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: pointer;
}
.mobile-voice-btn:hover { color: var(--fg); }
.mobile-voice-btn.on {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
}
.mobile-voice-btn.voice-talking::after { content: ' ●'; color: rgba(255,255,255,0.85); }

/* Inline mic-error strip under the tray header. Hidden when empty
   (the JS sets textContent; CSS :empty hides the box so there's no
   stray border). Subtle warning tint so it reads as a hint, not an
   error scream — the user can still type chat below it. */
.mobile-voice-error {
    margin: 0.4rem 0.6rem 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--accent);
    background: rgba(197, 74, 58, 0.10);
    border: 1px solid rgba(197, 74, 58, 0.30);
    border-radius: 6px;
}
.mobile-voice-error:empty { display: none; }
:root[data-theme="dark"] .mobile-voice-error {
    background: rgba(240, 160, 96, 0.10);
    border-color: rgba(240, 160, 96, 0.30);
}

/* When voice is on, the FAB shows a mic indicator so the on-call state
   is visible without opening the tray. */
.mobile-chat-fab.voice-on::before {
    content: '🎙';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

@media (max-width: 700px) {
    .mobile-chat-fab { display: flex; }
    /* Desktop chat panels would still render but offscreen would be wasted;
       hide them. The tray + FAB are the chat surface on mobile. */
    .chat-panel { display: none !important; }
}
@media (min-width: 701px) {
    /* Tray + FAB are mobile-only — never show on desktop even if JS sets
       the show class accidentally. */
    .mobile-chat-fab, .mobile-chat-tray { display: none !important; }
}

/* Landscape phone — claw back vertical space */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
    main { padding: 0.6rem 0.75rem 1.5rem; }
    .lobby-top { flex-direction: row; gap: 1rem; }
    .lobby-demo { max-width: 220px; flex: 0 0 220px; }
    .unified-nav { margin: -0.6rem -0.75rem 0.6rem; }
    .game-header { flex-direction: row; align-items: center; }
    .game-header-actions { width: auto; }
    .chat-messages { max-height: 100px; }
    #board { font-size: clamp(0.55rem, 1.6vw, 0.78rem); }
}

/* ===========================================================
   Lobby sim: nowrap + horizontal scroll so the demo never
   pushes the page height around when a long pegging sequence
   builds up. Allow the demo container to widen a bit too so
   typical sequences fit before scrolling kicks in.
   =========================================================== */

#sim-stack {
    flex-wrap: nowrap;
    overflow: hidden;          /* clip cards instead of showing scrollbars; demo loops anyway */
    align-items: flex-start;
    scrollbar-width: none;
}
#sim-stack::-webkit-scrollbar { display: none; }
#sim { overflow: hidden; }     /* belt-and-suspenders: parent also clips */
.lobby-demo { flex-basis: clamp(220px, 32vw, 360px); max-width: 100%; }

/* ===========================================================
   Bot hands panel (watch-bots): a row per bot showing their
   full hand. The played card animates out of here into the
   stack via JS FLIP. We use the same .bigsuit-scaled cards
   so visual continuity is preserved.
   =========================================================== */

/* Toolbar sitting right above the bot-hands rows — host for the
   reveal toggle so it lives where the user is looking when they want
   to flip the active-bot reveal mode. Right-aligned, transparent. */
.bot-hands-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem 0 0.1rem;
    min-height: 0;
}
.bot-hands-bar:empty,
.bot-hands-bar > .hidden { display: none; }
.bot-hands-bar > .reveal-btn.hidden { display: none; }
.bot-hands {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.1rem 0 0.4rem;
}
.bot-hand {
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) 1fr;
    align-items: start;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(0,0,0,0.04);
    transition: border-color 0.2s, background 0.2s;
}
:root[data-theme="dark"] .bot-hand { background: rgba(255,255,255,0.03); }
.bot-hand.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(197,74,58,0.22), 0 0 22px rgba(197,74,58,0.18);
    background: rgba(197,74,58,0.04);
}
.bot-hand.active .bh-avatar {
    transform: scale(1.18);
    transform-origin: left center;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
    transition: transform 0.3s cubic-bezier(0.34,1.45,0.64,1);
}
.bot-hand .bh-avatar { transition: transform 0.3s ease; }
/* One-shot pulse when the active slot moves to this row (JS toggles the
   class). Gets the eye following the turn from row to row. */
.bot-hand.active-arrive {
    animation: bot-hand-arrive 0.7s ease-out;
}

/* Glady is peeking. Subtle floating eye-chip near her name when she's
   the active player in PEGGING — implies "she's reading the table" without
   exposing the cheating mechanic outright. */
.bot-hand.peeking .bh-head::after {
    content: '👁 peeking';
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.7em;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: rgba(197,74,58,0.08);
    border: 1px solid var(--accent);
    padding: 0.04rem 0.4rem;
    text-transform: lowercase;
    animation: peek-blink 2.6s ease-in-out infinite;
    vertical-align: 0.1em;
}
@keyframes peek-blink {
    0%, 90%, 100% { opacity: 1; transform: translateY(0); }
    45%, 55%      { opacity: 0.35; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
    .bot-hand.peeking .bh-head::after { animation: none; }
}
@keyframes bot-hand-arrive {
    0%   { box-shadow: 0 0 0 0    rgba(197,74,58,0.55); }
    100% { box-shadow: 0 0 0 22px rgba(197,74,58,0); }
}
@media (prefers-reduced-motion: reduce) {
    .bot-hand.active-arrive { animation: none; }
    .bot-hand.active .bh-avatar { transform: none; }
}
.bh-round-pts {
    margin-left: 0.4rem;
    font-size: 0.75em;
    letter-spacing: 0.04em;
    color: var(--accent);
    font-weight: 700;
    border: 1px solid var(--accent);
    padding: 0.04rem 0.35rem;
    text-transform: uppercase;
}
.bh-round-pts.hidden { display: none; }

/* Inline bot decision panel — lives inside the active bot's row so the
   explanation reads beside the player making the call. Replaces the
   standalone #bot-decision during PEGGING. */
.bh-decision {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
    font-size: 0.9em;
    color: var(--fg);
}
.bh-decision:empty { display: none; }
.bh-decision .bd-header,
.bh-decision .bd-mode,
.bh-decision .bd-help { margin: 0.25rem 0; }
.bh-decision .bd-help { color: var(--muted); font-size: 0.85em; }
.bh-decision .bd-list { margin: 0.2rem 0; padding-left: 1.1rem; }
.bh-decision .bd-list li { padding: 0.08rem 0; }
.bh-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    min-width: 0;
}
.bh-avatar { font-size: 1.3rem; line-height: 1; }
.bh-name {
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.bh-active {
    font-size: 0.7em;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.15s;
}
.bot-hand.active .bh-active { opacity: 1; }
.bot-hand.dealer .bh-avatar::after {
    content: ' D';
    color: var(--accent);
    font-size: 0.65em;
    font-weight: 700;
    vertical-align: super;
}
.bh-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.35rem;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
}
.bh-cards::-webkit-scrollbar { height: 5px; }
.bh-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.bh-card {
    flex: 0 0 auto;
    display: inline-block;
    line-height: 1.1;
    animation: bh-card-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.bh-card pre {
    margin: 0;
    font-family: inherit;
    line-height: 1.1;
    color: var(--fg);
}
.bh-card.red pre { color: var(--accent); }
@keyframes bh-card-in {
    0% { transform: translateY(-8px) scale(0.85); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Face-down opponent card — same frame as a face-up card but with a
   subtle cross-hatched pattern. We tint slightly so it reads as "not yours"
   at a glance. The card count is also shown in the row header. */
.bh-card.bh-back pre {
    color: var(--muted);
    letter-spacing: 0;
}
.bot-hand.facedown { opacity: 0.92; }
.bot-hand.facedown .bh-cards { gap: 0.18rem; }  /* tighter — they're informational, not interactive */
.bot-hand.facedown .bh-card { animation-duration: 0.3s; }

/* One-shot flip keyframe on the cards container when the row's mode
   changes (e.g. spectator's active-only reveal moves to a new bot —
   the prior bot's cards flip face-down, the new one's flip face-up).
   `transform-style: preserve-3d` + `perspective` on the parent give
   the rotation real depth instead of just a 2D squash. */
.bh-cards { transform-style: preserve-3d; }
.bot-hand { perspective: 600px; }
.bh-cards.bh-cards-flip {
    animation: bh-cards-flip 0.72s cubic-bezier(0.34, 1.35, 0.64, 1);
    transform-origin: center center;
}
@keyframes bh-cards-flip {
    /* 3D flip on the Y axis (paired with `perspective: 600px` on the
       parent .bot-hand). A 2D `rotate()` made the wide bot-hand row
       sweep through a wide arc — the cards furthest from center
       travelled the longest path and the whole row read as
       "spinning around a wide invisible pivot" instead of flipping
       in place. rotateY keeps the row's CENTER fixed and folds the
       cards through depth like flipping a physical card, so the
       rotation reads as "around the image itself". */
    0%   { transform: rotateY(0deg)   scale(1);    filter: brightness(0.9); }
    50%  { transform: rotateY(180deg) scale(0.92); opacity: 0.55; filter: brightness(1.35); }
    100% { transform: rotateY(360deg) scale(1);   filter: brightness(1); }
}
@keyframes bh-cards-fade {
    0% { opacity: 0; } 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-cards.bh-cards-flip { animation: bh-cards-fade 0.2s ease-out; }
}
.bh-count {
    font-size: 0.72em;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-left: 0.4rem;
}

/* ===========================================================
   My-turn rainbow glow — multiplayer-only cue that the table
   is waiting on YOU. Subtle border-pulse around the viewport.
   =========================================================== */

/* Rainbow viewport-edge glow on your turn. Two body classes share the
   same overlay; my-turn shows in any game and ramps up from invisible
   over ~45s (JS writes --turn-intensity 0→1), mp-my-turn adds extra
   intensity since other humans are actively waiting. The keyframe
   modulates filter brightness so the pulse rhythm stays visible at all
   intensity levels. */
/* Viewport-edge rainbow glow on your turn.
   `--turn-intensity` (0 → 1, written by JS to , see
   manageTurnIntensity) drives both edge opacity AND the inner-glow
   box-shadow that fades inward from the viewport sides — so the cue
   feels like the screen edges are pulsing rather than a thin border
   being drawn.
   The overlay is ALWAYS rendered (not class-gated) so opacity can
   smoothly transition on/off rather than the pseudo-element popping
   in and out of existence. Intensity ramps linearly from 0 → 1 over
   ~60s of stalling — quick turns barely show, long stalls escalate.
   `body.mp-my-turn` (multiplayer with other humans waiting) layers a
   stronger inner glow on top. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9100;
    /* Thinner border (was 6px) so the edge cue reads as a hint, not
       a frame around the page. Paired with a smaller inset shadow
       so the inner falloff stays proportional. The point of this
       glow is the page hum + escalation — the focal "act on THIS"
       prompt now lives on .cta-pulse attached to the action element. */
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #ff5e3a, #ffb84a, #44e08a, #4ad7ff, #b46cff, #ff5e9b) 1;
    box-shadow:
        inset 0 0 16px rgba(255, 94, 58, calc(var(--turn-intensity, 0) * 0.28)),
        inset 0 0 40px rgba(74, 215, 255, calc(var(--turn-intensity, 0) * 0.14));
    opacity: var(--turn-intensity, 0);
    transition: opacity 0.6s ease, box-shadow 0.6s ease;
    animation: mp-turn-pulse 2.4s ease-in-out infinite;
}
body.mp-my-turn::before {
    box-shadow:
        inset 0 0 20px rgba(255, 94, 58, calc(var(--turn-intensity, 0) * 0.42)),
        inset 0 0 50px rgba(180, 108, 255, calc(var(--turn-intensity, 0) * 0.22));
}
@keyframes mp-turn-pulse {
    0%, 100% { filter: brightness(0.85); }
    50%      { filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; transition: opacity 0.6s linear; }
}

/* ===========================================================
   .cta-pulse — thin rainbow attention ring around the FOCAL
   action element. Layered ::before sits behind the host with a
   blurred animated rainbow gradient that's intentionally tight
   (2-3px halo) so it draws the eye without competing with the
   element's own contents. Applied to:
     - #watch-bots-btn (always — "try this fun thing" prompt)
     - lobby start button when canStart (set by JS)
     - action buttons during a stalled turn (set by JS)
   =========================================================== */
.cta-pulse {
    position: relative;
    isolation: isolate;
}
.cta-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        #ff5e3a, #ffb84a, #44e08a, #4ad7ff, #b46cff, #ff5e9b, #ff5e3a
    );
    background-size: 300% 300%;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.75;
    animation:
        rainbow-shift 4s linear infinite,
        cta-pulse-breath 2.4s ease-in-out infinite;
    pointer-events: none;
}
/* On dark themes the gradient reads too bright against muted UI;
   knock it down slightly so it stays a hint, not a billboard. */
:root[data-theme="dark"] .cta-pulse::before { opacity: 0.6; filter: blur(5px); }
@keyframes cta-pulse-breath {
    0%, 100% { opacity: 0.42; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-pulse::before {
        animation: none;
        opacity: 0.55;
    }
}

/* ===========================================================
   Game-start splash. Fires on lobby→game transition. Two-stage
   reveal: "ready" scale-in (0-35%) → "begin!" pop + accent
   flash (50-85%) → fade-out (90-100%). The outer overlay dims
   the page so the splash reads as a beat, not a banner.
   =========================================================== */
.game-start-splash {
    position: fixed;
    inset: 0;
    z-index: 9000;        /* below the viewport rainbow border (9100) */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.game-start-splash.hidden { display: none; }
.game-start-splash.show { animation: gs-overlay 1.6s ease-out forwards; }
@keyframes gs-overlay {
    0%, 85% { opacity: 1; }
    100%    { opacity: 0; }
}
.gs-card {
    padding: 2.2rem 3rem;
    border-radius: 18px;
    text-align: center;
    min-width: 240px;
    font-family: inherit;
    color: var(--fg);
}
.gs-ready,
.gs-begin {
    font-size: clamp(2.4rem, 8vw, 4.4rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: lowercase;
}
.gs-ready {
    animation: gs-ready-in 1.6s ease-out forwards;
}
.gs-begin {
    color: var(--accent);
    animation: gs-begin-in 1.6s ease-out forwards;
}
@keyframes gs-ready-in {
    0%   { opacity: 0; transform: scale(0.6); }
    18%  { opacity: 1; transform: scale(1.05); }
    35%  { opacity: 1; transform: scale(1); }
    50%  { opacity: 0; transform: scale(0.85); height: 0; margin: 0; }
    100% { opacity: 0; transform: scale(0.85); height: 0; margin: 0; }
}
@keyframes gs-begin-in {
    0%, 45% { opacity: 0; transform: scale(0.5); }
    62%     { opacity: 1; transform: scale(1.3); }
    80%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .game-start-splash.show { animation: gs-overlay 0.8s linear forwards; }
    .gs-ready, .gs-begin { animation: none; }
    .gs-ready { display: none; }
}

/* ============================================================
   Card-action slide-in animations.

   Across the play surface, every newly-rendered card uses the same
   easeOutBack-style entrance so card additions read as a transition
   (slide+fade in from above) rather than a pop. Used by:
     - completed pegging piles when a sequence ends
     - the trailing pegging stack when it collapses at round-end
     - counting result rows
     - the crib reveal cards
*/
@keyframes card-slide-in {
    0%   { transform: translateY(-12px) scale(0.95); opacity: 0; }
    60%  { transform: translateY(2px)   scale(1);    opacity: 1; }
    100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Brand-new completed pile (just collapsed from the live stack). */
.seq-pile-in {
    animation: card-slide-in 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
}

/* Counting / crib slide-in. Each row uses --row-i (set by JS) to
   stagger entry; the .count-pts span has an EXTRA delay so the
   row's cards + breakdown land first, and the score "credits" in
   a moment later. Reads as cards-revealed → score awarded. */
.count-row-in {
    animation: card-slide-in 0.4s cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
    animation-delay: calc(var(--row-i, 0) * 0.12s);
}
.count-row-in .count-pts {
    animation: count-pts-credit 0.5s cubic-bezier(0.2, 1.6, 0.5, 1) backwards;
    animation-delay: calc(var(--row-i, 0) * 0.12s + 0.5s);
    display: inline-block;
}
@keyframes count-pts-credit {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}
.count-crib-cards .count-row-in:nth-child(1) { animation-delay: 0.40s; }
.count-crib-cards .count-row-in:nth-child(2) { animation-delay: 0.46s; }
.count-crib-cards .count-row-in:nth-child(3) { animation-delay: 0.52s; }
.count-crib-cards .count-row-in:nth-child(4) { animation-delay: 0.58s; }
.count-crib-cards .count-row-in:nth-child(5) { animation-delay: 0.64s; }
@media (prefers-reduced-motion: reduce) {
    .seq-pile-in, .count-row-in { animation: none; }
    .count-row-in .count-pts { animation: none; }
}

/* Pegging log inside the scoreboard during PEGGING — running list of
   plays this round, one row per card played. Stays compact: avatar,
   card chip (rank+suit), running total. */
.peg-log {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.peg-log-head {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}
.peg-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* When the round's play list grows long, wrap into multiple
       sub-columns inside the scoreboard instead of forcing the user
       to scroll. column-width sets the desired column size; the
       browser fits as many as the panel's content-box allows. */
    columns: 11ch auto;
    column-gap: 0.7rem;
    max-height: 28em;
    overflow-y: auto;
}
.peg-log-row {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.18rem;
}
.peg-log-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.82em;
}
.peg-log-av { font-size: 1em; }
.peg-log-card {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 0.25rem;
    font-weight: 600;
    background: var(--bg);
    color: var(--fg);
}
.peg-log-card.red { color: var(--accent); border-color: var(--accent); }
.peg-log-total {
    font-variant-numeric: tabular-nums;
    font-size: 0.86em;
}

/* Counting-area visual layout. The block surfaces the round-winner,
   each player's hand (or the crib) as compact chips, and the combo
   breakdown ("fifteen-2, pair, run of 3"). All theme-aware via vars so
   it picks up light/dark/cycle automatically. */
#counting-area.count-rich {
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin: 0.25rem 0 0.5rem;
}
.count-summary {
    font-size: 0.95rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed var(--border);
    letter-spacing: 0.02em;
}
.count-summary-label {
    text-transform: uppercase;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    margin-right: 0.4rem;
}
.count-summary strong { color: var(--accent); }
.count-rows { list-style: none; padding: 0; margin: 0; }
/* Each row carries:
     [who] [tag] [pts] [round]
     [cards.............................]
     [desc..............................]
   `pts` is this hand/crib's contribution; `round` (only on the
   player's LAST counting row) is the FULL round delta — bold +
   larger so it reads as the main number, with the +N pts chip
   showing what that row contributed. */
.count-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
        "who   tag   pts   round"
        "cards cards cards cards"
        "desc  desc  desc  desc";
    gap: 0.15rem 0.6rem;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px dotted var(--border);
    align-items: baseline;
}
.count-row:last-child { border-bottom: 0; }
.count-row.count-lead {
    background: rgba(197,74,58,0.07);
    border-left: 2px solid var(--accent);
    padding-left: 0.55rem;
    border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
    .count-row.count-lead { background: rgba(240,160,96,0.07); }
}
.count-who { grid-area: who; font-weight: 600; }
.count-tag {
    grid-area: tag;
    font-size: 0.72em;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    padding: 0.04rem 0.35rem;
    border-radius: 3px;
}
.count-pts {
    grid-area: pts;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 0.92em;
    min-width: 2.4ch;
    text-align: right;
    opacity: 0.85;
}
.count-pts-round {
    grid-area: round;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 1.2em;
    text-align: right;
    letter-spacing: 0.02em;
    margin-left: 0.4rem;
    animation: count-pts-credit 0.6s cubic-bezier(0.2, 1.6, 0.5, 1) backwards;
    animation-delay: calc(var(--row-i, 0) * 0.12s + 0.7s);
}
.count-cards {
    grid-area: cards;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.15rem;
}
.count-cards-sep {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0.15rem 0 0.3rem;
}
.count-card {
    display: inline-block;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.82em;
    line-height: 1.2;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    white-space: nowrap;
}
.count-card.red { color: var(--accent); border-color: var(--accent); }
.count-desc {
    grid-area: desc;
    font-size: 0.85em;
    padding-left: 0.1rem;
    padding-top: 0.2rem;
}
.count-desc strong { color: var(--accent); font-weight: 700; }

/* Round-totals footer — final climax after the per-row breakdown
   animates in. Each player's FULL round delta (pegging + hand +
   crib) appears at its own stagger delay, so the panel climaxes on
   "who actually scored more this round". */
.count-totals {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    border-top: 1px dashed var(--border);
    padding-top: 0.5rem;
}
.count-totals-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0.4rem;
    font-size: 1.05em;
}
.count-totals-row + .count-totals-row { border-top: 1px dotted var(--border); }
.count-totals-row.count-lead {
    background: rgba(197,74,58,0.07);
    border-left: 2px solid var(--accent);
    padding-left: 0.55rem;
    border-radius: 4px;
}
:root[data-theme="dark"] .count-totals-row.count-lead { background: rgba(240,160,96,0.07); }
.count-totals-who { font-weight: 700; }
.count-totals-tag {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Running scoreboard (DISCARDING / PEGGING) — compact per-player rows
   with avatar, name, total score, this-round delta. Smaller than the
   count-rich rows since the panel is narrow on wide screens. */
.count-running .count-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
}
.count-running-phase {
    font-size: 0.78em;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.count-rows-running { list-style: none; padding: 0; margin: 0; }
.count-row-mini {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    padding: 0.32rem 0.4rem;
    border-bottom: 1px dotted var(--border);
    font-size: 0.92em;
}
.count-row-mini:last-child { border-bottom: 0; }
.count-row-mini.active {
    background: rgba(197, 74, 58, 0.07);
    border-left: 2px solid var(--accent);
    padding-left: 0.55rem;
    border-radius: 4px;
}
:root[data-theme="dark"] .count-row-mini.active { background: rgba(240,160,96,0.07); }
.count-row-mini.you .count-mini-name { color: var(--accent); font-weight: 700; }
.count-mini-avatar { font-size: 1.1em; line-height: 1; }
.count-mini-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.count-dealer {
    font-size: 0.7em;
    margin-left: 0.3rem;
    border: 1px solid currentColor;
    padding: 0 0.2rem;
    border-radius: 2px;
    vertical-align: 0.1em;
    letter-spacing: 0.06em;
}
.count-mini-score {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--accent);
}
.count-mini-out { opacity: 0.5; font-weight: 400; font-size: 0.78em; margin-left: 0.1em; }
.count-mini-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--accent);
    min-width: 2.4ch;
    text-align: right;
}
.count-mini-delta.empty { color: var(--muted); font-weight: 400; }
.count-crib {
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.count-crib-head {
    font-size: 0.85em;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.count-crib-cards {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.count-crib-card { line-height: 1.1; }
.count-crib-card pre { margin: 0; line-height: 1.1; }
.count-crib-card.red pre { color: var(--accent); }

/* Floating hand: when it's your turn, the playable card buttons gently
   bob up and down so the action area visually invites a play. Each card
   gets a small staggered delay so they move slightly out of phase. */
#card-actions.your-turn .card-button:not(.disabled) {
    animation: card-bob 2.2s ease-in-out infinite;
}
#card-actions.your-turn .card-button:nth-child(2) { animation-delay: 0.10s; }
#card-actions.your-turn .card-button:nth-child(3) { animation-delay: 0.20s; }
#card-actions.your-turn .card-button:nth-child(4) { animation-delay: 0.30s; }
#card-actions.your-turn .card-button:nth-child(5) { animation-delay: 0.40s; }
#card-actions.your-turn .card-button:nth-child(6) { animation-delay: 0.50s; }
@keyframes card-bob {
    /* Halved from 4px to 2px — was reading as nervous twitching; now
       it's a subtle breath. The hover lift stays at 6px so the
       interactive cue still feels distinct. */
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
/* Hover override stays sharper than the bob so an interactive lift is
   still distinguishable from the idle float. */
#card-actions.your-turn .card-button:hover:not(.disabled) {
    animation: none;
    transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    #card-actions.your-turn .card-button { animation: none; }
}

/* ===========================================================
   Review launcher (post-game button) + popover (summary + rounds).
   =========================================================== */

.review-launcher {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.8rem;
}
.review-launcher .cb-primary {
    font-size: 1rem;
    padding: 0.55rem 1.1rem;
    animation: rv-launch-pulse 2.4s ease-in-out infinite;
}
@keyframes rv-launch-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(197,74,58,0); }
    50%      { box-shadow: 0 0 18px rgba(197,74,58,0.35); }
}

body.lock-scroll { overflow: hidden; }

.popover.review-popover { max-width: 720px; }
.review-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0.4rem 0 0.9rem;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.5rem;
}
.review-tab {
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font: inherit;
    border-radius: 4px;
}
.review-tab:hover { color: var(--fg); }
.review-tab.on {
    color: var(--fg);
    border-color: var(--accent);
    background: var(--hover);
}
.review-stage { display: block; }
.review-stage.hidden { display: none; }

/* Summary stage */
.rv-headline { text-align: center; margin-bottom: 0.6rem; }
.rv-win {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.03em;
}
.rv-skunk { color: var(--fg); font-weight: 700; }
.rv-rounds-count { font-size: 0.85em; margin-top: 0.2rem; }
.rv-spark {
    width: 100%;
    margin: 0.4rem 0 0.8rem;
    background: var(--hover);
    padding: 0.6rem 0.4rem;
    border: 1px dashed var(--border);
}
.rv-spark svg { width: 100%; height: auto; display: block; }
.rv-spark .rv-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.rv-spark .rv-winline { stroke: var(--accent); stroke-dasharray: 4 4; opacity: 0.55; }
.rv-spark .rv-grid    { stroke: var(--border); opacity: 0.5; }
.rv-spark .rv-axislabel { fill: var(--muted); font-size: 9px; font-family: inherit; }
.rv-spark .rv-name    { font-size: 11px; font-weight: 700; font-family: inherit; }
.rv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.45rem 0.85rem;
    margin: 0.5rem 0 0.7rem;
}
.rv-stat {
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem;
    background: var(--hover);
}
.rv-stat-k {
    font-size: 0.7em;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rv-stat-v { font-size: 0.95em; margin-top: 0.15rem; }
.rv-actions { display: flex; justify-content: center; margin-top: 0.6rem; }

/* Round browser */
.rv-rounds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 0.7rem;
}
.rv-pos { font-weight: 700; color: var(--fg); }
.rv-rmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted var(--border);
    margin-bottom: 0.6rem;
}
.rv-h3 { font-size: 0.85em; color: var(--muted); margin: 0.6rem 0 0.3rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rv-hands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}
.rv-hand {
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem;
    background: var(--hover);
}
.rv-hand.rv-crib { border-style: dashed; border-color: var(--accent); }
.rv-hand-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
    font-size: 0.92rem;
}
.rv-cards { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rv-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--border);
    padding: 0.1rem 0.3rem 0.15rem;
    min-width: 1.6rem;
    background: var(--bg);
    font-weight: 600;
    line-height: 1.1;
}
.rv-card.red { color: var(--accent); border-color: var(--accent); }
.rv-rank { font-size: 0.85em; }
.rv-suit { font-size: 1.05em; }

.rv-peg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    padding: 0.4rem;
    background: var(--hover);
    border: 1px dashed var(--border);
}
.rv-peg-step {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--border);
    padding: 0.05rem 0.25rem;
    background: var(--bg);
}
.rv-peg-av { font-size: 0.95em; line-height: 1; }
.rv-peg-tot {
    font-size: 0.75em;
    color: var(--muted);
    margin-left: 0.15rem;
}
.rv-peg-reset {
    width: 1.2em;
    text-align: center;
    color: var(--accent);
    font-weight: 700;
}

.rv-count {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.rv-count li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.45rem;
    border-bottom: 1px dotted var(--border);
}
.rv-count li:last-child { border-bottom: 0; }
.rv-tag {
    font-size: 0.68em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 0.02rem 0.3rem;
    letter-spacing: 0.05em;
}
.rv-bd { font-size: 0.85em; }
.rv-running {
    margin-top: 0.55rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85em;
}

@media (max-width: 600px) {
    .popover.review-popover { padding: 1rem; }
    .review-tabs { flex-wrap: wrap; }
    .rv-spark { padding: 0.4rem 0.2rem; }
    .rv-hands { grid-template-columns: 1fr; }
    .rv-stats { grid-template-columns: 1fr; }
    .bot-hand {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .bh-head { flex-direction: row; align-items: center; gap: 0.4rem; }
    .bh-name { font-size: 0.85rem; }
    .bh-card pre { font-size: 0.65rem; line-height: 1.05; }
}