/* Main Entry Point */
/* Self-hosted Nunito (variable weight, latin subset) — replaces the Google
   Fonts origins. One 39 KB woff2 covers 400–900; native apps get fonts
   offline, agent fetchers that skip third-party CSS still see the brand
   face, and two preconnect origins disappear. Non-latin text falls back to
   the system sans stack. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CSS Variables - Theme Definition */
:root {
    --native-banner-height: 0px;
    --native-status-bar-height: 0px;
    --native-status-bar-fallback: 0px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --app-edge-gap: clamp(0.42rem, 1.8vw, 0.72rem);
    --app-top-gap: clamp(0.42rem, 1.25vh, 0.7rem);
    --app-bottom-gap: clamp(0.34rem, 1.15vh, 0.62rem);
    --safe-top-header-gap: clamp(0.46rem, 1.6vh, 0.74rem);
    --banner-dead-zone: clamp(0.18rem, 0.85vh, 0.46rem);
    --top-system-intrusion-height: 0px;
    --app-chrome-top: max(
        var(--safe-area-top),
        var(--native-status-bar-height, 0px),
        var(--native-status-bar-fallback, 0px),
        var(--top-system-intrusion-height, 0px)
    );
    --app-chrome-right: var(--safe-area-right);
    --app-chrome-bottom: calc(
        var(--safe-area-bottom) +
            var(--native-banner-height, 0px) +
            var(--banner-dead-zone)
    );
    --app-chrome-left: var(--safe-area-left);
    --app-canvas-height: calc(
        100dvh -
            var(--app-top-gap) -
            var(--app-bottom-gap) -
            var(--app-chrome-top) -
            var(--app-chrome-bottom)
    );
    --surface-top-padding: var(--safe-top-header-gap);
    --surface-bottom-padding: clamp(0.58rem, 1.55vh, 0.86rem);
    --fixed-overlay-top-padding: calc(var(--app-chrome-top) + var(--safe-top-header-gap));
    --fixed-overlay-bottom-padding: calc(1.22rem + var(--app-chrome-bottom));
    --fixed-overlay-available-height: calc(
        100dvh -
            var(--fixed-overlay-top-padding) -
            var(--fixed-overlay-bottom-padding)
    );
    --transient-notice-bottom: calc(16px + var(--app-chrome-bottom));
    --dev-panel-bottom: calc(48px + var(--app-chrome-bottom));
    --dev-toggle-bottom: calc(8px + var(--app-chrome-bottom));
    --utility-top-safe-offset: clamp(1.6rem, 4.8vh, 2.1rem);
    --utility-right-safe-offset: clamp(1.02rem, 3.9vw, 1.4rem);
    --utility-status-cluster-top-reserve: clamp(1rem, 3.4vh, 1.58rem);
    --utility-status-cluster-right-reserve: clamp(0.62rem, 2.4vw, 0.94rem);
    --utility-result-safe-bump-top: clamp(0.48rem, 1.8vh, 0.88rem);
    --utility-result-safe-bump-right: clamp(0.24rem, 1.1vw, 0.4rem);
    --fixed-control-top: calc(
        var(--app-chrome-top) +
            var(--utility-top-safe-offset) +
            var(--utility-status-cluster-top-reserve) +
            var(--utility-modal-status-bump-top, 0px)
    );
    --fixed-control-right: calc(
        var(--app-chrome-right) +
            var(--utility-right-safe-offset) +
            var(--utility-status-cluster-right-reserve) +
            var(--utility-modal-status-bump-right, 0px)
    );
    --game-screen-top-padding: var(--surface-top-padding);
    --game-screen-bottom-padding: clamp(0.34rem, 1vh, 0.48rem);
    --meta-top-intrusion-buffer: clamp(0.86rem, 2.8vh, 1.46rem);
    --meta-cta-safety-gap: clamp(0.54rem, 1.85vh, 1.06rem);
    --meta-top-dead-zone: calc(var(--surface-top-padding) + var(--meta-top-intrusion-buffer));
    --meta-title-size: clamp(1.04rem, 3.2vw, 1.2rem);
    --meta-subtitle-size: clamp(0.62rem, 1.8vw, 0.7rem);

    /* Slate Palette */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    /* Brand Colors */
    --color-primary: #3b82f6;
    /* Blue 500 */
    --color-primary-hover: #2563eb;
    /* Blue 600 */
    --color-success: #22c55e;
    /* Green 500 */
    --color-success-hover: #16a34a;
    /* Green 600 */
    --color-danger: #ef4444;
    /* Red 500 */
    --color-warning: #f59e0b;
    /* Amber 500 */
    --color-orange-400: #fb923c;
    /* Orange 400 */
    --color-accent: #facc15;
    /* Yellow 400 */
    --color-purple: #8b5cf6;
    /* Violet 500 */
    --color-purple-hover: #7c3aed;
    /* Violet 600 */

    /* Semantic Colors */
    --bg-app: var(--color-slate-800);
    --bg-card: var(--color-slate-700);
    --bg-overlay: rgba(0, 0, 0, 0.6);

    --text-main: var(--color-slate-100);
    --text-muted: var(--color-slate-300);
    --text-subtle: var(--color-slate-400);
    --text-soft: var(--color-slate-200);

    /* Shared Surface Tokens */
    --surface-radius-sm: 8px;
    --surface-radius-md: 10px;
    --surface-radius-lg: 12px;
    --surface-border-subtle: rgba(148, 163, 184, 0.25);
    --surface-border-default: rgba(148, 163, 184, 0.3);
    --surface-border-strong: rgba(148, 163, 184, 0.35);
    --surface-bg-soft: rgba(15, 23, 42, 0.45);
    --surface-bg-muted: rgba(15, 23, 42, 0.32);
    --surface-bg-raised: rgba(30, 41, 59, 0.6);
    --shadow-card-soft: 0 4px 8px -2px rgb(0 0 0 / 0.22);
    --shadow-card-strong: 0 8px 14px -3px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 16px 34px rgba(2, 6, 23, 0.52);
    --focus-ring: 2px solid rgba(125, 211, 252, 0.95);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Borders */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}
/* Gameplay Readability Tokens */
:root {
    --gameplay-empty-fill: #f8fafc;
    --gameplay-empty-stroke: #64748b;
    --gameplay-empty-glow: rgba(14, 165, 233, 0.2);

    --gameplay-occupied-fill: #cbd5e1;
    --gameplay-occupied-stroke: #475569;
    --gameplay-occupied-shadow: rgba(15, 23, 42, 0.28);

    --gameplay-hazard-dirty: #a16207;
    --gameplay-hazard-messy: #ca8a04;
    --gameplay-hazard-broken: #dc2626;
    --gameplay-hazard-chatty: #9333ea;
    --gameplay-hazard-janitor: #0f766e;

    --gameplay-highlight-correct: #22c55e;
    --gameplay-highlight-incorrect: #ef4444;
    --gameplay-highlight-solution: #fde047;
    --gameplay-highlight-pending: #3b82f6;

    --gameplay-queue-chip-bg: rgba(15, 23, 42, 0.72);
    --gameplay-queue-light: rgba(59, 130, 246, 0.2);
    --gameplay-queue-busy: rgba(245, 158, 11, 0.26);
    --gameplay-queue-crunch: rgba(239, 68, 68, 0.28);
}
/* Base / Global Styles */

* {
    box-sizing: border-box;
}

body {
    font-family: "Nunito", sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--app-top-gap) + var(--app-chrome-top))
        calc(var(--app-edge-gap) + var(--app-chrome-right))
        calc(var(--app-bottom-gap) + var(--app-chrome-bottom))
        calc(var(--app-edge-gap) + var(--app-chrome-left));
    overscroll-behavior: none;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

body.top-intrusion-simulated::before {
    content: "";
    position: fixed;
    left: 50%;
    top: calc(var(--safe-area-top) + 0.08rem);
    width: min(82vw, 340px);
    height: calc(var(--top-system-intrusion-height, 0px) + 0.82rem);
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(15, 23, 42, 0.46) 0%,
        rgba(15, 23, 42, 0.12) 58%,
        rgba(15, 23, 42, 0) 78%
    );
    filter: blur(0.5px);
    pointer-events: none;
    z-index: 12000;
}

body.top-intrusion-simulated::after {
    content: "";
    position: fixed;
    left: 50%;
    top: calc(var(--safe-area-top) + 0.14rem);
    width: clamp(168px, 50vw, 244px);
    height: var(--top-system-intrusion-height, 0px);
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.94) 100%);
    border: 1px solid rgba(148, 163, 184, 0.42);
    box-shadow: 0 10px 24px -12px rgba(2, 6, 23, 0.88),
        inset 0 1px 0 rgba(248, 250, 252, 0.16);
    pointer-events: none;
    z-index: 12001;
}

body.is-native-app.platform-ios.orientation-portrait {
    --native-status-bar-fallback: clamp(2.4rem, 5.5vh, 3.25rem);
}

body.is-native-app.platform-android.orientation-portrait {
    --native-status-bar-fallback: clamp(1.28rem, 3.4vh, 1.85rem);
}

body.is-native-app.orientation-landscape {
    --native-status-bar-fallback: clamp(0.42rem, 2.2vh, 1.05rem);
}

/* Typography Defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

p {
    margin: 0;
}
/* Utilities */

.hidden {
    display: none !important;
}

/* Animations that don't belong to specific components logic yet, or shared ones */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.opacity-0 {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

.pointer-events-none {
    pointer-events: none !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Components */
/* Button Components */

/* --- Start Screen Buttons --- */
.start-screen-button {
    color: white;
    font-weight: 700;
    width: 100%;
    min-height: 2.82rem;
    padding: 0.5rem 0.64rem;
    border-radius: var(--surface-radius-lg);
    font-size: 0.92rem;
    line-height: 1.12;
    box-shadow: 0 3px 7px -2px rgba(2, 6, 23, 0.28);
    transition: background-color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.start-screen-button:hover {
    transform: translateY(-1px);
}

.start-screen-button:active {
    transform: translateY(0);
}

.start-screen-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Split Daily card: the mode button keeps the whole card's look; the share
   button docks INSIDE its right edge as a sibling (nested buttons are invalid
   HTML). Reserved padding keeps the subtitle clear of the glyph. */
.daily-mode-slot {
    position: relative;
    width: 100%;
    display: flex;
}

.daily-mode-slot .start-screen-button {
    width: 100%;
}

.daily-mode-slot.daily-share-available .start-screen-button {
    padding-right: 3.1rem;
}

.daily-share-button {
    position: absolute;
    top: 50%;
    right: 0.42rem;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    /* A floating rounded chip, matching the home-chip corner language —
       hard-cornered split edges read foreign inside fully-rounded cards. */
    border-radius: var(--surface-radius-md);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, transform 0.16s ease;
}

.daily-share-button:hover {
    background: rgba(255, 255, 255, 0.22);
}

.daily-share-button:active {
    transform: translateY(-50%) scale(0.94);
}

.daily-share-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* One reveal pulse when the button first appears for the day. */
.daily-share-button.daily-share-reveal {
    animation: daily-share-pop 0.6s ease-out 1;
}

@keyframes daily-share-pop {
    0% { transform: translateY(-50%) scale(0.6); opacity: 0; }
    60% { transform: translateY(-50%) scale(1.12); opacity: 1; }
    100% { transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .daily-share-button.daily-share-reveal {
        animation: none;
    }
}

.mode-button-title {
    font-size: 0.87rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.02;
}

.mode-button-subtitle {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-soft);
    opacity: 0.95;
}

.home-leaderboard-button {
    width: 100%;
    min-height: 2.52rem;
    margin-top: 0.32rem;
    padding: 0.42rem 0.64rem;
    border: 1px solid rgba(125, 211, 252, 0.48);
    border-radius: var(--surface-radius-md);
    background: rgba(8, 47, 73, 0.48);
    color: #e0f2fe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px -4px rgba(8, 47, 73, 0.62);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06rem;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease,
        transform 0.16s ease, box-shadow 0.18s ease;
}

.home-leaderboard-button .mode-button-title {
    color: #f8fafc;
}

.home-leaderboard-button .mode-button-subtitle {
    color: #bae6fd;
}

.home-leaderboard-button:hover {
    transform: translateY(-1px);
    border-color: rgba(186, 230, 253, 0.72);
    background: rgba(12, 74, 110, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 12px -5px rgba(8, 47, 73, 0.75);
}

.home-leaderboard-button:active {
    transform: translateY(0);
}

.home-leaderboard-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.home-leaderboard-button:disabled {
    opacity: 0.72;
    cursor: default;
    transform: none;
}

.mission-claim-button {
    margin-top: 0;
    border: 2px solid rgba(74, 222, 128, 0.5);
    border-radius: var(--surface-radius-md);
    background-color: rgba(21, 128, 61, 0.15);
    color: #4ade80;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    min-height: 1.8rem;
    min-width: 4rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px -1px rgba(2, 6, 23, 0.4);
}

.mission-claim-button.featured {
    border-color: #4ade80;
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

.mission-claim-button.secondary {
    border-color: rgba(74, 222, 128, 0.3);
    background-color: rgba(15, 23, 42, 0.4);
    color: rgba(74, 222, 128, 0.9);
    box-shadow: none;
}

.mission-claim-button:hover {
    background-color: rgba(34, 197, 94, 0.3);
    border-color: #86efac;
    color: #ffffff;
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(2, 6, 23, 0.6);
}

.mission-claim-button:disabled {
    opacity: 0.62;
    cursor: default;
}

.home-mission-share-button {
    margin-bottom: 0.35rem;
    border: 1px solid var(--surface-border-strong);
    border-radius: var(--surface-radius-sm);
    background-color: rgba(15, 23, 42, 0.38);
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    min-height: 2.2rem;
    padding: 0.26rem 0.56rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.home-mission-share-button:hover {
    background-color: rgba(30, 41, 59, 0.72);
    color: #fff;
}

.home-mission-share-button:disabled {
    opacity: 0.7;
    cursor: default;
}

#start-progression-button {
    background-color: var(--color-primary);
    /* #0ea5e9 was slightly different but let's standardize on blue */
}

#start-progression-button:hover {
    background-color: var(--color-primary-hover);
}

#start-endless-button {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid #60a5fa;
}

#start-endless-button:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -3px rgba(37, 99, 235, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

#start-endless-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px -2px rgba(37, 99, 235, 0.8);
}

#start-daily-challenge-button {
    background: linear-gradient(135deg, #b45309 0%, #78350f 100%);
    border: 1px solid #f59e0b;
    box-shadow: 0 4px 12px -3px rgba(180, 83, 9, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

#start-daily-challenge-button .mode-button-title {
    color: #fef3c7;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

#start-daily-challenge-button .mode-button-subtitle {
    color: #fbbf24;
    opacity: 0.9;
}

#start-daily-challenge-button:hover {
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -3px rgba(217, 119, 6, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

#start-daily-challenge-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px -2px rgba(180, 83, 9, 0.8);
}

#start-daily-challenge-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    filter: saturate(0.55);
}

/* Completed-today carryover: acknowledge the ritual is done without dimming the
   replay affordance. A reward-ready state nudges the player toward the payoff. */
#start-daily-challenge-button.daily-complete-today .mode-button-subtitle {
    color: #d1fae5;
}

#start-daily-challenge-button.daily-reward-ready {
    border-color: #4ade80;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.45), 0 6px 16px -4px rgba(22, 163, 74, 0.5);
}

#start-daily-challenge-button.daily-reward-ready .mode-button-subtitle {
    color: #bbf7d0;
    opacity: 1;
}

#start-daily-challenge-button.attention-pulse {
    animation: daily-cta-pulse 620ms ease-out 2;
}

@keyframes daily-cta-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
    }

    100% {
        box-shadow: 0 0 0 9px rgba(245, 158, 11, 0);
    }
}

#character-select-start-button {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 2.66rem;
    box-shadow: 0 6px 12px -4px rgba(37, 99, 235, 0.45);
}

#character-select-start-button .mode-button-subtitle {
    display: none;
}

#character-select-start-button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

/* --- Control Buttons (Modal Hierarchy) --- */
.control-button {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: var(--surface-radius-md);
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.control-button:active {
    transform: translateY(1px) scale(0.995);
}

.control-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Primary */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 4px 8px -2px rgba(37, 99, 235, 0.5);
    font-size: 1.18rem;
    padding: 0.95rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px -4px rgba(37, 99, 235, 0.56);
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

#play-again-button.btn-primary {
    font-size: 1.28rem;
    letter-spacing: 0.01em;
}

/* Secondary */
.btn-secondary {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.88) 0%, rgba(14, 116, 144, 0.9) 100%);
    color: white;
    box-shadow: 0 3px 6px -2px rgba(8, 47, 73, 0.38);
    border: 1px solid rgba(125, 211, 252, 0.36);
    font-size: 1rem;
    padding: 0.82rem 0.95rem;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(6, 95, 111, 0.92) 0%, rgba(12, 74, 110, 0.94) 100%);
}

/* Tertiary */
.btn-tertiary {
    background-color: rgba(15, 23, 42, 0.45);
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.58rem 0.8rem;
    box-shadow: none;
    border: 1px solid var(--surface-border-default);
    margin-top: 0;
}

.btn-tertiary:hover {
    color: white;
    background-color: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.5);
}

.btn-tertiary:active {
    background-color: rgba(30, 41, 59, 0.82);
}

#share-button.btn-tertiary {
    margin-top: 0.1rem;
}

#revive-button.btn-secondary {
    margin-top: 0.12rem;
}

/* --- Peek & Restore Buttons --- */
#peek-modal-button,
#restore-modal-button {
    position: absolute;
    top: var(--fixed-control-top);
    right: var(--fixed-control-right);
    min-height: 2.2rem;
    min-width: 2.2rem;
    max-width: min(48vw, 10.6rem);
    padding: 0.38rem 0.66rem;
    border-radius: var(--radius-full);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--surface-border-default);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.result-modal-visible {
    --utility-modal-status-bump-top: var(--utility-result-safe-bump-top);
    --utility-modal-status-bump-right: var(--utility-result-safe-bump-right);
}

body.modal-peek-active #restore-modal-button {
    top: calc(var(--fixed-control-top) + 0.3rem);
}

#peek-modal-button {
    background-color: rgba(15, 23, 42, 0.4);
    color: var(--text-soft);
}

#peek-modal-button:hover {
    color: white;
    background-color: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.48);
}

#restore-modal-button {
    background-color: rgba(14, 116, 144, 0.92);
    color: white;
    border: 1px solid rgba(125, 211, 252, 0.56);
    box-shadow: 0 2px 5px rgba(8, 47, 73, 0.32);
}

#restore-modal-button:hover {
    background-color: rgba(12, 74, 110, 0.95);
    transform: translateY(-1px);
}

#peek-modal-button svg,
#restore-modal-button svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Mute Toggle */
#mute-toggle.icon-button {
    background-color: var(--surface-bg-soft);
    border: 1px solid var(--surface-border-strong);
    border-radius: 9999px;
    color: var(--color-slate-100);
    font-size: 1.05rem;
    line-height: 1;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#mute-toggle.icon-button:focus-visible,
#peek-modal-button:focus-visible,
#restore-modal-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .start-screen-button,
    .control-button,
    .home-leaderboard-button,
    #character-select-start-button {
        min-height: 3.3rem;
    }

    #mute-toggle.icon-button {
        min-width: 2.55rem;
        min-height: 2.55rem;
    }
}
/* Modal Components */

.custom-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: var(--fixed-overlay-top-padding) 0.7rem var(--fixed-overlay-bottom-padding);
    background-color: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
}

body.has-native-banner .custom-modal {
    padding-bottom: calc(var(--fixed-overlay-bottom-padding) + clamp(0.24rem, 0.8vh, 0.42rem));
}

.custom-modal-content {
    background-color: var(--bg-card);
    background-image: linear-gradient(180deg, rgba(51, 65, 85, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    padding: 1.34rem 1.08rem 1.08rem;
    border-radius: 12px;
    text-align: left;
    box-shadow: var(--shadow-modal);
    border: 1px solid rgba(148, 163, 184, 0.28);
    max-width: calc(100vw - 1.12rem);
    width: min(430px, calc(100vw - 1.12rem));
    max-height: var(--fixed-overlay-available-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    position: relative;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(1.5px);
}

body.has-native-banner .custom-modal-content {
    margin-bottom: clamp(0.36rem, 1.25vh, 0.72rem);
}

.custom-modal:not(.hidden) .custom-modal-content {
    animation: modal-content-enter 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-content-enter {
    from {
        opacity: 0;
        transform: translateY(7px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Override for Peek Mode transparency */
.custom-modal.bg-transparent {
    background-color: transparent !important;
}

#custom-modal-message {
    font-size: 0.98rem;
    line-height: 1.32;
    color: var(--text-main);
    margin-bottom: 0.78rem;
    font-weight: 500;
}

#custom-modal-message .result-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
}

#custom-modal-message .loss-reason {
    color: var(--color-orange-400);
    display: block;
    font-size: 1.14rem;
    margin-bottom: 0;
    line-height: 1.25;
    font-weight: 800;
}

#custom-modal-message .result-support-line {
    color: var(--text-main);
    display: block;
    font-size: 0.88rem;
    line-height: 1.3;
    margin: 0;
}

#custom-modal-message .result-summary-line {
    color: var(--text-soft);
    display: block;
    font-size: 0.84rem;
    line-height: 1.26;
    font-weight: 700;
}

#custom-modal-message .result-earned-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.08rem;
}

#custom-modal-message .result-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.42rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(15, 23, 42, 0.56);
    color: #dbeafe;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

#custom-modal-message .result-chip--daily {
    border-color: rgba(125, 211, 252, 0.5);
    background: rgba(8, 47, 73, 0.62);
    color: #bae6fd;
}

#custom-modal-message .result-chip--reward {
    border-color: rgba(74, 222, 128, 0.55);
    background: rgba(20, 83, 45, 0.5);
    color: #bbf7d0;
    font-weight: 800;
}

#custom-modal-message .result-meta-line {
    font-size: 0.76rem;
    line-height: 1.25;
    margin-top: 0.2rem;
}

#custom-modal-message .social-fallback-note {
    color: var(--text-muted);
}

#modal-controls-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.36rem;
    margin-top: 0.62rem;
    padding-bottom: max(0.16rem, var(--safe-area-bottom));
    width: 100%;
}

#modal-controls-area.result-actions-compact {
    gap: 0.3rem;
    margin-top: 0.5rem;
}

#modal-controls-area.result-actions-compact .control-button {
    min-height: 2.78rem;
}

#modal-controls-area.result-actions-expanded {
    gap: 0.4rem;
}

#modal-controls-area.result-actions-replay-focused .btn-primary {
    min-height: 2.9rem;
}

#modal-controls-area.result-actions-footer-minimal .modal-footer-row {
    margin-top: 0.26rem;
    padding-top: 0;
    border-top: none;
}

.modal-footer-row {
    display: flex;
    flex-direction: row;
    gap: 0.42rem;
    width: 100%;
    justify-content: center;
    margin-top: 0.44rem;
    padding-top: 0.38rem;
    border-top: 1px solid var(--surface-border-default);
}

body.has-native-banner #modal-controls-area {
    margin-top: 0.7rem;
    padding-bottom: max(0.3rem, var(--safe-area-bottom));
}

body.has-native-banner #modal-controls-area.result-actions-compact {
    margin-top: 0.58rem;
    gap: 0.34rem;
}

.modal-footer-row.compact-inline {
    margin-top: 0.26rem;
    padding-top: 0;
    border-top: none;
}

.modal-footer-row.single-action {
    justify-content: stretch;
}

.modal-footer-row.single-action .control-button {
    width: 100%;
}

#custom-modal-message .near-miss-text {
    color: #facc15;
    display: block;
    font-size: 0.84rem;
    margin-bottom: 0.32rem;
}

#custom-modal-message .onboarding-tip-text {
    color: var(--text-soft);
    display: block;
    font-size: 0.82rem;
    margin-top: 0.34rem;
    line-height: 1.28;
}

@media (max-height: 700px) {
    .custom-modal {
        align-items: flex-end;
    }

    .custom-modal-content {
        width: min(430px, 94vw);
        padding: 1.08rem 0.92rem 0.9rem;
        max-height: var(--fixed-overlay-available-height);
    }

    #custom-modal-message {
        margin-bottom: 0.72rem;
    }

    #custom-modal-message .loss-reason {
        font-size: 1.08rem;
    }
}
/* Character Cards */

#character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 0.56rem;
    /* start, not stretch: stretched items take the track's height and the
       track never grows for OS-scaled text (stretch/auto circularity), so
       card text spilled into the next row. With `start` each card sizes to
       its own content; the card min-height keeps the normal look uniform. */
    align-items: start;
    grid-auto-rows: minmax(clamp(7.8rem, 19.5vh, 9.35rem), auto);
}

.character-card {
    background-color: var(--surface-bg-raised);
    border-radius: var(--surface-radius-lg);
    min-height: clamp(7.8rem, 19.5vh, 9.35rem);
    padding: clamp(0.42rem, 1.25vh, 0.54rem) 0.5rem 0.6rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: var(--shadow-card-soft);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* One explicit gap between every stacked piece (badge, art, name,
       subtitle, quip, progress, unlock line) instead of per-element micro
       margins: spacing stays even and can never fold into overlap when the
       OS scales text. */
    gap: 0.18rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.character-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 8px 14px -5px rgba(2, 6, 23, 0.45);
    background-color: rgba(30, 41, 59, 0.9);
}

.character-card:active {
    transform: translateY(0);
}

.character-card.selected,
.character-card.preselected {
    border-color: rgba(59, 130, 246, 0.88);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.34);
    background-color: rgba(30, 58, 138, 0.34);
    transform: translateY(-1px);
}

.character-card-selection {
    min-height: 1.08rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #bfdbfe;
}

.character-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.character-card.locked {
    cursor: not-allowed;
    opacity: 0.58;
    filter: grayscale(0.9);
}

.character-card.locked:hover {
    transform: none;
    border-color: transparent;
}

.character-card.locked .character-name {
    color: var(--text-soft);
}

.character-card.locked .character-unlock-info {
    color: var(--text-muted);
}

.character-card svg {
    width: 100%;
    height: clamp(52px, 8.5vh, 70px);
    flex-shrink: 0;
}

/* Vertical rhythm comes from the card's flex gap — the stacked pieces below
   carry NO margins of their own. */
.character-name {
    font-weight: 600;
    margin-top: 0.08rem;
    color: var(--text-main);
    font-size: 0.82rem;
}

.character-unlock-info {
    font-size: 0.68rem;
    color: var(--text-soft);
    line-height: 1.2;
}

/* Collection personality: every card carries its runner's Flow line.
   Clamped to two lines so a long quip (or OS-scaled text) can never crowd
   the unlock line beneath it. */
.character-quip {
    font-size: 0.66rem;
    font-style: italic;
    color: var(--text-subtle);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Endowed progress toward the nearer unlock path — a partially-filled bar
   turns "someday" into "soon". */
.character-unlock-progress {
    width: 82%;
    height: 5px;
    margin: 0.1rem auto 0;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.28);
    overflow: hidden;
}

.character-unlock-progress span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #38bdf8, #f59e0b);
    transition: width 0.4s ease;
}

.character-subtitle {
    font-size: 0.72rem;
    color: var(--text-subtle);
    line-height: 1.2;
}

@media (max-width: 480px) {
    #character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .character-card {
        min-height: clamp(7.45rem, 18.8vh, 9.1rem);
        padding: clamp(0.38rem, 1.1vh, 0.5rem) 0.44rem 0.55rem;
    }
}

@media (max-width: 480px) and (max-height: 700px) {
    #character-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.42rem;
        /* auto, not 1fr: rows must grow with OS-scaled text (see base rule). */
        grid-auto-rows: minmax(7rem, auto);
    }

    .character-card {
        min-height: 7rem;
        padding: 0.32rem 0.28rem;
    }

    .character-card-selection {
        min-height: 0.88rem;
        font-size: 0.56rem;
        margin-bottom: 0.04rem;
    }

    .character-card svg {
        height: 42px;
    }

    .character-name {
        margin-top: 0.12rem;
        font-size: 0.68rem;
    }

    .character-subtitle,
    .character-unlock-info {
        margin-top: 0.06rem;
        font-size: 0.56rem;
        line-height: 1.12;
    }
}

/* Game Specific */
/* Game Layout & HUD */

/* --- Screens Container --- */
#start-screen,
#character-select-screen {
    background-color: var(--color-slate-700);
    /* Subtle gradient for more depth */
    background: linear-gradient(to bottom, var(--color-slate-700), var(--color-slate-800));
    border-radius: clamp(16px, 4vw, 22px);
    padding: 0.78rem 0.78rem;
    padding-top: var(--meta-top-dead-zone);
    padding-bottom: var(--surface-bottom-padding);
    text-align: center;
    border: 1px solid var(--surface-border-subtle);
    box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(148, 163, 184, 0.08);
    width: 100%;
    max-width: 34rem;
    height: var(--app-canvas-height);
    min-height: min(100%, var(--app-canvas-height));
    max-height: var(--app-canvas-height);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scroll-padding-top: var(--meta-top-dead-zone);
    scroll-padding-bottom: calc(var(--surface-bottom-padding) + var(--banner-dead-zone));
    position: relative;
    display: flex;
    flex-direction: column;
    /* Anchor for absolute children like privacy link */
}

#home-content-stack {
    width: 100%;
    min-height: 0;
    margin-block: auto;
    display: flex;
    flex-direction: column;
}

#home-content-stack>*+*,
#character-select-screen>*+* {
    margin-top: 0.34rem;
}

#start-screen:not(.hidden),
#character-select-screen:not(.hidden),
#game-screen:not(.hidden) {
    animation: screen-surface-enter 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes screen-surface-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#start-screen-title,
#character-select-title {
    font-size: calc(var(--meta-title-size) * 1.35);
    line-height: 1;
    font-weight: 900;
    color: var(--color-primary);
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6);
    margin: 0;
    letter-spacing: -0.015em;
}

#home-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.08rem;
    flex-shrink: 0;
}

#start-screen-subtitle {
    font-size: var(--meta-subtitle-size);
    line-height: 1.08;
    color: var(--text-muted);
    font-weight: 600;
}

#home-mode-section {
    text-align: left;
    margin-top: var(--meta-cta-safety-gap);
    flex-shrink: 0;
}

#start-screen-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 0.32rem;
    flex-direction: column;
}

/* Privacy Link */
.start-privacy-link {
    position: static;
    display: inline-block;
    width: auto;
    text-align: center;
    margin-top: clamp(0.36rem, 1vh, 0.62rem);
    padding-top: 0;
    font-size: 0.75rem;
    opacity: 0.6;
    text-decoration: underline;
    color: var(--text-muted);
    flex-shrink: 0;
}

.start-privacy-link:focus,
.start-privacy-link:hover {
    opacity: 1;
}

#home-onboarding-hint {
    margin-top: 0.36rem;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text-soft);
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--surface-radius-md);
    padding: 0.28rem 0.46rem;
    min-height: 0;
}

#home-status-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    background: rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--surface-radius-md) var(--surface-radius-md) 0 0;
    padding: 0.43rem 0.58rem;
    border-bottom: none;
    flex-shrink: 0;
}

.home-status-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    background: transparent;
    border: none;
    padding: 0;
}

.home-character-chip {
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--surface-radius-md);
    padding: 0.2rem 0.5rem;
    background: rgba(30, 41, 59, 0.45);
    transition: border-color 140ms ease, background-color 140ms ease;
    font: inherit;
    color: inherit;
}

.home-character-chip:hover,
.home-character-chip:focus-visible {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(37, 99, 235, 0.18);
    outline: none;
}

#home-character-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-slate-50);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.8);
    white-space: nowrap;
}

.home-streak-freeze {
    font-size: 0.8rem;
    line-height: 1;
    margin-left: 0.15rem;
    filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.75));
}

#home-daily-calendar {
    display: flex;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.3rem 0.58rem 0.1rem;
}

.home-daily-calendar-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.home-daily-calendar-dot.completed {
    background: #f59e0b;
    border-color: rgba(251, 191, 36, 0.9);
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.55);
}

.home-daily-calendar-dot.today {
    border-color: rgba(96, 165, 250, 0.95);
    border-width: 1.5px;
}

.home-status-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle);
    line-height: 1;
}

.home-status-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.05rem;
}

#home-high-score-value,
#home-streak-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-slate-50);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.8);
}

.home-status-unit {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-slate-300);
}

#home-progression {
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-top: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 0 0 var(--surface-radius-md) var(--surface-radius-md);
    background: rgba(15, 23, 42, 0.25);
    padding: 0.36rem 0.5rem 0.5rem;
    margin-top: 0 !important;
    flex-shrink: 0;
}

#home-progression-headline {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.8);
}

.home-level-prefix {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 800;
}

#home-level-title-value {
    margin-left: 0.15rem;
    color: var(--color-orange-400);
}

#home-progression-detail {
    margin-top: 0.25rem;
}

.home-xp-capsule {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(15, 23, 42, 0.4);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--color-orange-300);
}

.home-xp-icon {
    font-size: 0.75rem;
    color: var(--color-orange-400);
    text-shadow: 0 0 4px rgba(251, 146, 60, 0.5);
}

.progression-dot {
    margin: 0 0.35rem;
    opacity: 0.5;
}

#home-progression-note {
    margin-top: 0.14rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

#home-missions {
    margin-top: 0.35rem;
    text-align: left;
    border: none;
    border-radius: 0;
    padding: 0.28rem 0.12rem 0.12rem;
    background: transparent;
    flex: 0 1 auto;
    min-height: 0;
    max-height: clamp(8rem, 25vh, 12rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

#home-missions.onboarding-locked {
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: radial-gradient(circle at center top, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.15) 100%);
    border-radius: var(--surface-radius-lg);
    /* The locked teaser is a static placard, not the scrollable mission list:
       the container's viewport-clamped max-height + overflow-y:auto would put
       a scrollbar on three lines of copy. Size it naturally instead. */
    max-height: none;
    overflow-y: visible;
    padding: 0.6rem 0.5rem;
    text-align: center;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}

#home-missions.onboarding-locked #home-missions-title {
    color: var(--color-slate-400);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

#home-missions.onboarding-locked #home-missions-summary {
    color: var(--color-slate-50);
    font-weight: 700;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    margin-top: 0;
    margin-bottom: 0.25rem;
}

#home-missions.onboarding-locked .home-mission-feedback {
    /* If any text gets rendered by fallback, make it blend */
    color: var(--text-muted);
    font-size: 0.65rem;
}

#home-missions-title {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
}

#home-missions-summary {
    margin-top: 0.08rem;
    margin-bottom: 0.25rem;
    color: var(--text-soft);
    font-size: 0.72rem;
}

#home-mission-feedback {
    margin-bottom: 0.22rem;
    font-size: 0.72rem;
    color: var(--color-success);
    font-weight: 600;
}

#home-mission-feedback:not(.hidden) {
    animation: status-fade-slide 160ms ease-out;
}

/* Level-up ceremony: character art + their Flow line + a doorway to the
   roster, rendered under the plain claim line. */
.level-up-celebration {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--surface-radius-md);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(56, 189, 248, 0.10));
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.level-up-celebration-art svg {
    width: 34px;
    height: 56px;
    display: block;
}

.level-up-celebration-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.level-up-celebration-headline {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fbbf24;
}

.level-up-celebration-detail {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-soft);
}

.level-up-celebration-freeze {
    font-size: 0.7rem;
    font-weight: 700;
    color: #7dd3fc;
}

.level-up-celebration-cta {
    border: none;
    border-radius: var(--surface-radius-md);
    background: var(--color-warning);
    color: var(--color-slate-900);
    font-weight: 800;
    font-size: 0.72rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
}

.level-up-celebration-cta:hover {
    background: #fbbf24;
}

/* Near-miss magnetism: one gentle pulse on the XP capsule when a runner is
   a single level away. */
.near-miss-pulse {
    animation: near-miss-breathe 1.1s ease-in-out 2;
}

@keyframes near-miss-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .near-miss-pulse {
        animation: none;
    }
}

#home-missions-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.home-mission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0;
    padding: 0.3rem 0;
    background: transparent;
}

.home-mission-row:last-child {
    border-bottom: none;
}

.home-mission-main {
    min-width: 0;
}

.home-mission-row.onboarding-locked {
    opacity: 0.5;
}

@keyframes reward-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.home-mission-row.completed,
.home-mission-row.claim-featured,
.home-mission-row.claim-secondary {
    border-color: rgba(74, 222, 128, 0.3);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.08) 0%, transparent 100%);
    border-radius: var(--surface-radius-sm);
    padding-left: 0.35rem;
}

#home-missions.has-claim-ready .home-mission-row.claim-featured,
#home-missions.has-claim-ready .home-mission-row.claim-secondary {
    animation: reward-pulse 2s infinite ease-out;
}

#home-missions.multi-claim-ready .home-mission-row.claim-secondary {
    border-style: dashed;
    background: rgba(30, 41, 59, 0.34);
}

#home-missions.has-claim-ready #home-missions-summary {
    color: #bbf7d0;
}

#home-missions.multi-claim-ready .home-mission-row.deemphasized-progress {
    opacity: 0.9;
}

.home-mission-title {
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.18;
}

.home-mission-row.daily-reward {
    border-left: 2px solid rgba(125, 211, 252, 0.55);
    padding-left: 0.35rem;
    border-radius: var(--surface-radius-sm);
}

.home-mission-badge {
    display: inline-block;
    margin-right: 0.32rem;
    padding: 0.04rem 0.3rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(125, 211, 252, 0.4);
    background: rgba(8, 47, 73, 0.6);
    color: #bae6fd;
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.home-mission-row.claim-secondary .home-mission-title,
.home-mission-row.deemphasized-progress .home-mission-title {
    font-weight: 600;
}

.home-mission-progress {
    margin-top: 0.08rem;
    color: var(--text-muted);
    font-size: 0.69rem;
}

.home-mission-status {
    margin-top: 0.2rem;
    color: var(--color-success);
    font-size: 0.73rem;
    font-weight: 700;
}

#character-select-subtitle {
    font-size: var(--meta-subtitle-size);
    color: var(--text-soft);
    line-height: 1.1;
    max-width: 24ch;
    margin-inline: auto;
    flex-shrink: 0;
}

#character-grid {
    margin-top: var(--meta-cta-safety-gap);
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0.08rem 0.1rem;
    margin-inline: -0.1rem;
}

#character-select-selection-status {
    margin-top: 0.22rem;
    min-height: 1.2rem;
    font-size: 0.78rem;
    color: var(--text-soft);
    border-radius: var(--surface-radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.2);
    padding: 0.3rem 0.42rem;
    transition: color 140ms ease;
    flex-shrink: 0;
}

#character-select-start-button {
    margin: 0.18rem auto 0;
    width: 100%;
    flex-shrink: 0;
}

.character-select-back-button {
    margin: 0.3rem auto 0;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--surface-radius-md);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 1.4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 140ms ease, border-color 140ms ease;
}

.character-select-back-button:hover,
.character-select-back-button:focus-visible {
    color: var(--color-slate-50);
    border-color: rgba(96, 165, 250, 0.6);
    outline: none;
}

@keyframes status-fade-slide {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    #start-screen,
    #character-select-screen {
        --meta-top-intrusion-buffer: clamp(0.74rem, 2.55vh, 1.2rem);
        --meta-cta-safety-gap: clamp(0.44rem, 1.65vh, 0.86rem);
        --meta-title-size: clamp(0.98rem, 6.1vw, 1.14rem);
        --meta-subtitle-size: clamp(0.58rem, 2.6vw, 0.66rem);
        padding: 0.68rem 0.56rem;
        padding-top: var(--meta-top-dead-zone);
        padding-bottom: clamp(0.48rem, 1.3vh, 0.68rem);
    }
}

/* --- Main Game Screen --- */
#game-screen {
    width: 100%;
    max-width: 52rem;
    text-align: center;
    background-color: rgba(15, 23, 42, 0.52);
    background-image: linear-gradient(180deg, rgba(30, 41, 59, 0.52) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-radius: clamp(12px, 3.2vw, 18px);
    padding: 0.58rem 0.52rem;
    padding-top: var(--game-screen-top-padding);
    padding-bottom: var(--game-screen-bottom-padding);
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.08);
    transition: background-color 0.5s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    height: var(--app-canvas-height);
    min-height: min(100%, var(--app-canvas-height));
    max-height: var(--app-canvas-height);
    box-shadow: 0 8px 24px -18px rgba(2, 6, 23, 0.74);
}

#game-screen>*+* {
    margin-top: 0;
}

/* Theme Classes (overrides background) */
.theme-arcade {
    background-color: #334155 !important;
}

.theme-office {
    background-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.theme-dive-bar {
    background-color: #1a1a1a !important;
    color: #cbd5e1 !important;
}

.theme-luxury-hotel {
    background-color: #fef3c7 !important;
    color: #78350f !important;
}

/* Theme-specific Overrides for Contrast */
.theme-office .bathroom-walls {
    background-color: white !important;
    border-color: #94a3b8 !important;
    /* slate-400 */
}

.theme-airport {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}


/* --- Headers & HUD --- */
/* --- Headers & HUD --- */
#score-header,
#level-timer-header {
    width: 100%;
    padding: 0.15rem 0.25rem;
    margin-bottom: 0.1rem;
}

#score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-slate-200);
    gap: 0.55rem;
}

body.modal-peek-active #score-header {
    padding-right: calc(var(--fixed-control-right) + 4.8rem);
}

#score-area {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.42);
}

#high-score-area {
    padding: 0.2rem 0.4rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.42);
    font-size: 0.8rem;
}

#score-character-avatar {
    position: relative;
    width: 20px;
    height: 27px;
    border-radius: 999px;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

#score-character-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}

#score-character-avatar.flow-state-avatar {
    background: rgba(250, 204, 21, 0.14);
    box-shadow:
        0 0 0 2px rgba(254, 240, 138, 0.88),
        0 0 12px rgba(250, 204, 21, 0.72);
    animation: flow-state-avatar-glow 1400ms ease-in-out infinite alternate;
}

#score-character-avatar.flow-state-avatar::after {
    content: "✦";
    position: absolute;
    top: -0.42rem;
    right: -0.46rem;
    color: #fde047;
    font-size: 0.68rem;
    line-height: 1;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.9);
}

#flow-state-quip {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.5rem);
    z-index: 45;
    width: max-content;
    max-width: min(54vw, 13.5rem);
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(254, 240, 138, 0.58);
    border-radius: 0.65rem 0.65rem 0.65rem 0.16rem;
    background: rgba(66, 32, 6, 0.96);
    box-shadow: 0 7px 16px rgba(2, 6, 23, 0.36);
    color: #fef9c3;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    pointer-events: none;
    transform: translateY(-50%);
    animation: flow-state-quip-in 160ms ease-out;
}

@keyframes flow-state-avatar-glow {
    from {
        box-shadow:
            0 0 0 2px rgba(254, 240, 138, 0.74),
            0 0 8px rgba(250, 204, 21, 0.46);
    }

    to {
        box-shadow:
            0 0 0 2px rgba(254, 240, 138, 0.96),
            0 0 15px rgba(250, 204, 21, 0.78);
    }
}

@keyframes flow-state-quip-in {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-3px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

#level-timer-header {
    display: grid;
    grid-template-areas: "mute title timer";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.38rem;
}

#mute-toggle {
    grid-area: mute;
    justify-self: start;
    font-size: 1.05rem;
    background: none;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 9999px;
    cursor: pointer;
    padding: 0.18rem 0.42rem;
    line-height: 1;
    color: var(--color-slate-100);
    background-color: rgba(15, 23, 42, 0.45);
}

#level-title-container {
    grid-area: title;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    margin-bottom: 0;
    min-width: 0;
}

#level-title {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-slate-50);
    letter-spacing: 0.01em;
}

#star-container {
    min-height: 0;
}

#timer-container {
    grid-area: timer;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.17rem 0.38rem;
    border-radius: 9999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(15, 23, 42, 0.45);
}

#timer-area {
    font-size: 1.28rem;
    font-weight: 900;
    color: var(--color-warning);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.time-bonus-flash {
    animation: pulse-green 0.4s ease-in-out;
    color: var(--color-success) !important;
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    #game-screen {
        --game-screen-top-padding: clamp(0.42rem, 1.3vh, 0.62rem);
        --game-screen-bottom-padding: clamp(0.32rem, 0.9vh, 0.42rem);
        padding: 0.5rem 0.42rem;
        padding-top: var(--game-screen-top-padding);
        padding-bottom: var(--game-screen-bottom-padding);
    }

    #score-header {
        font-size: 0.78rem;
    }

    #level-title {
        font-size: 0.84rem;
        line-height: 1.08;
    }

    #timer-area {
        font-size: 1.1rem;
    }

    #score-header,
    #level-timer-header {
        gap: 0.35rem;
        padding-left: 0.05rem;
        padding-right: 0.05rem;
    }

    #timer-container {
        padding: 0.12rem 0.3rem;
    }

    #mute-toggle {
        font-size: 0.94rem;
        padding: 0.14rem 0.35rem;
    }
}

/* --- Bladder --- */
#bladder-container {
    width: 18px;
    height: 24px;
    border: 2px solid var(--color-accent);
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-slate-700);
}

#bladder-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-accent);
    transition: height 1s linear;
}

#bladder-fill.emptying {
    height: 0 !important;
    transition: height 0.5s ease-in-out !important;
}

/* ===== World map (campaign hub) ===== */
#world-map-screen {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 0.9rem 1.2rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: clamp(12px, 3.2vw, 18px);
    max-height: 100dvh;
    overflow-y: auto;
}

#world-map-screen.hidden {
    display: none;
}

#world-map-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

#world-map-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--color-slate-50);
    margin: 0;
}

#world-map-total-stars {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 1px 4px rgba(2, 6, 23, 0.7);
}

.world-map-section {
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--surface-radius-md);
    padding: 0.6rem 0.65rem 0.7rem;
    margin-bottom: 0.55rem;
}

.world-map-section-locked {
    opacity: 0.62;
}

.world-map-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.world-map-section-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-slate-50);
}

.world-map-section-stars {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fbbf24;
    white-space: nowrap;
}

.world-map-section-locked .world-map-section-stars {
    color: var(--text-subtle);
}

.world-map-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.4rem;
}

.world-map-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3rem;
    border-radius: 10px;
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.5);
    color: var(--color-slate-50);
    font: inherit;
    cursor: pointer;
    padding: 0.25rem 0.15rem;
    transition: border-color 140ms ease, transform 140ms ease;
}

.world-map-node:hover:not(.world-map-node-locked),
.world-map-node:focus-visible {
    border-color: rgba(96, 165, 250, 0.75);
    transform: translateY(-1px);
    outline: none;
}

.world-map-node-level {
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
}

.world-map-node-stars {
    font-size: 0.6rem;
    line-height: 1;
    color: #fbbf24;
    min-height: 0.65rem;
    letter-spacing: 0.05em;
}

.world-map-node-cleared {
    background: rgba(37, 99, 235, 0.28);
    border-color: rgba(96, 165, 250, 0.45);
}

.world-map-node-current {
    border-color: rgba(251, 191, 36, 0.9);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
    animation: world-map-current-pulse 1.6s ease-in-out infinite;
}

.world-map-node-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

@keyframes world-map-current-pulse {
    0%,
    100% {
        box-shadow: 0 0 4px rgba(251, 191, 36, 0.25);
    }

    50% {
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .world-map-node-current {
        animation: none;
    }
}

#world-map-back-button {
    align-self: center;
}

#world-map-continue-button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(96, 165, 250, 0.55);
    color: #f8fafc;
    text-align: left;
}

#world-map-continue-button:hover,
#world-map-continue-button:focus-visible {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    outline: none;
}

#coach-banner {
    position: absolute;
    /* Bottom-anchored: the top band is owned by the timer egg and the queue
       strip — the banner used to tangle with both. Down here it floats over
       the bathroom floor, the emptiest zone on the screen. */
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    max-width: min(86%, 26rem);
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 999px;
    color: var(--color-slate-50, #f8fafc);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
    padding: 0.45rem 0.95rem;
    pointer-events: none;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.45);
    /* Dedicated keyframes: the shared status-fade-slide animates transform
       and silently dropped the translateX(-50%) centering mid-entry, which
       is what shoved the banner into the timer egg. */
    animation: coach-banner-in 220ms ease;
}

@keyframes coach-banner-in {
    from {
        opacity: 0;
        transform: translate(-50%, 6px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

#coach-banner.hidden {
    display: none;
}

#game-stage {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.12rem;
    padding-bottom: 0;
}

@media (max-height: 760px) {
    #game-screen {
        --game-screen-top-padding: clamp(0.32rem, 1vh, 0.5rem);
        --game-screen-bottom-padding: clamp(0.28rem, 0.8vh, 0.38rem);
        min-height: min(100%, var(--app-canvas-height));
        max-height: var(--app-canvas-height);
        padding-top: var(--game-screen-top-padding);
        padding-bottom: var(--game-screen-bottom-padding);
    }

    #score-header,
    #level-timer-header {
        margin-bottom: 0;
    }

    #level-title {
        font-size: 0.82rem;
    }

    #timer-area {
        font-size: 1.02rem;
    }
}

@media (max-height: 740px) {
    #start-screen,
    #character-select-screen {
        --meta-top-intrusion-buffer: clamp(0.64rem, 2.15vh, 1.04rem);
        --meta-cta-safety-gap: clamp(0.38rem, 1.35vh, 0.74rem);
    }

    #home-content-stack>*+*,
    #character-select-screen>*+* {
        margin-top: 0.28rem;
    }

    #home-content-stack {
        margin-block: 0;
    }

    #home-missions {
        max-height: clamp(5.8rem, 18vh, 8.4rem);
        overflow-y: auto;
        padding: 0.24rem 0.12rem 0.1rem;
        min-height: 0;
    }

    #home-missions-summary,
    #home-mission-feedback {
        margin-bottom: 0.18rem;
    }

    #character-select-subtitle {
        font-size: clamp(0.62rem, 1.8vw, 0.68rem);
    }
}

/* --- Overlays --- */
.visually-hidden {
    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;
}

#flicker-overlay,
#frenzy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

#flicker-overlay.flicker-active {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0.3;
}

#frenzy-overlay {
    background: radial-gradient(
        circle at 50% 42%,
        transparent 36%,
        rgba(250, 204, 21, 0.2) 100%
    );
    animation: flow-state-wash 1800ms ease-in-out infinite alternate;
}

/* Compact Flow State status. Internal frenzy-* selectors preserve the runtime
   and analytics contract while player-facing copy owns the branded name.
   Mount #frenzy-status as a direct child of
   #game-screen so it participates in the flex layout without covering a
   tappable urinal. JS owns the benefit/time text and may update
   #frenzy-progress width or --frenzy-progress (1 -> 0). */
#frenzy-status {
    --frenzy-progress: 1;
    align-self: center;
    position: relative;
    z-index: 35;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "copy"
        "track";
    align-items: center;
    row-gap: 0.2rem;
    width: min(100%, 28rem);
    min-height: 2rem;
    padding: 0.28rem 0.48rem 0.24rem;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, 0.72);
    border-radius: 0.7rem;
    background: linear-gradient(105deg, rgba(69, 26, 3, 0.96), rgba(15, 23, 42, 0.96));
    color: var(--color-slate-50, #f8fafc);
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.34), 0 0 12px rgba(250, 204, 21, 0.16);
    pointer-events: none;
    animation: frenzy-status-enter 180ms ease-out, frenzy-status-glow 900ms ease-in-out infinite alternate;
}

#frenzy-status[hidden],
#frenzy-status[aria-hidden="true"],
#frenzy-status[data-active="false"] {
    display: none;
}

/* If Frenzy expires while a choice is still live, keep its flex row until the
   round resolves. Removing it immediately would shift tappable urinals under
   the player's finger. JS releases the row during the board transition. */
#frenzy-status[data-active="false"][data-reserve-space="true"] {
    display: grid;
    visibility: hidden;
    animation: none;
}

.frenzy-status-copy {
    grid-area: copy;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title benefit time";
    align-items: center;
    column-gap: 0.42rem;
}

.frenzy-status-title {
    grid-area: title;
    color: #422006;
    background: linear-gradient(180deg, #fef08a, #fbbf24);
    border: 1px solid rgba(254, 240, 138, 0.9);
    border-radius: 999px;
    padding: 0.16rem 0.4rem;
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.frenzy-status-benefit {
    grid-area: benefit;
    min-width: 0;
    display: block;
    color: #fef3c7;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

#frenzy-time {
    grid-area: time;
    min-width: 2.8rem;
    color: #fde047;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.frenzy-status-track {
    grid-area: track;
    width: 100%;
    height: 0.2rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(254, 243, 199, 0.18);
}

#frenzy-progress {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #f59e0b 0%,
        #fde047 38%,
        #fef9c3 50%,
        #fbbf24 64%,
        #fde047 100%
    );
    background-size: 180% 100%;
    transform: scaleX(var(--frenzy-progress, 1));
    transform-origin: left center;
    transition: transform 100ms linear;
    animation: flow-state-meter 1400ms ease-in-out infinite alternate;
}

@keyframes flow-state-meter {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -80% 0;
    }
}

#frenzy-status[data-expiring="true"] {
    border-color: rgba(251, 146, 60, 0.9);
}

#frenzy-status[data-expiring="true"] #frenzy-time {
    color: #fb923c;
}

@keyframes frenzy-status-enter {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes frenzy-status-glow {
    from {
        box-shadow: 0 5px 14px rgba(2, 6, 23, 0.34), 0 0 7px rgba(250, 204, 21, 0.12);
    }

    to {
        box-shadow: 0 5px 14px rgba(2, 6, 23, 0.34), 0 0 15px rgba(250, 204, 21, 0.28);
    }
}

@keyframes flow-state-wash {
    from {
        opacity: 0.42;
    }

    to {
        opacity: 0.58;
    }
}

@media (max-width: 520px) {
    #frenzy-status {
        padding-inline: 0.38rem;
    }

    .frenzy-status-copy {
        column-gap: 0.3rem;
    }

    .frenzy-status-title {
        font-size: 0.62rem;
        padding-inline: 0.32rem;
    }

    .frenzy-status-benefit {
        font-size: 0.72rem;
        white-space: normal;
    }

    #frenzy-time {
        min-width: 2.45rem;
        font-size: 0.76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #frenzy-overlay,
    #frenzy-status,
    #score-character-avatar.flow-state-avatar,
    #flow-state-quip,
    #frenzy-progress {
        animation: none;
    }

    #frenzy-overlay {
        opacity: 0.48;
    }

    #frenzy-progress {
        transition: none;
    }
}

/* WAIT/GO phase indicator: a floating word, not a scrim — the board stays
   readable through the queue (the dim lives on .bathroom-walls) and the
   WAIT→GO! flip is the loudest signal that the turn has started. */
#wait-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    border-radius: 8px;
    -webkit-text-stroke: 1px var(--color-warning);
    color: var(--color-accent);
    text-shadow: 0 4px 18px rgba(2, 6, 23, 0.55);
    animation: wait-indicator-in 0.25s ease;
}

#wait-overlay.go {
    color: #4ade80;
    -webkit-text-stroke: 1px #166534;
    animation: go-indicator-pop 0.45s ease;
}

@keyframes wait-indicator-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes go-indicator-pop {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    60% {
        opacity: 1;
        transform: scale(1.16);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Urinals & Environment */

#bathroom-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.bathroom-walls {
    background-color: var(--color-slate-200);
    border: 2px solid var(--color-slate-400);
    border-radius: 10px;
    padding: 5px 4px;
    margin: 0 auto;
    width: 100%;
    max-width: min(98vw, 760px);
    min-height: clamp(220px, 54vh, 560px);
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s ease, border-color 0.5s ease;
    position: relative;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#urinal-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 126px;
    width: 100%;
    transform-origin: center center;
    transition: transform 0.3s ease-out;
}

.urinal-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.urinal-row-divider {
    width: 80%;
    max-width: 500px;
    height: 7px;
    background-color: var(--color-slate-600);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Single Urinal Item */
.urinal {
    height: 100px;
    width: 58px;
    cursor: pointer;
    transition: transform 0.16s ease-in-out, filter 0.16s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
    isolation: isolate;
}

.urinal::before,
.urinal::after {
    content: "";
    position: absolute;
    border-radius: 10px;
    inset: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
    z-index: 3;
}

.urinal::before {
    border: 2px solid transparent;
}

.urinal::after {
    inset: 5px;
    border: 2px dashed transparent;
    z-index: 2;
}

.urinal-fixture-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.urinal-path-main {
    stroke-width: 2;
    transition: fill 0.16s ease-in-out, stroke 0.16s ease-in-out, stroke-width 0.16s ease-in-out,
        filter 0.16s ease-in-out;
}

.urinal-state-layer {
    transition: filter 0.18s ease-in-out, opacity 0.18s ease-in-out;
}

/* Baseline Readability States */
.urinal.state-empty .urinal-path-main {
    fill: var(--gameplay-empty-fill);
    stroke: var(--gameplay-empty-stroke);
}

.urinal.state-empty .urinal-cake.playable-cake {
    fill: #67e8f9;
    stroke: #0284c7;
    stroke-width: 0.85;
}

.urinal.state-occupied .urinal-path-main,
.urinal.state-blocked .urinal-path-main {
    fill: var(--gameplay-occupied-fill);
    stroke: var(--gameplay-occupied-stroke);
}

.urinal .urinal-cake.blocked-cake {
    fill: #94a3b8;
    stroke: #64748b;
    stroke-width: 0.6;
}

.urinal.state-selectable::before {
    opacity: 0.8;
    border-color: rgba(14, 165, 233, 0.36);
}

/* Fixture variants get NO tinted rings: the silhouettes ARE the identity
   (short fixture + step stool; splayed privacy wings). Selectable variants
   share the standard blue affordance ring so "tappable" reads uniformly. */

/* Crouch for the tiny fixture: squash the avatar (and its walking clone —
   the clone inherits the class) plus the occupant dressed into the stall on
   arrival, with apologetic dignity. The fixture svg itself stays upright.
   Transition-only, so reduced-motion needs no special case. */
#player-avatar.kids-crouch svg {
    transform: scaleY(0.78) translateY(9px);
    transition: transform 0.3s ease;
}

.urinal.kids-crouch svg:not(.urinal-fixture-svg) {
    transform: scaleY(0.78) translateY(7px);
}

.urinal.state-blocked::before {
    opacity: 0.85;
    border-color: rgba(71, 85, 105, 0.42);
}

/* Interaction States */
@media (hover: hover) and (pointer: fine) {
    .urinal.state-selectable:hover .urinal-path-main {
        stroke: #0284c7;
        filter: brightness(1.08);
    }

    .urinal.state-selectable:hover::before {
        opacity: 1;
        border-color: #0ea5e9;
        box-shadow: 0 0 0 2px var(--gameplay-empty-glow);
    }
}

.urinal.state-selectable:active {
    transform: scale(0.98);
}

.urinal.player-chosen-correct .urinal-path-main {
    stroke: var(--gameplay-highlight-correct);
    stroke-width: 3;
    filter: brightness(1.14);
}

.urinal.player-chosen-correct::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-correct);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
}

.urinal.player-chosen-incorrect .urinal-path-main {
    stroke: var(--gameplay-highlight-incorrect);
    stroke-width: 4;
    animation: pulse-red 0.85s infinite;
}

.urinal.player-chosen-incorrect::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-incorrect);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.32);
}

.urinal.player-chosen-incorrect.player-chosen-hazard .urinal-path-main {
    animation: none;
    stroke-width: 3.2;
    filter: brightness(1.06);
}

.urinal.player-chosen-incorrect.player-chosen-hazard::before {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.34), 0 0 0 4px rgba(15, 23, 42, 0.16);
}

/* Hazard fail-reveals carry no per-family stroke/fill overrides: the red
   incorrect treatment says "wrong", the fixture's content says "why". */

@keyframes pulse-red {
    0% {
        stroke-opacity: 1;
    }

    50% {
        stroke-opacity: 0.5;
    }

    100% {
        stroke-opacity: 1;
    }
}

.urinal.ai-chosen .urinal-path-main {
    animation: ai-flash 0.8s ease-in-out;
}

@keyframes ai-flash {

    0%,
    100% {
        stroke: var(--color-primary);
        fill: #60a5fa;
    }

    50% {
        stroke: var(--color-success);
        fill: #dcfce7;
        stroke-width: 3px;
    }
}

.urinal.player-selection-pending .urinal-path-main {
    stroke: var(--gameplay-highlight-pending);
    stroke-width: 3;
    filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.6));
}

.urinal.player-selection-pending::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-pending);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.24);
}

/* Special Urinals */
.urinal.golden .urinal-path-main {
    fill: #fef08a;
    /* yellow-200 */
    stroke: var(--color-accent);
    animation: golden-pulse 1.15s infinite;
}

.urinal.golden::before {
    opacity: 1;
    border-color: rgba(245, 158, 11, 0.76);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.24);
}

.urinal[role="button"]:focus-visible {
    outline: 3px solid var(--gameplay-highlight-pending, #60a5fa);
    outline-offset: 3px;
    border-radius: 0.5rem;
}

/* Interaction truth must outrank the golden lure. These selectors deliberately
   live after the base golden treatment and progress pending -> correct/wrong:
   a resolved choice can never keep advertising itself with the gold pulse. */
.urinal.golden.player-selection-pending .urinal-path-main {
    fill: #fef3c7;
    stroke: var(--gameplay-highlight-pending);
    stroke-width: 3;
    animation: none;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.72));
}

.urinal.golden.player-selection-pending::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-pending);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.urinal.golden.player-chosen-correct .urinal-path-main {
    fill: #fef08a;
    stroke: var(--gameplay-highlight-correct);
    stroke-width: 4;
    animation: none;
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.78));
}

.urinal.golden.player-chosen-correct::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-correct);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.36), 0 0 12px rgba(250, 204, 21, 0.28);
}

.urinal.golden.player-chosen-incorrect .urinal-path-main {
    fill: #fecaca;
    stroke: var(--gameplay-highlight-incorrect);
    stroke-width: 4;
    animation: none;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.88));
}

.urinal.golden.player-chosen-incorrect::before {
    opacity: 1;
    border-color: var(--gameplay-highlight-incorrect);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4), 0 0 14px rgba(220, 38, 38, 0.34);
}

@keyframes golden-pulse {
    0% {
        filter: drop-shadow(0 0 3px #fde047);
    }

    50% {
        filter: drop-shadow(0 0 7px #fde047);
    }

    100% {
        filter: drop-shadow(0 0 3px #fde047);
    }
}

/* Solution Highlight (Debug/Cheat/Tutorial) */
.urinal.urinal-solution-highlight .urinal-path-main {
    stroke: #f59e0b;
    stroke-width: 2.8;
}

.urinal.urinal-solution-highlight::after {
    opacity: 1;
    border-color: var(--gameplay-highlight-solution);
}

.urinal.player-chosen-incorrect.urinal-solution-highlight::after {
    border-color: rgba(239, 68, 68, 0.82);
    border-style: solid;
}

.urinal.player-chosen-correct.urinal-solution-highlight::after {
    border-color: rgba(34, 197, 94, 0.82);
    border-style: solid;
}

@keyframes solution-pulse {
    0% {
        filter: drop-shadow(0 0 2px #fef08a);
    }

    50% {
        filter: drop-shadow(0 0 6px #fef08a);
    }

    100% {
        filter: drop-shadow(0 0 2px #fef08a);
    }
}

/* Diegetic tutorial hint: gentle breathing glow on the safe spot(s). */
.urinal.tutorial-hint-pulse {
    animation: tutorial-hint-breathe 1.4s ease-in-out infinite;
}

.urinal.tutorial-hint-pulse::after {
    opacity: 1;
    border-color: rgba(96, 165, 250, 0.75);
}

@keyframes tutorial-hint-breathe {
    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(147, 197, 253, 0.55));
        transform: translateY(0);
    }

    50% {
        filter: drop-shadow(0 0 9px rgba(147, 197, 253, 0.9));
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .urinal.golden .urinal-path-main {
        animation: none;
        filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.72));
    }

    .urinal.tutorial-hint-pulse {
        animation: none;
        filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.8));
    }
}

.urinal.family-occupied .urinal-state-layer {
    filter: drop-shadow(0 1px 1px var(--gameplay-occupied-shadow));
}

/* Hazard families carry NO body strokes, tinted fills, or cell rings — every
   fixture is a normal urinal; the CONTENT differentiates (mess decals, the
   chatty patron, the BROKEN sign + tape, the janitor). Colored outlines were
   pre-decal color-coding and read as extra UI ("why is this one outlined?").
   The only body-color identity in the game is the golden urinal.
   Dirty/messy keep white porcelain (one step dimmer than selectable-empty
   #f8fafc) so the mess pops; other blocked fixtures keep the blocked slate
   body from the baseline rules above. */
.urinal.family-dirty .urinal-path-main,
.urinal.family-messy .urinal-path-main {
    fill: #f1f5f9;
}

.urinal-divider {
    width: 8px;
    height: 72px;
    background-color: var(--color-slate-400);
    border-radius: 3px;
    transition: background-color 0.5s ease;
}

/* Misc Urinal Elements */
.urinal-cake {
    fill: #7dd3fc;
    stroke: #0ea5e9;
    stroke-width: 0.8;
}

.flusher.broken {
    transform: rotate(-20deg) translate(-7px, 3px);
    opacity: 0.6;
}

/* Characters/Animations on Urinals */
.head-shake .body {
    animation: head-shake-anim 0.5s ease-in-out;
}

@keyframes head-shake-anim {

    0%,
    100% {
        transform: translateX(0) rotate(0);
    }

    20% {
        transform: translateX(-3px) rotate(-2deg);
    }

    40% {
        transform: translateX(3px) rotate(2deg);
    }

    60% {
        transform: translateX(-3px) rotate(-2deg);
    }

    80% {
        transform: translateX(3px) rotate(2deg);
    }
}

.speech-bubble {
    animation: pulse 1.5s ease-in-out infinite;
}

@media (max-width: 480px) {
    .bathroom-walls {
        min-height: clamp(208px, 50vh, 500px);
        padding: 5px 3px;
    }

    #urinal-area {
        min-height: 114px;
    }

    .urinal {
        height: 88px;
        width: 50px;
    }

    .urinal-divider {
        height: 63px;
        width: 7px;
    }
}

@media (max-height: 740px) {
    .bathroom-walls {
        min-height: clamp(184px, 43vh, 360px);
    }
}

/* Door */
#door {
    position: absolute;
    bottom: 0px;
    right: 100%;
    margin-right: 2px;
    width: 25px;
    height: 85px;
    background-color: #78350f;
    border: 2px solid #451a03;
    border-right: none;
    border-radius: 4px 0 0 4px;
    z-index: 10;
}

#door-knob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
    width: 4px;
    height: 4px;
    background-color: #facc15;
    border-radius: 50%;
}

#player-avatar {
    position: absolute;
    bottom: 10px;
    left: -40px;
    /* Initial position (off-screen or by door), JS moves it */
    width: 45px;
    height: 80px;
    z-index: 20;
    transition: left 0.5s linear, top 0.5s linear;
}

/* Note: Player Avatar styles seem to be mostly dynamic, but ensuring basic style here */

@media (max-width: 540px) {
    .bathroom-walls {
        min-height: clamp(212px, 51vh, 510px);
        padding: 5px 3px;
    }

    .urinal {
        height: 90px;
        width: 51px;
    }

    .urinal-divider {
        height: 64px;
    }

    .urinal-row-divider {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-height: 760px) {
    .bathroom-walls {
        min-height: clamp(186px, 44vh, 372px);
    }
}
/* Queue Area
   The strip is the gate for all input during the wait phase, so its states
   are explicit: live "N ahead" chip → "You're up!" → the whole strip fades
   (keeping its layout space) once the turn starts. The board itself dims
   under #game-screen.phase-queue and brightens back as the standing GO cue. */

#queue-area {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.05rem;
    margin-right: 2px;
    min-height: 78px;
    margin-bottom: 0;
    padding: 0.14rem 0.18rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: var(--gameplay-queue-light);
    position: relative;
    /* The "You" label hangs below the row; keep it above the board chrome. */
    z-index: 3;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Turn handoff: fade the strip out but keep its space so the board never
   shifts mid-level. The 0.9s delay lets the "You're up!" flip land first.
   The transition lives on this state only, so removing the class (next
   level's render) snaps the strip back instantly. */
#queue-area.queue-strip-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease 0.9s, visibility 0s linear 1.35s;
}

#queue-label {
    align-self: center;
    font-weight: 700;
    color: var(--color-slate-200);
    margin-right: 0.35rem;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    background: var(--gameplay-queue-chip-bg);
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    white-space: nowrap;
}

.queue-person {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    position: relative;
    /* Bottom room keeps the hanging "You" label inside the strip. */
    margin-bottom: 16px;
    animation: queue-bob 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 1px rgba(15, 23, 42, 0.28));
}

@keyframes queue-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.queue-person.player-in-queue {
    animation: player-bob 1.5s ease-in-out infinite;
}

.queue-player-marker svg path {
    fill: #fb923c;
    stroke: #9a3412;
    stroke-width: 0.6;
}

@keyframes player-bob {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* "You're up" pulse on the player marker at turn start. Declared after
   .player-in-queue so it wins the animation shorthand. */
.queue-person.player-turn-active {
    animation: player-turn-pulse 0.5s ease-in-out 2;
    filter: drop-shadow(0 0 7px rgba(251, 146, 60, 0.95));
}

@keyframes player-turn-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }
}

.queue-person-label {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--color-slate-200);
    white-space: nowrap;
    z-index: 1;
}

#queue-area[data-queue-pressure="busy"] {
    background: var(--gameplay-queue-busy);
    border-color: rgba(245, 158, 11, 0.56);
}

#queue-area[data-queue-pressure="crunch"] {
    background: var(--gameplay-queue-crunch);
    border-color: rgba(239, 68, 68, 0.54);
}

/* --- Wait phase: the room is visibly "not yours yet" ------------------- */

/* Re-declare the base transitions (urinals.css) alongside filter — the
   shorthand would otherwise clobber the themed wall color transitions. */
.bathroom-walls {
    transition: background-color 0.5s ease, border-color 0.5s ease, filter 0.25s ease;
}

/* Dim + desaturate the whole room (urinals, patrons, themed props like the
   stadium banner) while the queue runs. Light enough to study the board;
   the lift at turn start is the persistent "go" signal. */
#game-screen.phase-queue .bathroom-walls {
    filter: brightness(0.74) saturate(0.55);
}

#game-screen.phase-queue .urinal,
#game-screen.phase-queue .urinal.state-selectable {
    cursor: default;
}

#game-screen.phase-queue .urinal.state-selectable::before {
    opacity: 0.35;
    border-color: rgba(100, 116, 139, 0.4);
}

#game-screen.phase-queue .urinal.state-selectable:active {
    transform: none;
}

/* Denied tap during the wait: a quick "not yet" headshake on the tapped
   urinal (paired with the soft thud + coach toast from the game loop). */
.urinal.queue-denied-shake {
    animation: queue-denied-shake 0.4s ease;
}

@keyframes queue-denied-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px) rotate(-1.2deg);
    }

    40% {
        transform: translateX(5px) rotate(1deg);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* --- Turn handoff beats ------------------------------------------------ */

/* Golden pulse on the timer group the moment the countdown becomes live. */
.timer-active-flash {
    animation: timer-flash 0.8s ease;
    border-radius: 999px;
}

@keyframes timer-flash {

    0%,
    100% {
        transform: scale(1);
        box-shadow: none;
    }

    35% {
        transform: scale(1.12);
        box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.4), 0 0 18px rgba(250, 204, 21, 0.6);
    }
}

/* Door held hidden through the wait pops in when it's finally your turn. */
#door.door-reveal {
    animation: door-reveal 0.45s ease;
}

@keyframes door-reveal {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    60% {
        opacity: 1;
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* A patron settling into the spot they just took during the queue. */
.urinal.just-arrived {
    animation: just-arrived-pop 0.4s ease;
}

@keyframes just-arrived-pop {
    0% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .urinal.queue-denied-shake,
    #door.door-reveal,
    .urinal.just-arrived,
    .queue-person.player-turn-active,
    .timer-active-flash {
        animation: none;
    }
}

@media (max-height: 760px) {
    #queue-area {
        min-height: 64px;
    }
}

@media (max-width: 390px) {
    #queue-area {
        min-height: 60px;
    }

    #queue-label {
        font-size: 0.68rem;
    }
}
/* Round-feedback juice: score pops, PERFECT flash, frenzy burst.
   All elements are pointer-events:none overlays inside #game-screen. */

.score-pop {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    transform: translate(-50%, -100%);
    pointer-events: none;
    animation: score-pop-rise 900ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.score-pop-points {
    font-size: 1.15rem;
    font-weight: 900;
    color: #4ade80;
    text-shadow: 0 2px 6px rgba(2, 6, 23, 0.75);
    line-height: 1;
}

.score-pop-stars {
    font-size: 0.75rem;
    color: #fbbf24;
    text-shadow: 0 1px 4px rgba(2, 6, 23, 0.7);
    line-height: 1;
    letter-spacing: 0.12em;
}

.score-pop-frenzy .score-pop-points {
    color: #fde047;
    font-size: 1.35rem;
}

@keyframes score-pop-rise {
    0% {
        opacity: 0;
        transform: translate(-50%, -92%) scale(0.7);
    }

    18% {
        opacity: 1;
        transform: translate(-50%, -112%) scale(1.08);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -190%) scale(1);
    }
}

.perfect-flash {
    position: absolute;
    top: 38%;
    left: 50%;
    z-index: 45;
    transform: translate(-50%, -50%);
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #fde047;
    -webkit-text-stroke: 1.5px rgba(120, 53, 15, 0.85);
    text-shadow: 0 4px 18px rgba(250, 204, 21, 0.45), 0 2px 4px rgba(2, 6, 23, 0.6);
    pointer-events: none;
    animation: perfect-flash-pop 750ms cubic-bezier(0.18, 0.9, 0.32, 1.2) forwards;
}

@keyframes perfect-flash-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4) rotate(-4deg);
    }

    22% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(1.5deg);
    }

    58% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -64%) scale(1.02);
    }
}

.frenzy-particle {
    position: absolute;
    z-index: 42;
    font-size: 1rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: frenzy-particle-burst 1000ms ease-out forwards;
}

@keyframes frenzy-particle-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x, 0px)), calc(-50% + var(--burst-y, -40px))) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {

    .score-pop,
    .perfect-flash,
    .frenzy-particle {
        animation: none;
        display: none;
    }
}
/* ===== Per-world room theming =====
   Each campaign world is a real place built from four layers, all asset-free:
   1. Wall treatment — multi-layer background gradients incl. a MID-WALL
      texture so the space between the décor band and the board reads as a
      wall, not a void (the 2026-07-13 review's core finding).
   2. Décor band (::before) — kept only where a composed banner earned it
      (DEPARTURES / GO TEAM GO / PARDON OUR DUST); elsewhere replaced by props.
   3. #room-decor props — positioned spans injected by LevelRenderer from
      worldDecor.ts; emojis live inside designed objects (frames, signs,
      shelves), never floating. One subtle ambient animation per world.
   4. Floor strip (::after) — tall enough to carry the room's material.
   All decoration is pointer-events-free and sits behind the board. */

.bathroom-walls::before,
.bathroom-walls::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.bathroom-walls::before {
    top: 0;
    height: 3.4rem;
}

.bathroom-walls::after {
    bottom: 0;
    height: 1.6rem;
}

#urinal-area {
    position: relative;
    z-index: 1;
}

/* --- Decor layer (props behind the board, above the wall paint) --------- */

#room-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.decor-prop {
    position: absolute;
    line-height: 1;
    user-select: none;
}

/* --- Patron accents: per-world accessory on occupied patrons ------------ */

.patron-accent {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.patron-accent::before {
    content: none;
}

/* --- World-entry establishing beat --------------------------------------
   Animates the room CONTAINER (opacity/transform only), never
   .bathroom-walls, so it cannot fight the queue phase-dim filter. */

#game-screen.world-reveal #bathroom-container {
    animation: room-reveal 0.65s ease;
}

@keyframes room-reveal {
    0% {
        opacity: 0.15;
        transform: scale(0.982);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- The Office: corporate gray, cubicle partitions, break-room props --- */

.theme-office .bathroom-walls {
    background:
        repeating-linear-gradient(90deg,
            transparent 0 5.5rem,
            rgba(100, 116, 139, 0.14) 5.5rem calc(5.5rem + 3px)),
        linear-gradient(180deg, #e6ebf3 0%, #d3dce8 100%) !important;
    border-color: #8494a9 !important;
}

/* Fluorescent light valance with a barely-there hum. */
.theme-office .bathroom-walls::before {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.85), rgba(203, 213, 225, 0.05));
    animation: office-hum 4.5s ease-in-out infinite;
}

@keyframes office-hum {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.82;
    }
}

.theme-office .bathroom-walls::after {
    height: 2rem;
    background:
        repeating-linear-gradient(0deg,
            transparent 0 0.92rem,
            rgba(71, 85, 105, 0.16) 0.92rem 1rem),
        repeating-linear-gradient(90deg, #b6c2d1 0 2.2rem, #adb9c9 2.2rem 4.4rem);
    border-top: 2px solid #8494a9;
}

.theme-office .prop-office-poster {
    top: 0.9rem;
    left: 6%;
    padding: 0.34rem 0.42rem 0.3rem;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #475569;
    text-align: center;
    background: #fffdf5;
    border: 2px solid #94a3b8;
    border-top: 6px solid #f59e0b;
    border-radius: 2px;
    transform: rotate(-2.5deg);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18);
}

.theme-office .prop-office-clock {
    top: 0.75rem;
    right: 7%;
    font-size: 1.2rem;
    padding: 0.1rem;
    background: #f8fafc;
    border: 2px solid #64748b;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(15, 23, 42, 0.2);
}

.theme-office .prop-office-cooler {
    bottom: 2.2rem;
    right: 4.5%;
    font-size: 0.95rem;
    padding: 0.5rem 0.3rem 0.62rem;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 70%, #eef2f7 70%, #dde5ee 100%);
    border: 2px solid #7d93ad;
    border-radius: 0.55rem 0.55rem 0.2rem 0.2rem;
    box-shadow: 0 3px 4px rgba(15, 23, 42, 0.22);
}

.theme-office .urinal.state-occupied .patron-accent {
    top: 56%;
    font-size: 0.6rem;
}

.theme-office .urinal.state-occupied .patron-accent::before {
    content: "👔";
}

.theme-office #door {
    background: #b09468;
    border-color: #7c6844;
}

/* --- The Grand Hotel: cream, real wainscot, gilt mirror, sconces -------- */

.theme-luxury-hotel .bathroom-walls {
    background:
        /* panel seams, lower 42% only */
        repeating-linear-gradient(90deg,
            transparent 0 3.4rem,
            rgba(140, 110, 60, 0.18) 3.4rem calc(3.4rem + 2px)) left bottom / 100% 42% no-repeat,
        /* wainscot rail + two-tone wall */
        linear-gradient(180deg,
            #fbf3dd 0%,
            #f6e9c9 58%,
            #b4924e 58%,
            #b4924e calc(58% + 3px),
            #ead9b0 calc(58% + 3px),
            #e2cf9f 100%) !important;
    border-color: #a3823f !important;
}

.theme-luxury-hotel .bathroom-walls::before {
    background: linear-gradient(180deg, rgba(180, 146, 78, 0.2), transparent);
}

.theme-luxury-hotel .bathroom-walls::after {
    height: 2rem;
    background:
        linear-gradient(105deg, transparent 0 44%, rgba(160, 130, 70, 0.28) 45% 46%, transparent 47% 100%),
        linear-gradient(70deg, transparent 0 62%, rgba(160, 130, 70, 0.22) 63% 64%, transparent 65% 100%),
        linear-gradient(180deg, #f3ecd8, #e8dcc0);
    border-top: 2px solid #b4924e;
}

.theme-luxury-hotel .prop-hotel-mirror {
    top: 0.7rem;
    left: 50%;
    width: 3rem;
    height: 3.9rem;
    margin-left: -1.5rem;
    background:
        radial-gradient(ellipse at 32% 26%, rgba(255, 255, 255, 0.85) 0 18%, transparent 42%),
        linear-gradient(160deg, #f2ead2 0%, #d9cba4 100%);
    border: 3px double #b4924e;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(120, 90, 40, 0.3);
}

.theme-luxury-hotel .prop-hotel-sconce {
    top: 1.1rem;
    font-size: 1rem;
    padding-bottom: 0.22rem;
    border-bottom: 3px solid #b4924e;
    filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.55));
    animation: sconce-flicker 3.2s ease-in-out infinite;
}

.theme-luxury-hotel .prop-hotel-sconce-left {
    left: 12%;
}

.theme-luxury-hotel .prop-hotel-sconce-right {
    right: 12%;
    animation-delay: 1.4s;
}

@keyframes sconce-flicker {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.55));
    }

    50% {
        filter: drop-shadow(0 0 11px rgba(255, 210, 110, 0.85));
    }
}

.theme-luxury-hotel .urinal.state-occupied .patron-accent {
    top: 33%;
    font-size: 0.72rem;
}

.theme-luxury-hotel .urinal.state-occupied .patron-accent::before {
    content: "🎩";
}

.theme-luxury-hotel #door {
    background: #5d4023;
    border-color: #3e2a15;
}

/* --- The Dive Bar: grime streaks, neon BAR sign, slapped stickers ------- */

.theme-dive-bar .bathroom-walls {
    background:
        repeating-linear-gradient(90deg,
            transparent 0 2.8rem,
            rgba(0, 0, 0, 0.24) 2.8rem 3.1rem),
        radial-gradient(circle at 82% 64%, rgba(190, 242, 100, 0.05) 0 3rem, transparent 4rem),
        linear-gradient(180deg, #2b2b23 0%, #22221b 100%) !important;
    border-color: #4a4a3a !important;
}

.theme-dive-bar .bathroom-walls::before {
    background: linear-gradient(180deg, rgba(190, 242, 100, 0.1), transparent);
}

.theme-dive-bar .bathroom-walls::after {
    height: 1.9rem;
    background:
        radial-gradient(circle at 18% 45%, rgba(148, 163, 184, 0.4) 0 2px, transparent 3px),
        radial-gradient(circle at 57% 70%, rgba(148, 163, 184, 0.3) 0 2px, transparent 3px),
        radial-gradient(circle at 83% 35%, rgba(148, 163, 184, 0.35) 0 2px, transparent 3px),
        repeating-linear-gradient(90deg, #1b1b15 0 3rem, #201e17 3rem 6rem);
    border-top: 2px solid #4a4a3a;
}

.theme-dive-bar .prop-bar-sign {
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    padding: 0.22rem 0.6rem;
    font-size: 1rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.18em;
    color: #d9f99d;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(190, 242, 100, 0.7);
    border-radius: 0.5rem;
    text-shadow:
        0 0 6px rgba(190, 242, 100, 0.9),
        0 0 16px rgba(190, 242, 100, 0.55);
    box-shadow: 0 0 12px rgba(190, 242, 100, 0.28);
    animation: neon-buzz 6s linear infinite;
}

@keyframes neon-buzz {

    0%,
    86%,
    92%,
    100% {
        opacity: 1;
    }

    88% {
        opacity: 0.45;
    }

    90% {
        opacity: 0.85;
    }

    91% {
        opacity: 0.55;
    }
}

.theme-dive-bar .prop-bar-sticker {
    font-size: 0.85rem;
    opacity: 0.9;
    filter: saturate(0.85);
}

.theme-dive-bar .prop-bar-sticker-guitar {
    top: 34%;
    left: 5%;
    transform: rotate(-14deg);
}

.theme-dive-bar .prop-bar-sticker-beer {
    top: 26%;
    right: 6%;
    transform: rotate(9deg);
}

.theme-dive-bar .prop-bar-sticker-star {
    bottom: 24%;
    left: 8%;
    transform: rotate(22deg);
    font-size: 0.7rem;
}

.theme-dive-bar .urinal.state-occupied .patron-accent {
    top: 44%;
    font-size: 0.56rem;
}

.theme-dive-bar .urinal.state-occupied .patron-accent::before {
    content: "🕶️";
}

.theme-dive-bar #door {
    background: #3f3a2d;
    border-color: #262218;
}

/* --- The Airport: terminal blue-gray, departures board, window band ----- */

.theme-airport .bathroom-walls {
    background:
        /* window mullions, window band only */
        repeating-linear-gradient(90deg,
            transparent 0 4rem,
            rgba(70, 90, 110, 0.5) 4rem calc(4rem + 3px)) left top 32% / 100% 17% no-repeat,
        /* sky through the window band */
        linear-gradient(180deg,
            rgba(125, 147, 173, 0.9) 0,
            rgba(125, 147, 173, 0.9) 2px,
            #a8cdf0 2px,
            #d3e8fa calc(100% - 2px),
            rgba(125, 147, 173, 0.9) calc(100% - 2px)) left top 32% / 100% 17% no-repeat,
        linear-gradient(180deg, #dde6f0 0%, #cbd7e5 100%) !important;
    border-color: #7d93ad !important;
}

.theme-airport .bathroom-walls::before {
    content: "🛫 DEPARTURES";
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: #f5d90a;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.1rem;
    margin: 0.45rem 12% 0;
    background: #16202e;
    border-radius: 6px;
    opacity: 0.92;
}

.theme-airport .bathroom-walls::after {
    height: 2rem;
    background:
        radial-gradient(circle at 10% 40%, #8fa3b8 0 4px, transparent 5px),
        radial-gradient(circle at 30% 72%, #f1f5f9 0 3px, transparent 4px),
        radial-gradient(circle at 48% 30%, #64748b 0 4px, transparent 5px),
        radial-gradient(circle at 66% 68%, #94a8bd 0 3px, transparent 4px),
        radial-gradient(circle at 86% 42%, #f1f5f9 0 4px, transparent 5px),
        #ccd6e3;
    border-top: 2px solid #7d93ad;
}

/* The plane rides the window band, forever mid-journey. */
.theme-airport .prop-airport-window {
    top: 34.5%;
    left: -12%;
    font-size: 1.05rem;
    animation: plane-drift 17s linear infinite;
}

@keyframes plane-drift {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Room width (walls cap at min(98vw, 760px)) + exit margin, so the
           plane never spends its cycle invisible beyond the clip. */
        transform: translateX(calc(min(98vw, 760px) + 8rem));
    }
}

.theme-airport .prop-airport-gate {
    top: 3.6rem;
    right: 5%;
    padding: 0.2rem 0.4rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #f5d90a;
    background: #16202e;
    border-radius: 4px;
    opacity: 0.9;
}

.theme-airport .urinal.state-occupied .patron-accent {
    top: 31%;
    font-size: 0.62rem;
}

.theme-airport .urinal.state-occupied .patron-accent::before {
    content: "🎧";
}

.theme-airport #door {
    background: #5b7089;
    border-color: #3c4c60;
}

/* --- The Stadium: concrete blocks, pennant, bunting, trophy shelf ------- */

.theme-stadium {
    background-color: #2a3440 !important;
    color: #e2e8f0 !important;
}

.theme-stadium .bathroom-walls {
    background:
        repeating-linear-gradient(0deg,
            transparent 0 2.4rem,
            rgba(90, 100, 115, 0.16) 2.4rem calc(2.4rem + 2px)),
        repeating-linear-gradient(90deg,
            transparent 0 5rem,
            rgba(90, 100, 115, 0.13) 5rem calc(5rem + 2px)),
        linear-gradient(180deg, #d7dbe0 0%, #c3c9d1 100%) !important;
    border-color: #6b7683 !important;
}

.theme-stadium .bathroom-walls::before {
    content: "📣 GO TEAM GO 📣";
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.1rem;
    margin: 0.45rem 10% 0;
    background: repeating-linear-gradient(90deg, #b91c1c 0 2rem, #991b1b 2rem 4rem);
    border-radius: 6px;
    opacity: 0.95;
    transform-origin: top center;
    animation: banner-sway 5.5s ease-in-out infinite alternate;
}

@keyframes banner-sway {
    0% {
        transform: rotate(-0.5deg);
    }

    100% {
        transform: rotate(0.5deg);
    }
}

.theme-stadium .bathroom-walls::after {
    height: 2.1rem;
    background:
        linear-gradient(180deg, transparent 0 52%, rgba(255, 255, 255, 0.8) 52% 62%, transparent 62%),
        linear-gradient(180deg, #3f9e4d, #338442);
    border-top: 2px solid #256632;
}

.theme-stadium .prop-stadium-bunting {
    top: 3.1rem;
    left: 4%;
    right: 4%;
    height: 0.8rem;
    background-image:
        linear-gradient(45deg, #dc2626 50%, transparent 50%),
        linear-gradient(-45deg, #f59e0b 50%, transparent 50%);
    background-size: 1.15rem 0.8rem;
    background-repeat: repeat-x;
    opacity: 0.85;
}

.theme-stadium .prop-stadium-trophy {
    top: 5.4rem;
    right: 6%;
    font-size: 0.95rem;
    padding-bottom: 0.16rem;
    border-bottom: 3px solid #6b7683;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35));
}

.theme-stadium .urinal.state-occupied .patron-accent {
    top: 56%;
    font-size: 0.62rem;
}

.theme-stadium .urinal.state-occupied .patron-accent::before {
    content: "🧣";
}

.theme-stadium #door {
    background: #8a94a1;
    border-color: #5a636e;
}

/* --- The Renovation Zone: plywood grain, caution tape, hanging sheet ---- */

.theme-renovation {
    background-color: #3a3125 !important;
    color: #f1e9d8 !important;
}

.theme-renovation .bathroom-walls {
    background:
        repeating-linear-gradient(0deg,
            transparent 0 0.5rem,
            rgba(140, 110, 60, 0.09) 0.5rem 0.56rem),
        linear-gradient(180deg, rgba(248, 244, 232, 0.9), rgba(233, 224, 201, 0.9)),
        repeating-linear-gradient(90deg, #d9c9a3 0 4rem, #c9b88b 4rem calc(4rem + 3px), #d2c096 calc(4rem + 3px) 8rem) !important;
    border-color: #8a6d3b !important;
}

.theme-renovation .bathroom-walls::before {
    content: "🚧 PARDON OUR DUST 🚧";
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin: 0.5rem 8% 0;
    background: repeating-linear-gradient(45deg, #facc15 0 0.9rem, #111827 0.9rem 1.8rem);
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 0.65);
    opacity: 0.96;
}

.theme-renovation .bathroom-walls::after {
    height: 2rem;
    background:
        radial-gradient(circle at 22% 38%, rgba(90, 70, 30, 0.3) 0 2px, transparent 3px),
        radial-gradient(circle at 71% 62%, rgba(90, 70, 30, 0.26) 0 2px, transparent 3px),
        repeating-linear-gradient(90deg, #a98f5f 0 2.6rem, #9d8352 2.6rem 5.2rem);
    border-top: 2px dashed #6b5426;
}

.theme-renovation .prop-reno-ladder {
    bottom: 2.4rem;
    left: 3%;
    font-size: 1.7rem;
    transform: rotate(5deg);
    filter: drop-shadow(0 2px 2px rgba(58, 49, 37, 0.4));
}

.theme-renovation .prop-reno-bucket {
    bottom: 2.15rem;
    right: 5%;
    font-size: 1.05rem;
    filter: drop-shadow(0 2px 2px rgba(58, 49, 37, 0.4));
}

/* Plastic sheeting draped from the top-right corner, swaying in a draft. */
.theme-renovation .prop-reno-sheet {
    top: 0;
    right: 0;
    width: 32%;
    height: 42%;
    background: linear-gradient(200deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 78%, transparent);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-left-radius: 40%;
    transform-origin: top right;
    animation: sheet-sway 7s ease-in-out infinite alternate;
}

@keyframes sheet-sway {
    0% {
        transform: skewX(-3deg);
    }

    100% {
        transform: skewX(-7.5deg);
    }
}

.theme-renovation .urinal.state-occupied .patron-accent {
    top: 33%;
}

.theme-renovation .urinal.state-occupied .patron-accent::before {
    content: "⛑️";
}

.theme-renovation #door {
    background: #c9a55e;
    border-color: #8a6d3b;
}

/* --- The Gala: velvet damask, chandelier, velvet ropes, red carpet ------ */

.theme-gala {
    background-color: #1d1230 !important;
    color: #f5e9ff !important;
}

.theme-gala .bathroom-walls {
    background:
        radial-gradient(circle at 0.9rem 0.9rem, rgba(255, 255, 255, 0.05) 0 3px, transparent 4px) 0 0 / 1.8rem 1.8rem,
        linear-gradient(180deg, #2c1b47 0%, #241239 100%) !important;
    border-color: #c9a227 !important;
    box-shadow: inset 0 0 60px rgba(10, 4, 24, 0.4), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-gala .bathroom-walls::before {
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.22), transparent);
}

.theme-gala .bathroom-walls::after {
    height: 2rem;
    background:
        linear-gradient(180deg, #e7c14f 0 3px, transparent 3px),
        linear-gradient(180deg, #8c1f2f, #6e1624);
    border-top: 2px solid #c9a227;
}

/* Chandelier: gold arc (::before) with hanging crystals that twinkle. */
.theme-gala .prop-gala-chandelier {
    top: 1.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    color: #ffe082;
    text-shadow: 0 0 8px rgba(255, 224, 130, 0.9);
    animation: crystal-twinkle 3.8s ease-in-out infinite;
}

.theme-gala .prop-gala-chandelier::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    width: 2.9rem;
    height: 1.35rem;
    margin-left: -1.45rem;
    border: 3px solid #e7c14f;
    border-bottom: none;
    border-radius: 2.9rem 2.9rem 0 0;
    box-shadow: 0 -2px 8px rgba(231, 193, 79, 0.35);
}

@keyframes crystal-twinkle {

    0%,
    100% {
        text-shadow: 0 0 8px rgba(255, 224, 130, 0.9);
        opacity: 1;
    }

    50% {
        text-shadow: 0 0 14px rgba(255, 234, 160, 1);
        opacity: 0.82;
    }
}

/* Velvet ropes flanking the room above the carpet. */
.theme-gala .prop-gala-rope {
    bottom: 2.2rem;
    width: 4.6rem;
    height: 1.9rem;
    border-bottom: 4px solid #b91c1c;
    border-radius: 0 0 55% 55%;
}

.theme-gala .prop-gala-rope::before,
.theme-gala .prop-gala-rope::after {
    content: "";
    position: absolute;
    bottom: -0.16rem;
    width: 0.3rem;
    height: 1.7rem;
    background: linear-gradient(180deg, #f4d47c 0 22%, #c9a227 22% 100%);
    border-radius: 999px 999px 2px 2px;
}

.theme-gala .prop-gala-rope::before {
    left: -0.1rem;
}

.theme-gala .prop-gala-rope::after {
    right: -0.1rem;
}

.theme-gala .prop-gala-rope-left {
    left: 2%;
}

.theme-gala .prop-gala-rope-right {
    right: 2%;
}

.theme-gala .urinal.state-occupied .patron-accent {
    top: 56%;
    font-size: 0.54rem;
}

.theme-gala .urinal.state-occupied .patron-accent::before {
    content: "🎀";
}

.theme-gala #door {
    background: #43245e;
    border-color: #c9a227;
}

/* --- The Space Station: dense starfield, porthole Earth, console -------- */

.theme-space-station {
    background-color: #05070f !important;
    color: #dbeafe !important;
}

.theme-space-station .bathroom-walls {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
        radial-gradient(circle at 64% 12%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 86% 42%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 38% 55%, rgba(255, 255, 255, 0.6) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 74% 78%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 10% 68%, rgba(255, 255, 255, 0.75) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 34%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle at 29% 84%, rgba(255, 255, 255, 0.65) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 2.5px),
        radial-gradient(ellipse at 70% 30%, rgba(99, 102, 241, 0.14) 0 30%, transparent 55%),
        linear-gradient(180deg, #0b1224 0%, #070c1a 100%) !important;
    border-color: #38bdf8 !important;
}

.theme-space-station .bathroom-walls::before {
    content: none;
}

.theme-space-station .bathroom-walls::after {
    height: 1.8rem;
    background:
        repeating-linear-gradient(90deg, transparent 0 1.9rem, rgba(56, 189, 248, 0.25) 1.9rem calc(1.9rem + 2px)),
        linear-gradient(180deg, rgba(56, 189, 248, 0.35), rgba(56, 189, 248, 0.1));
    border-top: 2px solid #38bdf8;
    box-shadow: 0 -6px 14px rgba(56, 189, 248, 0.25);
}

/* Earth through a riveted porthole, glow slowly breathing. */
.theme-space-station .prop-space-porthole {
    top: 0.8rem;
    right: 6%;
    font-size: 1.45rem;
    padding: 0.3rem;
    background: radial-gradient(circle, #0a1020 55%, #131c33 100%);
    border: 3px solid #94a3b8;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px #334155,
        0 0 14px rgba(56, 189, 248, 0.4);
}

/* Control console with blinking status lights. */
.theme-space-station .prop-space-panel {
    top: 42%;
    left: 4%;
    width: 2.7rem;
    height: 1.35rem;
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.6);
    border-radius: 4px;
}

.theme-space-station .prop-space-panel::before {
    content: "● ● ●";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.34rem;
    letter-spacing: 0.18em;
    color: #22c55e;
    text-shadow: 0.62rem 0 0 #f59e0b, 1.24rem 0 0 #ef4444;
    animation: console-blink 2.6s steps(2, jump-none) infinite;
}

@keyframes console-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.theme-space-station .urinal.state-occupied .patron-accent {
    top: 44%;
    font-size: 0.56rem;
}

.theme-space-station .urinal.state-occupied .patron-accent::before {
    content: "🥽";
}

.theme-space-station #door {
    background: #1e3a5f;
    border-color: #38bdf8;
}

/* Arcade + tutorial keep the clean look: no décor bands, no props. */
.theme-arcade .bathroom-walls::before,
.theme-arcade .bathroom-walls::after {
    content: none;
}

/* --- Motion safety: every ambient/reveal animation opts out ------------- */

@media (prefers-reduced-motion: reduce) {

    .decor-prop,
    .decor-prop::before,
    .decor-prop::after,
    .theme-office .bathroom-walls::before,
    .theme-stadium .bathroom-walls::before,
    #game-screen.world-reveal #bathroom-container {
        animation: none !important;
    }
}