* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, html { width: 100%; height: 100%; overflow: hidden; background-color: #000; }

#camera-stage { position: absolute; top: 0; left: 0; width: 3500px; height: 100%; will-change: transform; }

#black-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 999; transition: opacity 2.5s ease-in-out; pointer-events: none; }
#black-screen.hidden { opacity: 0; }
#title-container { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 1000; transition: all 2.5s cubic-bezier(0.25, 1, 0.5, 1); }
#title-container.intro { top: 50%; transform: translate(-50%, -50%) scale(1.1); }
#title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; font-size: 2rem; letter-spacing: 4px; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
#subtitle { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; font-size: 0.8rem; letter-spacing: 3px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; margin-top: 10px; }

#museum-wall { position: absolute; top: 0; left: 0; width: 100%; height: 60vh; background-image: url('museum_images/pixelcastle.png'); background-size: auto 100%; background-repeat: repeat-x; background-position: center bottom; image-rendering: pixelated; }
#museum-floor { position: absolute; bottom: 0; left: 0; width: 100%; height: 40vh; background-image: url('museum_images/floor.png'); background-repeat: repeat-x; background-size: auto 100%; background-position: bottom left; image-rendering: pixelated; }

#art-gallery { position: absolute; bottom: 40vh; left: 0; width: 100%; height: 60vh; z-index: 4; }
.art-piece { position: absolute; bottom: 80px; transform: translateX(-50%); width: 180px; height: 180px; image-rendering: pixelated; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.art-piece.near { transform: translateX(-50%) scale(1.05); }

/* Wall-based Metadata */
.wall-art-meta {
    position: absolute;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%);
    width: 250px; /* THE FIX: Made wider so long titles don't stack up too high */
    text-align: center;
    padding-bottom: 8px; 
    pointer-events: none; 
    z-index: 5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wall-art-title {
    color: #f1c40f; 
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2px;
    image-rendering: pixelated;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.wall-art-author {
    color: white; 
    font-size: 0.7rem;
    font-weight: 300;
    opacity: 0.8;
    image-rendering: pixelated;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.art-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)); }
.art-canvas { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 1; object-fit: cover; }

/* THE FIX: Pushed higher up (-80px) and made larger (1rem) */
.art-hint { 
    position: absolute; 
    top: -80px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: white; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
    font-size: 1rem; 
    font-weight: bold; 
    letter-spacing: 2px; 
    text-shadow: 0 2px 5px rgba(0,0,0,1); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    pointer-events: none; 
    z-index: 10;
}
.art-piece.near .art-hint { opacity: 1; }

#dynamic-lighting { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 14; background: radial-gradient(circle 600px at var(--light-x, 50vw) var(--light-y, 50vh), rgba(255, 235, 180, 0.1) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.7) 100%); animation: lightFlicker 3s infinite alternate ease-in-out; }
@keyframes lightFlicker { 0% { opacity: 0.95; } 100% { opacity: 1; } }

#focus-overlay { z-index: 100; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
#focus-overlay.active { opacity: 1; pointer-events: all; }

#focus-layout { display: flex; align-items: center; justify-content: center; gap: 60px; width: 90%; max-width: 1200px; margin-top: 20px; }
#focus-left { display: flex; flex-direction: column; align-items: center; }

#focused-art-container { position: relative; width: 400px; height: 400px; transform: scale(0.6) translateY(50px); opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
#focus-overlay.active #focused-art-container { transform: scale(1) translateY(0); opacity: 1; }
#slider-mask { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; overflow: hidden; z-index: 1; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center center; }
#slider-track { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.slide-image { min-width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#focused-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; image-rendering: pixelated; transition: opacity 0.5s ease, transform 0.5s ease;}

#art-details { margin-top: 10px; text-align: center; opacity: 0; transition: opacity 0.5s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#art-title { font-size: 1.6rem; font-weight: 600; color: #f1c40f; letter-spacing: 1px; margin-bottom: 5px; }
#art-author { font-size: 1rem; font-weight: 300; color: #ddd; }

#focus-right { width: 450px; background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 12px; border-left: 4px solid #f1c40f; opacity: 0; transform: translateX(30px); transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#focus-right.active { opacity: 1; transform: translateX(0); }
#art-description { color: #fff; font-size: 1.05rem; line-height: 1.7; font-weight: 300; }

#era-info { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: white; text-align: center; max-width: 600px; transform: translateY(-20px); opacity: 0; transition: all 0.6s ease 0.2s; }
#focus-overlay.active #era-info { transform: translateY(0); opacity: 1; }
#era-title { font-size: 1.8rem; font-weight: 400; letter-spacing: 2px; margin-bottom: 10px; color: #f1c40f; }
#era-focus { font-size: 1rem; font-weight: 300; color: #ddd; }
.swipe-hint { margin-top: 10px; font-size: 0.8rem; font-weight: bold; letter-spacing: 2px; color: rgba(255, 255, 255, 0.5); animation: pulseHint 2s infinite alternate; }
@keyframes pulseHint { 0% { opacity: 0.3; } 100% { opacity: 1; } }

/* --- SUPER ZOOM STATE --- */
#focus-overlay.super-zoom #focused-frame { opacity: 0; transform: scale(1.1); }
#focus-overlay.super-zoom #era-info,
#focus-overlay.super-zoom #focus-right,
#focus-overlay.super-zoom #art-details { opacity: 0 !important; transform: translateY(20px); pointer-events: none; }

#focus-overlay.super-zoom #focused-art-container { transform: translateX(255px) scale(1); }
#focus-overlay.super-zoom #slider-mask { transform: scale(1.5); }

/* --- CINEMATIC SUPER ZOOM UI STYLES --- */
#super-zoom-ui {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s ease 0.3s; 
    z-index: 15;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#focus-overlay.super-zoom #super-zoom-ui { opacity: 1; }

.sz-header { 
    position: absolute;
    top: 18%; 
    left: 50%;
    transform: translateX(-50%);
    text-align: center; color: white; text-shadow: 0 4px 10px rgba(0,0,0,0.8); width: 100%;
}
#sz-title { display: inline-block; font-size: 2.2rem; font-weight: 600; color: #f1c40f; letter-spacing: 1px; margin-right: 15px; }
#sz-author { display: inline-block; font-size: 1.2rem; font-weight: 300; color: #ddd; }

.sz-footer {
    position: absolute;
    bottom: 12%; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px; text-align: center; color: white;
    font-size: 1.1rem; line-height: 1.7; font-weight: 300;
    background: rgba(0, 0, 0, 0.4); padding: 15px 30px; border-radius: 8px;
    border-top: 2px solid rgba(241, 196, 15, 0.5);
    backdrop-filter: blur(4px);
}

/* Player Container & Mobile UI */
#player-container { position: absolute; bottom: 40vh; width: 96px; transform: translateY(70px); z-index: 10; display: flex; flex-direction: column; align-items: center; }
#player-sprite { width: 96px; image-rendering: pixelated; position: relative; z-index: 2; }
#player-reflection { position: absolute; bottom: -85px; width: 96px; image-rendering: pixelated; transform: scaleY(-0.8) skewX(-5deg); opacity: 0.15; filter: blur(2px) brightness(0.5); mask-image: linear-gradient(to top, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 100%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 100%); pointer-events: none; z-index: 9; }
#player-shadow { position: absolute; bottom: -6px; width: 54px; height: 18px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; filter: blur(4px); z-index: 1; }

#mobile-controls { display: none; position: fixed; bottom: 40px; right: 40px; z-index: 1001; gap: 20px; }
.mobile-btn { width: 65px; height: 65px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; user-select: none; }
.mobile-btn:active { background: rgba(255, 255, 255, 0.4); transform: scale(0.9); }
@media (hover: none) and (pointer: coarse) { #mobile-controls { display: flex; } }

#vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 15; }
#particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; overflow: hidden; }
.particle { position: absolute; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); animation: drift infinite linear; }
@keyframes drift { 0% { transform: translateY(-10vh) translateX(0px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(110vh) translateX(50px); opacity: 0; } }

#volume-control { position: absolute; bottom: 20px; left: 20px; z-index: 20; display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.4); padding: 8px 14px; border-radius: 20px; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: 0.3; transition: opacity 0.3s ease; }
#volume-control:hover { opacity: 1; }
#mute-icon { cursor: pointer; user-select: none; font-size: 1.2rem; }
#volume-slider { -webkit-appearance: none; width: 80px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; }
#volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; }