/* One viewport: the chronicle and long content scroll within their own panels. */
html,body{height:100%;overflow:hidden}
body{height:100dvh;display:grid;grid-template-rows:60px minmax(0,1fr) 20px}
.topbar{height:60px;border-width:8px;padding:0 18px;min-width:0}
.brand{font-size:17px;gap:10px}.brand small{font-size:8px;margin-top:3px}
.crest{width:30px;height:36px;flex-shrink:0;letter-spacing:0;font:26px/1 Georgia,serif;display:flex;align-items:center;justify-content:center;padding:0}
.scene-toggle-bar{position:absolute;top:13px;left:50%;transform:translateX(-50%);padding:0;margin:0;z-index:10}
.scene-toggle-bar>span{display:none}.scene-toggle-bar button{padding:2px 9px;font-size:12px;white-space:nowrap}
body>.game,body>.game:has(#character-preview){width:100%;height:100%;min-height:0;min-width:0;max-width:1920px;display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:minmax(0,65fr) minmax(0,35fr);gap:6px;padding:6px}
body>.game.console-only:has(#character-preview){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body>.game .world,body>.game .world:has(.illustrated-scene){height:auto;min-height:0;grid-row:1;grid-column:1}
body>.game .journal,body>.game.console-only .journal{height:auto;min-height:0;grid-column:1/-1;grid-row:2;border-width:10px;overflow:hidden}
body>.game.console-only .journal{grid-row:1}
.journal-heading{height:29px;padding:0 7px}.journal-heading h2{font-size:18px}
#log{margin:3px 0;padding:5px 9px;font-size:13px;line-height:1.35}
#command-form{flex-shrink:0;padding:1px 4px 1px 7px}#command-form input{padding:3px 0}#command-form button{padding:1px 7px}
.quick-actions{padding:4px 2px 0;gap:4px;flex-wrap:nowrap;overflow-x:auto}.quick-actions button{white-space:nowrap;font-size:12px;padding:1px 5px;flex-shrink:0}.quick-actions>span{display:none}
body>footer{height:20px;font-size:9px;padding:0 12px}
body>.game .resource-sidebar{min-height:0;grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.resource-sidebar>.character{display:flex;flex-direction:column;flex:0 0 40%;min-height:0!important;margin:0;padding:8px;border-width:10px}
.resource-sidebar .character-name{flex-shrink:0;margin:5px 0 0;gap:8px}.character-name h2{font-size:21px}.character-name .portrait{width:36px;height:40px;font-size:25px}.character-name>div{min-width:0}#player-level{line-height:1.4;font-size:11px}
#character-preview{height:auto;min-height:0;flex:1;margin-top:7px}#character-preview .character-portrait{max-height:100%;width:100%;object-fit:contain;border:0;box-shadow:none}
.resource-sidebar>.orb-dock{flex:1;min-height:0!important;margin:0;border-width:8px;display:flex;flex-direction:column;gap:10px;padding:8px;align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden}
.resource-sidebar .resource-orb{--holder-size:160px;height:182px}.resource-orb .orb-value{font-size:13px}.resource-orb .orb-label{font-size:12px;line-height:18px;left:0;right:0}.resource-orb .orb-label small{display:none!important}
.world:has(.illustrated-scene) .room-heading{top:9px;left:14px;max-width:calc(100% - 130px)}.room-heading h1{font-size:26px;margin:4px 0}.world:has(.illustrated-scene) #room-caption{max-height:48px;font-size:12px;margin:4px 0;padding:3px 5px}
.room-conditions{top:110px;left:14px;right:14px;gap:3px}.room-condition{font-size:10px;padding:3px 5px}
.room-combatants{gap:clamp(32px,8vw,120px);padding:4px 10px;max-height:190px}.room-combatants .npc-card{width:116px;flex-basis:116px}.room-combatants .npc-portrait,.room-combatants .npc-portrait-slot{height:72px}.room-combatants .npc-card-name{font-size:14px;padding:4px 5px 1px}.room-combatants .npc-card-role{padding:2px 5px;font-size:10px}.room-combatants .combat-status{padding:1px 5px 3px}
.illustrated-scene>.illustrated-exits{width:min(560px,100%);height:150px;min-height:150px;grid-template-rows:repeat(3,40px);gap:6px 8px;padding:9px 12px;margin:0;align-content:center}.compass-slot>.illustrated-exit{padding:3px 8px;border-width:6px;font-size:14px}
/* Root-mounted so the room's stacking context cannot cover the action window. */
body>.learned-action-bar,body>.learned-action-bar.window-manipulating{position:fixed;z-index:10000;top:auto;left:auto;right:14px;bottom:48px;width:min(420px,calc(100vw - 28px));height:min(300px,40dvh);max-height:calc(100dvh - 80px)}
body>.learned-action-bar .learned-action-list{grid-template-columns:minmax(0,1fr)}
body:has(.game.console-only)>.learned-action-bar{display:none}
@media(max-height:800px){.room-conditions{top:94px}.world:has(.illustrated-scene) #room-caption{max-height:32px}.room-heading h1{font-size:23px}.room-combatants .npc-portrait,.room-combatants .npc-portrait-slot{height:58px}.room-combatants{max-height:170px}}
@media(max-width:760px){.brand>span:last-child{display:none}.connection{gap:4px}.connection button{font-size:11px;padding:1px 5px}.connection>span{display:none}body>.game,body>.game:has(#character-preview){grid-template-columns:minmax(0,1fr) 180px}.resource-sidebar .resource-orb{--holder-size:78px;height:100px}.resource-orb .orb-value{font-size:8px}.character-name .portrait{display:none}.room-combatants{gap:24px}.room-combatants .npc-card{width:100px;flex-basis:100px}body>.learned-action-bar{left:8px}}
@media(max-width:520px){body>.game,body>.game:has(#character-preview){grid-template-columns:minmax(0,1fr) 126px;grid-template-rows:minmax(0,62fr) minmax(0,38fr)}.resource-sidebar .resource-orb{--holder-size:92px;height:114px}.resource-sidebar .resource-orb .orb-value{font-size:9px}.resource-sidebar .orb-label{font-size:7px}.resource-sidebar>.character{padding:4px;border-width:7px}.character-name h2{font-size:17px}#player-level{font-size:10px}.room-combatants{gap:12px}.room-combatants>.player-scene-card{flex-basis:80px;width:80px}.world:has(.illustrated-scene) .room-heading{max-width:calc(100% - 96px)}.room-heading h1{font-size:20px}.journal-heading>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.room-combatants .npc-card{width:94px;flex-basis:94px}.scene-toggle-bar{left:40%}}

/* Description and room attributes share normal flow, including after text wraps. */
.world:has(.illustrated-scene) #room-caption{height:auto;max-height:none;overflow:visible}
.world:has(.illustrated-scene) .room-heading>.room-conditions{position:static;margin:16px 0 0;padding:0;width:auto}
.room-heading>.room-conditions:empty{display:none}