@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;600;800&display=swap');
:root{--cyan:#64e8ff;--gold:#ffc55c;--red:#ff4f48;--ink:#07131f}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#071019;color:#eaf8ff;font-family:"Noto Sans SC",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 70% 30%,#18344e 0,transparent 38%),linear-gradient(115deg,#060d13,#0b1b29 55%,#071019);z-index:-2}
body:after{content:"";position:fixed;inset:0;opacity:.08;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 75%);z-index:-1}
.shell{min-height:100vh;display:grid;grid-template-columns:minmax(280px,420px) minmax(360px,540px);gap:clamp(28px,6vw,92px);align-items:center;justify-content:center;padding:32px}
.brief{max-width:420px}.eyebrow{font:700 12px/1 "Barlow Condensed";letter-spacing:.28em;color:var(--cyan);border-left:28px solid var(--cyan);padding-left:12px}
h1{font:800 clamp(54px,7vw,94px)/.83 "Barlow Condensed","Noto Sans SC";letter-spacing:-.055em;margin:24px 0;color:#fff;text-shadow:0 5px 32px #000}h1 span{color:transparent;-webkit-text-stroke:1px rgba(232,249,255,.65)}
.brief>p{max-width:350px;color:#9cb1c2;line-height:1.8;font-size:14px}.intel{border-top:1px solid #284153;margin-top:28px}.intel div{display:grid;grid-template-columns:70px 1fr;padding:13px 0;border-bottom:1px solid #1c3343;font-size:13px}.intel b{color:#5c778a}.intel span{color:#dcebf3}.controls{margin-top:22px;font-size:11px;color:#637f92;letter-spacing:.05em}.controls kbd{padding:3px 7px;border:1px solid #34566c;border-radius:3px;color:#abd9eb;background:#102635}
.cabinet{width:min(540px,100%);filter:drop-shadow(0 30px 60px #000b)}.topline,footer{display:flex;justify-content:space-between;align-items:center;font:600 10px "Barlow Condensed";letter-spacing:.12em;color:#7794a7;padding:10px 2px}.signal{color:#5fd8b0}.signal::first-letter{animation:pulse 1s infinite}
.game-wrap{position:relative;aspect-ratio:3/5;overflow:hidden;background:#0e2636;border:1px solid #426477;box-shadow:inset 0 0 0 5px #09151e,0 0 0 1px #0c2637;border-radius:4px;touch-action:none;user-select:none}
canvas{display:block;width:100%;height:100%;background:#173b4a}.vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 100px #00121bd9;background:linear-gradient(90deg,#0005,transparent 12%,transparent 88%,#0005),linear-gradient(transparent 80%,#020b10a0)}
.hud{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:14px 15px;background:linear-gradient(#06131cd9,transparent);pointer-events:none}.pilot{display:flex;gap:8px;align-items:center}.rank{display:grid;place-items:center;width:29px;height:29px;border:1px solid #6f98a8;background:#132e3c;font:800 12px "Barlow Condensed";color:var(--cyan)}small{font:600 9px "Barlow Condensed";letter-spacing:.13em;text-transform:uppercase;color:#8da9b7}.bar{height:5px;background:#ffffff25;width:92px;margin-top:3px;transform:skewX(-18deg);overflow:hidden}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5be6a2,#b4ffba);transition:width .2s}.score{text-align:center;font:700 24px "Barlow Condensed";letter-spacing:.08em}.score small{display:block;color:var(--gold)}.progress{text-align:right}.progress .bar{margin-left:auto}.progress i{background:var(--cyan);width:0}
.mission-hud{position:absolute;left:12px;top:66px;display:flex;gap:6px;pointer-events:none}.mission-hud div{width:47px;padding:5px;text-align:center;border:1px solid #ffffff26;background:#051019a8;backdrop-filter:blur(4px)}.mission-hud .icon{display:block;color:var(--gold);font-size:12px}.mission-hud b{display:block;font:700 14px "Barlow Condensed"}.mission-hud small{font-size:7px;display:block}
.mission-hud div:last-child{width:62px}
.camera-controls{position:absolute;right:12px;top:67px;z-index:4;display:flex;background:#051019b8;border:1px solid #ffffff24;backdrop-filter:blur(4px)}.camera-controls button{border:0;border-right:1px solid #ffffff1c;padding:7px 8px;background:transparent;color:#7893a3;font:700 8px "Noto Sans SC";cursor:pointer}.camera-controls button:last-child{border-right:0}.camera-controls button.selected{background:#51dbef26;color:#83efff;box-shadow:inset 0 -2px #54dff2}
.boss-ui{position:absolute;top:67px;left:50%;width:62%;transform:translateX(-50%) translateY(-40px);opacity:0;transition:.4s;text-align:center;background:#06131ddd;padding:6px 10px;border:1px solid #7b3634}.boss-ui.show{opacity:1;transform:translateX(-50%) translateY(0)}.boss-ui span{font:700 10px "Barlow Condensed";letter-spacing:.14em;color:#ff9c89}.boss-ui .bar{width:100%;height:7px}.boss-ui i{background:linear-gradient(90deg,#f33942,#ff9d5a)}
.specials{position:absolute;right:13px;bottom:13px;display:flex;gap:9px}.specials button{width:57px;height:57px;border-radius:50%;border:1px solid #86dcef66;color:white;background:radial-gradient(circle at 35% 30%,#2a5e75,#081a25 70%);box-shadow:0 4px 13px #000a,inset 0 0 0 3px #05131b;position:relative}.specials button:active{transform:scale(.92)}.specials span{display:block;font-size:19px;color:var(--cyan)}.specials b{position:absolute;right:1px;top:0;background:var(--gold);color:#18202a;width:18px;height:18px;border-radius:50%;font:800 11px/18px "Barlow Condensed"}.specials small{display:block;font-size:7px}
.toast{position:absolute;top:22%;left:50%;transform:translate(-50%,-15px);opacity:0;text-align:center;font:800 25px "Barlow Condensed";letter-spacing:.12em;color:white;text-shadow:0 2px 10px #000;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.toast:after{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);margin-top:5px}
.overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px;text-align:center;background:radial-gradient(circle at 50% 38%,#16415fc7,#040d14f2 72%);opacity:0;pointer-events:none;transition:.5s}.overlay.active{opacity:1;pointer-events:auto}.mission-no{font:800 11px "Barlow Condensed";letter-spacing:.32em;color:var(--cyan);border:1px solid #4cdcf166;padding:5px 12px}.overlay h2{font:800 48px/1 "Noto Sans SC";margin:18px 0 10px;text-shadow:0 5px 22px #000}.overlay p{max-width:310px;color:#a8bcc8;font-size:13px;line-height:1.7}.overlay button{margin:22px 0 13px;padding:14px 30px;border:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:linear-gradient(90deg,#27c4df,#70ecff);color:#05202b;font:800 14px "Noto Sans SC";letter-spacing:.1em;cursor:pointer;box-shadow:0 8px 30px #21cce748}.overlay button span{margin-left:16px}.overlay>small{color:#698592}.result{background:radial-gradient(circle,#173a50ee,#03090df8)}.stars{font-size:36px;color:var(--gold);letter-spacing:.2em;text-shadow:0 0 15px #ffb52d}.result-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#7891a435;margin-top:22px}.result-grid div{background:#081722;padding:12px 3px}.result-grid b{display:block;font:700 18px "Barlow Condensed";margin-top:4px}
footer button{border:0;background:none;color:#7f9aaa;font:600 10px "Noto Sans SC";cursor:pointer}
.stage-select{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:16px}.stage-select button{margin:0;padding:9px 10px;clip-path:none;box-shadow:none;border:1px solid #496879;background:#0a1b27;color:#8ca6b5;display:flex;align-items:center;gap:8px;text-align:left}.stage-select button.selected{border-color:var(--cyan);background:#133546;color:white;box-shadow:0 0 16px #32dff126}.stage-select b{font:800 17px "Barlow Condensed";color:var(--cyan)}.stage-select span{font-size:10px;margin:0}.result-actions{display:flex;gap:8px}.result-actions button{padding:12px 16px;margin:20px 0 8px}.result-actions button+button{background:linear-gradient(90deg,#f6ad45,#ffd477)}.overlay .back-button{margin:2px 0;padding:8px 14px;clip-path:none;background:transparent;border:1px solid #496879;color:#91aeba;box-shadow:none;font-size:10px}
.loadout-label{align-self:flex-start;margin:13px 0 7px;color:#718d9d}.loadout-select{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.loadout-select button{--weapon-color:#d8f2ff;margin:0;padding:8px 2px;clip-path:none;box-shadow:none;border:1px solid #3c5666;background:#091823;color:#708897;text-align:center}.loadout-select button[data-weapon="lightning"]{--weapon-color:#a77cff}.loadout-select button[data-weapon="missile"]{--weapon-color:#ff5c4f}.loadout-select button[data-weapon="plasma"]{--weapon-color:#5ff4ff}.loadout-select button.selected{border-color:var(--weapon-color);background:#142531;color:white;box-shadow:0 0 15px color-mix(in srgb,var(--weapon-color) 25%,transparent)}.loadout-select span{display:block;margin:4px 0 0;font-size:10px;color:#e3f2f7}.loadout-select small{display:block;margin-top:1px;font-size:7px;color:#647e8d}.loadout-icon{position:relative;display:block;width:28px;height:28px;margin:0 auto;border:2px solid var(--weapon-color);border-radius:50%;color:var(--weapon-color);box-shadow:0 0 10px color-mix(in srgb,var(--weapon-color) 45%,transparent),inset 0 0 8px color-mix(in srgb,var(--weapon-color) 18%,transparent)}.loadout-icon.cannon:before{content:"";position:absolute;left:11px;top:5px;width:3px;height:13px;background:currentColor;box-shadow:-6px 0 currentColor,6px 0 currentColor}.loadout-icon.cannon:after{content:"";position:absolute;left:5px;bottom:4px;width:16px;height:4px;background:currentColor}.loadout-icon.lightning:before{content:"";position:absolute;inset:4px 6px;background:currentColor;clip-path:polygon(58% 0,8% 56%,43% 56%,29% 100%,94% 38%,58% 38%)}.loadout-icon.missile:before{content:"";position:absolute;left:9px;top:3px;width:7px;height:18px;background:currentColor;clip-path:polygon(50% 0,100% 30%,86% 70%,100% 100%,50% 82%,0 100%,14% 70%,0 30%)}.loadout-icon.plasma:before{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;border:2px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 3px #091823,0 0 6px currentColor}.loadout-icon.plasma:after{content:"";position:absolute;left:11px;top:11px;width:4px;height:4px;border-radius:50%;background:currentColor}
.loadout-select img{display:block;width:48px;height:48px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--weapon-color) 55%,transparent))}
@keyframes pulse{50%{opacity:.3}}@media(max-width:900px){.shell{display:block;padding:0;min-height:100vh}.brief{display:none}.cabinet{width:100%;max-width:540px;margin:auto;filter:none}.topline,footer{padding:8px 10px}.game-wrap{border:0;border-radius:0;max-height:calc(100vh - 54px);margin:auto}}