:root{--bg:#07131d;--navy:#0b1d2a;--panel:#102735;--panel2:#142f3e;--line:#294554;--text:#eef5ef;--muted:#91a7ad;--lime:#a8f04a;--lime2:#68c94d;--coral:#ff5d7d;--cyan:#51ddeb;--violet:#8d6be8;--amber:#ffc15a;--danger:#ff665d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030a10;color:var(--text);font-family:Inter,"Noto Sans KR",Pretendard,system-ui,sans-serif}button{border:0;color:inherit;font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35;filter:saturate(.3)}
#app{position:fixed;inset:0;margin:auto;width:min(100vw,177.78vh);height:min(100vh,56.25vw);min-width:600px;min-height:337px;overflow:hidden;background:var(--bg);box-shadow:0 0 90px #000}
.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}.overline,.kicker{margin:0;color:var(--lime);font-size:clamp(8px,1.25vh,12px);font-weight:900;letter-spacing:.18em;text-transform:uppercase}.btn{min-height:42px;padding:0 20px;border-radius:9px;font-weight:900;letter-spacing:.02em;transition:.12s transform,.12s filter}.btn:active,.icon-btn:active,.city-node:active,.support-card:active,.mutation:active,.power:active{transform:translateY(1px) scale(.98)}.btn.lime{background:var(--lime);color:#10200c;box-shadow:inset 0 -3px #5faf38,0 8px 20px #8ee4491c}.btn.quiet{background:#132b38;border:1px solid var(--line);color:#d9e4e5}.btn.wide{width:100%}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#102632cc;color:#cbd8da;font-size:25px;display:grid;place-items:center}
#titleScreen{background:#07131d}.title-bg{position:absolute;inset:0;background:url('assets/hero.webp') center/cover no-repeat;animation:titlePan 16s ease-in-out infinite alternate}.title-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#04101af2 0,#07131dcc 29%,#07131d22 63%,#07131d3a),linear-gradient(0deg,#03090ecc,transparent 38%)}@keyframes titlePan{to{transform:scale(1.03) translateX(-.6%)}}.title-panel{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);width:39%}.title-panel h1{margin:.03em 0 .07em;font-size:clamp(64px,15vh,144px);line-height:.88;letter-spacing:-.075em;font-weight:1000;text-shadow:0 5px 0 #213543}.title-panel h1 span{color:var(--lime)}.title-copy{margin:0;color:#d2dddf;font-weight:700;font-size:clamp(14px,2.45vh,23px);line-height:1.55}.title-actions{display:flex;gap:10px;margin-top:8%}.save-note{margin:16px 0;color:#6f8991;font-size:11px}.build-tag{position:absolute;right:2.5%;bottom:2.7%;font-size:9px;font-weight:800;letter-spacing:.14em;color:#8ca0a5}
.appbar{height:13%;min-height:64px;padding:0 2.6%;display:flex;align-items:center;gap:16px;border-bottom:1px solid #1a3847;background:#081721;position:relative;z-index:5}.appbar h2{margin:1px 0 0;font-size:clamp(17px,2.9vh,28px);line-height:1}.currencies{margin-left:auto;display:flex;gap:8px}.currencies>span{height:34px;padding:0 12px;display:flex;align-items:center;gap:7px;background:#102631;border:1px solid #234251;border-radius:9px;font-size:clamp(9px,1.5vh,13px);color:#9fb0b4}.currencies b{color:#eef6ef}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;box-shadow:0 0 9px currentColor}.dot.gene{background:var(--cyan);color:var(--cyan)}.dot.matter{background:var(--lime);color:var(--lime)}
.campaign-layout{position:absolute;inset:13% 0 9%;display:grid;grid-template-columns:1fr 30%;background:radial-gradient(circle at 35% 50%,#133c52,#07151f 62%)}.globe{position:relative;overflow:hidden;background:radial-gradient(ellipse at 42% 53%,#255667 0 13%,#173f51 14% 29%,transparent 30%),radial-gradient(ellipse at 42% 53%,#0c2432 0 49%,#07131d 50%);}.globe:before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;left:10%;top:50%;transform:translateY(-50%);box-shadow:inset -30px -15px 70px #030a10,0 0 60px #4edcf022;border:1px solid #387185}.grid-lines{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(#8eeaff 1px,transparent 1px),linear-gradient(90deg,#8eeaff 1px,transparent 1px);background-size:5.5% 9%}.route-line{position:absolute;height:2px;background:linear-gradient(90deg,#51ddeb33,#a8f04a);transform-origin:left;box-shadow:0 0 8px #75eedd}.city-node{position:absolute;z-index:2;width:clamp(46px,7vh,68px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #4f7e8e;background:#0d2531;box-shadow:0 0 0 5px #081720aa,0 8px 18px #0008}.city-node:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#1b4657}.city-node b{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:clamp(9px,1.5vh,13px)}.city-node.current{border-color:var(--lime);box-shadow:0 0 0 6px #a8f04a18,0 0 22px #a8f04a55}.city-node.current:after{background:#315f3b}.city-node.done:after{background:var(--lime)}.city-node.done b{color:#12230e}.city-node.lock{filter:grayscale(1);opacity:.35}.city-card{margin:4% 7% 5% 0;padding:7% 7% 5%;border:1px solid var(--line);border-radius:14px;background:#0b202bee;box-shadow:0 24px 45px #0008}.city-card h3{margin:2% 0 0;font-size:clamp(26px,5.8vh,54px);letter-spacing:-.05em}.city-sub{margin:0 0 6%;color:var(--muted);font-size:clamp(9px,1.6vh,14px)}.threat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.threat-row i{display:flex;gap:4px}.threat-row i b{display:block;width:17px;height:5px;border-radius:2px;background:#27444e}.threat-row i b.on{background:var(--coral)}.district-list{display:grid;gap:5px;margin:5% 0}.district{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;padding:7px 8px;background:#0c1921;border:1px solid #1c3946;border-radius:7px;color:#9fb0b4;text-align:left}.district strong{width:19px;height:19px;display:grid;place-items:center;border:1px solid #41616c;border-radius:50%;font-size:9px}.district b{font-size:clamp(8px,1.35vh,12px)}.district small{font-size:9px}.district.selected{border-color:var(--lime);background:#142b29;color:#eef5ef}.district.done strong{background:var(--lime);color:#13220d;border-color:var(--lime)}.district.lock{opacity:.3}.bottom-nav{position:absolute;z-index:5;bottom:0;width:100%;height:9%;display:flex;justify-content:center;gap:4%;align-items:center;background:#07141d;border-top:1px solid #193745}.bottom-nav button{background:0;color:#617a81;font-weight:800;font-size:clamp(9px,1.45vh,13px)}.bottom-nav button.selected{color:var(--lime)}
.lab-layout{position:absolute;inset:13% 0 0;display:grid;grid-template-columns:25% 1fr;background:#07151f}.specimen{padding:6% 8%;border-right:1px solid #1f3c49;background:radial-gradient(circle at 50% 32%,#173c40,#091923 60%)}.specimen-ring{width:85%;aspect-ratio:1;margin:0 auto 5%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#234a42,#0a2028 65%);border:1px solid #3b665e;box-shadow:inset 0 0 28px #8ee65a20}.specimen-ring img{width:96%;filter:drop-shadow(0 15px 10px #0008);animation:specFloat 2.7s ease-in-out infinite}@keyframes specFloat{50%{transform:translateY(-5px)}}.specimen h3{margin:4px 0;font-size:clamp(17px,3vh,27px)}.specimen>p:not(.overline){color:var(--muted);font-size:clamp(9px,1.45vh,12px);line-height:1.55}.lab-total{margin-top:12%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#0b1b24;display:flex;justify-content:space-between;font-size:10px}.lab-total b{color:var(--lime)}.research-grid{padding:2.2%;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;overflow:auto}.research{position:relative;padding:10px;text-align:left;border:1px solid #24424e;border-radius:10px;background:#0d222c;overflow:hidden}.research:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--node,#a8f04a)}.research .r-head{display:flex;justify-content:space-between;gap:5px}.research .r-icon{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#17343f;color:var(--node);font-weight:1000}.research .r-level{font-size:9px;color:var(--node);font-weight:900}.research h4{margin:8px 0 3px;font-size:clamp(9px,1.45vh,13px)}.research p{margin:0;color:var(--muted);font-size:clamp(7px,1.08vh,9px);line-height:1.4}.research .r-cost{position:absolute;right:8px;bottom:7px;color:var(--cyan);font-size:9px;font-weight:900}.research.max{border-color:#4f7440;background:#122a28}.research.locked{filter:saturate(.2);opacity:.45}
.archive-grid{position:absolute;inset:13% 0 0;padding:2.5%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#07151f}.archive-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#0e232d}.archive-card img{display:block;width:60%;height:50%;object-fit:contain;margin:auto;filter:drop-shadow(0 10px 9px #0008)}.archive-card h3{margin:4px 0;font-size:clamp(12px,2vh,18px)}.archive-card p{color:var(--muted);font-size:clamp(8px,1.25vh,11px);line-height:1.4}
#briefScreen{background:#06111a}.brief-art{position:absolute;inset:0;background:url('assets/hero.webp') center/cover}.brief-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06111a55,#06111add 56%,#06111afa 74%)}.brief-back{position:absolute;z-index:3;left:2.3%;top:3%}.brief-panel{position:absolute;z-index:2;right:3%;top:4%;bottom:4%;width:39%;padding:2.1%;overflow:auto;border:1px solid #274452;border-radius:15px;background:#091b25ee;box-shadow:0 25px 50px #0009}.brief-panel h2{margin:2px 0;font-size:clamp(23px,5vh,44px);letter-spacing:-.04em}.brief-panel>p:not(.overline):not(.section-label){margin:0 0 4%;color:var(--muted);font-size:clamp(9px,1.5vh,13px)}.objective-box{padding:10px 12px;border-left:3px solid var(--lime);background:#102a31}.objective-box span,.objective-box small{display:block;color:#829aa0;font-size:9px}.objective-box b{display:block;margin:2px 0;font-size:clamp(11px,1.9vh,16px)}.section-label{margin:4% 0 1.5%;color:#829aa0;font-size:9px;font-weight:900;letter-spacing:.12em}.section-label small{float:right;font-weight:600}.mutation-pick,.support-pick{display:flex;gap:6px}.mutation,.support-card{position:relative;flex:1;min-width:0;padding:6px;border:1px solid #294653;border-radius:8px;background:#0c222c;text-align:center}.mutation img{width:55%;height:45px;object-fit:contain}.mutation b,.support-card b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(7px,1.15vh,10px)}.mutation small,.support-card small{font-size:8px;color:var(--muted)}.mutation.selected,.support-card.selected{border-color:var(--lime);background:#16302c}.mutation.locked,.support-card.locked{opacity:.28}.support-card{padding:9px 4px}.support-card .mini-icon{display:grid;place-items:center;width:27px;height:27px;margin:0 auto 4px;border-radius:7px;background:#193640;color:var(--cyan);font-weight:1000}.brief-panel>.btn{margin-top:4%}
#gameScreen{background:#112635}#gameCanvas{position:absolute;width:100%;height:100%;touch-action:none}.mission-hud{position:absolute;z-index:5;left:1.3%;right:1.3%;top:1.8%;height:8%;display:flex;align-items:center;gap:7px;pointer-events:none}.hud-block{height:100%;padding:6px 10px;border:1px solid #2b4955;border-radius:8px;background:#071721e8;box-shadow:0 5px 14px #0006}.mission-name{min-width:17%}.mission-name p{margin:0;color:#708991;font-size:8px;letter-spacing:.15em}.mission-name b{font-size:clamp(10px,1.7vh,15px)}.sync{width:24%}.sync>span{color:#718a92;font-size:8px}.sync>b{float:right;font-size:10px}.sync>i{display:block;clear:both;height:5px;margin-top:4px;background:#1d3640;border-radius:3px;overflow:hidden}.sync em{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 8px var(--lime)}.alarm{display:flex;align-items:center;gap:7px;height:100%;padding:0 10px;background:#071721e8;border:1px solid #2b4955;border-radius:8px;color:#779099;font-size:8px}.alarm div{display:flex;gap:3px}.alarm i{width:12px;height:5px;background:#25414a;border-radius:2px}.alarm i.on{background:var(--coral);box-shadow:0 0 6px #ff5d7d88}.timer{margin-left:auto;font-size:clamp(17px,3.2vh,29px);font-weight:1000;text-shadow:0 2px 8px #000}.hud-pause{pointer-events:auto;width:39px;height:39px;border:1px solid #2b4955;border-radius:8px;background:#071721e8;font-weight:900}.intel{position:absolute;z-index:5;left:50%;top:12%;transform:translateX(-50%);padding:7px 13px;border-radius:7px;background:#071721e8;border:1px solid #35535e;color:#c8d7d9;font-size:clamp(8px,1.35vh,11px);font-weight:750;pointer-events:none;transition:.2s opacity}.chain{position:absolute;z-index:4;left:50%;top:20%;transform:translateX(-50%);font-size:clamp(19px,4vh,35px);font-weight:1000;color:var(--lime);text-shadow:0 3px 12px #000}.power-dock{position:absolute;z-index:6;left:50%;bottom:2.4%;transform:translateX(-50%);display:flex;gap:7px;height:11%;min-height:58px}.awaken,.power{position:relative;min-width:clamp(92px,14vh,132px);padding:5px 10px;border:1px solid #38535d;border-radius:11px;background:#091b25eF;box-shadow:0 8px 22px #0008;text-align:left}.awaken{border-color:#719b50;background:#132b27}.awaken-mark{float:left;width:31px;height:31px;margin:2px 8px 0 0;border:5px solid var(--lime);border-radius:50%;box-shadow:inset 0 0 0 3px #132b27,0 0 12px #a8f04a55}.awaken b,.power b{display:block;font-size:clamp(8px,1.35vh,11px)}.awaken small,.power small{color:#789097;font-size:8px}.awaken em{color:var(--lime);font-style:normal}.power{min-width:clamp(80px,12vh,112px);text-align:center}.power .p-icon{display:grid;place-items:center;width:25px;height:25px;margin:auto;border-radius:7px;background:#153440;color:var(--cyan);font-size:14px;font-weight:1000}.power.cool:after{content:"";position:absolute;inset:0;border-radius:10px;background:#06111acc}.power .cd{position:absolute;z-index:2;inset:0;display:none;place-items:center;font-weight:1000}.power.cool .cd{display:grid}.pause-layer{position:absolute;z-index:20;inset:0;display:none;place-items:center;background:#030b10cc;backdrop-filter:blur(3px)}.pause-layer.on{display:grid}.pause-card{width:310px;padding:25px;border:1px solid var(--line);border-radius:14px;background:#0d222c;text-align:center}.pause-card h2{margin:4px 0 18px}.pause-card .btn{display:block;width:100%;margin-top:8px}
.result-screen{background:#06131d}.result-glow{position:absolute;inset:0;background:radial-gradient(circle,#2d623f 0,#07151f 46%)}.result-card{position:absolute;z-index:2;width:min(58%,620px);left:50%;top:50%;transform:translate(-50%,-50%);padding:3%;border:1px solid #355847;border-radius:16px;background:#0b202bea;text-align:center;box-shadow:0 25px 60px #000a}.result-card h2{margin:3px 0;font-size:clamp(24px,5.5vh,52px)}.stars{display:flex;justify-content:center;gap:7px;margin:2%}.stars i{width:30px;height:30px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 35%);background:#29434a}.stars i.on{background:var(--amber);filter:drop-shadow(0 0 6px #ffc15a88)}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:3% 0}.result-stats div,.reward{padding:10px;border:1px solid var(--line);border-radius:8px;background:#0c1a22}.result-stats span,.reward span{display:block;color:#789098;font-size:9px}.result-stats b{font-size:clamp(16px,3vh,27px)}.reward{display:flex;justify-content:space-between;padding:9px 14px}.reward b{color:var(--cyan)}#resultHint{color:var(--muted);font-size:10px}.result-actions{display:flex;gap:8px}.result-actions .btn{flex:1}

/* Field interface: strong type hierarchy, opaque controls, and thumb-sized targets. */
#app{min-width:0;min-height:0}
.overline,.kicker{font-size:clamp(10px,1.7vh,14px);letter-spacing:.11em}
.btn,.icon-btn{min-height:44px}
.campaign-layout{grid-template-columns:1fr 36%}
.city-card{margin:3% 4% 3% 0;padding:5% 6%;display:flex;flex-direction:column;overflow:auto}
.city-card h3{font-size:clamp(26px,5.2vh,50px)}
.city-sub{font-size:clamp(11px,1.9vh,15px);margin-bottom:3%}
.district-list{margin:3% 0;flex:1;align-content:start}
.district{min-height:42px;padding:7px 9px}
.district b{font-size:clamp(11px,1.7vh,14px)}.district small{font-size:clamp(9px,1.45vh,12px)}
.bottom-nav button{font-size:clamp(12px,1.8vh,16px);min-width:75px;min-height:38px}
.research-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(105px,auto);align-content:start;padding:2.2%;gap:9px}
.research{min-height:105px;padding:11px}.research .r-icon{width:32px;height:32px}
.research h4{font-size:clamp(12px,1.85vh,16px);margin:6px 0 3px}.research p{font-size:clamp(10px,1.5vh,12px);padding-right:18px}.research .r-cost,.research .r-level{font-size:clamp(10px,1.5vh,12px)}
.lab-total,.specimen>p:not(.overline){font-size:clamp(10px,1.5vh,13px)}
.specimen{overflow:auto}.specimen-ring{width:min(72%,20vh);margin-bottom:2%}.lab-total{margin-top:5%}
.adapt-label{margin:12px 0 6px;color:var(--cyan);font-size:clamp(10px,1.4vh,12px);font-weight:900;letter-spacing:.08em}
#adaptations{display:grid;gap:5px}.adapt-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;text-align:left;padding:7px 8px;border:1px solid #34535b;border-radius:7px;background:#102730;color:#e4eee5;cursor:pointer}.adapt-row b{display:block;font-size:clamp(10px,1.55vh,13px)}.adapt-row em{font-size:10px;color:var(--lime);font-style:normal}.adapt-row small{display:block;margin-top:2px;color:#9fb5b6;font-size:clamp(9px,1.28vh,11px)}.adapt-row strong{flex:none;color:var(--lime);font-size:clamp(9px,1.25vh,11px)}.adapt-row:disabled{opacity:.57;cursor:default}
.brief-shade{background:linear-gradient(90deg,#06111a33,#06111a99 42%,#06111af5 56%)}
.brief-panel{width:50%;padding:2.5%;border-radius:12px}.brief-panel>p:not(.overline):not(.section-label){font-size:clamp(11px,1.7vh,14px)}
.objective-box span,.objective-box small,.section-label{font-size:clamp(10px,1.55vh,13px)}
.mutation-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mutation{min-height:71px;padding:3px}.mutation img{height:40px}
.support-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.support-card{min-height:50px;display:grid;grid-template-columns:26px 1fr;align-content:center;text-align:left;gap:0 6px;padding:4px 7px}.support-card .mini-icon{grid-row:span 2;margin:0;width:25px;height:25px}
.mutation b,.support-card b{font-size:clamp(10px,1.5vh,12px)}.mutation small,.support-card small{font-size:clamp(9px,1.3vh,11px)}
.section-label{margin:3% 0 1.5%}.brief-panel>.btn{margin-top:2%;position:sticky;bottom:-2%;box-shadow:0 -8px 20px #091b25}
.mission-hud{height:9%;gap:5px}.hud-block{padding:6px 9px}.mission-name{min-width:16%}.mission-name p,.sync>span,.momentum>span,.alarm{font-size:clamp(9px,1.3vh,12px)}.mission-name b,.sync>b,.momentum>b{font-size:clamp(11px,1.7vh,15px)}
.sync{width:22%}.momentum{width:15%;min-width:90px}.momentum>span{color:#89a4aa}.momentum>b{float:right;color:var(--lime)}.momentum>i{display:block;clear:both;height:5px;margin-top:4px;background:#1d3640;border-radius:3px;overflow:hidden}.momentum em{display:block;height:100%;width:0;background:linear-gradient(90deg,#51ddeb,#a8f04a)}
.alarm i{width:clamp(8px,1.5vw,16px);height:6px}.hud-pause{min-width:44px;min-height:44px}
.intel{font-size:clamp(11px,1.75vh,15px);font-weight:800;max-width:65%;text-align:center;white-space:normal}
.power-dock{height:12%;min-height:60px}.awaken,.power{min-width:clamp(90px,13.5vh,128px);min-height:58px}.awaken b,.power b{font-size:clamp(11px,1.65vh,14px)}.awaken small,.power small{font-size:clamp(9px,1.4vh,11px)}.power .p-icon{font-size:15px}
.command-hint{position:absolute;z-index:4;left:1.5%;bottom:3%;padding:6px 9px;background:#071721d8;border:1px solid #36505c;border-radius:7px;color:#a7c0c2;font-size:clamp(10px,1.5vh,12px);pointer-events:none}
.awaken.ready{border-color:var(--lime);box-shadow:0 0 0 2px #a8f04a22,0 0 17px #a8f04a66}.awaken.ready .awaken-mark{background:#a8f04a44}
.result-stats span,.reward span,#resultHint{font-size:clamp(10px,1.55vh,13px)}
.result-rewards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-rewards .reward{margin:0}.result-rewards .reward:last-child b{color:var(--lime)}
.title-bg{filter:saturate(.82) contrast(1.08)}.title-vignette{background:linear-gradient(90deg,#04101afa 0,#07131de8 34%,#07131d33 68%,#07131d55),linear-gradient(0deg,#03090edc,transparent 40%)}
.title-panel{border-left:3px solid var(--lime);padding-left:2.3%}.title-panel h1{letter-spacing:-.085em}.title-actions .btn{min-width:125px}
.campaign-status{position:absolute;left:3%;top:4%;min-width:152px;padding:10px 12px;background:#081b26e8;border:1px solid #32606d;border-radius:8px;box-shadow:0 8px 22px #0006}.campaign-status span{color:#a1b8ba;font-size:clamp(10px,1.4vh,12px);font-weight:800}.campaign-status b{float:right;color:var(--lime);font-size:clamp(11px,1.6vh,14px)}.campaign-status i{display:block;clear:both;height:5px;margin-top:8px;border-radius:5px;background:#22414b;overflow:hidden}.campaign-status em{display:block;height:100%;width:0;background:var(--lime)}
.power.armed{border-color:var(--cyan);box-shadow:0 0 0 2px #51ddeb4a,0 8px 22px #0008;background:#16323a}.power.armed .p-icon{background:var(--cyan);color:#0b222b}
.city-node.current{animation:nodePulse 2.4s ease-in-out infinite}@keyframes nodePulse{50%{box-shadow:0 0 0 11px #a8f04a0e,0 0 29px #a8f04a77}}
.science-badge{position:absolute;z-index:5;top:12%;left:2%;padding:7px 10px;border:1px solid #8d6be888;border-radius:7px;background:#121d35e8;color:#c5c9dd;font-size:clamp(11px,1.6vh,14px);font-weight:800;pointer-events:none}.science-badge b{color:#d4bfff;margin-left:5px}.science-badge[hidden]{display:none}
.result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.result-stats div{min-width:0;padding:9px 4px}.result-stats b{font-size:clamp(13px,2.6vh,23px)}.result-grade{display:flex;justify-content:center;gap:8px;margin:-2% 0 2%}.result-grade[hidden]{display:none}.result-grade span{padding:4px 8px;border:1px solid #35515a;border-radius:20px;color:#80979b;font-size:clamp(9px,1.4vh,12px);font-weight:800}.result-grade span.earned{border-color:#609c51;color:var(--lime);background:#1b3226}
.sound-toggle{padding:4px 0;background:transparent;color:#9bb5b7;font-size:clamp(10px,1.45vh,12px);font-weight:800;border-bottom:1px solid #52727b}.pause-card #pauseSoundBtn{border-color:#40626b;color:#c3d7da}
.appbar{height:max(13%,52px);min-height:52px}.campaign-layout{top:max(13%,52px)}.lab-layout,.archive-grid{top:max(13%,52px)}
@media(max-height:420px) and (min-aspect-ratio:1.15/1){.mission-hud{height:46px}.intel,.science-badge{top:17%}.chain{top:27%}.title-panel h1{font-size:clamp(54px,14vh,100px)}.result-card{padding:2.2%}.result-card h2{font-size:clamp(23px,4.8vh,36px)}.result-stats{margin:2% 0}.result-grade{margin:0 0 2%}.result-actions .btn{min-height:40px}}
@media(max-height:420px) and (min-aspect-ratio:1.35/1){.appbar{min-height:52px}.brief-panel{top:2%;bottom:2%}.mutation img{height:31px}.mutation{min-height:59px}.support-card{min-height:43px}.section-label{margin:2% 0 1%}.objective-box{padding:6px 10px}.research-grid{grid-auto-rows:minmax(94px,auto)}.research{min-height:94px}.power-dock{bottom:1%;min-height:53px}.command-hint{bottom:2%}.specimen-ring{width:min(55%,13vh)}.adapt-row{padding:5px 7px}}

.city-card{border-top:2px solid var(--city-accent,var(--lime))}.city-card .overline{color:var(--city-accent,var(--lime))}.city-node.current{border-color:var(--city-accent,var(--lime))}.city-node.current:after{background:#315f3b}
.archive-grid{overflow:auto;align-content:start;grid-auto-rows:minmax(180px,auto)}

/* Keep the whole 16:9 playfield inside Android's visible browser viewport. */
html,body{height:100dvh}
#app{width:min(100vw,calc(var(--usable-height,100dvh)*16/9));height:min(var(--usable-height,100dvh),56.25vw)}
.title-bg,.brief-art{background-image:url('assets/hero.webp');image-rendering:auto}
.title-bg{filter:none}.title-vignette{background:linear-gradient(90deg,#06141bed 0,#06141bdc 35%,#06141b21 72%),linear-gradient(0deg,#06141b94,transparent 45%)}
.brief-shade{background:linear-gradient(90deg,#06111a42,#06111aaa 45%,#06111af6 62%)}
#powerButtons{display:flex;gap:7px}
.p-icon svg,.mini-icon svg{display:block;width:20px;height:20px}
.power .p-icon{width:27px;height:27px}
.power.armed{outline:2px solid #e2faed;outline-offset:2px}
.intel{color:#eff8e9;background:#081b25f2;border-color:#577b73;box-shadow:0 5px 18px #0009}
.command-hint{color:#e0efeb;background:#081a25ed}
@media(max-height:420px) and (min-aspect-ratio:1.35/1){.power-dock{height:15%;bottom:2%}.awaken,.power{min-height:55px}.brief-panel{width:53%}}

/* The launch screens remain usable if an in-app browser denies orientation lock. */
@media(max-aspect-ratio:1.15/1){
 #app{width:100vw;height:100dvh}
 .title-panel{left:7%;top:62%;width:86%}.title-panel h1{font-size:clamp(68px,19vw,115px)}.title-copy{font-size:16px}.title-actions{margin-top:22px}
 .appbar{height:64px;min-height:64px;gap:8px}.appbar h2{font-size:19px}.currencies{gap:4px}.currencies>span{height:30px;padding:0 5px;font-size:9px}
 .campaign-layout{inset:64px 0 54px;display:block}.globe{height:48%}.globe:before{width:78%;left:5%}.campaign-status{top:2%;left:3%;padding:6px 9px}.city-node{width:42px}
 .city-card{height:52%;margin:0;padding:14px 5%;border-radius:0}.city-card h3{font-size:29px}.city-sub{margin:2px 0 5px}.district-list{gap:4px;margin:5px 0}.district{min-height:37px}.threat-row{padding:4px 0}.bottom-nav{height:54px}
 .brief-art{background-position:65% center}.brief-back{left:4%;top:2%}.brief-panel{left:4%;right:4%;top:11%;bottom:3%;width:92%;padding:5%;background:#091b25f5}.brief-panel h2{font-size:30px}.mutation{min-height:76px}.mutation img{height:39px}.support-card{min-height:56px}.brief-panel>.btn{min-height:48px}
 .lab-layout{inset:64px 0 0;display:block;overflow:auto}.specimen{padding:12px 5%;display:grid;grid-template-columns:90px 1fr;gap:2px 12px}.specimen-ring{width:84px;grid-row:span 4;margin:0}.specimen h3{font-size:18px}.specimen>p:not(.overline){font-size:11px}.lab-total{margin:3px 0;max-width:200px}.adapt-label,#adaptations{grid-column:span 2}.research-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:5%;gap:8px}
 .archive-grid{inset:64px 0 0;grid-template-columns:repeat(2,1fr);overflow:auto}.archive-card{min-height:180px}.archive-card img{height:100px}
 .mission-hud{top:1%;height:auto;min-height:70px;left:2%;right:2%;flex-wrap:wrap;gap:4px}.hud-block{height:35px;padding:3px 6px}.mission-name{min-width:34%}.sync{width:30%}.momentum{width:28%;min-width:0}.alarm{height:28px;padding:0 5px}.timer{font-size:18px}.hud-pause{width:34px;height:34px;min-width:34px;min-height:34px;margin-left:auto}
 #gameCanvas{top:17%;width:100%;height:auto;aspect-ratio:16/9}.intel{top:12%;max-width:94%;width:max-content}.science-badge{top:12%}.chain{top:19%}
 .power-dock{bottom:2%;width:96%;height:70px;min-height:70px;gap:4px;justify-content:center}.awaken,.power{min-width:0;flex:1;padding:4px;min-height:65px}.awaken{flex:1.15}.awaken-mark{width:22px;height:22px;border-width:3px;margin:7px 3px 0 0}.awaken b,.power b{font-size:10px}.awaken small,.power small{font-size:9px}#powerButtons{flex:3;gap:4px}.power .p-icon{width:22px;height:22px}.p-icon svg{width:17px;height:17px}.command-hint{bottom:85px;left:3%}
 .result-card{width:92%;max-height:92%;overflow:auto;padding:5%}.result-card h2{font-size:30px}.result-stats{grid-template-columns:repeat(2,1fr)}
}