*{box-sizing:border-box} :root{color-scheme:dark;--bg:#0c2025;--panel:#153239;--line:#325158;--text:#eff9ef;--muted:#b2cbc6;--gold:#ffe18a;--mint:#87efb1}body{margin:0;background:radial-gradient(ellipse at top,#21494a,var(--bg) 65%);color:var(--text);font:16px/1.5 system-ui,sans-serif}main{width:min(1180px,100%);margin:auto;padding:24px}header{position:relative;margin-bottom:24px}h1{font-size:clamp(30px,5vw,52px);line-height:1;margin:14px 0;letter-spacing:-2px}h1 span{color:var(--gold)}h1 small{font-size:.7em}h2{font-size:18px;margin:0}p{margin:8px 0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--mint)}.back{display:block;width:max-content;color:var(--muted);margin-bottom:18px;min-height:32px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.hud>div{padding:12px 16px;background:#1d3c40;border:1px solid var(--line);border-radius:12px}.hud small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted)}.hud strong{display:block;font-size:21px}.layout{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}.panel{border:1px solid var(--line);background:linear-gradient(135deg,#1a3b40,#132e34);border-radius:18px;padding:18px;margin-bottom:18px;min-width:0;box-shadow:0 8px 30px #0002}.section-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.chip{font-size:10px;color:var(--mint);border:1px solid #4a6d5b;padding:4px 7px;border-radius:20px}canvas{display:block;width:100%;height:auto;border-radius:12px;background:#234b3e;border:1px solid #547764}.brief{padding:12px 0}.brief p{font-size:14px}.actions,.shop-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:end}button,select{font:inherit;border:1px solid #64817b;border-radius:10px;background:#24494c;color:var(--text);min-height:46px;padding:10px 12px;cursor:pointer}button:hover:not(:disabled){background:#38605e;border-color:var(--mint)}button:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--gold);color:#253328;border-color:var(--gold);font-weight:850;flex:1}.primary:hover:not(:disabled){background:#fff0b8;color:#162e23}[hidden]{display:none!important}.hint{color:var(--muted);font-size:12px}.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0 20px}.slot{padding:8px 2px;font-size:10px;overflow-wrap:anywhere}.slot .icon{display:block;font-size:25px}.collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.tower{text-align:left;display:flex;gap:8px;padding:9px;align-items:center;font-size:13px;min-width:0}.tower .icon{font-size:25px}.tower small{display:block;font-size:10px;color:var(--muted)}.selected{outline:2px solid var(--gold);background:#465343}.detail{padding:12px;border:1px dashed #718579;border-radius:12px;font-size:13px}.detail button{margin:8px 4px 0 0;font-size:12px}.stats{color:var(--gold);font-size:12px}#status{min-height:24px;font-size:14px;color:var(--gold)}.shop p{font-size:14px}.shop-actions{margin:16px 0}.shop-actions label{font-size:12px;color:var(--muted)}select{display:block;max-width:100%}details{margin-top:12px;color:var(--muted);font-size:13px}summary{cursor:pointer;padding:12px 0;color:var(--text);font-weight:650;min-height:44px}li{padding:4px 0}.setting{display:flex;align-items:center;gap:12px;min-height:48px}input{width:22px;height:22px}footer{text-align:center;color:var(--muted);font-size:12px;padding:10px 0 20px}@media(max-width:760px){main{padding:14px}.layout{grid-template-columns:1fr}.hud>div{padding:8px}.hud strong{font-size:17px}.hud small{font-size:8px}.panel{padding:13px}.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-actions>*{width:100%}.shop-actions select{width:100%}header{margin-bottom:16px}header p{font-size:13px}.slots .slot{min-height:68px}.actions button{flex:1}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}body.reduce-motion *{animation:none!important;transition:none!important}
/* Immersive stage: the battlefield, not the document, owns the viewport. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#173e39}main#game{position:relative;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;padding:0;overflow:hidden;isolation:isolate}#battlefield{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#061e2c85,transparent 25%,transparent 65%,#061e2c88)}.hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;margin:0}.hud>div{padding:7px 12px;background:#102c35dc;backdrop-filter:blur(12px);border:1px solid #a5dca833;border-radius:12px}.hud strong{font-size:18px;line-height:1.2}.hud small{font-size:9px}.hud #phase{margin-left:auto;background:#102c35dc}.hud button{min-width:48px;background:#102c35ec;font-size:20px}.location{position:absolute;left:22px;top:90px;font-size:12px;font-weight:900;letter-spacing:3px;color:#eff9cf;text-shadow:0 2px 4px #123}.location span{display:block;font-size:9px;opacity:.7;letter-spacing:2px}.title-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#071e3299,#071e3210,#071e3255);z-index:4}.title-card{text-align:center;padding:24px;text-shadow:0 3px 15px #001d27}.title-card h1{font-size:clamp(58px,11vw,112px);letter-spacing:-5px;line-height:.84;margin:22px 0;color:#fff9d8;filter:drop-shadow(0 5px 0 #193e40)}.title-card p{margin:24px 0;color:#edffe2;font-weight:650}.title-card button{display:block;width:230px;min-height:62px;margin:20px auto 12px;font-size:22px;box-shadow:0 5px 0 #9d712c,0 10px 35px #0005}.title-card small{font-size:12px}.dock{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));padding:15px 18px;background:#0b2834ec;backdrop-filter:blur(14px);border:1px solid #d7f6c538;border-radius:18px;box-shadow:0 10px 40px #001b2b55}.brief{padding:0}.brief p{font-size:13px;margin:4px 0}.dock #status{font-size:12px;min-height:0;margin:6px 0 10px;color:#c9edbd}.actions{flex-wrap:nowrap;gap:8px}.actions button{font-size:14px}.actions .primary{flex:1}body[data-phase="combat"] .dock{width:auto;max-width:calc(100% - 24px);padding:8px 14px;bottom:max(16px,env(safe-area-inset-bottom));pointer-events:none}body[data-phase="combat"] .brief,body[data-phase="combat"] .actions{display:none}body[data-phase="combat"] #status{margin:0;font-size:12px;text-align:center}#scrim{position:absolute;inset:0;background:#041b2ab3;backdrop-filter:blur(5px);z-index:5}.drawer{position:absolute;z-index:6;top:max(14px,env(safe-area-inset-top));bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));width:min(440px,calc(100% - 28px));overflow:auto;overscroll-behavior:contain;background:linear-gradient(140deg,#204b4d,#0e2a36);border:1px solid #92bea477;border-radius:22px;padding:20px;box-shadow:0 20px 70px #0007}.drawer .close{display:block;margin:0 0 18px auto}.drawer .shop-actions{display:grid;align-items:stretch}.drawer select{width:100%}.drawer .back{padding:14px 0}.drawer .primary{width:100%}body.title-active .hud,body.title-active .location{visibility:hidden}.slots{gap:4px}.slot{min-height:78px}.collection{margin-top:16px}.detail{margin-top:16px}@media(max-width:420px){.hud{gap:5px}.hud>div{padding:7px 9px}.hud strong{font-size:16px}.hud #phase{font-size:9px;padding:3px 5px}.location{top:84px;font-size:10px}.dock{padding:12px}.drawer{padding:15px}.actions button{padding:9px 11px}.title-card h1{font-size:72px}}@media(max-height:500px){.location{display:none}.title-card h1{font-size:56px;margin:12px}.title-card p{margin:12px}.title-card button{margin:12px auto;min-height:48px}.dock{width:min(760px,calc(100% - 24px));padding:10px}.brief p{margin:0}.dock #status{margin:2px 0}.hud{top:8px}}
.coach{display:flex;position:relative;align-items:center;justify-content:center;gap:20px;width:100%;margin:10px 0;background:#ffe18a;color:#173c3c;border-color:#fff5c8;min-height:70px;font-size:30px}.coach-slot{border:2px dashed #38654c;border-radius:12px;width:48px;line-height:44px}.coach-hand{position:absolute;font-size:25px;right:20%;bottom:0;animation:show-place 2s ease-in-out infinite}.coach-arrow{font-size:25px}@keyframes show-place{0%,20%{transform:translateX(-120px)}70%,100%{transform:translateX(0)}}.title-card #play{font-size:34px}.title-card #play span{font-size:21px;vertical-align:middle}.actions .primary{font-size:21px}.actions button span{font-size:12px}
.pictogram{width:28px;height:28px;vertical-align:middle;fill:currentColor;overflow:visible}.coach .pictogram{width:36px;height:36px}.tower .pictogram{color:#ffe18a}.slot .pictogram{color:#b8f1ba}.coach-hand{color:#173c3c;font-size:16px;border:3px solid #fff1b2;border-radius:100%;width:24px;height:24px;line-height:16px}.detail strong .pictogram{width:22px;height:22px}

/* Font-independent critical controls and compact status icons. */
.hud>div{white-space:nowrap}.hud>div>.pictogram{width:14px;height:14px;margin-right:4px}.hud #hearts{color:#fff0df}.hud #coins{color:#ffe18a}
/* alien4: visible collection/merge tray, separate from the battlefield defense row. */
.bench-tray{display:flex;gap:6px;justify-content:center;margin:8px 0}.bench-item{flex:1;max-width:96px;min-width:0;position:relative}.bench-card{display:block;width:100%;padding:4px 1px;min-height:47px;border-radius:9px 9px 0 0}.bench-card small{display:block;font-size:10px;line-height:14px}.bench-card .pictogram{width:24px;height:24px}.merge-button{display:block;width:100%;padding:0 1px;min-height:24px;font-size:11px;border-radius:0 0 8px 8px}.merge-ready .merge-button{color:#17382f;background:#b7f38c;border-color:#e4ffb7;box-shadow:0 0 12px #b7f38c77}.merged{animation:merge-pop .6s ease-out}@keyframes merge-pop{50%{transform:scale(1.16);filter:brightness(1.6)}}
body[data-phase="combat"] .bench-tray,body[data-phase="paused"] .bench-tray{display:none}.dock .brief{display:none}.dock #status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 4px}.coach{min-height:42px;margin:4px 0;gap:16px}.coach .pictogram{width:25px;height:25px}.coach-slot{width:34px;line-height:30px}.coach-hand{right:25%}.location{font-size:10px;top:83px}.location span{font-size:8px}
@media(max-height:500px){.dock{left:auto;right:12px;transform:none;width:330px;bottom:8px;padding:7px}.dock #status{display:none}.bench-tray{margin:0 0 4px}.bench-card{min-height:40px}.bench-card .pictogram{height:20px}.merge-button{min-height:20px}.actions button{min-height:38px;padding:4px 8px}.coach{position:absolute;right:350px;bottom:0;width:160px}.location{display:none}}
.merge-star{width:12px;height:12px;fill:currentColor;vertical-align:-1px}.merge-ready .merge-star{width:15px;height:15px}body[data-phase="combat"] .bench-tray,body[data-phase="paused"] .bench-tray{display:flex}body[data-phase="combat"] .dock{width:min(620px,calc(100% - 24px))}.bench-card:disabled{opacity:.75}.merge-button:disabled{opacity:.6}@media(max-height:500px){body[data-phase="combat"] .dock{width:330px}}

.roll-overlay{position:fixed;inset:0;z-index:100;background:#061b29e8;display:grid;place-items:center;padding:16px}.roll-overlay[hidden]{display:none}.roll-card{width:min(440px,100%);max-height:95dvh;overflow:auto;text-align:center;background:#193c4b;border:2px solid #94e6d3;border-radius:24px;padding:24px}.roll-card p{font-size:14px;color:#c6dedb}#rollArt .pictogram{width:100px;height:100px}#rollCollect{background:#acd991;color:#173c35}.bench-tray{overflow-x:auto;flex-wrap:nowrap}.bench-item{flex-shrink:0}

/* Each collected turret remains a touch target; ten identities scroll rather than shrink. */
.bench-tray{justify-content:flex-start;scrollbar-width:thin;scrollbar-color:#9ce0ce #153b43;padding-bottom:4px}.bench-item{flex:0 0 56px;min-width:56px}.bench-card small{white-space:nowrap}.bench-card{min-height:52px}.bench-card .pictogram{height:26px;width:26px}
/* lanes15: five active canvas targets, directly above a fixed 5 × 3 storage grid. */
.bench-tray{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible;margin:5px 0 8px;padding:0}.instance-slot{position:relative;min-height:46px;min-width:44px;padding:3px 2px;line-height:1;border-radius:8px;background:#153d49;border:1px solid #739597;touch-action:manipulation}.instance-slot .pictogram{width:25px;height:25px}.instance-slot small{display:block;color:#fff2b3;font-size:10px;line-height:12px}.instance-slot .empty-plus{font-size:23px;color:#a0c8c7}.instance-slot:disabled{opacity:.7}.instance-slot.selected{outline:3px solid #ffe18a;outline-offset:-2px;background:#4b5946}.instance-slot.merge-target{outline:3px solid #bfff7a;outline-offset:-2px;background:#345f3e;box-shadow:0 0 9px #bfff7a66}.instance-slot.merge-target:after{content:'↑';position:absolute;right:3px;top:2px;color:#e2ffb8;font-size:15px;font-weight:900}.storage-label{font-size:9px;letter-spacing:.6px;color:#bde4d8;font-weight:800}.storage-label span{display:block;letter-spacing:0;color:#ffe18a;font-size:10px}.dock{padding:10px 12px;width:min(620px,calc(100% - 24px))}#status{max-height:34px}.dock #status{white-space:normal;font-size:11px;line-height:15px;max-height:30px;overflow:auto;margin-bottom:5px}.dock .actions button{min-height:44px}.slots .instance-slot{min-height:58px}.collection{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.reserve-tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-height:155px;overflow:auto;padding:3px}#reserveWrap{margin:2px 0}#reserveLabel{font-size:11px;padding:3px;min-height:32px}#reserveWrap[open]{position:absolute;bottom:58px;left:0;right:0;background:#102e3f;border:2px solid #a7ddcc;border-radius:10px;padding:5px;z-index:3}#activeTargets{position:absolute;inset:0;pointer-events:none}#activeTargets button{position:absolute;transform:translate(-50%,-50%);width:48px;height:52px;pointer-events:auto;background:transparent;border:0;opacity:1}#activeTargets button.selected{outline:3px solid #ffe18a;background:#ffe18a18}#activeTargets button.merge-target{outline:3px solid #bfff7a;background:#bfff7a18}#activeTargets button:disabled{pointer-events:none}body[data-phase="combat"] .dock{padding:8px 12px;pointer-events:auto}body[data-phase="combat"] .storage-label span{display:none}body[data-phase="combat"] #status{display:none}body[data-phase="combat"] .actions{display:none}body[data-phase="paused"] #status{display:block}
@media(max-width:420px){.bench-tray{gap:4px}.instance-slot{min-height:46px}.dock{padding:8px 10px}.storage-label{font-size:8px}.location{top:80px}.coach{min-height:36px}.actions button{padding:7px 9px}}
@media(max-height:500px){.dock,body[data-phase="combat"] .dock{width:330px;padding:7px;right:12px;left:auto;transform:none}.instance-slot{min-height:44px}.bench-tray{gap:3px;margin:3px 0 5px}.instance-slot .pictogram{width:23px;height:23px}.storage-label span{display:none}.dock .actions button{min-height:44px}.dock #status{display:none}.coach{right:350px}.collection{grid-template-columns:repeat(5,minmax(0,1fr))}}
.instance-slot small .merge-star{width:10px;height:10px;vertical-align:0}.instance-slot.merge-target:after{content:'+'}#activeTargets .instance-slot.merge-target:after{top:-7px;right:-5px}
.reserve-paging{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px}.reserve-paging button{min-height:44px;padding:5px 9px;font-size:12px}

/* Inline earned supply: fixed touch targets, scroll the dock instead of covering combat. */
#inlineSupply .shop-actions,.inline-tools{display:flex;gap:6px;flex-wrap:wrap}#inlineSupply button{min-height:44px;flex:1;padding:7px;font-size:12px}#inlineSupply small{display:block;font-size:10px;color:#c8d9c3;margin:4px 0}#inlineSupply .shop-actions{margin:4px 0}#inlineSupply .inline-tools{margin:4px 0}.dock{max-height:58dvh;overflow-y:auto}#sellPanel{z-index:90}.instance-slot small{font-size:12px;font-weight:900}body[data-phase="combat"] .dock,body[data-phase="paused"] .dock{max-height:46dvh}@media(max-height:499px){.dock{max-height:calc(100dvh - 18px)}}
@media(max-height:499px){.dock,body[data-phase="combat"] .dock,body[data-phase="paused"] .dock{max-height:calc(100dvh - 76px)}#inlineSupply small{display:none}}
@media(max-height:499px){.storage-label{display:none}}
/* chances1: readable odds outside the compact storage grid. */
.chance-summary{font-size:12px;line-height:1.45;color:#e1f1df;margin:6px 0;overflow-wrap:anywhere}.turret-odds{padding:12px 0;border-bottom:1px solid #42606a}.exact-chance summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13px;color:#ffe18a}.exact-chance p{font-size:13px;line-height:1.5}.card-chance{display:block;color:#e1f1df;font-size:12px;line-height:1.45;margin:5px}.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.collection .instance-slot{padding:8px}.roll-card .chance-summary{font-size:13px}#inlineSupply .chance-summary{font-size:11px;margin:5px 0}#rollPanel .roll-card{max-height:90dvh;overflow:auto}

/* slotchances1: actual identity odds directly in every inventory box. */
.instance-slot small.slot-chance{font-size:12px;line-height:14px;font-weight:750;white-space:nowrap;color:#fff2b3}
.slot-chance span{display:block}.instance-slot{min-height:60px}.instance-slot .pictogram{display:block;margin:0 auto 2px}
.slot-odds-key{font-size:12px;line-height:16px;color:#fff2b3;margin:4px 0 6px}.slot-odds-key span{color:#cbe5df;font-size:11px}
#activeTargets .instance-slot{min-height:52px}
@media(max-height:500px){.instance-slot{min-height:60px}.slot-odds-key{display:block}}

/* Field turrets stand alone: inventory still shows selection and merge targets. */
#activeTargets button.selected,#activeTargets button.merge-target{outline:none;background:transparent;box-shadow:none}
#activeTargets .instance-slot.merge-target:after{content:none}
#activeTargets button:focus-visible{outline:3px solid #ffe18a}

/* Same static armored model as the battlefield, with room for its real muzzle. */
.instance-slot .turret-portrait{width:38px;height:38px;object-fit:contain;pointer-events:none;margin:0 auto 2px}
.detail strong .turret-portrait,.turret-odds .turret-portrait{width:42px;height:42px;object-fit:contain}
#rollArt .turret-portrait{width:100px;height:100px;object-fit:contain}

#dragonStrike{width:100%;min-height:48px;background:#255b65;border:2px solid #81ffd4;color:#fff4c3;font-weight:800;margin:4px 0}#dragonStrike:disabled{opacity:.8}

.cosmic-reveal{filter:drop-shadow(0 0 12px #98efdb);animation:cosmic-arrival 1.4s ease-out both}@keyframes cosmic-arrival{0%{transform:scale(.65) rotate(-15deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}.reduce-motion .cosmic-reveal{animation:none}
@media(prefers-reduced-motion:reduce){.cosmic-reveal{animation:none}}

#codeForm{margin-top:24px;padding-top:16px;border-top:1px solid #81b4b4}#codeEntry{display:block;width:100%;min-height:48px;font:inherit;padding:10px;margin:8px 0;color:#102b30;background:#efffec;border-radius:8px}#redeemCode{min-height:48px}

#dragonStrike{position:fixed;z-index:45;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(420px,calc(100% - 24px));box-shadow:0 4px 18px #081b32cc;margin:0;pointer-events:auto}body.dragon-equipped[data-phase="combat"] .dock,body.dragon-equipped[data-phase="paused"] .dock{padding-bottom:66px}@media(max-height:499px){#dragonStrike{left:auto;right:16px;transform:none;width:330px}}

.hud #speed{min-width:44px;min-height:44px;padding:6px;font-size:16px;background:#153e4e;border:2px solid #9ce8c0;font-weight:800;margin-left:auto}.hud #speed[aria-pressed="true"]{background:#27633e;color:#fff}.hud #speed:disabled{opacity:.65}@media(max-width:420px){.hud{gap:4px;left:8px;right:8px}.hud>div{padding:7px 6px}.hud strong{font-size:15px}.hud #menu{min-width:44px;width:44px;padding:8px}}