:root{color:#e5f3ff;--app-height:100vh;--page-gap:clamp(10px, 1.8vw, 22px);--panel-bg:#040c18b8;--panel-border:#7dd3fc33;--panel-shadow:0 18px 45px #0000004d;--hud-glow:#60d0ff2e;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#145c8f73,#0000 30%),linear-gradient(#02040b 0%,#050814 52%,#081022 100%);font-family:Trebuchet MS,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-height:var(--app-height);margin:0}body.touch-layout{touch-action:none;-webkit-touch-callout:none;overflow:hidden}body.touch-layout,body.touch-layout *{-webkit-touch-callout:none}button,input,textarea,select{font:inherit}#app{min-height:var(--app-height)}.shell{min-height:var(--app-height);width:100%;padding:var(--page-gap)}.stage{min-height:calc(var(--app-height) - var(--page-gap) * 2)}.eyebrow{text-transform:uppercase;letter-spacing:.28em;color:#7dd3fc;margin:0 0 6px;font-size:.72rem}h1{margin:0;font-size:clamp(2.1rem,3vw,3.4rem);line-height:.95}.hud{gap:18px;display:grid}.hud--cockpit{z-index:2;pointer-events:none;align-content:start;justify-items:center;padding:clamp(14px,2.2vw,26px);position:absolute;inset:0}.hud__panel{border:1px solid var(--panel-border);background:linear-gradient(180deg, #0e1b30c7, #030a14a3), radial-gradient(circle at top left, var(--hud-glow), transparent 55%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--panel-shadow);border-radius:22px}.hud__stats{grid-template-columns:repeat(3,minmax(0,1fr));align-self:start;gap:12px;width:min(960px,100%);display:grid}.stat{min-width:0;padding:14px 16px 16px}.stat strong{text-shadow:0 0 18px #7dd3fc2e;font-size:clamp(1.3rem,2vw,1.9rem);display:block}.stat__label{color:#8cb2d6;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;display:block}.stat__row{justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px;display:flex}.stat__hint{color:#93abc3;margin:0;font-size:.86rem}.meter{background:#80a4c929;border-radius:999px;height:10px;overflow:hidden;box-shadow:inset 0 0 0 1px #7dd3fc14}.meter__fill{border-radius:inherit;width:0;height:100%;transition:width .16s}.meter__fill--health{background:linear-gradient(90deg,#ff5d73,#ff9f68);box-shadow:0 0 18px #ff6d7066}.meter__fill--progress{background:linear-gradient(90deg,#60d0ff,#8cf6d0);box-shadow:0 0 18px #60d0ff5c}.viewport{min-height:calc(var(--app-height) - var(--page-gap) * 2);background:linear-gradient(#030712b8,#020308f0),radial-gradient(circle at top,#3b82f647,#0000 40%);border:1px solid #7dd3fc33;border-radius:26px;position:relative;overflow:hidden;box-shadow:0 24px 70px #00000073}#game{width:100%;height:100%;display:block}.overlay{z-index:3;text-align:center;pointer-events:none;background:linear-gradient(#02060f2e,#02060f94);border-radius:18px;place-content:center;gap:10px;transition:opacity .18s,visibility .18s;display:grid;position:absolute;inset:clamp(18px,2vw,26px)}.overlay--interactive{pointer-events:auto}.overlay--hidden{opacity:0;visibility:hidden}.overlay__kicker{text-transform:uppercase;letter-spacing:.2em;color:#8fe7ff;margin:0;font-size:.78rem}.overlay h2,.overlay p{margin:0}.overlay h2{font-size:clamp(2rem,5vw,4rem)}.overlay p:last-child{color:#b2cbe3}.overlay__actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;display:flex}.overlay__button{color:#ecf7ff;text-align:left;cursor:pointer;background:linear-gradient(#152b4ce6,#07101fe0),radial-gradient(circle at top,#5ccfff33,#0000 48%);border:1px solid #7dd3fc47;border-radius:16px;min-width:180px;padding:14px 18px;transition:transform .12s,border-color .12s,box-shadow .12s;box-shadow:0 16px 38px #00000047}.overlay__button strong,.overlay__button span{display:block}.overlay__button strong{margin-bottom:4px;font-size:1rem}.overlay__button span{color:#a9c3da;font-size:.9rem;line-height:1.35}.overlay__button:hover,.overlay__button:focus-visible{border-color:#8fe7ff85;outline:none;transform:translateY(-2px);box-shadow:0 22px 46px #00000057}.touch-controls{z-index:4;padding:clamp(16px, 4vw, 28px) clamp(18px, 5vw, 34px) calc(clamp(18px, 5vw, 34px) + env(safe-area-inset-bottom,0px));pointer-events:none;justify-content:space-between;align-items:end;display:flex;position:absolute;inset:0}.touch-controls__left,.touch-controls__right{align-items:end;width:50%;display:flex}.touch-controls__right{justify-content:end}.joystick,.shoot-button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.joystick{aspect-ratio:1;background:radial-gradient(circle at 32% 28%,#7ad3ff47,#0000 36%),radial-gradient(circle,#081327e0,#030812b3);border:1px solid #7dd3fc3d;border-radius:50%;width:clamp(112px,28vw,148px);position:relative;box-shadow:inset 0 0 0 1px #a4ddff1a,0 14px 36px #00000047}.joystick:after{content:"";border:1px dashed #8fe7ff29;border-radius:50%;position:absolute;inset:18%}.joystick__thumb{aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#fafefff2,#79d6ffe6 42%,#115894f2);border-radius:50%;width:40%;margin:-20%;transition:transform 80ms ease-out,box-shadow .12s;position:absolute;top:50%;left:50%;box-shadow:0 0 28px #60d0ff52,inset 0 2px 8px #ffffff47}.joystick[data-active=true] .joystick__thumb{box-shadow:0 0 34px #60d0ff7a,inset 0 2px 10px #ffffff57}.shoot-button{color:#fff5eb;letter-spacing:.1em;text-transform:uppercase;background:radial-gradient(circle at 35% 30%,#ffdebbf2,#ff834feb 45%,#9f1f0ef5);border:1px solid #ffb07859;border-radius:50%;min-width:clamp(92px,24vw,128px);min-height:clamp(92px,24vw,128px);font-size:1rem;font-weight:700;transition:transform 90ms,box-shadow .12s,filter .12s;box-shadow:0 0 30px #ff7a3257,inset 0 2px 12px #ffffff3d}.shoot-button[data-active=true]{filter:saturate(1.1);transform:scale(.94);box-shadow:0 0 38px #ff7a327a,inset 0 2px 16px #ffffff4d}body.touch-layout .hud--cockpit{padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px;justify-items:start}body.touch-layout .hud__stats{grid-template-columns:1fr;gap:6px;width:min(220px,100% - 20px)}body.touch-layout .hud__panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#030a146b;border-color:#7dd3fc24;border-radius:999px;box-shadow:0 10px 28px #00000038}body.touch-layout .stat{padding:4px}body.touch-layout .stat__row,body.touch-layout .stat__hint,body.touch-layout .stat:not(.stat--health):not(.stat--progress){display:none}body.touch-layout .meter{height:8px}@media (width<=980px){.shell{padding:10px}.hud--cockpit{gap:10px;padding:12px}.hud__stats{grid-template-columns:1fr;width:min(420px,100%)}.stage,.viewport{min-height:calc(var(--app-height) - 20px)}.overlay h2{font-size:clamp(1.5rem,8vw,2.4rem)}}@media (width<=640px){h1{font-size:clamp(1.7rem,8vw,2.3rem)}.overlay{padding:18px;inset:14px}.overlay__actions{flex-direction:column}.overlay__button{width:min(320px,100%);min-width:0}.touch-controls{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px))}}