/* * PROPRIETARY AND CONFIDENTIAL: Copyright (c) 2026 Micro Haus. 
 * MASTER VERSION 67 - DEPTH MAPPING AUDIT
 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
    width: 100%; height: 100%;
    position: fixed; overflow: hidden; 
    touch-action: none; 
    background-color: #050505;
    background-image: radial-gradient(circle at 50% 50%, #1A234A 0%, #050505 85%);
    color: #FFFFFF; font-family: 'Inter', sans-serif;
    display: flex; justify-content: center; align-items: center;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

#ghostWatermark {
    position: fixed;
    display: block; 
    bottom: 30px; 
    right: 30px;
    width: 75px; 
    height: auto;
    opacity: 0.35; 
    z-index: 99999; 
    pointer-events: none; 
    transition: opacity 2s ease;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8));
    border-radius: 8px;
}

#mainUi { 
    text-align: center; 
    position: relative; 
    z-index: 900; 
    width: 100%; 
    max-width: 900px; 
    padding: 2rem; 
    pointer-events: auto; 
}

.presents-text { font-size: 0.75rem; color: #FFF; font-weight: 500; margin-bottom: 5px; }
.dj-text { font-size: 1rem; letter-spacing: 0.4em; font-weight: 700; margin-bottom: 15px; }
.logo-text { font-size: 4rem; font-weight: 900; letter-spacing: 0.1em; margin: 0; background: linear-gradient(180deg, #FFD166 0%, #FCA311 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.subtitle-text { font-size: 1rem; letter-spacing: 0.4em; color: #4F83FF; margin: 15px 0 10px 0; font-weight: 700; }
.action-text { font-size: 0.8rem; letter-spacing: 0.3em; color: #FFF; font-weight: 700; margin-bottom: 40px; }

.mantra-box { margin: 0 auto 50px auto; width: fit-content; max-width: 600px; }
.mantra-box p { font-size: 0.95rem; font-weight: 400; line-height: 1.6; color: #EEE; }
.gold-bold { color: #FCA311; font-weight: 700; }
.gold-italic { color: #FCA311; font-style: italic; font-weight: 700; }

.module-grid { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; }
.module-col { display: flex; flex-direction: column; align-items: center; width: 280px; }
.module-label { font-size: 0.75rem; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 12px; color: #FFF; }

.btn-module-1, .btn-module-2 { position: relative; z-index: 1000; width: 100%; height: 55px; border-radius: 30px; font-weight: 700; letter-spacing: 0.15em; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.3s ease; font-family: 'Inter', sans-serif; }
.btn-module-1 { background: transparent; border: 2px solid #4F83FF; color: #FFFFFF; font-size: 0.8rem; }
.btn-module-2 { background: linear-gradient(135deg, #FFD166 0%, #FCA311 100%); border: none; color: #000; font-size: 0.8rem; }
.btn-sub { font-size: 0.55rem; font-weight: 400; letter-spacing: 0.05em; color: #333; margin-top: 2px; }

.advisory-footer { margin-top: 20px; }
.advisory-footer p { font-size: 0.65rem; letter-spacing: 0.05em; color: #AAA; font-weight: 500; line-height: 1.8; margin: 0; }

#verificationStatus { display: none; color: #FCA311; letter-spacing: 0.2em; font-size: 1rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-weight: 700; z-index: 500; width: 100%; pointer-events: none; }

#bgLayer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 2s ease; background-color: #050505; pointer-events: none; }
.state-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 3s ease; background-size: cover; background-position: center; pointer-events: none; }
.sata-bg { background-image: url('10066.png'); opacity: 1; }
.coda-bg { background-image: url('10065.png'); }

/* V67: VESSEL CANVAS REMAINS AT Z-INDEX 50 (FRONT) */
#vesselCanvas { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; opacity: 0; transition: opacity 2s ease; pointer-events: auto; }

#hud { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; opacity: 0; transition: opacity 2s ease; }
.hud-top { position: absolute; top: 10%; left: 0; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.timer-display { font-family: monospace; font-size: 1.8rem; color: #fff; letter-spacing: 0.2em; text-shadow: 0 0 10px rgba(0,0,0,0.8); margin-bottom: 10px; }
.time-bar-bg { width: 60%; max-width: 400px; height: 2px; background: rgba(255,255,255,0.1); }
.time-bar-fill { width: 0%; height: 100%; background: #4F83FF; transition: width 0.5s linear, background-color 2s ease; }

/* V67: LOGO LAYER LOWERED TO Z-INDEX 25 (BEHIND THE 3D RINGS) */
.logo-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 25; opacity: 0; pointer-events: none; transition: opacity 3s ease; }
.logo-layer.active { opacity: 1; }

.end-reveal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 3s ease; background: #050505; }
.end-reveal.active { opacity: 1; pointer-events: auto; }

.shipping-form { display: none; flex-direction: column; gap: 15px; margin-top: 30px; width: 100%; max-width: 320px; }
.shipping-form input, .shipping-form textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid #4F83FF; color: #FFF; padding: 12px 15px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em; outline: none; transition: border-color 0.3s ease; }
.shipping-form input:focus, .shipping-form textarea:focus { border-color: #FCA311; }
.shipping-form input::placeholder, .shipping-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.shipping-form textarea { resize: none; height: 80px; }

#videoContainer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); z-index: 100000; justify-content: center; align-items: center; flex-direction: column; }
.close-x { position: absolute; top: env(safe-area-inset-top, 40px); right: 20px; font-size: 3rem; color: #fff; cursor: pointer; z-index: 100001; padding: 10px; opacity: 0.7; pointer-events: auto; }
@media (max-width: 768px) { .logo-text { font-size: 3rem; } .module-grid { flex-direction: column; align-items: center; } }