/* 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%);
    /* Cabinet bezel */
    border: 16px solid #1a1a1f;
    outline: 4px solid #2d2d35;
    border-radius: 8px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95),
        inset 0 0 45px rgba(0, 0, 0, 0.85);
    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);
}

.audio-unmute-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.audio-unmute-btn:disabled:hover {
    background-color: var(--wood-medium);
    color: var(--neon-cyan);
}

.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 480px;
    margin-bottom: 25px;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.9rem;
    line-height: 1.4;
    color: #cfd8d2;
    text-align: left;
    cursor: pointer;
}

.consent-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--neon-cyan);
    cursor: pointer;
}

.consent-checkbox-label a {
    color: var(--neon-cyan);
}

/* 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;
    bottom: 0;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Isometric structures built with CSS grids/shadows */
/* Marble tile floor */
.lobby-floor-grid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    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%);
    border-top: 6px solid #4e3629;
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* 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;
    /* Rich night-sky gradient */
    background: linear-gradient(to bottom,
            #0b0d1a 0%,
            #12152e 20%,
            #1a1028 40%,
            #2c1b18 65%,
            #150a09 100%);
    border-top: 10px solid #cf2e2e;
    overflow: hidden;
}

.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: 6px solid var(--wood-dark);
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: visible;
}

/* 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);
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Plattenspieler (left) + Plattenschrank (right), side by side */
.hifi-console-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}

.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: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 460px;
    flex-shrink: 0;
    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;
    align-self: stretch;
}

.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: 270px;
    border: 3px solid #111;
    background: radial-gradient(circle at 42% 46%, #181818 0%, #0f0f0f 60%, #050505 100%);
    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);
    align-self: stretch;
}

/* Fixed-size stage holding the vinyl + tonearm as one rigid unit, centered
   inside the (now wider) deck bay so the tonearm always anchors correctly
   next to the record regardless of the panel's overall width. */
.turntable-stage {
    position: relative;
    width: 300px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Cueing lever — lift it to pause and free the tonearm for dragging, lower
   it to resume playback from wherever the tonearm was dragged to. */
.cue-lever-container {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 25;
}

.cue-label {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-transform: uppercase;
    user-select: none;
}

.cue-slot {
    position: relative;
    width: 16px;
    height: 54px;
    background: #121212;
    border-radius: 8px;
    border: 2px solid #333;
    box-shadow: inset 0 2px 6px #000;
    cursor: pointer;
}

.cue-handle {
    position: absolute;
    left: 1px;
    width: 10px;
    height: 26px;
    background: linear-gradient(to bottom, #999 0%, #bbb 30%, #777 70%, #444 100%);
    border: 1px solid #555;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
    transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cue-slot.lifted .cue-handle {
    top: 2px;
}

.cue-slot.lowered .cue-handle {
    top: 20px;
}

/* Vinyl Player — the room stereo's visual, the same for every room theme */
.vinyl-record {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, #1e1e1e 0%, #131313 55%, #060606 90%, #020202 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65), inset 0 0 12px rgba(0, 0, 0, 0.7);
    position: relative;
    display: block;
}

/* Concentric groove rings, masked to leave a ring for the label */
.vinyl-record::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-radial-gradient(circle at center,
        rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px,
        transparent 1px, transparent 3px);
    -webkit-mask: radial-gradient(circle at center, transparent 34px, #000 37px);
    mask: radial-gradient(circle at center, transparent 34px, #000 37px);
}

/* Glassy diagonal sheen sitting on top of everything, like light on vinyl */
.vinyl-record::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%);
    z-index: 4;
    pointer-events: none;
}

.vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--neon-cyan) 0%, #0a6e78 70%, #033136 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid #060606;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.65);
    z-index: 2;
}

.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #eee 20%, #999 55%, #222 100%);
    border: 1px solid #555;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 3;
}

/* Tonearm: the element itself is the arm shaft; the pivot base and
   headshell/cartridge are drawn as pseudo-elements so they rotate together
   as one rigid piece with no extra markup needed. Positioned relative to
   .turntable-stage (not the wider deck bay), so it always stays anchored
   right next to the record. Its rotation is driven live from JS
   (updateTonearmAngle) once a track is loaded, both to track playback
   progress and to support lift-and-drag seeking. */
.vinyl-needle {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 8px;
    height: 130px;
    background: linear-gradient(to right, #7c7c7c, #e8e8e8 45%, #5a5a5a);
    border-radius: 3px;
    transform-origin: top center;
    transform: rotate(8deg);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 6;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.vinyl-needle.draggable {
    cursor: grab;
}

.vinyl-needle.dragging {
    cursor: grabbing;
    transition: none;
}

.vinyl-needle.lifted {
    filter: drop-shadow(6px 10px 10px rgba(0, 0, 0, 0.45));
}

.vinyl-needle::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #999 20%, #444 65%, #161616 100%);
    border: 1px solid #444;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

.vinyl-needle::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -7px;
    width: 20px;
    height: 26px;
    background: #161616;
    border-top: 5px solid var(--neon-cyan);
    border-radius: 2px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6);
}

.room-chiptune .vinyl-needle::after { border-top-color: var(--neon-green); }
.room-synthwave .vinyl-needle::after { border-top-color: var(--neon-pink); }
.room-grunge .vinyl-needle::after { border-top-color: var(--neon-orange); }

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

/* 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;
    align-self: stretch;
}

.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 Controls: round tactile Start/Stop buttons with LED indicators,
   modeled directly on the standalone Plattenspieler turntable page. */
.hifi-controls {
    display: flex;
    justify-content: center;
    gap: 48px;
    align-self: stretch;
    padding-top: 4px;
}

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

.led-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0f0f0f;
    border: 1px solid #333;
    box-shadow: inset 0 1px 2px #000;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Green LED lights up while playing; red LED lights up otherwise — driven
   purely by the #hifiPanel.audio-playing class already toggled in JS. */
#hifiPanel.audio-playing .led-green {
    background-color: #39ff14;
    box-shadow: 0 0 6px #39ff14, 0 0 12px #39ff14;
    border-color: #a4ffa4;
}

#hifiPanel:not(.audio-playing) .led-red {
    background-color: #ff073a;
    box-shadow: 0 0 6px #ff073a, 0 0 12px #ff073a;
    border-color: #ffa4b2;
}

.btn-analog {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d5d5d5 25%, #9e9e9e 65%, #555555 100%);
    border: 3px solid #333;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.65),
                inset 0 1px 2px rgba(255, 255, 255, 0.8),
                inset 0 -2px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-analog:active {
    transform: translateY(3px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
                inset 0 4px 6px rgba(0, 0, 0, 0.6);
}

#hifiPanel.audio-playing #btnPlay {
    box-shadow: 0 0 14px var(--neon-cyan-glow),
                0 6px 8px rgba(0, 0, 0, 0.65),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.control-label {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Plattenschrank (Record Cabinet) — a second, wood-grained console next to
   the turntable, holding the room's tracks as a crate of record sleeves. */
.record-cabinet-panel {
    width: 380px;
    background: linear-gradient(180deg, #2b2018 0%, #1a130d 100%);
    border: 6px solid var(--wood-dark);
    border-radius: 6px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Subtle wood-grain texture overlay */
.record-cabinet-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 10px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 4px);
    pointer-events: none;
    border-radius: inherit;
}

.cabinet-header {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    color: var(--wood-light);
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    border-bottom: 2px solid var(--wood-dark);
    padding-bottom: 10px;
}

.cabinet-info-panel {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--wood-dark);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.info-label {
    font-size: 0.7rem;
    color: var(--wood-warm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.info-title {
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
    text-shadow: 0 0 6px var(--neon-cyan-glow);
}

.info-artist {
    font-size: 0.85rem;
    color: #bbb;
    letter-spacing: 0.5px;
}

/* The crate itself: one sleeve per track — hover/click a sleeve to play it. */
.hifi-track-display {
    background: linear-gradient(180deg, #1c120c 0%, #120b07 100%);
    border: 2px solid #221007;
    border-radius: 4px;
    height: 156px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 22px 14px 14px;
    box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.7);
}

.hifi-track-display::-webkit-scrollbar {
    height: 6px;
}

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

.track-item {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background: linear-gradient(135deg, #3d3d3d, #1a1a1a);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 5px solid #555;
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease, border-left-color 0.25s ease;
}

.track-item::after {
    content: attr(data-index);
    position: absolute;
    bottom: 3px;
    left: 6px;
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    line-height: 1;
    color: #ccc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.track-item:hover {
    transform: translateY(-14px) scale(1.03);
    box-shadow: -4px 10px 18px rgba(0, 0, 0, 0.7);
    border-left-color: #999;
}

.track-item.track-active {
    transform: translateY(-14px) scale(1.03);
    border-left-color: var(--neon-cyan);
    box-shadow: 0 0 14px var(--neon-cyan-glow), -4px 10px 18px rgba(0, 0, 0, 0.7);
}

.room-chiptune .track-item.track-active {
    border-left-color: var(--neon-green);
    box-shadow: 0 0 14px var(--neon-green-glow), -4px 10px 18px rgba(0, 0, 0, 0.7);
}

.room-synthwave .track-item.track-active {
    border-left-color: var(--neon-pink);
    box-shadow: 0 0 14px var(--neon-pink-glow), -4px 10px 18px rgba(0, 0, 0, 0.7);
}

.room-grunge .track-item.track-active {
    border-left-color: var(--neon-orange);
    box-shadow: 0 0 14px var(--neon-orange-glow), -4px 10px 18px rgba(0, 0, 0, 0.7);
}

/* 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;
}

/* Room TV — the video modal is shaped and dressed to look like an actual
   retro TV set, not a plain web player in a box. */
.tv-modal-content {
    width: 640px;
    background: linear-gradient(160deg, #4a3120 0%, #24160c 100%);
    border: 6px solid var(--wood-light);
    border-radius: 16px;
    padding: 40px 30px 24px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.tv-close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.4rem;
    z-index: 3;
}

.tv-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Antenna sitting on top of the TV shell */
.tv-antenna {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    pointer-events: none;
}

.tv-antenna-arm {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 42px;
    background: linear-gradient(to top, #999, #ddd);
    border-radius: 2px;
    transform-origin: bottom center;
}

.tv-antenna-left { transform: translateX(-50%) rotate(-28deg); }
.tv-antenna-right { transform: translateX(-50%) rotate(28deg); }

.tv-antenna-base {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 8px;
    border-radius: 3px;
    background: #555;
}

.tv-brand {
    font-family: var(--font-pixel);
    font-size: 1rem;
    letter-spacing: 3px;
    color: var(--wood-warm);
    text-transform: uppercase;
    opacity: 0.85;
}

.tv-brand span {
    color: var(--neon-orange);
}

.tv-screen-bezel {
    width: 100%;
    height: 340px;
    background: linear-gradient(160deg, #2a2a2a 0%, #0c0c0c 100%);
    border: 3px solid #050505;
    border-radius: 26px;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 8px 18px rgba(0, 0, 0, 0.5);
    position: relative;
}

.tv-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

.tv-screen iframe,
.tv-screen video {
    display: block;
}

/* Glass reflection + faint scanlines sitting on top of the video, purely
   decorative so clicks/controls underneath still work. */
.tv-screen-glass {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 14px;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 3px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.04) 100%);
}

.tv-control-panel {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: linear-gradient(180deg, #3a2818 0%, #241609 100%);
    border: 2px solid #1a0f06;
    border-radius: 8px;
    padding: 10px 16px;
    box-sizing: border-box;
}

.tv-channel-display {
    background: #050505;
    border: 2px solid #222;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: var(--font-pixel);
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green-glow);
    font-size: 1.1rem;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tv-channel-tag {
    color: #888;
    font-size: 0.75rem;
    margin-right: 2px;
}

.tv-channel-sep {
    color: #666;
}

.tv-channel-title {
    margin-left: 10px;
    color: #eee;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tv-chan-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d5d5d5 25%, #9e9e9e 65%, #555555 100%);
    border: 3px solid #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.tv-chan-btn:active {
    transform: translateY(2px);
}

.tv-power-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
}

.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
   ============================================================ */

/* --- 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);
}

/* --- CORRIDOR WALLPAPER UPGRADE --- */
/* --- 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);
}

/* --- 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 --- */
/* Jukebox hotspot — a compact retro cabinet prop in the lobby that opens
   the full player in #jukeboxModal (see .jukebox-modal-content below). */
.hotspot-jukebox {
    position: absolute;
    bottom: 40px;
    left: 610px;
    width: 170px;
    height: 100px;
    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;
    z-index: 10;
}

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

.hotspot-jukebox i {
    font-size: 1.8rem;
    margin-bottom: 4px;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
    animation: spin 5s linear infinite;
}

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

.hotspot-jukebox small {
    font-size: 0.7rem;
    color: var(--wood-warm);
}

.jukebox-hotspot-lights {
    position: absolute;
    top: 6px;
    display: flex;
    gap: 6px;
}

.jukebox-hotspot-lights span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--neon-pink);
    box-shadow: 0 0 4px var(--neon-pink);
    animation: jukebox-twinkle 1.4s infinite ease-in-out;
}

.jukebox-hotspot-lights span:nth-child(2) { background: var(--neon-cyan); box-shadow: 0 0 4px var(--neon-cyan); animation-delay: 0.3s; }
.jukebox-hotspot-lights span:nth-child(3) { background: var(--neon-yellow); box-shadow: 0 0 4px var(--neon-yellow); animation-delay: 0.6s; }

@keyframes jukebox-twinkle {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Jukebox Modal — the actual player, given room to breathe instead of being
   squeezed into lobby furniture. */
.jukebox-modal-content {
    width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(160deg, #3a2a1a 0%, #1c130b 100%);
    border: 6px solid var(--wood-light);
    border-radius: 22px 22px 10px 10px;
    padding: 26px 24px 24px;
    position: relative;
    box-sizing: border-box;
}

.jukebox-cabinet-lights {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.jukebox-cabinet-lights span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--neon-pink);
    box-shadow: 0 0 6px var(--neon-pink);
    animation: jukebox-twinkle 1.6s infinite ease-in-out;
}

.jukebox-cabinet-lights span:nth-child(2) { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation-delay: 0.2s; }
.jukebox-cabinet-lights span:nth-child(3) { background: var(--neon-yellow); box-shadow: 0 0 6px var(--neon-yellow); animation-delay: 0.4s; }
.jukebox-cabinet-lights span:nth-child(4) { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); animation-delay: 0.6s; }
.jukebox-cabinet-lights span:nth-child(5) { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation-delay: 0.8s; }
.jukebox-cabinet-lights span:nth-child(6) { background: var(--neon-pink); box-shadow: 0 0 6px var(--neon-pink); animation-delay: 1s; }

.jukebox-modal-title {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.jukebox-close-btn {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 1.4rem;
    z-index: 2;
}

.lobby-playlist-player {
    background: linear-gradient(135deg, #262626 0%, #141414 100%);
    border: 4px solid #3a3a3a;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

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

.lobby-player-title {
    font-size: 1.3rem;
    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.95rem;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.lobby-player-progress-container {
    background: #000;
    height: 10px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

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

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

.lobby-player-btn {
    background: #111;
    border: 2px solid var(--wood-light);
    color: var(--wood-warm);
    border-radius: 6px;
    width: 44px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

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

.lobby-player-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wood-warm);
    font-size: 1.1rem;
    margin-left: auto;
}

.lobby-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 5px;
    background: #000;
    border-radius: 2.5px;
    outline: none;
}

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

/* Jukebox playlist — a little record crate of clickable sleeves (cover art
   + song/band caption), same visual language as the room stereo's crate. */
.lobby-player-playlist-container {
    position: relative;
    width: 100%;
    background-color: #0b0705;
    border: 2px solid var(--wood-light);
    border-radius: 6px;
    height: 220px;
    overflow-y: auto;
    color: var(--wood-warm);
    box-sizing: border-box;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
}

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

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

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

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

.lobby-track-item {
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.lobby-track-cover {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    background: linear-gradient(135deg, #3d3d3d, #1a1a1a);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #555;
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.6);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.lobby-track-index {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: #ddd;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.lobby-track-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    line-height: 1.25;
}

.lobby-track-song {
    font-size: 0.72rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lobby-track-band {
    font-size: 0.62rem;
    color: var(--wood-warm);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lobby-track-item:hover .lobby-track-cover {
    transform: translateY(-4px);
    box-shadow: -3px 6px 14px rgba(0, 0, 0, 0.7);
    border-left-color: #999;
}

.lobby-track-item.active .lobby-track-cover {
    transform: translateY(-4px);
    border-left-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow), -3px 6px 14px rgba(0, 0, 0, 0.7);
}

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

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

/* Residents Directory Modal Styles */
.residents-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px;
}

.floorplan-floor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px 18px;
}

.floorplan-floor-header {
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    color: var(--neon-pink);
    text-shadow: 0 0 6px var(--neon-pink-glow);
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.floorplan-floor-header::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

/* A different accent color per floor for quick visual orientation
   (floors render Rooftop, 3, 2, 1 in that DOM order) */
.floorplan-floor:nth-child(1) .floorplan-floor-header { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan-glow); }
.floorplan-floor:nth-child(2) .floorplan-floor-header { color: var(--neon-pink); text-shadow: 0 0 6px var(--neon-pink-glow); }
.floorplan-floor:nth-child(3) .floorplan-floor-header { color: var(--neon-orange); text-shadow: 0 0 6px var(--neon-orange-glow); }
.floorplan-floor:nth-child(4) .floorplan-floor-header { color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green-glow); }

.floorplan-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.floorplan-room-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35));
    border: 2px solid var(--wood-medium);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.floorplan-room-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-cyan);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 14px var(--neon-cyan-glow);
}

.floorplan-img-wrapper {
    width: 100%;
    height: 90px;
    border-bottom: 2px solid var(--wood-medium);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.floorplan-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.floorplan-room-card:hover .floorplan-img-wrapper img {
    transform: scale(1.08);
}

.floorplan-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
}

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

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

.floorplan-genre {
    font-size: 0.72rem;
    color: #aaa;
    letter-spacing: 0.3px;
}

/* ============================================================
   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;
    justify-content: space-between;
    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.65) drop-shadow(0 0 1px currentColor); }
    100% { filter: brightness(1.4) drop-shadow(0 0 6px currentColor); }
}

/* 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
   ============================================================ */

/* 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;
}

/* === DAY/NIGHT CYCLE === */
.daynight-led-display {
    position: absolute;
    top: 6px;
    right: 120px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--font-pixel);
    font-size: 0.95rem;
    color: var(--wood-warm);
    z-index: 85;
}
.daynight-led-display i { font-size: 0.85rem; }

/* Day/Night viewport class overrides */
.hotel-viewport.time-dawn .outdoor-moon { opacity: 0.2; filter: brightness(0.3); }
.hotel-viewport.time-dawn .lobby-stars { opacity: 0.1; }
.hotel-viewport.time-morning .outdoor-moon { display: none; }
.hotel-viewport.time-morning .lobby-stars { display: none; }
.hotel-viewport.time-midday .outdoor-moon { display: none; }
.hotel-viewport.time-midday .lobby-stars { display: none; }
.hotel-viewport.time-afternoon .outdoor-moon { display: none; }
.hotel-viewport.time-afternoon .lobby-stars { display: none; }
.hotel-viewport.time-evening .outdoor-moon { opacity: 0.5; }
.hotel-viewport.time-evening .lobby-stars { opacity: 0.3; }
.hotel-viewport.time-night .outdoor-moon { opacity: 0.9; filter: brightness(1.2); }
.hotel-viewport.time-night .lobby-stars { opacity: 1; }
.hotel-viewport.time-late-night .outdoor-moon { opacity: 1; filter: brightness(1.3); }
.hotel-viewport.time-late-night .lobby-stars { opacity: 1; }
.hotel-viewport.time-late-night .lobby-light-beams { opacity: 0.3; }

/* Rooftop sky day/night */
.hotel-viewport.time-dawn .rooftop-sky { background: linear-gradient(180deg, #2a1f3d 0%, #5c3d6e 30%, #d4845a 70%, #f5a962 100%); }
.hotel-viewport.time-morning .rooftop-sky { background: linear-gradient(180deg, #4a90d9 0%, #87ceeb 60%, #c9e8ff 100%); }
.hotel-viewport.time-midday .rooftop-sky { background: linear-gradient(180deg, #2871b8 0%, #5ca0e0 50%, #87ceeb 100%); }
.hotel-viewport.time-afternoon .rooftop-sky { background: linear-gradient(180deg, #4a80c0 0%, #d4845a 60%, #f5c97a 100%); }
.hotel-viewport.time-evening .rooftop-sky { background: linear-gradient(180deg, #1a1040 0%, #5c2d6e 30%, #d45a5a 70%, #f58a42 100%); }
.hotel-viewport.time-night .rooftop-sky { background: linear-gradient(180deg, #0a0a1a 0%, #0f1525 40%, #1a2040 100%); }
.hotel-viewport.time-late-night .rooftop-sky { background: linear-gradient(180deg, #050510 0%, #0a0a18 50%, #0f1020 100%); }

/* Day/Night icon color */
.hotel-viewport.time-dawn .daynight-led-display i { color: #ffa500; }
.hotel-viewport.time-morning .daynight-led-display i { color: #ffd700; }
.hotel-viewport.time-midday .daynight-led-display i { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.5); }
.hotel-viewport.time-afternoon .daynight-led-display i { color: #ffa500; }
.hotel-viewport.time-evening .daynight-led-display i { color: #d45a5a; }
.hotel-viewport.time-night .daynight-led-display i { color: #b8c4ff; }
.hotel-viewport.time-late-night .daynight-led-display i { color: #8888ff; }

/* === CHAT PROFILE BUTTON === */
.chat-profile-btn {
    background: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 0 5px var(--neon-cyan-glow);
}
.chat-profile-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    box-shadow: 0 0 8px var(--neon-cyan-glow);
}

/* NPC Receptionist Styling */
.receptionist-npc {
    position: absolute;
    top: -42px;
    left: 70px;
    z-index: 9;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
}

.receptionist-npc:hover {
    transform: scale(1.05);
}

.npc-nametag {
    background: rgba(0, 0, 0, 0.85);
    color: var(--neon-cyan);
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--neon-cyan);
    margin-top: 4px;
    white-space: nowrap;
    box-shadow: 0 0 5px var(--neon-cyan-glow);
}

/* Audio-Reactive Lighting Overrides */
.room-lamp-glow {
    animation: none !important;
    opacity: calc(0.25 + var(--beat-glow, 0) * 0.75) !important;
    transition: opacity 0.05s ease-out;
}

.lobby-chandelier circle[fill*="rgba(255,215,0"] {
    opacity: calc(0.15 + var(--beat-glow, 0) * 0.85) !important;
    transition: opacity 0.05s ease-out;
}

.festoon-bulb {
    animation: none !important;
    filter: brightness(calc(0.5 + var(--beat-glow, 0) * 1.1)) !important;
    transition: filter 0.05s ease-out;
}

.marquee-text {
    text-shadow: 0 0 calc(4px + var(--beat-glow, 0) * 14px) var(--neon-cyan), 0 0 calc(10px + var(--beat-glow, 0) * 20px) var(--neon-cyan-glow) !important;
}

.rooftop-marquee-text {
    animation: none !important;
    text-shadow:
        0 0 calc(2px + var(--beat-glow, 0) * 8px) var(--neon-pink),
        0 0 calc(6px + var(--beat-glow, 0) * 16px) var(--neon-pink-glow),
        0 0 calc(12px + var(--beat-glow, 0) * 28px) var(--neon-pink-glow) !important;
}

/* ============================================================
   UI/UX IMPROVEMENTS & MOVEMENT REFINE STYLES
   ============================================================ */

/* Squashed ellipse click indicator for isometric perspective */
.click-indicator {
    position: absolute;
    width: 24px;
    height: 12px;
    background: transparent;
    border: 2px solid var(--neon-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    pointer-events: none;
    z-index: 100;
    opacity: 1;
    animation: click-ripple 0.5s ease-out forwards;
    box-shadow: 0 0 8px var(--neon-cyan-glow);
}

@keyframes click-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* Speech-bubble styled typing indicator with pulsing dots */
.avatar-typing-indicator {
    position: absolute;
    bottom: 54px; /* Positioned above name tags */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    border: 1.5px solid var(--neon-cyan);
    border-radius: 6px;
    padding: 1px 6px 3px 6px;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    z-index: 99;
    box-shadow: 0 0 6px var(--neon-cyan-glow);
}

.avatar-typing-indicator .dot {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 0.2;
    animation: typing-bounce 1.4s infinite both;
}

.avatar-typing-indicator .dot:nth-child(2) {
    animation-delay: .2s;
}

.avatar-typing-indicator .dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
}

/* ============================================================
   RETRO ARCADE CABINET & BEZEL CUSTOM SYSTEM (Improvement 8)
   ============================================================ */

/* Outer Cabinet Wrapper side panels */
.cabinet-side {
    position: absolute;
    top: 0;
    width: calc((100vw - 1024px * var(--scale-factor)) / 2);
    height: 100vh;
    z-index: 1000; /* overlay above everything except modal dropdowns if needed */
    pointer-events: none; /* allow interactions behind them if overlapping */
    display: block;
}

.cabinet-side-left {
    left: 0;
    border-right: 6px solid var(--neon-pink);
    box-shadow: inset -15px 0 25px rgba(0, 0, 0, 0.95), 0 0 15px var(--neon-pink-glow);
    background: 
        linear-gradient(90deg, transparent 90%, rgba(0,240,255,0.05) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 100%),
        repeating-linear-gradient(45deg, #271404 0px, #271404 4px, #1e0e02 4px, #1e0e02 8px);
}

.cabinet-side-right {
    right: 0;
    border-left: 6px solid var(--neon-pink);
    box-shadow: inset 15px 0 25px rgba(0, 0, 0, 0.95), 0 0 15px var(--neon-pink-glow);
    background: 
        linear-gradient(-90deg, transparent 90%, rgba(0,240,255,0.05) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 100%),
        repeating-linear-gradient(-45deg, #271404 0px, #271404 4px, #1e0e02 4px, #1e0e02 8px);
}

@media (max-width: 1024px) {
    .cabinet-side {
        display: none;
    }
}

/* ============================================================
   LOBBY & CORRIDOR SEATING (Improvement 6)
   ============================================================ */

.lobby-seat, .corridor-seat {
    position: absolute;
    bottom: 25px; /* aligns precisely with player y level */
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.lobby-seat:hover, .corridor-seat:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.lobby-seat .seat-sprite, .corridor-seat .seat-sprite {
    display: block;
}

.lobby-seat .furniture-label, .corridor-seat .furniture-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--wood-light);
    color: #fff;
    font-family: monospace;
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.lobby-seat:hover .furniture-label, .corridor-seat:hover .furniture-label {
    opacity: 1;
}

/* ============================================================
   INTERACTIVE LIGHTS & DYNAMIC FLICKERS (Improvement 4)
   ============================================================ */

/* Make light fixtures clickable */
.lobby-chandelier, .outdoor-street-lamp, .ceiling-lamp, .room-ceiling-lamp {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Toggled OFF state styling */
.lobby-chandelier.lamp-off ellipse {
    fill: #444 !important;
    opacity: 0.2 !important;
}
.lobby-chandelier.lamp-off circle {
    opacity: 0 !important;
    display: none !important;
}
.lobby-floor:has(.lobby-chandelier.lamp-off) .lobby-light-beams {
    opacity: 0.05 !important;
    transition: opacity 0.3s ease;
}

.outdoor-street-lamp.lamp-off .lamp-head {
    animation: none !important;
    background: #444 !important;
    box-shadow: none !important;
    opacity: 0.3 !important;
}
.outdoor-street-lamp.lamp-off .lamp-light-cone {
    display: none !important;
}

.ceiling-lamp.lamp-off::after {
    display: none !important;
}

.room-ceiling-lamp.lamp-off .room-lamp-glow {
    display: none !important;
    opacity: 0 !important;
}

/* Rapid Flicker Keyframe for mechanical toggling spark */
.lamp-toggling {
    animation: lamp-rapid-flicker 0.35s ease-out forwards !important;
}

@keyframes lamp-rapid-flicker {
    0%, 100% { opacity: 0; filter: brightness(0.2); }
    15%, 55%, 85% { opacity: 1; filter: brightness(1.3); }
    30%, 70% { opacity: 0.1; filter: brightness(0.3); }
}

/* Ambient organic flicker on corridor ceiling lamps */
.ceiling-lamp::after {
    animation: ceiling-lamp-flicker 7s infinite alternate ease-in-out;
}

@keyframes ceiling-lamp-flicker {
    0%, 100% { opacity: 0.85; }
    45% { opacity: 0.95; }
    48% { opacity: 0.3; }
    50% { opacity: 0.9; }
    80% { opacity: 0.8; }
    82% { opacity: 0.15; }
    85% { opacity: 0.9; }
}

/* ============================================================
   SOUNDCLOUD LOADING/BUFFER JITTER ANIMATIONS (Improvement 7)
   ============================================================ */

/* Wobble / Jitter effect while buffering */
@keyframes jitter {
    0% { transform: rotate(0deg) translate(0, 0); }
    20% { transform: rotate(3deg) translate(-0.5px, 0.5px); }
    40% { transform: rotate(-3deg) translate(0.5px, -0.5px); }
    60% { transform: rotate(2.5deg) translate(-0.5px, -0.5px); }
    80% { transform: rotate(-2.5deg) translate(0.5px, 0.5px); }
    100% { transform: rotate(0deg) translate(0, 0); }
}

.audio-loading .vinyl-record {
    animation: jitter 0.15s infinite !important;
}

.audio-loading .vinyl-needle {
    transform: rotate(20deg) !important;
    animation: jitter 0.15s infinite !important;
}

/* ============================================================
   ELEVATOR ARRIVAL SHAKE ANIMATIONS (Improvement 10)
   ============================================================ */

/* Cabin vibration */
@keyframes cabin-vibration {
    0% { transform: translateX(-50%) translateY(0); }
    15% { transform: translateX(-50%) translateY(-5px); }
    30% { transform: translateX(-50%) translateY(4px); }
    45% { transform: translateX(-50%) translateY(-2.5px); }
    60% { transform: translateX(-50%) translateY(1.5px); }
    75% { transform: translateX(-50%) translateY(-0.8px); }
    90% { transform: translateX(-50%) translateY(0.3px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* Avatar vibration */
@keyframes avatar-vibration {
    0% { transform: translateY(0); }
    15% { transform: translateY(-5px); }
    30% { transform: translateY(4px); }
    45% { transform: translateY(-2.5px); }
    60% { transform: translateY(1.5px); }
    75% { transform: translateY(-0.8px); }
    90% { transform: translateY(0.3px); }
    100% { transform: translateY(0); }
}

.elevator-cabin.cabin-shake {
    animation: cabin-vibration 0.5s ease-out !important;
}

.player-avatar.cabin-shake {
    animation: avatar-vibration 0.5s ease-out !important;
}

/* ============================================================
   AMBIENT TIME-OF-DAY OVERLAYS & PIERCING LIGHTS (Improvement 1)
   ============================================================ */

.ambient-lighting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    pointer-events: none;
    mix-blend-mode: multiply;
    transition: background-color 2.5s ease;
}

/* Ambient Colors per Time Phase */
.hotel-viewport.time-dawn .ambient-lighting-overlay {
    background-color: rgba(253, 186, 116, 0.22);
}
.hotel-viewport.time-morning .ambient-lighting-overlay {
    background-color: rgba(254, 240, 138, 0.05);
}
.hotel-viewport.time-midday .ambient-lighting-overlay {
    background-color: transparent;
}
.hotel-viewport.time-afternoon .ambient-lighting-overlay {
    background-color: rgba(251, 146, 60, 0.08);
}
.hotel-viewport.time-evening .ambient-lighting-overlay {
    background-color: rgba(162, 28, 175, 0.18);
}
.hotel-viewport.time-night .ambient-lighting-overlay {
    background-color: rgba(15, 23, 42, 0.2);
}
.hotel-viewport.time-late-night .ambient-lighting-overlay {
    background-color: rgba(8, 8, 24, 0.3);
}

/* Pierce Light Sources above the Overlay */
.outdoor-moon,
.lobby-stars,
.lobby-marquee,
.outdoor-street-lamp .lamp-light-cone,
.outdoor-street-lamp .lamp-head,
.lobby-light-beams,
.lobby-chandelier,
.ceiling-lamp::after,
.room-ceiling-lamp,
.room-lamp-glow,
/* ============================================================
   INTERACTIVE WALL CHALKBOARD SYSTEM (Improvement 7)
   ============================================================ */

.corridor-blackboard {
    position: absolute;
    bottom: 95px;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.corridor-blackboard:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.corridor-blackboard .blackboard-frame {
    width: 60px;
    height: 40px;
    background: #1e352f;
    border: 3.5px solid #5c3a21;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blackboard-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.corridor-blackboard .furniture-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--wood-light);
    color: #fff;
    font-family: monospace;
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.corridor-blackboard:hover .furniture-label {
    opacity: 1;
}

/* Blackboard Canvas Modal Custom Details */
.blackboard-modal-content .chalk-btn {
    transition: border-color 0.2s ease, transform 0.1s ease;
}
.blackboard-modal-content .chalk-btn:hover {
    transform: scale(1.1);
}
.blackboard-modal-content .chalk-btn.active {
    transform: scale(1.15);
}
.blackboard-modal-content .sticker-btn {
    transition: transform 0.15s ease;
}
.blackboard-modal-content .sticker-btn:hover {
    transform: scale(1.25);
}
.blackboard-modal-content .sticker-btn.active {
    transform: scale(1.35);
}

/* --- LOBBY LIVE SYNC BUTTON STYLES --- */
#btnLobbySync {
    position: relative;
    transition: all 0.3s ease;
}

#btnLobbySync.active-controller {
    color: #39ff14 !important; /* Neon green */
    border-color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
    animation: pulse-broadcast 1.5s infinite;
}

#btnLobbySync.controlled-by-other {
    color: var(--neon-orange) !important;
    border-color: var(--neon-orange) !important;
    box-shadow: 0 0 8px rgba(255, 108, 0, 0.4);
}

@keyframes pulse-broadcast {
    0% {
        box-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
    }
    50% {
        box-shadow: 0 0 12px rgba(57, 255, 20, 0.8);
    }
    100% {
        box-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
    }
}

/* --- ROOFTOP CINEMA SYNC BUTTON STYLES --- */
.rooftop-sync-btn {
    background: #111;
    border: 1.5px solid var(--wood-light);
    color: var(--wood-warm);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    outline: none;
}

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

.rooftop-sync-btn:active {
    transform: scale(0.95);
}

.rooftop-sync-btn.active-controller {
    color: #39ff14 !important; /* Neon green */
    border-color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
    animation: pulse-broadcast 1.5s infinite;
}

.rooftop-sync-btn.controlled-by-other {
    color: var(--neon-orange) !important;
    border-color: var(--neon-orange) !important;
    box-shadow: 0 0 8px rgba(255, 108, 0, 0.4);
    opacity: 0.65;
    cursor: not-allowed;
}

.rooftop-playlist.locked {
    pointer-events: none !important;
    opacity: 0.7;
}

/* ============================================================
   TOUCH D-PAD (mobile/tablet movement — keyboard has no touch
   equivalent otherwise)
   ============================================================ */
.touch-dpad {
    display: none;
}

@media (pointer: coarse) {
    .touch-dpad {
        display: grid;
        grid-template-columns: repeat(3, 52px);
        grid-template-rows: repeat(2, 52px);
        gap: 4px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 8000;
    }

    .touch-dpad-btn {
        background: rgba(10, 8, 6, 0.75);
        border: 2px solid var(--neon-cyan);
        color: var(--neon-cyan);
        border-radius: 8px;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .touch-dpad-btn:active,
    .touch-dpad-btn.touch-dpad-active {
        background: var(--neon-cyan);
        color: var(--wood-dark);
    }

    .touch-dpad-up    { grid-column: 2; grid-row: 1; }
    .touch-dpad-left  { grid-column: 1; grid-row: 2; }
    .touch-dpad-right { grid-column: 3; grid-row: 2; }
    .touch-dpad-down  { grid-column: 2; grid-row: 2; }
}