/* Keep permanent controls outside the playable image. */
.header-actions .icon-button{display:grid;place-items:center;width:40px;min-width:40px;min-height:36px;padding:0}
.control-icon{display:block;width:18px;height:18px;fill:currentColor;shape-rendering:crispEdges;pointer-events:none}
.header-actions .sound-off,#app[data-started=true] .header-actions .sound-off{width:24px;left:50%;top:50%;border-width:2px;transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none}
#sound:has(.sound-off:not(.hidden)) .sound-waves{display:none}
h1{font-size:clamp(40px,5.2vw,72px);letter-spacing:.01em}
h1 span{font-size:.5em;margin-left:14px;letter-spacing:.02em}
.playfield{position:relative}
.context-line{display:none}
.hud{position:static;inset:auto;display:flex;align-items:center;flex:1;min-width:0;gap:16px;pointer-events:auto}
.player-status,.hud-actions{border:0;box-shadow:none;background:none;padding:0;min-width:0}
.player-status>div{display:flex;align-items:center;gap:12px}
.player-status strong{font-size:14px;white-space:nowrap}
.hearts{margin:0;gap:4px}
.hearts span{width:14px;height:12px}
.hud-actions{margin-left:auto;gap:0}
.hud-actions button{min-height:36px;padding:4px 12px;font-size:14px}
.hud-actions button+button{border-left:1px solid #4b4e6b}
.hud-actions b{position:absolute;top:1px;right:1px}
.quick-potion kbd{font-size:10px}
.potion-stock{font-size:12px}
.boss-hud{position:static;flex:1;max-width:200px;min-width:70px;margin-left:auto;text-align:left}
.boss-hud>span{font-size:12px;white-space:nowrap}
.boss-hud>div{margin-top:3px;height:8px}
.boss-hud i{height:2px}
.area,.objective,.interact-hint,.toast{position:static;inset:auto;transform:none;max-width:none;width:auto;border:0;box-shadow:none;background:none;padding:0;margin:0;animation:none;text-align:left;font-size:14px;line-height:1.6}
.area>span:first-child{font-size:12px;color:var(--gold)}
.area>span:last-child{display:none}
.area{flex-shrink:0;max-width:24%;overflow:hidden;white-space:nowrap}
.objective,.interact-hint{gap:7px}
.objective{min-width:0}
#objective-text{min-width:0}
.interact-hint{white-space:normal;color:var(--ink)}
.interact-hint kbd{font-size:14px}
.toast{pointer-events:none;color:var(--gold)}
.context-line:has(.toast:not(.hidden))>.objective,
.context-line:has(.toast:not(.hidden))>.interact-hint,
.context-line:has(.interact-hint:not(.hidden))>.objective{display:none}

#app[data-started=true] .brand,#app[data-started=true] .edition{display:none}
#app[data-started=true] .masthead{gap:16px}
#app[data-started=true] .header-actions{margin-left:0}
#app[data-started=true] .game-footer{min-height:40px;gap:18px;align-items:center;padding:5px 2px}
#app[data-started=true] .context-line{display:flex;align-items:center;min-width:0;flex:1;min-height:28px}
#app[data-started=true] .footer-location,#app[data-started=true] .keyboard-guide,#app[data-started=true] .footer-version{display:none}
/* The current room stays in the frame instead of covering doors on entry. */
#app[data-started=false] .game-footer:has(.toast:not(.hidden)) .context-line{display:block}
#app:not([data-mode=explore]) .hud-actions{visibility:hidden}
#app:not([data-mode=explore]) .boss-hud{visibility:hidden}

/* Touch devices get a reserved control deck. Hiding it never moves the map. */
#app.has-touch[data-started=true] .touch-controls{position:relative;inset:auto;height:130px;display:block!important;z-index:4}
#app.has-touch[data-started=true] .touch-controls.hidden{visibility:hidden;pointer-events:none}
#app.has-touch[data-started=true] .joystick{left:18px;bottom:16px;width:88px;height:88px}
#app.has-touch[data-started=true] .joystick>span{width:34px;height:34px;left:24px;top:24px}
#app.has-touch[data-started=true] .touch-actions{right:18px;bottom:12px;grid-template-columns:48px 52px 60px;grid-template-rows:44px 60px;gap:5px}
#app.has-touch[data-started=true] .touch-actions button{width:48px;height:48px}
#app.has-touch[data-started=true] #touch-potion{width:44px;height:44px}
#app.has-touch[data-started=true] #touch-attack{width:52px;height:52px}
#app.has-touch[data-started=true] #touch-interact{width:60px;height:60px}
#app.has-touch[data-started=true] .stage{height:auto;aspect-ratio:8/5;max-height:calc(100svh - 254px)}

@media(max-width:850px){
 #app[data-started=true] .masthead{gap:8px}
 .hud{gap:10px}.player-status>div{gap:7px}.hud-actions button{padding:4px 8px}
 #app[data-started=true] #help{display:none}
}

@media(max-width:700px){
 #app[data-started=true] .stage{height:auto;aspect-ratio:8/5;max-height:calc(100svh - 106px)}
 #app[data-started=true] .masthead{height:48px;gap:6px}
 .hud{gap:5px}.player-status strong{display:none}.hearts{gap:3px}.hearts span{width:13px;height:11px}
 .hud-actions button{font-size:14px;min-height:40px;padding:4px 8px}.hud-actions #save{display:none}
 .quick-potion{gap:3px}.quick-potion kbd{display:none}
 #app[data-started=true] .header-actions{gap:5px}
 #app[data-started=true] .icon-button{min-height:40px;min-width:40px}
 #app[data-started=true] .sound-off{top:18px}
 #app[data-started=true] .game-footer{min-height:48px;gap:8px;align-items:flex-start;padding-top:8px}
 .area{max-width:26%;padding-top:2px}.area>span:first-child{font-size:10px}
 .objective,.interact-hint,.toast{font-size:12px;line-height:1.8}.interact-hint kbd{font-size:12px}
 .boss-hud{position:absolute;top:8px;left:calc(50% - 75px);width:150px;max-width:150px;min-height:20px;margin:0}
 /* On narrow screens the boss meter has its own strip, still outside the map. */
 #app[data-started=true]:has(.boss-hud:not(.hidden)) .masthead{padding-top:32px;height:80px;position:relative}
 #app[data-started=true]:has(.boss-hud:not(.hidden)) .stage{max-height:calc(100svh - 138px)}
 #app.has-touch[data-started=true] .stage{max-height:calc(100svh - 236px)}
 #app.has-touch[data-started=true]:has(.boss-hud:not(.hidden)) .stage{max-height:calc(100svh - 268px)}
}
@media(max-width:380px){
 .hud-actions button{padding:4px 6px}.hearts{gap:2px}
 #app[data-started=true] .icon-button{min-width:36px}
 #app.has-touch[data-started=true] .joystick{left:10px}
 #app.has-touch[data-started=true] .touch-actions{right:10px}
}
@media(max-height:570px) and (orientation:landscape){
 #app[data-started=true] .masthead{height:42px}
 #app[data-started=true] .stage{height:calc(100svh - 100px);max-height:none;aspect-ratio:auto}
 #app[data-started=true] .game-footer{height:48px;min-height:48px;padding:6px 2px;gap:14px}
 .objective,.interact-hint,.toast{font-size:12px;line-height:1.5}#app[data-started=true] .context-line{min-height:24px;max-height:36px;overflow-y:auto}
 #app.has-touch[data-started=true] .playfield{padding-left:108px;padding-right:132px}
 #app.has-touch[data-started=true] .stage{height:calc(100svh - 100px);max-height:none;aspect-ratio:auto}
 #app.has-touch[data-started=true] .touch-controls{position:absolute;inset:0;height:100%;pointer-events:none}
 #app.has-touch[data-started=true] .joystick{left:8px;bottom:calc(50% - 44px)}
 #app.has-touch[data-started=true] .touch-actions{right:7px;bottom:calc(50% - 54px);grid-template-columns:54px 60px;grid-template-rows:48px 60px;gap:6px}
 #app.has-touch[data-started=true] #touch-potion{grid-column:1;grid-row:1}
 #app.has-touch[data-started=true] #touch-dodge{grid-column:2;grid-row:1}
 #app.has-touch[data-started=true] #touch-attack{grid-column:1;grid-row:2}
 #app.has-touch[data-started=true] #touch-interact{grid-column:2;grid-row:2}
}

@media(max-width:700px) and (max-height:570px) and (orientation:landscape){
 #app[data-started=true]:has(.boss-hud:not(.hidden)) .masthead{height:74px}
 #app[data-started=true]:has(.boss-hud:not(.hidden)) .stage,
 #app.has-touch[data-started=true]:has(.boss-hud:not(.hidden)) .stage{height:calc(100svh - 132px);max-height:none}
}

/* Paused reading uses the available portrait screen, beyond the small map. */
@media(max-width:700px) and (orientation:portrait){
 .modal-backdrop{position:fixed;inset:48px 8px 8px;padding:12px;z-index:20}
 .modal-panel{max-height:100%}
 .event-scene{position:fixed;inset:48px 8px 8px;border:3px double var(--edge)}
 .event-scene img{object-position:82% center}
 .dialogue{position:fixed;left:20px;right:20px;bottom:24px;min-height:160px;max-height:45svh;z-index:8}
 #app:is([data-mode=dialogue],[data-mode=modal]) .game-footer{visibility:hidden}
}