@font-face{font-family:Russo;src:url('../assets/fonts/RussoOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Condensed;src:url('../assets/fonts/RobotoCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--cyan:#36e7ff;--gold:#ffd34d;--orange:#ffae2b;--white:#f3f8ff;--muted:#9fb6c7}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#02070c;touch-action:none;overscroll-behavior:none}
body{font-family:Russo,Arial,sans-serif;color:var(--white);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.hidden{display:none!important}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform:translate(-50%,-50%);overflow:hidden;background:#050d16;outline:none}
#gl{position:absolute;inset:0;width:1280px;height:720px;display:block}
#hud,#mapCanvas{position:absolute;inset:0;width:1280px;height:720px;pointer-events:none;z-index:4}
#mapCanvas{display:none;pointer-events:auto;z-index:9;cursor:crosshair}
.screen{position:absolute;inset:0;z-index:10}

/* buttons */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 24px;border:2px solid #4ba8bf;border-top-color:#9deaff;border-bottom:5px solid #123f55;border-radius:7px;background:linear-gradient(160deg,#254657,#102638 72%);box-shadow:0 5px 0 #030e18,0 8px 15px #0005,inset 0 1px 0 #dbffff55;font-size:20px;letter-spacing:.6px;text-shadow:0 2px #051321;transition:transform .12s,background .12s,border-color .12s}
.btn:hover,.btn.kbsel{border-color:#c2fbff;background:linear-gradient(160deg,#365d71,#174258);transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #030e18}
.btn.primary{background:linear-gradient(155deg,#a2ffff 0%,#2ae1ef 33%,#0bb5d2 100%);border-color:#b9fcff;border-bottom:6px solid #087893;color:#042c3f;text-shadow:0 1px #caffff80;box-shadow:0 5px 0 #033a4b,0 0 23px #13dfff27,inset 0 2px 0 #ecffff}
.btn.primary:hover,.btn.primary.kbsel{background:linear-gradient(155deg,#d1ffff,#4aeeff 45%,#10b9d3)}
.btn.small{font-size:15px;min-height:42px;padding:9px 18px;border-bottom-width:4px}
.btn.subtle{background:#102637;border-color:#3c596e;color:#c3d1df;font-size:16px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.kbsel{outline:3px solid #ffd400!important;outline-offset:3px;box-shadow:0 0 22px #ffd40088!important}
.play-icon{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor;display:inline-block}
.icon-btn{width:46px;height:42px;border:1px solid #4b88a0;border-radius:6px;background:#0a1e2ccc;font-size:15px;color:#d8f6ff}
.icon-btn.off{opacity:.4;text-decoration:line-through}
.icon-btn:hover{border-color:#bff6ff}

/* splash */
.splash{background:url('../assets/splash-cover.jpg') center/cover no-repeat}
.splash::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#010b19e8 0%,#020c1b8a 13%,transparent 32%);pointer-events:none}
.enter-button{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);width:460px;height:72px;font-size:23px;animation:pulse 1.6s ease-in-out infinite}
.enter-button:hover,.enter-button.kbsel{transform:translateX(-50%) translateY(-2px)}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 5px 0 #033a4b,0 0 18px #0bdfff30}50%{opacity:.72;box-shadow:0 5px 0 #033a4b,0 0 42px #0bdfff90}}
.mapi-logo{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:130px;height:62px;object-fit:contain;filter:drop-shadow(0 3px 4px #000)}

/* menu */
.menu{pointer-events:none}.menu button{pointer-events:auto}
.menu-shade{position:absolute;inset:0;background:linear-gradient(90deg,#041322f0 0%,#071b2cd8 28%,#071c2d70 42%,transparent 62%),linear-gradient(0deg,#020b16cc 0%,transparent 26%)}
.game-title{position:absolute;left:46px;top:34px;margin:0;display:flex;flex-direction:column;line-height:.88;font-size:82px;font-weight:400;font-style:italic;letter-spacing:-3px;filter:drop-shadow(0 7px 0 #061321)}
.game-title span{color:#eff7ff;text-shadow:0 -2px #fff,0 3px #aac4d4,0 5px #567b92}
.game-title strong{font-weight:400;font-size:1.25em;color:#19e1f5;text-shadow:0 -2px #b4ffff,0 3px #069ab7,0 6px #05495e}
.tagline{position:absolute;left:50px;top:232px;margin:0;font-size:15px;letter-spacing:2px;color:#a9dbe9}
.main-nav{position:absolute;left:46px;top:270px;width:370px;display:flex;flex-direction:column;gap:12px}
.main-nav .btn{justify-content:flex-start;height:56px}
.main-nav .btn.primary{height:64px;font-size:26px}
.main-nav .row{display:flex;gap:10px}.main-nav .tile{flex:1;font-size:13px;padding:8px;min-height:48px;height:48px;justify-content:center}
.menu-tools{position:absolute;right:22px;top:20px;display:flex;gap:8px}
.wallet{position:absolute;right:22px;top:74px;padding:9px 16px;border:1px solid #8a7531;border-radius:6px;background:#1d1a0dcc;color:var(--gold);font-size:15px}.wallet b{font-size:19px}
.drone-spec{position:absolute;right:34px;bottom:96px;text-align:right}.drone-spec span{font-size:13px;color:#9cc4d4;letter-spacing:2px}.drone-spec strong{display:block;font-size:40px;font-weight:400}.drone-spec em{font-style:normal;color:var(--cyan)}.drone-spec div{font-size:14px;color:#b8f5ff}.drone-spec i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#59ff9c;box-shadow:0 0 9px #59ff9c;margin-right:4px}
.menu-mapi{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:100px;height:48px;object-fit:contain}

/* panels */
.panel{background:#020c18c4}
.panel-shell{position:absolute;inset:28px 44px;display:flex;flex-direction:column;border:1px solid #5f94ac;border-top:3px solid #78ecf7;border-radius:8px;background:linear-gradient(160deg,#0f2a3bf2,#06131ef2)}
.panel-shell header{display:flex;justify-content:space-between;align-items:center;padding:20px 26px 12px;border-bottom:1px solid #2c5568}
.panel-shell h2{margin:0;font-size:34px;font-weight:400;color:#e9fbff}.panel-shell header p{margin:4px 0 0;color:#8fc4d6;font-size:14px;letter-spacing:1px}
.panel-body{flex:1;overflow:auto;padding:20px 26px}
.mission-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mission-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;height:196px;padding:13px;border:1px solid #4d8aa3;border-top:3px solid #6fe7f6;border-radius:7px;background:linear-gradient(150deg,#173b50,#0a1d2b);text-align:left;transition:transform .12s}
.mission-card:hover,.mission-card.kbsel{transform:translateY(-3px);border-color:#c2fbff}
.mission-card.locked{filter:grayscale(1);opacity:.45}
.mnum{font-size:38px;color:var(--cyan);line-height:1}.mname{font-size:17px}.mtarget{font-family:Condensed,Arial;font-size:13px;color:var(--orange);letter-spacing:.5px}
.mstars{margin-top:auto;font-size:22px;color:#33485a}.mstars .on{color:var(--gold);text-shadow:0 0 8px #ffd34d88}.mstars i{font-style:normal}
.mthreat{font-family:Condensed,Arial;font-size:12px;color:#ff6b8a;letter-spacing:1px}.mthreat em{font-style:normal;color:#3a2a33}
.hangar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.upg-card{padding:18px;border:1px solid #4d8aa3;border-top:3px solid #6fe7f6;border-radius:7px;background:linear-gradient(150deg,#173b50,#0a1d2b);display:flex;flex-direction:column;gap:10px;min-height:260px}
.upg-card h3{margin:0;font-size:20px;font-weight:400}.upg-card p{margin:0;font-family:Condensed,Arial;color:#a9cfdd;font-size:15px;flex:1}
.pips{display:flex;gap:6px}.pips i{flex:1;height:12px;border-radius:2px;background:#21394a}.pips i.on{background:var(--cyan);box-shadow:0 0 8px #36e7ff88}
.settings{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto}
.set-row{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border:1px solid #2c5568;border-radius:6px;background:#0a1d2b}.set-row span{font-size:17px}.set-row .btn{min-width:250px}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-family:Condensed,Arial;font-size:16px}.controls-grid h3{font-family:Russo;font-weight:400;color:var(--cyan);margin:6px 0}.controls-grid ul{margin:0 0 10px;padding-left:18px;line-height:1.55;color:#d6eef7}.controls-grid b{color:#fff}
.trophy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.trophy{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #2c5568;border-radius:7px;background:#0a1d2b;opacity:.55;min-height:150px}.trophy.on{opacity:1;border-color:#c9a83a;background:linear-gradient(150deg,#2e2810,#0a1d2b)}.trophy span{font-size:30px}.trophy small{font-family:Condensed,Arial;color:#a9cfdd;font-size:14px}

/* briefing */
.briefing{background:#020c18d8}
.brief-shell{position:absolute;inset:28px 44px;display:flex;gap:28px;padding:26px;border:1px solid #5f94ac;border-top:3px solid #ffae2b;border-radius:8px;background:linear-gradient(160deg,#122c3df4,#06131ef4)}
.brief-left{flex:1;display:flex;flex-direction:column}.brief-num{color:var(--orange);letter-spacing:3px;font-size:16px}
.brief-left h2{margin:4px 0 10px;font-size:46px;font-weight:400}.brief-left p{margin:0 0 14px;font-family:Condensed,Arial;font-size:18px;line-height:1.45;color:#d6eef7}
.brief-left h3{margin:4px 0 6px;font-weight:400;color:var(--cyan);font-size:16px;letter-spacing:2px}
.brief-left ul{margin:0 0 12px;padding-left:20px;font-family:Condensed,Arial;font-size:17px;line-height:1.6}
.brief-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:auto}.brief-meta span{padding:7px 12px;border:1px solid #2c5568;border-radius:5px;background:#0a1d2b;font-size:13px;color:#9fc6d6}.brief-meta b{color:#fff;font-weight:400}
.brief-actions{display:flex;gap:14px;margin-top:16px}.brief-actions .btn{min-width:200px}
.brief-right{display:flex;flex-direction:column;align-items:center;gap:8px}.brief-right canvas{width:440px;height:440px;border:2px solid #36e7ff88;border-radius:6px;background:#06121c}.brief-right span{font-family:Condensed,Arial;font-size:12px;color:#9fc6d6;letter-spacing:1px}

/* hud layer */
.hud-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.hud-buttons{position:absolute;right:20px;top:232px;display:flex;gap:6px;pointer-events:auto}
.hud-buttons .icon-btn{width:52px;height:34px;font-size:13px}

/* touch */
.touch{position:absolute;inset:0;z-index:6;pointer-events:none}
.stick{position:absolute;bottom:34px;width:190px;height:190px;border-radius:50%;border:2px solid #8bdae888;background:radial-gradient(circle,#0b2333aa 0%,#06141e66 70%);pointer-events:auto;touch-action:none}
.stick.left{left:36px}.stick.right{right:36px}
.stick .knob{position:absolute;left:50%;top:50%;width:80px;height:80px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#c9fbff,#2ad0e6 60%,#0a6e85);box-shadow:0 0 18px #36e7ff88}
.stick .label{position:absolute;left:0;right:0;top:-24px;text-align:center;font-size:12px;color:#bfefff;letter-spacing:1px}
.tbtn{position:absolute;pointer-events:auto;touch-action:none;width:86px;height:86px;border-radius:50%;border:2px solid #9deaff;background:#0d2a3bcc;font-size:13px;color:#e8fbff;box-shadow:0 0 14px #36e7ff44}
.tbtn.down{background:#2ae1ef;color:#042c3f}
.tbtn.fire{right:250px;bottom:40px;width:110px;height:110px;font-size:17px;border-color:#ff8ef0;background:#3a0f33cc}.tbtn.fire.auto::after{content:'AUTO';position:absolute;left:0;right:0;bottom:16px;font-size:10px;color:#ffb8f4}
.tbtn.rocket{right:250px;bottom:166px}.tbtn.emp{right:150px;bottom:244px;width:72px;height:72px}.tbtn.boost{left:250px;bottom:40px}.tbtn.scan{right:236px;bottom:262px;width:72px;height:72px}

/* modals */
.modal{z-index:14;display:flex;align-items:center;justify-content:center;background:#020c19c4}
.modal-card{display:flex;flex-direction:column;gap:12px;min-width:420px;padding:28px 34px;border:1px solid #6c9cb5;border-top:4px solid #a5f0fb;border-radius:9px;background:linear-gradient(145deg,#24495f,#0c2233);text-align:center}
.modal-card h2{margin:0;font-size:40px;font-weight:400}.modal-card p{margin:0 0 6px;color:#a9d3e2;font-family:Condensed,Arial;font-size:17px}
.result-card{min-width:620px}.result.fail .modal-card,.fail .modal-card{border-top-color:#ff3355}#result.fail h2{color:#ff6b84}
.res-stars{font-size:52px;color:#2a4253;display:flex;flex-direction:column;align-items:center}.res-stars i{font-style:normal;display:inline-block;margin:0 6px}.res-stars i.on{color:var(--gold);text-shadow:0 0 16px #ffd34daa}
.res-stars small{display:flex;gap:16px;font-size:12px}.res-stars em{font-style:normal;color:#55707f}.res-stars em.on{color:#ffe28a}
.res-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.res-stats div{padding:10px;border:1px solid #2c5568;border-radius:6px;background:#0a1d2b}.res-stats span{display:block;font-size:11px;color:#8fc4d6}.res-stats b{font-weight:400;font-size:20px}
.res-actions{display:flex;gap:12px;justify-content:center;margin-top:8px}.res-actions .btn{min-width:170px}
.rotate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#02070c;font-size:28px}.rotate div{font-size:80px}
.webgl-error{position:absolute;inset:0;z-index:40;padding:120px;background:#02070c}

@media (pointer:coarse){.hud-buttons{left:18px;right:auto;top:316px}.hud-buttons .icon-btn{width:60px;height:40px}}
.panel.hangar-mode{background:transparent}.panel.hangar-mode .panel-shell{background:linear-gradient(180deg,#0f2a3b55 0%,#06131e10 40%,#06131ef0 62%)}.panel.hangar-mode .panel-body{display:flex;flex-direction:column;justify-content:flex-end}.panel.hangar-mode .upg-card{min-height:200px}
.set-row{padding:4px 16px}.set-row .btn{min-height:38px;height:38px}.settings{gap:7px}
.fs-icon{display:inline-block;width:20px;height:20px;flex:none;background:linear-gradient(currentColor,currentColor) 0 0/8px 3px,linear-gradient(currentColor,currentColor) 0 0/3px 8px,linear-gradient(currentColor,currentColor) 100% 0/8px 3px,linear-gradient(currentColor,currentColor) 100% 0/3px 8px,linear-gradient(currentColor,currentColor) 0 100%/8px 3px,linear-gradient(currentColor,currentColor) 0 100%/3px 8px,linear-gradient(currentColor,currentColor) 100% 100%/8px 3px,linear-gradient(currentColor,currentColor) 100% 100%/3px 8px;background-repeat:no-repeat}
.fs-btn{position:absolute;left:46px;bottom:22px;gap:12px;pointer-events:auto}
.icon-btn .fs-icon{width:16px;height:16px;vertical-align:middle}
.tbtn.nuke{left:250px;bottom:150px;width:72px;height:72px;border-color:#ffae2b;background:#3a240acc}
.gpu-reset{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#02070cf0;text-align:center}.gpu-reset h2{margin:0;font-size:38px;font-weight:400;color:#36e7ff}.gpu-reset p{margin:0;font-family:Condensed,Arial;font-size:20px;color:#cfe9f3}