:root{--ink:#eef0ff;--muted:#9ca4c8;--bg:#080b18;--panel:#11162a;--panel2:#161d36;--line:rgba(176,189,255,.16);--pink:#ff4f9a;--orange:#ff9b55;--cyan:#67e5df;--purple:#a78bfa;--green:#86efac;--red:#fb7185;--yellow:#fbd166;--shadow:0 20px 70px rgba(0,0,0,.36)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif}body{overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{opacity:.38;cursor:not-allowed}.hidden{display:none!important}
.app-shell{min-height:100vh;background:radial-gradient(circle at 70% -10%,#252351 0,transparent 34rem),radial-gradient(circle at -10% 40%,#1a2042 0,transparent 32rem),var(--bg)}
.title-screen{min-height:100vh;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,680px);align-items:center;gap:2rem;padding:6vw 9vw;overflow:hidden}.title-screen:before{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 70%)}.title-noise{position:absolute;width:36rem;height:36rem;right:-9rem;top:-10rem;border-radius:50%;background:conic-gradient(from 20deg,#ff4f9a,#ff9b55,#67e5df,#a78bfa,#ff4f9a);filter:blur(70px);opacity:.18}.title-copy,.title-stage{position:relative;z-index:1}.eyebrow,.kicker,.panel-head,.readout-label,.stat-pill small,.brand-lockup small{font:500 .68rem 'DM Mono',monospace;letter-spacing:.18em;color:var(--muted)}.title-copy h1{font-size:clamp(3.6rem,8vw,8rem);line-height:.82;letter-spacing:-.1em;margin:1.2rem 0 .8rem;max-width:760px}.title-copy h1 span{display:block;color:transparent;-webkit-text-stroke:2px var(--pink);text-shadow:8px 8px 0 rgba(255,79,154,.08)}.subtitle{font:500 1rem 'DM Mono',monospace;letter-spacing:.28em;color:var(--cyan);margin:0}.title-blurb{color:var(--muted);line-height:1.7;margin:2rem 0}.title-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.btn{background:rgba(255,255,255,.06);border:1px solid var(--line);padding:.7rem 1rem;border-radius:10px;transition:.2s ease;box-shadow:0 5px 20px rgba(0,0,0,.1)}.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}.btn-primary{background:linear-gradient(135deg,var(--pink),#bd5cff);border-color:transparent;box-shadow:0 10px 30px rgba(255,79,154,.25)}.btn-large{padding:1rem 1.4rem;font-weight:700}.btn-ghost{background:transparent}.btn-quiet{background:transparent;color:var(--muted);border-color:transparent;box-shadow:none}.btn-small{font-size:.78rem;padding:.52rem .75rem}.title-stage{height:min(60vh,520px);display:grid;place-items:center;transform:rotate(2deg)}#titleCanvas{width:100%;height:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}.title-stage:after{content:"";position:absolute;inset:8% 3%;border:1px solid rgba(103,229,223,.25);border-radius:42% 58% 50% 40%;transform:rotate(-8deg);pointer-events:none}.title-sticker{position:absolute;right:5%;bottom:5%;padding:1rem;border:1px solid var(--yellow);color:var(--yellow);font:500 .75rem 'DM Mono',monospace;line-height:1.5;transform:rotate(8deg);background:rgba(8,11,24,.72)}
.game-screen{max-width:1560px;margin:auto;padding:1rem 2rem 2rem}.topbar{min-height:70px;display:flex;align-items:center;gap:1.5rem;border-bottom:1px solid var(--line)}.brand-lockup{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.06em;white-space:nowrap}.brand-lockup b{color:var(--pink)}.brand-lockup small{display:block;font-size:.48rem;letter-spacing:.12em;margin-left:.5rem}.brand-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--purple));font-size:.8rem}.top-stats{margin-left:auto;display:flex;align-items:center;gap:.55rem}.stat-pill{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:center;min-width:86px;padding:.45rem .65rem;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.035)}.stat-pill span:not(.stat-icon){font-weight:700}.stat-pill small{grid-column:2;font-size:.5rem;letter-spacing:.1em}.stat-icon{grid-row:1/3;font-size:1.05rem}.gold{color:var(--yellow)}.shard{color:var(--cyan)}.level{font-size:.55rem;color:var(--pink);border:1px solid currentColor;border-radius:4px;padding:2px}.top-actions{display:flex;gap:.8rem;align-items:center;margin-left:1rem}.save-indicator{color:var(--green);font:500 .65rem 'DM Mono',monospace;letter-spacing:.08em;white-space:nowrap}.icon-btn{width:36px;height:36px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px}.offline-btn{padding:.55rem .8rem;border-radius:8px;background:rgba(103,229,223,.14);border:1px solid rgba(103,229,223,.4);color:var(--cyan);font:500 .68rem 'DM Mono',monospace;white-space:nowrap}.offline-btn span{color:var(--pink);font-size:1rem}
.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:1rem;margin-top:1rem}.battle-card,.side-panel,.hero-dock,.nav-dock{background:linear-gradient(145deg,rgba(22,29,54,.92),rgba(10,14,29,.94));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-glow:after{content:"";position:absolute}.battle-card{position:relative;padding:1.1rem}.battle-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}.battle-head h2{font-size:1.45rem;margin:.25rem 0 0;letter-spacing:-.04em}.battle-head h2 span{font-size:.75rem;color:var(--muted);font:500 .7rem 'DM Mono',monospace;letter-spacing:.12em;margin-left:.5rem}.battle-controls{display:flex;gap:.4rem}.control-btn{padding:.55rem .7rem;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;font:500 .68rem 'DM Mono',monospace}.control-btn:hover{border-color:var(--cyan)}.toggle-on{color:var(--green);border-color:rgba(134,239,172,.4)}.progress-row{display:flex;align-items:center;gap:.7rem;color:var(--muted);font:500 .65rem 'DM Mono',monospace;margin:1rem 0 .5rem}.progress-track{height:5px;flex:1;background:rgba(255,255,255,.08);border-radius:9px;overflow:hidden}.progress-fill{height:100%;width:2%;background:linear-gradient(90deg,var(--pink),var(--orange));transition:.3s}.battle-card canvas{width:100%;height:auto;display:block;border-radius:12px;background:#13162c}.boss-banner{position:absolute;top:86px;left:50%;transform:translateX(-50%);z-index:2;padding:.45rem 1rem;border:1px solid var(--pink);border-radius:999px;background:rgba(87,19,69,.85);color:#ffd1e3;font:500 .68rem 'DM Mono',monospace;letter-spacing:.12em;animation:blink 1s infinite alternate}@keyframes blink{to{box-shadow:0 0 30px rgba(255,79,154,.55)}}.battle-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .1rem 0;color:var(--muted);font-size:.8rem}.footer-actions{display:flex;gap:.5rem}.side-panel{padding:1rem}.panel-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.8rem}.state-live{color:var(--green)}.readout-main{display:flex;align-items:center;gap:.8rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}.readout-value{font-size:2.5rem;font-weight:700;letter-spacing:-.1em;color:var(--cyan)}.readout-sub{color:var(--muted);font-size:.75rem;margin-top:.3rem}.readout-list{padding:1rem 0;border-bottom:1px solid var(--line)}.readout-list div{display:flex;justify-content:space-between;margin:.6rem 0;font-size:.8rem;color:var(--muted)}.readout-list b{color:var(--ink)}.side-quote{font-size:.82rem;line-height:1.5;color:#d4d6ef;padding:1rem 0}.side-quote strong{display:block;color:var(--pink);font-size:.68rem;margin-top:.5rem}.side-tip{display:flex;gap:.6rem;padding:.75rem;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.2);border-radius:10px;color:var(--purple)}.side-tip b{font:500 .6rem 'DM Mono',monospace;letter-spacing:.12em}.side-tip p{margin:.35rem 0 0;color:var(--muted);font-size:.72rem;line-height:1.4}
.lower-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:1rem;margin-top:1rem}.hero-dock{padding:1rem}.dock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.dock-head h3{font-size:1.2rem;margin:.25rem 0 0}.hero-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem}.hero-card{position:relative;min-width:0;padding:.7rem;border:1px solid var(--line);border-radius:11px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transition:.2s}.hero-card:hover{border-color:rgba(255,255,255,.35);transform:translateY(-2px)}.hero-card.ability-ready{border-color:var(--pink);box-shadow:0 0 24px rgba(255,79,154,.15)}.hero-card-top{display:flex;gap:.6rem;align-items:center}.portrait{width:48px;height:48px;flex:none;border-radius:10px;background:#23294a}.portrait canvas{width:100%;height:100%}.hero-name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-role{color:var(--muted);font:500 .58rem 'DM Mono',monospace;text-transform:uppercase;margin-top:.2rem}.mini-stat{font:500 .6rem 'DM Mono',monospace;color:var(--muted);margin-top:.65rem;display:flex;justify-content:space-between}.bar{height:4px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:.25rem}.bar span{display:block;height:100%;transition:.3s}.hp span{background:linear-gradient(90deg,var(--green),var(--cyan))}.energy span{background:linear-gradient(90deg,var(--purple),var(--pink))}.card-actions{display:flex;gap:.35rem;margin-top:.65rem}.ability-btn{flex:1;padding:.4rem .2rem;border-radius:7px;background:rgba(255,79,154,.12);border:1px solid rgba(255,79,154,.25);color:#ffb3d0;font:500 .6rem 'DM Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ability-btn.ready{background:linear-gradient(135deg,var(--pink),#bd5cff);color:white;animation:abilityPulse 1.2s infinite alternate}@keyframes abilityPulse{to{box-shadow:0 0 20px rgba(255,79,154,.6)}}.upgrade-btn{padding:.4rem .45rem;border-radius:7px;background:rgba(103,229,223,.1);border:1px solid rgba(103,229,223,.2);color:var(--cyan);font-size:.72rem}.nav-dock{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;padding:.6rem;gap:.35rem}.nav-btn{min-height:64px;background:transparent;border:1px solid transparent;border-radius:10px;color:var(--muted);font-size:.72rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;transition:.2s}.nav-btn span{font-size:1.25rem;color:var(--purple)}.nav-btn:hover,.nav-btn.active{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.24);color:var(--ink)}.nav-btn.active span{color:var(--pink)}
.overlay-root{position:fixed;inset:0;z-index:10;pointer-events:none}.overlay{pointer-events:auto;position:absolute;inset:0;padding:4vh 4vw;background:rgba(5,7,17,.72);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}.modal{width:min(980px,100%);max-height:92vh;overflow:auto;background:linear-gradient(145deg,#1b2341,#0e1328);border:1px solid rgba(176,189,255,.28);border-radius:18px;box-shadow:0 30px 100px #000;padding:1.3rem}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}.modal-head h2{margin:0;letter-spacing:-.04em}.close-btn{background:rgba(255,255,255,.08);width:34px;height:34px;border-radius:8px}.modal-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}.tab-btn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;color:var(--muted);font-size:.78rem}.tab-btn.active{color:var(--ink);border-color:var(--pink);background:rgba(255,79,154,.1)}.modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.manage-card{border:1px solid var(--line);border-radius:12px;padding:.8rem;background:rgba(255,255,255,.035)}.manage-card h4{margin:0 0 .4rem}.manage-card p{font-size:.75rem;color:var(--muted);line-height:1.5;margin:.3rem 0}.manage-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.7rem}.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.item-card{border:1px solid var(--line);border-radius:10px;padding:.65rem;background:rgba(255,255,255,.035);min-height:130px}.item-card.equipped{box-shadow:inset 0 0 0 1px var(--cyan);border-color:var(--cyan)}.item-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:1.1rem;background:linear-gradient(135deg,#313b68,#171d3b);margin-bottom:.45rem}.item-name{font-size:.76rem;font-weight:700}.rarity{font:500 .58rem 'DM Mono',monospace;letter-spacing:.08em}.common{color:#bdc4dd}.uncommon{color:var(--green)}.rare{color:#63a8ff}.epic{color:var(--purple)}.legendary{color:var(--orange)}.item-stats{font-size:.65rem;color:var(--muted);line-height:1.45;margin:.35rem 0}.item-card button{width:100%;font-size:.65rem;padding:.4rem;border-radius:6px;background:rgba(255,255,255,.07);margin-top:.25rem}.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}.area-card{padding:.8rem;border:1px solid var(--line);border-radius:11px;min-height:150px;background:linear-gradient(145deg,rgba(255,79,154,.12),rgba(103,229,223,.04))}.area-card.locked{filter:grayscale(.8);opacity:.65}.area-card h4{margin:0 0 .45rem;font-size:.85rem}.area-card p{font-size:.68rem;color:var(--muted);line-height:1.5}.stage-list{display:flex;flex-wrap:wrap;gap:.35rem}.stage-chip{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.65rem}.stage-chip.cleared{background:rgba(134,239,172,.16);border-color:rgba(134,239,172,.4);color:var(--green)}.stage-chip.current{background:var(--pink);border-color:transparent}.collection-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.collection-card{border:1px solid var(--line);border-radius:10px;padding:.7rem;display:flex;align-items:center;gap:.7rem}.collection-card .collect-icon{font-size:1.5rem}.locked-text{color:var(--muted);font-size:.7rem}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.85rem}.setting-row small{color:var(--muted);display:block;margin-top:.25rem}.toggle{width:46px;height:25px;border-radius:99px;background:#303852;padding:3px}.toggle i{display:block;width:19px;height:19px;border-radius:50%;background:#aab1cc;transition:.2s}.toggle.on{background:var(--pink)}.toggle.on i{transform:translateX(21px);background:#fff}.toast-root{position:fixed;right:1.2rem;bottom:1.2rem;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.toast{padding:.75rem .9rem;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:9px;background:#18203b;box-shadow:var(--shadow);font-size:.78rem;animation:toastIn .25s ease,toastOut .3s ease 3.7s forwards}@keyframes toastIn{from{transform:translateX(20px);opacity:0}}@keyframes toastOut{to{transform:translateX(20px);opacity:0}}.reward-banner{position:fixed;left:50%;top:15%;transform:translateX(-50%);z-index:15;padding:1.3rem 2rem;border:1px solid var(--yellow);border-radius:14px;background:linear-gradient(145deg,#332b4b,#171529);box-shadow:0 0 70px rgba(251,209,102,.2);text-align:center;animation:bannerIn .4s ease}.reward-banner h2{margin:.2rem 0;color:var(--yellow)}.reward-banner p{color:var(--muted);font-size:.8rem}@keyframes bannerIn{from{transform:translate(-50%,-20px);opacity:0}}
@media(max-width:1050px){.game-screen{padding:1rem}.battle-layout,.lower-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.side-panel>*{margin:0}.readout-main,.readout-list,.side-quote,.side-tip{border:0;border-bottom:0}.nav-dock{grid-template-columns:repeat(6,1fr);min-height:86px}.nav-btn{min-height:60px}.area-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.title-screen{grid-template-columns:1fr;padding:3rem 1.3rem}.title-stage{order:-1;height:250px}.title-copy h1{font-size:4rem}.brand-lockup small{display:none}.topbar{flex-wrap:wrap;padding-bottom:.7rem}.top-stats{order:3;width:100%;margin:0}.top-actions{margin-left:auto}.stat-pill{flex:1}.battle-head{align-items:flex-start;flex-direction:column}.battle-controls{width:100%}.battle-controls .control-btn{flex:1}.battle-footer{align-items:flex-start;flex-direction:column}.hero-cards{grid-template-columns:repeat(2,1fr)}.side-panel{display:block}.side-panel>*{margin:0}.readout-main,.readout-list,.side-quote,.side-tip{border-bottom:1px solid var(--line)}.nav-dock{grid-template-columns:repeat(3,1fr)}.modal-grid,.collection-list{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(2,1fr)}.area-grid{grid-template-columns:1fr 1fr}}

.mission-card{margin-top:1rem;padding:.8rem;background:linear-gradient(135deg,rgba(255,79,154,.11),rgba(103,229,223,.06));border:1px solid rgba(255,79,154,.25);border-radius:11px}.mission-card p{font-size:.76rem;line-height:1.55;margin:.45rem 0;color:#dfe3ff}.mission-card strong{font:500 .6rem 'DM Mono',monospace;color:var(--pink);letter-spacing:.1em}.store-shortcut{display:none}.wallet-strip{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);font-size:.78rem}.wallet-strip span:first-child{color:var(--yellow)}.wallet-strip span:nth-child(2){color:var(--cyan)}.store-note{margin:1rem 0;padding:.8rem;border-radius:10px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.22);color:var(--muted);font-size:.76rem;line-height:1.55}.store-note b{color:var(--ink)}.store-note .rarity{display:block;margin-top:.45rem}.store-list{display:grid;gap:.6rem}.store-offer{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.75rem;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035)}.store-offer-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#313b68,#171d3b);color:var(--yellow);font-size:1.25rem}.store-offer-copy h4{margin:0 0 .25rem;font-size:.85rem}.store-offer-copy p{margin:0 0 .35rem;color:var(--muted);font-size:.7rem;line-height:1.35}.btn-premium{background:linear-gradient(135deg,#159eae,#4b6dff);border-color:transparent}.loop-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}.loop-steps>div{padding:.8rem;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035)}.loop-steps b{font:500 .65rem 'DM Mono',monospace;color:var(--cyan);letter-spacing:.08em}.loop-steps p{margin:.4rem 0 0;color:var(--muted);font-size:.76rem;line-height:1.5}
@media(max-width:1050px){.nav-dock{grid-template-columns:repeat(7,minmax(64px,1fr));overflow-x:auto;justify-content:start}.nav-btn{min-width:64px}.side-panel{grid-template-columns:repeat(2,1fr)}.mission-card{grid-column:1/-1}}
@media(max-width:760px){html,body{min-height:100%;background:#080b18}.app-shell{min-height:100dvh}.title-screen{min-height:100dvh;max-width:480px;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:0;padding:1.2rem 1rem 2rem}.title-stage{order:-1;width:100%;height:29vh;min-height:190px;max-height:280px;margin-bottom:.5rem}.title-copy h1{font-size:clamp(3.15rem,15vw,4.4rem);margin:.4rem 0 .65rem}.title-blurb{font-size:.84rem;line-height:1.5;margin:1.1rem 0}.title-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.title-actions .btn-large{grid-column:1/-1}.title-actions .btn-quiet{font-size:.72rem;padding:.75rem .4rem}.game-screen{width:min(100%,480px);padding:.65rem .65rem 7.5rem;margin:auto}.topbar{position:sticky;top:0;z-index:5;min-height:50px;padding:.2rem 0 .65rem;background:rgba(8,11,24,.9);backdrop-filter:blur(12px);gap:.45rem}.brand-lockup{font-size:.73rem;letter-spacing:.02em}.brand-mark{width:24px;height:24px}.top-actions{margin-left:auto;gap:.35rem}.save-indicator{font-size:.52rem}.icon-btn{width:34px;height:34px}.top-stats{gap:.35rem;order:3}.stat-pill{min-width:0;padding:.35rem .45rem;column-gap:.3rem;font-size:.78rem}.stat-pill small{font-size:.45rem}.battle-layout{display:flex;flex-direction:column;gap:.6rem;margin-top:.65rem}.battle-card{padding:.7rem;border-radius:13px}.battle-head{gap:.55rem}.battle-head h2{font-size:1.08rem}.battle-head h2 span{display:block;margin:.3rem 0 0;font-size:.56rem}.battle-controls{gap:.3rem}.control-btn{min-height:42px;padding:.45rem .35rem;font-size:.6rem}.progress-row{gap:.4rem;margin:.7rem 0 .4rem;font-size:.52rem}.progress-row span:last-child{display:none}.battle-card canvas{height:auto;aspect-ratio:16/10;object-fit:cover}.boss-banner{top:75px;font-size:.54rem;white-space:nowrap}.battle-footer{gap:.5rem;padding-top:.55rem;font-size:.7rem}.footer-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.footer-actions .btn{min-height:44px}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.7rem;border-radius:13px}.side-panel .panel-head{grid-column:1/-1;padding-bottom:.55rem}.readout-main{padding:.65rem 0;gap:.45rem}.readout-value{font-size:1.65rem}.readout-label{font-size:.54rem}.readout-sub{font-size:.62rem}.readout-list{padding:.3rem 0;border:0}.readout-list div{font-size:.65rem;margin:.42rem 0}.side-quote{grid-column:1/-1;padding:.7rem 0;font-size:.7rem;border-bottom:1px solid var(--line)}.side-tip{grid-column:1/-1;padding:.6rem;font-size:.65rem}.side-tip p{font-size:.64rem}.mission-card{grid-column:1/-1;margin-top:0;padding:.7rem}.mission-card p{font-size:.68rem}.lower-layout{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}.hero-dock{padding:.7rem;border-radius:13px}.dock-head{margin-bottom:.55rem}.dock-head h3{font-size:.95rem}.dock-head .btn{min-height:40px}.hero-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.hero-card{padding:.5rem;border-radius:10px}.hero-card-top{gap:.4rem}.portrait{width:38px;height:38px;border-radius:8px}.hero-name{font-size:.68rem}.hero-role{font-size:.48rem}.mini-stat{font-size:.5rem;margin-top:.45rem}.card-actions{margin-top:.45rem}.ability-btn,.upgrade-btn{min-height:38px;font-size:.52rem}.nav-dock{position:fixed;left:50%;bottom:.55rem;transform:translateX(-50%);z-index:8;width:min(calc(100% - 1rem),468px);grid-template-columns:repeat(7,minmax(62px,1fr));overflow-x:auto;padding:.35rem;gap:.2rem;border-radius:14px;background:rgba(17,22,42,.95);backdrop-filter:blur(16px);box-shadow:0 12px 40px rgba(0,0,0,.5)}.nav-btn{min-width:62px;min-height:54px;font-size:.52rem;gap:.2rem}.nav-btn span{font-size:1rem}.store-shortcut{display:none}.overlay{padding:0;align-items:flex-end}.modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;padding:1rem .85rem calc(1rem + env(safe-area-inset-bottom));border-bottom:0}.modal-head{padding-bottom:.7rem;margin-bottom:.7rem}.modal-head h2{font-size:1rem}.close-btn{width:42px;height:42px}.modal-grid,.loop-steps{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.item-card{min-height:0;padding:.5rem}.item-name{font-size:.68rem}.item-stats{font-size:.58rem}.item-card button{min-height:40px}.area-grid{grid-template-columns:1fr}.area-card{min-height:0;padding:.7rem}.collection-card{padding:.55rem}.store-offer{grid-template-columns:36px minmax(0,1fr);gap:.55rem;padding:.65rem}.store-offer-icon{width:36px;height:36px;font-size:1rem}.store-offer .btn{grid-column:2;justify-self:stretch;min-height:42px}.wallet-strip{gap:.5rem;font-size:.68rem}.toast-root{left:.65rem;right:.65rem;bottom:5.4rem;align-items:stretch}.toast{font-size:.7rem}}
@media(pointer:coarse){button{min-height:44px}.nav-btn{min-height:58px}.control-btn{min-height:44px}}
@media(max-width:760px){button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.battle-card canvas{touch-action:none}}

/* 9:16 play order: battle, active squad, then the compact field readout. */
@media(max-width:760px){
  .game-screen{display:flex;flex-direction:column;gap:.55rem;min-height:100dvh;overflow:hidden}
  .battle-layout,.lower-layout{display:contents}
  .battle-card{order:1}
  .hero-dock{order:2}
  .side-panel{order:3}
  .battle-card canvas{height:min(27dvh,220px);aspect-ratio:auto;object-fit:fill}
  .hero-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem}
  .hero-card{padding:.35rem}
  .hero-card-top{display:block;text-align:center}
  .portrait{width:34px;height:34px;margin:0 auto .22rem}
  .hero-name{font-size:.56rem}
  .hero-role{font-size:.42rem}
  .mini-stat{font-size:.43rem;margin-top:.3rem}
  .card-actions{display:block;margin-top:.3rem}
  .ability-btn,.upgrade-btn{width:100%;min-height:32px;padding:.25rem .1rem;font-size:.44rem}
  .upgrade-btn{margin-top:.2rem}
  .side-quote,.mission-card{display:none}
  .side-panel{gap:.35rem;padding:.5rem}
  .side-panel .panel-head{padding-bottom:.35rem}
  .readout-main{padding:.45rem 0}
  .readout-value{font-size:1.35rem}
  .readout-list{padding:.1rem 0}
  .readout-list div{margin:.25rem 0;font-size:.58rem}
  .side-tip{padding:.45rem}
  .side-tip p{display:none}
}

/* The battle canvas is the one window into the game world: scenery, combat and story. */
.battle-backdrop{display:none!important}
.battle-scene.story-active{cursor:pointer;box-shadow:inset 0 0 0 2px rgba(240,189,63,.6)}
.battle-scene.story-active canvas{touch-action:manipulation}
.story-scene{display:none!important}

/* Final phone pass: no page scroll, compact chrome, stable 9:16 composition. */
@media (max-width:760px){
  html,body,.app-shell{width:100%;height:100%;max-height:100%;overflow:hidden}
  .game-screen{width:100%;max-width:none;height:100dvh;min-height:0;padding:.24rem .32rem calc(3rem + env(safe-area-inset-bottom));gap:.24rem;overflow:hidden}
  .topbar{position:static;flex:0 0 34px;min-height:34px;height:34px;padding:0;gap:.2rem;flex-wrap:nowrap;background:transparent;border:0}
  .brand-lockup{gap:0}.brand-lockup>span:nth-child(2),.brand-lockup small,.save-indicator{display:none}
  .brand-mark{width:27px;height:27px;font-size:.72rem}
  .top-stats{order:initial;width:auto;min-width:0;margin-left:auto;gap:.16rem}
  .stat-pill{min-width:0;height:28px;padding:.08rem .25rem;gap:.16rem;border-radius:1px}
  .stat-pill>span:not(.stat-icon){font-size:.62rem}.stat-pill small{font-size:.32rem}.stat-icon{font-size:.52rem}
  .top-actions{margin:0}.icon-btn{width:28px;min-width:28px;min-height:28px!important;height:28px;padding:0;font-size:.72rem}
  .battle-layout,.lower-layout{display:contents}
  .battle-card{order:1;min-height:0;padding:.3rem .34rem;overflow:hidden}
  .battle-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem;margin:0}
  .battle-head .kicker{margin:0;font-size:.38rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-head h2{margin:.08rem 0 0;font-size:.7rem;line-height:1}.battle-head h2 span{font-size:.36rem;letter-spacing:.03em}
  .battle-controls{width:auto;margin:0;gap:.13rem;display:flex;flex-wrap:nowrap}
  .control-btn{min-width:0;min-height:27px!important;height:27px;padding:.15rem .25rem;font-size:.42rem;white-space:nowrap}
  .music-panel{width:100%;height:29px;margin:.16rem 0 0;padding:.1rem .16rem;gap:.14rem}
  .music-btn{min-width:26px;min-height:25px!important;height:25px;padding:.05rem .18rem;font-size:.5rem}.music-main{font-size:.58rem}
  .music-now{gap:0}.music-now .kicker,.music-now small{display:none}.music-now b{font-size:.5rem}
  .progress-row{margin:.13rem 0;font-size:.35rem;gap:.2rem;line-height:1}.progress-track{height:3px}
  .boss-banner{margin:.12rem 0;padding:.16rem;font-size:.45rem}
  .battle-scene{width:100%;min-height:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
  .battle-card canvas{display:block;width:100%;height:min(28dvh,230px);min-height:172px;aspect-ratio:auto;object-fit:fill}
  .battle-footer{display:block;margin-top:.16rem;padding-top:.14rem;border:0}.battle-footer>span{display:none!important}
  .tactical-actions{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:.14rem}
  .tactical-actions .btn{min-height:27px!important;height:27px;padding:.1rem .08rem;font-size:.36rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-dock{order:2;min-height:0;padding:.26rem .3rem;overflow:hidden}
  .dock-head{margin-bottom:.2rem}.dock-head .kicker{display:none}.dock-head h3{font-size:.62rem}.dock-head .btn{min-height:25px!important;height:25px;padding:.08rem .24rem;font-size:.38rem}
  .hero-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem}
  .hero-card{min-width:0;padding:.2rem .16rem;overflow:hidden}
  .hero-card-top{display:flex;align-items:center;gap:.12rem;text-align:left}.hero-card .portrait,.portrait{flex:0 0 27px;width:27px;height:27px;margin:0}
  .hero-name{font-size:.46rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-role{font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-stat{margin-top:.14rem;font-size:.32rem}.hero-card .bar{height:3px;margin-top:.06rem}.combat-status{min-height:.46rem;margin:.08rem 0 0;font-size:.28rem}.xp-readout{display:none}
  .card-actions{grid-template-columns:1fr 1fr;gap:.1rem;margin-top:.1rem}
  .attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{min-width:0;min-height:23px!important;height:23px;padding:.05rem .02rem;font-size:.3rem!important;overflow:hidden;text-overflow:ellipsis}
  .card-actions .upgrade-btn{grid-column:auto!important;margin:0!important}
  .side-panel{display:none!important}.store-shortcut{display:none!important}
  .nav-dock{position:fixed;z-index:50;left:.32rem;right:.32rem;bottom:max(.2rem,env(safe-area-inset-bottom));height:42px;min-height:42px;padding:.12rem;gap:.1rem;display:grid;grid-template-columns:repeat(7,1fr)}
  .nav-btn{min-width:0;min-height:37px!important;height:37px;padding:.05rem;font-size:0}.nav-btn span{display:block;font-size:.74rem;margin:0}
  .toast-root{left:.35rem;right:.35rem;bottom:3rem;align-items:stretch}.toast{padding:.45rem .55rem;font-size:.58rem;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
  .track-toast{top:.35rem;right:.35rem;width:min(220px,calc(100vw - .7rem));padding:.38rem .48rem;gap:.03rem}.track-toast .kicker{font-size:.36rem}.track-toast b{font-size:.58rem}.track-toast small{font-size:.44rem}
  .reward-banner{top:.4rem;width:calc(100vw - .8rem);padding:.45rem .55rem}.reward-banner h2{font-size:.72rem}.reward-banner p{font-size:.5rem;margin:.12rem 0}
}

.tactical-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.tactical-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (max-height:600px) and (pointer:coarse){
  .game-screen{padding-bottom:2.8rem}
  .battle-card canvas{height:31dvh;min-height:105px;max-height:140px}
  .dock-head,.hero-card-top,.hero-card .mini-stat,.hero-card .bar,.combat-status,.xp-readout{display:none!important}
  .hero-dock{padding:.18rem .25rem}.hero-card{padding:.12rem}.card-actions{margin:0}
  .attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{height:21px;min-height:21px!important}
  .nav-dock{height:38px;min-height:38px}.nav-btn{height:33px;min-height:33px!important}
}

@media (max-width:760px){
  .topbar{flex-basis:29px;min-height:29px;height:29px}.brand-mark{width:23px;height:23px}.top-stats{display:flex;flex:1;justify-content:flex-end}.stat-pill{flex:0 1 72px;height:24px}.stat-pill small{display:none}.icon-btn{width:24px;min-width:24px;height:24px;min-height:24px!important}
  .battle-head{display:flex;flex-direction:column;gap:.14rem}.battle-head>div:first-child{display:none}.battle-head .music-panel{order:1;margin:0;height:27px}.battle-head .battle-controls{order:2;width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .control-btn{width:100%;height:24px;min-height:24px!important;font-size:.38rem}.music-btn{height:23px;min-height:23px!important}.progress-row{margin:.1rem 0}
}

/* RESONANT RECORDS street edition: charcoal, paper white, hazard yellow, red signal hits. */
:root{--ink:#f1efe8;--muted:#97958c;--bg:#090a09;--panel:#151615;--panel2:#222320;--line:rgba(236,190,63,.22);--pink:#dca52b;--orange:#c47d1c;--cyan:#e0bc4d;--purple:#8b8b82;--green:#a8b28a;--red:#c43732;--yellow:#f0bd3f;--shadow:0 20px 70px rgba(0,0,0,.52)}
.app-shell{background:radial-gradient(circle at 82% -8%,#2c2719 0,transparent 32rem),radial-gradient(circle at -10% 42%,#1b1c19 0,transparent 28rem),var(--bg)}
.title-screen:before{opacity:.1;background-image:linear-gradient(rgba(240,189,63,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(240,189,63,.12) 1px,transparent 1px)}
.title-noise{background:conic-gradient(from 20deg,#6d4e18,#dca52b,#514d3b,#b52d2d,#6d4e18);opacity:.16}
.title-copy h1 span{text-shadow:8px 8px 0 rgba(220,165,43,.1)}
.btn-primary{background:linear-gradient(135deg,#dca52b,#8e661d);box-shadow:0 10px 30px rgba(220,165,43,.2)}
.brand-mark{background:linear-gradient(135deg,#e7b735,#8f661d)}
.offline-btn{background:rgba(220,165,43,.12);border-color:rgba(220,165,43,.4);color:var(--yellow)}
.offline-btn span{color:var(--red)}
.battle-card,.side-panel,.hero-dock,.nav-dock{background:linear-gradient(145deg,rgba(31,32,29,.96),rgba(12,13,12,.98))}
.battle-card canvas{background:#1a1b18}
.progress-fill{background:linear-gradient(90deg,var(--red),var(--yellow))}
.boss-banner{border-color:var(--red);background:rgba(93,24,19,.9);color:#ffe3c7}
@keyframes blink{to{box-shadow:0 0 30px rgba(196,55,50,.45)}}
.readout-value{color:var(--yellow)}
.side-quote strong{color:var(--yellow)}
.side-tip{background:rgba(220,165,43,.09);border-color:rgba(220,165,43,.24);color:var(--yellow)}
.hero-card.ability-ready{border-color:var(--red);box-shadow:0 0 24px rgba(196,55,50,.15)}
.hp span{background:linear-gradient(90deg,var(--green),var(--yellow))}
.energy span{background:linear-gradient(90deg,#8d6f23,var(--yellow))}
.ability-btn{background:rgba(196,55,50,.12);border-color:rgba(196,55,50,.3);color:#ffc6a9}
.ability-btn.ready{background:linear-gradient(135deg,var(--red),#8f2626)}
.upgrade-btn{background:rgba(220,165,43,.1);border-color:rgba(220,165,43,.26);color:var(--yellow)}
.nav-btn span{color:#a9965a}
.nav-btn:hover,.nav-btn.active{background:rgba(220,165,43,.1);border-color:rgba(220,165,43,.28)}
.nav-btn.active span{color:var(--yellow)}
.modal{background:linear-gradient(145deg,#292a25,#111210);border-color:rgba(236,190,63,.28)}
.tab-btn.active{border-color:var(--yellow);background:rgba(220,165,43,.12)}
.item-card.equipped{box-shadow:inset 0 0 0 1px var(--yellow);border-color:var(--yellow)}
.item-icon,.store-offer-icon{background:linear-gradient(135deg,#3b3a30,#171816)}
.area-card{background:linear-gradient(145deg,rgba(220,165,43,.12),rgba(196,55,50,.04))}
.stage-chip.current{background:var(--red)}
.toggle.on{background:var(--red)}
.mission-card{background:linear-gradient(135deg,rgba(220,165,43,.12),rgba(196,55,50,.05));border-color:rgba(220,165,43,.28)}
.mission-card strong{color:var(--yellow)}
.wallet-strip span:first-child{color:var(--yellow)}
.wallet-strip span:nth-child(2){color:#d1c7a2}
.store-note{background:rgba(220,165,43,.08);border-color:rgba(220,165,43,.24)}
.btn-premium{background:linear-gradient(135deg,#927021,#b52d2d)}
.loop-steps b{color:var(--yellow)}
.toast{border-left-color:var(--yellow);background:#24251f}
.reward-banner{border-color:var(--yellow);background:linear-gradient(145deg,#3b321c,#171714);box-shadow:0 0 70px rgba(240,189,63,.16)}

/* Hard-edged street poster geometry. */
.battle-card,.side-panel,.hero-dock,.nav-dock{border-radius:2px;clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))}
.hero-card,.manage-card,.item-card,.area-card,.collection-card,.store-offer,.mission-card,.store-note,.side-tip,.wallet-strip{border-radius:2px}
.btn,.control-btn,.icon-btn,.offline-btn,.nav-btn,.ability-btn,.upgrade-btn,.tab-btn,.close-btn,.stage-chip,.toggle{border-radius:2px}
.brand-mark{border-radius:2px;clip-path:polygon(0 7px,7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.title-sticker{border-radius:0}
@media(max-width:760px){.modal{border-radius:2px 2px 0 0}.battle-card,.side-panel,.hero-dock,.nav-dock{clip-path:polygon(0 9px,9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px))}}
.attack-btn{flex:1;padding:.4rem .2rem;border-radius:2px;background:rgba(220,165,43,.14);border:1px solid rgba(220,165,43,.36);color:var(--yellow);font:700 .6rem 'DM Mono',monospace;white-space:nowrap}
.attack-btn:active{background:var(--yellow);color:#111;transform:translateY(1px)}
.xp-readout{margin-top:.35rem;color:var(--muted);font:500 .52rem 'DM Mono',monospace;letter-spacing:.05em}
@media(max-width:760px){.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}.card-actions .upgrade-btn{grid-column:1/-1;margin-top:0}.attack-btn,.ability-btn{width:100%;min-height:32px}}

.music-panel{display:flex;align-items:center;gap:.3rem;margin-top:.45rem;padding:.35rem;border:1px solid rgba(215,165,45,.3);background:rgba(8,10,8,.74);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);max-width:100%}
.music-btn{border:1px solid rgba(215,165,45,.5);background:#171816;color:var(--yellow);font:700 .65rem 'DM Mono',monospace;min-width:31px;min-height:30px;padding:.2rem .35rem;cursor:pointer}
.music-btn:active{transform:translateY(1px);background:var(--yellow);color:#111}
.music-main{font-size:.8rem;background:rgba(196,55,50,.22);color:#f1efe8}
.music-now{min-width:0;flex:1;display:grid;gap:.08rem}.music-now .kicker{font-size:.45rem;color:var(--yellow)}.music-now b,.music-now small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.music-now b{font-size:.68rem}.music-now small{font-size:.55rem;color:var(--muted)}
.track-toast{position:fixed;z-index:30;right:1rem;top:1rem;width:min(270px,calc(100vw - 2rem));padding:.8rem .9rem;background:#11120f;border:1px solid var(--yellow);box-shadow:8px 8px 0 rgba(0,0,0,.45);clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);display:grid;gap:.12rem;transform:translateY(-140%);opacity:0;transition:transform .22s ease,opacity .22s ease}.track-toast.show{transform:translateY(0);opacity:1}.track-toast .kicker{color:var(--yellow);font-size:.5rem}.track-toast b{font-size:.9rem;color:#f1efe8}.track-toast small{color:var(--muted);font-size:.65rem}
.roster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin-top:.8rem}.roster-pick{position:relative;display:grid;justify-items:center;gap:.12rem;padding:.35rem .2rem .45rem;background:#171816;color:#f1efe8;border:1px solid rgba(241,239,232,.12);cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}.roster-pick.selected{border-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--red)}.roster-pick canvas{width:76px;height:86px}.roster-pick-name{font:700 .7rem 'Space Grotesk',sans-serif}.roster-pick small{font-size:.5rem;color:var(--muted);text-align:center}.roster-pick i{font:700 .45rem 'DM Mono',monospace;color:var(--yellow);font-style:normal}.roster-pick:not(.selected) i{color:var(--muted)}.roster-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem;padding-top:.6rem;border-top:1px solid rgba(241,239,232,.1)}.roster-footer button:disabled{opacity:.35;cursor:not-allowed}.roster-manage-card.locked{opacity:.65}
.jukebox-controls{display:flex;gap:.4rem;margin-bottom:.7rem}.jukebox-list{display:grid;gap:.3rem;max-height:56vh;overflow:auto}.jukebox-track{display:grid;grid-template-columns:2rem 1fr auto;grid-template-rows:auto auto;align-items:center;text-align:left;gap:0 .5rem;padding:.55rem .6rem;background:#171816;border:1px solid rgba(241,239,232,.12);color:#f1efe8;cursor:pointer}.jukebox-track>span{grid-row:1/3;color:var(--yellow);font:700 .65rem 'DM Mono',monospace}.jukebox-track strong{font-size:.75rem}.jukebox-track small{font-size:.58rem;color:var(--muted)}.jukebox-track i{grid-column:3;grid-row:1/3;color:var(--yellow);font:700 .5rem 'DM Mono',monospace;font-style:normal}.jukebox-track.playing{border-color:var(--red);background:rgba(196,55,50,.18)}
@media(max-width:760px){.roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.music-panel{width:100%}.battle-head{display:block}.battle-controls{margin-bottom:.25rem}.track-toast{top:.65rem;right:.65rem}.jukebox-controls .btn{flex:1;padding-left:.3rem;padding-right:.3rem}}
.battle-scene{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;background:#171816;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.battle-backdrop{position:absolute;inset:0;z-index:0;background:#171816 center/cover no-repeat;filter:none;transition:background-image .5s ease;transform:none}
.battle-backdrop:before,.battle-backdrop:after{display:none;content:none}
.battle-scene canvas{position:relative;z-index:1;background:transparent!important}

/* Album-cover title and a deliberately tiny retro boot screen. */
.boot-splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#050505;transition:opacity .45s ease,visibility .45s ease}
.boot-splash.dismissed{opacity:0;visibility:hidden;pointer-events:none}
.boot-start{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:.15rem;border:0;background:transparent;color:#f2f0e8;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.boot-bird{width:72px;height:72px;display:grid;place-items:center;margin-bottom:.8rem;border:3px solid #f0bd3f;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);color:#f0bd3f;font-size:2.8rem;font-weight:900;font-style:italic;box-shadow:inset 0 -7px 0 rgba(196,55,50,.55)}
.boot-start strong{font-size:2rem;line-height:1;letter-spacing:.24em;text-indent:.24em}
.boot-start small{color:#f0bd3f;font:700 .72rem 'DM Mono',monospace;letter-spacing:.46em;text-indent:.46em}
.boot-start i{margin-top:2.2rem;color:#77776f;font:500 .58rem 'DM Mono',monospace;font-style:normal;letter-spacing:.18em;animation:bootBlink 1s steps(2,end) infinite}
@keyframes bootBlink{50%{opacity:.28}}

.title-screen{position:relative;isolation:isolate;width:min(100%,500px);min-height:100dvh;margin:auto;display:block;padding:0;overflow:hidden;background:#030403}
.title-art{position:absolute;inset:0;z-index:-3;background:#050505 url('assets/oppression-title-pixel.png') center top/cover no-repeat;image-rendering:auto}
.title-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,rgba(0,0,0,.08) 0,transparent 38%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.96) 86%,#030303 100%);pointer-events:none}
.title-screen:before,.title-noise{display:none!important}
.title-copy{position:absolute;z-index:2;left:clamp(.9rem,4vw,1.35rem);right:clamp(.9rem,4vw,1.35rem);bottom:max(1rem,env(safe-area-inset-bottom));max-width:none;text-align:center}
.title-label{margin:0 0 .65rem;color:#f1efe8;font:800 .82rem 'DM Mono',monospace;letter-spacing:.34em;text-indent:.34em}
.title-label span{display:block;margin-top:.2rem;color:#a7a69f;font-size:.54rem;letter-spacing:.72em;text-indent:.72em}
.title-copy h1{display:grid;gap:.08rem;margin:0 0 .55rem;color:#f1efe8;text-transform:uppercase;line-height:.92;text-shadow:0 3px 0 #000}
.title-copy h1 span{font:700 clamp(.72rem,3.3vw,1rem) 'DM Mono',monospace;letter-spacing:.63em;text-indent:.63em;text-shadow:none}
.title-copy h1 strong{font:900 clamp(2rem,10.5vw,3.25rem) 'Space Grotesk',sans-serif;letter-spacing:.01em}
.title-blurb{margin:.45rem 0 .8rem;color:#b4b2aa;font:600 .64rem 'DM Mono',monospace;letter-spacing:.06em;line-height:1.4}
.title-actions{display:grid;grid-template-columns:1fr 1fr;gap:.38rem}
.title-actions .btn-large{grid-column:span 1;min-height:44px}
.title-actions .btn-quiet{min-height:38px;padding:.48rem .25rem;font-size:.56rem;background:rgba(8,8,7,.82);backdrop-filter:blur(5px)}
.title-actions .btn{box-shadow:4px 4px 0 rgba(0,0,0,.56)}

/* Location artwork remains true to the supplied image: no colour-film overlays. */
.battle-backdrop{filter:none!important;transform:none!important;animation:none!important;transition:background-image .5s ease;background-color:#111}
.battle-backdrop:before,.battle-backdrop:after{display:none!important;content:none!important}
.battle-scene{border-radius:2px;background:#111}

@media (min-width:761px), (orientation:landscape){
  body{background:#0a0a09}
  .title-screen{box-shadow:0 0 80px rgba(0,0,0,.85)}
}
@media(max-width:760px){
  .title-screen{width:100%;max-width:500px;min-height:100dvh;padding:0}
  .title-copy{bottom:max(.7rem,env(safe-area-inset-bottom))}
  .title-copy h1{margin-bottom:.4rem}
  .title-blurb{margin:.35rem 0 .6rem}
  .title-actions{gap:.3rem}
  .title-actions .btn-large{min-height:42px;font-size:.7rem}
  .title-actions .btn-quiet{min-height:34px;font-size:.5rem}
}

/* Tactical battle controls */
.tactical-actions{display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:.35rem;min-width:min(360px,100%)}
.target-btn{border-color:rgba(240,189,63,.45);color:var(--yellow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guest-btn{border-color:rgba(196,55,50,.42);color:#e4a8a3}.guest-btn.ready{background:linear-gradient(135deg,#c43732,#755019);border-color:var(--yellow);color:white;animation:abilityPulse .8s infinite alternate}
.guest-btn:disabled{opacity:.5;animation:none}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.defend-btn{min-width:0;padding:.4rem .2rem;border:1px solid rgba(143,174,151,.38);background:rgba(89,122,96,.14);color:#b8d7bd;font:700 .56rem 'DM Mono',monospace;white-space:nowrap}
.combat-status{min-height:1.1rem;margin-top:.35rem;color:#6f706a;font:700 .46rem 'DM Mono',monospace;line-height:1.1;text-align:center;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combat-status.active{color:var(--yellow)}
.card-actions .upgrade-btn{font:700 .52rem 'DM Mono',monospace;white-space:nowrap}

/* Pixel-art story scenes at the start and between areas. */
.story-scene{position:fixed;inset:0;z-index:800;display:grid;place-items:center;overflow:hidden;background:#050605;color:#f1efe8;opacity:1;transition:opacity .25s ease;font-family:'Space Grotesk',sans-serif}
.story-scene.leaving{opacity:0;pointer-events:none}
.story-bg{position:absolute;inset:-5%;background:center/cover no-repeat;image-rendering:auto;animation:storyDrift 14s ease-in-out infinite alternate}
.story-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.22) 45%,rgba(0,0,0,.94) 88%)}
.story-scan{position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.05) 4px)}
@keyframes storyDrift{to{transform:scale(1.08) translate3d(-1.5%,1%,0)}}
.story-heading{position:absolute;z-index:3;left:max(1rem,env(safe-area-inset-left));right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));display:grid;gap:.28rem;padding:.6rem .7rem;border-left:4px solid var(--yellow);background:rgba(7,8,7,.78);box-shadow:7px 7px 0 rgba(0,0,0,.38)}
.story-heading span{color:var(--yellow);font:700 .52rem 'DM Mono',monospace;letter-spacing:.16em}.story-heading strong{font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.story-figure{position:absolute;z-index:2;left:50%;bottom:16%;width:min(100%,520px);height:min(74vh,650px);transform:translateX(-50%);filter:drop-shadow(0 15px 14px rgba(0,0,0,.72));image-rendering:pixelated;transition:transform .2s ease}
.story-figure.speaker-right{transform:translateX(-48%)}
.story-dialogue{position:absolute;z-index:5;left:50%;bottom:max(.8rem,env(safe-area-inset-bottom));width:min(calc(100% - 1.4rem),520px);transform:translateX(-50%);padding:.85rem .9rem .8rem;background:rgba(10,11,9,.96);border:1px solid rgba(240,189,63,.58);border-left:5px solid var(--yellow);clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);box-shadow:9px 9px 0 rgba(0,0,0,.52)}
.story-count{color:#8f8e86;font:700 .48rem 'DM Mono',monospace;letter-spacing:.14em}.story-dialogue h2{margin:.25rem 0 .35rem;color:var(--yellow);font-size:1rem;text-transform:uppercase}.story-dialogue p{min-height:3.2em;margin:0 0 .7rem;font-size:.86rem;line-height:1.45}.story-next{width:100%;min-height:44px}
.story-skip{position:absolute;z-index:6;right:max(.9rem,env(safe-area-inset-right));top:calc(max(1rem,env(safe-area-inset-top)) + 4.7rem);padding:.45rem .55rem;border:1px solid rgba(255,255,255,.25);background:rgba(5,6,5,.72);color:#aaa99f;font:700 .5rem 'DM Mono',monospace}

@media(max-width:760px){
  .battle-footer{display:block}.battle-footer>span{display:block;min-height:1.1rem;margin-bottom:.42rem}
  .tactical-actions{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}
  .tactical-actions .btn{min-height:36px;padding:.25rem .12rem;font-size:.45rem}
  .hero-card .portrait{width:30px;height:30px}.hero-card .mini-stat{margin-top:.24rem}.hero-card .bar{margin-top:.12rem}
  .combat-status{min-height:.75rem;margin-top:.2rem;font-size:.38rem}
  .card-actions{gap:.18rem;margin-top:.22rem}
  .attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{min-height:29px!important;padding:.18rem .05rem;font-size:.39rem!important}
  .card-actions .upgrade-btn{grid-column:auto!important;margin-top:0!important}
  .story-heading{top:max(.55rem,env(safe-area-inset-top))}.story-heading strong{font-size:.85rem}.story-skip{top:4.45rem}
  .story-dialogue{bottom:max(.45rem,env(safe-area-inset-bottom));padding:.7rem}.story-dialogue p{font-size:.78rem;min-height:4.2em}.story-dialogue h2{font-size:.85rem}
}

/* Phone layout overrides live at the end so older responsive rules cannot re-expand it. */
@media (max-width:760px){
  html,body,.app-shell{width:100%;height:100%;max-height:100%;overflow:hidden}
  .game-screen{width:100%;max-width:none;height:100dvh;min-height:0;padding:.24rem .32rem calc(3rem + env(safe-area-inset-bottom));gap:.24rem;overflow:hidden}
  .topbar{position:static;flex:0 0 34px;min-height:34px;height:34px;padding:0;gap:.2rem;flex-wrap:nowrap;background:transparent;border:0}
  .brand-lockup{gap:0}.brand-lockup>span:nth-child(2),.brand-lockup small,.save-indicator{display:none}
  .brand-mark{width:27px;height:27px;font-size:.72rem}.top-stats{order:initial;width:auto;min-width:0;margin-left:auto;gap:.16rem}
  .stat-pill{min-width:0;height:28px;padding:.08rem .25rem;gap:.16rem;border-radius:1px}.stat-pill>span:not(.stat-icon){font-size:.62rem}.stat-pill small{font-size:.32rem}.stat-icon{font-size:.52rem}
  .top-actions{margin:0}.icon-btn{width:28px;min-width:28px;min-height:28px!important;height:28px;padding:0;font-size:.72rem}
  .battle-layout,.lower-layout{display:contents}.battle-card{order:1;min-height:0;padding:.3rem .34rem;overflow:hidden}
  .battle-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem;margin:0}.battle-head .kicker{margin:0;font-size:.38rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-head h2{margin:.08rem 0 0;font-size:.7rem;line-height:1}.battle-head h2 span{font-size:.36rem;letter-spacing:.03em}
  .battle-controls{width:auto;margin:0;gap:.13rem;display:flex;flex-wrap:nowrap}.control-btn{min-width:0;min-height:27px!important;height:27px;padding:.15rem .25rem;font-size:.42rem;white-space:nowrap}
  .music-panel{width:100%;height:29px;margin:.16rem 0 0;padding:.1rem .16rem;gap:.14rem}.music-btn{min-width:26px;min-height:25px!important;height:25px;padding:.05rem .18rem;font-size:.5rem}.music-main{font-size:.58rem}
  .music-now{gap:0}.music-now .kicker,.music-now small{display:none}.music-now b{font-size:.5rem}.progress-row{margin:.13rem 0;font-size:.35rem;gap:.2rem;line-height:1}.progress-track{height:3px}
  .boss-banner{margin:.12rem 0;padding:.16rem;font-size:.45rem}.battle-scene{width:100%;min-height:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
  .battle-card canvas{display:block;width:100%;height:min(28dvh,230px);min-height:172px;aspect-ratio:auto;object-fit:fill}.battle-footer{display:block;margin-top:.16rem;padding-top:.14rem;border:0}.battle-footer>span{display:none!important}
  .tactical-actions{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:.14rem}.tactical-actions .btn{min-height:27px!important;height:27px;padding:.1rem .08rem;font-size:.36rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-dock{order:2;min-height:0;padding:.26rem .3rem;overflow:hidden}.dock-head{margin-bottom:.2rem}.dock-head .kicker{display:none}.dock-head h3{font-size:.62rem}.dock-head .btn{min-height:25px!important;height:25px;padding:.08rem .24rem;font-size:.38rem}
  .hero-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem}.hero-card{min-width:0;padding:.2rem .16rem;overflow:hidden}.hero-card-top{display:flex;align-items:center;gap:.12rem;text-align:left}
  .hero-card .portrait,.portrait{flex:0 0 27px;width:27px;height:27px;margin:0}.hero-name{font-size:.46rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-role{font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-stat{margin-top:.14rem;font-size:.32rem}.hero-card .bar{height:3px;margin-top:.06rem}.combat-status{min-height:.46rem;margin:.08rem 0 0;font-size:.28rem}.xp-readout{display:none}
  .card-actions{grid-template-columns:1fr 1fr;gap:.1rem;margin-top:.1rem}.attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{min-width:0;min-height:23px!important;height:23px;padding:.05rem .02rem;font-size:.3rem!important;overflow:hidden;text-overflow:ellipsis}.card-actions .upgrade-btn{grid-column:auto!important;margin:0!important}
  .side-panel{display:none!important}.store-shortcut{display:none!important}.nav-dock{position:fixed;z-index:50;left:.32rem;right:.32rem;bottom:max(.2rem,env(safe-area-inset-bottom));height:42px;min-height:42px;padding:.12rem;gap:.1rem;display:grid;grid-template-columns:repeat(7,1fr)}
  .nav-btn{min-width:0;min-height:37px!important;height:37px;padding:.05rem;font-size:0}.nav-btn span{display:block;font-size:.74rem;margin:0}.toast-root{left:.35rem;right:.35rem;bottom:3rem;align-items:stretch}.toast{padding:.45rem .55rem;font-size:.58rem;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
  .track-toast{top:.35rem;right:.35rem;width:min(220px,calc(100vw - .7rem));padding:.38rem .48rem;gap:.03rem}.track-toast .kicker{font-size:.36rem}.track-toast b{font-size:.58rem}.track-toast small{font-size:.44rem}
  .reward-banner{top:.4rem;width:calc(100vw - .8rem);padding:.45rem .55rem}.reward-banner h2{font-size:.72rem}.reward-banner p{font-size:.5rem;margin:.12rem 0}
}
@media (max-height:600px) and (pointer:coarse){
  .game-screen{padding-bottom:2.8rem}.battle-card canvas{height:31dvh;min-height:105px;max-height:140px}.dock-head,.hero-card-top,.hero-card .mini-stat,.hero-card .bar,.combat-status,.xp-readout{display:none!important}
  .hero-dock{padding:.18rem .25rem}.hero-card{padding:.12rem}.card-actions{margin:0}.attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{height:21px;min-height:21px!important}.nav-dock{height:38px;min-height:38px}.nav-btn{height:33px;min-height:33px!important}
}

.tactical-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .topbar{flex-basis:29px;min-height:29px;height:29px}.brand-mark{width:23px;height:23px}.top-stats{display:flex;flex:1;justify-content:flex-end}.stat-pill{flex:0 1 72px;height:24px}.stat-pill small{display:none}.icon-btn{width:24px;min-width:24px;height:24px;min-height:24px!important}
  .battle-head{display:flex;flex-direction:column;gap:.14rem}.battle-head>div:first-child{display:none}.battle-head .music-panel{order:1;margin:0;height:27px}.battle-head .battle-controls{order:2;width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .control-btn{width:100%;height:24px;min-height:24px!important;font-size:.38rem}.music-btn{height:23px;min-height:23px!important}.progress-row{margin:.1rem 0}.tactical-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Fixed game frames: landscape is 16:9, portrait is 9:16, and the battle view is always 16:9. */
html,body{width:100%;height:100%;min-height:0;overflow:hidden;background:#050605}
body{position:relative}
.app-shell{position:fixed;left:50%;top:50%;min-height:0!important;transform-origin:center center;overflow:hidden;background:#0b0c0a}
.title-screen,.game-screen{width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;margin:0!important;box-sizing:border-box;overflow:hidden}
.title-screen{position:absolute;inset:0}
.app-shell>.hidden{display:none!important}
.battle-backdrop,.story-scene{display:none!important}
.battle-scene.story-active{cursor:pointer}
.battle-card canvas{display:block;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;object-fit:contain!important;border-radius:1px}
.store-shortcut{display:none!important}

@media (min-width:761px), (orientation:landscape){
  .game-screen{display:grid!important;grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:50px 184px minmax(0,1fr) 92px;gap:10px;padding:10px!important}
  .topbar{position:static!important;grid-column:1/-1;grid-row:1;min-height:50px;height:50px;padding:0 8px;overflow:hidden}
  .battle-layout,.lower-layout{display:contents!important;margin:0!important}
  .battle-card{grid-column:1;grid-row:2/5;min-width:0;min-height:0;padding:10px;overflow:hidden}
  .battle-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 10px}
  .battle-head>div:first-child{display:block!important}.battle-head h2{display:block}
  .battle-controls{grid-column:2;grid-row:1;margin:0}
  .battle-head .music-panel{grid-column:1/-1;grid-row:2;width:100%;height:36px;margin:0;padding:3px 5px}
  .progress-row{margin:6px 0 4px}
  .battle-footer{padding:6px 1px 0;gap:8px}.battle-footer>span{display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tactical-actions{grid-template-columns:repeat(3,minmax(0,1fr));min-width:390px}
  .side-panel{display:grid!important;grid-column:2;grid-row:2;grid-template-columns:.8fr 1.2fr;gap:5px 10px;min-width:0;min-height:0;padding:8px;overflow:hidden}
  .side-panel .panel-head{grid-column:1/-1;padding-bottom:5px}.readout-main{padding:4px 0;border:0}.readout-value{font-size:1.55rem}.readout-list{padding:0;border:0}.readout-list div{margin:4px 0;font-size:.68rem}
  .side-quote,.side-tip,.mission-card{display:none!important}
  .hero-dock{display:block!important;grid-column:2;grid-row:3;min-width:0;min-height:0;padding:8px;overflow:hidden}
  .dock-head{display:flex!important;margin-bottom:6px}.hero-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.hero-card{padding:6px}.hero-card-top{display:flex!important}.hero-card .mini-stat{display:flex!important}.hero-card .bar{display:block!important}.combat-status,.xp-readout{display:block!important}
  .nav-dock{position:static!important;grid-column:2;grid-row:4;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));width:auto!important;height:auto!important;min-height:0!important;padding:5px;gap:2px;transform:none!important;overflow:visible}
  .nav-btn{min-width:0!important;min-height:0!important;height:auto!important;padding:3px 1px;font-size:.5rem;gap:2px}.nav-btn span{display:block;font-size:.9rem}
}

@media (max-width:760px) and (orientation:portrait){
  .game-screen{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:40px 385px 190px 154px 54px;gap:4px;padding:5px!important}
  .topbar{position:static!important;grid-row:1;display:flex;min-height:40px!important;height:40px!important;padding:0 2px!important;gap:4px;flex-wrap:nowrap;background:transparent;border:0;overflow:hidden}
  .brand-lockup{display:flex;min-width:0;font-size:.58rem}.brand-lockup>span:nth-child(2){display:inline!important;overflow:hidden;text-overflow:ellipsis}.brand-lockup small,.save-indicator{display:none!important}.brand-mark{flex:0 0 23px;width:23px;height:23px}
  .top-stats{display:flex!important;flex:1;order:initial;width:auto;min-width:0;margin-left:auto;gap:2px}.stat-pill{display:grid;flex:1 1 0;min-width:0;height:28px;padding:2px 4px;column-gap:2px}.stat-pill>span:not(.stat-icon){font-size:.58rem}.stat-pill small{display:block;font-size:.3rem;letter-spacing:0}.stat-icon{font-size:.48rem}.top-actions{margin:0}.icon-btn{width:27px;min-width:27px;height:27px;min-height:27px!important;padding:0}
  .battle-layout,.lower-layout{display:contents!important;margin:0!important}
  .battle-card{display:block;grid-row:2;min-width:0;min-height:0;padding:5px!important;overflow:hidden}
  .battle-head{display:flex!important;flex-direction:column;gap:2px;margin:0}.battle-head>div:first-child{display:none!important}.battle-head .music-panel{order:1;width:100%;height:28px;margin:0;padding:2px 3px}.battle-head .battle-controls{order:2;display:grid;width:100%;grid-template-columns:repeat(3,1fr);gap:2px;margin:0}.control-btn{width:100%;height:25px;min-height:25px!important;padding:2px;font-size:.42rem}
  .music-btn{height:24px;min-height:24px!important;padding:1px 4px}.music-now .kicker,.music-now small{display:none}.music-now b{font-size:.52rem}.progress-row{height:8px;margin:2px 0;font-size:.34rem}.progress-row>span{display:none}.progress-track{height:4px}.boss-banner{top:62px;margin:0;padding:3px 8px;font-size:.43rem}
  .battle-scene{width:100%;min-height:0}.battle-card canvas{width:100%!important;height:auto!important;aspect-ratio:16/9!important}
  .battle-footer{display:block;margin:3px 0 0;padding:0;border:0;font-size:.42rem}.battle-footer>span{display:block!important;height:12px;min-height:0;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tactical-actions{display:grid;width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.tactical-actions .btn{height:26px;min-height:26px!important;padding:1px 2px;font-size:.38rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-dock{display:block!important;grid-row:3;min-width:0;min-height:0;padding:5px!important;overflow:hidden}.dock-head{display:flex!important;height:27px;margin:0 0 3px}.dock-head .kicker{display:block;font-size:.34rem}.dock-head h3{font-size:.58rem;margin:1px 0}.dock-head .btn{height:25px;min-height:25px!important;padding:2px 5px;font-size:.38rem}.hero-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.hero-card{min-width:0;padding:3px;overflow:hidden}.hero-card-top{display:flex!important;gap:2px}.hero-card .portrait,.portrait{display:block;flex:0 0 27px;width:27px;height:27px;margin:0}.hero-name{font-size:.44rem}.hero-role{font-size:.3rem}.hero-card .mini-stat{display:flex!important;margin-top:2px;font-size:.3rem}.hero-card .bar{display:block!important;height:3px;margin-top:1px}.combat-status{display:block!important;min-height:7px;margin:1px 0 0;font-size:.27rem}.xp-readout{display:block!important;height:8px;margin:1px 0 0;font-size:.27rem;overflow:hidden;white-space:nowrap}.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:2px}.attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{height:22px;min-height:22px!important;padding:1px!important;font-size:.29rem!important;overflow:hidden;text-overflow:ellipsis}.card-actions .upgrade-btn{grid-column:auto!important;margin:0!important}
  .side-panel{display:grid!important;grid-row:4;grid-template-columns:1fr 1fr;gap:2px 7px;min-width:0;min-height:0;padding:5px!important;overflow:hidden}.side-panel .panel-head{grid-column:1/-1;height:15px;padding:0;font-size:.34rem}.readout-main{padding:1px 0;border:0;gap:4px}.readout-value{font-size:1rem}.readout-label{font-size:.34rem}.readout-sub{font-size:.35rem;margin:0}.readout-list{padding:0;border:0}.readout-list div{margin:2px 0;font-size:.38rem}.side-quote,.mission-card{display:none!important}.side-tip{display:flex!important;grid-column:1/-1;min-height:0;padding:4px;font-size:.38rem;overflow:hidden}.side-tip b{font-size:.34rem}.side-tip p{margin:1px 0 0;font-size:.36rem;line-height:1.2}
  .nav-dock{position:static!important;grid-row:5;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));width:auto!important;height:auto!important;min-height:0!important;padding:3px!important;gap:1px;transform:none!important;overflow:visible!important}.nav-btn{display:flex;min-width:0!important;min-height:0!important;height:auto!important;padding:2px 0;font-size:.38rem;gap:1px;overflow:hidden}.nav-btn span{display:block;font-size:.7rem;margin:0}
  .toast-root{left:calc(50% - 230px);right:auto;width:460px;bottom:62px}.toast{font-size:.52rem;padding:5px 7px}
}

/* Widescreen title composition uses the supplied 16:9 artwork without cropping. */
@media (min-width:761px), (orientation:landscape){
  .title-art{background-image:url('assets/oppression-title-desktop.png');background-position:center;background-size:cover}
  .title-shade{background:linear-gradient(to bottom,rgba(0,0,0,.74) 0,rgba(0,0,0,.48) 29%,rgba(0,0,0,.06) 48%,rgba(0,0,0,.2) 100%)}
  .title-copy{left:50%;right:auto;top:22px;bottom:auto;width:min(940px,72%);transform:translateX(-50%);padding:16px 24px 18px;background:linear-gradient(90deg,transparent,rgba(3,4,3,.7) 12%,rgba(3,4,3,.7) 88%,transparent);text-align:center}
  .title-label{margin:0 0 5px;font-size:.72rem}.title-label span{display:inline;margin-left:10px;font-size:.52rem}
  .title-copy h1{display:flex;align-items:baseline;justify-content:center;gap:15px;margin:0 0 6px;line-height:1}
  .title-copy h1 span{font-size:.78rem;letter-spacing:.42em;text-indent:0}.title-copy h1 strong{font-size:3rem;letter-spacing:.025em}
  .title-blurb{margin:0 0 10px;font-size:.62rem}
  .title-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 7px}.title-actions .btn-large{grid-column:span 2;min-height:39px;padding:6px 12px}.title-actions .btn-quiet{min-height:31px;padding:4px 8px;font-size:.53rem}
}

/* Real phones use their full dynamic viewport; no forced 9:16 wrapper or letterboxing. */
@media (max-width:760px) and (orientation:portrait){
  .app-shell[data-frame="phone"]{position:fixed;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;transform:none!important}
  .game-screen{display:flex!important;flex-direction:column;gap:3px;width:100%!important;height:100dvh!important;padding:3px 3px max(3px,env(safe-area-inset-bottom))!important;overflow:hidden}
  .battle-layout,.lower-layout{display:contents!important}
  .topbar{position:static!important;flex:0 0 30px;min-height:30px!important;height:30px!important;padding:0 2px!important}
  .battle-card{display:block;flex:0 0 auto;min-height:0;padding:3px!important;overflow:hidden}
  .battle-head{gap:1px}.battle-head .music-panel{height:24px;padding:1px 2px}.music-btn{height:20px;min-height:20px!important}.battle-head .battle-controls{gap:1px}.control-btn{height:21px;min-height:21px!important;padding:1px;font-size:.36rem}.progress-row{height:5px;margin:1px 0}.progress-track{height:3px}
  .battle-card canvas{display:block;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;object-fit:contain!important}
  .battle-footer{margin:2px 0 0;padding:0}.battle-footer>span{display:block!important;height:9px;margin:0 0 1px;font-size:.34rem}.tactical-actions{gap:1px}.tactical-actions .btn{height:23px;min-height:23px!important;padding:1px;font-size:.34rem}
  .hero-dock{display:block!important;flex:0 0 120px;min-height:0;padding:3px!important;overflow:hidden}.dock-head{display:flex!important;height:20px;margin:0 0 2px}.dock-head .kicker{font-size:.28rem}.dock-head h3{font-size:.48rem}.dock-head .btn{height:19px;min-height:19px!important;padding:1px 3px;font-size:.31rem}.hero-cards{gap:2px}.hero-card{padding:2px}.hero-card-top{display:flex!important;gap:1px}.hero-card .portrait,.portrait{flex-basis:22px;width:22px;height:22px}.hero-name{font-size:.37rem}.hero-role{font-size:.25rem}.hero-card .mini-stat{display:flex!important;margin-top:1px;font-size:.25rem}.hero-card .bar{display:block!important;height:2px;margin-top:0}.combat-status{display:block!important;min-height:5px;margin:0;font-size:.22rem}.xp-readout{display:block!important;height:6px;margin:0;font-size:.22rem}.card-actions{gap:1px;margin-top:1px}.attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{height:18px;min-height:18px!important;padding:0!important;font-size:.24rem!important}
  .side-panel{display:grid!important;flex:1 1 auto;grid-template-columns:1fr 1fr;align-content:start;min-height:48px;padding:3px!important;gap:1px 5px;overflow:hidden}.side-panel .panel-head{height:11px;font-size:.28rem}.readout-main{min-height:0;padding:0}.readout-value{font-size:.78rem}.readout-label{font-size:.27rem}.readout-sub{font-size:.28rem}.readout-list div{margin:1px 0;font-size:.3rem}.side-quote,.side-tip,.mission-card{display:none!important}
  .nav-dock{position:static!important;flex:0 0 42px;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));width:100%!important;height:42px!important;min-height:42px!important;padding:2px!important;gap:1px;transform:none!important;overflow:visible!important}.nav-btn{min-width:0!important;min-height:0!important;height:36px!important;padding:1px 0;font-size:.32rem;gap:0}.nav-btn span{display:block;font-size:.62rem}
  .title-art{background-image:url('assets/oppression-title-pixel.png');background-position:center top;background-size:cover}
  .title-shade{background:linear-gradient(to bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,.5) 34%,rgba(0,0,0,.04) 55%,rgba(0,0,0,.34) 100%)}
  .title-copy{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));bottom:auto;padding:8px 10px 10px;background:linear-gradient(to bottom,rgba(3,4,3,.76),rgba(3,4,3,.48),transparent);text-align:center}
  .title-label{margin:0 0 4px;font-size:.62rem}.title-label span{display:inline;margin-left:7px;font-size:.48rem;letter-spacing:.42em;text-indent:0}
  .title-copy h1{margin:0 0 4px}.title-copy h1 strong{font-size:2.05rem}.title-copy h1 span{font-size:.58rem;letter-spacing:.48em;text-indent:.48em}.title-blurb{margin:3px 0 6px;font-size:.5rem}
  .title-actions{gap:3px}.title-actions .btn-large{height:34px;min-height:34px;padding:3px;font-size:.62rem}.title-actions .btn-quiet{height:28px;min-height:28px;padding:2px;font-size:.43rem}
}

/* Final portrait order: battle, 2x2 crew, readout, then navigation at the bottom. */
@media (max-width:760px) and (orientation:portrait){
  .topbar{order:0}
  .battle-card{order:1}
  .hero-dock{order:2;display:flex!important;flex:1 1 auto;flex-direction:column;min-height:180px;padding:4px!important}
  .side-panel{order:3;flex:0 0 58px;min-height:58px!important;height:58px!important}
  .nav-dock{order:4;flex:0 0 46px;height:46px!important;min-height:46px!important;margin-top:0!important}
  .hero-dock .dock-head{flex:0 0 22px;height:22px;margin:0 0 3px}
  .hero-cards{flex:1 1 auto;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr));height:auto;min-height:0;gap:3px}
  .hero-card{display:block;min-height:0;padding:3px}.hero-card-top{gap:3px}.hero-card .portrait,.portrait{flex:0 0 26px;width:26px;height:26px}.hero-name{font-size:.44rem}.hero-role{font-size:.29rem}
  .hero-card .mini-stat{font-size:.28rem}.hero-card .bar{height:3px}.combat-status{min-height:6px;font-size:.25rem}.xp-readout{height:7px;font-size:.25rem}
  .card-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.attack-btn,.ability-btn,.defend-btn,.card-actions .upgrade-btn{height:21px;min-height:21px!important;font-size:.28rem!important}
  .nav-btn{height:40px!important;font-size:.34rem}.nav-btn span{font-size:.68rem}
}