/* Phones and tablets: keep the world available, with one drawer at a time. */
#compact-dock,#compact-dismiss,#compact-view,#compact-stats,.compact-heading,.compact-note,#compact-bank-satchel{display:none}
body.compact-ui{--header-height:42px;--compact-bar:calc(54px + env(safe-area-inset-bottom,0px));height:var(--compact-height,100dvh);position:relative;top:var(--compact-offset,0px);overscroll-behavior:none}
.compact-ui>header{height:var(--header-height);padding:0 max(12px,env(safe-area-inset-left));width:100%;gap:10px}
.compact-ui>header .brand{font:13px Georgia,serif;letter-spacing:1px;gap:7px}
.compact-ui>header .brand small{display:none}
.compact-ui>header .crest{font-size:22px}
.compact-ui>header .world-status{display:flex;font-size:8px;max-width:43%;gap:2px}
.compact-ui>header #save-status{display:block;font-size:9px;max-height:30px;overflow:auto}
.compact-ui>main{height:calc(100% - var(--header-height) - var(--compact-bar));display:block;position:relative}
.compact-ui main>.viewport{width:100%;height:100%}
.compact-ui .location{left:max(12px,env(safe-area-inset-left));top:10px;max-width:calc(100% - 24px)}
.compact-ui .location>span{font-size:8px;letter-spacing:1.5px}
.compact-ui .location h1{font-size:clamp(18px,3vw,28px);line-height:1.2;margin:3px 0;overflow-wrap:anywhere}
.compact-ui .location p{display:none}
.compact-ui #compact-stats{display:block;position:absolute;top:76px;left:12px;pointer-events:none;font:11px Arial,sans-serif;background:#14231dd9;color:#e7e7cd;padding:6px 9px;border-radius:3px;z-index:2}
.compact-ui #compact-dock{position:absolute;bottom:0;left:0;right:0;height:var(--compact-bar);display:flex;padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:4px;background:#15241f;border-top:1px solid #788263;z-index:90}
.compact-ui #compact-dock button{flex:1;min-width:0;min-height:44px;background:#233a2c;border:1px solid #53684c;border-radius:4px;font:12px Georgia,serif;color:#e9d6a6;padding:4px}
.compact-ui #compact-dock button[aria-expanded=true]{background:#50613d;border-color:#d8c187}
.compact-ui #compact-dismiss{position:absolute;inset:var(--header-height) 0 var(--compact-bar);z-index:59;border:0;background:#08130c44;width:100%;padding:0}
.compact-ui[data-compact-panel]:not([data-compact-panel=""]) #compact-dismiss{display:block}
.compact-ui main>aside{display:none;position:fixed;top:calc(var(--compact-offset,0px) + var(--header-height));bottom:auto;height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar));right:env(safe-area-inset-right,0px);width:min(390px,100%);margin:0;z-index:60;zoom:1!important;overflow:auto;overscroll-behavior:contain;box-shadow:-10px 0 35px #0006}
.compact-ui[data-compact-panel=menu] main>aside{display:flex}
.compact-ui .compact-heading{display:flex;position:sticky;top:0;padding:8px 12px;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;z-index:4;background:#1b2d23;border-bottom:1px solid #5c6d4c;flex-shrink:0}
.compact-ui .compact-heading>strong{font:16px Georgia;color:#e3c88c}
.compact-ui .compact-heading button,.compact-ui #compact-bank-satchel{font:12px Georgia;background:#314933;border:1px solid #8b9b6a;padding:8px;min-height:44px}
.compact-ui #compact-bank-back{width:100%}
.compact-ui main>aside>.map-panel{display:none}
.compact-ui main>aside>nav{position:static;background:#182920;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-shrink:0}
.compact-ui main>aside>nav button{width:auto;min-height:44px;padding:10px 4px;text-align:center;font-size:13px}
.compact-ui #pack{flex:1 0 auto;min-height:0;padding:12px;gap:8px}
.compact-ui .inventory-space{container-type:normal;display:block;min-height:0;flex:none}
.compact-ui #inventory{width:100%;height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;gap:6px}
.compact-ui #inventory .slot{height:auto;aspect-ratio:1;min-height:44px}
.compact-ui #inventory .slot svg{width:46px;height:46px;max-width:85%;max-height:85%}
.compact-ui .pack-hint,.compact-ui .pack-toolbar>span{display:none}
.compact-ui .pack-toolbar button{min-width:44px;min-height:44px;font-size:12px;padding:8px}
.compact-ui .compact-note{display:block;margin:0;font:12px/1.5 Arial;color:#bac8ad}
.compact-ui .aside-bottom{display:flex;padding:12px;gap:10px}
.compact-ui .aside-bottom .utility-actions button,.compact-ui .aside-bottom .settings-actions button,.compact-ui .aside-bottom .session-actions button{min-height:44px;font-size:12px}
.compact-ui .session-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.compact-ui #skills{min-height:400px;flex:1 0 auto;overflow:visible}
.compact-ui #skill-groups{overflow:visible}
.compact-ui #vitals-toggle{display:none}
.compact-ui #vitals{display:none!important}
.compact-ui[data-compact-panel=survival] #vitals{display:block!important;position:fixed;left:12px;top:calc(var(--compact-offset,0px) + var(--header-height) + 8px);width:min(330px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar) - 16px);zoom:1;padding:16px;background:#17291ff7;z-index:60;overflow:auto}
.compact-ui .vital label,.compact-ui .need-row label{font-size:12px}
.compact-ui #vitals button{min-height:44px;font-size:12px;padding:8px!important}
.compact-ui #world-log{display:none}
.compact-ui[data-compact-panel=chat] #world-log{display:flex;flex-direction:column;position:fixed;z-index:60;bottom:auto;top:calc(var(--compact-offset,0px) + var(--header-height));left:0;right:0;width:100%;height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar));padding:12px;gap:8px}
.compact-ui #chat-resize,.compact-ui #world-log .feed-heading>span{display:none}
.compact-ui #world-log .feed-heading{display:block;max-width:none;min-width:0;overflow:visible;padding:0}
.compact-ui #world-log .world-links{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.compact-ui #world-log .world-links .support-link{min-height:44px;font-size:12px}
.compact-ui #world-log .conversation{width:100%;height:auto}
.compact-ui #chat-form{flex-wrap:wrap;align-items:center}
.compact-ui #chat-input{flex:1 1 150px;min-width:0}
.compact-ui #chat-speaker{max-width:100%;flex-basis:100%;overflow-wrap:anywhere}
.compact-ui #chat-form :is(input,select,button){min-height:44px}
/* Native keyboards shrink the visual viewport without changing media-query
   height. Keep the composer above the dock; links return when space returns. */
.compact-ui.compact-short-viewport[data-compact-panel=chat] #world-log{padding:8px;gap:6px;overflow-y:auto;overscroll-behavior:contain}
.compact-ui.compact-short-viewport #world-log .world-links{display:none}
.compact-ui.compact-short-viewport #world-log .conversation{flex:1 1 0;min-height:0;height:auto}
.compact-ui.compact-short-viewport #world-log #feed{flex:1 1 auto;min-height:0}
.compact-ui input:not([type=range]):not([type=checkbox]),.compact-ui select,.compact-ui textarea{font-size:16px!important;max-width:100%}
.compact-ui #compact-view{position:absolute;right:10px;bottom:calc(var(--compact-bar) + 8px);width:min(340px,calc(100% - 20px));max-height:calc(100% - var(--compact-bar) - var(--header-height) - 16px);overflow:auto;padding:16px;background:#182b21;border:1px solid #86966b;z-index:60}
.compact-ui[data-compact-panel=camera] #compact-view{display:block}
.compact-ui #compact-view>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compact-ui #compact-view button{min-height:44px;background:#314632;border:1px solid #7b8e61;padding:8px}
.compact-ui #compact-view>button{width:100%;margin-top:12px}
.compact-ui #compact-view p{font:12px/1.6 Arial;color:#bfceb5}
.compact-ui #bottom-hud{bottom:8px;max-width:calc(100% - 16px);gap:5px}
.compact-ui #bottom-hud>.controls{display:none}
.compact-ui #hotbar{overflow-x:auto;overscroll-behavior:contain;max-width:100%;padding:3px;gap:3px}
.compact-ui #hotbar button{flex:0 0 44px;width:44px;height:44px;min-height:44px}
.compact-ui .magic-ready{font-size:12px;gap:6px}
.compact-ui .magic-ready>span{flex-basis:100%;text-align:center}
.compact-ui .magic-ready button,.compact-ui #combat-resume,.compact-ui #combat-next,.compact-ui #action button{min-width:44px;min-height:44px;font-size:12px;padding:8px}
.compact-ui #combat-panel{top:112px;right:12px;width:176px;padding:9px}
.compact-ui #combat-panel{max-height:max(0px,calc(100% - 128px - var(--bottom-hud-height,0px)))}
.compact-ui #combat-panel h2{font-size:15px;margin:4px 0}
.compact-ui #combat-tier{font-size:10px;margin:5px 0}
.compact-ui #combat-attack-warning{font-size:12px;line-height:1.35;padding:6px;margin:6px 0}
.compact-ui #combat-panel small,.compact-ui .combat-eyebrow{display:none}
.compact-ui .quest-tracker{top:112px;right:12px;width:200px;max-width:46%;max-height:25%;font-size:11px;padding:7px}
.compact-ui .quest-tracker small{display:none}
.compact-ui .viewport:has(#combat-panel:not([hidden])) .quest-tracker{top:auto;bottom:70px;max-height:20%}
.compact-ui .player-party-panel{max-width:48%;max-height:23%;top:112px;left:12px;right:auto;font-size:11px}
.compact-ui .viewport:has(.player-party-panel:not([hidden])) .quest-tracker{top:112px;bottom:auto;max-height:23%}
/* Keep popup sizes independent of desktop scaling and the now-hidden sidebar. */
.compact-ui .interface-panel{zoom:1!important;max-width:calc(100vw - 20px)!important}
.compact-ui dialog.interface-panel{max-height:calc(var(--compact-height,100dvh) - 20px)!important;padding:14px;overflow:auto}
.compact-ui .viewport>.interface-panel:not(.player-party-panel):not(#combat-panel):not(#manor-assignment-panel),.compact-ui main>#equipment-panel,.compact-ui main>#skill-panel,.compact-ui #backpack-panel,.compact-ui #aid-bag-panel{position:fixed;left:50%;right:auto;top:calc(var(--compact-offset,0px) + var(--header-height) + 8px);bottom:auto;transform:translateX(-50%);width:min(600px,calc(100% - 20px));max-width:calc(100% - 20px)!important;max-height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar) - 16px)!important;overflow:auto;padding:14px;z-index:55}
.compact-ui main>#skill-panel{z-index:70}
.compact-ui .interface-panel button:not(.slot){min-height:44px}
.compact-ui .interface-heading>button{min-width:44px;min-height:44px}
.compact-ui .catalog-body{display:flex;flex-direction:column;overflow:auto;min-height:0}
.compact-ui .catalog-nav{max-height:125px;overflow:auto;flex-shrink:0}
.compact-ui .catalog-main{min-height:180px;overflow:visible}
.compact-ui #bank-panel{display:flex;flex-direction:column}
.compact-ui #bank-grid{grid-template-columns:repeat(5,minmax(0,1fr));flex:1 0 auto;height:240px;max-height:40dvh;overflow-y:auto}
.compact-ui #bank-grid .slot{min-height:44px}
.compact-ui #compact-bank-satchel{display:block;margin:8px 0;flex-shrink:0}
.compact-ui .bank-instructions{display:none}
.compact-ui .bank-summary{flex-wrap:wrap;gap:6px}
.compact-ui #bank-panel>.compact-note{margin:8px 0}
.compact-ui #context,.compact-ui #item-context,.compact-ui #bank-context{position:fixed;left:50%!important;right:auto;top:calc(var(--compact-offset,0px) + var(--compact-height,100dvh) - var(--compact-bar) - 8px)!important;bottom:auto;transform:translate(-50%,-100%);width:min(390px,calc(100% - max(10px,env(safe-area-inset-left,0px)) - max(10px,env(safe-area-inset-right,0px))));min-width:0;max-height:calc(var(--compact-height,100dvh) - var(--header-height) - var(--compact-bar) - 24px);overflow:auto;overscroll-behavior:contain;z-index:100;border-radius:10px}
.compact-ui #context button,.compact-ui #item-context button,.compact-ui #bank-context button{min-height:44px;padding:12px;font-size:14px}
.item-options-caption,.item-options-close{display:none!important}
.compact-ui :is(#item-context,#bank-context) .item-options-heading{position:sticky;top:-7px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-7px -7px 5px;padding:9px 10px;background:#17251ffc;border-bottom:1px solid #7d7455}
.compact-ui .item-options-heading>div{min-width:0}
.compact-ui :is(#item-context,#bank-context) .item-options-heading strong{padding:1px 0;border:0;font:600 15px/1.35 system-ui,sans-serif;overflow-wrap:anywhere}
.compact-ui .item-options-caption{display:block!important;color:#b9c7b0;font:11px/1.4 system-ui,sans-serif}
.compact-ui :is(#item-context,#bank-context) .item-options-close{display:block!important;flex:none;width:auto;min-width:62px;min-height:44px;padding:8px 12px;border:1px solid #9b9873;border-radius:5px;text-align:center;background:#2b3c2d}
.compact-ui #dialog{bottom:12px;max-height:calc(100% - 24px);z-index:55}
.compact-ui #item-use-bar{top:auto;bottom:65px;left:12px;right:12px;width:auto;transform:none;max-width:calc(100% - 24px);flex-wrap:wrap}
@media(any-pointer:coarse){#inventory .slot,#bank-grid .slot,.equipment-slot{touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}#inventory .slot *,#bank-grid .slot *, .equipment-slot *{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}button{-webkit-touch-callout:none}}
@media(max-width:480px){.compact-ui>header .world-status{display:flex}.compact-ui>header .world-status>b,.compact-ui>header .world-status>i{display:none}.compact-ui>header .brand{font-size:11px;letter-spacing:.4px}.compact-ui>header .crest{font-size:18px}.compact-ui .quest-tracker{width:180px}.compact-ui #options-tabs{flex-wrap:wrap}.compact-ui #options-tabs button{flex:1 1 28%}.compact-ui #chat-form .chat-compose{flex:1 0 100%;order:-1;flex-wrap:wrap;min-width:0}.compact-ui #chat-self-identity{max-width:100%;flex-basis:100%;white-space:normal}.compact-ui #chat-form #chat-input{flex-basis:100%;width:100%}.compact-ui #chat-send{margin-left:auto}}
@media(max-height:500px){body.compact-ui{--header-height:32px}.compact-ui #compact-stats{top:52px}.compact-ui .location h1{font-size:18px}.compact-ui .location>span{display:none}.compact-ui .quest-tracker,.compact-ui .viewport:has(.player-party-panel:not([hidden])) .quest-tracker{top:85px;max-height:36%}.compact-ui #combat-panel,.compact-ui .player-party-panel{top:85px}.compact-ui #hotbar{max-width:55vw}.compact-ui #bottom-hud{left:50%}}
/* Short landscape screens put the combat controls beside the opponent panel. */
@media(max-height:500px) and (min-width:600px){
 .compact-ui #bottom-hud{left:max(12px,env(safe-area-inset-left,0px));transform:none;max-width:calc(100% - 220px)}
 .compact-ui #hotbar{max-width:100%}
 .compact-ui .magic-ready{flex-wrap:nowrap!important}
 .compact-ui .magic-ready>span{flex-basis:auto;text-align:left;overflow-wrap:anywhere}
 /* Anchor short-screen combat between the header and bottom controls. Its
    contents can grow when retreat reveals Attack, so scroll inside the panel. */
 .compact-ui #combat-panel{bottom:8px;height:auto;max-height:none;overflow-y:auto}
}