:root {
  color-scheme: dark;
  --ve-bg: #000;
  --ve-text: #eaf8ff;
  --ve-muted: #7f9aaa;
  --ve-rgb: 86, 221, 246;
  --ve-line: rgba(150, 185, 220, .14);
  --ve-border: rgba(var(--ve-rgb), .28);
  --ve-glow: rgba(var(--ve-rgb), .12);
  --ve-font: ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #000; color: var(--ve-text); -webkit-tap-highlight-color: transparent; }
body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; }

.ve-root { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; display: grid; place-items: stretch; padding: 0; background: #000; overflow: hidden; }
.ve-stage { position: relative; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 42%, rgba(86,221,246,.08), transparent 34%), radial-gradient(circle at 72% 18%, rgba(151,91,255,.07), transparent 40%), #000; box-shadow: none; }
.ve-page-crt .ve-root { width: 100vw; height: 100vh; height: 100dvh; place-items: center; overflow: hidden; }
.ve-page-crt .ve-stage { width: min(100vw, 1920px, calc(100dvh * 16 / 9)); height: min(100dvh, 1080px, calc(100vw * 9 / 16)); aspect-ratio: 16 / 9; }
.ve-page-mobile { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.ve-page-mobile .ve-root { width: 100vw; height: 100vh; height: 100dvh; place-items: stretch; overflow: hidden; }
.ve-page-mobile .ve-stage { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; }
.ve-viewport, .ve-viewport canvas { display: block; width: 100%; height: 100%; min-height: 0; touch-action: none; cursor: crosshair; }
.ve-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 50% 50%, transparent 42%, rgba(5,0,18,.24) 72%, rgba(0,0,0,.68) 100%), linear-gradient(180deg, rgba(22,8,48,.08), transparent 22%, transparent 76%, rgba(0,0,0,.16)); }
.ve-vignette::before, .ve-vignette::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ve-vignette::before { background: radial-gradient(circle at 50% 42%, rgba(86,221,246,.075), transparent 38%), radial-gradient(circle at 76% 18%, rgba(151,91,255,.07), transparent 34%); mix-blend-mode: screen; opacity: .72; }
.ve-vignette::after { background-image: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.32) 100%); opacity: .42; }
.ve-crosshair { position: absolute; left: 50%; top: 50%; z-index: 4; width: 46px; height: 46px; transform: translate(-50%, -50%); pointer-events: none; opacity: .78; }
.ve-crosshair::before, .ve-crosshair::after, .ve-crosshair span::before, .ve-crosshair span::after { content: ''; position: absolute; background: rgba(216, 247, 255, .82); box-shadow: 0 0 8px rgba(var(--ve-rgb), .45); }
.ve-crosshair::before { left: 0; top: 22px; width: 14px; height: 1px; }
.ve-crosshair::after { right: 0; top: 22px; width: 14px; height: 1px; }
.ve-crosshair span::before { left: 22px; top: 0; width: 1px; height: 14px; }
.ve-crosshair span::after { left: 22px; bottom: 0; width: 1px; height: 14px; }
.ve-crosshair.locked { opacity: 1; filter: drop-shadow(0 0 10px rgba(86, 221, 246, .82)); }
.ve-crosshair.locked::before, .ve-crosshair.locked::after, .ve-crosshair.locked span::before, .ve-crosshair.locked span::after { background: #f7ffff; box-shadow: 0 0 10px rgba(86,221,246,.92); }
.ve-crosshair.utility:not(.danger) { filter: drop-shadow(0 0 12px rgba(42, 141, 255, .95)); }
.ve-crosshair.utility:not(.danger)::before, .ve-crosshair.utility:not(.danger)::after, .ve-crosshair.utility:not(.danger) span::before, .ve-crosshair.utility:not(.danger) span::after { background: #2f8dff; box-shadow: 0 0 11px rgba(42,141,255,.92); }
.ve-crosshair.danger { filter: drop-shadow(0 0 12px rgba(255, 24, 56, .95)); }
.ve-crosshair.danger::before, .ve-crosshair.danger::after, .ve-crosshair.danger span::before, .ve-crosshair.danger span::after { background: #ff3852; box-shadow: 0 0 11px rgba(255,24,56,.92); }
.ve-threat-indicator { position: absolute; z-index: 6; left: 50%; top: 50%; width: 92px; height: 36px; margin: -18px 0 0 -46px; display: none; align-items: center; justify-content: center; pointer-events: none; color: #ffdce2; font: 900 9px/1 var(--ve-font); letter-spacing: .08em; text-align: center; text-shadow: 0 0 7px rgba(255,24,56,.9); filter: drop-shadow(0 0 10px rgba(255,24,56,.8)); }
.ve-threat-indicator::before { content: ''; position: absolute; left: 50%; top: -13px; width: 0; height: 0; transform: translateX(-50%) rotate(var(--ve-threat-angle, 0deg)); transform-origin: 50% 31px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid #ff3852; }
.ve-threat-indicator.visible { display: none; }
.ve-threat-indicator span { min-width: 70px; padding: 4px 5px; border: 1px solid rgba(255,56,82,.7); border-radius: 4px; background: rgba(25,0,6,.74); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ve-damage-indicator { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ve-damage-indicator span { position: absolute; opacity: 0; will-change: opacity, transform; }
.ve-damage-indicator .left, .ve-damage-indicator .right { top: 0; bottom: 0; width: 44%; }
.ve-damage-indicator .left { left: 0; background: linear-gradient(90deg, rgba(255,0,28,.7), rgba(255,0,28,.34) 28%, transparent 100%); }
.ve-damage-indicator .right { right: 0; background: linear-gradient(270deg, rgba(255,0,28,.7), rgba(255,0,28,.34) 28%, transparent 100%); }
.ve-damage-indicator .top, .ve-damage-indicator .bottom { left: 0; right: 0; height: 38%; }
.ve-damage-indicator .top { top: 0; background: linear-gradient(180deg, rgba(255,0,28,.58), rgba(255,0,28,.25) 34%, transparent 100%); }
.ve-damage-indicator .bottom { bottom: 0; background: linear-gradient(0deg, rgba(255,0,28,.58), rgba(255,0,28,.25) 34%, transparent 100%); }
.ve-damage-indicator .top-left, .ve-damage-indicator .top-right, .ve-damage-indicator .bottom-left, .ve-damage-indicator .bottom-right { inset: 0; width: auto; height: auto; }
.ve-damage-indicator .top-left { background: radial-gradient(circle at 0% 0%, rgba(255,0,28,.84), rgba(255,0,28,.44) 19%, rgba(255,0,28,.18) 38%, transparent 68%); }
.ve-damage-indicator .top-right { background: radial-gradient(circle at 100% 0%, rgba(255,0,28,.84), rgba(255,0,28,.44) 19%, rgba(255,0,28,.18) 38%, transparent 68%); }
.ve-damage-indicator .bottom-left { background: radial-gradient(circle at 0% 100%, rgba(255,0,28,.84), rgba(255,0,28,.44) 19%, rgba(255,0,28,.18) 38%, transparent 68%); }
.ve-damage-indicator .bottom-right { background: radial-gradient(circle at 100% 100%, rgba(255,0,28,.84), rgba(255,0,28,.44) 19%, rgba(255,0,28,.18) 38%, transparent 68%); }
.ve-damage-indicator.hit-left .left, .ve-damage-indicator.hit-right .right, .ve-damage-indicator.hit-top .top, .ve-damage-indicator.hit-bottom .bottom, .ve-damage-indicator.hit-top-left .top-left, .ve-damage-indicator.hit-top-right .top-right, .ve-damage-indicator.hit-bottom-left .bottom-left, .ve-damage-indicator.hit-bottom-right .bottom-right { animation: veDamagePulse 620ms ease-out; }
.ve-shield-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 420ms ease; }
.ve-shield-overlay.active, .ve-shield-overlay.depleted, .ve-shield-overlay.charging { opacity: 1; }
.ve-shield-overlay::before, .ve-shield-overlay::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ve-shield-overlay::before { box-shadow: inset 0 0 18px 2px rgba(95,255,144,.17), inset 0 0 54px 7px rgba(42,255,126,.08), inset 0 0 108px 14px rgba(0,255,98,.04); }
.ve-shield-overlay::after { background: linear-gradient(90deg, rgba(76,255,132,.07), transparent 20%, transparent 80%, rgba(76,255,132,.07)), linear-gradient(180deg, rgba(76,255,132,.055), transparent 18%, transparent 82%, rgba(76,255,132,.055)); }
.ve-shield-overlay.active::before { opacity: .37; animation: veShieldBreathe 3200ms ease-in-out infinite; }
.ve-shield-overlay.active::after { opacity: .16; animation: veShieldBreathe 3200ms ease-in-out infinite reverse; }
.ve-shield-overlay.depleted::before, .ve-shield-overlay.depleted::after { animation: veShieldDeplete 700ms ease-out; }
.ve-shield-overlay.charging::before, .ve-shield-overlay.charging::after { animation: veShieldRecharge 900ms ease-out; }
.ve-jump-overlay { --ve-jump-charge: 0; position: absolute; inset: 0; z-index: 7; display: none; pointer-events: none; overflow: hidden; background: transparent; }
.ve-jump-overlay.charging, .ve-jump-overlay.hyperspace { display: block; }
.ve-jump-overlay::before, .ve-jump-overlay::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ve-jump-overlay.charging::before { box-shadow: inset 0 0 22px 4px rgba(226, 249, 255, .78), inset 0 0 72px 14px rgba(86, 221, 246, .5), inset 0 0 124px 22px rgba(151, 91, 255, .28); opacity: var(--ve-jump-charge); }
.ve-jump-overlay.charging::after { background: linear-gradient(90deg, rgba(86,221,246,.28), transparent 18%, transparent 82%, rgba(86,221,246,.28)), linear-gradient(180deg, rgba(226,249,255,.22), transparent 16%, transparent 84%, rgba(151,91,255,.24)); opacity: var(--ve-jump-charge); }
.ve-jump-overlay.hyperspace { animation: veHyperspaceFlash 980ms ease-out; background: rgba(246, 250, 255, .72); }
.ve-jump-overlay.hyperspace::before { box-shadow: inset 0 0 34px 8px rgba(255,255,255,.96), inset 0 0 110px 18px rgba(151,91,255,.58); opacity: 1; animation: veHyperspaceEdge 980ms ease-out; }
.ve-jump-overlay.hyperspace::after { background: linear-gradient(180deg, rgba(255,255,255,.94), transparent 38%, transparent 62%, rgba(198,228,255,.72)); opacity: .82; animation: veHyperspaceEdge 980ms ease-out; }
.ve-jump-overlay span { display: none; }
.ve-menu-active .ve-crosshair, .ve-menu-active .ve-threat-indicator, .ve-menu-active .ve-damage-indicator, .ve-menu-active .ve-shield-overlay, .ve-menu-active .ve-jump-overlay, .ve-menu-active .ve-laser, .ve-menu-active .ve-touch-controls { display: none !important; }
.ve-hud { position: absolute; left: 8px; right: 8px; z-index: 5; display: none !important; gap: 6px; pointer-events: none; }
.ve-hud.top { top: 8px; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.18fr) minmax(0, 1.12fr); align-items: flex-start; }
.ve-hud.bottom { bottom: 8px; flex-direction: column; align-items: stretch; }
.ve-panel { border: 1px solid rgba(var(--ve-rgb), .24); border-radius: 10px; background: rgba(7,10,15,.66); color: #dff4ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--ve-font); }
.ve-title { min-width: 142px; padding: 7px 9px; display: grid; gap: 4px; }
.ve-title strong { font: 900 13px/1 var(--ve-font); letter-spacing: .08em; text-transform: uppercase; }
.ve-title span { color: var(--ve-muted); font: 800 10px/1 var(--ve-font); letter-spacing: .06em; }
.ve-readout { min-width: 150px; justify-self: end; padding: 7px 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; color: var(--ve-muted); font: 800 10px/1 var(--ve-font); letter-spacing: .06em; }
.ve-readout strong { color: var(--ve-text); font-weight: 900; }
.ve-readout span:last-child { grid-column: 1 / -1; }
.ve-target { justify-self: center; width: 100%; min-height: 28px; padding: 8px 9px; color: #bfe8ff; font: 800 11px/1.18 var(--ve-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-target.locked { color: #efffff; border-color: rgba(86,221,246,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(86,221,246,.14); }
.ve-target.utility:not(.danger) { color: #d8ebff; border-color: rgba(42,141,255,.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(42,141,255,.22); }
.ve-target.danger { color: #ffdce2; border-color: rgba(255,24,56,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(255,24,56,.18); }
.ve-aura { min-height: 44px; padding: 8px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.ve-aura strong { color: #56ddf6; font: 900 11px/1.25 var(--ve-font); letter-spacing: .1em; }
.ve-aura span { min-width: 0; color: var(--ve-text); font: 12px/1.25 var(--ve-font); overflow-wrap: anywhere; }
.ve-status { display: none; }
.ve-laser { position: absolute; z-index: 4; left: 50%; top: 50%; bottom: 0; width: 72px; transform: translateX(-50%); pointer-events: none; opacity: 0; filter: drop-shadow(0 0 10px rgba(255, 0, 0, .8)); }
.ve-laser::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 72px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,40,40,.95), rgba(255,0,0,.78) 18%, rgba(255,0,0,.62) 68%, rgba(255,0,0,.62) 100%); clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); }
.ve-laser span { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: linear-gradient(180deg, #fff, #ff2a2a 16%, #b00000 72%, #b00000 100%); box-shadow: 0 0 6px rgba(255,255,255,.8), 0 0 20px rgba(255,0,0,.9); }
.ve-laser.active { animation: veLaserPulse 140ms ease-out; }
.ve-touch-controls { position: absolute; inset: 0; z-index: 9; display: none; pointer-events: none; font-family: var(--ve-font); }
.ve-page-mobile .ve-touch-controls { display: block; }
.ve-page-mobile .ve-touch-controls.gamepad-active { display: none; }
.ve-touch-controls.editing { pointer-events: auto; }
.ve-touch-controls.editing::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(86,221,246,.16) 1px, transparent 1px), linear-gradient(180deg, rgba(86,221,246,.16) 1px, transparent 1px); background-size: calc(100% / 24) 100%, 100% calc(100% / 12); box-shadow: inset 0 0 0 1px rgba(86,221,246,.18), inset 0 0 42px rgba(86,221,246,.08); }
.ve-touch-control { position: absolute; z-index: 1; pointer-events: auto; touch-action: none; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.ve-touch-stick { left: clamp(104px, 19vmin, 152px); top: calc(100% - clamp(104px, 21vmin, 154px)); width: clamp(150px, 34vmin, 220px); height: clamp(150px, 34vmin, 220px); border: 1px solid rgba(86,221,246,.36); border-radius: 999px; background: radial-gradient(circle at 50% 50%, rgba(86,221,246,.12), rgba(86,221,246,.045) 48%, rgba(0,0,0,.34)); box-shadow: inset 0 0 26px rgba(86,221,246,.1), 0 0 18px rgba(0,0,0,.32); }
.ve-touch-stick::before, .ve-touch-stick::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(216,247,255,.38); transform: translate(-50%, -50%); }
.ve-touch-stick::before { width: 62%; height: 1px; }
.ve-touch-stick::after { width: 1px; height: 62%; }
.ve-touch-stick span { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; border-radius: 999px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(244,253,255,.58), rgba(86,221,246,.2)); border: 1px solid rgba(226,249,255,.58); box-shadow: 0 0 18px rgba(86,221,246,.28); }
.ve-touch-button { width: clamp(54px, 12vmin, 78px); height: clamp(54px, 12vmin, 78px); display: grid; place-items: center; padding: 0; border: 1px solid rgba(86,221,246,.34); border-radius: 20px; background: rgba(3,12,22,.48); color: #eaffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(0,0,0,.3); font: inherit; text-shadow: 0 0 9px rgba(86,221,246,.54); }
.ve-touch-button svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(86,221,246,.62)); }
.ve-touch-button.pressed { border-color: rgba(244,253,255,.78); background: rgba(86,221,246,.2); box-shadow: inset 0 0 18px rgba(86,221,246,.18), 0 0 22px rgba(86,221,246,.2); }
.ve-touch-thrust { left: calc(100% - clamp(70px, 14vmin, 104px)); top: calc(100% - clamp(70px, 16vmin, 108px)); }
.ve-touch-brake { left: calc(100% - clamp(150px, 29vmin, 196px)); top: calc(100% - clamp(70px, 16vmin, 108px)); }
.ve-touch-laser { left: calc(100% - clamp(70px, 14vmin, 104px)); top: calc(100% - clamp(150px, 31vmin, 196px)); }
.ve-touch-scan { left: calc(100% - clamp(150px, 29vmin, 196px)); top: calc(100% - clamp(150px, 31vmin, 196px)); }
.ve-touch-pause { left: calc(100% - clamp(70px, 14vmin, 104px)); top: clamp(66px, 14vmin, 96px); }
.ve-touch-controls.editing .ve-touch-control { outline: 1px dashed rgba(226,249,255,.64); outline-offset: 5px; }
.ve-touch-control.dragging { border-color: rgba(244,253,255,.9); box-shadow: inset 0 0 18px rgba(86,221,246,.2), 0 0 26px rgba(86,221,246,.32); }
.ve-touch-layout-reset { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 2; display: none; transform: translateX(-50%); pointer-events: auto; touch-action: none; padding: 8px 11px; border: 1px solid rgba(226,249,255,.48); border-radius: 999px; background: rgba(3,12,22,.72); color: #eaffff; font: 900 10px/1 var(--ve-font); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 18px rgba(0,0,0,.34); }
.ve-touch-controls.editing .ve-touch-layout-reset { display: block; }
.ve-stage.danger { border-color: transparent; box-shadow: none; }
.ve-startup-overlay, .ve-sound-overlay, .ve-hints-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 260ms ease; background: radial-gradient(circle at 50% 44%, rgba(12, 34, 78, .3), rgba(8, 0, 24, .4) 44%, rgba(0,0,0,.66) 100%); color: #f4fdff; font-family: var(--ve-font); text-align: center; letter-spacing: .08em; text-shadow: 0 0 14px rgba(86,221,246,.86); }
.ve-startup-overlay.visible, .ve-sound-overlay.visible, .ve-hints-overlay.visible { opacity: 1; pointer-events: auto; }
.ve-sound-overlay.visible, .ve-hints-overlay.visible { z-index: 10; }
.ve-startup-overlay div, .ve-sound-overlay div, .ve-hints-overlay div { width: min(500px, calc(100% - 34px)); display: grid; gap: 10px; padding: 18px 22px; border: 1px solid rgba(86,221,246,.58); background: rgba(2,10,20,.72); box-shadow: inset 0 0 22px rgba(86,221,246,.14), 0 0 32px rgba(86,221,246,.2); }
.ve-sound-overlay { padding: 10px; box-sizing: border-box; touch-action: auto; }
.ve-sound-overlay div { max-height: calc(100dvh - 20px); gap: 8px; padding: 14px 16px; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(86,221,246,.82) rgba(86,221,246,.12); box-sizing: border-box; touch-action: auto; }
.ve-sound-overlay div::-webkit-scrollbar { width: 12px; }
.ve-sound-overlay div::-webkit-scrollbar-track { background: rgba(86,221,246,.12); border-left: 1px solid rgba(86,221,246,.22); }
.ve-sound-overlay div::-webkit-scrollbar-thumb { border: 2px solid rgba(2,10,20,.78); border-radius: 999px; background: linear-gradient(180deg, rgba(226,249,255,.94), rgba(86,221,246,.72)); box-shadow: 0 0 10px rgba(86,221,246,.48); }
.ve-sound-overlay div::-webkit-scrollbar-corner { background: transparent; }
.ve-startup-overlay strong, .ve-sound-overlay strong, .ve-hints-overlay strong { font: 900 20px/1 var(--ve-font); text-transform: uppercase; }
.ve-startup-overlay span, .ve-sound-overlay span { color: #dffaff; font: 900 10px/1.2 var(--ve-font); }
.ve-hints-overlay p { margin: 0; color: #dffaff; font: 800 11px/1.35 var(--ve-font); letter-spacing: .04em; text-align: left; }
.ve-sound-overlay label { display: grid; grid-template-columns: 82px minmax(0, 1fr) 58px; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid rgba(86,221,246,.2); border-radius: 9px; background: rgba(86,221,246,.055); touch-action: manipulation; }
.ve-sound-overlay label em { color: #e9fbff; font: 900 11px/1 var(--ve-font); font-style: normal; text-align: left; text-transform: uppercase; }
.ve-sound-overlay label b { color: #dffaff; font: 900 10px/1 var(--ve-font); text-align: right; }
.ve-sound-overlay input[type="range"] { width: 100%; min-height: 30px; accent-color: #56ddf6; touch-action: pan-x; }
.ve-sound-overlay input[type="range"].selected { filter: drop-shadow(0 0 10px rgba(86,221,246,.72)); outline: 1px solid rgba(244,253,255,.48); outline-offset: 5px; }
.ve-failure-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 380ms ease; background: radial-gradient(circle at 50% 48%, rgba(60,0,12,.54), rgba(0,0,0,.18) 46%, rgba(0,0,0,.72) 100%); color: #ffecef; font-family: var(--ve-font); text-align: center; letter-spacing: .12em; text-shadow: 0 0 14px rgba(255,24,56,.76); }
.ve-failure-overlay.visible { opacity: 1; pointer-events: auto; }
.ve-failure-overlay div { display: grid; gap: 10px; padding: 18px 22px; border: 1px solid rgba(255,56,82,.5); background: rgba(12,0,5,.62); box-shadow: inset 0 0 18px rgba(255,56,82,.12), 0 0 28px rgba(255,0,28,.22); }
.ve-failure-overlay strong { font: 900 18px/1 var(--ve-font); }
.ve-failure-overlay span[data-ve-failure-prompt] { color: #ffd0d8; font: 900 10px/1.2 var(--ve-font); }
.ve-failure-overlay.ready span[data-ve-failure-prompt] { animation: veFailurePrompt 1050ms ease-in-out infinite; color: #ffffff; }
.ve-failure-summary { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; margin: 2px 0 4px; padding: 10px 12px; border: 1px solid rgba(255,56,82,.24); background: rgba(255,56,82,.055); color: #ffecef; text-align: left; }
.ve-failure-summary[hidden] { display: none; }
.ve-failure-summary dt, .ve-failure-summary dd { margin: 0; font: 900 9px/1.2 var(--ve-font); letter-spacing: .1em; text-transform: uppercase; }
.ve-failure-summary dt { color: #ff9bab; }
.ve-failure-summary dd { color: #fff4f6; text-align: right; }
.ve-pause-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 240ms ease; background: radial-gradient(circle at 50% 45%, rgba(86,221,246,.2), rgba(17,6,44,.34) 42%, rgba(0,0,0,.82) 100%); color: #f4fdff; font-family: var(--ve-font); text-align: center; letter-spacing: .08em; text-shadow: 0 0 14px rgba(86,221,246,.86); }
.ve-pause-overlay.visible { opacity: 1; pointer-events: auto; }
.ve-pause-overlay div { width: min(420px, calc(100% - 34px)); display: grid; gap: 10px; padding: 18px 22px; border: 1px solid rgba(86,221,246,.58); background: rgba(2,10,20,.72); box-shadow: inset 0 0 22px rgba(86,221,246,.14), 0 0 32px rgba(86,221,246,.2); }
.ve-pause-overlay strong { font: 900 18px/1 var(--ve-font); }
.ve-pause-overlay span { color: #dffaff; font: 900 10px/1.2 var(--ve-font); }
.ve-startup-overlay button, .ve-sound-overlay button, .ve-hints-overlay button, .ve-pause-overlay button, .ve-failure-overlay button, .ve-victory-overlay button { width: 100%; padding: 10px 12px; border: 1px solid rgba(86,221,246,.34); border-radius: 9px; background: rgba(86,221,246,.08); color: #e9fbff; font: 900 11px/1 var(--ve-font); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 10px rgba(86,221,246,.62); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ve-failure-overlay button { border-color: rgba(255,56,82,.42); background: rgba(255,56,82,.08); color: #ffecef; text-shadow: 0 0 10px rgba(255,24,56,.62); }
.ve-startup-overlay button:active, .ve-sound-overlay button:active, .ve-hints-overlay button:active, .ve-pause-overlay button:active, .ve-failure-overlay button:active, .ve-victory-overlay button:active, .ve-startup-overlay button.selected, .ve-sound-overlay button.selected, .ve-hints-overlay button.selected, .ve-pause-overlay button.selected, .ve-failure-overlay button.selected, .ve-victory-overlay button.selected { border-color: rgba(244,253,255,.86); background: rgba(86,221,246,.22); color: #ffffff; box-shadow: inset 0 0 18px rgba(86,221,246,.18), 0 0 24px rgba(86,221,246,.28); outline: 1px solid rgba(244,253,255,.48); outline-offset: 3px; }
.ve-failure-overlay button.selected { background: rgba(255,56,82,.2); box-shadow: inset 0 0 18px rgba(255,56,82,.16), 0 0 24px rgba(255,24,56,.28); }
.ve-startup-overlay button:disabled, .ve-sound-overlay button:disabled, .ve-hints-overlay button:disabled, .ve-pause-overlay button:disabled, .ve-failure-overlay button:disabled, .ve-victory-overlay button:disabled { opacity: .42; color: #7f9aaa; border-color: rgba(127,154,170,.18); background: rgba(127,154,170,.045); box-shadow: none; outline: 0; }
.ve-victory-overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 12px; box-sizing: border-box; pointer-events: none; opacity: 0; transition: opacity 380ms ease; background: radial-gradient(circle at 50% 45%, rgba(86,221,246,.24), rgba(17,6,44,.38) 42%, rgba(0,0,0,.82) 100%); color: #f4fdff; font-family: var(--ve-font); text-align: center; letter-spacing: .08em; text-shadow: 0 0 14px rgba(86,221,246,.86); touch-action: auto; }
.ve-victory-overlay.visible { opacity: 1; pointer-events: auto; }
.ve-victory-overlay div { width: min(620px, 100%); max-height: calc(100dvh - 24px); min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 8px; padding: 14px 16px; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(86,221,246,.58); background: rgba(2,10,20,.72); box-shadow: inset 0 0 22px rgba(86,221,246,.14), 0 0 32px rgba(86,221,246,.2); }
.ve-victory-overlay strong { font: 900 18px/1 var(--ve-font); }
.ve-victory-overlay span { color: #dffaff; font: 900 10px/1.2 var(--ve-font); }
.ve-victory-overlay em { color: #9fd8ff; font: 800 10px/1.3 var(--ve-font); font-style: normal; }
.ve-victory-overlay ol { margin: 2px 0; padding: 2px 8px 2px 4px; min-height: 0; height: 100%; max-height: none; display: grid; align-content: start; gap: 6px; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(86,221,246,.82) rgba(86,221,246,.12); scroll-padding: 8px; list-style: none; text-align: left; box-sizing: border-box; touch-action: auto; }
.ve-victory-overlay ol::-webkit-scrollbar { width: 12px; }
.ve-victory-overlay ol::-webkit-scrollbar-track { background: rgba(86,221,246,.12); border-left: 1px solid rgba(86,221,246,.22); }
.ve-victory-overlay ol::-webkit-scrollbar-thumb { border: 2px solid rgba(2,10,20,.78); border-radius: 999px; background: linear-gradient(180deg, rgba(226,249,255,.94), rgba(86,221,246,.72)); box-shadow: 0 0 10px rgba(86,221,246,.48); }
.ve-victory-overlay ol::-webkit-scrollbar-corner { background: transparent; }
.ve-victory-overlay li { padding: 0; color: #e9fbff; font: 800 10px/1.28 var(--ve-font); }
.ve-victory-overlay li.disabled { color: #7f9aaa; text-decoration: line-through; }
.ve-victory-overlay button { display: grid; gap: 4px; align-items: start; text-align: left; line-height: 1.18; letter-spacing: .06em; text-transform: none; }
.ve-victory-overlay button strong { font: 900 11px/1.08 var(--ve-font); letter-spacing: .1em; text-transform: uppercase; }
.ve-victory-overlay button span { color: inherit; font: 800 10px/1.26 var(--ve-font); }
.ve-victory-overlay.ready [data-ve-victory-prompt] { animation: veFailurePrompt 1050ms ease-in-out infinite; color: #ffffff; }

@keyframes veLaserPulse {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.4); }
  18% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(.72); }
}

@keyframes veDamagePulse {
  0% { opacity: 0; transform: scale(1); }
  12% { opacity: 1; transform: scale(1.02); }
  44% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes veShieldBreathe {
  0%, 100% { opacity: .13; }
  50% { opacity: .36; }
}

@keyframes veShieldDeplete {
  0% { opacity: .45; filter: brightness(1.8); }
  24% { opacity: .275; filter: brightness(1.25); }
  100% { opacity: 0; filter: brightness(.7); }
}

@keyframes veShieldRecharge {
  0% { opacity: 0; filter: brightness(.8); }
  35% { opacity: .45; filter: brightness(1.65); }
  100% { opacity: .19; filter: brightness(1); }
}

@keyframes veFailurePrompt {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}

@keyframes veHyperspaceFlash {
  0% { opacity: 0; filter: brightness(1); }
  12% { opacity: .92; filter: brightness(2.4); }
  46% { opacity: .34; filter: brightness(1.55); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes veHyperspaceEdge {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 520px) {
  .ve-hud.top { align-items: stretch; }
  .ve-title { min-width: 0; }
  .ve-readout { min-width: 124px; gap: 3px 5px; font-size: 9px; }
  .ve-aura { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}