*{box-sizing:border-box} :root{color-scheme:dark;--cyan:#a3ead7;--gold:#e6c68d;--purple:#c4abf4}body{margin:0;background:#070c12;color:#e8ede8;font:13px/1.45 system-ui,"Microsoft JhengHei",sans-serif;height:100dvh;overflow:hidden}button,input{font:inherit}button{color:inherit;background:#203039;border:1px solid #3d5159;border-radius:7px;padding:10px 12px;cursor:pointer;touch-action:manipulation}button:hover{background:#32464c}button:disabled{opacity:.42;cursor:default}button:focus-visible{outline:2px solid var(--gold)}button.primary{background:linear-gradient(110deg,#e8c791,#b9b38a);color:#1d2526;border-color:#f4dcad;font-weight:700}.danger{color:#f7a69b!important;border-color:#a96262!important}small{font-size:9px;color:#8499a1;letter-spacing:.7px}h2,h3,h4,p{margin:0}h2{font-size:23px}h3{font-size:15px;color:var(--gold)}h4{font-size:13px}#game{height:100dvh;max-width:500px;margin:auto;background:#0c141b;display:flex;flex-direction:column;overflow:hidden;border-inline:1px solid #283840}header{height:54px;flex-shrink:0;display:flex;align-items:center;gap:9px;padding:7px 11px;background:#111d25;z-index:2}header>div:nth-child(2){flex:1}header b{font-size:12px}header small{display:block;font-size:8px}header button{padding:5px 8px;min-height:33px}#home{color:var(--gold);font-size:19px;border:0;background:transparent;padding:0}.resources{font-size:15px;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}.resources.violet{color:var(--purple)}.stage{position:relative;height:38dvh;min-height:200px;max-height:350px;flex-shrink:0;overflow:hidden;border-bottom:1px solid #42544d}.stage canvas{width:100%;height:100%;object-fit:cover}.region{position:absolute;left:16px;top:10px;pointer-events:none;text-shadow:0 2px 8px #000}.region h2{font-size:19px;letter-spacing:3px;font-weight:500}.region small{font-size:8px}.enemy-hud{position:absolute;top:66px;left:16px;right:16px;font-size:10px;text-shadow:0 2px 3px #000}.enemy-hud small{color:#edb4a2;font-size:9px}.enemy-hud i{margin-top:3px}.enemy-hud b{background:#e39788}.hpbar{position:absolute;bottom:9px;left:16px;right:16px;display:flex;flex-wrap:wrap;justify-content:space-between;font-size:9px}.hpbar i{flex-basis:100%;margin-top:3px}i{display:block;height:4px;background:#10232ce0;overflow:hidden;border-radius:3px}i b{display:block;height:100%;background:var(--cyan);width:100%}#phase{position:absolute;top:13px;right:14px;background:#13212bba;color:var(--gold);font-size:9px;border:1px solid #64766b;padding:3px 7px;border-radius:4px}#combat-banner{position:absolute;inset:34% 0 auto;text-align:center;font-size:28px;letter-spacing:5px;font-weight:800;color:#f8e0a7;pointer-events:none;text-shadow:0 4px 10px #000;opacity:0;transition:opacity .2s}.loadout{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 11px 5px;flex-shrink:0}.skill-button{padding:6px 4px;min-height:47px;font-size:11px;background:linear-gradient(150deg,#294541,#15242d)}.skill-button b{font-size:17px;color:var(--cyan);margin-right:4px}.skill-button small{display:block;font-size:8px}.mission{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 8px;gap:5px;font-size:9px;color:#c5d3b7;flex-shrink:0}.mission>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission label{white-space:nowrap;display:flex;align-items:center;color:#a7b9b7}input{accent-color:var(--cyan)}#panel{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 12px 12px;background:linear-gradient(#16212b,#0d1922);scrollbar-width:thin;scrollbar-color:#42534f transparent}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.panel-heading small{font-size:9px}.upgrade{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #2d3b43;min-height:59px}.upgrade>em{width:25px;text-align:center;font-size:24px;font-style:normal;color:var(--gold)}.upgrade>div{flex:1}.upgrade h4 small{margin-left:7px;font-weight:400;font-size:9px}.upgrade p{font-size:10px;color:#a9c8c0}.upgrade button{min-width:86px;padding:7px 9px;color:var(--gold);font-size:11px;background:#34382f;border-color:#64664d}.battle-actions{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}.battle-actions button{flex:1;font-size:10px;padding:8px 4px}.hint{font-size:10px;color:#9caeb0;padding:9px 0;line-height:1.6}nav{height:60px;padding-bottom:env(safe-area-inset-bottom,0);display:flex;flex-shrink:0;border-top:1px solid #344650;background:#0e1922}nav button{flex:1;border:0;border-radius:0;background:transparent;color:#7f96a3;font-size:20px;padding:5px 1px}nav button span{display:block;font-size:10px}nav button.selected{color:var(--gold);background:linear-gradient(#b7a9711f,#131f27);border-top:2px solid var(--gold)}.card{display:flex;gap:10px;padding:10px;margin-bottom:8px;border:1px solid #354954;border-radius:8px;background:#182832}.portrait{width:64px;height:80px;flex-shrink:0;position:relative;background:radial-gradient(ellipse,#4b5969,#0c1821);overflow:hidden;border-radius:4px}.portrait:before{content:'';position:absolute;left:20px;top:17px;width:29px;height:59px;background:#0c141e;clip-path:polygon(30% 0,75% 4%,90% 28%,70% 37%,100% 100%,0 100%,20% 35%,0 20%)}.portrait:after{content:'';position:absolute;left:43px;top:10px;width:4px;height:62px;background:var(--c);transform:rotate(-22deg);box-shadow:0 0 8px var(--c)}.portrait.h1:after{height:82px;top:0;transform:rotate(32deg)}.portrait.h2:after{background:none;border:3px solid var(--c);border-left:0;border-radius:0 100% 100% 0;width:22px;left:35px;height:53px;top:20px}.portrait.h3:before{width:44px;left:8px}.portrait.h3:after{width:27px;height:22px;left:32px;top:15px}.card-info{flex:1;min-width:0}.card-info p{font-size:10px;color:#aabfc6;margin:3px 0}.card-info button{padding:5px 8px;font-size:10px;min-height:31px}.card-info small{font-size:9px}.skill-icon{height:52px;width:52px;flex-shrink:0;display:grid;place-items:center;font-size:31px;background:#263c45;border:1px solid #4e6f75;border-radius:7px}.rarity{color:var(--purple);font-size:9px}.pool-tabs{display:flex;gap:7px;margin-bottom:10px}.pool-tabs button{flex:1}.pool-art{position:relative;padding:17px 16px;background:radial-gradient(ellipse at 80% 40%,#514970,#1c2437 65%);border:1px solid #665b7f;border-radius:8px;min-height:106px;overflow:hidden}.pool-art:after{content:'✦';position:absolute;right:20px;top:-25px;font-size:150px;color:#c6adf431;transform:rotate(15deg)}.pool-art p{font-size:10px;color:#c1bad6;margin-top:4px;position:relative;z-index:1}.pool-actions{display:flex;gap:7px;margin:10px 0}.pool-actions button{flex:1}.pool-actions small{display:block;color:inherit}.odds{font-size:10px;color:#abbcc4;line-height:1.9}.pity{height:5px;margin-top:9px}.pity b{background:#c5a6ed}.reveal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0}.reveal-card{border:1px solid #656085;background:linear-gradient(135deg,#30324d,#182934);padding:11px 7px;border-radius:6px;text-align:center;animation:reveal .35s both}.reveal-card b{display:block;font-size:11px;color:#e8d0a6}.reveal-card small{color:#bddcca;letter-spacing:0;font-size:9px}.summon-seal{height:170px;display:grid;place-items:center;font-size:95px;color:#dfc3ff;animation:seal 1.2s infinite;text-shadow:0 0 40px #ba8eff}.setting{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #34434a;font-size:12px}.setting input[type=range]{margin-left:auto;width:105px}dialog{width:min(450px,94vw);max-height:88dvh;overflow:auto;background:#14232e;color:#e6edeb;border:1px solid #6b787c;border-radius:12px;padding:25px 19px 18px;box-shadow:0 20px 100px #000}dialog::backdrop{background:#03080cbb;backdrop-filter:blur(5px)}dialog h2{color:var(--gold);font-size:23px;margin-bottom:9px}dialog h3{margin:8px 0}dialog p{font-size:12px;color:#b7c8cb;line-height:1.7;margin:7px 0}dialog button{margin:4px 4px 3px 0}#close-modal{position:absolute;right:7px;top:3px;border:0;background:transparent;font-size:24px;padding:0 7px;color:#aabcc0}.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:8px 0}.map-grid button{margin:0;padding:7px 2px}.map-grid button.done{color:var(--cyan);border-color:#66877b}#toast{position:fixed;left:50%;top:58px;transform:translateX(-50%);background:#192f36f5;color:#e8d5ab;border:1px solid #859286;padding:8px 14px;border-radius:7px;max-width:90vw;width:max-content;font-size:11px;pointer-events:none;opacity:0;z-index:15;transition:opacity .15s}#toast.show{opacity:1}#title-screen{position:fixed;inset:0;margin:auto;max-width:500px;z-index:5;background:linear-gradient(150deg,#17242c,#0d141e 75%);overflow:hidden}#title-screen.hidden{display:none}.title-art{position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 45px,#9dddd609 46px 47px,transparent 48px 130px)}.eclipse{width:300px;height:300px;position:absolute;top:9%;right:-45px;border-radius:50%;background:#c7ded5;box-shadow:0 0 70px #76a99a55;opacity:.5}.eclipse:after{content:'';position:absolute;inset:-12px -20px 28px 33px;background:#101c27;border-radius:50%}.city{position:absolute;inset:28% -5% 0;background:#071019;clip-path:polygon(0 27%,12% 22%,12% 4%,20% 0,26% 12%,26% 40%,35% 25%,42% 30%,47% 6%,52% 9%,57% 60%,66% 49%,71% 10%,79% 0,86% 45%,94% 30%,100% 33%,100% 100%,0 100%)}.title-hero{position:absolute;right:10%;top:28%;height:49%;width:35%;background:#111e2c;clip-path:polygon(39% 0,63% 4%,81% 22%,68% 31%,78% 52%,100% 100%,54% 86%,42% 100%,0 91%,17% 54%,28% 31%,21% 22%);transform:rotate(-9deg)}.title-hero span{position:absolute;top:22%;right:23%;height:5px;width:30px;background:#b5ffe0;box-shadow:0 0 25px #aeffd8}.title-art:after{content:'';position:absolute;right:22%;top:33%;width:9px;height:45%;background:linear-gradient(#cbfff0,#7abcaf);transform:rotate(32deg);box-shadow:0 0 28px #94eacd}.title-copy{position:absolute;inset:9% 7% auto;z-index:1}.title-copy>small{letter-spacing:3px;color:#acc2ba}.title-copy h1{font-size:47px;font-weight:400;line-height:1.4;letter-spacing:8px;margin:25px 0 4px;text-shadow:0 4px 25px #000}.title-copy h1 strong{font-weight:750}.title-copy>p{letter-spacing:10px;font-size:17px;color:var(--gold)}blockquote{font-size:12px;color:#b6c6bf;line-height:1.9;margin:30px 0 24px;text-shadow:0 2px 6px #000}.title-copy button{display:block;width:65%;margin:9px 0;background:#182632d9}.title-copy button.primary{background:linear-gradient(110deg,#e8c791,#b9b38a)}#title-save{display:block;font-size:8px;letter-spacing:1px;margin-top:20px}.version{position:absolute;bottom:22px;left:7%;font-size:10px;color:#718b95;letter-spacing:4px}.ember{position:absolute;width:4px;height:4px;background:#baf2d8;box-shadow:0 0 15px #baffda;animation:float 7s infinite}.e1{left:70%;top:70%}.e2{left:30%;top:50%;animation-delay:-3s}.comic-panel{height:260px;background:radial-gradient(ellipse at 70% 20%,#75978f,#1b303e 45%,#081019);position:relative;overflow:hidden;border:2px solid #c6cec6;transform:skewY(-2deg);margin:20px 0}.comic-panel:before{content:'';position:absolute;inset:10% 0 0;background:#071219;clip-path:polygon(0 35%,15% 23%,15% 0,30% 20%,30% 55%,55% 25%,65% 50%,65% 5%,85% 15%,90% 60%,100% 40%,100% 100%,0 100%)}.comic-panel.c1{background:radial-gradient(ellipse,#f6c59b,#584250 40%,#101f2d)}.comic-panel.c2{background:radial-gradient(ellipse at 40% 80%,#89e7c8,#1d3443 40%,#101525)}.comic-panel:after{content:'◈';font-size:100px;color:#e7e5c8;position:absolute;left:40%;top:25%;text-shadow:0 0 35px #9ef6d1;transform:rotate(-20deg)}.comic-caption{position:absolute;bottom:12px;left:12px;right:12px;color:#fff3da;background:#0b151fd9;padding:10px;font-size:15px;z-index:1}.victory-title{font-size:35px!important;letter-spacing:6px;text-align:center}.reward-row{display:flex;gap:10px;margin:15px 0}.reward-row>div{flex:1;background:#243940;padding:12px;border-radius:5px;color:var(--gold);text-align:center;font-size:22px}.reward-row small{display:block;font-size:10px}.unlock-list{padding:10px;background:#38334c;border-left:2px solid var(--purple);font-size:11px;color:#d7c7ef}.hidden{display:none!important}@keyframes reveal{from{opacity:0;transform:scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}@keyframes seal{50%{transform:rotate(90deg) scale(1.15);opacity:.65}}@keyframes float{to{transform:translate(20px,-180px);opacity:0}}@media(min-width:700px){body{background:radial-gradient(ellipse,#263944,#070b11 75%)}#game,#title-screen{box-shadow:0 0 90px #000}}@media(max-height:720px){header{height:47px}.stage{height:33dvh;min-height:170px}.loadout{padding-top:5px}.skill-button{min-height:41px}.mission{padding-bottom:4px}nav{height:51px}.title-copy{top:5%}.title-copy h1{font-size:39px;margin:15px 0}.title-copy blockquote{margin:17px 0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}body.reduced *{animation:none!important;transition:none!important}
/* Comic artwork is original SVG, over the shared frame treatment. */
.comic-panel:before,.comic-panel:after{display:none}.comic-panel svg{width:100%;height:100%;display:block}.comic-caption{font-size:13px;bottom:6px;padding:7px;background:#09111de8}.comic-panel.c1 svg{filter:drop-shadow(0 0 13px #eeb27155)}
/* Status messages occupy the mission row, never cover battle or controls. */
#game .mission #toast{position:static;transform:none;display:none;max-width:none;width:auto;background:transparent;border:0;border-radius:0;padding:0;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}#game .mission #toast.show{display:block}.mission:has(#toast.show)>#objective{display:none}
#phase{cursor:pointer}.upgrade button{min-height:40px}.card-info button{min-height:36px}