* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    
    /* THE FIX: Removes the blue/gray tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    
    /* Removes the dotted outline when an element is "focused" */
    outline: none; 
}

body {
    background: #000;
    
    /* MOBILE BAR FIX: svh matches the visible screen size */
    height: 100svh; 
    width: 100vw;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* MOBILE SCROLL FIX: Locks the screen in place */
    overflow: hidden;                
    overscroll-behavior: none;       
    touch-action: none;              
}

/* 16:9 STAGE */
#stage {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100vw;
    max-height: 100svh; 
    height: auto;
    background: #000;
    overflow: hidden; 
    container-type: size; 
}

@media (max-aspect-ratio: 16/9) { #stage { width: 100%; height: auto; } }
@media (min-aspect-ratio: 16/9) { #stage { height: 100svh; width: auto; } }

/* VIDEO */
#bg-vid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* --- UPDATED SOUND BUTTON --- */
#sound-btn {
    position: absolute;
    top: 5%;      
    right: 5%;    
    width: 6%;    
    min-width: 40px; 
    max-width: 80px; 
    height: auto;
    z-index: 100;
    cursor: pointer;
    opacity: 0.7; /* Default State */
    
    /* ADDED: Scale transition */
    transition: opacity 0.2s, transform 0.2s;
}

/* ADDED: Hover Effect (Bigger + Full Opacity) */
#sound-btn:hover { 
    opacity: 1; 
    transform: scale(1.1); 
}

/* LOGO LAYER */
#logo-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15%; 
    opacity: 0; 
    transition: opacity 0.5s ease-in; 
}

#logo-layer img {
    width: 60%; 
    height: auto;
}

/* MENU LAYER */
#menu-layer {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 20;
    transform: translateY(100%); 
    transition: transform 0.6s linear; 
}

.menu-container {
    position: relative;
    width: 100%;
}
.menu-container img {
    width: 100%;
    display: block;
    height: auto;
}

/* POPUP LAYER */
#popup-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
}

#popup-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 51;
}

.popup-content {
    position: relative;
    width: 60%;
    max-width: 900px;
    z-index: 52; 
}
.popup-content img { width: 100%; height: auto; }

/* CLOSE BUTTON (Skip) */
#close-popup {
    position: absolute;
    top: 3%;       
    right: 4%;     
    width: 8%;     
    min-width: 30px; 
    height: auto;
    cursor: pointer;
    z-index: 60;   
    transition: transform 0.2s;
}
#close-popup:hover {
    transform: scale(1.1); 
}

/* UTILS */
.hidden { display: none !important; }

/* --- HITBOXES (THE FIX) --- */
.hitbox {
    position: absolute;
    cursor: pointer;
    background: transparent; /* Changed from cyan to transparent */
}

/* ANIMATION STATES */
.fade-in { opacity: 1 !important; }
.slide-up { transform: translateY(0) !important; }

/* CONTACT INFO */
.contact-info {
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(9px, 1.5cqw, 24px); 
    letter-spacing: 0.1cqw;
    margin-bottom: 1.5cqw;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    gap: 1.5cqw; 
    pointer-events: auto; 
    flex-direction: row !important; 
    white-space: nowrap; 
}

.separator {
    color: cyan;
    opacity: 0.7;
}