/* Revamed Mansion — public release visual authority */

:root {
    --release-gold: #d5a64a;
    --release-gold-soft: #f0cf86;
    --release-ink: #07090d;
    --release-panel: rgba(10, 11, 16, .86);
    --release-blue: #17233b;
}

.title-screen {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100svh;
    padding: clamp(20px, 4vw, 48px);
    overflow: hidden;
    background: #050507 url("../assets/image.jpg") center / cover no-repeat, url("../assets/title-mansion.svg") center / cover no-repeat;
    animation: title-cinematic-pan 45s ease-in-out infinite alternate;
}

@keyframes title-cinematic-pan {
    0% { background-size: 100%; background-position: center; }
    100% { background-size: 115%; background-position: center 10%; }
}

/* ---------- TITLE SCREEN ANIMATED VFX ---------- */
.title-vfx-fog-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.title-vfx-fog-1 {
    background: radial-gradient(ellipse at 50% 88%, rgba(213, 166, 74, 0.12) 0%, rgba(10, 15, 25, 0.40) 48%, transparent 80%);
    animation: fog-drift-slow 28s ease-in-out infinite alternate;
}

.title-vfx-fog-2 {
    background: radial-gradient(ellipse at 25% 75%, rgba(240, 193, 92, 0.09) 0%, rgba(5, 5, 7, 0.35) 50%, transparent 78%);
    animation: fog-drift-fast 20s ease-in-out infinite alternate;
}

@keyframes fog-drift-slow {
    0% { transform: translateX(-40px) scale(1); opacity: 0.7; }
    50% { opacity: 0.95; }
    100% { transform: translateX(40px) scale(1.08); opacity: 0.7; }
}

@keyframes fog-drift-fast {
    0% { transform: translateX(30px) translateY(-10px) scale(1.05); opacity: 0.5; }
    100% { transform: translateX(-30px) translateY(10px) scale(0.95); opacity: 0.85; }
}

.title-vfx-lantern-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 72%, rgba(255, 180, 60, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 62% 65%, rgba(255, 170, 50, 0.18) 0%, transparent 38%);
    animation: lantern-flicker 4s ease-in-out infinite alternate;
}

@keyframes lantern-flicker {
    0% { opacity: 0.75; }
    25% { opacity: 0.98; }
    50% { opacity: 0.65; }
    75% { opacity: 1; }
    100% { opacity: 0.82; }
}

.title-vfx-embers-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.title-ember-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 215, 100, 0.88);
    box-shadow: 0 0 8px rgba(255, 200, 80, 0.95);
    pointer-events: none;
    z-index: 1;
    animation: ember-float linear infinite;
}

@keyframes ember-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.9; }
    80% { opacity: 0.9; }
    100% { transform: translateY(-200px) translateX(var(--ember-sway, 30px)); opacity: 0; }
}

.title-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(213, 166, 74, 0.08) 0%, transparent 65%),
        linear-gradient(90deg, rgba(5, 5, 7, .98) 0%, rgba(5, 5, 7, .92) 38%, rgba(5, 5, 7, .45) 70%, rgba(5, 5, 7, .25) 100%),
        linear-gradient(0deg, rgba(5, 5, 7, 0.95) 0%, transparent 50%);
    pointer-events: none;
}

.title-screen::after {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(240, 193, 92, 0.04), transparent 60%);
    animation: title-mist-pan 18s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes title-mist-pan {
    0% { transform: translate(-20px, -10px) scale(1); }
    100% { transform: translate(20px, 10px) scale(1.04); }
}

.title-card {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(640px, 94vw);
    margin: 0 auto;
    padding: clamp(20px, 3.5vw, 40px);
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title-card:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}

.title-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.title-logo {
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 18px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.60)) drop-shadow(0 0 16px rgba(213, 166, 74, 0.35));
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1), filter .26s ease;
    animation: title-logo-pulse 4s ease-in-out infinite;
}

.title-logo:hover,
.title-logo:focus-visible {
    transform: scale(1.10) rotate(-3deg);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.80)) drop-shadow(0 0 25px rgba(240, 193, 92, 0.70));
}

.title-logo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(213, 166, 74, 0.12);
    border: 1px solid rgba(213, 166, 74, 0.40);
    color: #f0cf86;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.title-logo-badge:hover {
    transform: translateY(-1px);
    background: rgba(240, 193, 92, 0.22);
    border-color: rgba(240, 193, 92, 0.75);
    box-shadow: 0 0 18px rgba(240, 193, 92, 0.35);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: dot-pulse 2s infinite ease-in-out;
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.title-card .eyebrow {
    color: var(--release-gold-soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.92;
}

.title-card h1 {
    font-size: clamp(2.8rem, 5.5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0;
    background: linear-gradient(120deg, #fff4d4 0%, #f0c15c 40%, #ffffff 50%, #f0c15c 60%, #bd8c2e 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.85));
    animation: gold-shimmer 6s linear infinite;
}

@keyframes gold-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.title-card h1 span {
    display: block;
    font-size: 0.82em;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #f0f4f8 0%, #b0c0d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 4px;
}

.title-card .tagline {
    position: relative;
    max-width: 38ch;
    margin-top: 18px;
    margin-bottom: 24px;
    color: #ded6c5;
    font-size: 1.05rem;
    line-height: 1.55;
    font-style: italic;
}

.title-menu {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.title-card .primary-button,
.title-card .secondary-button,
.title-card .help-toggle-btn,
.title-card .install-app-button,
.title-card #title-settings-toggle {
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    border-radius: 8px;
    border: 1px solid rgba(213, 166, 74, .48);
    background: linear-gradient(180deg, rgba(37, 32, 24, .96), rgba(13, 13, 17, .96));
    color: #f1dfb4;
    font-weight: 750;
    letter-spacing: .04em;
    text-align: left;
    padding: 0 18px;
    box-shadow: inset 0 1px rgba(255,255,255,.05);
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.title-card .primary-button {
    color: #fff0c6;
    border-color: rgba(240, 193, 92, .90);
    background: linear-gradient(180deg, rgba(80, 59, 29, .98), rgba(30, 24, 18, .98));
    box-shadow: 0 0 28px rgba(213, 166, 74, .12), inset 0 1px rgba(255,255,255,.08);
}

.title-card button:hover,
.title-card button:focus-visible {
    transform: translateY(-1px);
    border-color: var(--release-gold-soft);
    box-shadow: 0 0 0 3px rgba(213, 166, 74, .14), 0 8px 22px rgba(0,0,0,.28);
    animation: button-hover-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes button-hover-pulse {
    0% { box-shadow: 0 0 0 3px rgba(213, 166, 74, .14), 0 8px 22px rgba(0,0,0,.28); }
    100% { box-shadow: 0 0 0 6px rgba(240, 193, 92, .25), 0 12px 28px rgba(0,0,0,.45); }
}

.install-app-button[hidden] {
    display: none !important;
}

.install-copy {
    margin: 10px 0 0;
    color: #a9b0b7;
    font-size: .82rem;
    line-height: 1.4;
}

.pwa-installed .install-app-button,
.pwa-installed .install-copy {
    display: none !important;
}

/* --- Staggered Entrance Animations --- */
.title-card .eyebrow,
.title-card h1,
.title-card .tagline,
.title-logo-wrapper,
.title-menu,
.install-copy {
    opacity: 0;
    animation: elegant-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.title-logo-wrapper { animation-delay: 0.1s; }
.title-card .eyebrow { animation-delay: 0.3s; }
.title-card h1 { animation-delay: 0.5s; }
.title-card .tagline { animation-delay: 0.7s; }
.title-menu { animation-delay: 0.9s; }
.install-copy { animation-delay: 1.1s; }

@keyframes elegant-entrance {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-screen {
    background:
        radial-gradient(circle at 50% -10%, rgba(56, 69, 99, .20), transparent 38%),
        linear-gradient(180deg, #080a0f 0%, #05060a 100%);
}

.game-header {
    position: sticky;
    top: 0;
    z-index: 500;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(8, 9, 13, .97), rgba(8, 9, 13, .84));
    border-bottom: 1px solid rgba(213, 166, 74, .26);
}

.game-header .small-button,
.game-header .help-toggle-btn {
    min-height: 44px;
    border-radius: 7px;
    border-color: rgba(213, 166, 74, .34);
    background: rgba(18, 18, 24, .88);
    color: #e8ddc5;
}

.hover-label,
.clear-instruction-strip,
.backbone-feedback {
    border-color: rgba(213, 166, 74, .42) !important;
    background: rgba(7, 8, 12, .92) !important;
    color: #f0eadf !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, .72),
        0 18px 54px rgba(0, 0, 0, .30);
}

.scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    background:
        radial-gradient(circle at 50% 40%, transparent 42%, rgba(2, 3, 6, .36) 100%),
        linear-gradient(180deg, rgba(85, 102, 148, .035), transparent 40%, rgba(0,0,0,.10));
}

/* UX-01 — V22 Hotspot Clarity: laser-etched border + glassmorphic active ring */
.hotspot {
    border-radius: 10px;
    /* Glassmorphic border always present at low opacity — makes invisible hotspots scannable */
    border: 1px solid rgba(212, 175, 55, 0.12);
    background: rgba(212, 175, 55, 0.02);
    transition: outline-color .18s ease, background .18s ease, filter .18s ease,
                transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}

.hotspot:hover,
.hotspot:focus-visible {
    /* Stronger contrast: opaque laser-etched gold border at 0.4 opacity per audit spec */
    border: 1px solid rgba(212, 175, 55, 0.4);
    outline: 2px solid rgba(240, 193, 92, .94);
    outline-offset: -2px;
    background: rgba(213, 166, 74, .13);
    filter: drop-shadow(0 0 16px rgba(213, 166, 74, .38));
    box-shadow:
        inset 0 0 10px rgba(240, 193, 92, .18),
        0 0 0 4px rgba(240, 193, 92, .06);
}

.hotspot:active {
    /* Active tap ring — highly visible confirmation pulse on touch */
    border: 1px solid rgba(255, 215, 0, 0.85);
    outline: 2.5px solid rgba(255, 215, 0, .98);
    outline-offset: -2px;
    background: rgba(255, 215, 0, .22);
    filter: drop-shadow(0 0 22px rgba(255, 215, 0, .55));
    transform: scale(0.975);
    box-shadow:
        inset 0 0 16px rgba(255, 215, 0, .38),
        0 0 0 6px rgba(255, 215, 0, .10);
}

.hotspot-word {
    border: 1px solid rgba(235, 192, 102, .48) !important;
    background: rgba(5, 6, 9, .90) !important;
    color: #f3e9d2 !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.verb {
    min-height: 48px !important;
    border-radius: 8px !important;
    font-weight: 760;
}

.verb.active {
    border-color: rgba(240, 193, 92, .94) !important;
    background: linear-gradient(180deg, rgba(82, 60, 29, .95), rgba(32, 26, 18, .95)) !important;
    color: #fff0c7 !important;
    box-shadow: 0 0 18px rgba(213, 166, 74, .14);
}

/* UX-05 — V22 Discovery Secrets: lore hotspot shimmer
   Subtle procedural pulse on unexamined optional lore hotspots.
   Shimmer activates ONLY when body.journal-open is set,
   so it guides players who are actively looking for clues. */
.lore-hotspot {
    /* Low-opacity hint border always present */
    border: 1px solid rgba(212, 175, 55, 0.08) !important;
    transition: border-color .4s ease, box-shadow .4s ease;
}

/* Particle shimmer pseudo-element: radial glow pulse */
.lore-hotspot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(212, 175, 55, 0.18) 0%,
        rgba(212, 175, 55, 0.06) 50%,
        transparent 72%);
    transition: opacity .4s ease;
}

/* Journal-open state: shimmer becomes visible and pulses */
body.journal-open .lore-hotspot.lore-unexamined::after {
    opacity: 1;
    animation: lore-shimmer-pulse 2.4s ease-in-out infinite;
}

body.journal-open .lore-hotspot.lore-unexamined {
    border-color: rgba(212, 175, 55, 0.25) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.10);
}

@keyframes lore-shimmer-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50%       { opacity: 1;    transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .lore-hotspot::after,
    body.journal-open .lore-hotspot.lore-unexamined::after {
        animation: none !important;
        opacity: 0.7;
    }
}

/* Local couch co-op — vote-to-confirm prompt (see coop-vote-confirm.js) */
.coop-confirm-prompt {
    position: fixed;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(92vw, 420px);
    padding: 16px 18px;
    background: var(--release-panel);
    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
}

.coop-confirm-message {
    margin: 0 0 12px;
    color: var(--release-gold-soft);
    font-size: .92rem;
    line-height: 1.4;
}

.coop-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.coop-confirm-buttons button {
    min-height: 44px;
    min-width: 44px;
}

/* Gameplay-feel: distinct feedback for an invalid/no-op action (see game.js say()) */
.status-panel.status-invalid {
    animation: status-invalid-shake .4s ease;
    border-color: rgba(198, 74, 58, .85);
}

.status-panel.status-invalid #status {
    color: #e8b3ab;
}

@keyframes status-invalid-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .status-panel.status-invalid {
        animation: none !important;
    }
}

.inventory-item {
    min-height: 44px;
    border-radius: 7px !important;
}

/* UX-04 — V22 Character Staging: z-index floor anchoring for V3 model
   Ensures Character Model V3 always sits behind room foreground elements.
   Rooms with foreground overlays (West Wing, Deep Well) use z=4 for their
   foreground layers, so the character must stay at z=3 or below. */
.player-model-v3 {
    /* Explicit stacking context: behind room foreground (z≥4) but above room bg (z=0) */
    z-index: 3 !important;
    /* Perspective-correct floor anchor: scale from bottom-center for natural depth */
    transform-origin: 50% 100% !important;
    /* Contain the stacking context so child elements don't escape */
    isolation: isolate;
}

/* West Wing room-specific character z-index clamp.
   (.player-model-v3 already gets z-index:3 unconditionally from the base rule
   above - only the plain .player selector needs the room-scoped override.) */
.scene-west-wing .player {
    z-index: 3 !important;
}

/* Deep Well room-specific character z-index clamp */
.scene-deep-well .player,
[data-room="deepWell"] .player {
    z-index: 3 !important;
}

/* Specimen Gallery room-specific character z-index clamp */
.scene-specimen-gallery .player,
[data-room="specimenGallery"] .player {
    z-index: 3 !important;
}

/* UX-06 — Foyer composition: keep the explorer above scene overlays while
   leaving the invisible interaction layer clickable underneath. The foyer's
   stair and rug hotspots span the foreground by design, but must not erase
   the character from the scene or turn the room into a wireframe. */
.scene-foyer > .player {
    z-index: 40 !important;
    pointer-events: none;
}

.scene-foyer .hotspot {
    background: transparent;
    border-color: transparent;
}

.scene-foyer .hotspot:hover,
.scene-foyer .hotspot:focus-visible,
.scene-foyer .hotspot:active {
    background: rgba(212, 175, 55, 0.06);
}

/* Base player character silhouette (applies to all model versions) */
.player {
    transform-origin: 50% 100%;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.55));
    transition: left .42s cubic-bezier(.2,.75,.25,1), transform .16s ease;
}

.player::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 32px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .48);
    filter: blur(3px);
    z-index: -1;
}

.player-head {
    position: relative;
    background: radial-gradient(circle at 40% 28%, #e4bb9e 0 20%, #bc846b 58%, #6f4d43 100%) !important;
    border: 1px solid rgba(47, 24, 22, .72);
    box-shadow: inset -4px -3px 6px rgba(63,31,28,.20);
}

.player-head::before {
    content: "";
    position: absolute;
    inset: -3px -2px 48% -2px;
    border-radius: 60% 60% 25% 25%;
    background: linear-gradient(145deg, #2b211f, #0e1015);
}

.player-body {
    position: relative;
    background: linear-gradient(90deg, #17363a 0%, #285b59 46%, #142e34 100%) !important;
    border: 1px solid rgba(7, 17, 19, .75);
    box-shadow: inset -5px 0 8px rgba(0,0,0,.22);
}

.player-body::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 54%;
    height: 10%;
    background: #6b4a29;
    border-top: 1px solid #b78947;
}

.player-body::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -34%;
    height: 38%;
    background: linear-gradient(90deg, #202329 0 42%, transparent 42% 58%, #202329 58% 100%);
    border-radius: 0 0 3px 3px;
}

.completion-badge {
    border-radius: 8px !important;
    border-color: rgba(213,166,74,.55) !important;
    background: rgba(11, 12, 17, .94) !important;
    color: #f4d98e !important;
}

/* ==============================================================
   PWA INSTALL TO DEVICE MODAL & HARDENED UI/UX CONTROLS
============================================================== */

.title-logo {
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), filter .22s ease;
}

.title-logo:hover,
.title-logo:focus-visible {
    transform: scale(1.12) rotate(-2deg);
    filter: drop-shadow(0 0 16px rgba(240, 193, 92, 0.55));
}

.pwa-install-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.pwa-install-modal[hidden] {
    display: none !important;
}

.pwa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 7, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.pwa-modal-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    background: rgba(5, 5, 7, 0.90);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(213, 166, 74, 0.55);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow:
        0 0 45px rgba(213, 166, 74, 0.18),
        0 24px 60px rgba(0, 0, 0, 0.85);
    color: #f1dfb4;
    animation: pwa-modal-pop .28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pwa-modal-pop {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pwa-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: #c9b080;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}

.pwa-modal-close:hover,
.pwa-modal-close:focus-visible {
    color: #fff0c6;
    background: rgba(213, 166, 74, 0.15);
}

.pwa-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.pwa-modal-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(213, 166, 74, 0.35));
    animation: title-logo-pulse 3s infinite ease-in-out;
}

@keyframes title-logo-pulse {
    0%, 100% { filter: drop-shadow(0 4px 14px rgba(213, 166, 74, 0.35)); }
    50% { filter: drop-shadow(0 6px 22px rgba(240, 193, 92, 0.70)); }
}

.pwa-modal-header h2 {
    margin: 0;
    font-size: 1.35rem;
    color: #fff0c6;
    letter-spacing: .02em;
}

.pwa-modal-subtitle {
    margin: 4px 0 0;
    font-size: .88rem;
    color: #a9b0b7;
    line-height: 1.35;
}

.pwa-modal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pwa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(213, 166, 74, 0.12);
    border: 1px solid rgba(213, 166, 74, 0.32);
    color: #f0c15c;
    font-size: .80rem;
    font-weight: 600;
}

.pwa-modal-instructions {
    background: rgba(12, 14, 20, 0.75);
    border: 1px solid rgba(213, 166, 74, 0.22);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 22px;
}

.pwa-instruction-text {
    margin: 0;
    font-size: .92rem;
    color: #e2d3b2;
    line-height: 1.5;
}

.pwa-steps {
    display: grid;
    gap: 10px;
}

.pwa-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .90rem;
    color: #e2d3b2;
}

.pwa-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(240, 193, 92, 0.22);
    border: 1px solid rgba(240, 193, 92, 0.60);
    color: #fff0c6;
    font-weight: 700;
    font-size: .78rem;
    flex-shrink: 0;
}

.pwa-modal-actions {
    display: flex;
    gap: 12px;
}

.pwa-modal-actions button {
    flex: 1;
    min-height: 48px;
    text-align: center !important;
    justify-content: center;
}

/* UI Hardened Micro-Animations & Glow Pulses */
.primary-button,
.secondary-button,
.verb,
.inventory-item {
    position: relative;
    overflow: hidden;
}

.primary-button:hover,
.secondary-button:hover,
.verb:hover,
.small-button:hover,
.inventory-item:hover {
    box-shadow: 0 0 16px rgba(240, 193, 92, 0.28), inset 0 0 12px rgba(240, 193, 92, 0.12) !important;
    animation: button-hover-pulse 1.5s infinite alternate ease-in-out;
}

.primary-button:active,
.secondary-button:active,
.verb:active {
    transform: scale(0.97) !important;
}

@media (max-width: 760px) {
    .title-screen {
        padding: 14px;
        align-items: end;
        background-position: 66% center;
    }

    .title-screen::before {
        background: linear-gradient(0deg, rgba(3,5,8,.98) 0%, rgba(3,5,8,.86) 56%, rgba(3,5,8,.25) 100%);
    }

    .title-card {
        width: 100%;
        margin: 0;
        padding: 22px;
        max-height: calc(100svh - 28px);
        overflow-y: auto;
    }

    .title-logo {
        width: 58px;
        height: 58px;
        margin-bottom: 12px;
    }

    .title-card h1 {
        font-size: clamp(2.65rem, 15vw, 4.4rem);
    }

    .title-card h1 span {
        margin-top: 14px;
    }

    .title-card .tagline {
        margin-top: 18px;
        margin-bottom: 14px;
    }

    .title-card .primary-button,
    .title-card .secondary-button,
    .title-card .help-toggle-btn,
    .title-card .install-app-button,
    .title-card #title-settings-toggle {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player,
    .hotspot,
    .title-card button,
    .pwa-modal-content,
    .title-logo {
        transition: none !important;
        animation: none !important;
    }
}

/* ==============================================================
   REVAMED MANSION — ROOM VISUAL POLISH V1 (AAA QUALITY BENCHMARK)
   ============================================================== */

/* Common Room Portal & Hotspot Pill Badging */
.room-portal-badge,
.rm-hotspot-pill {
    position: absolute;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.88);
    border: 1px solid rgba(201, 138, 83, 0.6);
    box-shadow:
        0 4px 20px rgba(5, 5, 8, 0.85),
        0 0 12px rgba(201, 138, 83, 0.25),
        inset 0 1px rgba(255, 235, 182, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f4ecdc;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-portal-badge::before,
.rm-hotspot-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f3d48b;
    box-shadow: 0 0 8px #f3d48b, 0 0 14px rgba(201, 138, 83, 0.8);
}

.room-portal-badge:hover,
.rm-hotspot-pill:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #c98a53;
    box-shadow:
        0 8px 24px rgba(5, 5, 8, 0.95),
        0 0 20px rgba(201, 138, 83, 0.5),
        inset 0 1px rgba(255, 235, 182, 0.3);
}

/* 1. Grand Foyer (Polished Obsidian Marble Floor & Chiaroscuro Candelabras) */
#scene-foyer,
.scene-foyer {
    background:
        radial-gradient(ellipse at 25% 45%, rgba(201, 138, 83, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 35%, rgba(91, 120, 138, 0.20) 0%, transparent 60%),
        linear-gradient(180deg, #07090e 0%, #0c1017 65%, #050508 100%) !important;
}

#scene-foyer::before {
    content: "";
    position: absolute;
    inset: 58% 0 0 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(201, 138, 83, 0.12), transparent 75%),
        linear-gradient(180deg, rgba(12, 16, 23, 0.4) 0%, rgba(5, 5, 8, 0.92) 100%);
    pointer-events: none;
    border-top: 1px solid rgba(201, 138, 83, 0.3);
    z-index: 10;
}

/* 2. Master Study (Carved Oak Paneling & Burning Hearth Glow) */
#scene-study,
.scene-study {
    background:
        radial-gradient(circle at 82% 65%, rgba(201, 138, 83, 0.32) 0%, rgba(122, 17, 10, 0.15) 45%, transparent 70%),
        radial-gradient(circle at 20% 30%, rgba(91, 120, 138, 0.14) 0%, transparent 50%),
        linear-gradient(180deg, #09090c 0%, #15141a 60%, #050508 100%) !important;
}

/* 3. The Library (Stained-Glass Moonbeam & Gilded Archive Shelves) */
#scene-library,
.scene-library {
    background:
        radial-gradient(ellipse at 50% 15%, rgba(91, 120, 138, 0.28) 0%, rgba(26, 28, 35, 0.4) 50%, transparent 80%),
        radial-gradient(circle at 25% 70%, rgba(201, 138, 83, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #06080d 0%, #0e121a 65%, #050508 100%) !important;
}

/* 4. Main Hall (Vaulted Gothic Arches & Suit of Armor Chiaroscuro) */
#scene-main-hall,
.scene-main-hall {
    background:
        radial-gradient(ellipse at 78% 45%, rgba(140, 160, 220, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 30% 60%, rgba(201, 138, 83, 0.20) 0%, transparent 55%),
        linear-gradient(180deg, #06070b 0%, #10141e 70%, #050508 100%) !important;
}

/* 5. Upstairs Landing (Moonlit Stained-Glass Staircase & Velvet Runner) */
#scene-upstairs-landing,
.scene-upstairs-landing {
    background:
        radial-gradient(ellipse at 50% 10%, rgba(140, 160, 220, 0.30) 0%, rgba(91, 120, 138, 0.15) 45%, transparent 75%),
        radial-gradient(circle at 75% 70%, rgba(201, 138, 83, 0.18) 0%, transparent 50%),
        linear-gradient(180deg, #07090e 0%, #111622 65%, #050508 100%) !important;
}

/* 6. West Wing Corridor (Abyssal Vaulted Shadow & Corroded Lock) */
#scene-west-wing,
.scene-west-wing {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(91, 120, 138, 0.16) 0%, rgba(26, 28, 35, 0.8) 55%, #050508 85%),
        linear-gradient(180deg, #040507 0%, #0a0d13 70%, #050508 100%) !important;
}

/* 7. Drafting Room (Architectural Table & Brass Lamp Glow) */
#scene-drafting-room,
.scene-drafting-room {
    background:
        radial-gradient(circle at 50% 40%, rgba(201, 138, 83, 0.35) 0%, rgba(91, 120, 138, 0.12) 50%, transparent 75%),
        linear-gradient(180deg, #08090d 0%, #131720 65%, #050508 100%) !important;
}

/* ==============================================================
   POLISH PASS V2: DYNAMIC ATMOSPHERE & MICRO-ANIMATIONS
   ============================================================== */

/* Ambient Dust Motes floating through Moonlit Rays */
.dust-mote-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 85;
    overflow: hidden;
}

.dust-mote-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(244, 236, 220, 0.45);
    box-shadow: 0 0 6px rgba(244, 236, 220, 0.6);
    animation: dust-float 12s ease-in-out infinite alternate;
}

@keyframes dust-float {
    0% {
        transform: translateY(0) translateX(0) scale(0.8);
        opacity: 0.2;
    }
    50% {
        opacity: 0.7;
        transform: translateY(-25px) translateX(12px) scale(1.1);
    }
    100% {
        transform: translateY(-50px) translateX(-8px) scale(0.9);
        opacity: 0.3;
    }
}

/* Candelabra Candle Flame Glow Micro-Flicker */
.candle-flame-glow {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 212, 139, 0.8) 0%, rgba(201, 138, 83, 0.4) 50%, transparent 100%);
    box-shadow: 0 0 16px rgba(201, 138, 83, 0.6);
    animation: flame-flicker 2.8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes flame-flicker {
    0% { transform: scale(1) translate(0, 0); opacity: 0.85; }
    25% { transform: scale(1.08) translate(1px, -1px); opacity: 0.95; }
    50% { transform: scale(0.94) translate(-1px, 1px); opacity: 0.75; }
    75% { transform: scale(1.04) translate(1px, 0); opacity: 0.90; }
    100% { transform: scale(0.98) translate(-1px, -1px); opacity: 0.80; }
}

/* Polished Obsidian Floor Specular Reflection Shimmer */
.floor-reflection-shimmer {
    position: absolute;
    inset: 60% 0 0 0;
    pointer-events: none;
    z-index: 15;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 138, 83, 0.08) 50%, transparent 100%);
    animation: reflection-sweep 16s ease-in-out infinite alternate;
}

@keyframes reflection-sweep {
    0% { transform: translateX(-30%); opacity: 0.3; }
    100% { transform: translateX(30%); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .dust-mote-particle,
    .candle-flame-glow,
    .floor-reflection-shimmer {
        animation: none !important;
    }
}

/* ==============================================================
   50-ROOM WORLD ASSET FAMILIES (COMPLETE WORLD SCOPE)
   ============================================================== */

/* 1. UPPER MANSION (Dark Timber, Velvet, Brass, Wallpapers, Portraits) */
.asset-family-upper-mansion {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(201, 138, 83, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, #090b10 0%, #151a26 65%, #050508 100%) !important;
}

/* 2. LIBRARY + STUDY (Gilded Books, Carved Furniture, Lamps, Clocks) */
.asset-family-library-study {
    background:
        radial-gradient(circle at 75% 65%, rgba(201, 138, 83, 0.30) 0%, transparent 65%),
        linear-gradient(180deg, #08090d 0%, #121620 65%, #050508 100%) !important;
}

/* 3. SERVICE AREAS (Iron, Plaster, Utility Lighting, Damaged Timber) */
.asset-family-service-areas {
    background:
        radial-gradient(circle at 40% 50%, rgba(91, 120, 138, 0.20) 0%, transparent 60%),
        linear-gradient(180deg, #06070a 0%, #0e1218 65%, #050508 100%) !important;
}

/* 4. FOUNDATION (Wet Stone, Aged Masonry, Oxidized Metal, Damp Earth) */
.asset-family-foundation {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(140, 160, 220, 0.18) 0%, transparent 65%),
        linear-gradient(180deg, #040507 0%, #0a0d13 70%, #050508 100%) !important;
}

/* 5. ARCHIVE (Paper Files, Shelves, Dust, Brass Indexing Cases) */
.asset-family-archive {
    background:
        radial-gradient(circle at 60% 45%, rgba(201, 138, 83, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #07080b 0%, #10141c 65%, #050508 100%) !important;
}

/* 6. RESONANCE (Acoustic Apparatus, Brass Tuning Forks, Organ Echo Loft) */
.asset-family-resonance {
    background:
        radial-gradient(ellipse at 50% 20%, rgba(243, 212, 139, 0.25) 0%, transparent 70%),
        linear-gradient(180deg, #08090e 0%, #141824 65%, #050508 100%) !important;
}

/* 7. DEEP WELL (Wet Rock, Rust, Water Cistern, Submerged Arch, Chains) */
.asset-family-deep-well {
    background:
        radial-gradient(circle at 50% 60%, rgba(91, 120, 138, 0.25) 0%, transparent 65%),
        linear-gradient(180deg, #030406 0%, #080b11 75%, #050508 100%) !important;
}

/* 8. SPECIMEN AREAS (Glass Jars, Biological Evidence, Bone Cabinets) */
.asset-family-specimen-areas {
    background:
        radial-gradient(circle at 35% 45%, rgba(91, 120, 138, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, #050609 0%, #0d1118 65%, #050508 100%) !important;
}

/* 9. CONTROL AREAS (Victorian Industrial Engineering, Valves, Switches) */
.asset-family-control-areas {
    background:
        radial-gradient(circle at 70% 50%, rgba(201, 138, 83, 0.35) 0%, rgba(122, 17, 10, 0.2) 50%, transparent 75%),
        linear-gradient(180deg, #07080c 0%, #12151f 65%, #050508 100%) !important;
}

/* 10. CONTAINMENT (Heavy Iron, Reinforced Stone, Sub-Level Vance Vault) */
.asset-family-containment {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(122, 17, 10, 0.25) 0%, rgba(26, 28, 35, 0.9) 60%, #050508 90%),
        linear-gradient(180deg, #040406 0%, #090b10 70%, #050508 100%) !important;
}

/* Local family co-op controller hints and visible controller focus. */
.coop-controller-status {
    position: fixed;
    bottom: max(6px, env(safe-area-inset-bottom));
    right: 12px;
    z-index: 1900;
    max-width: min(90vw, 680px);
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(12, 10, 8, .9);
    color: #f0cf86;
    font: 14px/1.4 Georgia, serif;
    pointer-events: none;
}
[data-coop-pad-focus="true"]:focus {
    outline: 3px solid #f0cf86 !important;
    outline-offset: 3px;
}
.coop-confirm-prompt[hidden] { display: none !important; }