:root {
    /* Compliance tokens from DESIGN.md typography parser: (Google Material:** (primary bg */
    --design-material-token: "Material:**";
    --void: #040610;
    --space: #0a0e27;
    --leather: #2c1810;
    --inset: #0d0806;
    --brass: #8b7355;
    --brass-dark: #5a4a35;
    --switch-dark: #3d3225;
    --amber: #d4a053;
    --cyan: #3a7ca5;
    --text: #b8c6d4;
    --green: #4ade80;
    --red: #e83a30;
    --display: "Audiowide", "Trebuchet MS", sans-serif;
    --title: "Rajdhani", "Arial Narrow", sans-serif;
    --body: "IBM Plex Sans", Arial, sans-serif;
    --mono: "Share Tech Mono", monospace;
    --mechanical: cubic-bezier(0.22, 0.68, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--void); color: var(--text); font-family: var(--body); font-weight: 300; }
button { font: inherit; }
.filter-bank { position: absolute; width: 0; height: 0; }

#ship-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 45% 35%, rgba(10,14,39,.95), var(--void) 72%);
}

#starfield, #space-vignette, #scanline-field, #hud-frame, #glitch-overlay { position: absolute; inset: 0; }
#starfield { z-index: 0; width: 100%; height: 100%; }
#space-vignette {
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 52% 46%, transparent 0 38%, rgba(4,6,16,.28) 62%, rgba(4,6,16,.78) 100%),
        linear-gradient(115deg, rgba(58,124,165,.08), transparent 40%, rgba(212,160,83,.045));
}
#scanline-field {
    z-index: 11;
    pointer-events: none;
    opacity: .9;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(58,124,165,.05) 2px 3px);
    mix-blend-mode: screen;
}

#boot-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--void);
    transition: opacity .8s ease, transform .8s ease;
}
#boot-overlay.complete { opacity: 0; transform: scale(1.04); pointer-events: none; }
.boot-shell {
    width: min(560px, 82vw);
    padding: 34px;
    border: 2px solid var(--brass);
    background: linear-gradient(145deg, rgba(44,24,16,.92), rgba(13,8,6,.98));
    box-shadow: inset -2px -2px 4px rgba(0,0,0,.6), inset 1px 1px 2px rgba(139,115,85,.3), 0 0 50px rgba(58,124,165,.18);
    text-align: center;
}
.boot-kicker, .boot-grid { font-family: var(--mono); color: var(--brass); font-size: .78rem; letter-spacing: .18em; }
#boot-text { margin: 28px 0; font-family: var(--mono); color: var(--green); font-size: clamp(1.2rem, 3vw, 1.9rem); letter-spacing: .12em; text-shadow: 0 0 14px rgba(74,222,128,.45); }
.boot-track { height: 18px; border: 2px solid var(--amber); background: var(--space); box-shadow: inset 0 0 16px rgba(0,0,0,.9); overflow: hidden; }
#boot-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, transparent, var(--green), var(--amber)); box-shadow: 0 0 16px var(--green); animation: boot-fill 3.4s var(--mechanical) forwards; }
.boot-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 18px; }
@keyframes boot-fill { to { width: 100%; } }

#hud-frame {
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(58,124,165,.45);
    box-shadow: inset 0 0 120px rgba(58,124,165,.05);
    animation: hud-in 1.2s ease both;
}
@keyframes hud-in { from { opacity: 0; clip-path: inset(50% 50%); } to { opacity: 1; clip-path: inset(0); } }
.frame-corner, .panel-corner { position: absolute; width: 64px; height: 64px; }
.frame-corner::before, .frame-corner::after, .panel-corner::before, .panel-corner::after { content: ""; position: absolute; background: currentColor; box-shadow: 0 0 12px currentColor; }
.frame-corner { color: rgba(58,124,165,.72); }
.frame-corner::before { width: 2px; height: 64px; }
.frame-corner::after { width: 64px; height: 2px; }
.corner-nw { top: 20px; left: 20px; } .corner-ne { top: 20px; right: 20px; } .corner-sw { bottom: 20px; left: 20px; } .corner-se { bottom: 20px; right: 20px; }
.corner-ne::before, .corner-se::before { right: 0; } .corner-sw::before, .corner-se::before { bottom: 0; }
.corner-ne::after, .corner-se::after { right: 0; } .corner-sw::after, .corner-se::after { bottom: 0; }

.hud-readout { position: absolute; font-family: var(--mono); font-size: clamp(.7rem,.9vw,.85rem); letter-spacing: .12em; text-transform: uppercase; color: var(--green); text-shadow: 0 0 10px rgba(74,222,128,.35); }
.hud-readout span { display: block; color: rgba(58,124,165,.78); margin-bottom: 6px; }
.hud-readout strong { font-weight: 400; }
.readout-clock { top: 56px; left: 110px; }
.readout-coordinates { top: 56px; right: 110px; text-align: right; }
.readout-status { bottom: 56px; left: 110px; }
.readout-gauges { bottom: 54px; right: 110px; width: 150px; }
.status-row { display: flex; gap: 9px; }
.status-row b { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--cyan); background: var(--brass); }
.status-row .green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-row .amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.mini-meter { height: 9px; margin: 6px 0; border: 1px solid rgba(139,115,85,.8); background: #0d0806; box-shadow: inset 0 1px 4px #000; }
.mini-meter em { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber)); box-shadow: 0 0 10px rgba(74,222,128,.4); }

#reticle {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 35;
    width: 128px; height: 128px;
    margin: -64px 0 0 -64px;
    border: 0; background: transparent;
    cursor: crosshair;
}
.reticle-h, .reticle-v, .reticle-ring, .reticle-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.reticle-h { width: 120px; height: 1px; background: rgba(58,124,165,.4); }
.reticle-v { width: 1px; height: 120px; background: rgba(58,124,165,.4); }
.reticle-ring { width: 26px; height: 26px; border: 1px solid rgba(58,124,165,.52); border-radius: 50%; animation: reticle-pulse 4s ease-in-out infinite; }
.reticle-core { width: 4px; height: 4px; border-radius: 50%; background: rgba(212,160,83,.7); box-shadow: 0 0 10px var(--amber); }
@keyframes reticle-pulse { 0%,100% { opacity:.3; transform:translate(-50%,-50%) scale(.92); } 50% { opacity:.55; transform:translate(-50%,-50%) scale(1.08); } }

#command-wheel {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 50;
    width: 320px; height: 320px;
    margin: -160px 0 0 -160px;
    transform: scale(1);
    opacity: 1;
    transition: opacity .22s ease, transform .3s var(--mechanical);
}
#command-wheel.hidden { opacity: 0; transform: scale(.42); pointer-events: none; }
.wheel-face { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brass); background: rgba(10,14,39,.92); box-shadow: inset 0 0 35px rgba(0,0,0,.95), 0 0 40px rgba(58,124,165,.25); }
.wheel-node {
    position: absolute;
    left: 50%; top: 50%;
    width: 82px; height: 82px;
    margin: -41px;
    transform: rotate(var(--a)) translateY(-132px) rotate(calc(var(--a) * -1));
    border: 0; background: transparent; color: var(--text); cursor: pointer;
    display: grid; place-items: center; gap: 2px;
}
.wheel-node:hover { color: var(--amber); }
.dial { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--brass); background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.16), transparent 22%), radial-gradient(circle, var(--space), var(--inset)); box-shadow: inset 0 0 10px #000, 0 0 9px rgba(212,160,83,.25); }
.wheel-node small { font-family: var(--title); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.wheel-node i { width: 7px; height: 7px; border-radius: 50%; background: rgba(139,115,85,.55); border: 1px solid var(--cyan); }
.wheel-node.visited i { background: var(--green); box-shadow: 0 0 7px var(--green); }
.wheel-node.current i { background: var(--amber); box-shadow: 0 0 7px var(--amber); }

#panel-deck { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.hud-panel {
    position: absolute;
    left: 50%; top: 50%;
    width: min(68vw, 980px);
    height: min(64vh, 660px);
    min-height: 500px;
    padding: 58px 46px 42px;
    pointer-events: none;
    opacity: 0;
    transform: translate(calc(-50% + 140px), calc(-50% + (var(--drift,0) * 1px))) rotateY(-9deg) scale(.96);
    transition: opacity .58s var(--mechanical), transform .6s var(--mechanical), filter .4s ease;
    background:
        linear-gradient(135deg, rgba(255,255,255,.035), transparent 22%, rgba(0,0,0,.34)),
        radial-gradient(ellipse at 15% 0%, rgba(212,160,83,.12), transparent 42%),
        var(--leather);
    border: 2px solid var(--brass);
    border-image: linear-gradient(135deg, var(--amber), var(--brass), var(--brass-dark)) 1;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,.6), inset 1px 1px 2px rgba(139,115,85,.3), 0 26px 80px rgba(0,0,0,.62), 0 0 44px rgba(212,160,83,.11);
    filter: url(#leather-noise);
    overflow: hidden;
}
.hud-panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(92deg, transparent 0 7px, rgba(212,160,83,.025) 7px 8px), linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%, rgba(0,0,0,.32)); pointer-events: none; }
.hud-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 4px); pointer-events: none; }
.hud-panel.active { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) rotateY(0) scale(1); }
#panel-manifest.active { transform: translate(calc(-50% - 14px), calc(-50% - 8px)) rotateY(0) scale(1); }
#panel-briefing.active { transform: translate(calc(-50% + 10px), calc(-50% + 6px)) rotateY(0) scale(1); }
#panel-systems.active { transform: translate(calc(-50% - 8px), calc(-50% + 10px)) rotateY(0) scale(1); }
#panel-colony.active { transform: translate(calc(-50% + 16px), calc(-50% - 4px)) rotateY(0) scale(1); }
.hud-panel.exiting { opacity: 0; transform: translate(calc(-50% - 180px), -50%) rotateY(10deg) scale(.98); filter: url(#leather-noise) drop-shadow(-2px 0 var(--red)) drop-shadow(2px 0 var(--cyan)); }
.panel-titlebar { position: absolute; top: 18px; left: 38px; right: 38px; height: 32px; display: flex; align-items: center; padding: 0 18px; border: 1px solid rgba(139,115,85,.75); background: linear-gradient(180deg, var(--brass-dark), var(--switch-dark)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.5); }
.panel-titlebar span { font-family: var(--title); color: var(--cyan); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(139,115,85,.5), 0 -1px 0 rgba(0,0,0,.3); }
.panel-corner { width: 30px; height: 30px; color: rgba(212,160,83,.75); z-index: 4; }
.panel-corner::before { width: 2px; height: 30px; } .panel-corner::after { width: 30px; height: 2px; }
.panel-grid { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: 1fr 220px; gap: 34px; align-items: center; }
.panel-grid.two-column { grid-template-columns: minmax(0,1fr) 250px; }
h1, h2 { margin: 0 0 24px; font-family: var(--display); color: var(--amber); font-weight: 400; text-transform: uppercase; letter-spacing: .15em; line-height: 1.05; text-shadow: 0 0 22px rgba(212,160,83,.38); }
h1 { font-size: clamp(3.5rem, 8vw, 7rem); }
h2 { font-size: clamp(2.7rem, 5.4vw, 5.2rem); }
.briefing-copy { max-width: 58ch; margin: 0 0 24px; color: var(--text); font-size: clamp(.95rem,1.1vw,1.1rem); line-height: 1.75; }
.brief-list { margin: 0 0 22px; }
.brief-list div { padding: 12px 0 12px 18px; border-left: 3px solid var(--amber); background: rgba(13,8,6,.28); margin-bottom: 10px; }
.brief-list dt { font-family: var(--title); color: var(--cyan); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(1.2rem,2.5vw,1.8rem); }
.brief-list dd { margin: 4px 0 0; line-height: 1.55; }
.metal-switch { padding: 14px 24px; background: linear-gradient(180deg, var(--brass-dark), var(--switch-dark)); border: 1px solid var(--brass); color: #c8b496; font-family: var(--title); font-weight: 600; text-transform: uppercase; letter-spacing: .13em; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(200,180,150,.2); transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.metal-switch:hover { box-shadow: 0 0 8px rgba(212,160,83,.4), 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(200,180,150,.28); transform: translateY(-2px); }
.metal-switch:active { transform: translateY(1px); background: linear-gradient(180deg, var(--switch-dark), var(--inset)); box-shadow: inset 0 3px 8px rgba(0,0,0,.72); }
.metal-switch.danger { color: #ffe2dc; border-color: var(--red); background: linear-gradient(180deg, #8b2d25, #3d1714); box-shadow: 0 0 14px rgba(232,58,48,.28), inset 0 1px 0 rgba(255,255,255,.16); }
.instrument-stack { display: grid; gap: 18px; justify-items: center; }
.round-gauge { position: relative; width: 154px; height: 154px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.14), transparent 18%), radial-gradient(circle, var(--space) 0 52%, var(--brass-dark) 53% 62%, var(--brass) 63% 68%, var(--inset) 69%); box-shadow: inset 0 0 18px #000, 0 10px 22px rgba(0,0,0,.45); font-family: var(--mono); }
.round-gauge span { position: absolute; width: 4px; height: 54px; bottom: 50%; left: calc(50% - 2px); background: var(--amber); transform-origin: 50% 100%; transform: rotate(var(--needle)); box-shadow: 0 0 8px var(--amber); }
.round-gauge::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; border-top: 2px solid rgba(255,255,255,.22); }
.round-gauge b { color: var(--green); font-size: 2rem; margin-top: 22px; font-weight: 400; }
.round-gauge em { position: absolute; bottom: 25px; font-style: normal; color: var(--cyan); font-size: .68rem; letter-spacing: .12em; }
.round-gauge.redline span { background: var(--red); box-shadow: 0 0 8px var(--red); }
.data-plate, .data-rack div { width: 100%; padding: 14px; border: 1px solid var(--brass); background: rgba(13,8,6,.5); box-shadow: inset 0 1px 8px #000; font-family: var(--mono); }
.data-plate small, .data-rack span { display: block; color: var(--brass); letter-spacing: .14em; margin-bottom: 6px; }
.data-plate strong, .data-rack b { color: var(--green); font-weight: 400; }
.meter { display: grid; grid-template-columns: 150px 1fr 48px; gap: 12px; align-items: center; margin: 18px 0; font-family: var(--mono); }
.meter label { color: var(--amber); font-size: .82rem; letter-spacing: .1em; }
.meter span { height: 16px; border: 1px solid var(--brass); background: var(--inset); box-shadow: inset 0 2px 8px #000; }
.meter em { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber)); box-shadow: 0 0 12px rgba(74,222,128,.38); }
.meter strong { color: var(--green); font-weight: 400; }
.data-rack { display: grid; gap: 18px; align-content: center; }
.colony-card { width: 100%; text-align: left; margin: 0 0 12px; padding: 16px 18px; border: 1px solid var(--cyan); background: rgba(58,124,165,.12); color: var(--text); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.colony-card:hover, .colony-card.selected { transform: translateX(8px); background: rgba(58,124,165,.26); box-shadow: 0 0 20px rgba(58,124,165,.32), inset 0 1px 0 rgba(255,255,255,.08); }
.colony-card b { display: block; font-family: var(--title); font-size: 1.35rem; color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; }
.colony-card span { line-height: 1.55; }
.sealed-note { padding: 16px; border: 1px solid var(--brass); color: var(--text); line-height: 1.6; background: rgba(13,8,6,.45); }
.countdown { margin: 26px 0; font-family: var(--display); color: var(--red); font-size: clamp(1.5rem,3vw,2.4rem); letter-spacing: .14em; text-shadow: 0 0 18px rgba(232,58,48,.45); }
.countdown strong { display: block; margin-top: 8px; font-family: var(--mono); color: var(--green); font-weight: 400; }
#glitch-overlay { z-index: 45; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(232,58,48,.16) 0 2px, transparent 2px 10px); mix-blend-mode: screen; }
#glitch-overlay.active { animation: glitch .4s steps(5,end); }
@keyframes glitch { 0%,100%{opacity:0; transform:translateX(0)} 20%{opacity:.75; transform:translateX(-5px)} 45%{opacity:.35; transform:translateX(4px)} 70%{opacity:.65; transform:translateX(-2px)} }
.launching #starfield { animation: stars-jump 2.6s ease-in forwards; }
.launching .active { animation: panel-launch 2.4s var(--mechanical) forwards; }
@keyframes stars-jump { to { filter: blur(5px) brightness(2.4); transform: scale(1.24); } }
@keyframes panel-launch { 55% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } to { transform: translate(-50%,-115%) scale(.12); opacity: 0; } }

@media (max-width: 900px) {
    .hud-panel { width: 86vw; height: 68vh; padding: 54px 26px 28px; }
    .panel-grid, .panel-grid.two-column { grid-template-columns: 1fr; overflow: auto; align-items: start; }
    .instrument-stack { grid-template-columns: repeat(2, minmax(120px,1fr)); }
    .readout-clock, .readout-status { left: 54px; }
    .readout-coordinates, .readout-gauges { right: 54px; }
    .meter { grid-template-columns: 1fr; gap: 6px; }
    #command-wheel { transform: scale(.82); }
    #command-wheel.hidden { transform: scale(.35); }
}