:root {
    --amber: #ffcc00;
    --amber-dim: rgba(255, 204, 0, 0.25);
    --amber-mid: rgba(255, 204, 0, 0.5);
    --bg-color: #0f0a00;
    --glow: 0 0 8px rgba(255, 204, 0, 0.5);
    --box-glow: 0 0 25px rgba(255, 204, 0, 0.3), inset 0 0 20px rgba(255, 204, 0, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    height: 100%;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at center, #1a1100 0%, var(--bg-color) 100%);
    color: var(--amber);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    overflow: hidden;
}

h2, .val, .hud-menu a, .panel-title, .tab.active, .highlight, .text-block {
    text-shadow: var(--glow);
}

/* Remove glow from darker/dim elements */
[style*="var(--amber-mid)"], [style*="var(--amber-dim)"], .label, .tab {
    text-shadow: none !important;
}

/* 
   We have completely removed the heavy .crt-overlay gradient vignette.
   This ensures the yellow stays vibrant and the logo displays exactly as exported.
*/

.vignette {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
    z-index: 9998;
    opacity: 0.5;
}

.scanlines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 50%);
    background-size: 100% 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.8;
}

.hud-container {
    width: 100vw; height: 100vh;
    padding: 20px;
    display: flex; flex-direction: column; gap: 20px;
    background: 
        linear-gradient(var(--amber-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--amber-dim) 1px, transparent 1px);
    background-size: 100px 100px;
    background-position: center;
}

/* Header */
.hud-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 3px solid var(--amber);
    padding-bottom: 10px;
}

.brand { display: flex; align-items: center; gap: 15px; }
.logo { height: 90px; } /* Exactly as exported, vibrant */
.title-logo { height: 50px; display: block; margin-bottom: 5px; } 
.subtitle { font-size: 1.1rem; color: var(--amber); opacity: 0.8; letter-spacing: 3px; }

.header-readout { display: flex; gap: 30px; text-align: right; }
.readout-block { display: flex; flex-direction: column; }
.readout-block .label { font-size: 0.8rem; opacity: 0.7; letter-spacing: 1px; }
.readout-block .val { font-size: 1.5rem; font-weight: 700; }
.highlight { color: #000; background-color: var(--amber); padding: 0 5px; }

/* Grid */
.hud-grid {
    display: grid;
    grid-template-columns: 360px 1fr 350px;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

/* Panels */
.hud-panel {
    border: 1px solid var(--amber-mid);
    background-color: rgba(15, 10, 0, 0.8);
    box-shadow: var(--box-glow);
    display: flex; flex-direction: column;
    position: relative;
}

.hud-panel::before, .hud-panel::after,
.hud-viewport::before, .hud-viewport::after {
    content: ""; position: absolute;
    width: 15px; height: 15px;
    pointer-events: none; z-index: 20;
}
.hud-panel::before, .hud-viewport::before { top: -1px; left: -1px; border-top: 3px solid var(--amber); border-left: 3px solid var(--amber); }
.hud-panel::after, .hud-viewport::after { bottom: -1px; right: -1px; border-bottom: 3px solid var(--amber); border-right: 3px solid var(--amber); }

.panel-title {
    background-color: var(--amber); color: #000;
    padding: 8px 15px; font-weight: 700; font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Left Menu */
.hud-menu { list-style: none; flex: 1; padding: 20px; }
.hud-menu li { margin-bottom: 10px; }
.hud-menu a {
    color: var(--amber); text-decoration: none; font-size: 1.4rem;
    display: block; padding: 10px; border: 1px solid var(--amber-dim);
    transition: 0.1s; text-transform: uppercase;
}
.hud-menu a:hover, .hud-menu a.active {
    background-color: var(--amber); color: #000; font-weight: 700;
}

.sub-menu { list-style: none; margin-top: 5px; padding-left: 15px; }
.sub-menu a { font-size: 1.1rem; padding: 5px 10px; border-left: 2px dashed var(--amber-dim); margin-bottom: 5px;}
.sub-menu a:hover, .sub-menu a.active { border-left: 2px solid var(--amber); }

.hud-footer { padding: 15px 20px; border-top: 2px solid var(--amber); display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.cursor-block { width: 12px; height: 20px; background-color: var(--amber); animation: blinker 1s step-start infinite; }

/* Viewport */
.hud-viewport {
    border: 1px solid var(--amber-mid);
    background-color: rgba(15, 10, 0, 0.8);
    box-shadow: var(--box-glow);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}

.viewport-header {
    display: flex; border-bottom: 1px solid var(--amber-mid); justify-content: space-between;
}
.tab { padding: 10px 20px; font-size: 1.2rem; border-right: 1px solid var(--amber-mid); color: var(--amber-mid); font-weight: 700;}
.tab.active { background-color: var(--amber); color: #000; }

.viewport-content { flex: 1; position: relative; padding: 40px; }

/* Wireframe HUD */
.wireframe-hud {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70vh; height: 70vh; opacity: 0.3; pointer-events: none;
}
.hud-circle { position: absolute; border: 2px solid var(--amber); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hc1 { width: 100%; height: 100%; }
.hc2 { width: 80%; height: 80%; border-style: dashed; }
.hud-axis { position: absolute; background-color: var(--amber); }
.hx { width: 100%; height: 2px; top: 50%; left: 0; }
.hy { height: 100%; width: 2px; left: 50%; top: 0; }
.hud-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 2px solid var(--amber); border-radius: 50%; }
.hud-data-point { position: absolute; width: 10px; height: 10px; background-color: var(--amber); }
.dp1 { top: 25%; left: 35%; box-shadow: 0 0 10px var(--amber); }
.dp2 { bottom: 30%; right: 20%; box-shadow: 0 0 10px var(--amber); }

#content-container { position: relative; z-index: 10; background: rgba(0,0,0,0.6); padding: 20px; border-left: 4px solid var(--amber); display: block; width: 100%; }
h2 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
.text-block { font-size: 1.4rem; margin-bottom: 10px; }
.alert { font-size: 1.2rem; margin-top: 20px; font-weight: 700;}
.blink { animation: blinker 1.5s step-start infinite; }

/* Telemetry */
.right-panel { padding-bottom: 20px; }
.telemetry-block { padding: 15px 20px; border-bottom: 1px solid var(--amber-dim); }
.t-label { font-size: 1rem; color: var(--amber-mid); letter-spacing: 1px; }
.t-val { font-size: 1.6rem; font-weight: 700; margin-top: 5px; }
.inverted { background-color: var(--amber); color: #000; display: inline-block; padding: 2px 8px; }

.hex-stream-wrapper { flex: 1; padding: 20px; display: flex; flex-direction: column; overflow: hidden; }
.stream-label { font-size: 1rem; border-bottom: 2px solid var(--amber); padding-bottom: 5px; margin-bottom: 15px; font-weight: 700; }
.hex-stream { flex: 1; font-size: 1.1rem; line-height: 1.6; font-family: 'Courier New', Courier, monospace; }

.hud-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 20px; }
.s-box { border: 2px solid var(--amber-mid); text-align: center; padding: 15px 0; font-size: 1.2rem; font-weight: 700; }
.s-box.active { background-color: var(--amber); color: #000; border-color: var(--amber); }

@keyframes blinker { 50% { opacity: 0; } }

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    body, html { overflow: auto; }
    
    .hud-container {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    
    .hud-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
    
    .hud-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header-readout {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }
    
    .brand {
        flex-direction: column;
        text-align: center;
    }
    
    .center-column {
        min-height: 70vh;
    }
    
    iframe { max-width: 100%; }
}

@media (max-width: 600px) {
    .brand img.logo { height: 60px; }
    .brand img.title-logo { height: 35px; }
    .subtitle { font-size: 0.9rem; letter-spacing: 1px; }
    .header-readout { flex-direction: column; align-items: center; gap: 10px; }
    
    .hud-menu a { font-size: 1.1rem; }
    h2 { font-size: 1.8rem; }
    .text-block { font-size: 1.1rem; }
    .viewport-content { padding: 20px; }
}