/* style.css - Audiohotel.de UI Design System */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=VT323&display=swap');

:root {
    --font-pixel: 'VT323', monospace;
    --font-sans: 'Outfit', sans-serif;

    /* Theme Colors (Modern Art-Hotel Metallic & Charcoal Palette) */
    --wood-dark: #18181b;
    /* Matte Zinc/Black */
    --wood-medium: #27272a;
    /* Sleek Charcoal Slate */
    --wood-light: #b89758;
    /* Polished Brass/Gold */
    --wood-warm: #dfc38a;
    /* Warm Champagne/Oatmeal */

    --neon-orange: #ff6c00;
    --neon-orange-glow: rgba(255, 108, 0, 0.45);
    --neon-cyan: #00f0ff;
    --neon-cyan-glow: rgba(0, 240, 255, 0.45);
    --neon-pink: #ff007f;
    --neon-pink-glow: rgba(255, 0, 127, 0.45);
    --neon-green: #39ff14;
    --neon-green-glow: rgba(57, 255, 20, 0.45);

    --bg-dark: #120e0c;
    --gold: #ffd700;
    --scale-factor: 1;
}

/* Base Settings */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body {
    background-color: var(--bg-dark);
    color: #f0eae1;
    font-family: var(--font-sans);
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Core Scalable Container (Locked 16:9 ratio) */
.hotel-viewport-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hotel-viewport-scale-wrapper {
    position: relative;
    width: calc(1024px * var(--scale-factor));
    height: calc(936px * var(--scale-factor));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}

.hotel-viewport {
    position: absolute;
    width: 1024px;
    height: 936px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale-factor));
    transform-origin: center center;
    flex-shrink: 0;
    background: radial-gradient(circle, #33221b 0%, #150f0c 100%);
    border: 12px solid var(--wood-dark);
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 100px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* CRT scanlines effect overlay */
.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 999;
    pointer-events: none;
    opacity: 0.35;
}

.crt-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
}

/* Sound manager overlay (hidden by default) */
.audio-unmute-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 14, 12, 0.95);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font-pixel);
    cursor: pointer;
}

.audio-unmute-overlay h1 {
    font-size: 3rem;
    color: var(--neon-orange);
    text-shadow: 0 0 10px var(--neon-orange-glow);
    margin-bottom: 20px;
}

.audio-unmute-overlay p {
    font-size: 1.5rem;
    color: #e0eae1;
    margin-bottom: 30px;
}

.audio-unmute-btn {
    padding: 15px 40px;
    background-color: var(--wood-medium);
    border: 4px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: var(--font-pixel);
    font-size: 2rem;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 15px var(--neon-cyan-glow);
    transition: all 0.2s ease;
}

.audio-unmute-btn:hover {
    background-color: var(--neon-cyan);
    color: var(--wood-dark);
    box-shadow: 0 0 30px var(--neon-cyan-glow);
}

/* Dynamic Stages */
.stage {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.stage.active {
    display: block;
}

/* Floor Indicator display top right */
.floor-led-display {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #000;
    border: 3px solid var(--wood-light);
    border-radius: 4px;
    padding: 4px 10px;
    font-family: var(--font-pixel);
    color: var(--neon-orange);
    text-shadow: 0 0 5px var(--neon-orange-glow);
    font-size: 1.8rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 0 10px rgba(255, 108, 0, 0.5);
}

.floor-led-display span {
    animation: blink 2s infinite alternate;
}

/* LOBBY / GROUND FLOOR STAGE */
.lobby-stage {
    background: linear-gradient(to bottom, #2c1b18 0%, #150a09 100%);
}

.lobby-isometric-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Isometric structures built with CSS grids/shadows */
.lobby-floor-grid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background:
        repeating-linear-gradient(60deg, rgba(115, 81, 63, 0.1) 0px, rgba(115, 81, 63, 0.1) 2px, transparent 2px, transparent 40px),
        repeating-linear-gradient(-60deg, rgba(115, 81, 63, 0.1) 0px, rgba(115, 81, 63, 0.1) 2px, transparent 2px, transparent 40px);
    background-color: #1a0f0d;
    border-top: 8px solid var(--wood-medium);
}

/* Hotel front facade overlay */
.lobby-header-title {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.lobby-header-title h1 {
    font-family: var(--font-pixel);
    font-size: 4rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan-glow), 0 0 20px rgba(0, 240, 255, 0.2);
    letter-spacing: 2px;
}

.lobby-header-title p {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--wood-warm);
    margin-top: -5px;
}

/* Hotspots / Interactive structures */
.hotspot-reception {
    position: absolute;
    bottom: 40px;
    left: 80px;
    width: 260px;
    height: 140px;
    background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 4px solid var(--wood-light);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hotspot-reception:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.7), 0 0 15px var(--neon-orange-glow);
    border-color: var(--neon-orange);
}

.hotspot-reception .desk-inner {
    text-align: center;
    color: var(--wood-warm);
}

.hotspot-reception i {
    font-size: 2.5rem;
    margin-bottom: 8px;
    color: var(--neon-orange);
    text-shadow: 0 0 8px var(--neon-orange-glow);
}

.hotspot-reception span {
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    display: block;
    color: #fff;
}

.hotspot-lounge {
    position: absolute;
    bottom: 40px;
    right: 80px;
    width: 260px;
    height: 140px;
    background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 4px solid var(--wood-light);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hotspot-lounge:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.7), 0 0 15px var(--neon-pink-glow);
    border-color: var(--neon-pink);
}

.hotspot-lounge i {
    font-size: 2.5rem;
    margin-bottom: 8px;
    color: var(--neon-pink);
    text-shadow: 0 0 8px var(--neon-pink-glow);
}

.hotspot-lounge span {
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    display: block;
    color: #fff;
}

/* Elevator Shaft / Door in lobby and corridors */
.elevator-shaft {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 114px;
    background: transparent;
    border: 5px solid var(--wood-light);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

.elevator-shaft:hover .elevator-sign {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.elevator-sign {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    color: var(--neon-orange);
    text-shadow: 0 0 5px var(--neon-orange-glow);
    transition: color 0.2s ease;
}

.elevator-light {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-green-glow);
}

.elevator-light.busy {
    background-color: var(--neon-orange);
    box-shadow: 0 0 8px var(--neon-orange-glow);
}

.elevator-doors {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    overflow: hidden;
    border-top: 2px solid #111;
}

.elevator-door-left,
.elevator-door-right {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, #828b96 0%, #555d68 50%, #3e444d 100%);
    border: 1px solid #2d333b;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.elevator-door-left {
    border-right: 2px solid #2d333b;
}

.elevator-door-right {
    border-left: 2px solid #2d333b;
}

/* Door Opened State */
.elevator-shaft.open .elevator-door-left {
    transform: translateX(-95%);
}

.elevator-shaft.open .elevator-door-right {
    transform: translateX(95%);
}

.elevator-inside {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, #151515, #2c2c2c);
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.elevator-inside-glow {
    width: 80%;
    height: 90%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, transparent 70%);
}

/* DYNAMIC VERTICAL BUILDING SCROLLER */
.hotel-building {
    position: absolute;
    width: 1024px;
    height: 1800px;
    /* 300px * 6 floors (Roof + 4 corridors + Lobby) */
    left: 0;
    top: 0;
}

.roof-floor {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0px;
    background: linear-gradient(to bottom, #070913 0%, #0f111d 100%);
    overflow: hidden;
}

/* Decorative roof elements: cornice, antenna, chimneys */
.roof-cornice {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, var(--wood-light) 0%, var(--wood-dark) 100%);
    border-top: 4px solid var(--wood-warm);
    border-bottom: 4px solid #111;
    z-index: 10;
}

.roof-chimney {
    position: absolute;
    bottom: 20px;
    left: 80px;
    width: 32px;
    height: 60px;
    background: linear-gradient(to right, #4a3429 0%, #2a1b15 100%);
    border: 3px solid #1a0f0d;
    border-bottom: none;
    z-index: 5;
}

.roof-chimney::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -4px;
    width: 34px;
    height: 8px;
    background: #1a0f0d;
}

.roof-antenna {
    position: absolute;
    bottom: 20px;
    right: 120px;
    width: 4px;
    height: 110px;
    background: #444;
    z-index: 5;
}

.roof-antenna::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -12px;
    width: 28px;
    height: 3px;
    background: #444;
}

.roof-antenna::after {
    content: '';
    position: absolute;
    top: 40px;
    left: -8px;
    width: 20px;
    height: 3px;
    background: #444;
}

.lobby-floor {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 1500px;
    background: linear-gradient(to bottom, #2c1b18 0%, #150a09 100%);
    border-top: 10px solid #cf2e2e;
}

.corridor-floor {
    position: absolute;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, #071921 0%, #030e13 100%);
    border-top: 10px solid #cf2e2e;
}

#floor-4 {
    top: 300px;
}

#floor-3 {
    top: 600px;
}

#floor-2 {
    top: 900px;
}

#floor-1 {
    top: 1200px;
}

.corridor-bg-grid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 2px, transparent 2px, transparent 24px),
        linear-gradient(to bottom, #cf2e2e 0%, #8c1414 100%);
    border-top: 6px solid #8e8e93;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
}

.corridor-wallpaper {
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100% - 40px);
    border-bottom: 8px solid var(--wood-dark);
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Floor 1: Retro Electric Blue Stripes with neon cyan/pink glows */
#floor-1 .corridor-wallpaper {
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.35) 0%, transparent 180px),
        radial-gradient(circle at 80% 70%, rgba(255, 0, 127, 0.25) 0%, transparent 180px),
        repeating-linear-gradient(90deg, #1d4ed8 0px, #1d4ed8 30px, #1e40af 30px, #1e40af 60px) !important;
}

/* Floor 2: Retro Hot Pink/Magenta Stripes with neon yellow/white glows */
#floor-2 .corridor-wallpaper {
    background:
        radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.25) 0%, transparent 180px),
        radial-gradient(circle at 75% 20%, rgba(251, 191, 36, 0.3) 0%, transparent 180px),
        repeating-linear-gradient(90deg, #db2777 0px, #db2777 30px, #be185d 30px, #be185d 60px) !important;
}

/* Floor 4: Rooftop sky theme with dark purple/blue and neon stars */
#floor-4 .corridor-wallpaper {
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 240, 255, 0.4) 0%, transparent 180px),
        radial-gradient(circle at 85% 80%, rgba(255, 0, 127, 0.35) 0%, transparent 180px),
        repeating-linear-gradient(90deg, #1e1b4b 0px, #1e1b4b 30px, #311042 30px, #311042 60px) !important;
}

/* Floor 3: Retro Golden Yellow/Canary Stripes with orange/red glows */
#floor-3 .corridor-wallpaper {
    background:
        radial-gradient(circle at 30% 20%, rgba(239, 68, 68, 0.3) 0%, transparent 180px),
        radial-gradient(circle at 70% 70%, rgba(249, 115, 22, 0.35) 0%, transparent 180px),
        repeating-linear-gradient(90deg, #eab308 0px, #eab308 30px, #ca8a04 30px, #ca8a04 60px) !important;
}

/* Vertical Elevator Shaft Background Cables */
.elevator-shaft-vertical-line {
    position: absolute;
    left: 512px;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 146px;
    background: linear-gradient(to right, #1a1513 0%, #0a0706 50%, #1a1513 100%);
    border-left: 5px solid var(--wood-dark);
    border-right: 5px solid var(--wood-dark);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
    z-index: 1;
    pointer-events: none;
}

.elevator-shaft-vertical-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(180deg, #555 0px, #555 10px, #111 10px, #111 20px);
    transform: translateX(-50%);
}

/* Moving Elevator Cabin */
.elevator-cabin {
    position: absolute;
    width: 122px;
    height: 112px;
    left: 512px;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%);
    border: 4px solid var(--wood-light);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    top: 1363px;
    /* Initialized at Lobby top: (4-0)*300 + 163 */
}

.elevator-cabin-inside {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.elevator-cabin-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, transparent 85%);
    z-index: 1;
}

.elevator-cabin-gate-left,
.elevator-cabin-gate-right {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #111 0px, #111 4px, #444 4px, #444 8px);
    border: 1px solid #111;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
}

.elevator-cabin-gate-left {
    left: 0;
    border-right: 1px solid #222;
    transform-origin: left;
}

.elevator-cabin-gate-right {
    right: 0;
    border-left: 1px solid #222;
    transform-origin: right;
}

/* Open Cabin Doors */
.elevator-cabin.cabin-open .elevator-cabin-gate-left {
    transform: scaleX(0);
}

.elevator-cabin.cabin-open .elevator-cabin-gate-right {
    transform: scaleX(0);
}

/* PLAYER AVATAR STYLING & ANIMATIONS */
.player-avatar {
    position: absolute;
    width: 32px;
    height: 48px;
    z-index: 15;
    pointer-events: none;
    transform-origin: bottom center;
    transition: left 0.1s linear, top 0.1s linear;
}

/* Flip direction depending on walking */
.player-avatar.face-left svg {
    transform: scaleX(-1);
}

.player-avatar.face-right svg {
    transform: scaleX(1);
}

/* Walking bounce animations for pixel limbs */
.player-avatar.walking .leg-left {
    animation: walk-leg-1 0.25s infinite alternate ease-in-out;
}

.player-avatar.walking .leg-right {
    animation: walk-leg-2 0.25s infinite alternate ease-in-out;
}

.player-avatar.walking svg {
    animation: walk-bounce 0.25s infinite alternate ease-in-out;
}

@keyframes walk-leg-1 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px) scaleY(0.6);
    }
}

@keyframes walk-leg-2 {
    from {
        transform: translateY(-4px) scaleY(0.6);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes walk-bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-3px);
    }
}

/* Corridor Door Panels */
.corridor-doors-container {
    position: absolute;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 40px;
    z-index: 10;
}

.door-wrapper {
    position: relative;
    width: 80px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.room-door {
    position: relative;
    width: 62px;
    height: 118px;
    background: linear-gradient(to bottom, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 4px solid var(--wood-light);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.room-door::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--gold);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.room-door-inner {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
}

.room-door.door-open .room-door-inner {
    transform: scaleX(1);
}

.room-door:hover {
    transform: scale(1.03);
    border-color: var(--neon-cyan);
    box-shadow: 0 5px 20px var(--neon-cyan-glow);
}

/* Band Framed Poster next to door */
.door-signboard {
    position: absolute;
    top: -45px;
    text-align: center;
    background: #000;
    border: 2px solid var(--wood-light);
    padding: 2px 6px;
    border-radius: 3px;
    width: 100px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.door-signboard span {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--neon-cyan);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.door-signboard small {
    font-size: 0.65rem;
    color: var(--wood-warm);
    display: block;
}

.band-poster-frame {
    position: absolute;
    top: 20px;
    left: -58px;
    width: 46px;
    height: 60px;
    background: #000;
    border: 3px solid var(--wood-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    transform: rotate(-3deg);
    overflow: hidden;
    cursor: pointer;
}

/* Floating unified interaction prompt above player avatar */
.interaction-prompt {
    position: absolute;
    transform: translateX(-50%);
    background: #000;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 0 8px var(--neon-cyan-glow);
    z-index: 100;
    cursor: pointer;
    display: none;
    /* Controlled dynamically in JS */
    text-transform: uppercase;
    white-space: nowrap;
    animation: prompt-bounce 0.5s infinite alternate ease-in-out;
}

.interaction-prompt:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 15px var(--neon-cyan-glow);
}

@keyframes prompt-bounce {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -5px;
    }
}

.band-poster-frame:hover {
    transform: rotate(0deg) scale(1.1);
    border-color: var(--neon-orange);
    box-shadow: 0 3px 10px var(--neon-orange-glow);
}

.band-poster-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}


/* THE ROOM VIEW (2D WALKABLE INTERIOR) */
.room-stage {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* Specific Room Themes */
.room-stage.room-chiptune {
    background: linear-gradient(135deg, #0f1c13 0%, #050a06 100%);
}

.room-stage.room-synthwave {
    background: linear-gradient(135deg, #2b0b2e 0%, #0e0310 100%);
}

.room-stage.room-indie {
    background: linear-gradient(135deg, #443128 0%, #1e130e 100%);
}

.room-stage.room-grunge {
    background: linear-gradient(135deg, #2c2d30 0%, #121315 100%);
}

.room-stage.room-jazz {
    background: linear-gradient(135deg, #2c1b12 0%, #0e0704 100%);
}

/* Room top bar (band name + exit) */
.room-topbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 50;
}

.room-topbar h2 {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    display: inline;
    margin-right: 10px;
}

.room-topbar .genre-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: middle;
}

/* 2D Room Scene */
.room-scene {
    position: absolute;
    top: 50px;
    left: 0;
    width: 1024px;
    height: 526px;
    /* viewport height minus topbar */
    overflow: hidden;
}

.room-back-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background: repeating-linear-gradient(90deg, rgba(50, 35, 25, 0.4) 0px, rgba(50, 35, 25, 0.4) 60px, rgba(45, 30, 20, 0.4) 60px, rgba(45, 30, 20, 0.4) 120px);
    border-bottom: 8px solid var(--wood-medium);
}

.room-floor-surface {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 176px;
    background:
        repeating-linear-gradient(60deg, rgba(115, 81, 63, 0.1) 0px, rgba(115, 81, 63, 0.1) 2px, transparent 2px, transparent 40px),
        repeating-linear-gradient(-60deg, rgba(115, 81, 63, 0.1) 0px, rgba(115, 81, 63, 0.1) 2px, transparent 2px, transparent 40px);
    background-color: #1a0f0d;
}

/* Room furniture base */
.room-furniture {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.15s ease;
}

.room-furniture:hover {
    transform: scale(1.05);
}

.furniture-label {
    text-align: center;
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: var(--wood-warm);
    margin-top: 2px;
    opacity: 0.7;
}

/* Exit Door */
.room-exit-door {
    left: 30px;
    bottom: 176px;
}

/* Gallery Wall (hanging on wall) */
.room-gallery-wall {
    left: 140px;
    top: 100px;
}

.gallery-frames {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid var(--wood-dark);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.gallery-frame-item {
    width: 80px;
    height: 80px;
    border: 2px solid var(--wood-light);
    overflow: hidden;
    background: #111;
}

.gallery-frame-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stereo System */
.room-stereo {
    left: 350px;
    bottom: 176px;
}

/* CRT Television */
.room-crt-tv {
    left: 550px;
    bottom: 176px;
}

/* Desk */
.room-desk {
    left: 770px;
    bottom: 176px;
}

/* Room Player Avatar (inside room scene) */
.room-player {
    position: absolute;
    bottom: 176px;
    left: 100px;
    z-index: 20;
    pointer-events: none;
}

/* HIFI Overlay (shown when interacting with stereo) */
.room-hifi-overlay {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: rgba(10, 8, 7, 0.9);
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

.hifi-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--wood-warm);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
}

.hifi-close-btn:hover {
    color: #fff;
}

/* Exit Signboard */
.room-exit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #000;
    border: 3px solid var(--neon-orange);
    color: var(--neon-orange);
    padding: 6px 15px;
    border-radius: 4px;
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 0 8px var(--neon-orange-glow);
    transition: all 0.2s ease;
}

.room-exit-btn:hover {
    background: var(--neon-orange);
    color: #000;
    box-shadow: 0 0 18px var(--neon-orange-glow);
    transform: scale(1.05);
}

/* Interactive Room Elements */

/* 1. Stereo System (HIFI-Deck) */
.room-hifi-panel {
    background: linear-gradient(180deg, #2c2c2c 0%, #151515 100%);
    border: 6px solid var(--wood-medium);
    border-radius: 6px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 380px;
    position: relative;
}

/* HiFi Specific styles based on room theme */
.room-chiptune .room-hifi-panel {
    border-color: #142217;
    box-shadow: 0 0 15px var(--neon-green-glow);
}

.room-synthwave .room-hifi-panel {
    border-color: #1c0620;
    box-shadow: 0 0 15px var(--neon-pink-glow);
}

.room-indie .room-hifi-panel {
    border-color: var(--wood-medium);
}

.room-grunge .room-hifi-panel {
    border-color: #333;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.hifi-header-display {
    background-color: #050505;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 10px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hifi-header-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
}

.hifi-led-title {
    font-family: var(--font-pixel);
    font-size: 1.5rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Custom Display LED coloring per theme */
.room-chiptune .hifi-led-title {
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green-glow);
}

.room-synthwave .hifi-led-title {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink-glow);
}

.room-grunge .hifi-led-title {
    color: var(--neon-orange);
    text-shadow: 0 0 5px var(--neon-orange-glow);
}

.hifi-led-status {
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: #888;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}

/* Audio Cassette / Vinyl Spin section */
.hifi-deck-bay {
    height: 140px;
    border: 3px solid #111;
    background: #0f0f0f;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
}

/* Spinning Cassette */
.cassette-tape {
    width: 180px;
    height: 110px;
    background: #333;
    border: 4px solid #111;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.cassette-label {
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, var(--neon-orange) 0%, var(--neon-pink) 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    color: #000;
    text-align: center;
    font-weight: bold;
    padding: 4px;
}

.room-chiptune .cassette-label {
    background: linear-gradient(180deg, var(--neon-green) 0%, var(--neon-cyan) 100%);
}

.cassette-spindles {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 35px;
    margin-top: 5px;
}

.spindle {
    width: 32px;
    height: 32px;
    background: #111;
    border: 3px dashed #fff;
    border-radius: 50%;
    position: relative;
}

/* Spin animation triggered when audio is playing */
.audio-playing .spindle {
    animation: spin 3s linear infinite;
}

/* Vinyl Player style (for Jazz and Indie rooms) */
.vinyl-record {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #050505 40%, #222 42%, #050505 43%, #111 60%, #000 100%);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    position: relative;
    display: none;
}

.vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--neon-cyan);
    border-radius: 50%;
    border: 3px solid #000;
}

.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.vinyl-needle {
    position: absolute;
    top: 10px;
    right: 25px;
    width: 15px;
    height: 80px;
    background: #aaa;
    transform-origin: top center;
    transform: rotate(15deg);
    transition: transform 0.5s ease;
    border-radius: 2px;
    z-index: 5;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4);
}

.audio-playing .vinyl-record {
    display: block;
    animation: spin 4s linear infinite;
}

.audio-playing .vinyl-needle {
    transform: rotate(30deg);
}

/* Render vinyl instead of cassette for certain classes */
.room-indie .vinyl-record,
.room-jazz .vinyl-record {
    display: block;
}

.room-indie .cassette-tape,
.room-jazz .cassette-tape {
    display: none;
}

/* VU Meters (Dynamic Level Bars) */
.hifi-vu-meter {
    height: 35px;
    background: #000;
    border: 2px solid #222;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 4px 10px;
}

.vu-bar-col {
    width: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}

.vu-segment {
    width: 100%;
    height: 4px;
    background: #222;
    transition: background-color 0.1s ease;
}

/* Active segment colors from bottom to top: Green, Orange, Red */
.vu-bar-col.level-1 .vu-segment:nth-last-child(-n+3) {
    background-color: var(--neon-green);
}

.vu-bar-col.level-2 .vu-segment:nth-last-child(-n+4) {
    background-color: var(--neon-green);
}

.vu-bar-col.level-2 .vu-segment:nth-last-child(5) {
    background-color: var(--neon-orange);
}

.vu-bar-col.level-3 .vu-segment:nth-last-child(-n+4) {
    background-color: var(--neon-green);
}

.vu-bar-col.level-3 .vu-segment:nth-last-child(5) {
    background-color: var(--neon-orange);
}

.vu-bar-col.level-3 .vu-segment:nth-last-child(6) {
    background-color: var(--neon-pink);
}

/* Playback Control Buttons */
.hifi-controls {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.hifi-btn {
    flex: 1;
    height: 40px;
    background: linear-gradient(to bottom, #444 0%, #222 100%);
    border: 2px solid #555;
    border-radius: 4px;
    color: #ccc;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #111;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}

.hifi-btn:active,
.hifi-btn.btn-active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #111;
    background: linear-gradient(to bottom, #222 0%, #111 100%);
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
}

.room-chiptune .hifi-btn.btn-active {
    color: var(--neon-green);
    border-color: var(--neon-green);
}

.room-synthwave .hifi-btn.btn-active {
    color: var(--neon-pink);
    border-color: var(--neon-pink);
}

.room-grunge .hifi-btn.btn-active {
    color: var(--neon-orange);
    border-color: var(--neon-orange);
}

/* Tracklist LED screen */
.hifi-track-display {
    background-color: #080808;
    border: 2px solid #222;
    border-radius: 4px;
    height: 60px;
    overflow-y: auto;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: #aaa;
}

.hifi-track-display::-webkit-scrollbar {
    width: 4px;
}

.hifi-track-display::-webkit-scrollbar-thumb {
    background: #333;
}

.track-item {
    padding: 3px 0;
    border-bottom: 1px solid #151515;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--font-pixel);
    font-size: 1rem;
}

.track-item:hover {
    color: #fff;
    background-color: #111;
}

.track-item.track-active {
    color: var(--neon-cyan);
}

.room-chiptune .track-item.track-active {
    color: var(--neon-green);
}

.room-synthwave .track-item.track-active {
    color: var(--neon-pink);
}

.room-grunge .track-item.track-active {
    color: var(--neon-orange);
}

/* Right Columns: Pinnwand & Fanzine */
.room-interactive-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.room-item-card {
    background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 4px solid var(--wood-light);
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 15px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.room-item-card:hover {
    transform: translateY(-3px);
    border-color: var(--neon-cyan);
    box-shadow: 0 10px 25px var(--neon-cyan-glow);
}

.room-item-card i {
    font-size: 2.2rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow);
}

.room-chiptune .room-item-card:hover {
    border-color: var(--neon-green);
    box-shadow: 0 10px 25px var(--neon-green-glow);
}

.room-chiptune .room-item-card i {
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green-glow);
}

.room-synthwave .room-item-card:hover {
    border-color: var(--neon-pink);
    box-shadow: 0 10px 25px var(--neon-pink-glow);
}

.room-synthwave .room-item-card i {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink-glow);
}

.room-grunge .room-item-card:hover {
    border-color: var(--neon-orange);
    box-shadow: 0 10px 25px var(--neon-orange-glow);
}

.room-grunge .room-item-card i {
    color: var(--neon-orange);
    text-shadow: 0 0 5px var(--neon-orange-glow);
}

.room-item-card .card-text h3 {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    color: #fff;
}

.room-item-card .card-text p {
    font-size: 0.8rem;
    color: var(--wood-warm);
}


/* MAIN ELEVATOR PANEL NAVIGATION OVERLAY */
.elevator-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 8, 7, 0.85);
    z-index: 800;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.elevator-panel {
    background: linear-gradient(135deg, #2b2b2b 0%, #151515 100%);
    border: 6px solid var(--wood-medium);
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    position: relative;
}

.elevator-panel-header {
    background-color: #000;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.elevator-panel-display {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--neon-orange);
    text-shadow: 0 0 8px var(--neon-orange-glow);
    animation: blink 1s infinite alternate;
}

.elevator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}


.elevator-btn {
    height: 52px;
    background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
    border: 2px solid rgba(0, 240, 255, 0.4);
    border-radius: 4px;
    color: var(--neon-cyan);
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #000, 0 0 8px rgba(0, 240, 255, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease;
}

.elevator-btn:hover {
    border-color: var(--neon-cyan);
    color: #fff;
    box-shadow: 0 3px 0 #000, 0 0 12px var(--neon-cyan-glow), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.elevator-btn:active,
.elevator-btn.active-floor {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000, 0 0 15px var(--neon-orange-glow), inset 0 1px 1px rgba(0,0,0,0.5);
    border-color: var(--neon-orange);
    color: var(--neon-orange);
    background: linear-gradient(to bottom, #221510, #110905);
}

.elevator-btn.selected-floor {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 3px 0 #000, 0 0 15px var(--neon-cyan-glow), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.elevator-btn.selected-floor.active-floor {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000, 0 0 15px var(--neon-cyan-glow);
    background: linear-gradient(to bottom, #0d1a20, #060e12);
}

.elevator-close-btn {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    background-color: var(--wood-medium);
    border: 2px solid var(--wood-light);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.elevator-close-btn:hover {
    background-color: var(--wood-light);
}

/* FLOATING ELEVATOR DIAL OVERLAY (WHILE MOVING) */
.moving-elevator-dial-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 750;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.moving-dial-panel {
    background: rgba(18, 14, 12, 0.95);
    border: 4px solid var(--wood-light);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(184, 151, 88, 0.25);
    backdrop-filter: blur(4px);
    width: 240px;
    text-align: center;
}

.moving-dial-title {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    color: var(--neon-orange);
    text-shadow: 0 0 8px var(--neon-orange-glow);
    margin-bottom: 12px;
    letter-spacing: 1px;
    animation: blink 0.8s infinite alternate;
}

.moving-dial-floor-text {
    font-family: var(--font-pixel);
    font-size: 2.2rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
    margin-top: 10px;
}

/* GENERAL OVERLAYS / LIGHTBOX DIALOGS */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 8, 7, 0.9);
    z-index: 900;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 6px solid var(--wood-light);
    border-radius: 8px;
    width: 650px;
    max-height: 460px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#videoModal .modal-content {
    width: 800px;
    height: 520px;
}

.modal-header {
    background-color: var(--wood-dark);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--wood-light);
}

.modal-header h3 {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow);
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--wood-warm);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close-btn:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.modal-body:focus {
    outline: none;
}

/* Guestbook specific styling */
.guestbook-form,
.blackboard-form {
    display: grid;
    gap: 12px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: var(--wood-warm);
}

.form-group input,
.form-group textarea {
    background-color: #111;
    border: 2px solid var(--wood-light);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-sans);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--neon-cyan);
    outline: none;
    box-shadow: 0 0 5px var(--neon-cyan-glow);
}

.form-btn {
    background: var(--wood-light);
    border: 2px solid var(--wood-warm);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.3rem;
    padding: 6px 15px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.form-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow);
}

.guestbook-list,
.blackboard-list {
    display: grid;
    gap: 15px;
}

.guestbook-item,
.blackboard-item {
    background: rgba(0, 0, 0, 0.25);
    border-left: 4px solid var(--neon-orange);
    padding: 12px;
    border-radius: 0 4px 4px 0;
}

.guestbook-item-header,
.blackboard-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--wood-warm);
    margin-bottom: 6px;
}

.guestbook-item-name,
.blackboard-item-title {
    font-weight: 600;
    color: #fff;
}

.blackboard-item {
    border-left-color: var(--neon-pink);
}

.blackboard-item-contact {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

/* Lightbox Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.gallery-item {
    aspect-ratio: 1;
    border: 3px solid var(--wood-light);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    border-color: var(--neon-cyan);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* LIVE LOUNGE STUFF - INTERACTIVE PIANO */
.lounge-piano {
    margin-top: 25px;
    background: #000;
    border: 4px solid var(--wood-medium);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

.piano-title {
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink-glow);
    margin-bottom: 10px;
    text-align: center;
}

.piano-keys {
    display: flex;
    position: relative;
    height: 120px;
    background: #111;
    border-radius: 2px;
}

.piano-key-white {
    flex: 1;
    height: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background-color 0.1s ease;
}

.piano-key-white:active,
.piano-key-white.active {
    background-color: var(--neon-cyan);
}

.piano-key-black {
    width: 20px;
    height: 70px;
    background-color: #111;
    border-radius: 0 0 2px 2px;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    transform: translateX(-50%);
    transition: background-color 0.1s ease;
}

.piano-key-black:active,
.piano-key-black.active {
    background-color: var(--neon-pink);
}

/* Position mapping for piano keys */
.key-cs {
    left: 14.28%;
}

.key-ds {
    left: 28.56%;
}

.key-fs {
    left: 57.12%;
}

.key-gs {
    left: 71.4%;
}

.key-as {
    left: 85.68%;
}

/* News section inside Reception */
.news-bulletin {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.news-item {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.news-date {
    font-size: 0.75rem;
    color: var(--neon-cyan);
    font-family: var(--font-pixel);
    font-size: 1rem;
}

.news-title {
    font-weight: 600;
    color: #fff;
    margin: 2px 0;
}

.news-desc {
    font-size: 0.85rem;
    color: #ccc;
}

/* Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}

/* Responsive Scaling Styles (applied inside viewport loader) */
@media (max-width: 1024px) or (max-height: 900px) {
    /* Scaling logic will be dynamically handled in JS via transform: scale */
}

/* MULTIPLAYER CHAT BAR & SPEECH BUBBLES */
.chat-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 850;
    width: 100%;
    height: 36px;
    display: flex;
    background: rgba(18, 14, 12, 0.88);
    border-top: 2px solid var(--wood-light);
    border-radius: 0;
    padding: 3px 10px;
    align-items: center;
    gap: 6px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.chat-name-badge {
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: var(--neon-cyan);
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed var(--neon-cyan);
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.chat-name-badge:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(0, 240, 255, 0.15);
}

#chatInput {
    flex: 1;
    background-color: #111;
    border: 1px solid var(--wood-light);
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    outline: none;
}

#chatInput:focus {
    border-color: var(--neon-cyan);
}

#sendChatBtn {
    background: var(--wood-medium);
    border: 1px solid var(--wood-light);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

#sendChatBtn:hover {
    background-color: var(--wood-light);
}

.avatar-name-tag {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
    z-index: 20;
}

.avatar-speech-bubble {
    position: absolute;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    border: 2px solid #000;
    pointer-events: none;
    z-index: 25;
}

.avatar-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}

.avatar-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 9px 9px 0;
    border-style: solid;
    border-color: #000 transparent;
    display: block;
    width: 0;
    z-index: -1;
}

/* ============================================================
   VISUAL BEAUTY UPGRADES
   ============================================================ */

/* --- LOBBY BACKGROUND: Rich night-sky gradient --- */
.lobby-floor {
    background: linear-gradient(to bottom,
            #0b0d1a 0%,
            #12152e 20%,
            #1a1028 40%,
            #2c1b18 65%,
            #150a09 100%) !important;
    overflow: hidden;
}

/* --- STARFIELD BOKEH --- */
.lobby-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.lobby-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
    animation: star-twinkle 2s infinite alternate ease-in-out;
}

.lobby-star--big {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 8px 3px rgba(180, 210, 255, 0.6);
}

@keyframes star-twinkle {
    from {
        opacity: 0.3;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* --- LIGHT BEAMS FROM CEILING --- */
.lobby-light-beams {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.light-beam {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
            rgba(255, 220, 150, 0.08) 0%,
            rgba(255, 200, 100, 0.04) 40%,
            transparent 80%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: beam-sway 6s ease-in-out infinite alternate;
}

.light-beam:nth-child(2) {
    animation-delay: -2s;
}

.light-beam:nth-child(3) {
    animation-delay: -4s;
}

@keyframes beam-sway {
    from {
        opacity: 0.6;
        transform: translateX(-50%) skewX(-2deg);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) skewX(2deg);
    }
}

/* --- CHANDELIER --- */
.lobby-chandelier {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
    animation: chandelier-sway 8s ease-in-out infinite alternate;
}

@keyframes chandelier-sway {
    from {
        transform: translateX(-50%) rotate(-1deg);
    }

    to {
        transform: translateX(-50%) rotate(1deg);
    }
}

/* --- NEON MARQUEE SIGN --- */
.lobby-marquee {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13;
    text-align: center;
    background: linear-gradient(135deg, #1a0e0a 0%, #0e0805 100%);
    border: 3px solid var(--wood-medium);
    border-radius: 6px;
    padding: 6px 20px 8px;
    box-shadow:
        0 0 20px rgba(255, 108, 0, 0.3),
        inset 0 0 15px rgba(0, 0, 0, 0.6);
    min-width: 260px;
}

.marquee-border-lights {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.marquee-bulb {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-orange);
    box-shadow: 0 0 6px var(--neon-orange);
    animation: bulb-sequence 1.2s infinite step-start;
}

.marquee-bulb:nth-child(odd) {
    animation-delay: 0s;
}

.marquee-bulb:nth-child(even) {
    animation-delay: 0.6s;
}

@keyframes bulb-sequence {

    0%,
    49% {
        background: var(--neon-orange);
        box-shadow: 0 0 8px var(--neon-orange);
    }

    50%,
    100% {
        background: #3a1a00;
        box-shadow: none;
    }
}

.marquee-text {
    font-family: var(--font-pixel);
    font-size: 2.2rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow), 0 0 20px rgba(0, 240, 255, 0.3);
    letter-spacing: 3px;
    line-height: 1;
    margin-top: 6px;
}

.marquee-sub {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--wood-warm);
    opacity: 0.8;
    margin-top: 2px;
}

/* --- LOBBY DECORATIVE COLUMNS --- */
.lobby-column {
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 130px;
    z-index: 8;
    background: linear-gradient(to right,
            #3a2a22 0%, #6b4c3a 30%, #a67c65 50%, #6b4c3a 70%, #3a2a22 100%);
    border-top: 6px solid var(--wood-warm);
    border-radius: 2px 2px 0 0;
    box-shadow:
        2px 0 8px rgba(0, 0, 0, 0.5),
        -2px 0 8px rgba(0, 0, 0, 0.5);
}

.lobby-column::before {
    content: '';
    position: absolute;
    top: -14px;
    left: -6px;
    width: 30px;
    height: 10px;
    background: linear-gradient(135deg, #a67c65 0%, #6b4c3a 100%);
    border-radius: 2px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
}

/* --- LOBBY PLANTS --- */
.lobby-plant {
    position: absolute;
    bottom: 0;
    z-index: 9;
}

/* --- LOBBY CARPET RUNNER --- */
.lobby-carpet {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px, transparent 8px,
            rgba(255, 108, 0, 0.08) 8px, rgba(255, 108, 0, 0.08) 10px),
        linear-gradient(to bottom, #5a1a0a 0%, #3a0f06 60%, #1a0703 100%);
    border-left: 3px solid rgba(255, 108, 0, 0.3);
    border-right: 3px solid rgba(255, 108, 0, 0.3);
    z-index: 7;
}

/* Carpet diamond pattern overlay */
.lobby-carpet::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg,
            rgba(255, 215, 0, 0.05) 0px, rgba(255, 215, 0, 0.05) 2px,
            transparent 2px, transparent 14px),
        repeating-linear-gradient(-45deg,
            rgba(255, 215, 0, 0.05) 0px, rgba(255, 215, 0, 0.05) 2px,
            transparent 2px, transparent 14px);
}

/* --- LOBBY FLOOR GRID UPGRADE: marble tiles --- */
.lobby-floor-grid {
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px,
            transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px,
            transparent 1px, transparent 40px),
        linear-gradient(135deg, #1e1410 0%, #0f0907 100%) !important;
    border-top: 6px solid #4e3629 !important;
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* --- CORRIDOR WALLPAPER UPGRADE --- */
.corridor-wallpaper {
    border-bottom: 6px solid var(--wood-dark) !important;
    overflow: visible;
}


/* --- CORRIDOR CEILING LAMPS --- */
.corridor-ceiling-lamps {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 12;
}

.ceiling-lamp {
    position: absolute;
    top: 0;
    width: 8px;
    height: 30px;
    background: linear-gradient(to bottom, var(--wood-medium), var(--wood-dark));
    border-radius: 0 0 3px 3px;
}

.ceiling-lamp:nth-child(1) {
    left: 170px;
}

.ceiling-lamp:nth-child(2) {
    left: 512px;
    transform: translateX(-50%);
}

.ceiling-lamp:nth-child(3) {
    left: 725px;
}

/* Lamp shade */
.ceiling-lamp::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 16px;
    background: linear-gradient(to bottom, #3a2a1e 0%, #1a1008 100%);
    border-radius: 0 0 15px 15px;
    border: 2px solid var(--wood-light);
}

/* Warm lamp glow cone */
.ceiling-lamp::after {
    content: '';
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 70px;
    background: radial-gradient(ellipse at top,
            rgba(255, 200, 80, 0.12) 0%,
            transparent 75%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* --- CORRIDOR FLOOR NUMBER BADGE --- */
.corridor-floor-number {
    position: absolute;
    right: 14px;
    top: 8px;
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    color: var(--neon-orange);
    background: #000;
    border: 2px solid var(--wood-light);
    border-radius: 3px;
    padding: 2px 7px;
    text-shadow: 0 0 6px var(--neon-orange-glow);
    z-index: 5;
    box-shadow: inset 0 0 6px rgba(255, 108, 0, 0.3);
}

/* --- LOBBY ISOMETRIC BG CLEANUP --- */
.lobby-isometric-bg {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 200px !important;
}

/* --- CORRIDOR FLOOR RICHER DARK GRADIENT --- */
.corridor-floor {
    background: linear-gradient(to bottom, #071921 0%, #030e13 100%) !important;
}

/* --- CORRIDOR FLOOR BASEBOARD (bottom stripe) --- */
.corridor-bg-grid {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 2px, transparent 2px, transparent 24px),
        linear-gradient(to bottom, #cf2e2e 0%, #8c1414 100%) !important;
    border-top: 6px solid #8e8e93 !important;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* --- PARTICLE CANVAS ANIMATION (initialised in app.js) --- */
/* Handled via JS */

/* --- RETRO DESK SERVICE TELEPHONE & CONTACT MODAL STYLES --- */
.desk-phone-wrapper {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #cc2b1d 0%, #8c0f05 100%);
    border: 3px solid var(--wood-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    z-index: 10;
}

.desk-phone-wrapper:hover {
    transform: scale(1.15) rotate(-10deg);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan-glow), 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Ringing animation */
.desk-phone-wrapper.ringing {
    animation: phone-ring-wobble 0.15s ease-in-out infinite alternate;
}

@keyframes phone-ring-wobble {
    0% {
        transform: scale(1.05) rotate(-12deg);
    }

    100% {
        transform: scale(1.1) rotate(12deg);
    }
}

.contact-link-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--wood-light);
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-link-row:hover {
    transform: translateY(-2px);
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15);
}

.reception-hotline-box:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}


/* --- OUTDOOR ENTRANCE AREA & PORTAL CANOPY --- */
.lobby-outdoor-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: calc(100% - 200px);
    /* floor is 200px high */
    background: linear-gradient(180deg, #0f141d 0%, #151922 100%);
    border-right: 6px solid var(--wood-dark);
    box-sizing: border-box;
    z-index: 9;
    overflow: hidden;
}

/* Star effect in outdoor sky */
.lobby-outdoor-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px;
    background-position: 10px 15px, 60px 45px;
    opacity: 0.25;
}

.lobby-outdoor-sidewalk {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 200px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 32px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 2px, transparent 2px, transparent 24px),
        linear-gradient(to bottom, #2b2e36 0%, #181b21 100%);
    border-top: 6px solid #484f56;
    border-right: 6px solid var(--wood-dark);
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    z-index: 9;
}

.outdoor-red-carpet {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to bottom, #9d1515 0%, #680b0b 100%);
    border-top: 3px solid var(--neon-pink);
    border-bottom: 3px solid var(--neon-pink);
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.2);
}

/* Street Lamp Post */
.outdoor-street-lamp {
    position: absolute;
    top: 5px;
    left: 50px;
    width: 80px;
    height: 100%;
    z-index: 12;
    pointer-events: none;
}

.lamp-post {
    position: absolute;
    bottom: 0;
    left: 38px;
    width: 6px;
    height: 95px;
    background: linear-gradient(to right, #333 0%, #555 50%, #222 100%);
    border-radius: 2px 2px 0 0;
}

.lamp-head {
    position: absolute;
    bottom: 92px;
    left: 31px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 20%, var(--gold) 60%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.6);
    animation: lamp-glow 1.5s infinite alternate ease-in-out;
}

@keyframes lamp-glow {
    from {
        opacity: 0.85;
        filter: brightness(0.9);
    }

    to {
        opacity: 1;
        filter: brightness(1.1);
    }
}

.lamp-light-cone {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 120px;
    height: 95px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.01) 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    pointer-events: none;
}

/* Canopy (Überdachung) */
.lobby-entrance-canopy {
    position: absolute;
    top: 65px;
    left: 85px;
    width: 130px;
    height: 25px;
    background: linear-gradient(to bottom, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 3px solid var(--wood-light);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    z-index: 13;
    display: flex;
    justify-content: center;
    align-items: center;
}

.canopy-neon-text {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow), 0 0 10px rgba(0, 240, 255, 0.3);
    letter-spacing: 1px;
    font-weight: 600;
}

.lobby-entrance-canopy::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -3px;
    right: -3px;
    height: 4px;
    background: var(--neon-pink);
    box-shadow: 0 0 8px var(--neon-pink);
}

.canopy-column {
    position: absolute;
    top: 87px;
    width: 6px;
    height: 113px;
    /* Sidewalk level */
    background: linear-gradient(to right, #1f1410 0%, #3e261c 50%, #120b08 100%);
    border: 1.5px solid var(--wood-light);
    border-radius: 2px;
    z-index: 12;
}

/* Entrance Portal Dividing Wall Outline */
.lobby-entrance-portal {
    position: absolute;
    top: 0;
    left: 214px;
    width: 12px;
    height: 200px;
    /* fills ceiling area */
    background: rgba(0, 240, 255, 0.1);
    border-left: 3px solid var(--neon-cyan);
    border-right: 3px solid var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan-glow), inset 0 0 8px rgba(0, 240, 255, 0.2);
    z-index: 13;
}

.lobby-entrance-portal::before {
    content: 'PORTAL';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 4px var(--neon-cyan);
    letter-spacing: 2px;
}

/* Shift hotspots inside the lobby */
.hotspot-reception-shifted {
    left: 260px !important;
    /* shifted right next to columns */
    width: 170px !important;
    height: 100px !important;
    bottom: 40px !important;
}

.hotspot-reception-shifted .desk-phone-wrapper {
    top: 6px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
    border-width: 2px !important;
}

.hotspot-reception-shifted i:not(.fa-phone) {
    font-size: 1.8rem !important;
    margin-bottom: 4px !important;
}

.hotspot-reception-shifted span {
    font-size: 1.2rem !important;
}

.hotspot-reception-shifted small {
    font-size: 0.7rem !important;
}

.hotspot-lounge-shifted {
    right: 40px !important;
    /* shifted slightly right */
    left: auto !important;
    width: 170px !important;
    height: 100px !important;
    bottom: 40px !important;
}

.hotspot-lounge-shifted i {
    font-size: 1.8rem !important;
    margin-bottom: 4px !important;
}

.hotspot-lounge-shifted span {
    font-size: 1.2rem !important;
}

.hotspot-lounge-shifted small {
    font-size: 0.7rem !important;
}

/* --- LOBBY PLAYLIST PLAYER JUKEBOX --- */
.lobby-playlist-player {
    position: absolute;
    bottom: 40px;
    left: 610px;
    width: 175px;
    height: 140px;
    background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    border: 4px solid var(--wood-light);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.4);
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    box-sizing: border-box;
}

.lobby-player-screen {
    background-color: #0b0705;
    border: 1.5px solid var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan-glow), inset 0 0 5px rgba(0, 240, 255, 0.2);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: var(--font-pixel);
    color: var(--neon-cyan);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lobby-player-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
}

.lobby-player-status {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-top: 1px;
    letter-spacing: 0.5px;
}

.lobby-player-progress-container {
    background: #000;
    height: 6px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    margin: 2px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.lobby-player-progress-bar {
    background: var(--neon-cyan);
    box-shadow: 0 0 4px var(--neon-cyan);
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.lobby-player-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.lobby-player-btn {
    background: #111;
    border: 1.5px solid var(--wood-light);
    color: var(--wood-warm);
    border-radius: 4px;
    width: 22px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.lobby-player-btn:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 4px var(--neon-cyan-glow);
}

.lobby-player-btn:active {
    transform: scale(0.95);
}

.lobby-player-volume {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--wood-warm);
    font-size: 0.65rem;
}

.lobby-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 3px;
    background: #000;
    border-radius: 1.5px;
    outline: none;
}

.lobby-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-cyan);
    cursor: pointer;
    box-shadow: 0 0 3px var(--neon-cyan);
}

.lobby-player-playlist-container {
    position: relative;
    width: 100%;
    background-color: #0b0705;
    border: 1.5px solid var(--wood-light);
    border-radius: 4px;
    height: 50px;
    overflow-y: auto;
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--wood-warm);
    box-sizing: border-box;
    padding: 2px;
}

.lobby-player-playlist-container::-webkit-scrollbar {
    width: 4px;
}

.lobby-player-playlist-container::-webkit-scrollbar-track {
    background: #000;
}

.lobby-player-playlist-container::-webkit-scrollbar-thumb {
    background: var(--wood-light);
    border-radius: 2px;
}

.lobby-player-playlist-container::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

.lobby-track-item {
    padding: 3px 6px;
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}

.lobby-track-item:hover {
    background-color: rgba(0, 240, 255, 0.08);
    color: #fff;
}

.lobby-track-item.active {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.2) 0%, transparent 100%);
    color: var(--neon-cyan) !important;
    font-weight: bold;
    border-left: 2px solid var(--neon-cyan);
    padding-left: 4px;
}

.lobby-playlist-loading {
    padding: 6px;
    text-align: center;
    color: var(--wood-warm);
    opacity: 0.6;
}

/* Residents Directory Modal Styles */
.residents-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 5px;
    overflow-y: auto;
    max-height: 380px;
    /* bounds it within modal body */
}

.floorplan-floor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 12px;
}

.floorplan-floor-header {
    font-family: var(--font-pixel);
    font-size: 1.3rem;
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink-glow);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
    letter-spacing: 1px;
}

.floorplan-rooms-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    /* in case window is very narrow */
}

.floorplan-room-card {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--wood-light);
    border-radius: 6px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.floorplan-room-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow);
    background: rgba(0, 240, 255, 0.02);
}

.floorplan-img-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 1.5px solid var(--wood-medium);
    overflow: hidden;
    flex-shrink: 0;
}

.floorplan-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floorplan-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.floorplan-room-number {
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    color: var(--neon-orange);
    text-shadow: 0 0 4px var(--neon-orange-glow);
    line-height: 1;
}

.floorplan-band-name {
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.2;
    margin-top: 1px;
    text-transform: uppercase;
}

.floorplan-genre {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 2px;
    line-height: 1.1;
}

/* ============================================================
   ART-HOTEL GALLERY PAINTINGS FOR CORRIDORS
   ============================================================ */

/* Common styles for paintings */
#floor-3 .corridor-wallpaper::before,
#floor-3 .corridor-wallpaper::after,
#floor-2 .corridor-wallpaper::before,
#floor-2 .corridor-wallpaper::after,
#floor-1 .corridor-wallpaper::before,
#floor-1 .corridor-wallpaper::after {
    content: '';
    position: absolute;
    top: 25px;
    width: 48px;
    height: 68px;
    box-sizing: border-box;
    border: 3px solid #18181b;
    /* gallery frame */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(0, 0, 0, 0.15);
    z-index: 5;
    border-radius: 2px;
}

/* Position left paintings */
#floor-3 .corridor-wallpaper::before,
#floor-2 .corridor-wallpaper::before,
#floor-1 .corridor-wallpaper::before {
    left: 215px;
}

/* Position right paintings */
#floor-3 .corridor-wallpaper::after,
#floor-2 .corridor-wallpaper::after,
#floor-1 .corridor-wallpaper::after {
    left: 759px;
}

/* Floor 3 Left: Minimalist geometric arches */
#floor-3 .corridor-wallpaper::before {
    background:
        radial-gradient(circle at 50% 100%, #ffd700 16px, transparent 17px),
        radial-gradient(circle at 50% 100%, #00f0ff 24px, transparent 25px),
        linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
    border-color: var(--wood-light);
}

/* Floor 3 Right: Minimal black circle on gold leaf */
#floor-3 .corridor-wallpaper::after {
    background:
        radial-gradient(circle at 50% 50%, #18181b 12px, transparent 13px),
        linear-gradient(135deg, #dfc38a 0%, #b89758 100%);
    border-color: #18181b;
}

/* Floor 2 Left: Modern expressionist splash */
#floor-2 .corridor-wallpaper::before {
    background:
        radial-gradient(circle at 35% 35%, var(--neon-pink) 20%, transparent 60%),
        radial-gradient(circle at 65% 65%, var(--neon-orange) 10%, transparent 60%),
        linear-gradient(135deg, #ffd700 0%, #fff 100%);
    border-color: #18181b;
}

/* Floor 2 Right: Contemporary teal wave */
#floor-2 .corridor-wallpaper::after {
    background:
        radial-gradient(circle at 100% 100%, var(--neon-cyan) 35%, transparent 75%),
        linear-gradient(to bottom, #071921 0%, #030e13 100%);
    border-color: var(--wood-light);
}

/* Floor 1 Left: Retro pop-art pink target */
#floor-1 .corridor-wallpaper::before {
    background:
        repeating-radial-gradient(circle, var(--neon-pink) 0px, var(--neon-pink) 5px, #18181b 5px, #18181b 10px);
    border-color: var(--wood-light);
}

/* Floor 1 Right: Modernist geometric lines */
#floor-1 .corridor-wallpaper::after {
    background:
        linear-gradient(45deg, #18181b 50%, transparent 50%),
        linear-gradient(-45deg, var(--neon-orange) 50%, transparent 50%),
        var(--neon-cyan);
    border-color: #18181b;
}

/* ============================================================
   OUTDOOR PARK & BACKGROUND SCENERY
   ============================================================ */

.outdoor-moon {
    position: absolute;
    top: 50px;
    right: 40px;
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, #fffdf0 0%, #fffae0 60%, rgba(255, 250, 224, 0.1) 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 250, 224, 0.4), 0 0 30px rgba(255, 250, 224, 0.2);
    z-index: 2;
}

.outdoor-park-hills {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(to bottom, #07120c 0%, #030805 100%);
    clip-path: polygon(0% 45%, 20% 30%, 45% 55%, 70% 35%, 85% 50%, 100% 40%, 100% 100%, 0% 100%);
    z-index: 2;
    opacity: 0.9;
}

.outdoor-park-trees {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 3;
    pointer-events: none;
}

.park-tree {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
}

.tree-pine-1 {
    left: -5px;
    bottom: -10px;
    z-index: 5;
    transform: scale(0.95);
}

.tree-round-1 {
    left: 65px;
    bottom: -15px;
    z-index: 6;
    transform: scale(0.9);
}

.tree-pine-2 {
    left: 145px;
    bottom: -10px;
    z-index: 4;
    transform: scale(0.8);
    opacity: 0.65;
}

/* ============================================================
   ROOM WINDOW & CAROUSEL STYLES
   ============================================================ */

.room-window {
    position: absolute;
    left: 470px;
    top: 80px;
    width: 150px;
    height: 110px;
    background: linear-gradient(to bottom, #0a0f1d 0%, #151e33 100%);
    border: 4px solid var(--wood-dark);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    z-index: 5;
}

/* Window reflection sheen */
.room-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%);
    z-index: 4;
    pointer-events: none;
}

/* Vertical grid bar */
.room-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: var(--wood-dark);
    transform: translateX(-50%);
    z-index: 3;
}

/* Horizontal grid bar */
.room-window-crossbar {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--wood-dark);
    z-index: 3;
}

/* Tiny moon inside window */
.window-moon {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #fffef2;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 254, 242, 0.6);
    z-index: 1;
}

/* Distant trees inside window */
.window-trees {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 120%;
    height: 36px;
    background: linear-gradient(to bottom, #07120c 0%, #030805 100%);
    clip-path: polygon(0% 65%, 15% 45%, 32% 70%, 50% 50%, 68% 65%, 82% 40%, 100% 58%, 100% 100%, 0% 100%);
    z-index: 2;
}

/* Carousel dots and arrows */
.carousel-arrow:hover {
    color: var(--neon-cyan) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 8px var(--neon-cyan-glow) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    transform: translateY(-70%) scale(1.08) !important;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.carousel-dot.active {
    background-color: var(--neon-cyan);
    box-shadow: 0 0 6px var(--neon-cyan);
}

/* ============================================================
   STAGE: ROOFTOP BAR (SPECIAL VIDEO LOUNGE)
   ============================================================ */
.rooftop-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background: linear-gradient(to bottom, #080711 0%, #151329 100%);
    border-bottom: 8px solid var(--wood-medium);
    overflow: hidden;
}

.rooftop-stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,0.08) 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,0.12) 1px, transparent 1px),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.05) 2px, transparent 2px);
    background-size: 200px 200px;
}

.rooftop-neon-lights {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6px;
    background-color: var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan-glow);
}

.rooftop-floor-surface {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 176px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 40px, transparent 40px, transparent 80px),
        linear-gradient(to bottom, #2d1e18 0%, #170f0c 100%);
    border-top: 4px solid var(--wood-light);
}

/* Big Cinema Screen */
.rooftop-screen-container {
    position: absolute;
    left: 90px;
    top: 56px;
    width: 470px;
    height: 250px;
    z-index: 15;
}

.rooftop-screen-bezel {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2a2a2a 0%, #0d0d0d 100%);
    border: 10px solid #0a0a0a;
    border-radius: 4px;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.85),
        0 0 25px rgba(0, 240, 255, 0.18),
        inset 0 0 0 3px var(--wood-dark);
    padding: 6px;
}

.rooftop-screen-inner {
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    position: relative;
}

.rooftop-screen-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.rooftop-screen-placeholder p {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow);
    margin-top: 15px;
}

.rooftop-screen-placeholder small {
    font-size: 0.8rem;
    color: var(--wood-warm);
    margin-top: 5px;
}

/* Console Playlist (retro ticket box) */
.rooftop-console {
    position: absolute;
    right: 32px;
    top: 56px;
    width: 280px;
    height: 250px;
    background: linear-gradient(180deg, #1d1b26 0%, #0e0d14 100%);
    border: 4px solid var(--wood-light);
    border-radius: 6px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 108, 0, 0.15);
    z-index: 15;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rooftop-console-footer {
    background: var(--wood-dark);
    border-top: 2px solid var(--wood-light);
    padding: 4px 10px;
    font-family: var(--font-pixel);
    font-size: 0.95rem;
    color: var(--neon-green);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rooftop-console-footer .rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-pink);
    box-shadow: 0 0 6px var(--neon-pink);
    animation: blink 1s infinite alternate;
}

.rooftop-console-header {
    background: var(--wood-dark);
    padding: 8px 12px;
    font-family: var(--font-pixel);
    font-size: 1.3rem;
    color: var(--neon-orange);
    border-bottom: 2px solid var(--wood-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rooftop-playlist {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rooftop-item {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: #ccc;
    transition: all 0.15s ease;
}

.rooftop-item:hover,
.rooftop-item.selected {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.08);
}

.rooftop-item.active {
    border-color: var(--neon-pink);
    color: var(--neon-pink);
    background: rgba(255, 0, 127, 0.08);
}

.rooftop-item-number {
    margin-right: 8px;
    opacity: 0.6;
}

.rooftop-item-title {
    flex: 1;
}

.rooftop-item-play {
    font-size: 0.8rem;
    opacity: 0.7;
}

.rooftop-item.active .rooftop-item-play {
    color: var(--neon-pink);
    opacity: 1;
}

/* Rooftop Bar Seats Styling */
.rooftop-seat {
    position: absolute;
    bottom: 95px;
    width: 40px;
    height: 90px;
    z-index: 12;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.rooftop-seat:hover {
    transform: scale(1.05);
}

.seat-sprite {
    width: 40px;
    height: 70px;
}

/* Avatar Sitting State */
.player-avatar.sitting {
    transform: translateY(22px);
}

.player-avatar.sitting .leg-left,
.player-avatar.sitting .leg-right {
    display: none;
}

/* Avatar Dancing State & Animations */
.player-avatar.avatar-dancing svg {
    animation: dance-bounce 0.6s infinite alternate ease-in-out;
}

.player-avatar.avatar-dancing .leg-left {
    animation: dance-leg-left 0.3s infinite alternate ease-in-out;
}

.player-avatar.avatar-dancing .leg-right {
    animation: dance-leg-right 0.3s infinite alternate ease-in-out;
}

@keyframes dance-bounce {
    0% { transform: translateY(0) rotate(-3deg) scaleY(1); }
    100% { transform: translateY(-6px) rotate(3deg) scaleY(0.95); }
}

@keyframes dance-leg-left {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0.5) translateY(-3px); }
}

@keyframes dance-leg-right {
    0% { transform: scaleY(0.5) translateY(-3px); }
    100% { transform: scaleY(1); }
}

/* Avatar Singing State & Animations */
.player-avatar.avatar-singing svg {
    animation: sing-bob 0.4s infinite alternate ease-in-out;
}

@keyframes sing-bob {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(1.06) translateY(-4px); }
}

/* Floating Music Notes */
.floating-music-note {
    position: absolute;
    font-size: 1.5rem;
    pointer-events: none;
    animation: float-up-fade 2s forwards linear;
    z-index: 100;
    font-weight: bold;
}

@keyframes float-up-fade {
    0% {
        transform: translateY(0) scale(0.8) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: translateY(-25px) scale(1.2) rotate(15deg);
    }
    100% {
        transform: translateY(-60px) scale(0.9) rotate(-15deg);
        opacity: 0;
    }
}

/* ============================================================
   ROOFTOP OPEN-AIR CINEMA: RETRO ATMOSPHERE UPGRADES
   ============================================================ */

/* Glowing moon over the city */
.rooftop-moon {
    position: absolute;
    top: 28px;
    right: 60px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #fffdf2 0%, #fdf0c4 55%, #e8d49a 100%);
    box-shadow: 0 0 25px rgba(255, 245, 200, 0.5), 0 0 60px rgba(255, 240, 180, 0.25);
    z-index: 1;
}

.rooftop-moon::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(180, 160, 110, 0.4);
    box-shadow: -10px 12px 0 -3px rgba(180, 160, 110, 0.35), -4px 24px 0 -4px rgba(180, 160, 110, 0.3);
}

/* Drifting clouds */
.rooftop-cloud {
    position: absolute;
    height: 16px;
    background: rgba(180, 190, 230, 0.07);
    border-radius: 20px;
    filter: blur(2px);
    z-index: 1;
    pointer-events: none;
}

.rooftop-cloud::before,
.rooftop-cloud::after {
    content: '';
    position: absolute;
    bottom: 0;
    background: rgba(180, 190, 230, 0.07);
    border-radius: 50%;
}

.rooftop-cloud.cloud-1 {
    top: 40px;
    width: 120px;
    animation: cloud-drift 60s linear infinite;
}

.rooftop-cloud.cloud-1::before { width: 50px; height: 36px; left: 12px; }
.rooftop-cloud.cloud-1::after  { width: 70px; height: 46px; right: 16px; }

.rooftop-cloud.cloud-2 {
    top: 90px;
    width: 90px;
    opacity: 0.7;
    animation: cloud-drift 90s linear infinite;
    animation-delay: -30s;
}

.rooftop-cloud.cloud-2::before { width: 38px; height: 28px; left: 10px; }
.rooftop-cloud.cloud-2::after  { width: 50px; height: 34px; right: 12px; }

.rooftop-cloud.cloud-3 {
    top: 150px;
    width: 70px;
    opacity: 0.5;
    animation: cloud-drift 120s linear infinite;
    animation-delay: -70s;
}

.rooftop-cloud.cloud-3::before { width: 30px; height: 22px; left: 8px; }
.rooftop-cloud.cloud-3::after  { width: 40px; height: 28px; right: 10px; }

@keyframes cloud-drift {
    from { left: -160px; }
    to   { left: 1100px; }
}

/* Occasional shooting star */
.rooftop-shooting-star {
    position: absolute;
    top: 50px;
    left: 70%;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 100%);
    transform: rotate(20deg);
    opacity: 0;
    z-index: 1;
    animation: shooting-star 9s ease-in infinite;
}

.rooftop-shooting-star::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
}

@keyframes shooting-star {
    0%, 80% { opacity: 0; transform: translate(0, 0) rotate(20deg); }
    84%     { opacity: 1; }
    92%     { opacity: 1; transform: translate(-220px, 80px) rotate(20deg); }
    100%    { opacity: 0; transform: translate(-240px, 90px) rotate(20deg); }
}

/* Animated city skyline silhouette */
.rooftop-skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 2;
    pointer-events: none;
}

.sky-building {
    position: absolute;
    bottom: 0;
    background: linear-gradient(to bottom, #1a1830 0%, #0a0917 100%);
    border-top: 2px solid #26224a;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Lit pixel windows on buildings */
.sky-building::before {
    content: '';
    position: absolute;
    inset: 6px 5px 0 5px;
    background-image:
        radial-gradient(circle, rgba(255, 200, 90, 0.85) 1.4px, transparent 2px),
        radial-gradient(circle, rgba(0, 240, 255, 0.55) 1.4px, transparent 2px);
    background-size: 14px 18px, 14px 18px;
    background-position: 0 0, 7px 9px;
    opacity: 0.55;
    animation: city-windows 4s steps(2) infinite;
}

.sky-building.tall::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #2a2750;
}

@keyframes city-windows {
    0%   { opacity: 0.35; }
    50%  { opacity: 0.6; }
    100% { opacity: 0.45; }
}

/* Hanging festoon / bistro string lights */
.rooftop-string-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 14;
    pointer-events: none;
}

.festoon-bulbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.festoon-bulb {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: festoon-twinkle 2.2s infinite ease-in-out alternate;
}

@keyframes festoon-twinkle {
    0%   { filter: brightness(0.6); }
    100% { filter: brightness(1.3); }
}

/* Glowing OPEN-AIR KINO neon marquee */
.rooftop-marquee {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 18px;
    background: rgba(8, 6, 16, 0.6);
    border: 2px solid rgba(255, 0, 127, 0.4);
    border-radius: 6px;
    font-family: var(--font-pixel);
    box-shadow: 0 0 18px rgba(255, 0, 127, 0.25);
}

.rooftop-marquee-text {
    font-size: 2rem;
    color: #fff;
    letter-spacing: 4px;
    text-shadow:
        0 0 6px var(--neon-pink),
        0 0 14px var(--neon-pink-glow),
        0 0 26px var(--neon-pink-glow);
    animation: neon-flicker 4s infinite;
}

.rooftop-marquee-star {
    font-size: 1.4rem;
    color: var(--neon-orange);
    text-shadow: 0 0 8px var(--neon-orange-glow);
    animation: blink 1.3s infinite alternate;
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
    20%, 22% { opacity: 0.4; }
    81% { opacity: 0.7; }
}

/* Projector beam from the back to the screen */
.rooftop-projector-beam {
    position: absolute;
    top: 70px;
    left: 50%;
    width: 360px;
    height: 230px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(220, 240, 255, 0.10) 0%, rgba(180, 220, 255, 0.02) 70%, transparent 100%);
    clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
    z-index: 13;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    mix-blend-mode: screen;
}

.rooftop-projector-beam.beam-on {
    opacity: 1;
    animation: projector-flicker 0.25s steps(2) infinite;
}

@keyframes projector-flicker {
    0%   { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Now-showing strip on the screen bezel */
.rooftop-now-showing {
    position: absolute;
    top: -26px;
    left: -10px;
    right: -10px;
    height: 22px;
    background: linear-gradient(180deg, #2a1208 0%, #160803 100%);
    border: 2px solid var(--neon-orange);
    border-radius: 4px;
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--neon-orange);
    text-shadow: 0 0 6px var(--neon-orange-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 1px;
    box-shadow: 0 0 12px var(--neon-orange-glow);
    overflow: hidden;
    white-space: nowrap;
}

.rooftop-now-showing #rooftopNowShowingTitle {
    color: #fff;
}

/* Film grain + scanlines over the playing screen */
.rooftop-film-grain {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grain-shift 0.4s steps(3) infinite;
}

@keyframes grain-shift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-4px, 2px); }
    66%  { transform: translate(3px, -3px); }
    100% { transform: translate(0, 0); }
}

.rooftop-screen-scanlines {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px);
    opacity: 0.5;
}

/* Screen support legs */
.rooftop-screen-leg {
    position: absolute;
    bottom: -34px;
    width: 8px;
    height: 38px;
    background: linear-gradient(to right, #333 0%, #555 50%, #222 100%);
    z-index: -1;
}

.rooftop-screen-leg.leg-l { left: 60px; transform: skewX(12deg); }
.rooftop-screen-leg.leg-r { right: 60px; transform: skewX(-12deg); }

/* Retro Bar Counter with bottles and neon BAR sign */
.rooftop-bar-counter {
    position: absolute;
    bottom: 95px;
    right: 30px;
    width: 150px;
    height: 96px;
    z-index: 13;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.rooftop-bar-counter:hover {
    transform: translateY(-3px);
}

.rooftop-bar-neon {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: #fff;
    text-shadow:
        0 0 6px var(--neon-cyan),
        0 0 14px var(--neon-cyan-glow),
        0 0 24px var(--neon-cyan-glow);
    animation: neon-flicker 5s infinite;
}

.rooftop-bar-shelf {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    border-bottom: 3px solid #2a1b13;
}

.bar-bottle {
    display: inline-block;
    width: 8px;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.25);
}

.bar-bottle.b1 { height: 36px; background: linear-gradient(to bottom, #39ff14, #0a5a07); }
.bar-bottle.b2 { height: 30px; background: linear-gradient(to bottom, #ff007f, #6a0033); }
.bar-bottle.b3 { height: 40px; background: linear-gradient(to bottom, #ff6c00, #6a2c00); }
.bar-bottle.b4 { height: 26px; background: linear-gradient(to bottom, #00f0ff, #00566a); }

.bar-glass {
    display: inline-block;
    width: 10px;
    height: 14px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.1));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 3px 3px;
}

.rooftop-bar-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 2px, transparent 2px, transparent 16px),
        linear-gradient(to bottom, #6b4a32 0%, #3a2716 100%);
    border: 3px solid var(--wood-light);
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 2px 6px rgba(255, 255, 255, 0.08);
}

.rooftop-bar-counter .furniture-label {
    position: absolute;
    bottom: -18px;
    width: 100%;
}

/* Floating drink that pops up when ordering */
.rooftop-drink-pop {
    position: absolute;
    font-size: 1.6rem;
    z-index: 120;
    pointer-events: none;
    animation: drink-pop 1.6s ease-out forwards;
}

@keyframes drink-pop {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    25%  { transform: translateY(-14px) scale(1.1); opacity: 1; }
    80%  { transform: translateY(-30px) scale(1); opacity: 1; }
    100% { transform: translateY(-46px) scale(0.9); opacity: 0; }
}

/* ============================================================
   FLOOR 4: WIDE GLASS SLIDING DOOR (SCHIEBETÜR) TO ROOFTOP
   ============================================================ */
.rooftop-glass-door {
    position: relative;
    width: 280px;
    height: 128px;
    border: 4px solid var(--wood-light);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.7),
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(0, 240, 255, 0.12);
    transition: box-shadow 0.3s ease;
}

.rooftop-glass-door:hover {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.7),
        inset 0 0 20px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 240, 255, 0.3);
}

/* Night sky visible through the glass */
.glass-door-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #070512 0%, #0f0d28 40%, #1a1640 100%);
    z-index: 0;
}

/* Twinkling stars behind the glass */
.glass-door-sky::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle at 35% 8%, rgba(255,255,255,0.4) 1.2px, transparent 1.2px),
        radial-gradient(circle at 55% 28%, rgba(255,255,255,0.5) 1px, transparent 1px),
        radial-gradient(circle at 72% 12%, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at 88% 22%, rgba(255,255,255,0.35) 1.5px, transparent 1.5px),
        radial-gradient(circle at 22% 38%, rgba(255,255,255,0.4) 1px, transparent 1px),
        radial-gradient(circle at 62% 42%, rgba(255,255,255,0.3) 1px, transparent 1px),
        radial-gradient(circle at 42% 50%, rgba(255,255,255,0.5) 0.8px, transparent 0.8px),
        radial-gradient(circle at 80% 48%, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle at 8% 55%, rgba(255,255,255,0.3) 1.2px, transparent 1.2px);
    background-size: 280px 128px;
    animation: glass-stars-twinkle 3s ease-in-out infinite alternate;
}

/* Small moon visible through the glass */
.glass-door-sky::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 30px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffef0 0%, #f5e8b0 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 250, 210, 0.5), 0 0 20px rgba(255, 245, 180, 0.25);
    z-index: 1;
}

@keyframes glass-stars-twinkle {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Distant city skyline silhouette through the glass */
.glass-door-skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background: #0a0818;
    clip-path: polygon(
        0% 68%, 5% 52%, 10% 58%, 14% 28%, 18% 28%, 20% 50%,
        25% 42%, 30% 18%, 33% 18%, 36% 45%, 40% 55%, 44% 35%,
        48% 20%, 52% 20%, 55% 42%, 60% 55%, 65% 38%, 68% 12%,
        72% 12%, 75% 40%, 80% 52%, 85% 35%, 90% 48%, 95% 60%,
        100% 55%, 100% 100%, 0% 100%
    );
    z-index: 1;
}

/* Tiny lit windows on the skyline */
.glass-door-skyline::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,200,80,0.8) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,240,255,0.5) 1px, transparent 1px);
    background-size: 18px 14px, 18px 14px;
    background-position: 4px 2px, 12px 8px;
    opacity: 0.4;
    z-index: 2;
}

/* The two glass panes that slide open */
.glass-pane {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 3;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.glass-pane-left {
    left: 0;
    background: rgba(120, 160, 200, 0.08);
    border-right: 2px solid rgba(255, 255, 255, 0.12);
}

.glass-pane-right {
    right: 0;
    background: rgba(120, 160, 200, 0.08);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
}

/* Glass reflection shimmer */
.glass-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 80%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Glass frame divider bars */
.glass-pane::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(-50%);
}

/* Open state — panes slide apart */
.rooftop-glass-door.door-open .glass-pane-left {
    transform: translateX(-96%);
}

.rooftop-glass-door.door-open .glass-pane-right {
    transform: translateX(96%);
}

/* Horizontal crossbar on glass (like real Schiebetür) */
.glass-door-crossbar {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 4;
    pointer-events: none;
}

/* Metal handle strip */
.glass-door-handle {
    position: absolute;
    top: 40%;
    width: 10px;
    height: 22px;
    background: linear-gradient(to right, #888 0%, #ccc 50%, #888 100%);
    border-radius: 2px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.glass-door-handle.handle-l {
    right: calc(50% + 6px);
}

.glass-door-handle.handle-r {
    left: calc(50% + 6px);
}

/* Neon sign above the glass door */
.glass-door-sign {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(6, 4, 14, 0.7);
    border: 2px solid var(--neon-pink);
    border-radius: 5px;
    padding: 3px 18px;
    font-family: var(--font-pixel);
    font-size: 1.5rem;
    color: #fff;
    text-shadow:
        0 0 6px var(--neon-pink),
        0 0 14px var(--neon-pink-glow);
    letter-spacing: 3px;
    white-space: nowrap;
    box-shadow: 0 0 15px var(--neon-pink-glow);
    z-index: 6;
    animation: neon-flicker 5s infinite;
}

.glass-door-sign small {
    display: block;
    font-size: 0.8rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan-glow);
    letter-spacing: 2px;
    text-align: center;
    margin-top: -2px;
}

/* ============================================================
   VISUAL OVERHAULS & AMBIENT IMPROVEMENTS
   ============================================================ */

/* Festoon bulbs glowing colors & stagger */
.festoon-bulb {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: festoon-twinkle 2.2s infinite ease-in-out alternate;
}

@keyframes festoon-twinkle {
    0%   { filter: brightness(0.65) drop-shadow(0 0 1px currentColor); }
    100% { filter: brightness(1.4) drop-shadow(0 0 6px currentColor); }
}

/* Key Rack behind reception counter */
.key-rack-wrapper {
    position: absolute;
    top: -5px;
    left: 20px;
    z-index: 1;
    pointer-events: none;
}

/* Reception bell styles & animation */
.desk-bell {
    display: inline-block;
    cursor: pointer;
    margin-right: 8px;
    vertical-align: middle;
    transition: transform 0.1s ease;
}

.desk-bell:hover {
    transform: scale(1.08);
}

.desk-bell.ring-active {
    animation: bell-shake 0.35s ease-out;
}

.desk-bell.ring-active .bell-button {
    transform: translateY(2px);
}

@keyframes bell-shake {
    0% { transform: scale(1.08) rotate(0deg); }
    15% { transform: scale(1.08) rotate(-12deg); }
    30% { transform: scale(1.08) rotate(12deg); }
    45% { transform: scale(1.08) rotate(-8deg); }
    60% { transform: scale(1.08) rotate(8deg); }
    75% { transform: scale(1.08) rotate(-3deg); }
    100% { transform: scale(1.08) rotate(0deg); }
}

/* Jukebox Equalizer visualizer */
.lobby-player-equalizer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 16px;
    width: 60px;
    position: absolute;
    right: 12px;
    bottom: 8px;
    pointer-events: none;
}

.eq-bar {
    width: 5px;
    height: 2px;
    background-color: var(--neon-cyan);
    box-shadow: 0 0 4px var(--neon-cyan-glow);
    border-radius: 1px 1px 0 0;
    transition: height 0.1s ease;
}

.lobby-playlist-player.audio-playing .eq-bar:nth-child(1) { animation: eq-bounce-1 0.7s infinite alternate ease-in-out; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(2) { animation: eq-bounce-2 0.5s infinite alternate ease-in-out; animation-delay: 0.1s; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(3) { animation: eq-bounce-3 0.8s infinite alternate ease-in-out; animation-delay: 0.2s; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(4) { animation: eq-bounce-1 0.6s infinite alternate ease-in-out; animation-delay: 0.05s; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(5) { animation: eq-bounce-2 0.9s infinite alternate ease-in-out; animation-delay: 0.15s; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(6) { animation: eq-bounce-3 0.4s infinite alternate ease-in-out; animation-delay: 0.25s; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(7) { animation: eq-bounce-1 0.75s infinite alternate ease-in-out; }
.lobby-playlist-player.audio-playing .eq-bar:nth-child(8) { animation: eq-bounce-2 0.65s infinite alternate ease-in-out; animation-delay: 0.3s; }

@keyframes eq-bounce-1 {
    0% { height: 2px; }
    100% { height: 16px; }
}

@keyframes eq-bounce-2 {
    0% { height: 3px; }
    100% { height: 11px; }
}

@keyframes eq-bounce-3 {
    0% { height: 2px; }
    100% { height: 14px; }
}

/* Room Ceiling Lamp & warm glow */
.room-ceiling-lamp {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.room-lamp-glow {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 240px;
    background: linear-gradient(to bottom, rgba(255, 220, 130, 0.16) 0%, rgba(255, 220, 130, 0.02) 65%, transparent 100%);
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
    animation: room-lamp-flicker 5s infinite alternate ease-in-out;
}

@keyframes room-lamp-flicker {
    0%, 100% { opacity: 0.88; }
    48% { opacity: 0.98; }
    50% { opacity: 1.0; }
    52% { opacity: 0.94; }
    86% { opacity: 0.96; }
    88% { opacity: 0.55; }
    90% { opacity: 0.98; }
    92% { opacity: 0.85; }
    94% { opacity: 0.40; }
    96% { opacity: 0.95; }
}

/* Elevator Floor Dial Header */
.elevator-dial-container {
    margin: 5px auto 10px auto;
    text-align: center;
    background: #111;
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    width: 104px;
    height: 59px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
}

.elevator-dial-svg text {
    font-weight: bold;
    user-select: none;
}