/* MCH field screens. Every view fits the viewport; long collections are paginated. */
:root{--bg:#151020;--panel:#231b32;--ink:#f4ead5;--muted:#b0a0bd;--gold:#ebc57b;font-family:DotGothic,monospace;font-size:12px}
html,body{width:100%;height:100%;min-width:280px;overflow:hidden;overscroll-behavior:none}
body{background:#110d1a;background-image:repeating-linear-gradient(0deg,#191324 0 2px,transparent 2px 8px)}
[hidden]{display:none!important}
#app{height:calc(var(--game-height) * 1.0);width:min(100%,600px);margin:auto;display:grid;grid-template-rows:52px minmax(0,1fr) auto;overflow:hidden;background:#1a1325;box-shadow:0 0 0 1px #655070,0 0 90px #0007}
button{font:inherit;min-height:44px;border:1px solid #88709b;border-radius:0;padding:7px 10px;background:#382841;box-shadow:inset 2px 2px #5b4267,inset -2px -2px #20152e,0 2px #0c0813;touch-action:manipulation}
button:hover:not(:disabled){background:#4b3355;border-color:#dbbcdf}button:active:not(:disabled){translate:0 1px;box-shadow:inset 2px 2px #20152e,inset -2px -2px #5b4267}button:disabled{opacity:.42}button:focus-visible{outline:2px solid #ffe2a2;outline-offset:2px}
.small{font-size:11px;padding:5px 8px}.primary{font-size:14px;min-height:46px;background:#a66e32;border:1px solid #f3cb84;box-shadow:inset 3px 3px #d39948,inset -3px -3px #6f4529,0 3px #0c0813;text-shadow:1px 1px #644020}.primary:hover:not(:disabled){background:#be853e}.secondary{font-size:12px}
.topbar{height:52px;max-width:none;padding:4px 10px;margin:0;gap:5px;border-bottom:1px solid #695171;background:#21172d}.brand>div,.topbar>b{font-size:10px;line-height:1.6;max-width:200px}.brand-tower,.brand small,.top-actions .best{display:none}.top-actions{gap:4px}.top-actions>.small{min-height:40px;min-width:36px;padding:4px;font-size:10px}.top-actions .help-button{display:block;min-width:28px}.brand{gap:0}
.game-shell{display:grid;align-items:stretch;grid-template-columns:minmax(0,1fr);grid-template-rows:32px minmax(0,1fr);gap:0;max-width:none;margin:0;padding:0;min-height:0;overflow:hidden}
.expedition-strip{display:flex;align-items:center;gap:10px;padding:0 12px;background:#181120;border-bottom:1px solid #49344f;color:#cbb188;font-size:8px;letter-spacing:1px}.expedition-strip>b{font-size:16px}.strip-lives{margin-left:auto;color:#e58d9f;font-size:15px;letter-spacing:2px}.strip-lives i{font-style:normal;color:#68536e}.expedition-strip small{font-size:8px;color:#9d8baa}
.workspace{height:100%;min-height:0;overflow:hidden;position:relative}.workspace>[role=tabpanel]{height:100%;min-height:0;overflow:hidden;outline-offset:-3px}.pixel-panel{border:1px solid #967ca1;background:#251c33;box-shadow:inset 0 0 0 3px #3c2a49,0 0 0 1px #100b19;border-radius:0;overflow:hidden}.pixel-panel:before,.pixel-panel:after{width:3px;height:3px;top:3px;left:3px;background:#e6c98c;box-shadow:3px 0 #7c593b,0 3px #7c593b}.pixel-panel:after{left:auto;right:3px;box-shadow:-3px 0 #7c593b,0 3px #7c593b}.section-heading{gap:7px;min-width:0}.section-heading h2{font-size:16px;letter-spacing:1px;white-space:nowrap}.section-heading .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:3px}.capacity{color:#e8c888;font-size:11px;border:1px solid #756078;padding:4px 7px;white-space:nowrap;background:#181222}
.mobile-nav{position:static;display:block;padding:5px 7px max(5px,env(safe-area-inset-bottom));border-top:2px solid #7f638b;background:#21162d;z-index:10;width:100%}.workspace-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}.workspace-tabs button{position:relative;min-height:54px;margin:0;padding:4px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:#bba7c7;border-color:#5e456a;background:#2a1e36;box-shadow:inset 1px 1px #43304f,inset -1px -1px #181021}.workspace-tabs button>span{font-size:20px;line-height:20px;color:#bda1cd}.workspace-tabs button[aria-selected=true]{color:#ffefd0;background:#533a59;border-color:#e3bd80;box-shadow:inset 2px 2px #795480,inset -2px -2px #35223f}.workspace-tabs button[aria-selected=true]>span{color:#ffe0a1}.tab-badge{position:absolute;right:2px;top:1px;font-style:normal;min-width:15px;padding:1px 2px;background:#e4b866;color:#352337;font-size:10px}.battle-dot{position:absolute;top:5px;right:7px;width:5px;height:5px;background:#e99688;box-shadow:0 0 0 1px #5a3049}footer{display:none}
/* Battle is a dedicated full-height scene, not a persistent header. */
#panel-battle{padding:9px}.arena{height:100%;display:grid;grid-template-rows:38px minmax(0,1fr) auto auto auto;position:relative;top:auto}.arena-heading{padding:6px 10px;gap:9px;background:#34223f;border-bottom:1px solid #7c5d82;font-size:12px}.floor-tag{background:#8e6137;border:1px solid #d7b277;padding:2px 6px;font-size:12px}.phase-tag{font-size:10px;color:#d2bce0}.battle-stage{height:auto;min-height:0}.fighter{width:148px;bottom:37px}.sprite-body{width:148px;height:148px}.fighter.player{left:4%}.fighter.enemy{right:4%}.fighter>span{font-size:10px}.stage-center{bottom:10px;top:auto}.stage-center b{font-size:13px}.health-row{background:#21182e;padding:12px 12px 0;gap:20px}.health>div:first-child{display:flex;flex-wrap:wrap;gap:3px;font-size:10px}.health b{font-size:10px}.health>div>span{font-size:11px;white-space:nowrap}.health-track{height:9px;border:1px solid #100c18;box-shadow:0 0 0 1px #71577d;margin-top:6px}.health-track>i{background:#bf7190;box-shadow:inset 0 2px #e6a9bc}.enemy .health-track>i{background:#c9775d;box-shadow:inset 0 2px #f0b395}.health>small{font-size:10px;margin-top:5px}.battle-params{font-size:9px;gap:6px}.conditions{min-height:16px}.conditions:empty{min-height:2px;margin:0}.conditions>span{font-size:8px}.combat-bottom{background:#21182e;padding:10px 12px;gap:8px;flex-wrap:wrap}.skill-indicator{min-width:125px}.skill-indicator b{font-size:11px}.skill-indicator small{font-size:9px}.skill-icon{font-size:24px}.combat-log{margin-left:auto;max-width:42%;font-size:10px}.combat-log img{width:27px;height:27px}.combat-log>span{font-size:9px;max-width:100px}.build-meter{font-size:9px;order:3;text-align:center;width:100%}.build-meter:empty{display:none}.battle-controls{background:#21182e;padding:0 12px 13px;gap:9px}.battle-controls>.primary{width:100%;min-height:49px}.battle-controls .secondary{min-height:44px}.battle-controls .track-name{display:none}
/* Inventory: the pack scales into the remaining space, controls stay fixed. */
#panel-pack{padding:9px}.pack-panel{height:100%;padding:12px;display:grid;grid-template-rows:36px minmax(0,1fr) auto auto;gap:10px}.pack-layout{display:flex;justify-content:center;min-height:0;height:100%;margin:0;padding:0;gap:0}.pack-layout>div{position:relative;container-type:size;width:100%;height:100%;max-width:430px;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.bag{flex:none;width:min(100cqw,calc((100cqh - 48px)*6/var(--rows)));height:auto;max-height:none;aspect-ratio:6/var(--rows);grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:4px;border:0;outline:none;box-shadow:none;background:transparent}.bag .cell{min-height:0;padding:0;background:#262333;border:1px solid #67576f;box-shadow:inset 2px 2px #171424,inset -1px -1px #43344c}.bag-item{min-height:0;padding:3px;border:1px solid #bd9356;background:#3b2f29;box-shadow:inset 2px 2px #6a5036,inset -2px -2px #211823}.bag-item img{max-width:100%;max-height:100%;filter:drop-shadow(2px 2px #130d1e)}.bag-item.selected{border-color:#ffe1a0;box-shadow:inset 0 0 0 2px #a07b45,0 0 0 1px #f1cd83}.item-level{font-size:8px;color:#f3cb75}.item-cd{font-size:7px}.pack-tools{flex:none;display:flex;gap:8px;width:100%;height:40px;margin:0}.pack-tools button{flex:1;min-height:40px;font-size:11px;margin:0}.pack-tools kbd{display:none}.detail{display:grid;grid-template-columns:42px minmax(0,1fr);gap:7px 10px;align-items:center;background:#1a1427;border:1px solid #8e6c49;padding:9px;margin:0;min-height:58px;box-shadow:inset 2px 2px #100b1c}.detail>img{width:42px;height:56px;filter:drop-shadow(2px 2px #0f0918)}.detail b{font-size:13px;line-height:1.5;color:#f0d199}.detail .eyebrow{font-size:8px;margin-bottom:3px}.detail p{font-size:10px;line-height:1.5;margin:3px 0 0}.detail small{font-size:10px;line-height:1.5;margin-top:3px}.detail-star{font-size:30px;color:#d2ad75}.detail-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;width:100%}.detail-actions button{min-height:40px;font-size:10px;padding:5px 3px}.detail-actions [data-action=forge]{grid-column:auto;background:#80502f;border-color:#d8b077}.stash{border-top:1px solid #644d6e;padding-top:7px;margin:0;min-height:0;position:relative}.stash>.eyebrow{font-size:9px;margin-bottom:5px}.stash-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:15px}.stash-item{display:grid;grid-template-columns:32px 1fr;gap:0 4px;align-items:center;min-height:48px;padding:3px 4px;min-width:0}.stash-item img{width:32px;height:32px;grid-row:1/3}.stash-item span{font-size:8px;white-space:normal;line-height:1.3}.stash-item small{font-size:8px;text-align:left}.stash-items>p{font-size:9px;margin:0}.stash>.list-pager{position:absolute;right:0;top:1px;gap:4px}.stash>.list-pager button{min-height:28px;min-width:28px;font-size:8px;padding:0}.stash>.list-pager span{font-size:8px}
/* Generated pixel workshop background with real, interactive controls on top. */
#panel-craft{padding:0;background:#211629 url('../assets/ui/alchemy-workshop-v1.png') center center/cover no-repeat;image-rendering:pixelated}.cauldron-panel{height:100%;padding:12px 14px;display:grid;grid-template-rows:44px minmax(50px,1fr) 46px var(--preview-height,68px) 46px 22px 144px;gap:8px;background:none;border:0;box-shadow:none;color:#f7e4c2;overflow:hidden}.cauldron-panel:before,.cauldron-panel:after{display:none}.cauldron-panel .section-heading{background:#1b132bdd;border:1px solid #806147;padding:5px 7px;gap:5px}.cauldron-panel h2{font-size:15px;font-family:DotGothic,monospace;letter-spacing:0}.cauldron-panel .eyebrow{color:#c2a47c;font-size:7px}.cauldron-panel .section-heading .small{font-size:10px;min-height:32px;padding:4px 6px;white-space:nowrap}.cauldron-panel .section-heading>div{margin-right:auto}.cauldron-stage{height:auto;min-height:0;margin:0;display:grid;place-items:center;background:none}.cauldron{width:auto;height:100%;max-width:180px;max-height:180px;object-fit:contain;filter:drop-shadow(3px 5px #13091e)}.rune-orbit{display:none}.pot-halo{opacity:.45;max-width:160px;max-height:160px}.pot-count{right:calc(50% - 84px);bottom:5px;background:#25162bd9;border-color:#ae8559;color:#f3d39b;font-size:9px}.pot-slots{gap:12px;align-items:stretch}.pot-slot{width:48px;height:46px;min-height:44px;margin:0;background:#211528dc;border:1px solid #ab8050;box-shadow:inset 2px 2px #503746,inset -2px -2px #110b1a}.pot-slot>img{width:36px;height:36px}.pot-slot>span{color:#b9a2c2}.pot-slot.filled{background:#4e3443}.recipe-preview{height:68px;min-height:0;padding:7px 10px;margin:0;gap:10px;background:#1d1329e8;border:1px solid #a58051;box-shadow:inset 2px 2px #453044;overflow:hidden}.recipe-preview>img{width:45px;height:52px;filter:drop-shadow(2px 2px #0d0718)}.recipe-preview b{font-family:DotGothic,monospace;font-size:13px;color:#ffe0a3;line-height:1.4}.recipe-preview small{font-size:10px;color:#c5b2cf}.recipe-preview .empty-symbol{font-size:30px;color:#bc9569;line-height:1}.recipe-preview .recipe-ingredients{margin:2px 0}.recipe-preview .recipe-ingredients img{width:18px;height:18px}.craft-buttons{display:flex;margin:0;gap:8px;min-height:0}.craft-buttons .primary{flex:1;min-height:44px;font-size:13px}.craft-buttons>.small{min-height:44px;padding:5px 10px;font-size:11px}.material-heading{display:flex;justify-content:space-between;align-items:end;border:0;padding:0;margin:0;color:#ead2a8;font-size:10px;text-shadow:1px 1px #1c1025}.material-heading>span{font-size:8px;color:#ccb5cc}.materials{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:5px;margin:0;min-height:0}.material,.material.flame,.material.mist,.material.star,.material.life{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:0;padding:3px;position:relative;min-height:0;height:100%;background:#261b2ee6;border:1px solid #8b6c73;box-shadow:inset 1px 1px #5b414b,inset -1px -1px #170e23;color:#f3dfc1}.material>img{height:32px;width:32px;justify-self:center;align-self:center}.material>span{font-size:8px;line-height:1.4;white-space:nowrap;letter-spacing:-.3px}.material>b{position:absolute;right:3px;top:2px;font-size:10px;color:#f0d29a;line-height:1.2}.material .rarity{display:none}.material:disabled{opacity:.48}.material:hover:not(:disabled){background:#48313c;border-color:#edc995}.cauldron-panel .rarity{color:#e8cf9d}.jobs-panel{display:none}
/* Status and hero pages. */
#panel-status,#panel-heroes{padding:9px;background:linear-gradient(#1b1428dd,#1b1428ec),url('../assets/ui/alchemy-workshop-v1.png') center/cover no-repeat}.status-card{height:100%;padding:16px;display:flex;flex-direction:column;gap:12px}.status-attributes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.status-attributes>span{padding:12px;background:#191222;border:1px solid #654971;color:#b8a5c8;font-size:12px}.status-attributes b{font-size:23px;color:#f0d39b;margin-left:7px}.status-card>p{font-size:9px;color:#b5a2c5;line-height:1.6}.tower-record{display:flex;align-items:center;gap:12px;border-block:1px solid #715572;padding:12px 0;color:#d8bf94;font-size:12px}.tower-record b{font-size:23px;margin-left:auto}.tower-record small{font-size:9px}.status-boons{min-height:0;flex:1;display:flex;flex-direction:column}.status-boons .boon-summary{display:flex;flex-direction:column;gap:7px;padding:0;flex:1;min-height:0;flex-basis:auto}.boon-summary>.eyebrow{font-size:10px;margin:0}.boon-summary>p{font-size:12px}.boon-chip{display:flex;width:100%;margin:0;min-height:48px;padding:6px 8px;font-size:11px;flex-shrink:1;gap:2px}.boon-chip>b{font-size:9px}.boon-tip{display:none!important}.status-boons .list-pager{margin-top:auto}.hero-panel{height:100%;padding:15px;background:linear-gradient(#251b2ee6,#181021e8);display:flex;flex-direction:column;gap:10px}.hero-profile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;flex:1;min-height:0;margin:0;padding:0}.hero-profile>img{width:auto;height:40%;max-height:230px;min-height:60px;filter:drop-shadow(4px 5px #120b1c);object-fit:contain}.hero-profile>div{width:100%;max-width:400px;text-align:center}.hero-profile h2{font-size:23px;color:#efce8c;margin:4px 0 12px}.hero-profile .hero-params{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;font-size:10px}.hero-profile .hero-params span{display:flex;flex-direction:column;gap:3px;padding:8px 2px;border:1px solid #674970;background:#171123;text-align:center}.hero-profile .hero-params b{font-size:18px}.hero-profile p{font-size:12px;color:#efd2a2;margin-top:13px}.hero-profile small{font-size:11px;line-height:1.7;margin-top:7px}.hero-panel>.reward-offer{flex:none;min-height:44px}
/* Bounded dialogs and page controls. No hidden overflow is used for long lists. */
.modal-scrim{position:fixed;inset:0;z-index:30;padding:12px;background:#090611dc;display:flex;align-items:center;justify-content:center;overflow:hidden}.modal{width:100%;max-width:520px;max-height:calc(calc(var(--game-height) * 1.0) - 24px);padding:18px;overflow:hidden;display:flex;flex-direction:column;gap:12px;background:#251b31}.modal>*{flex-shrink:0}.modal>.eyebrow{margin:0;font-size:9px}.modal h2{font-size:20px;margin:0;line-height:1.6}.modal p{font-size:12px;line-height:1.7;margin:0}.modal>.primary,.modal>.secondary{width:100%;margin:0;min-height:44px}.list-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:0;flex:none}.list-pager button{min-height:40px;min-width:46px;padding:5px;font-size:12px}.list-pager span{font-size:11px;color:#c2accd;min-width:50px;text-align:center}.recipe-list{display:grid;grid-template-columns:1fr;gap:7px;margin:0;overflow:visible;max-height:none}.recipe-entry{min-height:72px;position:relative}.recipe-row{height:100%;min-height:72px;padding:7px 49px 7px 8px;gap:7px;background:#33243b}.recipe-row>img{width:40px;height:45px}.recipe-row b{font-size:11px;line-height:1.6}.recipe-row>small{font-size:9px;margin-left:auto;white-space:nowrap}.recipe-ingredients>span{font-size:10px}.recipe-ingredients img{width:20px;height:20px}.recipe-info{position:absolute;right:3px;top:50%;translate:0 -50%;min-width:40px;min-height:44px;width:40px;height:44px;padding:0;font-size:14px}.recipe-tooltip,#gear-tooltip{display:none!important}.secret-hint{font-size:10px;line-height:1.6;margin:0;padding:8px;border:1px solid #685070}.recipe-detail-heading{margin:0}.recipe-detail-heading>img{width:58px;height:58px}.recipe-stat-line{font-size:11px;margin:0;line-height:1.7}.recipe-detail-heading b{font-size:15px}.hero-options{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;overflow:visible;max-height:none}.hero-option{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:10px;position:relative;min-height:138px}.hero-option>img{width:56px;height:74px}.hero-option>div{min-width:0}.hero-option b{font-size:12px;line-height:1.6}.hero-option p{font-size:10px;line-height:1.65;margin:4px 0}.hero-option>button,.hero-option>.locked-hero{grid-column:1/-1;justify-self:stretch;margin:0;min-height:34px;padding:4px;font-size:11px}.locked-hero{text-align:center}.summon-controls{display:grid;gap:8px;border:0;padding:0;margin:0}.summon-controls>b{font-size:14px}.summon-controls .primary,.summon-controls .small,.summon-controls .reward-offer{min-height:44px;margin:0;font-size:12px}.summon-controls>small{font-size:10px;line-height:1.8;color:#c1accc}.summon-controls>p{font-size:11px}.craft-jobs{display:grid;gap:12px;margin:0}.craft-job{padding:10px;min-height:90px;gap:9px;flex-wrap:wrap}.craft-job>img{width:48px;height:48px}.job-info>b{font-size:12px}.job-info small{font-size:10px}.craft-job .reward-offer{margin:0;width:100%;min-height:36px;font-size:10px}.claim{min-height:44px}.empty-jobs{padding:24px 10px}.empty-jobs p{font-size:12px}.guide{display:block;padding-left:19px;margin:0}.guide>li{font-size:13px;line-height:1.7}.guide>li>p{font-size:12px;line-height:1.85;margin-top:10px}.guide-modal .list-pager{margin-top:8px}.guide-modal>p{font-size:10px}.boon-options{display:flex;flex-direction:column;gap:9px;margin:0}.boon-option{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:3px 8px;padding:9px;text-align:left;min-height:90px;align-items:center}.boon-option>.blessing-icon{grid-column:1;grid-row:1/4;width:42px;height:42px}.boon-option>.boon-rarity{grid-column:2;font-size:9px}.boon-option>b{grid-column:2;font-size:12px}.boon-option>small{grid-column:2/-1;font-size:10px;line-height:1.5;width:auto}.boon-option>.boon-duration{grid-column:3;grid-row:1/3;font-size:9px}.reroll-actions{margin:0;display:flex;justify-content:center}.reroll-actions button{font-size:11px;min-height:40px}.growth-reward{display:flex;gap:10px;padding:10px;font-size:12px;margin:0}.growth-reward small{font-size:10px}.scroll-drop{padding:7px;gap:7px;margin:0}.scroll-drop img{width:36px;height:36px}.scroll-drop b{font-size:11px}.loot-row{display:flex;gap:8px;flex-wrap:wrap;margin:0}.loot-row>span{font-size:11px;display:flex;align-items:center;gap:3px}.loot-row img{width:27px;height:27px}.battle-duration{font-size:10px;color:#bea7cc}.summon-show{min-height:0;height:min(440px,calc(calc(var(--game-height) * 1.0) - 150px))}.summon-reveal{padding-top:15px;gap:7px}.summon-reveal>img{width:min(170px,calc(var(--game-height) * 0.28));height:min(170px,calc(var(--game-height) * 0.28))}.summon-reveal h2{font-size:22px}.summon-reveal p{font-size:11px}.summon-reveal strong{font-size:18px}.summon-orb{top:70px}.audio-controls{margin:3px 0;gap:10px}.audio-controls button{font-size:14px;min-height:48px}
/* Home uses the same bounded canvas. */
#app:has(.home-screen){grid-template-rows:52px minmax(0,1fr)}.home-screen{height:100%;min-height:0;padding:14px;display:grid;place-items:center;background:linear-gradient(#19102588,#160e22cc),url('../assets/ui/alchemy-workshop-v1.png') center/cover no-repeat;overflow:hidden}.home-card{width:100%;height:100%;max-height:650px;padding:20px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px;background:#24192bdb}.home-card h1{font-size:clamp(20px,calc(var(--game-width) * 0.05),30px);letter-spacing:0;line-height:1.5;margin:0 auto}.home-card>.eyebrow{margin:0;font-size:9px}.home-card>p{font-size:12px}.home-heroes{height:clamp(60px,calc(var(--game-height) * 0.18),155px);flex-shrink:1;min-height:0}.home-heroes img:first-child{height:100%;width:auto;max-width:160px}.home-best{font-size:20px}.home-save{padding:10px;gap:5px}.home-save span{font-size:11px}.home-card>small{font-size:10px;line-height:1.5}.home-card>.primary,.home-card>.secondary{min-height:44px;font-size:14px;flex-shrink:0}.home-card .brand-name{white-space:normal}
#toast{position:fixed;bottom:calc(79px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(calc(var(--game-width) * 1.0) - 24px);min-width:0;z-index:40;padding:10px 14px;font-size:11px;text-align:center;background:#201329;border:1px solid #deb578}
@container game (max-width:360px){.topbar{padding-inline:7px}.brand>div,.topbar>b{font-size:9px;max-width:132px}.top-actions{gap:3px}.top-actions>.small{min-width:29px;font-size:9px}.top-actions .help-button{min-width:25px}.expedition-strip{padding-inline:9px;gap:7px;font-size:7px}.expedition-strip>b{font-size:14px}.strip-lives{font-size:12px}.workspace-tabs{gap:3px}.workspace-tabs button{font-size:9px}.cauldron-panel{padding:10px;gap:7px}.cauldron-panel h2{font-size:13px}.cauldron-panel .section-heading .small{font-size:9px;padding:3px 5px}.material>span{font-size:7px}.pack-panel{padding:10px;gap:8px}.section-heading h2{font-size:14px}.detail b{font-size:12px}.detail p,.detail small{font-size:9px}.detail-actions button{font-size:9px}.modal{padding:14px;gap:10px}.modal h2{font-size:18px}.hero-profile h2{font-size:21px}.hero-profile small{font-size:10px}.recipe-row b{font-size:10px}.recipe-row>small{font-size:8px}.recipe-row{padding-left:5px;gap:5px}.recipe-row>img{width:32px}.fighter{width:125px}.sprite-body{width:125px;height:125px}.battle-params{font-size:8px;gap:4px}}
@container game (max-height:720px){.cauldron-panel{grid-template-rows:40px minmax(30px,1fr) 44px var(--preview-height,60px) 44px 20px 124px;gap:6px;padding-block:9px}.cauldron{max-height:130px}.recipe-preview{height:60px;padding:5px 8px}.recipe-preview>img{height:45px;width:38px}.pot-slot{height:44px}.material>img{width:28px;height:28px}.status-card{gap:9px;padding:12px}.status-attributes>span{padding:9px}.tower-record{padding:9px 0}.hero-profile{gap:6px}.hero-profile h2{font-size:20px;margin-bottom:8px}.hero-profile p{margin-top:8px}.hero-profile small{margin-top:5px}.pack-panel{gap:7px}.detail{padding:7px;gap:5px 8px}.detail-actions button{min-height:36px}.stash-item{min-height:42px}.hero-option{min-height:130px}.modal{gap:9px;padding:14px}.modal h2{font-size:18px}.boon-option{min-height:80px;padding:7px}.boon-option>small{font-size:9px}.guide>li>p{font-size:11px;line-height:1.75}.home-card{gap:10px;padding:16px}.home-heroes{height:calc(var(--game-height) * 0.12)}.home-card h1{font-size:23px}.home-save{padding:8px}.battle-params{display:none}.fighter{bottom:28px}.combat-bottom{padding-block:7px}.conditions{min-height:12px}.health-row{padding-top:9px}}
@container game (max-height:600px){#app{grid-template-rows:44px minmax(0,1fr) auto}.topbar{height:44px}.game-shell{grid-template-rows:27px minmax(0,1fr)}.mobile-nav{padding-block:3px}.workspace-tabs button{min-height:46px;font-size:9px}.workspace-tabs button>span{font-size:16px;line-height:16px}.cauldron-panel{grid-template-rows:34px minmax(20px,1fr) 38px var(--preview-height,49px) 40px 16px 102px;gap:4px;padding:7px 10px}.cauldron-panel .section-heading .small{min-height:28px}.cauldron-panel h2{font-size:13px}.cauldron-panel .eyebrow{display:none}.pot-slot{width:42px;height:38px;min-height:38px}.pot-slot>img{width:30px;height:30px}.recipe-preview{height:49px}.recipe-preview>img{width:32px;height:37px}.recipe-preview b{font-size:11px}.recipe-preview small{font-size:9px}.craft-buttons .primary,.craft-buttons>.small{min-height:38px;font-size:11px}.material>img{height:24px;width:24px}.material>span{font-size:7px}.material>b{font-size:9px}.modal{padding:10px;gap:7px}.modal h2{font-size:16px}.modal p{font-size:11px}.hero-option{min-height:110px;padding:7px;grid-template-columns:42px minmax(0,1fr);gap:5px}.hero-option>img{width:42px;height:54px}.hero-option p{font-size:9px}.hero-option b{font-size:11px}.boon-option{min-height:68px;padding:6px;gap:2px 6px;grid-template-columns:34px minmax(0,1fr) auto}.boon-option>.blessing-icon{width:32px;height:32px}.boon-option>b{font-size:11px}.boon-option>small{font-size:9px}.modal>.primary,.modal>.secondary{min-height:38px;font-size:11px}.summon-controls{gap:5px}.summon-controls .primary,.summon-controls .small,.summon-controls .reward-offer{min-height:36px;font-size:10px}.summon-controls>small{font-size:9px;line-height:1.5}.summon-controls>p{font-size:9px}.guide>li>p{font-size:10px;line-height:1.6}.guide>li{font-size:12px}.list-pager button{min-height:34px}.recipe-entry,.recipe-row{min-height:63px}.secret-hint{font-size:9px;padding:5px}.detail p{font-size:9px;line-height:1.35}.detail small{font-size:9px}.detail b{font-size:11px}.detail-actions button{min-height:32px;font-size:9px}.pack-panel{grid-template-rows:29px minmax(0,1fr) auto auto;padding:8px;gap:5px}.pack-tools{height:34px}.pack-tools button{min-height:34px;font-size:9px}.bag{width:min(100cqw,calc((100cqh - 42px)*6/var(--rows)))}.stash-item{min-height:36px;grid-template-columns:25px 1fr}.stash-item img{width:25px;height:25px}.stash-item span,.stash-item small{font-size:7px}.status-card{gap:7px;padding:10px}.status-attributes{gap:6px}.status-attributes>span{padding:6px;font-size:10px}.status-attributes b{font-size:17px}.tower-record{padding:6px 0;font-size:10px}.tower-record b{font-size:18px}.boon-chip{min-height:40px;font-size:9px}.hero-profile .hero-params span{padding:5px 2px}.hero-profile .hero-params b{font-size:15px}.hero-profile p,.hero-profile small{font-size:10px}.home-card{gap:7px;padding:12px}.home-card h1{font-size:20px}.home-card>.eyebrow{font-size:8px}.home-card>p,.home-save span,.home-card>small{font-size:9px}.home-heroes{height:55px}.home-best{font-size:16px}.home-card>.primary,.home-card>.secondary{min-height:38px;font-size:12px}.home-save{padding:6px}.arena{grid-template-rows:32px minmax(0,1fr) auto auto auto}.arena-heading{font-size:10px}.fighter{width:96px;bottom:24px}.sprite-body{width:96px;height:96px}.fighter>span{font-size:8px}.health-row{padding:6px 9px 0}.health b{font-size:8px}.health>div>span{font-size:9px}.health>small{font-size:8px}.combat-bottom{padding:5px 9px}.skill-indicator b{font-size:9px}.skill-indicator small,.build-meter{font-size:8px}.battle-controls{padding:0 9px 9px}.battle-controls>.primary{min-height:40px;font-size:12px}.battle-controls .secondary{min-height:36px}.skill-icon{font-size:20px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
@container game (aspect-ratio > 1) and (max-height:480px){
 #app{width:min(100%,1000px);grid-template-rows:40px minmax(0,1fr) auto}.topbar{height:40px}.top-actions>.small{min-height:32px}.game-shell{grid-template-rows:24px minmax(0,1fr)}.mobile-nav{padding:3px 8px}.workspace-tabs button{min-height:42px;flex-direction:row;gap:7px}.workspace-tabs button>span{font-size:18px}.workspace-tabs button{font-size:10px}
 .cauldron-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:32px minmax(0,1fr) var(--preview-height,49px) 38px;gap:5px 14px;padding:7px 14px}.cauldron-panel .section-heading{grid-column:1/-1;grid-row:1}.cauldron-stage{grid-column:1;grid-row:2}.cauldron{max-height:100px}.pot-count{right:12px;bottom:0}.recipe-preview{grid-column:1;grid-row:3}.pot-slots{grid-column:1;grid-row:4;gap:10px}.craft-buttons{grid-column:2;grid-row:4}.material-heading{grid-column:2;grid-row:2;align-self:start;height:16px;z-index:1}.materials{grid-column:2;grid-row:2/4;padding-top:20px}.material>img{width:28px;height:28px}.material>span{font-size:8px}
 #panel-pack,#panel-battle,#panel-status,#panel-heroes{padding:6px}.pack-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:28px minmax(0,1fr) auto;gap:5px 14px;padding:8px}.pack-panel>.section-heading{grid-column:1/-1}.pack-layout{grid-column:1;grid-row:2/4}.detail{grid-column:2;grid-row:2;align-self:center}.stash{grid-column:2;grid-row:3}.stash>.eyebrow{font-size:8px}.detail p{font-size:9px}.detail small{font-size:9px}.detail-actions button{min-height:30px}.bag{max-width:320px}.pack-tools button{min-height:32px}
 .arena{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:31px minmax(0,1fr) auto auto}.arena-heading{grid-column:1/-1;grid-row:1}.battle-stage{grid-column:1;grid-row:2/5}.health-row{grid-column:2;grid-row:2;align-items:center;gap:12px}.combat-bottom{grid-column:2;grid-row:3;gap:5px;padding-block:5px}.battle-controls{grid-column:2;grid-row:4;padding-bottom:8px}.battle-controls>.primary{min-height:38px}.sprite-body{width:105px;height:105px}.fighter{width:105px;bottom:24px}.health>div:first-child{flex-direction:column}.combat-log{max-width:38%}.combat-log>span{font-size:8px}.combat-log img{width:20px;height:20px}.build-meter{font-size:7px}.skill-indicator{min-width:105px}.skill-indicator b{font-size:9px}.skill-indicator small{font-size:7px}
 .hero-panel{padding:10px;gap:6px}.hero-profile{flex-direction:row;gap:24px}.hero-profile>img{height:90%;max-height:170px;max-width:35%}.hero-profile>div{flex:1}.hero-profile h2{font-size:18px;margin:0 0 6px}.hero-profile .hero-params{font-size:9px}.hero-profile .hero-params b{font-size:14px}.hero-profile p,.hero-profile small{font-size:10px;margin-top:5px}.status-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:28px minmax(0,1fr) 25px;gap:7px 20px;padding:10px}.status-card>.section-heading{grid-column:1;grid-row:1}.status-attributes{grid-column:1;grid-row:2;align-content:center}.status-card>p{grid-column:1;grid-row:3;font-size:8px}.tower-record{grid-column:2;grid-row:1;border:0;padding:0}.status-boons{grid-column:2;grid-row:2/4}.status-boons .boon-summary{justify-content:center}.status-boons .boon-chip{min-height:55px}.status-boons .list-pager{margin-top:7px}.status-boons .list-pager button{min-height:30px}
 .modal{max-width:740px;padding:10px 16px;gap:5px;max-height:calc(calc(var(--game-height) * 1.0) - 16px)}.modal-scrim{padding:8px}.modal>.eyebrow{font-size:8px}.modal h2{font-size:16px;line-height:1.4}.modal p{font-size:10px}.modal>.primary,.modal>.secondary{min-height:33px;font-size:11px}.list-pager button{min-height:30px}.secret-hint{font-size:9px;padding:4px}.recipe-entry,.recipe-row{min-height:59px}.recipe-row>img{height:36px}.hero-option{grid-template-columns:62px minmax(0,1fr) 90px;min-height:100px;gap:7px;padding:8px}.hero-option>button,.hero-option>.locked-hero{grid-column:3;grid-row:1}.hero-option>img{width:62px;height:75px}.hero-option p{font-size:9px}.hero-option b{font-size:11px}.boon-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.boon-option{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;min-height:142px;padding:7px}.boon-option>.blessing-icon{width:30px;height:30px}.boon-option>small{font-size:9px}.boon-option>.boon-duration{font-size:8px}.reroll-actions button{min-height:30px;font-size:10px}.loot-result{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.loot-result>.eyebrow{grid-column:1/-1}.loot-result .scroll-drop{padding:5px}.loot-result .scroll-drop img{width:27px;height:27px}.loot-result .growth-reward{gap:6px;font-size:10px;padding:7px}.loot-result .loot-row img{width:22px;height:22px}.loot-result .loot-row>span{font-size:10px}.summon-controls{grid-template-columns:1fr 1fr;gap:6px 15px}.summon-controls>b,.summon-controls>small,.summon-controls>p{grid-column:1/-1}.summon-controls>b img{width:26px;height:26px}.summon-controls>small{font-size:9px}.summon-controls>p{font-size:9px}.summon-controls button{min-height:32px!important}.jobs-modal .craft-jobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.jobs-modal .craft-job{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:7px;min-height:145px;text-align:center}.jobs-modal .craft-job>img{width:32px;height:32px}.jobs-modal .job-info>b{font-size:10px}.jobs-modal .job-info small{font-size:9px}.jobs-modal .claim{min-height:32px}.jobs-modal .craft-job .reward-offer{min-height:32px;font-size:9px}.guide>li>p{font-size:11px;line-height:1.7}.home-screen{padding:8px}.home-card{max-width:680px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;align-items:center;gap:6px 24px;padding:12px 20px}.home-card h1{font-size:20px;grid-column:1;grid-row:2}.home-card>.eyebrow{grid-column:1;grid-row:1}.home-card>p{grid-column:1;grid-row:3}.home-heroes{grid-column:1;grid-row:4/8;height:75px}.home-best{grid-column:2;grid-row:1/3;font-size:18px}.home-save{grid-column:2;grid-row:3/5}.home-card>.primary,.home-card>.secondary,.home-card>small{grid-column:2}.home-card>.primary,.home-card>.secondary{min-height:34px}.summon-show{height:210px}.summon-reveal{display:grid;grid-template-columns:140px 1fr;gap:5px;padding:10px}.summon-reveal>img{grid-row:1/6;grid-column:1;width:140px;height:160px}.summon-reveal h2{font-size:21px}.summon-reveal p{font-size:11px}.summon-orb{top:20px}
}
/* Keep the full-size pack usable: storage and long descriptions open on demand. */
.stash{display:block;padding-top:0;border:0;min-height:38px}.storage-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:6px 10px;font-size:11px;background:#2b1f38}.storage-button>span{color:#d8bd8f;font-size:10px}.has-selection .detail>div:not(.detail-actions){position:relative;padding-right:35px;min-width:0}.has-selection .detail p,.has-selection .detail .eyebrow{display:none}.has-selection .detail>img{height:42px}.has-selection .detail b{font-size:12px;line-height:1.4}.has-selection .detail small{font-size:9px}.detail .gear-detail-button{position:absolute;right:0;top:0;min-width:31px;min-height:32px;padding:3px;font-size:13px}.storage-list{display:grid;gap:9px}.storage-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:9px;min-height:66px;text-align:left;padding:8px}.storage-entry>img{width:44px;height:44px}.storage-entry b{display:block;font-size:12px}.storage-entry small{display:block;font-size:10px;margin-top:5px;color:#d4b68e}.storage-entry>span:last-child{color:#d9b783;font-size:12px}.storage-modal p{font-size:11px}.gear-info-modal small{font-size:11px;color:#c6abc9}
@container game (max-height:600px){.stash,.storage-button{min-height:32px}.storage-button{font-size:10px}.detail .gear-detail-button{min-height:28px;min-width:28px}.has-selection .detail b{font-size:11px}.has-selection .detail>img{height:36px;width:36px}.has-selection .detail{grid-template-columns:36px minmax(0,1fr);gap:4px 7px}.detail small{margin-top:2px}.storage-entry{min-height:56px;padding:6px}.storage-entry>img{height:36px;width:36px}.storage-entry b{font-size:11px}.storage-entry small{font-size:9px}}
@container game (aspect-ratio > 1) and (max-height:480px){.storage-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.storage-entry{display:flex;flex-direction:column;min-height:115px;text-align:center;gap:5px}.storage-entry>span:last-child{display:none}.storage-entry b{font-size:11px}.storage-entry small{font-size:9px}.storage-list>p{grid-column:1/-1}}
/* Illustrated hero chamber and four artifact navigation buttons. */
#panel-heroes{padding:0!important;background:#100e16}
.hero-showcase{isolation:isolate;height:100%;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto minmax(0,1fr) auto;padding:20px 16px 12px;gap:12px;color:#fff2d9}
.hero-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 20%;z-index:-3;image-rendering:pixelated}
.hero-showcase:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#090b13ba,transparent 25%,transparent 47%,#0b0b15ed 80%),linear-gradient(90deg,transparent 46%,#0a0b1666 75%,#0a0b16b0)}
.hero-showcase:after{content:'';position:absolute;inset:6px;z-index:-1;border:1px solid #bd95574a;box-shadow:inset 0 0 0 2px #0d0c1466;pointer-events:none}
.hero-identity{grid-column:1/-1;align-self:start;text-shadow:2px 2px #080a12}.hero-identity .eyebrow{font-size:8px;letter-spacing:2px;color:#e0bc7e}.hero-identity h2{font-size:clamp(22px,calc(var(--game-width) * 0.06),32px);margin:7px 0 5px;letter-spacing:2px;line-height:1.2}.hero-stars{color:#ffd889;letter-spacing:4px;font-size:13px}
.hero-vitals{grid-column:2;grid-row:2;align-self:center;display:grid;gap:12px;padding:10px 0 10px 13px;border-left:1px solid #c49b5866;background:linear-gradient(90deg,#11121b8c,transparent)}
.vital{display:grid;grid-template-columns:1fr;gap:2px;padding-bottom:7px;border-bottom:1px solid #dbb97833}.vital>span{font-size:10px;color:#deb877;letter-spacing:2px}.vital>span small{display:block;color:#ab9e99;letter-spacing:0;font-size:8px;margin-top:2px}.vital strong{font-size:28px;font-weight:400;line-height:1.15;color:#fff2d9;text-shadow:2px 2px #0d0e16}.vital em{font-size:9px;color:#a8d7b7;font-style:normal}.vital-hp strong{color:#f5b29c}
.hero-dossier{grid-column:1/-1;grid-row:3;display:grid;gap:8px;min-width:0}.hero-skill-card{display:grid;text-align:left;gap:4px;border:0;border-top:1px solid #c79858;border-bottom:1px solid #675138;box-shadow:none;background:#11101adb;padding:11px 12px;min-height:0}.hero-skill-card .eyebrow{font-size:8px;color:#c4ab84;letter-spacing:1px}.hero-skill-card>b{font-size:16px;color:#f8ddb1}.hero-skill-card .skill-summary{font-size:10px;color:#d9c7aa}.hero-skill-card>small{font-size:10px;line-height:1.6;color:#c4b6b0}.hero-skill-card:hover:not(:disabled){background:#24202b}
.hero-blessings{display:flex;align-items:center;gap:9px;min-height:44px;padding:3px 9px;background:#15131ec9;border:0;box-shadow:none;text-align:left;color:#d9c2a0;font-size:10px}.hero-blessings>span:last-child{margin-left:auto}.boon-art-strip{display:flex;align-items:center;gap:2px}.boon-art-strip .blessing-icon{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 3px #09090a)}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-actions>button{min-height:44px;font-size:12px}
.blessing-icon{image-rendering:pixelated;object-fit:contain}.blessing-list{display:grid;gap:8px}.blessing-entry{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:9px;background:#181321;border-bottom:1px solid #63506e}.blessing-entry>.blessing-icon{width:52px;height:52px}.blessing-entry b{font-size:13px;color:#e2c89f}.blessing-entry p{margin:4px 0;font-size:11px;line-height:1.6}.blessing-entry small{font-size:9px;color:#b89acf}.hero-param-legend{font-size:11px;line-height:1.8;color:#c9b9d1}
.mobile-nav{padding:0 8px max(3px,env(safe-area-inset-bottom));border-top:1px solid #a0834c;background:linear-gradient(#25202a,#100e18);box-shadow:0 -3px #08080ecc}
.workspace-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.workspace-tabs button,.workspace-tabs button[aria-selected=true]{min-height:67px;border:0;background:transparent;box-shadow:none;padding:0 1px 4px;gap:0;color:#9c9199;text-shadow:1px 1px #07070d;isolation:isolate}.workspace-tabs button:before{content:'';position:absolute;inset:6px 12px 2px;z-index:-1;opacity:0;background:radial-gradient(ellipse at 50% 80%,#b77a324d,transparent 70%);transform:skewX(-10deg)}.workspace-tabs button[aria-selected=true]:before{opacity:1}.workspace-tabs button:hover:not(:disabled){background:#a1813110}.workspace-tabs button[aria-selected=true]{color:#ffe0a3}.workspace-tabs button>.nav-art{display:block;flex-shrink:0;width:48px;height:48px;background-image:url('../assets/ui/navigation-atlas.png');background-size:200% 200%;image-rendering:pixelated;filter:saturate(.65) brightness(.75);line-height:normal}.workspace-tabs button[aria-selected=true]>.nav-art{filter:drop-shadow(0 0 5px #e9af5770) saturate(1.15) brightness(1.15);transform:translateY(-2px)}.nav-battle{background-position:0 0}.nav-pack{background-position:100% 0}.nav-craft{background-position:0 100%}.nav-heroes{background-position:100% 100%}.workspace-tabs button>small{font-size:10px;letter-spacing:1px}.workspace-tabs .tab-badge{top:4px;right:calc(50% - 28px)}
@container game (max-height:700px){.hero-showcase{padding:14px 12px 10px;gap:7px;grid-template-columns:minmax(0,1fr) 94px}.hero-identity h2{font-size:23px}.hero-vitals{gap:5px;padding-block:4px;padding-left:10px}.vital{padding-bottom:4px}.vital strong{font-size:23px}.hero-skill-card{padding:7px 9px;gap:3px}.hero-skill-card>b{font-size:13px}.hero-skill-card>small{font-size:9px;line-height:1.5}.hero-dossier{gap:5px}.hero-blessings{min-height:40px}.hero-actions>button{min-height:40px;font-size:11px}.boon-art-strip .blessing-icon{width:29px;height:29px}}
@container game (max-height:600px){.workspace-tabs button,.workspace-tabs button[aria-selected=true]{min-height:56px}.workspace-tabs button>.nav-art{width:39px;height:39px}.workspace-tabs button>small{font-size:9px}.hero-showcase{padding:12px 12px 9px;gap:5px;grid-template-columns:minmax(0,1fr) 88px}.hero-identity .eyebrow{font-size:7px}.hero-identity h2{font-size:20px;margin:5px 0}.hero-stars{font-size:10px}.hero-vitals{gap:3px}.vital strong{font-size:21px}.vital>span small{display:none}.vital>span{font-size:9px}.vital em{font-size:8px}.hero-skill-card>b{font-size:12px}.hero-skill-card .skill-summary{font-size:9px}.hero-skill-card>small{font-size:8px}.hero-blessings{min-height:36px}.hero-actions>button{min-height:38px}.blessing-entry{padding:7px;grid-template-columns:42px minmax(0,1fr)}.blessing-entry>.blessing-icon{width:42px;height:42px}.blessing-entry b{font-size:11px}.blessing-entry p{font-size:10px}}
@container game (aspect-ratio > 1) and (max-height:480px){.workspace-tabs button,.workspace-tabs button[aria-selected=true]{min-height:43px;flex-direction:row;gap:8px;padding:0}.workspace-tabs button>.nav-art{width:38px;height:38px}.workspace-tabs button:before{inset:3px 20px 0}.hero-showcase{grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:14px 20px;gap:8px 18px}.hero-portrait{width:53%;object-position:center top}.hero-showcase:before{background:linear-gradient(90deg,transparent 15%,#0e0d1888 43%,#0e0d18 59%),linear-gradient(#0e0d1888,transparent 50%)}.hero-identity{grid-column:1/3;grid-row:1}.hero-vitals{grid-column:2;grid-row:2;align-self:center;gap:4px}.hero-dossier{grid-column:3;grid-row:1/3;align-self:center}.hero-skill-card>small{font-size:9px}.vital{grid-template-columns:1fr auto;align-items:center}.vital em{grid-column:1/-1}.vital strong{font-size:20px}.hero-identity h2{font-size:22px}.hero-actions>button{min-height:38px}}
@container game (aspect-ratio <= 1){.hero-identity{grid-column:1}.hero-identity .eyebrow{letter-spacing:1px;line-height:1.7}.hero-vitals{grid-row:1/3}.hero-identity h2{overflow-wrap:anywhere}}
@container game (aspect-ratio <= 1) and (max-height:700px){.vital{grid-template-columns:minmax(0,1fr) auto;gap:1px}.vital>span{grid-column:1/-1}.vital em{font-size:8px;align-self:end;padding-bottom:3px}.vital strong{font-size:22px}.hero-identity h2{font-size:21px;letter-spacing:1px}}
/* Field HUD: one compact route, settings and illustrated play surfaces. */
#app{grid-template-rows:minmax(0,1fr) auto;position:relative}
#app:has(.home-screen){grid-template-rows:minmax(0,1fr)}
.game-shell{grid-template-rows:58px minmax(0,1fr)}
.expedition-strip{padding:4px 10px;gap:10px;background:linear-gradient(#201b29,#12101b);border-bottom:1px solid #92764b;letter-spacing:0}
.current-floor{display:flex;align-items:baseline;gap:2px;color:#f0c785;font-size:25px!important;flex-shrink:0}.current-floor small{color:#c3a879;font-size:10px}
.floor-route{list-style:none;display:flex;flex:1;align-items:center;justify-content:space-between;margin:0;padding:0;min-width:0;max-width:340px}.floor-route li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:#8f8499;white-space:nowrap}.floor-route li:before{content:'';position:absolute;top:10px;left:-50%;width:100%;height:1px;background:#5c4d63;z-index:0}.floor-route li:first-child:before{display:none}.floor-route i{font-style:normal;position:relative;z-index:1;width:19px;height:19px;display:grid;place-items:center;background:#191421;border:1px solid #71617b;color:#8f7b9b;font-size:9px;transform:rotate(0deg)}.floor-route .current i{border-color:#ffe1a4;color:#ffdd8e;box-shadow:0 0 0 2px #60492e,0 0 12px #c7954c77;background:#584127}.floor-route .current>span{color:#ffe3a5}.floor-route .cleared i{color:#bdc7a2;border-color:#727b61}.floor-route .boss-node{flex:1.45;color:#d7a08a}.floor-route .boss-node i{color:#e7ac88;border-color:#ab7564;font-size:14px}.strip-lives{margin-left:auto;font-size:11px;letter-spacing:0;white-space:nowrap}
.settings-toggle{flex-shrink:0;width:42px;height:44px;min-height:44px;padding:0;font-size:25px;color:#d6bf98;border:0;background:transparent;box-shadow:none}.settings-toggle:hover:not(:disabled){background:#57452c44}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-grid button{min-height:48px;font-size:12px}.settings-modal>small{color:#b6a38c}.home-settings{position:absolute;right:12px;top:10px;z-index:5}
#panel-battle{padding:0}.arena{border:0;box-shadow:none;background:#14101e}.arena:before,.arena:after{display:none}.arena-heading{background:#201925;border-bottom:1px solid #6c5541;font-size:11px;padding:5px 12px}.arena-heading .floor-tag{display:none}.arena-heading>b{color:#dac5a8}.arena-heading .phase-tag{margin-left:auto;font-size:9px}.boss-arena .arena-heading{background:#38202b}.boss-arena .arena-heading:before{content:'BOSS';color:#efb177;font-size:10px;letter-spacing:2px}
.battle-stage{position:relative;isolation:isolate;background:#13111e;overflow:hidden}.battle-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;image-rendering:pixelated;z-index:-2;pointer-events:none}.battle-stage:before{content:'';position:absolute;inset:0;background:linear-gradient(#0c0b1820,transparent 60%,#110f2077);z-index:-1;pointer-events:none}.battle-stage:after{display:none}.fighter{bottom:28px}.fighter>span{text-shadow:1px 1px #080612,0 0 4px #080612;background:#110e1aaa;padding:3px 7px;border-bottom:1px solid #94785366}.stage-center b{background:#181120ab;border:1px solid #8a694b;color:#dfc3a0;padding:3px 9px}
.health-row{padding:12px 14px 4px;background:linear-gradient(#201926,#15111e);gap:22px;border-top:1px solid #99734c}.health{min-width:0;position:relative}.health>div:first-child{display:grid;grid-template-columns:1fr;gap:3px}.health b{font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#cfb9a0}.health>div>span{font-size:13px;color:#f4dfc0;letter-spacing:1px}.health-track{position:relative;height:15px;margin:7px 3px 0;border:2px solid #211720;outline:1px solid #b18a57;background:#15101a;box-shadow:0 2px 0 #070710,0 0 0 3px #5c4533;overflow:visible}.health-track:before,.health-track:after{content:'';position:absolute;top:2px;width:5px;height:7px;background:#dfbc7a;border:1px solid #4b352c;z-index:4;transform:rotate(45deg)}.health-track:before{left:-7px}.health-track:after{right:-7px}.health-track>i{position:absolute;left:0;top:0;bottom:0;height:100%;background:repeating-linear-gradient(90deg,transparent 0 19px,#ffffff12 19px 20px),linear-gradient(#b7e6bf 0 15%,#569785 15% 52%,#36695f 52% 85%,#244744 85%);box-shadow:inset 0 1px #d9ffca;transition:width .18s linear}.enemy .health-track>i{background:repeating-linear-gradient(90deg,transparent 0 19px,#ffffff12 19px 20px),linear-gradient(#ffd19a 0 15%,#cf8465 15% 52%,#994d51 52% 85%,#542b40 85%);box-shadow:inset 0 1px #ffe3b1}.health-track>i.health-trail,.enemy .health-track>i.health-trail{background:#f5ce87;box-shadow:none;transition:width .65s ease-out}.health>small{display:block;color:#9fc8d0;font-size:9px;margin-top:8px}.skill-track{height:7px;background:#0d0b17;border:1px solid #74586c;box-shadow:0 1px #080610}.skill-track i{background:linear-gradient(#e7c5ff,#9277c4 50%,#655381 50%)}.combat-bottom,.battle-controls{background:#15111e}
#panel-pack{padding:0;background:url('../assets/ui/armory-table-v1.webp') center/cover no-repeat}
.pack-panel{padding:18px 20px 14px;background:linear-gradient(#100d1688,transparent 25%,transparent 65%,#100d18aa);border:0;box-shadow:none;gap:12px}.pack-panel:before,.pack-panel:after{display:none}.pack-panel .section-heading{border-bottom:1px solid #b38b525e;padding-bottom:5px}.pack-panel h2{font-size:21px;color:#f3d7a5;text-shadow:2px 2px #17101b}.pack-panel .eyebrow{color:#c1a072;letter-spacing:2px}.pack-panel .capacity{background:#19141ad9;border-color:#a37c4c;color:#e6c585;box-shadow:inset 0 0 0 2px #30232b}
.bag{padding:6px;outline:1px solid #b18a56;border:3px solid #3a2824;background:#1e1615b8;box-shadow:0 0 0 3px #21161bcc,inset 0 0 24px #0e0a12,0 5px 20px #08060a88;gap:4px}.bag .cell{border:1px solid #88664686;background:#281e19a6;box-shadow:inset 1px 1px #0a0819b8,inset -1px -1px #bd905327}.bag .cell:hover{background:#986b3145;border-color:#d8b47b}.bag-item{--gear-light:#b39358;border-color:var(--gear-light);background:radial-gradient(ellipse at center,#b5914933,transparent 70%),linear-gradient(145deg,#473627e8,#211b20ed);box-shadow:inset 0 0 0 2px #75533277,inset 0 0 12px #1a102299,0 2px 3px #080611}.bag-item.rarity-E{--gear-light:#b895da;background:radial-gradient(ellipse at center,#a071c155,transparent 75%),#272032e8}.bag-item.rarity-L{--gear-light:#edca79;background:radial-gradient(ellipse at center,#e5b65550,transparent 75%),#302419ed}.bag-item img{filter:drop-shadow(0 2px 2px #0b0714) drop-shadow(0 0 5px #ddba6f22);padding:2px}.bag-item.selected{outline:1px solid #fff0bf;box-shadow:inset 0 0 0 2px #e8ba64,0 0 14px #e5b14a66}.bag-item.linked{border-color:#a4d5b5;box-shadow:inset 0 0 0 1px #a4d5b5,0 0 8px #96cba655}.item-level{color:#ffe7ac;text-shadow:1px 1px #100d15}.item-cd{background:#0e0b17c9;padding:1px 3px;color:#d6c5aa}
.pack-tools button,.storage-button{background:linear-gradient(#49352aeb,#271e22f0);border-color:#977347;box-shadow:inset 1px 1px #9e774142,inset -1px -1px #0d091a;color:#e4cca0}.pack-panel .detail{background:linear-gradient(120deg,#271d25f2,#16111cf2);border-color:#a88250;box-shadow:inset 0 0 0 2px #50372877}.pack-panel .stash{border-top:0;padding-top:0}.pack-panel .detail-star{color:#edc775;text-shadow:0 0 12px #d49a4670}
@container game (max-width:360px){.expedition-strip{padding-inline:7px;gap:6px}.current-floor{font-size:22px!important}.floor-route li{font-size:7px}.floor-route i{width:16px;height:16px}.floor-route li:before{top:8px}.strip-lives{font-size:9px}.settings-toggle{width:35px}.pack-panel{padding:14px 12px 10px;gap:8px}.pack-panel h2{font-size:17px}.health-row{gap:16px;padding-inline:12px}.health>div>span{font-size:11px;letter-spacing:0}}
@container game (max-height:600px){#app{grid-template-rows:minmax(0,1fr) auto}.game-shell{grid-template-rows:51px minmax(0,1fr)}.pack-panel{padding:12px;gap:7px}.pack-panel h2{font-size:16px}.health-track{height:12px;margin-top:5px}.health-row{padding-top:8px}.health>small{margin-top:6px}.arena{grid-template-rows:30px minmax(0,1fr) auto auto auto}.fighter{bottom:26px}.settings-grid button{min-height:44px}.bag{padding:4px}}
@container game (aspect-ratio > 1) and (max-height:480px){.game-shell{grid-template-rows:47px minmax(0,1fr)}.floor-route{max-width:380px}.pack-panel{padding:10px 20px;gap:7px 20px}.arena{grid-template-rows:28px minmax(0,1fr) auto auto}.health-row{border-top:0;background:#15111e}.health b{font-size:9px}.health>div>span{font-size:12px}.settings-modal{max-width:440px}.settings-grid{gap:6px}.settings-grid button{min-height:38px}.settings-modal>.primary{min-height:36px}.settings-modal{gap:6px}}
@media(prefers-reduced-motion:reduce){.health-track>i,.health-track>i.health-trail{transition:none}}
.stage-center b:empty{display:none}
/* Battle loadout is a separate read-only view; equipment editing stays in Gear. */
.arena{grid-template-rows:30px minmax(110px,1.1fr) auto auto minmax(120px,1fr) auto}
.battle-inventory{min-height:0;display:grid;grid-template-rows:23px minmax(0,1fr);margin:3px 12px 9px;padding:7px 9px;background:linear-gradient(#171220df,#1b131bdd),url('../assets/ui/armory-table-v1.webp') center/cover;border:1px solid #b38b57;box-shadow:inset 0 0 0 2px #59412d,0 0 0 2px #0c0b14;overflow:hidden}
.battle-pack-heading{display:flex;align-items:center;justify-content:space-between;color:#e4c78d;font-size:11px;border-bottom:1px solid #89664055;padding-bottom:4px}.battle-pack-heading small{font-size:9px;color:#b2a28b}.battle-pack-space{container-type:size;min-height:0;display:grid;place-items:center;padding-top:4px}.battle-bag{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:3px;width:min(100cqw,calc(100cqh * 6 / var(--rows)));aspect-ratio:6/var(--rows);position:relative;max-height:100%}.battle-cell{border:1px solid #70574785;background:#100d1c99;box-shadow:inset 1px 1px #0006}.battle-gear{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:radial-gradient(#66503e88,#292027cc);border:1px solid #b3955e;overflow:hidden}.battle-gear.rarity-E{border-color:#c19dda;background:radial-gradient(#76569077,#281c36cc)}.battle-gear.rarity-L{border-color:#f1d38d;background:radial-gradient(#ae873f77,#33241bcc)}.battle-gear img{width:100%;height:100%;object-fit:contain;min-height:0;filter:drop-shadow(1px 2px #0d0714)}.battle-gear>span{position:absolute;top:1px;left:3px;font-size:7px;color:#f2d18e}.battle-item-charge{position:absolute;bottom:0;left:0;height:3px;width:var(--charge);background:#e9c989;box-shadow:0 0 5px #ffe0ac}
.arena .health-row{padding-top:8px}.arena .health .battle-params{display:none}.arena .combat-bottom{padding-block:5px}.arena .health>small{font-size:8px}.arena .skill-indicator b{font-size:10px}.arena .combat-log img{width:21px;height:21px}.arena .combat-log>span{font-size:8px}.arena .battle-controls{padding-bottom:9px}
/* Storage is always present. Only this horizontal strip scrolls. */
.pack-panel{grid-template-rows:36px minmax(0,1fr) auto 105px}
.storage-heading{display:flex;align-items:center;justify-content:space-between;height:23px;color:#d9b97f;font-size:10px}.storage-heading small{font-size:8px;color:#bda68e}.stash-items.inline-storage{display:flex;gap:7px;height:82px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a98552 #20171e;padding:2px 2px 6px;touch-action:pan-x}.inline-storage .stash-item,.inline-storage .stash-empty{flex:0 0 72px;height:70px;min-width:0;min-height:0;border:1px solid #8c6c45;background:#21171ac9;box-shadow:inset 0 0 0 2px #553c2b88;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:38px 13px 12px;gap:0;padding:2px;text-align:center}.inline-storage .stash-item img{grid-row:auto;width:35px;height:35px;justify-self:center;object-fit:contain}.inline-storage .stash-item span{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:13px}.inline-storage .stash-item small{text-align:center;font-size:8px}.inline-storage .stash-empty{display:grid;place-items:center;border-color:#6f534255;color:#705740;background:#17121788}.inline-storage .stash-empty>span{font-size:23px}.inline-storage .stash-item.selected{border-color:#ffe2a1;box-shadow:inset 0 0 0 2px #c79a56,0 0 9px #e0ae5255}
.craft-buttons{grid-template-columns:minmax(0,1.2fr) 46px minmax(0,1fr)}.craft-buttons .recipe-access{min-height:38px;padding:4px;font-size:11px;color:#f0d29d;background:linear-gradient(#5c4038,#342637);border-color:#c29c67;box-shadow:inset 0 0 0 2px #88604866}.craft-buttons .recipe-access:before{content:'✦ ';color:#deb875}
/* Reward and three blessing cards share one result screen. */
.modal.unified-result{width:min(100%,640px);max-height:calc(calc(var(--game-height) * 1.0) - 20px);padding:18px;gap:12px;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,#413146,#1a1427 65%);border:1px solid #d0aa69;box-shadow:inset 0 0 0 3px #443244,0 0 0 2px #110b1b}.victory-heading{text-align:center;flex:none}.victory-heading .eyebrow{font-size:9px;color:#e0bd7f;letter-spacing:2px}.victory-heading h2{font-size:22px;margin:7px 0}.victory-heading>small{font-size:10px;color:#bda8bf}.victory-loot{display:grid;gap:6px;padding:8px;background:#0f0c1980;border-top:1px solid #8c6b4666;border-bottom:1px solid #8c6b4666;flex:none}.victory-loot .growth-reward{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:2px;margin:0;border:0;background:none;font-size:10px}.victory-loot .growth-reward span{font-size:10px}.victory-loot .loot-row{justify-content:center;gap:6px 12px;margin:0;padding:0}.victory-loot .loot-row span{font-size:10px}.victory-loot .loot-row img{width:25px;height:25px}.victory-recipes{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.victory-recipes>small{font-size:8px;color:#c6af8d}.victory-recipes>span{display:flex;align-items:center;gap:3px;min-width:0}.victory-recipes img{width:26px;height:26px;object-fit:contain}.victory-recipes span small{font-size:8px;max-width:110px;line-height:1.5}.blessing-choice-heading{display:flex;justify-content:space-between;align-items:baseline;gap:7px;color:#f0d5a4;flex:none}.blessing-choice-heading b{font-size:13px}.blessing-choice-heading small{font-size:9px;color:#c0a88b}
.unified-result .boon-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;margin:0;min-height:0;flex:none}.unified-result .boon-option{--rim:#92b6c8;--inner:#49617b;--shine:#bedbea;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;min-height:255px;padding:17px 9px 12px;border:1px solid var(--rim);background:radial-gradient(ellipse at 50% 20%,#59788a44,transparent 55%),linear-gradient(#242237,#151422);box-shadow:inset 0 0 0 3px #151020,inset 0 0 0 4px var(--inner),0 3px 0 #090812;text-align:center;overflow:visible}.unified-result .boon-option:before{content:'';position:absolute;inset:6px;border:1px solid var(--inner);clip-path:polygon(0 0,22% 0,22% 2%,2% 2%,2% 22%,0 22%,0 0,100% 0,100% 22%,98% 22%,98% 2%,78% 2%,78% 0,100% 0,100% 100%,78% 100%,78% 98%,98% 98%,98% 78%,100% 78%,100% 100%,0 100%,0 78%,2% 78%,2% 98%,22% 98%,22% 100%,0 100%);pointer-events:none}.unified-result .boon-option:after{content:'◆';position:absolute;top:-9px;left:calc(50% - 10px);width:20px;height:17px;color:var(--shine);text-shadow:0 0 6px var(--inner);font-size:13px;line-height:17px;background:#20192b}.unified-result .boon-option.rarity-E{--rim:#d5abea;--inner:#9a61b5;--shine:#f0cdff;background:radial-gradient(ellipse at 50% 20%,#bd70f144,transparent 60%),linear-gradient(#34213f,#1d142a);box-shadow:inset 0 0 0 3px #211326,inset 0 0 0 4px #9a61b5,0 0 13px #b56de038,0 3px #090812}.unified-result .boon-option.rarity-E:after{content:'✦◆✦';width:44px;left:calc(50% - 22px);font-size:12px}.unified-result .boon-option.rarity-L{--rim:#ffe3a3;--inner:#bd914a;--shine:#fff1c4;background:radial-gradient(ellipse at 50% 10%,#f5c34f50,transparent 65%),linear-gradient(#493528,#241626);box-shadow:inset 0 0 0 3px #43271c,inset 0 0 0 4px #c59b57,0 0 19px #e5ae4940,0 3px #090812}.unified-result .boon-option.rarity-L:after{content:'✦♛✦';width:52px;left:calc(50% - 26px);font-size:15px;top:-12px;height:23px;line-height:23px;background:#352423}.unified-result .boon-option:hover:not(:disabled){filter:brightness(1.18);border-color:var(--shine)}.unified-result .boon-option:active{translate:0 2px}.unified-result .boon-option>.blessing-icon{width:64px;height:64px;flex:none;filter:drop-shadow(0 3px 4px #080714)}.unified-result .boon-option>.boon-rarity{font-size:8px;color:var(--shine);letter-spacing:1px}.unified-result .boon-option>b{font-size:13px;line-height:1.6;color:var(--shine);margin:0;min-height:40px;display:flex;align-items:center;justify-content:center}.unified-result .boon-option>small{font-size:11px;line-height:1.65;color:#e2d3d5;flex:1}.unified-result .boon-duration{font-size:9px;color:#c1aa8e;margin-top:auto;border-top:1px solid var(--inner);padding-top:6px;width:100%}.unified-result .reroll-actions{justify-content:center;margin:0;flex:none}.unified-result .reroll-actions button{min-height:38px;font-size:11px}
@container game (max-width:360px){.unified-result .boon-options{gap:7px}.modal.unified-result{padding:12px;gap:10px}.unified-result .boon-option{padding:14px 6px 8px;gap:5px;min-height:235px}.unified-result .boon-option>.blessing-icon{width:47px;height:47px}.unified-result .boon-option>b{font-size:11px;min-height:35px}.unified-result .boon-option>small{font-size:9px}.unified-result .boon-option>.boon-rarity{font-size:7px;letter-spacing:0}.victory-heading h2{font-size:18px}.victory-recipes span small{font-size:7px}.blessing-choice-heading b{font-size:11px}.blessing-choice-heading small{font-size:8px}.craft-buttons .recipe-access{font-size:9px}}
@container game (max-height:700px){.arena{grid-template-rows:26px minmax(90px,1fr) auto auto minmax(100px,1fr) auto}.arena .sprite-body,.arena .fighter{width:105px;height:105px}.arena .fighter{bottom:23px}.arena .fighter>span{font-size:8px}.battle-inventory{margin:2px 10px 6px;padding:5px 7px;grid-template-rows:19px minmax(0,1fr)}.arena .health-row{padding-top:6px}.arena .health-track{margin-top:4px;height:11px}.arena .health>div>span{font-size:10px}.arena .health b{font-size:8px}.arena .health>small{margin-top:5px}.arena .combat-bottom{padding:4px 10px}.arena .skill-indicator b{font-size:9px}.arena .skill-indicator small{font-size:8px}.arena .battle-controls>.primary{min-height:37px;font-size:12px}.arena .battle-controls{padding-bottom:7px}.arena .conditions:empty{display:none}.pack-panel{grid-template-rows:30px minmax(0,1fr) auto 96px}.inline-storage .stash-item,.inline-storage .stash-empty{height:63px;flex-basis:64px;grid-template-rows:32px 12px 11px}.inline-storage .stash-item img{width:30px;height:30px}.stash-items.inline-storage{height:73px}.unified-result .boon-option{min-height:210px;gap:5px}.unified-result .boon-option>.blessing-icon{width:45px;height:45px}.unified-result .boon-option>small{font-size:9px}.victory-heading h2{font-size:18px}.victory-loot{padding:5px;gap:4px}.victory-loot .loot-row img{width:20px;height:20px}.victory-loot .loot-row{gap:3px 8px}.unified-result .reroll-actions button{min-height:33px}.victory-recipes img{width:22px;height:22px}.modal.unified-result{gap:9px}.victory-heading h2{margin:5px 0}}
@container game (aspect-ratio > 1) and (max-height:480px){.arena{grid-template-columns:1fr 1fr;grid-template-rows:25px minmax(70px,1fr) auto auto;gap:0}.arena-heading{grid-column:1;grid-row:1}.arena .battle-stage{grid-column:1;grid-row:2}.arena .health-row{grid-column:1;grid-row:3}.arena .combat-bottom{grid-column:1;grid-row:4}.arena .battle-inventory{grid-column:2;grid-row:1/4;margin:7px 12px 7px 5px}.arena .battle-controls{grid-column:2;grid-row:4}.arena .sprite-body,.arena .fighter{width:80px;height:80px}.arena .fighter{bottom:20px}.arena .health>div:first-child{display:flex;justify-content:space-between;gap:3px}.arena .health>small{margin-top:4px}.arena .skill-icon{font-size:17px}.arena .build-meter{display:none}.pack-panel{grid-template-columns:1fr 1fr;grid-template-rows:28px minmax(0,1fr) 90px}.pack-panel .pack-layout{grid-row:2/4}.pack-panel .stash{grid-column:2;grid-row:3}.craft-buttons{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:5px}.craft-buttons .recipe-access{font-size:9px}.modal.unified-result{width:min(100%,780px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);grid-template-rows:auto minmax(0,1fr) auto;padding:13px;gap:10px 16px}.victory-heading{grid-column:1;grid-row:1}.victory-loot{grid-column:1;grid-row:2;align-self:center}.blessing-choice-heading{grid-column:2;grid-row:1}.unified-result .boon-options{grid-column:2;grid-row:2/4}.unified-result .reroll-actions{grid-column:1;grid-row:3}.unified-result .boon-option{min-height:230px;padding:14px 8px 8px}.unified-result .boon-option>b{font-size:11px;min-height:32px}.unified-result .boon-option>small{font-size:9px}.victory-recipes{flex-wrap:wrap}.victory-recipes span small{font-size:7px}.victory-heading h2{font-size:17px}}
.stash-items.inline-storage{flex-wrap:nowrap}
@container game (max-height:700px){.pack-panel .detail .evolution-hint{display:none}.pack-panel.has-selection .detail{grid-template-columns:30px minmax(0,1fr);padding:6px;gap:4px 7px}.pack-panel.has-selection .detail>img{width:30px;height:39px}.pack-panel .detail-actions button{min-height:32px}.pack-panel .detail-actions{gap:5px}.pack-panel .detail>div:not(.detail-actions){position:relative;padding-right:22px}.pack-panel .gear-detail-button{position:absolute;top:0;right:0;min-height:26px;width:22px;padding:0}}
@container game (max-height:600px){.pack-panel{grid-template-rows:29px minmax(0,1fr) auto 88px;padding:8px;gap:5px}.storage-heading{height:19px}.stash-items.inline-storage{height:69px}.inline-storage .stash-item,.inline-storage .stash-empty{height:61px}}
@container game (aspect-ratio > 1) and (max-height:480px){.pack-panel{grid-template-rows:28px minmax(0,1fr) 88px;padding:8px 14px;gap:6px 16px}}
.pack-panel{grid-template-columns:minmax(0,1fr)}.pack-panel>*{min-width:0}.stash-items.inline-storage{width:100%;max-width:100%;min-width:0}
@container game (aspect-ratio > 1) and (max-height:480px){.pack-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@container game (aspect-ratio <= 1) and (max-height:700px){.arena{grid-template-rows:24px minmax(85px,.65fr) auto auto minmax(145px,1.35fr) auto}.arena .sprite-body,.arena .fighter{width:85px;height:85px}.arena .fighter{bottom:21px}.arena .health-row{padding-block:5px 0}.arena .health>div:first-child{gap:1px}.arena .health>small{margin-top:4px}.arena .combat-bottom{padding-block:3px}.arena .skill-icon{font-size:18px}.arena .combat-log img{width:18px;height:18px}.arena .combat-log>span{font-size:7px}}
.craft-buttons{display:grid}.craft-buttons>*{min-width:0;width:100%}.craft-buttons>.primary{padding-inline:4px}
.battle-gear.activated{animation:battle-gear-flash .45s ease-out}@keyframes battle-gear-flash{0%{filter:brightness(2);box-shadow:inset 0 0 0 2px #fff0c0,0 0 10px #efc970}100%{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.battle-gear.activated{animation:none}}
/* Persistent hero information: bounded blessing list and summoned roster. */
.hero-overview{grid-template-columns:minmax(0,1fr) 115px;padding:14px 12px 10px;gap:7px}.hero-overview .hero-identity{grid-column:1}.hero-overview .hero-vitals{grid-column:2;grid-row:1/3;gap:6px;align-self:center;padding:6px 0 6px 10px}.hero-overview .vital{grid-template-columns:minmax(0,1fr) auto;gap:2px}.hero-overview .vital>span{grid-column:1/-1}.hero-overview .vital strong{font-size:25px}.hero-overview .vital em{align-self:end;font-size:9px;padding-bottom:3px;color:#c1dfb1}.stat-bonus-key{font-size:7px;line-height:1.6;color:#b4a38d}.hero-overview .hero-dossier{gap:7px;min-width:0}.hero-overview .hero-skill-card{padding:9px 10px;gap:4px}.hero-skill-effects{font-size:11px;line-height:1.6;margin:0;color:#e0d0bf}.hero-overview .hero-dossier>*{min-width:0}.hero-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;height:25px;color:#dfc49b;font-size:11px}.hero-section-heading small{font-size:9px;color:#ac9889}.hero-boons-inline{background:#13111bde;border-top:1px solid #8e6c45;padding:0 8px 5px}.hero-boons-scroll{height:110px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#b28e55 #1c1422;touch-action:pan-y}.hero-boon-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;padding:5px 2px;border-bottom:1px solid #79604544}.hero-boon-row>.blessing-icon{width:34px;height:34px}.hero-boon-row b{font-size:11px;color:#e0cba5}.hero-boon-row p{font-size:10px;line-height:1.6;margin:2px 0;color:#c9b9b9}.hero-boon-row small{font-size:8px;color:#b49bb6}.no-boons{font-size:10px;color:#b3a6b7;margin:10px 0}.hero-roster{min-width:0;background:#15111bc9;padding:0 7px 4px;border-top:1px solid #9b764c}.hero-roster .hero-section-heading{height:32px}.hero-roster .hero-section-heading button{min-height:28px;padding:3px 10px;font-size:10px;background:#745031;border-color:#cca76a}.hero-roster-scroll{display:flex;flex-wrap:nowrap;gap:7px;width:100%;min-width:0;height:72px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b18b51 #191320;overscroll-behavior-x:contain;touch-action:pan-x;padding:3px 2px 6px}.hero-roster-item{flex:0 0 65px;min-width:0;min-height:0;height:60px;padding:2px;display:grid;grid-template-rows:40px 12px;justify-items:center;gap:1px;background:#261b29;border:1px solid #685066;box-shadow:none}.hero-roster-item>img{width:40px;height:40px;object-fit:contain}.hero-roster-item>small{font-size:7px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-roster-item.selected{border-color:#f4d897;background:#55402b;box-shadow:inset 0 0 0 1px #b48c50,0 0 8px #d4a55950}
.cauldron-stage{container-type:size;overflow:hidden}.cauldron-stage .cauldron{width:min(68.8cqw,73.6cqh);height:min(68.8cqw,73.6cqh);max-width:none;max-height:none;object-fit:contain}.cauldron-stage .pot-halo{width:min(72cqw,78.4cqh);height:min(72cqw,78.4cqh);max-width:none;max-height:none}.cauldron-stage .pot-count{right:8px;bottom:5px}
.arena-heading{visibility:hidden;height:0;min-height:0;padding:0;border:0;overflow:hidden}.arena{grid-template-rows:0 minmax(110px,1.1fr) auto auto minmax(120px,1fr) auto}
@container game (max-height:700px){.hero-overview{grid-template-columns:minmax(0,1fr) 108px;padding:10px;gap:4px}.hero-overview .hero-identity h2{font-size:20px;letter-spacing:0}.hero-overview .hero-identity .eyebrow{font-size:7px;letter-spacing:0}.hero-overview .hero-vitals{gap:3px;padding-left:7px}.hero-overview .vital{padding-bottom:3px;gap:0}.hero-overview .vital strong{font-size:21px}.hero-overview .vital em{font-size:8px}.hero-overview .hero-dossier{gap:5px}.hero-overview .hero-skill-card{padding:6px 8px;gap:3px}.hero-overview .hero-skill-card>b{font-size:12px}.hero-skill-effects{font-size:9px;line-height:1.5}.hero-boons-scroll{height:65px}.hero-section-heading{height:20px;font-size:10px}.hero-boon-row{padding:4px 0;gap:5px;grid-template-columns:28px minmax(0,1fr)}.hero-boon-row>.blessing-icon{width:27px;height:27px}.hero-boon-row b{font-size:10px}.hero-boon-row p{font-size:9px;line-height:1.4}.hero-boon-row small{font-size:7px}.hero-roster-scroll{height:60px;gap:5px}.hero-roster-item{flex-basis:57px;height:49px;grid-template-rows:31px 11px}.hero-roster-item>img{width:31px;height:31px}.hero-roster .hero-section-heading{height:28px}.hero-roster .hero-section-heading button{min-height:25px}.stat-bonus-key{font-size:6px}.arena{grid-template-rows:0 minmax(90px,1fr) auto auto minmax(100px,1fr) auto}}
@container game (aspect-ratio <= 1) and (max-height:700px){.arena{grid-template-rows:0 minmax(85px,.65fr) auto auto minmax(145px,1.35fr) auto}}
@container game (aspect-ratio > 1) and (max-height:480px){.hero-overview{grid-template-columns:minmax(0,.9fr) 106px minmax(0,1.4fr);grid-template-rows:minmax(0,1fr);padding:8px 12px;gap:10px}.hero-overview .hero-identity{grid-column:1;grid-row:1;align-self:start}.hero-overview .hero-vitals{grid-column:2;grid-row:1;align-self:center}.hero-overview .hero-dossier{grid-column:3;grid-row:1;align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) 83px;gap:4px}.hero-overview .hero-boons-inline{display:grid;grid-template-rows:20px minmax(0,1fr);min-height:0}.hero-overview .hero-boons-scroll{height:100%;min-height:0}.hero-overview .hero-skill-card{align-content:start}.hero-overview .hero-skill-effects{font-size:9px}.hero-overview .hero-roster-scroll{height:54px}.hero-overview .hero-roster-item{height:46px;grid-template-rows:28px 11px}.hero-overview .hero-roster-item img{width:28px;height:28px}.arena{grid-template-rows:0 minmax(70px,1fr) auto auto}.arena .battle-inventory{grid-row:1/4}}

/* Keep ingredient reset beside the ingredients, and leave two clear craft actions. */
.cauldron-panel .pot-slots{gap:8px;min-width:0}.pot-slots .pot-clear{flex:0 0 44px;width:44px;min-height:0;height:100%;padding:3px;font-size:10px;white-space:nowrap;border-color:#ab8050;background:#251b30;box-shadow:inset 1px 1px #594154,inset -1px -1px #110b1a}.cauldron-panel .craft-buttons{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@container game (max-width:360px){.cauldron-panel .pot-slots{gap:6px}.cauldron-panel .pot-slot{flex:0 1 42px;min-width:0}}

.hero-detail-modal .hero-build-detail{overflow:auto;min-height:0;flex:1 1 auto;padding-right:6px}.hero-build-detail h3{font-size:13px;color:#edcc83;margin:12px 0 6px}.hero-build-detail p+p{margin-top:6px}
/* Reserve the same detail area for every selection so bag cells never resize. */
.pack-panel{grid-template-rows:36px minmax(0,1fr) 156px 105px}
.pack-panel .detail{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;align-self:stretch;align-content:start;scrollbar-gutter:stable}
@container game (max-height:700px){.pack-panel{grid-template-rows:30px minmax(0,1fr) 114px 96px}}
@container game (max-height:600px){.pack-panel{grid-template-rows:29px minmax(0,1fr) 106px 88px}}
@container game (aspect-ratio > 1) and (max-height:480px){.pack-panel{grid-template-rows:28px minmax(0,1fr) 88px}.pack-panel .detail{grid-column:2;grid-row:2}}

/* Full-footprint sword art: 64x192 pixels, with the same pixels rotated in landscape slots. */
.bag-item .gear-art,.battle-gear .gear-art{position:absolute;inset:3px 1px;container-type:size;pointer-events:none;overflow:hidden;background:none;border:0;padding:0}
.bag-item .gear-art>img,.battle-gear .gear-art>img{position:absolute;left:50%;top:50%;width:calc(100cqh / 3);height:100cqh;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(1px 1px #080b12)}
.bag-item .gear-art.rotated>img,.battle-gear .gear-art.rotated>img{width:calc(100cqw / 3);height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
/* Keep combat layout stable as conditions and combat messages change. */
.arena .conditions,.arena .conditions:empty{display:flex;height:22px;min-height:22px;margin-top:2px;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.arena .conditions>span{flex:none;white-space:nowrap}
.arena .health>small{height:12px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena .combat-bottom{height:64px;min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 14px;gap:4px 8px}
.arena .skill-indicator{min-width:0;overflow:hidden}.arena .skill-indicator>div{min-width:0}
.arena .skill-indicator b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena .combat-log{width:100%;max-width:none;min-width:0;height:24px;overflow:hidden}
.arena .combat-log>span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena .build-meter{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cauldron-panel .queue-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:none;line-height:1.25;white-space:nowrap}
.queue-button.has-ready::after{content:'';position:absolute;top:-5px;right:-5px;width:10px;height:10px;border:2px solid #291d31;border-radius:50%;background:#ff414b;box-shadow:0 0 5px #ff414b66;pointer-events:none}
.queue-button .queue-ready{font-size:9px;color:#ffe1a0}
@container game (max-height:700px){.arena .combat-bottom{height:56px;min-height:56px}}
@container game (aspect-ratio > 1) and (max-height:480px){.arena .combat-bottom{height:40px;min-height:40px;grid-template-rows:minmax(0,1fr)}}
.arena{grid-template-columns:minmax(0,1fr)}.arena>*{min-width:0}
@container game (aspect-ratio > 1) and (max-height:480px){.arena{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Three-cell bow silhouettes leave the missing corner visible and clickable. */
.bag-item.shape-l,.battle-gear.shape-l,#placement-preview.shape-l{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% 50%,0 50%);border:0;box-shadow:none}
.bag-item.shape-rotated,.battle-gear.shape-rotated,#placement-preview.shape-rotated{clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,0 50%,50% 50%)}
.shape-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.shape-frame path{fill:none;stroke:var(--gear-light,#bb9860);stroke-width:2;vector-effect:non-scaling-stroke}
.bag-item.selected .shape-frame path{stroke:#fff1a7}.bag-item.linked .shape-frame path{stroke:#a8e7c4}
#placement-preview.valid .shape-frame path{stroke:#b7e9a9}#placement-preview.invalid .shape-frame path{stroke:#ee8f88}
.bag-item .gear-art.shaped-art,.battle-gear .gear-art.shaped-art{inset:3px}
.bag-item .gear-art.shaped-art>img,.battle-gear .gear-art.shaped-art>img{width:100%;height:100%;object-fit:contain}
.bag-item.shape-rotated .item-level{left:auto;right:3px}
.battle-gear.shape-l>span:not(.gear-art){left:auto;right:3px;bottom:3px}
/* Enemy inspection is available before and during combat. */
.arena .enemy-inspect{pointer-events:auto;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;cursor:pointer;min-height:0;color:inherit;font:inherit}
.arena .enemy-inspect:focus-visible{outline:2px solid #f1cd83;outline-offset:3px}
.enemy-detail-modal{overflow-y:auto;max-height:calc(calc(var(--game-height) * 1.0) - 24px)}
.enemy-detail-heading{display:flex;align-items:center;gap:12px}.enemy-detail-heading>img{width:70px;height:70px;object-fit:contain}.enemy-detail-heading h2{margin:5px 0}.enemy-detail-heading p{font-size:10px}
.enemy-detail-modal h3{margin:4px 0;font-size:14px;color:#edcc83}.enemy-detail-modal>p{margin:0;font-size:12px}
.enemy-inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,36px);gap:3px;flex:none}
.enemy-inventory-grid>i{background:#211c2d;border:1px solid #63526e;min-width:0}
.enemy-gear{position:relative;min-width:0;min-height:0;background:#51402a;border:1px solid #c49b59;display:grid;place-items:center}
.enemy-gear img{max-width:90%;max-height:90%;width:auto;height:100%;object-fit:contain}.enemy-gear>span{position:absolute;bottom:2px;right:3px;font-size:9px;color:#ffe2a4}
.enemy-gear-list{display:grid;gap:5px}.enemy-gear-list>div{display:flex;gap:9px;align-items:center}.enemy-gear-list img{width:32px;height:32px;object-fit:contain}.enemy-gear-list p{margin:0;font-size:12px}.enemy-gear-list small{display:block;font-size:10px;line-height:1.6}
@container game (max-height:600px){.enemy-inventory-grid{grid-template-rows:repeat(5,26px)}.enemy-detail-heading>img{width:45px;height:45px}}
.enemy-detail-heading p{display:flex;flex-wrap:wrap;gap:4px 8px}
.enemy-gear img{position:absolute;inset:5%;width:90%;height:90%;max-width:90%;max-height:90%;object-fit:contain}

/* One footprint-aware renderer for every shape and all three inventory surfaces. */
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art{position:absolute;inset:3px 1px;container-type:size;pointer-events:none;overflow:hidden;background:none;border:0;padding:0}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art>img{position:absolute;inset:auto;left:50%;top:50%;width:calc(100cqh * var(--art-ratio));height:100cqh;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);image-rendering:pixelated}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.rotated>img{width:calc(100cqw * var(--art-ratio));height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.art-wide>img{width:100cqw;height:calc(100cqw / var(--art-ratio))}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.art-wide.rotated>img{width:100cqh;height:calc(100cqh / var(--art-ratio))}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.art-square>img{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.shaped-art{inset:3px}
.enemy-gear.shape-l{clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,50% 50%,0 50%);border:0}
.enemy-gear.shape-rotated{clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,0 50%,50% 50%)}
/* The completed extension rises from the luminous pot, then dissolves. */
.cauldron-stage.evolution-glow .cauldron{animation:alchemyPot 2.6s ease-out both}
.alchemy-reveal{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;place-items:center;animation:alchemyReveal 2.6s linear both}
.alchemy-rays{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,#fff8dce6 0%,#ffd37688 15%,#eab85622 40%,transparent 65%);animation:alchemyLight 2.6s ease-out both}
.alchemy-result{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:88%;animation:alchemyRise 2.6s cubic-bezier(.2,.7,.25,1) both}
.alchemy-result>.pixel{width:min(28cqw,32cqh);height:min(28cqw,32cqh);object-fit:contain;filter:drop-shadow(0 0 5px #fff5c7) drop-shadow(0 0 14px #efbb60)}
.alchemy-result>span{padding:4px 12px;text-align:center;font-size:12px;color:#fff0bc;background:linear-gradient(90deg,transparent,#171020ed 18%,#171020ed 82%,transparent);text-shadow:0 2px 2px #080611}
.alchemy-result small{display:block;font-size:10px;color:#eecb88}
.alchemy-sparks{position:absolute;left:28%;top:45%;width:44%;height:26%;font-size:20px;color:#fff1bb;text-shadow:0 0 9px #ffc75d;animation:alchemySpark 2.6s ease-out both}
.alchemy-sparks i{position:absolute;right:0;top:-30%;font-style:normal}.alchemy-sparks b{position:absolute;right:15%;bottom:0;font-size:12px}
@keyframes alchemyReveal{0%,90%{opacity:1}100%{opacity:0}}
@keyframes alchemyPot{0%,100%{filter:brightness(1)}18%{filter:brightness(2.3) drop-shadow(0 0 18px #ffe6a3)}40%,70%{filter:brightness(1.3) drop-shadow(0 0 10px #f5c465)}}
@keyframes alchemyLight{0%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1)}75%{opacity:.7}100%{opacity:0;transform:scale(1.15)}}
@keyframes alchemyRise{0%,12%{opacity:0;transform:translateY(22cqh) scale(.3)}36%{opacity:1;transform:translateY(-9cqh) scale(1.06)}48%,88%{opacity:1;transform:translateY(-7cqh) scale(1)}100%{opacity:0;transform:translateY(-10cqh) scale(1)}}
@keyframes alchemySpark{0%,18%{opacity:0;transform:translateY(10px) scale(.6)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(-30px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.cauldron-stage.evolution-glow .cauldron,.alchemy-result,.alchemy-rays{animation:none}.alchemy-result{transform:translateY(-7cqh)}.alchemy-sparks{display:none}.alchemy-rays{opacity:.6}}


.cauldron-panel .recipe-preview:empty{height:0;padding:0;border:0;box-shadow:none}
/* Selected gear is held above the bag; taps pass through to its destination cells. */
.bag .bag-item.floating{position:absolute;inset:0;z-index:5;pointer-events:none;translate:0 -7px;scale:1.035;transform-origin:center;filter:drop-shadow(0 9px 4px #080510cc);outline:2px solid #fff0bf;box-shadow:inset 0 0 0 2px #e8ba64,0 0 18px #e5b14a88}
.bag .bag-item.floating.shape-l{outline:0;box-shadow:none;background:#59452e}

/* Hero collection: inspect first, then explicitly switch the battle hero. */
.hero-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 9px;overflow-y:auto;overscroll-behavior:contain;min-height:0;max-height:calc(var(--game-height) * 0.52);flex-shrink:1;padding:3px}
.hero-icon{display:flex;flex-direction:column;gap:7px;padding:0 0 7px;min-width:0;background:#1b1428;border:1px solid #72557f;box-shadow:inset 0 0 0 2px #382642}
.hero-icon.selected{border-color:#edcb87;box-shadow:0 0 0 1px #edcb87}
.hero-icon-art{position:relative;display:block;width:100%;height:88px;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#73527044,transparent 65%)}
.hero-icon-art>img{width:64px;height:64px;object-fit:contain;position:absolute;left:50%;top:8px;transform:translateX(-50%);image-rendering:pixelated;filter:drop-shadow(0 5px 2px #090710aa)}
.hero-icon-art>.rarity{position:absolute;top:4px;left:4px;margin:0;background:#21172ddd}
.hero-icon-active{position:absolute;inset:auto 0 0;padding:3px;background:#332519ee;color:#ffe2a2;font-size:10px}
.hero-icon>b{font-size:11px;font-weight:normal;line-height:1.5;overflow-wrap:anywhere;padding:0 4px}
.hero-icon:focus-visible{outline:2px solid #ffe2a2;outline-offset:2px}
.hero-preview-modal{background:#21192d;padding-top:0;gap:12px}
.hero-preview-modal .hero-preview-body{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex-shrink:1;display:flex;flex-direction:column;gap:12px;margin:0 -18px;padding:0 18px 8px;scrollbar-width:thin;scrollbar-color:#755b7c transparent}
.hero-preview-art{position:relative;flex-shrink:0;height:clamp(250px,calc(var(--game-height) * 0.46),430px);margin:0 -18px;background:#21192d;isolation:isolate}
.hero-preview-art>img{width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:pixelated;mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}
.hero-preview-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#21192d33,transparent 25%,transparent 48%,#21192d 100%),linear-gradient(90deg,#21192d55,transparent 25%,transparent 75%,#21192d55)}
.hero-preview-identity{position:absolute;z-index:1;bottom:33px;left:20px;right:20px;text-shadow:0 2px 8px #080610;display:grid;gap:5px}
.hero-preview-identity>.eyebrow{color:#e3c695;font-size:9px;letter-spacing:2px}
.hero-preview-modal .hero-preview-identity h2{font-size:25px;line-height:1.4;color:#fff0d7;margin:0}
.hero-preview-identity>small{color:#e5cc9d}
.hero-preview-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:-28px;padding:13px 0;border-block:1px solid #a081584f;background:linear-gradient(90deg,transparent,#51374844,transparent)}
.hero-preview-stats>span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 3px;font-size:10px;color:#bca9c8;border-right:1px solid #a0815833}
.hero-preview-stats>span:last-child{border:0}
.hero-preview-stats b{font-size:21px;color:#ffe2a2;text-align:center;font-weight:normal}
.hero-preview-body small{font-size:10px;color:#c8afcf}
.hero-preview-skill{display:grid;gap:7px;padding:12px 0;border-block:1px solid #a0815833}
.hero-preview-skill>b{font-size:14px;color:#ffe2a2}
.hero-preview-body>p{color:#c6b3d0}
@container game (max-width:360px){.hero-icon-grid{gap:8px 6px}.hero-icon>b{font-size:10px}}

/* Keep wide hero poses clear of the right-hand status column. */



/* A compact starting party choice fits the same mobile modal as the game menus. */
.starter-modal{width:min(100%,560px)}
.starter-options{display:grid;gap:9px;min-height:0;overflow:auto}
.starter-option{display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px;padding:0;text-align:left;overflow:hidden;min-height:120px;background:#201b2a;border-color:#9b7c52}
.starter-option>img{width:64px;height:64px;align-self:center;justify-self:center;object-fit:contain;image-rendering:pixelated}
.starter-option>span{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px 10px 10px 0;min-width:0}
.starter-option small{color:#eac482;font-size:10px}.starter-option b{font-size:16px;color:#fff0d6}.starter-option span>span{font-size:11px;line-height:1.6;color:#d0c1d7}.starter-option em{font-size:9px;font-style:normal;color:#b2c9a6}
@container game (max-height:700px){.starter-option{min-height:96px;grid-template-columns:65px minmax(0,1fr);gap:9px}.starter-option>img{width:56px;height:56px}.starter-option b{font-size:14px}.starter-option>span{gap:3px;padding-block:6px}}
@container game (aspect-ratio > 1) and (max-height:480px){.starter-modal{width:min(100%,780px)}.starter-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.starter-option{grid-template-columns:52px minmax(0,1fr)}.starter-option>img{width:48px;height:48px}.starter-option b{font-size:12px}.starter-option span>span{font-size:10px}}

/* Separate shared rarity scenery from alpha character layers. */
.hero-showcase,.hero-preview-art{background-color:#100e16;background-image:var(--hero-background);background-size:cover;background-position:center; background-repeat:no-repeat}
.hero-preview-art{overflow:hidden}
.hero-preview-art>img{object-fit:contain;object-position:center top}

/* Upgrade quotes group material quantities into the same four recipe slots. */
.pot-slot { position: relative; }
.pot-slot .pot-quantity { position: absolute; right: 2px; bottom: 1px; padding: 1px 3px; border-radius: 3px; background: #20170ee8; color: #fff1cb; font-size: 12px; line-height: 1.2; }
.pot-slot.filled:disabled { opacity: 1; }

.boon-level { grid-column:2/-1; display:block; color:#b7dbb0; font-size:11px; line-height:1.5; }

/* Generated title artwork anchors the upper part of the home panel. */
.home-card{justify-content:flex-start;padding-top:clamp(20px,calc(var(--game-height) * 0.04),34px)}
.home-card h1.home-title{width:100%;max-width:470px;margin:0 auto 4px;line-height:0;flex:0 0 auto}
.home-title-logo{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;user-select:none}
.home-card .home-heroes{margin-block:auto}
@container game (max-height:720px){.home-card{padding-top:18px}.home-title-logo{max-height:140px}}
@container game (max-height:600px){.home-card{padding-top:12px}.home-title-logo{max-height:100px}}
@container game (max-height:480px){.home-title-logo{max-height:65px}}

/* Full source cutouts, deliberately framed as left-aligned close-up portraits. */
.hero-showcase .hero-portrait{inset:auto;top:var(--portrait-top,0%);left:38%;width:auto;max-width:none;height:var(--portrait-zoom,150%);object-fit:contain;object-position:center top;transform:translateX(calc(-1 * var(--portrait-anchor,50%)));pointer-events:none}
.hero-preview-art>img{position:absolute;top:0;left:42%;width:145%;height:auto;max-width:none;object-fit:contain;transform:translateX(calc(-1 * var(--portrait-anchor,50%)))}
@container game (aspect-ratio > 1) and (max-height:480px){.hero-showcase .hero-portrait{left:25%;height:var(--portrait-zoom,150%)}}

/* Long MCH names retain their language and fit the fixed cut-in / charge panels. */
#skill-cutin.active{gap:8px}
#skill-cutin>div{flex:1;min-width:0;container-type:inline-size}
#skill-cutin>img{width:clamp(52px,18cqw,76px);height:76px;margin-left:8px}
#skill-cutin>span{flex:none;padding-right:8px;font-size:26px}
#skill-cutin b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#skill-cutin strong.fit-skill-title{display:block;width:100%;font-size:clamp(10px,calc(190cqw / var(--skill-name-units)),20px);line-height:1.12;white-space:normal;overflow-wrap:anywhere;word-break:normal;letter-spacing:0;max-height:2.24em;overflow:hidden}
.arena .skill-indicator>div{flex:1;container-type:inline-size}
.arena .skill-indicator b.fit-skill-title{width:100%;font-size:clamp(7px,calc(180cqw / var(--skill-name-units)),10px);line-height:1.12;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;max-height:2.24em;letter-spacing:0}
.hero-skill-card>b,.hero-preview-skill>b,.hero-detail-modal h2{overflow-wrap:anywhere;min-width:0}
#skill-cutin small{font-size:8px;line-height:1.05}
#skill-cutin b{font-size:11px;line-height:1.1}
#skill-cutin strong.fit-skill-title{font-size:clamp(10px,calc(180cqw / var(--skill-name-units)),var(--cutin-name-max,20px));line-height:1.3;max-height:2.6em}
.arena .skill-indicator b.fit-skill-title{font-size:clamp(7px,calc(170cqw / var(--skill-name-units)),9px);line-height:1.3;max-height:2.6em}
.arena .skill-indicator small{font-size:8px;line-height:1.1}
@container game (max-width:660px){#skill-cutin>div{--cutin-name-max:17px}}
#skill-cutin strong.fit-skill-title,.arena .skill-indicator b.fit-skill-title{padding-bottom:1px;max-height:calc(2.6em + 1px)}

/* Original static sprites sit over a soft local shade above the skill panel. */
.hero-mini-companion{grid-column:1;grid-row:2;align-self:end;justify-self:start;position:relative;width:88px;height:88px;margin:0 0 4px 16px;pointer-events:none;z-index:1}
.hero-mini-companion:before{content:"";position:absolute;inset:-32px -46px -18px -40px;pointer-events:none;background:radial-gradient(ellipse at 48% 58%,#0b0b18e6 0%,#0b0b18b8 30%,#0b0b1866 52%,transparent 74%)}
.hero-mini-sprite{display:block;width:88px;height:88px;image-rendering:pixelated;filter:drop-shadow(1px 2px 0 #120d1be6);position:relative;z-index:1}
.hero-mini-sprite>img{display:block;width:100%;height:100%;object-fit:contain}
@container game (aspect-ratio > 1) and (max-height:480px){.hero-mini-companion{margin-left:8px;width:64px;height:64px}.hero-mini-sprite{width:64px;height:64px}}
/* Keep the complete bowstring safely above the missing L corner. */
:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.bow-art>img{transform:translate(-46%,-54%) scale(.9)}

:is(.bag-item,.battle-gear,.enemy-gear) .gear-art.bow-art.rotated>img{transform:translate(-46%,-46%) rotate(90deg) scale(.9)}