@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap";*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{color:#dce5ee;background-color:#0b1218;width:100%;height:100%;font-family:JetBrains Mono,monospace;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}canvas#webgl-canvas{width:100%;height:100%;display:block}.vignette-overlay{pointer-events:none;z-index:2;background:radial-gradient(circle,#0000 60%,#0a121973 100%);width:100%;height:100%;position:absolute;top:0;left:0}.hud-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:24px 32px;display:flex;position:absolute;top:0;left:0}.top-row{justify-content:space-between;align-items:flex-start;width:100%;display:flex}.brand-container{flex-direction:column;gap:3px;display:flex}.coord-tag{letter-spacing:.16em;color:#92a4b5;text-transform:uppercase;align-items:center;gap:7px;font-size:10px;display:flex}.coord-dot{background-color:#e5a93b;border-radius:50%;width:6px;height:6px;animation:2.4s ease-in-out infinite pulse-dot;box-shadow:0 0 8px #e5a93b}@keyframes pulse-dot{0%,to{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}.brand-title{letter-spacing:.2em;color:#f2f7fc;text-shadow:0 2px 14px #0a141e73;margin-top:2px;font-family:Cinzel,serif;font-size:38px;font-weight:700}.brand-subtitle{letter-spacing:.24em;color:#8397a8;text-transform:uppercase;font-size:10.5px;font-weight:500}.telemetry-container{text-align:right;letter-spacing:.12em;color:#8c9ea8;text-transform:uppercase;border-right:1px solid #8ca5be52;flex-direction:column;align-items:flex-end;gap:3px;padding-right:14px;font-size:11px;display:flex}.telemetry-row{align-items:center;gap:6px;display:flex}.telemetry-value{color:#e4edf5;font-weight:700}.accent-live{color:#e8a838;font-weight:700}.sound-toggle-btn{pointer-events:auto;color:#c0d2e2;letter-spacing:.1em;cursor:pointer;background:#141e2899;border:1px solid #8ca5be59;border-radius:3px;margin-top:5px;padding:4px 9px;font-family:JetBrains Mono,monospace;font-size:9.5px;transition:all .2s}.sound-toggle-btn:hover{color:#fff;background:#233446d9;border-color:#c8e1fab3}.bottom-row{justify-content:space-between;align-items:flex-end;width:100%;display:flex}.bottom-left-panel{flex-direction:column;gap:7px;display:flex}.input-hints{letter-spacing:.16em;color:#91a5b9bf;text-transform:uppercase;font-size:9px}.tab-group{pointer-events:auto;-webkit-backdrop-filter:blur(8px);background:#121c26bf;border:1px solid #7d96af47;border-radius:2px;gap:0;display:flex;overflow:hidden}.tab-btn{color:#a8bfd3;letter-spacing:.08em;cursor:pointer;background:0 0;border:none;border-right:1px solid #7d96af2e;padding:7px 16px;font-family:JetBrains Mono,monospace;font-size:11px;transition:all .15s}.tab-btn:last-child{border-right:none}.tab-btn:hover{color:#fff;background:#243444a6}.tab-btn.active{color:#f7ecd6;background:#2e4052eb;box-shadow:inset 0 0 10px #00000040}.bottom-right-panel{flex-direction:column;align-items:flex-end;gap:7px;display:flex}.tactical-wrapper{flex-direction:column;align-items:flex-end;gap:3px;display:flex}#tactical-canvas{background:0 0;border:none;width:170px;height:115px}.tactical-label{letter-spacing:.18em;color:#91a5b9bf;text-transform:uppercase;font-size:9px}.action-group{pointer-events:auto;-webkit-backdrop-filter:blur(8px);background:#121c26bf;border:1px solid #7d96af47;border-radius:2px;gap:0;display:flex;overflow:hidden}.action-btn{color:#a8bfd3;letter-spacing:.08em;cursor:pointer;background:0 0;border:none;border-right:1px solid #7d96af2e;align-items:center;gap:6px;padding:7px 15px;font-family:JetBrains Mono,monospace;font-size:11px;transition:all .15s;display:flex}.action-btn:last-child{border-right:none}.action-btn:hover{color:#fff;background:#243444a6}.action-btn.active{color:#ffd88a;background:#442e1ae0;box-shadow:inset 0 0 10px #00000040}.action-btn .key{opacity:.65;border:1px solid #8ca0b459;border-radius:2px;padding:1px 3px;font-size:8.5px}@media (width<=900px){.brand-title{font-size:26px}.hud-overlay{padding:14px 16px}.tab-btn,.action-btn{padding:5px 10px;font-size:10px}#tactical-canvas{width:120px;height:80px}}