* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; overflow:hidden; }
canvas { display:block; }
#hud { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; font-family:'Share Tech Mono', monospace; }
.panel { position:absolute; border:1px solid rgba(0,255,180,.25); background:rgba(0,8,20,.82); backdrop-filter:blur(6px); padding:14px 18px; color:#b0ffe8; }
.panel-tl { top:22px; left:22px; width:230px; }
.panel-tr { top:22px; right:22px; width:220px; text-align:right; }
.panel-bl { bottom:22px; left:22px; width:230px; }
.label { font-size:9px; letter-spacing:.2em; color:#00ffc8; opacity:.6; margin-bottom:3px; text-transform:uppercase; }
.value { font-size:15px; color:#fff; line-height:1.5; }
.value.big { font-family:'Orbitron',sans-serif; font-size:13px; color:#00ffc8; }
.sep { border:none; border-top:1px solid rgba(0,255,180,.18); margin:10px 0; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#00ffc8; box-shadow:0 0 8px #00ffc8; margin-right:6px; animation:blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.crew-name { font-size:11px; color:#cde; padding:2px 0; }
.hint { font-size:9px; color:rgba(0,255,180,.35); letter-spacing:.15em; text-align:center; margin-top:8px; }
#title { position:absolute; top:22px; left:50%; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:.35em; color:#00ffc8; text-shadow:0 0 20px #00ffc8aa; white-space:nowrap; }
#scanline { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:20; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px); }