/* The frame fits the visible screen, with internal scrolling as a fallback
   for very small windows, enlarged text and changing mobile browser chrome. */
#dungeon-room,#map-size-menu{
 box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px);
 max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 margin:auto;overflow:auto;overscroll-behavior:contain;
}
#dungeon-room{width:min(880px,calc(100vw - 24px));padding:clamp(8px,2vw,18px);--dungeon-scene-height:clamp(96px,calc(100dvh - 420px),432px)}
#dungeon-room[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "vitals" "scene" "controls";gap:8px}
#dungeon-room .dungeon-heading{grid-area:heading;min-width:0;gap:8px;align-items:center;align-self:start}
#dungeon-room .dungeon-heading>div{min-width:0}
#dungeon-room .menu-eyebrow{font-size:10px;line-height:1.3;margin:0 0 4px;letter-spacing:1px}
#dungeon-room #dungeon-title{font-size:clamp(16px,2.5vw,20px);line-height:1.2;margin:0;overflow-wrap:anywhere}
#dungeon-room #dungeon-progress{font-size:12px;line-height:1.3;flex:0 0 auto}
#dungeon-room #dungeon-vitals{grid-area:vitals;min-width:0;font-size:13px;line-height:1.3;padding:0;gap:4px 12px;align-self:start}
#dungeon-room .dungeon-vital{min-width:0}
#dungeon-room .dungeon-vital label{gap:4px}
#dungeon-room .dungeon-vital progress{height:10px}
#dungeon-room #dungeon-canvas-wrap{grid-area:scene;float:none;margin:0;justify-self:center;align-self:start;width:fit-content;max-width:100%;min-width:0;overflow:hidden}
#dungeon-room #dungeon-canvas-wrap canvas{width:auto;height:auto;max-width:100%;max-height:var(--dungeon-scene-height);aspect-ratio:16/9;object-fit:contain}
#dungeon-room .dungeon-controls{grid-area:controls;min-width:0;display:grid;gap:8px;align-content:start}
#dungeon-room #dungeon-message{font-size:13px;line-height:1.35;min-height:0;margin:0;overflow-wrap:anywhere}
#dungeon-room .dungeon-skills{margin:0 auto;gap:6px}
#dungeon-room .dungeon-skills button{margin:0;min-height:44px}
#dungeon-room .dungeon-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#dungeon-room .dungeon-actions button{width:100%;min-width:0;margin:0;min-height:44px;padding:6px;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
#dungeon-room #dungeon-exit-arrow{margin:0;min-height:0}
@media(max-width:379px){
 #dungeon-room{--dungeon-scene-height:clamp(96px,calc(100dvh - 450px),300px)}
 #dungeon-room .dungeon-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:620px) and (max-height:700px){
 #dungeon-room{width:min(960px,calc(100vw - 24px));--dungeon-scene-height:clamp(80px,calc(100dvh - 190px),350px)}
 #dungeon-room[open]{grid-template-columns:minmax(0,1fr) minmax(190px,.62fr);grid-template-areas:"heading controls" "vitals controls" "scene controls";grid-template-rows:auto auto minmax(0,1fr);column-gap:14px;align-items:start}
 #dungeon-room .dungeon-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 #dungeon-room .dungeon-controls{align-self:start}
}

#map-size-menu{width:min(620px,calc(100vw - 24px));padding:clamp(10px,2vw,24px);text-align:center}
#map-size-menu[open]{display:grid;gap:10px}
#map-size-menu h2{margin:0;font-size:clamp(22px,4vw,28px);line-height:1.2}
#map-size-menu>p{margin:0;font-size:14px;line-height:1.35}
#map-size-menu>.menu-eyebrow{font-size:11px;letter-spacing:1px}
#map-size-menu .map-size-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:6px;margin:0;min-width:0}
#map-size-menu .map-size-choices button{margin:0;min-width:0;min-height:76px;padding:10px 6px;line-height:1.2}
#map-size-menu .map-size-choices strong{font-size:17px;line-height:1.2}
#map-size-menu .map-size-choices span{font-size:12px;line-height:1.3;margin-top:6px;overflow-wrap:anywhere}
#map-size-menu .map-size-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#map-size-menu .map-size-actions button{margin:0;min-width:0;min-height:44px;padding:8px;font-size:14px;line-height:1.3}
@media(min-width:620px) and (max-height:500px){
 #map-size-menu{width:min(780px,calc(100vw - 24px));padding:10px}
 #map-size-menu[open]{gap:8px}
 #map-size-menu .map-size-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
 #map-size-menu .map-size-choices button{min-height:68px;padding:8px 4px}
}