/* --- GLOBAL VARIABLES & THEME CONFIG --- */
:root {
    /* AMBER PHOSPHOR (The Terminal Theme) */
    --mono-color: #ffb000;      /* Amber Text */
    --mono-dim:   #b8860b;      /* Dimmed state */
    --screen-bg:  #140a00;      /* Deep Amber-Black Background */
}

/* --- RESET & LAYOUT --- */
body, html { 
    margin: 0; 
    padding: 0; 
    background-color: #111; 
    font-family: sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    min-height: 100dvh; 
}

/* Main Container */
.tv-unit-container { 
    position: relative; 
    width: 100%; 
    max-width: 168vh; 
    aspect-ratio: 16 / 9; 
    margin: 0 auto; 
    transition: aspect-ratio 0.3s; 
}

/* Frames & Internals */
.tv-frame { 
    position: relative; 
    width: 100%; 
    z-index: 20; 
    pointer-events: none; 
    display: block; 
}
.mobile-only { display: none; }
.tv-internals { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    overflow: hidden; 
    background: var(--screen-bg); /* Tinted background */
}

/* Desktop Screen Positioning */
.screen-content { 
    position: absolute; 
    top: 9.4%; 
    left: 33.7%; 
    width: 61.6%; 
    height: 76.9%; 
    z-index: 15; 
    transform-origin: center center; 
    pointer-events: auto; 
}

/* --- BUTTONS & INTERACTION --- */
.btn-overlay { 
    position: absolute; 
    z-index: 30; 
    transform: translate(-50%, -50%); 
    opacity: 0; 
    transition: opacity 0.2s ease-in-out; 
    pointer-events: none; 
}
.click-zone { 
    position: absolute; 
    z-index: 40; 
    display: block; 
    cursor: pointer; 
}

/* --- DESKTOP COORDINATES --- */
.click-zone { width: 14%; height: 6.3%; left: 9%; } 
.zone-1 { top: 51.3%; } 
.zone-2 { top: 59.1%; } 
.zone-3 { top: 67.0%; } 
.zone-4 { top: 75.0%; } 

.btn-overlay { width: 15%; height: auto; left: 16%; }
.btn-1 { top: 54.3%; } 
.btn-2 { top: 62.4%; } 
.btn-3 { top: 70.3%; } 
.btn-4 { top: 78.2%; } 

/* RESTORED: Cyan Glow for Buttons (Matches the .png images) */
.btn-overlay.active { 
    opacity: 1; 
    filter: drop-shadow(0 0 5px #00ffff); 
}
.btn-overlay.cta-active { animation: cta-glitch 7s infinite; }

/* --- TERMINAL STYLES (Monochrome Amber) --- */
.term-link { 
    color: var(--mono-color); 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.2s; 
    display: block; 
    width: fit-content; 
    margin-top: 5px; 
    padding: 2px 0; 
    position: relative; 
    z-index: 100;
}
.term-link:hover, .term-link:active { 
    color: #fff; 
    text-shadow: 0 0 10px var(--mono-color), 0 0 20px var(--mono-color); 
}

.term-confirm { color: var(--mono-color); display: block; margin-top: 20px; font-weight: bold; }

/* --- RESPONSIVE TEXT UTILITIES --- */
.mobile-msg { display: none; }
.desktop-msg { display: inline; }

/* --- LOADING SCREEN (Monochrome Amber) --- */
#loading-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: var(--screen-bg); 
    z-index: 9999; 
    display: flex; justify-content: center; align-items: center; 
}
.loader-content { 
    display: flex; flex-direction: column; align-items: center; 
    gap: 40px; position: relative; width: 100%; height: 100%; justify-content: center; 
}
.loading-text { 
    font-family: 'Share Tech Mono', monospace; 
    color: var(--mono-color); 
    font-size: 1.5rem; letter-spacing: 0.2em; 
    animation: blink-cursor 0.5s step-end infinite alternate; 
}

/* Satellite uses Amber Theme */
.satellite-assembly { position: relative; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; transform: rotate(-30deg); }
.dish { position: absolute; width: 60px; height: 30px; border: 4px solid var(--mono-color); background: var(--screen-bg); border-radius: 0 0 60px 60px; top: 50px; z-index: 2; }
.antenna { position: absolute; width: 4px; height: 35px; background: var(--mono-color); top: 20px; z-index: 1; }
.wave { position: absolute; left: 50%; top: 20px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid transparent; border-top: 3px solid var(--mono-color); transform: translateX(-50%); opacity: 0; }
.w1 { animation: signal-radiate 2s infinite linear; } .w2 { animation: signal-radiate 2s infinite linear 0.5s; } .w3 { animation: signal-radiate 2s infinite linear 1.0s; }

/* --- CHANNELS --- */
#channel-home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.crt-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 0; overflow: hidden; transform: scale(1, 0); opacity: 0; }
.crt-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.25) contrast(140%); transition: filter 3s ease-in-out; }
.crt-image.full-color { filter: grayscale(0%) brightness(1) contrast(100%); }

.terminal-container { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--screen-bg); /* Amber Background */
    z-index: 5; padding: 4vw; 
    box-sizing: border-box; overflow-y: auto; pointer-events: auto; 
}
.terminal-container::-webkit-scrollbar { display: none; }
.terminal-container { -ms-overflow-style: none; scrollbar-width: none; }

.terminal-text { 
    font-family: 'Share Tech Mono', monospace; 
    font-size: 1.1vw; line-height: 1.6; 
    color: var(--mono-color); /* Amber Text */
    text-shadow: 0 0 3px var(--mono-color); 
    white-space: pre-wrap; 
}
.terminal-text.typing::after { content: '█'; animation: blink-cursor 0.8s step-end infinite; color: var(--mono-color); }

/* --- TITLE SEQUENCE --- */
.title-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; z-index: 10; opacity: 0; transition: opacity 0.5s ease-in; }
.title-container.visible { opacity: 1; }
.title-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 1.5vw 4vw 2vw 4vw; width: auto; margin-top: 0; backdrop-filter: grayscale(100%) brightness(0.4) contrast(120%); border-radius: 10px; }
.logo-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1vw; white-space: nowrap; }

/* Subtitle remains Amber-ish but dim */
.subtitle-text { font-family: 'Share Tech Mono', monospace; font-size: 1.2vw; color: var(--mono-dim); margin-top: 1.5vw; min-height: 1.5vw; letter-spacing: 0.1em; text-shadow: 0 0 2px var(--mono-color); white-space: nowrap; }
.subtitle-text.typing::after { content: '_'; animation: blink-cursor 1s step-end infinite; }

/* --- FONTS & ANIMATIONS (RESTORED CYAN TITLE) --- */
.neon-char { display: inline-block; opacity: 0.1; color: #111; }
.orbit-style, .spark-style { font-family: 'Righteous', cursive; font-weight: 400; font-size: 3.5vw; }
.ampersand-style { font-family: 'Konkhmer Sleokchher', system-ui; font-weight: 400; font-size: 3.5vw; transform: translateY(0.2vw); margin: 0 1.5vw; }

/* CYAN for Orbit/Spark (Restored) */
.orbit-style.on, .spark-style.on, #let-3.on { color: #e0ffff; animation: neon-flicker 0.4s steps(10) forwards, voltage-hum 4s ease-in-out infinite 0.5s; }
.spark-style.on { color: #fff; animation: neon-flicker-intense 0.6s steps(10) forwards, voltage-hum 4s ease-in-out infinite 0.7s; }
.ampersand-style.on { color: #fff; animation: incandescent-fade 2s ease-out forwards; }

.crt-container.turn-on { opacity: 1; animation: turnOnCRT 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.screen-content.screen-off-collapse { animation: tv-collapse 0.3s cubic-bezier(0.4, 0, 1, 1) forwards; }

@keyframes tv-collapse {
    0% { transform: scale(1, 1); filter: brightness(1); }
    40% { transform: scale(1, 0.005); filter: brightness(3); }
    60% { transform: scale(1, 0.005); filter: brightness(3); }
    100% { transform: scale(1, 1); filter: brightness(1); }
}
/* ORIGINAL: Voltage Hum uses Cyan/Blue shadows for title */
@keyframes voltage-hum {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px #00ffff, 0 0 20px #00cccc; }
    50% { opacity: 0.85; text-shadow: 0 0 8px #00ffff, 0 0 15px #00cccc; }
}
@keyframes signal-radiate {
    0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; border-top-width: 3px; }
    100% { transform: translateX(-50%) translateY(-60px) scale(6); opacity: 0; border-top-width: 0px; }
}
@keyframes turnOnCRT {
    0% { transform: scale(1, 0.005) scaleX(0); background: #fff; box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 120px #fff; } 
    40% { transform: scale(1, 0.006) scaleX(1); background: #fff; box-shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 60px #fff; } 
    100% { transform: scale(1, 1) scaleX(1); background: transparent; box-shadow: none; } 
}

/* RESTORED: Glitch now uses Cyan (#00ffff) for buttons */
@keyframes cta-glitch {
    0%, 90% { opacity: 0; filter: none; }
    92% { opacity: 1; filter: drop-shadow(0 0 5px #00ffff); }
    94% { opacity: 0; filter: none; }
    96% { opacity: 0.8; filter: drop-shadow(0 0 2px #00ffff); }
    100% { opacity: 0; filter: none; }
}

@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ORIGINAL: Neon Flicker uses Cyan/Blue/White */
@keyframes neon-flicker { 0% { opacity: 0; text-shadow: none; } 10% { opacity: 1; text-shadow: 0 0 10px #00ffff; } 20% { opacity: 0; text-shadow: none; } 30% { opacity: 0.5; text-shadow: 0 0 5px #00ffff; } 40% { opacity: 0; text-shadow: none; } 60% { opacity: 1; text-shadow: 0 0 10px #00ffff, 0 0 20px #00cccc; } 80% { opacity: 0.4; text-shadow: none; } 100% { opacity: 1; text-shadow: 0 0 2px #fff, 0 0 8px #00ffff, 0 0 15px #00cccc, 0 0 30px #00aaaa; } }
@keyframes neon-flicker-intense { 0% { opacity: 0; text-shadow: none; } 15% { opacity: 1; text-shadow: 0 0 20px #fff; } 20% { opacity: 0.2; } 30% { opacity: 1; text-shadow: 0 0 30px #00ffff; } 45% { opacity: 0; } 60% { opacity: 1; text-shadow: 0 0 20px #fff; } 100% { opacity: 1; text-shadow: 0 0 5px #fff, 0 0 15px #00ffff, 0 0 30px #00ffff, 0 0 60px #00ffff; } }
@keyframes incandescent-fade { 0% { opacity: 0; color: #331100; text-shadow: none; } 30% { opacity: 0.4; color: #cc4400; text-shadow: 0 0 10px #cc4400; } 60% { opacity: 0.8; color: #ffaa00; text-shadow: 0 0 20px #ff6600, 0 0 40px #cc3300; } 100% { opacity: 1; color: #fff; text-shadow: 0 0 5px #fff, 0 0 15px #ffaa00, 0 0 30px #ff6600, 0 0 60px #ff3300; } }

/* --- MOBILE LAYOUT --- */
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }

    .mobile-msg { display: inline; }
    .desktop-msg { display: none; }

    .tv-unit-container { aspect-ratio: 9 / 16; max-width: 100%; width: 100%; height: auto; max-height: 100vh; }

    .screen-content { top: 34%; left: 11.6%; width: 77%; height: 32%; }

    .click-zone { width: 33.4%; height: 5%; left: 50.6%; transform: translateX(-50%); }
    .zone-1 { top: 71.1%; } 
    .zone-2 { top: 76.9%; } 
    .zone-3 { top: 82.7%; } 
    .zone-4 { top: 88.4%; } 

    .btn-overlay { width: 36.1%; height: 5.8%; left: 50.6%; }
    .btn-1 { top: 73.7%; } 
    .btn-2 { top: 79.6%; } 
    .btn-3 { top: 85.4%; } 
    .btn-4 { top: 91.2%; } 

    .orbit-style, .spark-style, .ampersand-style { font-size: 8vw; }
    .subtitle-text { font-size: 2.5vw; margin-top: 2vh; }

    .terminal-container { padding: 2vw; padding-bottom: 20px; }
    .terminal-text { font-size: 2.8vw; line-height: 1.1; }

    .term-link { 
        margin-top: 0; 
        padding: 0; 
        line-height: 1.2;
        font-size: 0.9em; 
    }

    .loading-text { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); font-size: 1rem; width: max-content; }
}