/* The outer viewport owns safe areas; game content only sees 390 × 780. */
html, body { min-width: 0; margin: 0; padding: 0; }
body {
  background: #100d19;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(#100d19c9, #100d19e8),
    url('../assets/ui/alchemy-workshop-v1.png') center / cover;
}
#game-viewport {
  position: fixed;
  inset: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}
#game-frame {
  --game-width: 390px; --game-height: 780px; --game-scale: 1;
  position: absolute; left: 50%; top: 50%;
  width: var(--game-width); height: var(--game-height);
  transform: translate(-50%, -50%) scale(var(--game-scale));
  container: game / size;
  visibility: hidden;
  box-shadow: 0 0 0 1px #81684c, 0 0 70px #000b;
}
#game-frame.fitted { visibility: visible; }
#app { width: 100%; height: 100%; margin: 0; }
.mobile-nav { padding-bottom: 3px; }
#toast { bottom: 79px; }
.portrait-hint {
  display: none; position: absolute; left: 12px; top: 50%;
  width: max(0px, calc((100% - var(--rendered-width)) / 2 - 24px));
  transform: translateY(-50%); color: #c9bea8; text-align: center;
  font: 12px/1.8 system-ui, sans-serif; pointer-events: none;
}
@media (orientation: landscape) and (max-height: 500px) {
  .portrait-hint { display: block; }
}

/* All menus stay inside the portrait frame; long text remains reachable. */
.modal-scrim { position: absolute; inset: 0; }
.modal { max-height: calc(var(--game-height) - 24px); overflow-y: auto; }
.modal.unified-result { overflow-y: auto; }
.hero-vitals { align-self: start; margin-top: 24px; }
.hero-showcase { grid-template-rows: auto minmax(0, 1fr) auto; }
.battle-stage { container-type: size; }
.arena .fighter {
  width: min(128px, calc(100cqh - 28px));
  height: min(128px, calc(100cqh - 28px)); bottom: 24px;
}
.arena .sprite-body { width: 100%; height: 100%; }
.cauldron-panel { --preview-height: 100px; }
.recipe-preview { height: auto; min-height: 0; }
.recipe-preview > div { min-width: 0; }
.recipe-preview b { white-space: normal; overflow-wrap: anywhere; }
.recipe-preview small { display: block; white-space: normal; line-height: 1.5; }

.recipe-preview b .rarity { float: none; display: inline-block; margin: 0 2px; }

/* Desktop uses the spare width for legible type instead of a narrow phone strip. */
#game-frame.desktop{font-size:16px}
.desktop button,.desktop .primary,.desktop .secondary,.desktop .small{font-size:16px}
.desktop .workspace-tabs button>small{font-size:15px}
.desktop .workspace-tabs button>.nav-art{width:52px;height:52px}
.desktop .arena .health b,.desktop .arena .fighter>span,.desktop .arena .enemy-info{font-size:15px}
.desktop .arena .health>div>span{font-size:20px}
.desktop .arena .health>small,.desktop .battle-params,.desktop .conditions>span{font-size:13px}
.desktop .arena .skill-indicator b{font-size:17px}
.desktop .arena .skill-indicator small,.desktop .enemy-gear-access,.desktop .battle-inventory .capacity{font-size:13px}
.desktop .battle-inventory .section-heading h2,.desktop .battle-inventory h2{font-size:17px}
.desktop .arena .battle-controls>.primary{font-size:18px}
.desktop .arena .fighter{width:min(175px,calc(100cqh - 30px));height:min(175px,calc(100cqh - 30px))}
.desktop .pack-panel h2,.desktop .cauldron-panel h2{font-size:22px}
.desktop .pack-layout>div{max-width:none}
.desktop .pack-panel .detail b{font-size:18px}
.desktop .pack-panel .detail p,.desktop .pack-panel .detail small,.desktop .material-heading,.desktop .inline-storage .stash-item span{font-size:13px}
.desktop .item-cd,.desktop .item-level,.desktop .material>span,.desktop .material>b,.desktop .pot-count{font-size:12px}
.desktop .material>img{width:38px;height:38px}
.desktop .recipe-preview b{font-size:17px}
.desktop .recipe-preview small,.desktop .craft-buttons button,.desktop .cauldron-panel .section-heading button{font-size:14px}
.desktop .hero-identity h2{font-size:32px}
.desktop .hero-identity .eyebrow,.desktop .hero-dossier .eyebrow,.desktop .hero-vitals small{font-size:12px}
.desktop .hero-dossier h3{font-size:23px}
.desktop .hero-dossier p,.desktop .hero-vitals em,.desktop .hero-vitals span,.desktop .hero-blessings{font-size:14px}
.desktop .home-card{max-height:none;padding:28px;gap:18px}
.desktop .home-save span,.desktop .home-save small{font-size:15px}
.desktop .home-best{font-size:27px}
.desktop .modal{max-width:580px;font-size:15px}
.desktop .modal p,.desktop .modal small,.desktop .recipe-row small,.desktop .boon-option>small{font-size:14px}
.desktop .modal h2{font-size:25px}
.desktop .modal .eyebrow,.desktop .list-pager span{font-size:12px}
.desktop .recipe-row b,.desktop .boon-option>b{font-size:17px}
.desktop #toast{font-size:15px}
.desktop .floor-route li{font-size:11px}
.desktop .floor-route i{width:23px;height:23px;font-size:12px}
.desktop .floor-route li:before{top:12px}
.desktop .strip-lives{font-size:16px}
.desktop .battle-pack-heading{font-size:16px}
.desktop .battle-pack-heading small,.desktop .storage-heading{font-size:13px}
.desktop .hero-vitals{margin-top:8px;gap:4px;padding-block:4px}
.desktop .vital{gap:1px;padding-bottom:4px;line-height:1.15}
.desktop .vital strong{font-size:30px}
.desktop .hero-skill-card>b{font-size:20px}
.desktop .hero-skill-card .skill-summary{font-size:13px}
.desktop .inline-storage .stash-item,.desktop .inline-storage .stash-empty{flex-basis:88px}
.desktop .inline-storage .stash-item small{font-size:10px}
/* Reserve a separate row for battle resources, including two-line skill names. */
.desktop .arena .combat-bottom{height:auto;min-height:96px;grid-template-rows:auto auto;row-gap:8px;padding-block:8px;align-items:center}
.desktop .arena .skill-indicator{grid-column:1;grid-row:1;align-self:start}
.desktop .arena .combat-log{grid-column:2;grid-row:1}
.desktop .arena .build-meter{grid-column:1/-1;grid-row:2;position:static;align-self:start;line-height:18px;min-height:18px;margin:0;font-size:11px}
.desktop .arena .skill-indicator b.fit-skill-title{font-size:17px;line-height:1.3}