@font-face{font-family:"Black Ops One";src:url(assets/fonts/black-ops-one.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Chakra Petch";src:url(assets/fonts/chakra-petch-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(assets/fonts/chakra-petch-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(assets/fonts/chakra-petch-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ui:"Chakra Petch","Segoe UI",Arial,sans-serif;--disp:"Black Ops One",Impact,"Arial Black",sans-serif;--acc:#d6ed80;--acc2:#ffb347;--txt:#eef2ea;--mut:#a9b6ad}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05080a;color:var(--txt);font:600 16px var(--ui);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff26;background:#151d1ae6;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}button:hover:not(:disabled){background:#2b3626;border-color:var(--acc)}button:active:not(:disabled){transform:scale(.98)}button:focus-visible{outline:3px solid #d9f286;outline-offset:2px}button:disabled{opacity:.42;cursor:not-allowed}
[hidden]{display:none!important}
#stage{position:absolute;width:1440px;height:900px;transform-origin:0 0;overflow:hidden;background:#0b1214}
#game{position:absolute;inset:0;width:100%;height:100%}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,#02060899 100%)}
#dmgVig{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,#ff1a1a88 100%);transition:opacity .08s}
/* ---------- top bar ---------- */
#topbar{position:absolute;inset:0 0 auto;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(#050a0bdd,#050a0b00);z-index:30;pointer-events:none}
#topbar nav{pointer-events:auto;display:flex;gap:8px}#topbar nav button{font:700 15px var(--ui);letter-spacing:1px;height:40px;min-width:44px;padding:0 14px}#topbar nav button.off{opacity:.55;text-decoration:line-through}
.brand{font:26px var(--disp);letter-spacing:3px;display:flex;align-items:center;gap:12px}.mark{color:var(--acc);font-size:28px;transform:rotate(-35deg)}.brand small{display:block;font:700 10px var(--ui);letter-spacing:2px;width:80px;line-height:1.4;border-left:1px solid #ffffff35;padding-left:12px;color:var(--mut)}
.topcenter{position:absolute;left:50%;top:8px;transform:translateX(-50%);text-align:center;line-height:1}.topcenter span{display:block;font:700 12px var(--ui);letter-spacing:.35em;color:var(--mut)}.topcenter b{display:block;font:34px var(--disp);color:#fff;text-shadow:0 0 18px #d6ed8055,0 3px 0 #000;margin-top:2px;letter-spacing:.03em}
.topcenter.pop b{animation:scorepop .25s}@keyframes scorepop{0%{transform:scale(1.18);color:var(--acc)}100%{transform:none}}
.panel{background:#0c1618d4;border:1px solid #afc2b030;backdrop-filter:blur(8px)}
.eyebrow{font:700 13px var(--ui);letter-spacing:1.5px;color:var(--mut);display:flex;justify-content:space-between;gap:10px}.eyebrow strong{color:#eef6d8}
/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}#hud button{pointer-events:auto}
#missionPanel{position:absolute;top:70px;left:20px;width:360px;padding:14px 18px 16px}#missionPanel h2{font:23px var(--disp);letter-spacing:.5px;margin:8px 0 4px}#missionPanel p{font:500 14px/1.4 var(--ui);margin:0 0 10px;color:#b7c2bf;min-height:20px}
#mClock{font-family:var(--disp);font-weight:400;color:#eef6d8;letter-spacing:1px}#mClock.warn{color:#ff7a6b;animation:blink .6s infinite}@keyframes blink{50%{opacity:.35}}
.progress{height:6px;background:#ffffff18}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a9c45d,#e2f79a);transition:width .25s;box-shadow:0 0 10px #d6ed8066}
.mrow{font:700 15px var(--ui);letter-spacing:.6px;color:#dbeeb8;margin-top:9px}.mrow.bonus{font-size:13.5px;color:#a3b0a8}.mrow.bonus .ok{color:#ffd45a}.mrow small{color:#8a978f;font-size:13px}
#radar{position:absolute;right:20px;top:70px;padding:8px}#map{display:block;background:#122022;border:1px solid #ffffff12}
#bossHud{position:absolute;top:74px;left:400px;right:270px;padding:10px 16px;background:#150f13e0;border:1px solid #ff5a7a50}.brow{display:flex;justify-content:space-between;font:18px var(--disp);letter-spacing:1.5px;color:#ff8da0;margin-bottom:8px}.brow #bossPhase{font:700 14px var(--ui);letter-spacing:2px;align-self:center}
.bbar{height:16px;background:#2a1a20;position:relative;border:1px solid #ff5a7a60}.bbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3a5e,#ff8a5a);transition:width .15s;box-shadow:0 0 14px #ff3a5e88}.bbar b{position:absolute;inset:0}.bbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff9}
#announcement{position:absolute;top:220px;width:100%;text-align:center;font:34px var(--disp);letter-spacing:4px;color:#ecffa4;text-shadow:0 4px 18px #000,0 0 30px #d6ed8055;opacity:0}#announcement.pop{animation:ann 3.2s forwards}@keyframes ann{0%{opacity:0;transform:scale(1.3)}8%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
#streak{position:absolute;top:128px;left:0;right:0;text-align:center;pointer-events:none;opacity:0}#streak b{display:block;font:66px/1 var(--disp);letter-spacing:.04em;color:var(--c,#ffd45a);text-shadow:0 0 28px var(--c,#ffd45a),0 5px 0 #000,0 10px 30px #000;-webkit-text-stroke:2px #0008}
#streak small{display:inline-block;margin-top:10px;font:700 18px var(--ui);letter-spacing:.2em;color:#fff;background:#000a;padding:5px 16px;border-left:3px solid var(--acc)}
#streak.go{animation:streak 2.1s cubic-bezier(.2,1.4,.4,1) forwards}@keyframes streak{0%{opacity:0;transform:scale(2.2) rotate(-3deg)}10%{opacity:1;transform:scale(1) rotate(0)}14%{transform:scale(1.06)}20%{transform:scale(1)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92) translateY(-14px)}}
#comboBox{position:absolute;right:28px;top:270px;text-align:right;color:#ffd45a;letter-spacing:2px}#comboBox b{display:block;font:62px/1 var(--disp);text-shadow:0 0 22px #ffa83a,0 4px 0 #000}#comboBox small{display:block;font:700 14px var(--ui);color:#ffdc8a;margin-top:4px}#comboBox i{display:block;height:4px;background:#ffd45a;margin-top:7px;margin-left:auto;box-shadow:0 0 10px #ffd45a}
#buffs{position:absolute;left:20px;top:300px;display:flex;flex-direction:column;gap:6px}#buffs span{font:700 14px var(--ui);letter-spacing:1px;padding:5px 11px;background:#2a2410e0;border:1px solid #ffd45a90;color:#ffd45a;width:max-content}#buffs span.g{color:#9bffb2;border-color:#9bffb290;background:#10241ae0}#buffs span.r{color:#ff8a5a;border-color:#ff6a3a;background:#3a1408e8;animation:blink .5s infinite}
#bottom{position:absolute;bottom:16px;left:20px;right:20px;height:104px;display:flex;align-items:center;gap:20px;padding:0 20px;background:#0a1214ea;border:1px solid #adbbb530}
.hullbox{width:270px}.hullbox .eyebrow{font-size:14px}.hullbox .eyebrow strong{font:18px var(--disp);letter-spacing:1px}.healthbar{height:16px;background:#33403a;margin:8px 0 8px;position:relative;overflow:hidden}.healthbar i{position:absolute;left:0;top:0;height:100%;background:repeating-linear-gradient(90deg,#d3e987 0 18px,#9cb25b 18px 19px);transition:width .1s}.healthbar u{position:absolute;left:0;bottom:0;height:5px;background:#7ad6ff;transition:width .1s}
.xpline{display:flex;align-items:center;gap:8px;font:700 14px var(--ui);color:#ffd45a}.xpbar{flex:1;height:6px;background:#ffffff1c}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb12a,#ffe16a);width:0}
.weapons{display:flex;gap:7px;flex:1}.weapon{width:98px;height:74px;padding:6px 7px;text-align:left;position:relative;background:#ffffff06;border-color:#ffffff18;display:flex;flex-direction:column;gap:1px}.weapon.active{border-color:var(--acc);background:#d6ed8018;box-shadow:inset 0 0 0 1px var(--acc)}.weapon.off{opacity:.5}.weapon b{font:700 14px var(--ui);letter-spacing:.3px}.weapon small{font:600 12px var(--ui);color:#a3b2a1}.weapon kbd{position:absolute;right:6px;top:5px}.weapon .ic{margin-bottom:-1px}
kbd{font:700 12px var(--ui);border:1px solid #ffffff38;border-radius:3px;padding:1px 5px;color:#dfe6dd;background:#0006}
.skills{display:flex;gap:8px}.skill{width:98px;height:74px;position:relative;overflow:hidden;text-align:center;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.skill b{font:700 14px var(--ui);letter-spacing:1px;white-space:nowrap}.skill i{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p,1)*100%);background:#7a8a80}.skill.rdy{border-color:#8ceeff}.skill.rdy i{background:#8ceeff}
.skill.fury{border-color:#ff6a3a55;background:#24120ce6}.skill.fury b{color:#ff8a5a}.skill.fury span{font:700 12px var(--ui);color:#ffb08a}.skill.fury i{background:linear-gradient(90deg,#ff5a3a,#ffd45a)}
.skill.fury.rdy{border-color:#ffb347;animation:furyrdy .7s infinite alternate}.skill.fury.on{border-color:#ff5a3a;background:#5a1a0a;box-shadow:0 0 22px #ff5a3a}@keyframes furyrdy{from{box-shadow:0 0 6px #ff6a3a}to{box-shadow:0 0 26px #ffb347,inset 0 0 18px #ff6a3a66}}
.economy{text-align:right;color:var(--mut)}.economy span{font:700 13px var(--ui);letter-spacing:1.5px}.economy strong{display:block;font:28px var(--disp);color:var(--acc);margin-top:4px}
#crosshair{position:absolute;pointer-events:none;color:#e9ffa3;transform:translate(-50%,-50%);display:none;z-index:40;filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 1px #000);transition:transform .06s}
#crosshair svg{display:block}#crosshair.hit{color:#fff;transform:translate(-50%,-50%) scale(1.22)}#crosshair.crit{color:#ffe14a;transform:translate(-50%,-50%) scale(1.4) rotate(45deg)}
#bossCard{position:absolute;inset:0;z-index:25;pointer-events:none}.bars{position:absolute;left:0;right:0;height:0;background:#000}.bars.t{top:0}.bars.b{bottom:0}#bossCard.go .bars{animation:bars 3.4s forwards}@keyframes bars{0%{height:0}12%{height:110px}88%{height:110px}100%{height:0}}
.card-body{position:absolute;left:0;right:0;bottom:150px;text-align:center;opacity:0}#bossCard.go .card-body{animation:cardin 3.4s forwards}@keyframes cardin{0%{opacity:0;transform:translateY(20px)}18%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
.card-body small{font:700 16px var(--ui);letter-spacing:6px;color:#ff8da0}.card-body h1{font:76px var(--disp);letter-spacing:6px;margin:8px 0 0;text-shadow:0 0 40px #ff3a5e,0 6px 20px #000;font-weight:400}
#toast{position:absolute;left:50%;top:126px;transform:translate(-50%,-20px);background:#101a16f2;border:1px solid #d6ed8080;padding:11px 22px;font:700 16px var(--ui);letter-spacing:1px;opacity:0;pointer-events:none;z-index:60;transition:all .25s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- screens ---------- */
#screen{position:absolute;inset:0;z-index:12;overflow:hidden}
.primary,.secondary,.surv{width:100%;padding:15px 22px;text-align:left;display:flex;align-items:center;gap:12px;position:relative}
.primary .lbl,.secondary .lbl,.surv .lbl{font:20px var(--disp);letter-spacing:1.5px;display:flex;align-items:center;gap:10px}.primary .sub,.secondary .sub,.surv .sub{font:700 13px var(--ui);letter-spacing:1.2px;opacity:.82;margin-left:auto;text-align:right}.primary .arr{margin-left:auto;font-size:20px}.primary .sub+.arr{margin-left:14px}
.primary{color:#141c12;background:linear-gradient(180deg,#e3f799,#c4dd6a);border-color:#e8ff9c;box-shadow:0 6px 0 #6d7f33,0 10px 24px #0008;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.primary:hover:not(:disabled){background:linear-gradient(180deg,#f0ffb0,#d6ed80);color:#141c12}
.primary.big,.surv{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 24px}.primary.big .lbl{font-size:28px}.primary.big .sub,.surv .sub{margin-left:0;text-align:left}.primary.big .arr{position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:26px}.lbl{white-space:nowrap}.primary.danger{background:linear-gradient(180deg,#ff8a7a,#e0584c);border-color:#ff9a8a;box-shadow:0 6px 0 #7a2a22}
.secondary{margin-top:10px;background:#121c1de8;font:700 16px var(--ui);letter-spacing:1.5px}.secondary .lbl{font-size:17px}
.surv{margin-top:12px;background:linear-gradient(90deg,#3a1d0ce8,#1c130ee8);border-color:#ffb34788;color:#ffd9a8}.surv .lbl{font-size:21px;color:#ffc070}.surv:hover:not(:disabled){background:linear-gradient(90deg,#5a2a10,#2a1a10);border-color:#ffb347}
.home{position:absolute;inset:0;background:linear-gradient(90deg,#060b0cf2 0,#060b0cbb 40%,transparent 66%)}.title-art{position:absolute;left:58px;top:74px;width:540px;filter:drop-shadow(0 10px 30px #000)}
.menu-actions{position:absolute;left:66px;top:448px;width:540px}.menu-actions .rowbtns .secondary{margin-top:10px;flex-direction:column;align-items:flex-start;gap:4px}.menu-actions .rowbtns .secondary .sub{margin-left:0;text-align:left}
.menu-help{font:600 15px/1.7 var(--ui);color:#a3b2a7;letter-spacing:.3px;margin-top:20px}.menu-help b{color:var(--acc);font-weight:700}
.studio-credit{position:absolute;left:70px;bottom:30px;font:700 12px var(--ui);letter-spacing:2px;color:#98a59d}.studio-credit b{display:block;color:var(--acc);font:17px var(--disp);letter-spacing:2px}
.mini{position:absolute;right:20px;bottom:16px;font:700 12px var(--ui);padding:7px 12px;background:#0007;letter-spacing:1px;color:#93a199;width:auto}
/* deploy */
.screen-deploy{background:radial-gradient(ellipse at center,#121d1af0,#050a0bfa)}.deploy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:760px}
.deploy small{font:700 16px var(--ui);letter-spacing:.45em;color:var(--ac)}.deploy h1{font:64px/1.05 var(--disp);margin:14px 0 30px;letter-spacing:2px;text-shadow:0 0 30px #0008}
.dbar{height:8px;background:#ffffff14;overflow:hidden}.dbar i{display:block;height:100%;width:40%;background:var(--ac);animation:dbar 1.1s infinite ease-in-out;box-shadow:0 0 14px var(--ac)}@keyframes dbar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.deploy span{display:block;margin-top:16px;font:700 15px var(--ui);letter-spacing:.3em;color:var(--mut)}
/* mission map */
.mapscreen{position:absolute;inset:0;padding:74px 34px 26px;background:#060b0ce8;display:flex;flex-direction:column}.maphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}.maphead h2{margin:0;font:32px var(--disp);letter-spacing:3px;font-weight:400}.maphead span{font:700 15px var(--ui);color:#c1d1ab;letter-spacing:1px}
.maprow{display:flex;gap:22px;flex:1;min-height:0}.acts{flex:1;display:flex;flex-direction:column;gap:10px}.act{display:flex;align-items:stretch;gap:12px;flex:1}.acthead{width:150px;border-left:4px solid var(--ac);padding:8px 12px;display:flex;flex-direction:column;justify-content:center}.acthead small{font:700 13px var(--ui);color:var(--ac);letter-spacing:2px}.acthead b{font:17px var(--disp);letter-spacing:1px;margin-top:4px;font-weight:400}
.nodes{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.node{position:relative;text-align:left;padding:10px 10px 8px;display:flex;flex-direction:column;justify-content:space-between;background:#101a1cdb}.node b{font:26px var(--disp);color:var(--ac,#d6ed80);font-weight:400}.act .node b{color:var(--ac)}.node span{font:700 14.5px/1.2 var(--ui);color:#dde5df}.node.sel{border-color:var(--ac);background:#1d2a1fe8;box-shadow:0 0 0 2px var(--ac) inset,0 0 20px #0008}.node.lock{opacity:.4}.node.boss{border-color:#ff5a7a70}.node em{position:absolute;right:8px;top:8px;font:12px var(--disp);font-style:normal;color:#ff8da0;letter-spacing:1px}
.stars{display:flex;gap:2px}.st{fill:#2c3731;stroke:#46544c;stroke-width:1}.st.on{fill:#ffd45a;stroke:#b98a1a}
.brief{width:380px;padding:20px;display:flex;flex-direction:column;overflow:auto;border-top:4px solid var(--ac)}.brief small{font:700 13px var(--ui);letter-spacing:2px;color:var(--ac)}.brief h2{font:24px/1.15 var(--disp);margin:8px 0;font-weight:400}.brief p{font:500 15px/1.45 var(--ui);margin:0 0 4px;color:#cbd5cd}.brief h4{font:700 13px var(--ui);letter-spacing:2px;color:#9fb0a4;margin:14px 0 6px}.brief ul{margin:0;padding-left:20px;font:600 15px/1.55 var(--ui);color:#dde7d3}
.bonus-line{display:flex;align-items:center;gap:8px;font:600 14.5px var(--ui);color:#d0d9d2;margin:3px 0}.bestline{margin-top:8px;font:700 13px var(--ui);letter-spacing:1.5px;color:#9fb0a4}.bestline b{font:18px var(--disp);color:#ffd45a;margin-left:6px;font-weight:400}
.diffs{display:flex;gap:6px}.diff{flex:1;padding:10px;font:700 14px var(--ui);letter-spacing:1px}.diff.on{background:var(--acc);color:#162019;border-color:var(--acc)}.reward{font:700 14px var(--ui);color:#c1d1ab;margin:12px 0 12px}.reward b{color:var(--acc)}.brief .primary{margin-top:auto}.rowbtns{display:flex;gap:8px}.rowbtns .secondary{margin-top:10px;justify-content:center;text-align:center}
/* garage */
.garage{position:absolute;inset:0;padding:72px 34px 24px;background:#060b0cec;display:flex;flex-direction:column}.ghead{display:flex;align-items:baseline;gap:24px;margin-bottom:12px}.ghead h2{margin:0;font:32px var(--disp);letter-spacing:3px;font-weight:400}.ghead span{font:700 15px var(--ui);color:#c1d1ab;letter-spacing:1px}.ghead b{color:var(--acc);font-family:var(--disp);font-weight:400}.back{width:auto!important;margin:0 0 0 auto!important;padding:10px 20px!important;justify-content:center}
.gmain{display:flex;gap:22px;flex:1;min-height:0}.gleft{width:500px;padding:10px;display:flex;flex-direction:column}#gprev{width:100%;display:block;background:#0c1315}.gname{font:20px var(--disp);letter-spacing:1.5px;margin:12px 4px 4px;font-weight:400}.gname small{display:block;font:700 14px var(--ui);color:#a9b8ac;margin-top:4px;letter-spacing:1px}
.stats{display:flex;flex-direction:column;gap:7px;margin-top:8px;padding:0 4px}.stat{display:grid;grid-template-columns:116px 1fr 108px;align-items:center;gap:10px;font:700 13px var(--ui);letter-spacing:1px;color:#a9b8ac}.stat b{color:#eef6dc;text-align:right}.sbar{height:7px;background:#ffffff16}.sbar i{display:block;height:100%;background:linear-gradient(90deg,#8aa84a,#d6ed80)}
.gright{flex:1;display:flex;flex-direction:column;min-width:0}.tabs{display:flex;gap:6px;margin-bottom:10px}.tab{padding:12px 22px;font:17px var(--disp);letter-spacing:1.5px}.tab.on{background:var(--acc);color:#162019;border-color:var(--acc)}
.gbody{flex:1;overflow-y:auto;padding-right:8px;display:flex;flex-direction:column;gap:8px;touch-action:pan-y}.gbody::-webkit-scrollbar{width:10px}.gbody::-webkit-scrollbar-thumb{background:#3b4a40}.gbody h3{font:16px var(--disp);letter-spacing:2px;color:#c3d6a8;margin:10px 0 2px;font-weight:400}
.gcard{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#101a1cdb;border:1px solid #ffffff16}.gcard.selected{border-color:var(--acc);background:#1b261c}.gcard.locked{opacity:.55}.gic{width:54px;height:54px;display:grid;place-items:center;background:#0b1214;border:1px solid #ffffff14;flex:none}.gtxt{flex:1;min-width:0}.gtxt b{font:700 18px var(--ui);letter-spacing:.5px}.gtxt b em{font:700 12px var(--ui);font-style:normal;color:#ffd45a;margin-left:8px;border:1px solid #ffd45a70;padding:1px 6px}.gtxt small{display:block;font:700 12.5px var(--ui);color:#a9bd94;letter-spacing:1px;margin-top:3px}.gtxt p{margin:4px 0 0;font:500 14.5px/1.4 var(--ui);color:#bcc6c3}
.gbtn{width:160px;padding:13px 8px;font:700 14px var(--ui);letter-spacing:1px;flex:none;text-align:center}.gbtn.buy{background:#2a3a22;border-color:#d6ed8088;color:#e8ffa6}.gbtn.up{width:auto;margin-top:8px;padding:7px 12px;display:block;color:#ffd45a;border-color:#ffd45a70}
.pips{display:flex;gap:4px;margin-top:6px}.pips i{width:24px;height:6px;background:#ffffff1e}.pips i.on{background:var(--acc)}.cperk{font:700 14px var(--ui);color:#d4e595;margin-top:8px}.wstats{font:700 13px var(--ui);color:#c1d1ab;margin-top:5px;letter-spacing:1px}.need{font:700 12px var(--ui);color:#ff9a6a}
.slots{display:flex;gap:10px}.slot{flex:1;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#0b1214;border:1px dashed #d6ed8066;font:700 13px var(--ui);color:#c1d1ab;text-align:center;padding:4px}.slot.lockedslot{border-color:#ffffff1e;color:#66736b}
.skins{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.skin{padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}.skin b{font:700 17px var(--ui)}.skin .sw{width:56px;height:56px;border-radius:50%;border:3px solid #0008}.skin small{font:700 13px var(--ui);color:#a3b2a7}.skin.selected{border-color:var(--acc);background:#1b261c}.skin.locked{opacity:.7}
/* modals */
#overlay{position:absolute;inset:0;background:#040809dd;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:50}
.modal{width:800px;max-height:840px;overflow:auto;padding:34px;border:1px solid #b8cca740;background:linear-gradient(180deg,#132022,#0d1719);box-shadow:0 20px 80px #000;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}.modal h2{font:42px/1.08 var(--disp);letter-spacing:1px;margin:12px 0 10px;font-weight:400}.modal h2.bad{color:#ff7a6b}.modal p{font:500 16.5px/1.55 var(--ui);margin:0 0 16px;color:#bdc8c5}.modal p.helpline b{color:var(--acc)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.card{padding:14px;border:1px solid #ffffff16;background:#0b1214;text-align:left}.card small{display:block;font:700 12.5px var(--ui);letter-spacing:1.5px;color:#a3b2a7}.card b{display:block;font:30px var(--disp);margin-top:8px;color:#eef6dc;font-weight:400}.card b i{font:700 15px var(--ui);font-style:normal;color:#8a978f}
.modal .secondary,.modal .primary{margin-top:10px}.modal .rowbtns .secondary{margin-top:10px}.starbig{display:flex;justify-content:center;gap:14px;margin:12px 0}.starbig span{opacity:0;transform:scale(.3) rotate(-40deg);animation:starin .5s forwards}.starbig span svg{filter:drop-shadow(0 0 12px #ffc83a)}@keyframes starin{to{opacity:1;transform:none}}
.scoreline{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:4px 0 8px}.scoreline span{font:700 14px var(--ui);letter-spacing:.3em;color:var(--mut)}.scoreline b{font:44px var(--disp);color:#fff;text-shadow:0 0 22px #d6ed8066;font-weight:400}.scoreline em,.survbig em{font:700 13px var(--ui);font-style:normal;letter-spacing:.2em;color:#141c12;background:#ffd45a;padding:3px 9px;animation:blink .8s infinite}.scoreline small{font:700 14px var(--ui);color:#8a978f}
.survbig{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.survbig>div{padding:16px;background:#1d140c;border:1px solid #ffb34760;text-align:center}.survbig small{display:block;font:700 13px var(--ui);letter-spacing:.25em;color:#ffcf95}.survbig b{display:block;font:58px/1.1 var(--disp);color:#ffc070;text-shadow:0 0 24px #ff8a3a66;font-weight:400}
.srows{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}.srow{display:flex;align-items:center;gap:10px;font:600 15.5px var(--ui);color:#8a978f}.srow.ok{color:#eef6dc}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.perk{position:relative;padding:24px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:#141f1b;border-color:#ffd45a60;color:inherit}.perk b{font:19px var(--disp);font-weight:400;letter-spacing:.5px}.perk small{font:600 15px/1.4 var(--ui);color:#bcc6c3}.perk kbd{position:absolute;left:10px;top:10px}.perk em{font:700 13px var(--ui);font-style:normal;color:#ffd45a}.perk:hover:not(:disabled){background:#2c3320;border-color:#ffd45a;box-shadow:0 0 24px #ffd45a33}
/* touch */
#touch{position:absolute;inset:auto 0 0 0;height:330px;pointer-events:none;display:none;z-index:35}.touchmode #hud:not([hidden])~#touch{display:block}
#joystick{position:absolute;left:52px;bottom:140px;width:190px;height:190px;border-radius:50%;background:#ffffff12;border:3px solid #ffffff38;pointer-events:auto;touch-action:none}#joystick i{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:#d6ed8060;border:3px solid var(--acc)}
.tbtns{position:absolute;right:44px;bottom:140px;display:flex;gap:14px;align-items:flex-end;pointer-events:auto}.tbtns button{width:100px;height:100px;border-radius:50%;font:16px var(--disp);letter-spacing:1px;background:#ffffff16;touch-action:none}#touchFire{width:140px!important;height:140px!important;background:#ff5a4a44;border:3px solid #ff7a6b;font-size:20px!important}
#tFury{position:relative;overflow:hidden;background:#3a14089a;border:3px solid #ff6a3a77;color:#ffb08a}#tFury:before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0)*100%);background:#ff6a3a55}#tFury.rdy{border-color:#ffb347;color:#fff;animation:furyrdy .7s infinite alternate}
.touchmode #bottom .skills{display:none}
/* small screens (phones): enlarge key HUD/menus */
.small #missionPanel{transform:scale(1.32);transform-origin:0 0}.small #missionPanel p{display:none}.small #radar{transform:scale(1.25);transform-origin:100% 0}
.small #bottom{height:118px;transform:scale(1.18);transform-origin:50% 100%;left:140px;right:140px}.small .hullbox{width:330px}
.small #topbar nav button{height:52px;min-width:60px;font-size:18px}.small .topcenter{transform:translateX(-50%) scale(1.3);transform-origin:50% 0}
.small #comboBox,.small #buffs{transform:scale(1.3);transform-origin:100% 0}.small #buffs{transform-origin:0 0;top:330px}
.small .menu-help{display:none}.small .primary .lbl,.small .surv .lbl{font-size:24px}.small .primary.big .lbl{font-size:30px}.small .secondary .lbl{font-size:21px}.small .primary .sub,.small .secondary .sub,.small .surv .sub{font-size:16px}
.small .node span{font-size:16px}.small .brief p,.small .brief ul{font-size:17px}.small .gtxt p{font-size:16px}.small .gtxt b{font-size:20px}.small .gbtn{font-size:16px}
.small .modal{width:1000px;max-height:860px;zoom:1}.small .modal p{font-size:20px}.small .card small{font-size:15px}.small .perk small{font-size:18px}.small .perk b{font-size:22px}
.small #joystick{width:230px;height:230px;bottom:150px}.small .tbtns button{width:124px;height:124px;font-size:20px}.small #touchFire{width:170px!important;height:170px!important}