: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/hero20.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/hero20.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/hero20.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)}
}


/* v11 overrides */
.title-panel{width:41%;padding:2.2% 2.4%;background:linear-gradient(180deg,#071723cc,#081923a6);border:1px solid #294653;border-radius:18px;box-shadow:0 25px 60px #0008, inset 0 1px 0 #ffffff10}
.title-actions{margin-top:6%}
.title-chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px}
.title-chips span{padding:6px 10px;border-radius:999px;background:#102833d9;border:1px solid #2d4a56;color:#dce9ea;font-size:11px;font-weight:800}
.sound-toggle{margin-top:4px}
.route-line{display:none!important}
.globe{background:
 linear-gradient(180deg,#0a1722,#07131d 60%),
 url('assets/worldmap.svg') center 58%/88% auto no-repeat;
}
.globe:before{content:none}
.grid-lines{opacity:.08}
.city-node{width:auto;aspect-ratio:auto;padding:0;background:none;border:none;box-shadow:none;filter:none}
.city-node::before{content:'';display:block;width:18px;height:18px;border-radius:50%;margin:0 auto;background:#8ab7c7;border:1px solid #dff7ff55;box-shadow:0 0 0 7px #58d1ec14,0 0 18px #58d1ec77}
.city-node b{position:static;display:block;margin-top:6px;padding:2px 7px;border-radius:999px;background:#091a24cf;border:1px solid #27414e;color:#dcebed;font-size:11px;font-weight:900;white-space:nowrap}
.city-node.done::before{background:var(--lime);box-shadow:0 0 0 7px #a8f04a18,0 0 18px #a8f04a88}
.city-node.done b{color:#10220a;border-color:#84c95c;background:#d7fab0}
.city-node.lock{opacity:.32}
.city-node.lock::before{background:#507081;box-shadow:0 0 0 7px #76b7ca0b,0 0 12px #76b7ca33}
.city-node.current::before{width:22px;height:22px;background:var(--city-accent,var(--lime));box-shadow:0 0 0 10px color-mix(in srgb,var(--city-accent,var(--lime)) 16%, transparent),0 0 22px color-mix(in srgb,var(--city-accent,var(--lime)) 80%, transparent)}
.city-node.current b{border-color:var(--city-accent,var(--lime));color:#fff}
.city-card{background:linear-gradient(180deg,#0a1d28f4,#0b202bee)}
.city-card h3{margin-top:6px}
#pauseBtn,.pause-layer{display:none!important}
.awaken{display:none!important}
.power-dock{justify-content:center;gap:10px}
#powerButtons{justify-content:center}
.power{min-width:150px;background:linear-gradient(180deg,#102a34,#0b2029);border:1px solid #335060;border-radius:16px;box-shadow:0 10px 24px #0008}
.power.cool{opacity:.55}
.command-hint{bottom:2%}
.intel{top:13%;max-width:70%}
@media(max-aspect-ratio:1.15/1){
 .title-panel{left:4%;top:auto;bottom:6%;width:92%;transform:none;padding:5%}
 .title-chips span{font-size:10px}
 .city-node b{font-size:9px;padding:2px 5px}
}


/* ─── BLOOB 12 polished game HUD, global campaign map and quick-start UI ─── */
:root{--lime:#acfa69;--cyan:#57dcea;--text:#f2f9f5;--muted:#b0c5ca;--line:#355465}
button{touch-action:manipulation}
button:focus-visible{outline:2px solid #c5ff8f;outline-offset:3px}
#app{border:1px solid #38586966}
#titleScreen .title-bg{background-position:57% center;filter:saturate(1.12) contrast(1.12)}
#titleScreen .title-vignette{background:linear-gradient(90deg,#03141ef9 0%,#071d28e9 25%,#0b263180 55%,#09192255 80%),linear-gradient(0deg,#020d13bc,transparent 44%)}
.title-panel{width:43%;padding:2.7% 3.2%;background:linear-gradient(135deg,#0b2332ec,#0a1e28bb);border:1px solid #4a718066;border-left:4px solid var(--lime);box-shadow:0 18px 65px #0006, inset 0 1px #ffffff13;backdrop-filter:blur(5px)}
.title-panel h1{font-size:clamp(68px,16vh,157px);line-height:1.02;margin:.01em 0;letter-spacing:-.095em;color:#fafef1}
.title-panel h1 span{color:#adfa63;text-shadow:0 0 22px #a8ef3877}
.title-panel .title-copy{font-size:clamp(15px,2.5vh,23px);line-height:1.5;color:#e4f3f1}
.title-panel .kicker{color:#b4ff7d}
.title-actions{display:flex;align-items:stretch;gap:10px;margin-top:5%}
.title-actions .btn{flex:1;min-height:54px;white-space:nowrap;font-size:clamp(12px,2.15vh,20px);padding:8px 13px;line-height:1.2}
.title-actions .btn.lime{background:linear-gradient(180deg,#c5fc8d,#97e963);box-shadow:0 8px 24px #80ef4960,inset 0 -4px #62ad46}
.title-actions .btn.quiet{border:1px solid #668391;background:#1b3b4cbf}
.title-chips{margin:15px 0 8px;gap:7px}
.title-chips span{padding:5px 9px;background:#102e3b;border-color:#3d6170;color:#cde7e2}
.save-note{margin-top:11px;color:#a9c1c5;font-size:clamp(10px,1.5vh,12px)}
.title-panel .sound-toggle{font-size:12px}
.build-tag{color:#abc7c5}
.appbar{background:linear-gradient(180deg,#091e2a,#081a25);border-bottom:1px solid #3e6070}
.appbar h2{font-size:clamp(19px,3.3vh,31px);color:#f1fff0}
.appbar .overline{letter-spacing:.13em;color:#abf275}
.campaign-layout{background:#071722;grid-template-columns:minmax(0,1fr) 33%}
.globe{background:#091c29 url('assets/worldmap.svg') center center/100% 100% no-repeat!important;isolation:isolate}
.globe::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,transparent 45%,#04111b8f 100%)}
.grid-lines{background-size:10% 12%;opacity:.07}
.map-help{position:absolute;z-index:3;left:2.4%;bottom:3%;color:#bfd5d9;font-size:clamp(10px,1.6vh,13px);font-weight:700;background:#071a25cb;border:1px solid #335565;padding:7px 12px;border-radius:999px}
.map-help span{color:#718e9b;margin-left:10px}
.campaign-status{z-index:4;border-color:#4b7380;background:#0a2430ed;border-radius:12px}
.city-node{min-width:40px;min-height:43px;filter:none!important;transition:opacity .12s,filter .12s}
.city-node.current{animation:none}
.city-node.current:before{animation:cityGlow 2.1s ease-in-out infinite;box-shadow:0 0 0 7px #a9f87530,0 0 25px #a6f57caa}
@keyframes cityGlow{50%{box-shadow:0 0 0 11px #a9f87516,0 0 32px #a6f57cd8}}
.city-node.lock{opacity:.26;cursor:default}
.city-node.lock b{background:#071a25b5;color:#98bac4}
.city-node.current b{border-color:#aaf471;background:#1c4032;color:#fff}
.city-node b{box-shadow:0 4px 12px #0009}
.city-card{margin:2.6% 5% 3% 0;padding:6% 7% 5%;border:1px solid #416273;border-top:3px solid #aaf471;border-radius:18px;background:linear-gradient(180deg,#0b2936f5,#0a202df7);box-shadow:0 15px 45px #0005}
.city-card h3{font-size:clamp(31px,6.5vh,59px)}
.district{min-height:56px;padding:7px 10px;background:#102530;border:1px solid #345360;border-radius:11px}
.district b{font-size:clamp(10px,1.7vh,15px)}
.district.selected{background:#23402f;border-color:#a8f04a;box-shadow:0 0 0 1px #a8f04a44}
.district.lock{opacity:.32}
.city-card .btn.wide{min-height:60px;font-size:clamp(16px,2.75vh,22px);background:linear-gradient(#c9ff91,#a5f56e)}
.bottom-nav{height:9%;background:#081c27;gap:9%;border-top:1px solid #335262}
.bottom-nav button{font-size:clamp(12px,2vh,16px)}
#gameScreen{background:#09222d}
#gameScreen:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 56%,#03121a60 100%)}
#gameCanvas{touch-action:none}
.mission-hud{z-index:9;left:1%;right:1%;top:1.2%;height:clamp(48px,9%,66px);gap:6px}
.hud-block,.alarm,.timer{background:#092531ed;border:1px solid #4c7180;border-radius:11px;box-shadow:0 5px 14px #0008;backdrop-filter:blur(4px)}
.mission-hud .mission-name{border-left:4px solid var(--lime);padding-left:11px}
.mission-hud .mission-name p{font-size:clamp(9px,1.5vh,12px);color:#aac8cc}
.mission-hud .mission-name b{font-size:clamp(13px,2.5vh,19px);color:#f1faf0}
.mission-hud .hud-block>span,.mission-hud .alarm>span{font-weight:850;color:#b8d0d2}
.hud-block i{background:#345260}
.hud-block i em{border-radius:inherit;background:linear-gradient(90deg,#57dfec,#9bef64)}
.timer{font-weight:1000;color:#f2fbef;text-shadow:0 2px 6px #0006}
.intel{top:12%;z-index:8;max-width:66%;border:1px solid #88b1bd;background:#0b293be8;color:#f2fff3;padding:9px 14px;border-radius:100px;font-size:clamp(10px,1.7vh,14px)}
.command-hint{z-index:8;bottom:2%;left:1.5%;border-radius:999px;padding:8px 13px;color:#dff9eb;background:#0b2a36e4;border-color:#466b75;font-size:clamp(10px,1.6vh,13px)}
.power-dock{z-index:9;bottom:1.4%;height:auto;min-height:64px;padding:5px;border:1px solid #426878;border-radius:18px;background:#071d2ce8;box-shadow:0 10px 30px #0009}
#powerButtons{gap:7px}
.power{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:clamp(133px,20vh,168px);min-height:66px;border:1px solid #486778;border-radius:13px;gap:2px;padding:4px 12px;background:linear-gradient(#1c3b49,#0d2633)}
.power:before{content:"";position:absolute;left:8px;top:11px;bottom:11px;width:3px;border-radius:2px;background:#a9f16d}
.power[data-index="1"]:before{background:#5cddf7}
.power[data-index="2"]:before{background:#efb6fd}
.power .p-icon{color:#c0ff95;background:#2d5a43;width:27px;height:27px;display:grid;place-items:center;border-radius:8px}
.power[data-index="1"] .p-icon{color:#99f6ff;background:#1c4a59}
.power[data-index="2"] .p-icon{color:#eac6ff;background:#473053}
.power b{font-size:clamp(12px,1.85vh,15px);white-space:nowrap;color:#f1f9fa}
.power small{font-size:clamp(9px,1.5vh,12px);color:#b7d0d3}
.power.armed{border-color:#e6ffbc;outline:2px solid #9cf079;box-shadow:0 0 0 3px #9af36f33,0 9px 18px #0008}
.power.cool{opacity:.55;filter:grayscale(.2)}
.chain{text-shadow:0 2px 14px #020a0c;font-weight:1000;letter-spacing:.06em}
#pauseBtn{display:none!important}
@media(max-width:1000px) and (min-aspect-ratio:1.15/1){
 .power{min-width:120px;min-height:52px;flex-direction:row;gap:5px}
 .power b{font-size:12px}.power small{font-size:9px}
 .map-help{font-size:10px}
 .city-card .btn.wide{min-height:45px}
 .title-chips{margin:10px 0}
}
@media(max-aspect-ratio:1.15/1){
 .campaign-layout{display:block}.globe{height:49%}.city-card{height:51%;margin:0;padding:3% 5%;border-radius:0}
 .map-help{font-size:9px;padding:5px 9px}.map-help span{display:none}
 .city-node b{font-size:9px}
 .power-dock{width:95%;bottom:1%;padding:3px}
 .power{min-width:0;flex:1;min-height:56px}
 .title-panel{bottom:5%;top:auto;width:92%;padding:4%;left:4%}
 .title-panel h1{font-size:clamp(60px,16vw,100px)}
 .title-actions .btn{min-height:46px;font-size:14px}
 .title-panel .title-copy{font-size:14px}
 .title-chips{display:none}
}

/* v12 location intelligence */
.city-facts{display:flex;gap:6px;margin:5px 0 13px;flex-wrap:wrap}
.city-facts span{border-radius:100px;background:#183746;border:1px solid #355d6a;color:#bfd8d7;font-size:clamp(9px,1.4vh,12px);font-weight:750;padding:5px 9px}
.city-preview{position:relative;min-height:100px;flex:1;background-position:center center;background-size:cover;border:1px solid #436676;border-radius:11px;overflow:hidden;margin-top:6px;box-shadow:inset 0 0 20px #0006}
.city-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#03141cbe,transparent 75%);pointer-events:none}
.city-preview span{display:block;position:absolute;z-index:1;left:13px;top:9px;color:#d2faf1;font-size:10px;letter-spacing:.13em;font-weight:900;background:#071923bf;border:1px solid #6a9395a0;padding:4px 7px;border-radius:7px}
.city-preview b{position:absolute;bottom:9px;left:12px;z-index:1;color:#fff;font-size:clamp(12px,1.8vh,15px);text-shadow:0 2px 5px #001}
.city-card{display:flex;flex-direction:column;min-height:0}
.city-card .district-list{flex-shrink:0;margin:1% 0 5px}
.city-card .btn.wide{flex-shrink:0;margin-top:10px}
.city-node.lock b{display:none}
.city-node.lock::before{width:13px;height:13px;background:#7191a3;box-shadow:0 0 0 6px #afcadb15,0 0 12px #7aacc355}
@media(max-width:1000px) and (min-aspect-ratio:1.15/1){.city-preview{min-height:70px}.city-facts{margin:2px 0 5px}.city-card .district{min-height:43px}}
@media(max-aspect-ratio:1.15/1){.city-preview{display:none}.city-facts{margin:3px 0 4px}.city-facts span{font-size:8px;padding:2px 5px}.city-card .btn.wide{margin-top:auto}.city-card .district{min-height:33px}}
/* Short landscape phones: keep every mission actionable without scrolling the browser. */
.power.cool{opacity:.92;filter:saturate(.78)}
.power.cool:after{background:#05141c72;border-radius:13px}
.power.cool .cd{color:#f1fff7;font-size:clamp(13px,2.5vh,19px);text-shadow:0 2px 7px #020d13}
@media (max-height:460px) and (min-aspect-ratio:1.15/1){
 .city-card{overflow-y:auto;padding:8px 12px;margin:1.4% 3% 1.5% 0;border-radius:12px;gap:0}
 .city-card h3{font-size:clamp(22px,5.9vh,31px);margin:1px 0}
 .city-card .overline{font-size:9px}
 .city-sub{font-size:10px;margin:0 0 2px}
 .city-facts{margin:2px 0 4px;gap:4px;flex-wrap:nowrap}
 .city-facts span{padding:2px 5px;font-size:8px;white-space:nowrap}
 .threat-row{padding:3px 0;margin:0}
 .district-list{gap:3px!important;margin:4px 0 2px!important}
 .district{min-height:35px;padding:4px 6px;gap:4px;border-radius:7px}
 .district strong{width:16px;height:16px;font-size:9px}
 .district b{font-size:clamp(9px,1.6vh,11px)}
 .district small{font-size:9px}
 .city-preview{display:none}
 .city-card .btn.wide{position:sticky;bottom:0;min-height:38px;font-size:14px;margin-top:5px;box-shadow:0 -5px 12px #071b26}
 .power-dock{height:auto;min-height:53px;padding:3px}
 .power{min-height:50px;min-width:110px;padding:4px 6px}
 .power .p-icon{height:22px;width:22px}
 .power .p-icon svg{height:16px;width:16px}
 .power b{font-size:11px}
 .power small{font-size:9px}
 .map-help{padding:5px 8px;font-size:9px}
}

/* BLOOB v13: discrete selection, drag guidance, locked powers */
#gameCanvas{touch-action:none;cursor:crosshair}
.power.locked,.power:disabled{opacity:.34;filter:grayscale(.75);cursor:not-allowed;border-color:#35434b;background:#101b22}
.power.locked .p-icon{color:#7d9296;background:#273740}
.power.locked .cd{display:grid;font-size:11px;color:#d7e0e3;background:#08151ab8;border-radius:11px}
.support-card.locked{opacity:.42;filter:grayscale(.55)}
.support-card.locked .mini-icon{color:#899ca3}
.power.armed{outline:2px solid #c7ff87;outline-offset:1px}
@media(max-height:420px) and (min-aspect-ratio:1.3/1){.power-dock{min-height:52px}.power{min-height:48px}}

/* BLOOB v17 – landmark-aware city cards and regional tactical zones */
.city-preview small{position:absolute;right:10px;bottom:9px;z-index:1;max-width:70%;background:#0a2332df;color:#d9f5e1;font-size:10px;font-weight:850;padding:5px 8px;border-radius:6px;border:1px solid #5c8070aa;text-align:right}
.city-preview b{bottom:40px}
.city-preview{border-color:#648c81;box-shadow:inset 0 0 20px #0006,0 0 16px #b0f77710}
@media(max-height:510px) and (min-aspect-ratio:1.15/1){.city-preview{display:none}}


/* v18 skill tree */
.lab-layout{grid-template-columns:320px 1fr;overflow:hidden}
.specimen{padding:5% 7%;overflow:auto}
.specimen .btn.wide{margin:12px 0 10px}
.skill-detail{margin-top:12px;padding:12px;border-radius:12px;background:linear-gradient(180deg,#0b1c25,#0d2430);border:1px solid #24414d;min-height:145px}
.skill-detail h4{margin:4px 0 6px;font-size:clamp(15px,2.1vh,22px)}
.skill-detail p{margin:0;color:var(--muted);font-size:clamp(10px,1.4vh,13px);line-height:1.5}
.detail-branch{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.detail-meta{display:grid;gap:8px;margin-top:10px;font-size:11px;color:#b7ccd1}
.detail-meta b{color:#fff}
.tree-scroll{position:relative;overflow:auto;background:radial-gradient(circle at 50% 30%,#0f2232,#081520 62%)}
.research-grid{position:relative;min-width:1480px;height:900px;display:block!important;padding:0!important;background:radial-gradient(circle at 50% 74%,#13263a 0,#0c1b29 18%,#07141e 62%,#050d15 100%)}
.research-grid:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at center,#ffffff0f 0 1px,transparent 1px);background-size:28px 28px;opacity:.2;pointer-events:none}
.tree-lines{position:absolute;inset:0;pointer-events:none}
.tree-line{position:absolute;height:3px;transform-origin:0 50%;background:linear-gradient(90deg,var(--line,#8ef),color-mix(in srgb,var(--line,#8ef) 10%, transparent));opacity:.22;border-radius:999px}
.tree-line.open{opacity:.45}.tree-line.owned{opacity:.95;box-shadow:0 0 10px color-mix(in srgb,var(--line) 35%, transparent)}
.branch-label{position:absolute;transform:translate(-50%,-50%);font-size:13px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--branch);text-shadow:0 0 12px color-mix(in srgb,var(--branch) 38%, transparent)}
.tree-core,.skill-node{position:absolute;transform:translate(-50%,-50%)}
.tree-core{width:138px;height:138px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#173446,#0a1622 72%);border:2px solid #4e6d7e;box-shadow:0 0 0 10px #9ee9ff12,0 0 38px #000a}
.tree-core .core-tag{font-size:11px;font-weight:900;color:#bfffa1;letter-spacing:.18em}.tree-core b{display:block;font-size:20px}.tree-core small{color:#90a8af;font-size:11px}
.skill-node{background:none;border:none;padding:0;text-align:center;color:#eef6f8;cursor:pointer}
.skill-node .node-ring{display:block;width:54px;height:54px;border-radius:50%;margin:0 auto 6px;border:2px solid #3c5c6a;background:radial-gradient(circle,#122838,#09131b 70%);box-shadow:0 0 0 6px #ffffff06;transition:.18s}
.skill-node .node-glyph{position:absolute;left:50%;top:27px;transform:translate(-50%,-50%);font-size:20px;font-weight:900;color:var(--node,#a8f04a);pointer-events:none}
.skill-node b{display:block;min-width:90px;max-width:120px;font-size:11px;line-height:1.1;text-shadow:0 2px 5px #000}
.skill-node small{display:block;margin-top:2px;font-size:10px;color:#9db4ba}
.skill-node.major .node-ring{width:82px;height:82px;box-shadow:0 0 0 10px color-mix(in srgb,var(--node) 10%, transparent),0 0 26px color-mix(in srgb,var(--node) 35%, transparent);border-color:var(--node)}
.skill-node.major .node-glyph{top:41px;font-size:28px}
.skill-node.major b{font-size:13px;min-width:110px;max-width:136px}
.skill-node.selected .node-ring{transform:scale(1.06);box-shadow:0 0 0 9px color-mix(in srgb,var(--node) 12%, transparent),0 0 0 3px #ffffff0a inset,0 0 18px color-mix(in srgb,var(--node) 58%, transparent)}
.skill-node.open .node-ring{border-color:color-mix(in srgb,var(--node) 85%, #d7f8ff)}
.skill-node.owned .node-ring{background:radial-gradient(circle,color-mix(in srgb,var(--node) 22%, #152634),#0a1520 70%);border-color:var(--node)}
.skill-node.owned small{color:var(--node);font-weight:900}
.skill-node.locked{opacity:.4;filter:saturate(.35)}
@media(max-width:980px){.lab-layout{display:block}.tree-scroll{height:64vh}.research-grid{min-width:1320px;height:860px}.specimen{padding:14px 5%}.skill-detail{min-height:120px}}


/* v19 skill icon polish */
.skill-detail{background:linear-gradient(180deg,#0d2230,#091721);box-shadow:inset 0 0 0 1px #2b4651,0 10px 25px #00000025}
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.detail-icon-wrap{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--node) 26%, #163040),#0a1520 72%);box-shadow:0 0 0 1px color-mix(in srgb,var(--node) 55%, #24414d),0 0 18px color-mix(in srgb,var(--node) 22%, transparent)}
.detail-icon{width:44px;height:44px;display:block}
.specimen .adapt-label{margin-top:16px}
.tree-core{background:radial-gradient(circle at 50% 38%,#19485f,#0a1622 68%);overflow:hidden}
.tree-core:before{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid #bfffa133;box-shadow:0 0 18px #bfffa126 inset}
.skill-node .node-ring{background:radial-gradient(circle at 40% 34%,#153446,#09131b 70%)}
.skill-node .node-icon{position:absolute;left:50%;top:27px;transform:translate(-50%,-50%);width:30px;height:30px;pointer-events:none;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--node) 55%, transparent))}
.skill-node.major .node-icon{top:41px;width:42px;height:42px}
.skill-node b{margin-top:1px}
.skill-node.owned .node-icon{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--node) 72%, transparent)) saturate(1.1)}
.skill-node.selected .node-ring:after{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid #ffffff2a}
.skill-node .node-ring{position:relative}
.tree-scroll{background:radial-gradient(circle at 50% 30%,#102436,#081520 62%)}
.research-grid{background:radial-gradient(circle at 50% 74%,#13263a 0,#0c1b29 18%,#07141e 62%,#050d15 100%),linear-gradient(180deg,#0c1a25 0,#0b1520 100%)}
.research-grid:after{content:'';position:absolute;left:50%;bottom:120px;width:620px;height:620px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#51ddeb0d 0,#51ddeb08 25%,transparent 70%);pointer-events:none}
.branch-label{padding:6px 12px;border-radius:999px;background:#07131ccc;border:1px solid color-mix(in srgb,var(--branch) 38%, #21333f)}
.tree-line{height:4px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--line) 28%, transparent))}

/* BLOOB v20 visual system: own artwork and clear focus hierarchy */
#titleScreen{background:#06121d}
.title-bg{background-image:url('assets/hero20.webp')!important;background-position:center center!important;animation:title20Pan 19s ease-in-out infinite alternate!important}
@keyframes title20Pan{0%{transform:scale(1.005)}100%{transform:scale(1.05) translate(-.65%,-.25%)}}
.title-vignette{background:linear-gradient(90deg,#03101df5 0%,#041320df 26%,#04131e94 42%,#04131e04 64%),linear-gradient(0deg,#031018aa,transparent 36%)!important}
.title-orbit{position:absolute;z-index:1;right:8.5%;top:13%;width:38%;height:30%;border:1px solid #abffa010;border-radius:50%;transform:rotate(-8deg);pointer-events:none;animation:halo20 9s ease-in-out infinite alternate}
.title-orbit span:first-child{position:absolute;inset:-12%;border:1px dashed #9cefa129;border-radius:50%}
.title-orbit span:last-child{position:absolute;top:49%;right:0;width:6px;height:6px;border-radius:50%;background:#c7ff91;box-shadow:0 0 19px #b4ff80}
@keyframes halo20{to{transform:rotate(2deg) scale(1.04);opacity:.7}}
.title-panel{border:1px solid #3d616480;border-left:4px solid #b8fa63!important;background:linear-gradient(115deg,#071924ec,#071b26d6 72%,#071c24b5)!important;backdrop-filter:blur(9px);padding:2.5% 2.65%!important;box-shadow:0 24px 80px #0008,0 0 0 1px #ffffff06 inset;border-radius:18px!important;width:42%;left:5.7%;max-height:94%;overflow:auto}
.title-panel .kicker{font-size:clamp(9px,1.5vh,13px);color:#bafa64}
.title-panel h1{font-size:clamp(68px,14.5vh,144px);filter:drop-shadow(0 7px 0 #162a39);margin:.08em 0 .07em}
.title-copy{font-weight:700;line-height:1.5;color:#d7e8e4!important}
.title-actions{margin:5.5% 0 0;gap:9px}
.title-actions .btn{font-size:clamp(13px,2.3vh,19px);min-height:48px;border-radius:11px}
.title-actions .btn.lime{background:linear-gradient(180deg,#c7fa72,#a1e449);box-shadow:inset 0 -4px #7bc636,0 7px 22px #89df3952}
.title-chips span{background:#143442aa;border:1px solid #45646caa;padding:6px 9px}
.build-tag{display:flex;align-items:center;gap:9px;color:#b0c2c4;letter-spacing:.13em;right:2.5%;bottom:3%;background:#071a25ae;padding:8px 12px;border-radius:9px;border:1px solid #ffffff13}
.signal-dot{display:inline-block;width:7px;height:7px;background:#acff69;border-radius:50%;box-shadow:0 0 12px #a8fa62;animation:signal20 2s infinite}
@keyframes signal20{50%{opacity:.35}}
.campaign-layout{background:#071722}
.globe{background:radial-gradient(ellipse 55% 47% at 50% 46%,#1a3b46 0,#0a1b27 72%,#07141e 100%),url('assets/worldmap.svg') center 48%/94% auto no-repeat!important;isolation:isolate;position:relative}
.globe:after{content:'';position:absolute;z-index:0;inset:0;pointer-events:none;background:url('assets/worldmap.svg') center 49%/94% auto no-repeat;opacity:.93;filter:drop-shadow(0 0 12px #43939c1b)}
.map-halo{position:absolute;left:6%;top:5%;width:72%;height:90%;border:1px solid #51ddeb25;border-radius:50%;box-shadow:inset 0 0 80px #51ddeb0b;pointer-events:none;opacity:.8}
.map-coordinate{position:absolute;bottom:4.2%;left:3%;font:900 clamp(8px,1.35vh,12px) monospace;color:#6d969c;letter-spacing:.2em;pointer-events:none}
.city-node{z-index:2!important;transition:filter .18s ease,opacity .18s ease;transform:translate(-50%,-28%)!important}
.city-node::before{width:15px;height:15px;border:2px solid #b7eefa95;background:#487d8d}
.city-node.current::before{width:20px;height:20px;background:#b5f471;box-shadow:0 0 0 7px #a8f04a20,0 0 25px #a8f04ad0}
.city-node.current{filter:drop-shadow(0 0 7px #94f88675)}
.city-node.lock::before{width:12px;height:12px;box-shadow:0 0 0 4px #6d919022,0 0 10px #478a9d33}
.city-node.lock{opacity:.35!important}
.city-node b{background:#071922ea;padding:4px 8px;font-size:clamp(9px,1.5vh,12px);border:1px solid #36637199;box-shadow:0 3px 9px #0008}
.city-node.done b{background:#172f29;color:#c4fb83;border-color:#6da75a}
.city-card{border-top:2px solid #a8f04a;border-left:1px solid #45626d5e;padding:2% 2.2%;background:linear-gradient(160deg,#102a38,#081b28)!important}
.city-card h3{letter-spacing:-.035em;font-weight:1000}
.city-preview{border:1px solid #456878;box-shadow:inset 0 0 0 1px #152f3b}
.district{border-color:#294958;background:#0d2632;transition:background .16s,border-color .16s}
.district.selected{background:#1e3b36;border-color:#9ee56a;box-shadow:0 0 0 1px #a8f04a30 inset}
#briefBtn{background:linear-gradient(180deg,#c4f875,#a0e54a)}
.tree-scroll{scroll-behavior:smooth}
.tree-toolbar{position:sticky;top:8px;left:8px;display:flex;z-index:9;gap:5px;align-items:center;width:max-content;max-width:calc(100% - 16px);padding:7px 9px;border:1px solid #40616d;border-radius:12px;background:#071723ee;box-shadow:0 8px 24px #0008;backdrop-filter:blur(8px)}
.tree-toolbar button{min-height:29px;padding:4px 9px;border-radius:7px;background:#163341;border:1px solid #355665;color:#e5f2f0;font-size:11px;font-weight:900;white-space:nowrap}
.tree-toolbar button:active{background:#3a5c63}
.tree-toolbar button[data-branch="감염"]{color:#b9f578}.tree-toolbar button[data-branch="추적"]{color:#78e1f5}.tree-toolbar button[data-branch="전술"]{color:#ffad8d}.tree-toolbar button[data-branch="생존"]{color:#bb9cff}
.tree-caption{font-size:9px;letter-spacing:.13em;color:#8baab4;font-weight:900;margin-right:5px}
.skill-node{touch-action:pan-x pan-y}
@media(max-height:470px) and (min-aspect-ratio:1.3){.title-panel{width:45%;padding:1.8% 2.2%!important}.title-panel h1{font-size:clamp(60px,13vh,93px)}.title-actions .btn{min-height:39px}.title-chips{margin:9px 0 4px}.title-chips span{padding:4px 7px}.save-note{margin:5px 0}.tree-caption{display:none}.tree-toolbar{padding:4px}.tree-toolbar button{min-height:24px;padding:2px 7px}}
@media(max-aspect-ratio:1.15/1){.title-panel{left:4%;bottom:5%;width:92%;padding:5%!important;max-height:72%}.title-vignette{background:linear-gradient(0deg,#03101dfb 0,#06162299 54%,#06162217 75%)!important}.title-bg{background-position:61% top!important}.city-node b{font-size:9px}.tree-toolbar{max-width:calc(100vw - 16px);overflow-x:auto}.tree-scroll{height:62vh}}
@media(prefers-reduced-motion:reduce){.title-orbit,.title-bg,.signal-dot{animation:none!important}}

/* v20 combat ability feedback */
.skill-toast{position:absolute;z-index:12;top:24%;left:50%;transform:translate(-50%,-18px) scale(.94);pointer-events:none;display:flex;align-items:center;gap:9px;max-width:80%;padding:8px 14px 8px 9px;opacity:0;background:linear-gradient(105deg,#0d2f37ed,#0b1a27ef);border:1px solid #83e9a07f;border-radius:14px;box-shadow:0 0 25px #6fdf7a21,0 12px 25px #0008;transition:opacity .2s ease,transform .22s ease}
.skill-toast.visible{opacity:1;transform:translate(-50%,0) scale(1)}
.skill-toast span{width:33px;height:33px;flex-shrink:0;border-radius:9px;background:#9cf478;color:#12311e;display:grid;place-items:center;font-size:22px;font-weight:900}
.skill-toast b{font-size:clamp(12px,2.2vh,18px);color:#f1ffef;white-space:nowrap}
.skill-toast small{display:block;color:#c5d5d5;font-weight:800;font-size:10px;white-space:nowrap}
.skill-toast[data-kind="shock"]{border-color:#64e7ff9c;box-shadow:0 0 26px #51ddeb33,0 12px 25px #0009}.skill-toast[data-kind="shock"] span{background:#75e9ff;color:#0f2838}
.skill-toast[data-kind="pod"]{border-color:#e2fa889c}
.power{transition:transform .12s ease,background .15s ease,box-shadow .15s ease!important}
.power:not(.cool):not(.locked){border-color:#628069;background:linear-gradient(170deg,#1c3d42,#0d242d)}
.power:focus-visible,.skill-node:focus-visible{outline:2px solid #d2ff96;outline-offset:3px}
.power.armed{box-shadow:0 0 0 2px #9cf88777,0 0 20px #a8f04a35,inset 0 1px #ffffff33}
@media(max-height:470px) and (min-aspect-ratio:1.35){.skill-toast{top:23%;padding:5px 10px;gap:6px}.skill-toast span{width:24px;height:24px;font-size:15px}.skill-toast b{font-size:11px}.skill-toast small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.skill-toast{transition:none}}
/* Keep the evolution tree accessible in short landscape screens. */
@media (max-width:980px) and (min-aspect-ratio:1.4/1){
  .lab-layout{display:grid!important;grid-template-columns:clamp(205px,32%,250px) minmax(0,1fr)!important;overflow:hidden!important;inset:max(13%,52px) 0 0!important}
  .specimen{display:block!important;min-width:0;padding:8px 12px!important;overflow-y:auto!important;overflow-x:hidden!important;border-right:1px solid #345466}
  .specimen-ring{float:left;width:49px!important;max-height:49px;margin:0 10px 3px 0!important}
  .specimen h3{font-size:15px!important}.specimen .overline{font-size:8px!important}.specimen>p:not(.overline){font-size:9px!important}
  .specimen .lab-total{max-width:none!important;clear:both;padding:5px 8px!important;margin:5px 0!important}
  .specimen .skill-detail{min-height:110px!important;margin:6px 0;padding:7px!important}
  .specimen .detail-head{gap:7px;margin-bottom:4px}
  .specimen .detail-icon-wrap{width:40px;height:40px;border-radius:10px}.specimen .detail-icon{width:29px;height:29px}
  .specimen .skill-detail h4{font-size:13px}.specimen .skill-detail p{font-size:9px!important;line-height:1.3}
  .specimen .detail-meta{font-size:9px;gap:3px;margin-top:4px}
  .specimen .btn.wide{min-height:35px;margin:5px 0!important;font-size:11px}
  .specimen #adaptations,.specimen .adapt-label{display:block!important}
  .specimen .adapt-row{padding:5px!important;font-size:9px}
  .tree-scroll{min-width:0;height:100%!important;max-height:none!important;overflow:auto!important}
  .research-grid{min-width:1480px;height:900px}
  .tree-toolbar{position:sticky;left:6px;top:6px;max-width:max-content}
}

.brief-art{background-image:var(--brief-art,url('assets/hero20.webp'))!important;background-position:center!important;filter:saturate(1.12) brightness(.91)}
.brief-shade{background:linear-gradient(90deg,#07131a2b,#081725a9 40%,#081623f7 62%)!important}

.skill-node.just-bought .node-ring{animation:skill20Unlock .68s cubic-bezier(.2,.8,.2,1) 1 both}
.skill-node.just-bought .node-icon{animation:skill20Glow .68s ease-out 1 both}
@keyframes skill20Unlock{0%{transform:scale(.72);box-shadow:0 0 0 0 color-mix(in srgb,var(--node) 0%, transparent)}60%{transform:scale(1.24);box-shadow:0 0 0 18px color-mix(in srgb,var(--node) 18%, transparent),0 0 40px color-mix(in srgb,var(--node) 70%, transparent)}100%{transform:scale(1);box-shadow:0 0 0 9px color-mix(in srgb,var(--node) 12%, transparent),0 0 20px color-mix(in srgb,var(--node) 38%, transparent)}}
@keyframes skill20Glow{0%{filter:brightness(1.8) drop-shadow(0 0 14px var(--node))}100%{filter:brightness(1) drop-shadow(0 0 5px var(--node))}}
@media(prefers-reduced-motion:reduce){.skill-node.just-bought .node-ring,.skill-node.just-bought .node-icon{animation:none}}
.city-node:nth-child(8) b{transform:translate(22px,-21px)}
.city-node:nth-child(1) b{transform:translate(-22px,3px)}
.city-node:nth-child(5) b{transform:translate(16px,7px)}

/* BLOOB 21 — visual hierarchy, tactical feedback and mobile touch polish */
:root{--surface:#081c27;--text-strong:#f2fff7;--neon:#bdff74;--accent-stroke:#395b67}
#app{box-shadow:0 0 0 1px #44606c30,0 34px 95px #000e}
.appbar{background:linear-gradient(115deg,#0c2432,#081720 78%);border-bottom:1px solid #4663726e;box-shadow:0 7px 23px #0003}
.appbar .overline{color:#b5f76f}
.appbar h2{font-weight:950;letter-spacing:-.04em}
.currencies>span{background:linear-gradient(145deg,#153847,#0c212e);border:1px solid #466977a8;box-shadow:inset 0 1px #ffffff0a,0 7px 16px #0003}
.currencies b{font-variant-numeric:tabular-nums;font-weight:950}
.btn.lime:not(:disabled){color:#12240c;border:1px solid #e5ffa57a;background:linear-gradient(180deg,#c8ff7a,#a5e94b 85%);box-shadow:inset 0 2px #ffffff45,inset 0 -4px #74b93a,0 7px 20px #91e54838}
.btn.quiet:not(:disabled){background:linear-gradient(145deg,#244451,#132b37);border:1px solid #567685}
.btn:not(:disabled):active{filter:brightness(1.08)}

/* Stronger opening presentation, keeping original hero art */
.title-panel{border-left:4px solid #baff69!important;box-shadow:0 28px 85px #000b,0 0 45px #85e7bc0a inset!important}
.title-panel h1{background:linear-gradient(180deg,#fffef1 0%,#ddf2ef 56%,#b5e3dc 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 7px 0 #162c3b)!important}
.title-panel h1 span{color:#b9fc70;background:none;-webkit-text-fill-color:#b9fc70}
.title-panel .kicker{display:flex;align-items:center;gap:8px}
.title-panel .kicker:before{content:'';width:5px;height:20px;border-radius:3px;background:var(--lime);box-shadow:0 0 18px #b1fc68}
.title-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:19px;padding:8px 11px;border:1px solid #395564ba;border-radius:10px;background:#0e2c35ba;color:#a7c1ca;font-size:11px;font-weight:900;letter-spacing:.03em}
.title-meta span{display:flex;align-items:center;gap:8px}
.title-meta span i{width:7px;height:7px;border-radius:50%;background:#8af5a7;box-shadow:0 0 10px #7ceea6}
.title-meta b{font-size:12px;color:#d3ffa1;font-variant-numeric:tabular-nums}
.title-actions{margin-top:15px!important}
.title-actions .btn{box-shadow:0 7px 17px #0005;flex:1;white-space:normal;line-height:1.2}
.title-chips span{border-radius:6px!important;color:#c6e5dd}
.title-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 61%,#aafc5417,transparent 38%);pointer-events:none}

/* World map card — clearly distinguish region progression and the call to action */
.campaign-layout{grid-template-columns:minmax(0,64%) minmax(0,36%)}
.globe{box-shadow:inset 0 0 65px #03121f81}
.map-coordinate{display:flex;gap:9px;align-items:center}
.map-help{border-radius:999px!important;padding:6px 11px!important;background:#061722dd!important;border:1px solid #3f6870a8!important;box-shadow:0 5px 16px #0004}
.campaign-status{border:1px solid #5f89988e!important;background:#09202beb!important;box-shadow:0 12px 26px #0009,0 0 18px #53acc21e!important}
.campaign-status>span{color:#d9eee9!important;display:flex;justify-content:space-between;gap:13px}
.campaign-status strong{color:#bef978;font-size:11px}
.campaign-status i{height:7px!important;background:#214955!important}
.campaign-status em{background:linear-gradient(90deg,#67e7c6,#b8fc6b)!important;box-shadow:0 0 13px #a8f04a65}
.city-card{border:1px solid #4a6978;border-top:3px solid #bbf46e!important;border-radius:16px;box-shadow:inset 0 1px #d7f6ed0b,0 14px 35px #0008;position:relative}
.city-card:before{content:'SECTOR ' attr(data-sector);position:absolute;right:22px;top:11px;letter-spacing:.13em;font:900 10px system-ui;color:#6b949c;pointer-events:none}
.city-card h3{color:#f1fbea;line-height:1.1}
.city-facts{display:flex;gap:4px;flex-wrap:wrap}
.city-facts span{background:#1b3a44b8;border-color:#416875a6!important;color:#dbebeb}
.city-card .district{border-radius:9px;border:1px solid #2e4b5b;box-shadow:inset 0 1px #ffffff04}
.city-card .district.selected{background:linear-gradient(105deg,#214a3d,#153338)!important;border-color:#b8fa77!important;box-shadow:inset 0 0 0 1px #b8fa7738,0 0 12px #9aee5330}
.city-card .district.selected strong{background:#c7f88b;color:#193019;border-color:#c7f88b;font-weight:1000}
.city-preview{position:relative;overflow:hidden;border-radius:10px!important}
.city-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07131aaa,transparent 65%);pointer-events:none}
.city-preview>*{position:relative;z-index:1}
#briefBtn{min-height:46px;border-radius:10px;font-size:clamp(12px,2vh,18px)}
.bottom-nav{background:linear-gradient(180deg,#091c29,#071720)}
.bottom-nav button{min-width:102px;border-radius:8px;transition:background .15s,color .15s}
.bottom-nav button.selected{color:#c7ff83;background:#b0ff7810}

/* Brief screen: readable risk and loadout before entering fortified sectors */
.brief-panel{background:linear-gradient(155deg,#0b2430f5,#091a26f1);border-color:#57778487;box-shadow:0 14px 50px #000b}
.brief-panel .objective-box{background:linear-gradient(105deg,#1b4038,#102a36);border:1px solid #456f64;border-left:3px solid #bcfb7f;border-radius:10px}
.objective-top{display:flex;align-items:center;justify-content:space-between;gap:9px}
.objective-top em{color:#b8f975;font-size:10px;font-style:normal;font-weight:1000;white-space:nowrap}
.objective-top em.danger{color:#ffae89}
.support-card,.mutation{transition:filter .18s,border-color .18s,background .18s}
.support-card.selected{background:linear-gradient(145deg,#1d4343,#122a36);border-color:#6cc7c08d}

/* In-battle UI: high-contrast readings without drowning out the crowd */
.mission-hud{gap:7px!important;filter:drop-shadow(0 7px 11px #0005)}
.mission-hud .hud-block,.mission-hud .alarm{background:linear-gradient(150deg,#0b2835f3,#071923f0)!important;border:1px solid #4e748080!important;box-shadow:inset 0 1px #e9ffff0d,0 8px 22px #0007;border-radius:12px!important}
.mission-hud .hud-block{border-left:2px solid #a3ee66!important}
.mission-hud .momentum{border-left-color:#5ce2e9!important}
.mission-hud .alarm{border-left:2px solid #fa7287!important}
.mission-hud .sync i,.mission-hud .momentum i{height:7px!important;background:#22424d!important;border-radius:10px!important}
.mission-hud .sync em{background:linear-gradient(90deg,#64dcbb,#c7ff7b)!important;box-shadow:0 0 9px #a3f87499}
.mission-hud .momentum em{background:linear-gradient(90deg,#49d6e5,#acfa82)!important;box-shadow:0 0 9px #5ce9f774}
.timer{padding:5px 10px;border:1px solid #68828c5c;border-radius:10px;background:#0b222aaa;font-variant-numeric:tabular-nums}
#gameScreen.under-attack .mission-hud .alarm{border-color:#ff6e78ba!important;box-shadow:0 0 13px #ff5d7d48,inset 0 1px #fff2!important}
#chainCallout{letter-spacing:.05em;-webkit-text-stroke:1px #092329;text-shadow:0 0 19px #a8f04a80,0 3px 12px #000c}
.power-dock{padding:4px!important;box-shadow:0 16px 28px #0008;backdrop-filter:blur(6px);border:1px solid #4e73799c!important;background:#081b27e3!important;border-radius:17px!important;gap:6px!important}
.power{position:relative;border:1px solid #4e6c7a!important;border-radius:12px!important;box-shadow:inset 0 1px #ffffff10,0 5px 14px #0004!important}
.power .p-icon{background:#1b3d47;border:1px solid #426873;box-shadow:inset 0 1px #ffffff0d}
.power:not(.cool):not(.locked) .p-icon{color:#ccfc89;border-color:#83c677}
.power.armed{border-color:#c6ff7b!important;box-shadow:0 0 0 2px #a7fc785c,0 0 14px #bdff7945!important}
.power.locked{opacity:.48}
.power small{color:#a0bfc4!important}
.intel{box-shadow:0 7px 15px #0008;border:1px solid #4c7c83a0!important;background:#081f29ed!important;border-radius:9px!important}
.command-hint{background:#071b25e3!important;border:1px solid #41646c70!important;border-radius:999px!important;color:#c2ded9!important}

/* Evolution laboratory: selected node and growth paths */
.skill-detail{border:1px solid #527787!important;background:linear-gradient(145deg,#16343e,#0b202b)!important;box-shadow:0 9px 28px #0007,inset 0 1px #ffffff0a}
.skill-detail h4{color:#edfbed;font-weight:1000}
.skill-node.major .node-ring{border-width:3px;box-shadow:0 0 0 9px color-mix(in srgb,var(--node) 11%, transparent),0 0 25px color-mix(in srgb,var(--node) 32%, transparent)}
.skill-node.selected b{color:var(--node)}
.tree-toolbar{border-color:#5c8492!important}
.tree-toolbar button[aria-pressed="true"]{background:#b2f56c!important;color:#10251a!important;border-color:#cafd96!important}
.specimen #skillBuyBtn:not(:disabled){box-shadow:0 4px 16px #b7ef5e41}

/* Results: players can read the outcome at a glance */
.result-glow{background:radial-gradient(ellipse at 50% 42%,#295c48aa,#07141e 55%),radial-gradient(circle at 82% 10%,#185c6f59,transparent 35%)}
.result-card{border:1px solid #668d71;background:linear-gradient(170deg,#16362df4,#091f2bf5 66%);box-shadow:0 26px 80px #000d,inset 0 1px #ffffff17;max-height:92%;overflow:auto}
.result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.result-stats div{background:#123039;border:1px solid #4c727665}
.result-stats b{color:#f4fff1}
.result-rewards{display:flex;gap:8px}
.result-rewards .reward{flex:1;background:#102d3c;border-color:#5083787d;border-radius:10px}
.result-rewards .reward b{color:#b8fa78}

@media(max-height:470px) and (min-aspect-ratio:1.35){
 .title-meta{font-size:9px;margin-top:8px;padding:5px 8px}.title-meta b{font-size:10px}
 .title-actions{margin-top:8px!important}.title-panel h1{font-size:clamp(56px,14vh,80px)}
 .city-card{padding:3% 4%}.city-card:before{font-size:8px;top:5px;right:10px}
 .district{min-height:32px}.city-card .district{padding:3px 5px}.city-preview{min-height:56px}
 .bottom-nav button{min-width:85px;min-height:32px}
 .mission-hud .hud-block,.mission-hud .alarm{border-radius:9px!important}
 .power-dock{height:15%!important;min-height:52px!important;padding:3px!important}
 .power{min-height:46px;min-width:110px!important;padding:4px 7px!important}
 .power .p-icon{float:left;width:29px!important;height:29px!important;margin:4px 7px 2px 0!important}
 .power b{text-align:left;font-size:11px!important;padding-top:3px}.power small{display:block;text-align:left;font-size:9px!important}
 .result-card{padding:2% 3%;width:min(78%,700px)}.result-stats div,.reward{padding:5px}
 .result-card h2{font-size:clamp(18px,4.8vh,32px)}
}
@media(prefers-reduced-motion:reduce){.title-bg,.skill-node,.power,.btn{animation:none!important;transition:none!important}}

/* BLOOB 22 — restrained high-contrast polish and lighter mobile compositing */
:root{--lime:#bdf775;--cyan:#62d9df;--muted:#9fb9c3;--panel:#0c2230}
#app{background:#07141e}
.appbar{border-bottom:1px solid #41607185;background:linear-gradient(180deg,#0d2633,#081b27)}
.currencies>span{border-radius:11px;background:#102c3a;border:1px solid #355866}
.title-panel{background:linear-gradient(125deg,#092230f0,#0a1d2bd6)!important;border:1px solid #52737b80;border-left:4px solid #bcfc70!important;border-radius:19px}
.title-panel .kicker{letter-spacing:.16em}
.title-panel .title-copy{color:#d7e9e8;line-height:1.55}
.title-actions .btn{border-radius:11px;min-height:49px;box-shadow:0 5px 15px #0006}
.title-meta{border-color:#3d5e67;background:#0d2834}
.title-chips span{background:#15333c8f!important;border:1px solid #43666b80!important;letter-spacing:.03em}
.city-card{background:linear-gradient(180deg,#0c2632,#071b27 93%);border:1px solid #3e68757d;border-top:2px solid #baf47e!important}
.city-card .district{background:#0d2530;border-color:#345360}
.city-preview{border:1px solid #526e765c;box-shadow:0 8px 18px #0006}
.city-card h3{font-weight:950;letter-spacing:-.04em}
.power-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0a202beb!important;box-shadow:0 7px 17px #0007!important;border-color:#375d6b!important}
.mission-hud{filter:none!important}
.mission-hud .hud-block,.mission-hud .alarm{box-shadow:0 4px 14px #0007!important}
.mission-hud .hud-block{border-left-color:#b5f47b!important}
.power{background:linear-gradient(180deg,#17343f,#102630)!important;border-radius:11px!important}
.power.armed{background:#213f3d!important}
.intel{max-width:68%;line-height:1.24}
.skill-detail{box-shadow:0 7px 20px #0006!important}
.tree-scroll{overscroll-behavior:contain;scrollbar-color:#3b666f #071520}
.tree-toolbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#081c28ed!important}
.result-card{border-color:#506e79}
@media (max-height:430px) and (min-aspect-ratio:1.45){
 .title-panel{padding:12px 22px!important}
 .title-panel .title-copy{font-size:clamp(11px,3vh,15px)}
 .title-panel .title-actions{margin-top:8px!important}
 .title-panel .title-chips{gap:5px;margin-top:7px}
 .title-panel .title-chips span{padding:4px 7px;font-size:9px}
 .power-dock{border-radius:12px!important}
 .power{min-height:43px!important}
 .intel{font-size:11px}
 .command-hint{font-size:10px}
}


/* BUILD 25 retro pass and clearer locked regions */
#titleScreen{background:#050a12}
.title-bg{filter:saturate(1.12) contrast(1.08) hue-rotate(-8deg) brightness(.92)}
.title-vignette{background:
  radial-gradient(circle at 79% 24%,#ff56b51f 0 12%,transparent 32%),
  radial-gradient(circle at 68% 56%,#afff7f24 0 0,transparent 34%),
  repeating-linear-gradient(180deg,#ffffff05 0 2px,transparent 2px 5px),
  linear-gradient(90deg,#04101bf5 0%,#071521e7 28%,#09142595 46%,#07111a08 68%),
  linear-gradient(0deg,#040d15bb,transparent 38%)!important}
.title-panel{background:linear-gradient(135deg,#081a27f0,#08131ee0 72%,#0f1f2bc4)!important;border-left:4px solid #c7ff76!important;box-shadow:0 20px 70px #0009,0 0 0 1px #ffffff08 inset,0 0 40px #75f1ff12}
.title-panel:after{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;background:repeating-linear-gradient(180deg,#ffffff04 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.45}
.title-chips span,.build-tag,.currencies>span,.tree-toolbar{backdrop-filter:blur(12px)}
.campaign-layout{background:radial-gradient(circle at 50% 18%,#0f3046,#081722 62%,#050d15 100%)}
.globe{background:
  repeating-linear-gradient(180deg,#ffffff05 0 1px,transparent 1px 5px),
  radial-gradient(circle at 18% 18%,#ff5bd21a 0 0,transparent 24%),
  radial-gradient(circle at 78% 32%,#7cf8ff17 0 0,transparent 22%),
  radial-gradient(ellipse 55% 47% at 50% 46%,#204657 0,#0d2232 72%,#07141e 100%),
  url('assets/worldmap.svg') center 48%/94% auto no-repeat!important}
.globe:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#63e9ff12,#0000 28%,#0000 72%,#ff5bd209),repeating-linear-gradient(180deg,#ffffff03 0 1px,transparent 1px 6px);mix-blend-mode:screen}
.city-node.lock{opacity:.72!important;filter:saturate(.9) brightness(.98)!important}
.city-node.lock::before{border-color:#86b3bc;background:#568091;box-shadow:0 0 0 5px #88a9b42a,0 0 15px #7ec0cf45}
.city-node.lock b{opacity:.95;color:#d2e3e7;border-color:#537784;background:#102634f0}
.map-help span{color:#cfe2e5;opacity:.92}
.city-card{background:linear-gradient(160deg,#133041,#0a1d2a)!important;box-shadow:inset 0 0 0 1px #ffffff07,0 16px 32px #0004}
.appbar{background:linear-gradient(110deg,#102a3d,#081824 80%);box-shadow:0 8px 28px #0005}
.brief-art{filter:saturate(1.12) hue-rotate(-8deg) brightness(.9)}
#gameScreen:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(180deg,#ffffff03 0 1px,transparent 1px 4px);mix-blend-mode:soft-light;opacity:.35}
canvas#gameCanvas{position:relative;z-index:1}


/* BUILD 26 clean pass: remove neon/retro/scanline look */
#titleScreen{background:#08111a}
.title-bg{filter:none!important;animation:none!important;opacity:.92}
.title-vignette{background:linear-gradient(90deg,#08111af2 0%,#0a1520e8 28%,#0b15208e 46%,#0b152008 68%),linear-gradient(0deg,#081018b0,transparent 36%)!important}
.title-panel{background:linear-gradient(180deg,#0c1822f2,#0b1620e8)!important;border:1px solid #31424d!important;border-left:4px solid #9fda63!important;box-shadow:0 18px 40px #0007, inset 0 0 0 1px #ffffff06!important}
.title-panel:after{display:none!important}
.title-chips span{background:#13222dcc!important;border:1px solid #32434f!important;box-shadow:none!important}
.build-tag{background:#0b1720e8!important;border:1px solid #31424d!important;box-shadow:none!important}
.signal-dot{box-shadow:none!important;animation:none!important;background:#a9df71!important}
.title-orbit span,.title-stars{display:none!important}

.campaign-layout{background:linear-gradient(180deg,#0b1722,#09141d 70%,#08111a)!important}
.globe{background:radial-gradient(ellipse 55% 47% at 50% 46%,#193343 0,#0d2230 72%,#09151e 100%),url('assets/worldmap.svg') center 48%/94% auto no-repeat!important}
.globe:before,.globe:after{display:none!important}
.map-halo{box-shadow:none!important;border:1px solid #3a5662!important;opacity:.5!important}
.grid-lines{opacity:.18!important}
.city-node.current::before{box-shadow:0 0 0 5px #a8f04a18!important,0 0 10px #a8f04a55!important}
.city-node.lock::before{box-shadow:0 0 0 4px #7c98a41c!important,0 0 6px #7c98a430!important}
.city-node.current{filter:none!important}
.city-card{background:linear-gradient(180deg,#10202c,#0d1a24)!important;box-shadow:inset 0 0 0 1px #ffffff06,0 12px 24px #0003!important;border-top:2px solid #a8f04a!important}
.appbar{background:linear-gradient(180deg,#122533,#0b1922 78%)!important;box-shadow:0 4px 14px #0003!important}
.currencies>span{background:linear-gradient(180deg,#183141,#11232f)!important;box-shadow:none!important}

.tree-scroll,.research-grid{background:linear-gradient(180deg,#0c1822,#09131c)!important}
.research-grid:after{display:none!important}
.tree-toolbar{background:#0d1822f0!important;box-shadow:0 6px 16px #0004!important;border:1px solid #344954!important}
.skill-detail{box-shadow:inset 0 0 0 1px #2b4651,0 8px 18px #00000018!important}
.branch-label{background:#0d1822!important}
.tree-line{filter:none!important}

.brief-art{filter:none!important}
.brief-shade{background:linear-gradient(90deg,#08121a30,#0817259a 40%,#081623f2 62%)!important}
#gameScreen:before{display:none!important}
.skill-toast{box-shadow:0 8px 18px #0005!important}
.power:not(.cool):not(.locked){background:linear-gradient(180deg,#1b323b,#10252d)!important;box-shadow:none!important}
.btn.lime:not(:disabled){box-shadow:inset 0 2px #ffffff35,inset 0 -4px #74b93a,0 6px 14px #7abf2f22!important}
.btn.quiet:not(:disabled){box-shadow:none!important}


/* BUILD 28 map clarity + tree zoom */
.globe{background:
 radial-gradient(circle at 18% 22%,#214763 0 8%,transparent 9%),
 radial-gradient(circle at 62% 38%,#2a5870 0 10%,transparent 11%),
 radial-gradient(circle at 78% 58%,#2e4c69 0 8%,transparent 9%),
 linear-gradient(180deg,#13344a 0%,#0b1f2e 58%,#091725 100%),
 url('assets/worldmap.svg') center 48%/95% auto no-repeat!important;
 box-shadow:inset 0 0 80px #03121f55!important;
}
.globe:before,.globe:after{display:none!important}
.grid-lines{opacity:.22!important}
.map-halo{border:1px solid #345464!important;box-shadow:none!important;opacity:.55!important}
.map-help{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#d5e5ea!important;background:#0a1822f2!important;border:1px solid #355563!important;box-shadow:0 6px 14px #0003!important}
.map-help span,.map-help em{font-style:normal;color:#c7d8de!important;margin-left:0!important}
.city-node{z-index:3!important;transform:translate(-50%,-36%)!important}
.city-node::before{width:18px!important;height:18px!important;border-radius:50%!important;border:2px solid #bfdde6!important;background:#8fc36d!important;box-shadow:0 0 0 5px #8fc36d2a!important}
.city-node b{color:#eff9ed!important;background:#0b1d28f4!important;border:1px solid #46606a!important;box-shadow:0 3px 8px #0005!important}
.city-node.lock{opacity:1!important;filter:none!important}
.city-node.lock::before{background:#4f83b6!important;border-color:#d3e8ff!important;box-shadow:0 0 0 5px #4f83b624!important}
.city-node.lock b{color:#d9e8f7!important;border-color:#567898!important;background:#102233f2!important}
.city-node.current::before{background:#aee86d!important;border-color:#f1ffdb!important;box-shadow:0 0 0 6px #b7ef7c26!important}
.city-node.current b{border-color:#a8d474!important;color:#fbfff3!important}
.city-node.done::before{background:#79cb68!important;border-color:#effbd8!important;box-shadow:0 0 0 5px #79cb6826!important}
.city-node.done b{background:#183026!important;border-color:#7dbb73!important;color:#dffdca!important}
.route-line{background:linear-gradient(90deg,#4c7095,#88c46f)!important;box-shadow:none!important;opacity:.8}
.district{border:1px solid #365160!important;background:#0d2130!important;color:#c6d6db!important;opacity:1!important}
.district strong{border-color:#577381!important;color:#d9eaef!important;background:#112534!important}
.district.lock{opacity:1!important;background:#102436!important;border-color:#3e6181!important;color:#bfd3e3!important}
.district.lock strong{background:#1a3550!important;border-color:#6891b8!important;color:#d8ecff!important}
.district.selected{background:#193428!important;border-color:#9ed16b!important;color:#f3ffed!important;box-shadow:none!important}
.district.done{background:#152b22!important;border-color:#6da26d!important;color:#dff5d4!important}
.district.done strong{background:#a7dd77!important;border-color:#a7dd77!important;color:#15301c!important}

.tree-scroll{background:#0a1621!important;overflow:auto!important;touch-action:pan-x pan-y pinch-zoom}
.research-grid{position:relative!important;min-width:0!important;width:1066px;height:648px;background:linear-gradient(180deg,#0d1a25,#0a141d)!important;overflow:visible!important}
.research-inner{position:relative;width:1480px;height:900px;transform-origin:top left}
.research-grid:before,.research-grid:after{display:none!important}
.tree-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#0d1a25f4!important;border:1px solid #3f5967!important;box-shadow:0 6px 14px #0004!important}
.tree-toolbar button{background:#17303e!important;border:1px solid #446372!important;color:#eef5f6!important}
.tree-toolbar button[aria-pressed="true"]{background:#b0dc7b!important;color:#132316!important;border-color:#bfe991!important}
.zoom-controls{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:6px;border-left:1px solid #35505f}
.zoom-controls button{min-width:32px!important;padding:4px 8px!important;font-weight:1000}
#treeZoomVal{display:inline-grid;place-items:center;min-width:48px;height:29px;padding:0 8px;border-radius:8px;background:#0b1620;border:1px solid #344d5a;color:#d9eaef;font-size:11px}
.branch-label{background:#0c1822!important;border:1px solid #334a56!important;box-shadow:none!important}
.tree-line{opacity:.95!important}
.skill-node .node-ring{box-shadow:none!important}
.skill-node.major .node-ring{box-shadow:none!important}
.skill-node.selected .node-ring{box-shadow:0 0 0 3px #ffffff12 inset!important}
@media(max-width:980px){
 .tree-scroll{height:64vh!important}
 .research-grid{width:1030px;height:630px}
 .zoom-controls{margin-left:0;border-left:none;padding-left:0}
}


/* BUILD 29: Geographic map, readable city stages, original architectural thumbnails */
.globe{background:#163549 url('assets/worldmap29.svg') 50% 50%/100% 100% no-repeat!important;box-shadow:inset 0 0 40px #05142044!important}
.globe:before,.globe:after,.grid-lines,.map-halo{display:none!important}
.map-help{z-index:5!important;display:flex!important;gap:7px!important;background:#0c2532e8!important;border:1px solid #526f7c!important;box-shadow:none!important;padding:6px 9px!important}
.map-key{display:inline-flex;gap:5px;align-items:center;padding:2px 5px!important;border:0!important;background:none!important;font-size:clamp(9px,1.35vh,11px)}
.map-key.open{color:#bddea7!important}.map-key.lock{color:#a0c5e5!important}.map-key.done{color:#e7c18e!important}
.city-node{z-index:4!important;opacity:1!important;filter:none!important;min-width:44px;transform:translate(-50%,-36%)!important}
.city-node::before{height:14px!important;width:14px!important;background:#98bb82!important;border:2px solid #eff5df!important;box-shadow:0 0 0 4px #c1d5ad35!important}
.city-node b{padding:3px 8px!important;color:#f3f6ef!important;background:#102735f3!important;border:1px solid #8cab9d!important;box-shadow:0 2px 5px #001b29a0!important;letter-spacing:0!important}
.city-node.lock::before{background:#548ebc!important;border-color:#d3e7f9!important;box-shadow:0 0 0 4px #4b8cb42d!important}
.city-node.lock b{background:#102f46f2!important;border-color:#7fa7c6!important;color:#e4f1ff!important}
.city-node.current::before{background:#b7d887!important;border-color:#fffef0!important;box-shadow:0 0 0 5px #cbef9c43!important}
.city-node.current b{border-color:#bedb8e!important;background:#29482e!important}
.city-node.done::before{background:#c99f65!important;border-color:#fff4da!important;box-shadow:0 0 0 4px #dbb98642!important}
.city-node.done b{background:#493a28!important;border-color:#b7956a!important;color:#f4d8ab!important}
.city-node:nth-child(1) b{transform:translate(-20px,3px)!important}
.city-node:nth-child(8) b{transform:translate(26px,-18px)!important}
.city-node:nth-child(4) b{transform:translate(-8px,8px)!important}
.city-card{border-top:2px solid #87a8a0!important;gap:5px!important}
.city-card:before{display:none!important}
.city-hero{position:relative;min-height:clamp(78px,18vh,139px);flex-shrink:0;background:#193340 center center/cover no-repeat;border-radius:11px;border:1px solid #567380;padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.city-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071521e9 0%,#081c2db9 33%,#081a2614 100%);pointer-events:none}
.city-hero>*{position:relative;z-index:1}
.city-hero h3{font-size:clamp(20px,4.5vh,36px)!important;margin:2px 0!important;color:#fcfcf7!important}
.city-hero .city-sub{margin:0!important;color:#d2e5e9!important;font-size:clamp(9px,1.5vh,12px)}
.city-hero .overline{font-size:10px!important;color:#e8d1a3!important}
.city-preview{display:none!important}
.city-facts{flex-shrink:0}
.city-card .district{opacity:1!important;min-height:37px;color:#e2edf0!important}
.city-card .district.lock{background:#152c3e!important;border-color:#486984!important;color:#c7def0!important}
.city-card .district.lock strong{background:#274862!important;color:#eff6fb!important}
.city-card .district.done{background:#302a21!important;border-color:#a58b64!important;color:#e9d4b6!important}
.city-card .district.done strong{background:#d3a86d!important;color:#2e281c!important}
.city-card .district.selected{background:#23392b!important;border-color:#afce91!important;box-shadow:none!important}
.city-card .district.selected strong{background:#b9d893!important;border-color:#b9d893!important;color:#18271b!important}
.city-card .btn.wide{box-shadow:none!important;min-height:45px!important}
/* no neon or halo effects; legible research-map lines and nodes */
.lab-layout{grid-template-columns:clamp(260px,26%,350px) minmax(0,1fr)!important;overflow:hidden!important}
.tree-workspace{position:relative;min-width:0;min-height:0;background:#0b1822;display:flex;flex-direction:column;overflow:hidden}
.tree-toolbar{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:100%!important;max-width:none!important;border-radius:0!important;flex-shrink:0;min-height:43px;z-index:15;margin:0!important;overflow-x:auto;flex-wrap:nowrap!important;box-shadow:none!important;background:#112432!important;border:0!important;border-bottom:1px solid #344b59!important}
.tree-scroll{position:relative;flex:1;min-height:0!important;width:100%;height:auto!important;overflow:auto!important;overscroll-behavior:contain;touch-action:pan-x pan-y;background:#0a1824!important}
.research-grid{position:relative!important;min-width:0!important;display:block!important;overflow:visible!important;padding:0!important;margin:0;background:#0c1a28!important}
.research-inner{position:relative!important;width:1480px;height:900px;transform-origin:0 0;background:radial-gradient(ellipse at 50% 85%,#19313e 0%,transparent 54%)}
.tree-lines{z-index:1}.tree-line,.tree-line.open,.tree-line.owned{height:3px!important;border-radius:2px;opacity:.45!important;box-shadow:none!important;filter:none!important;background:var(--line,#819cab)!important}
.tree-line.open{opacity:.7!important}.tree-line.owned{opacity:1!important}
.branch-label{font-size:14px!important;color:var(--branch)!important;letter-spacing:.08em!important;font-weight:900!important;background:#0c1c27!important;border:1px solid #45606d!important;border-radius:6px!important;box-shadow:none!important}
.skill-node{filter:none!important;opacity:1!important;color:#ecf1ef!important}
.skill-node.locked{opacity:.58!important;filter:none!important}
.skill-node .node-ring{background:#172d3b!important;border:2px solid #617989!important;box-shadow:none!important}
.skill-node.open .node-ring{border-color:var(--node)!important}
.skill-node.major .node-ring{background:#1b3643!important;border:4px solid var(--node)!important;box-shadow:none!important}
.skill-node.owned .node-ring{background:#28483c!important;border-color:var(--node)!important}
.skill-node.selected .node-ring{outline:3px solid #e8eee580!important;outline-offset:3px;box-shadow:none!important}
.skill-node .node-icon{filter:none!important}
.skill-node b{color:#e2eae9!important;text-shadow:0 2px 3px #000!important}
.skill-node.selected b{color:#fff!important}
.zoom-controls{flex-shrink:0;margin-left:auto!important}
@media(max-height:460px) and (min-aspect-ratio:1.3){
 .city-hero{min-height:57px!important;padding:5px 9px!important}
 .city-hero h3{font-size:20px!important;margin:0!important}
 .city-hero .overline{font-size:8px!important}
 .city-hero .city-sub{font-size:9px!important}
 .city-card{padding:7px 10px!important;gap:2px!important;overflow-y:auto!important}
 .city-card .city-facts{margin:2px 0!important}
 .city-card .district{min-height:31px!important;padding:4px 6px!important}
 .city-card .district-list{margin:2px 0!important;gap:3px!important}
 .city-card .btn.wide{min-height:36px!important;margin-top:5px!important;position:sticky;bottom:0}
 .tree-toolbar{min-height:35px}
 .tree-toolbar button{min-height:26px}
}
@media(max-aspect-ratio:1.15/1){
 .lab-layout{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important;overflow:auto!important}
 .tree-workspace{min-height:55vh;flex:1}
 .city-hero{min-height:70px}
}

/* Keep all named cities readable, including unavailable buttons. */
.city-node.lock b,.city-node.done b,.city-node.current b,.city-node b{display:block!important;visibility:visible!important;opacity:1!important;white-space:nowrap!important;}
.city-node.lock{background:transparent!important}
.city-node.lock::after{display:none!important}
@media(max-height:460px) and (min-aspect-ratio:1.3){
 .city-node b{font-size:9px!important;padding:2px 5px!important}
 .city-node:nth-child(8) b{transform:translate(15px,-14px)!important}
 .city-node:nth-child(1) b{transform:translate(-16px,7px)!important}
}