/* All game panels use the canvas's 960 x 640 coordinate space. */
#game-ui{position:absolute;width:960px;height:640px;transform-origin:0 0;pointer-events:none;z-index:30;--panel-top:0px;--panel-height:640px}
#game-ui>dialog,#game-ui>#overlay{pointer-events:auto}
#game-ui{--mobile-left:12px;--mobile-right:12px;--mobile-top:8px;--mobile-bottom:12px}
#game-ui>.mobile-menus,#game-ui>.mobile-map,#game-ui>.mobile-loot{pointer-events:auto}
html.game-ui-ready #game-ui>.mobile-map,html.game-ui-ready #game-ui>.mobile-player{position:absolute;padding:0;min-height:0;border:0;background:transparent;box-shadow:none;pointer-events:auto;z-index:4;touch-action:manipulation}
html.game-ui-ready #game-ui>.mobile-map{left:766px;top:14px;width:180px;height:186px;right:auto}
html.game-ui-ready #game-ui>.mobile-player{left:12px;top:11px;width:230px;height:87px}
html.game-ui-ready #game-ui>.mobile-map:focus-visible,html.game-ui-ready #game-ui>.mobile-player:focus-visible{outline:2px solid #efd2a4}
html.game-ui-ready #game-ui>.mobile-menus{right:auto;left:50%;transform:translateX(-50%);top:12px}
html.game-ui-ready #game-ui .quest-tracker{font-size:12px;display:block}
html.game-ui-ready #game-ui .quest-tracker[hidden]{display:none}
html.game-ui-ready body #game-ui>#overlay{position:absolute!important;inset:0!important;box-sizing:border-box;width:960px;height:640px;padding:16px;overflow:hidden}
#game-ui #overlay .dialog{position:relative;box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto}
html.game-ui-ready body dialog:modal:not(.mobile-rotate):not(.mobile-layout-editor):not(.loading-panel){position:fixed!important;inset:auto!important;left:var(--game-ui-center-x)!important;top:var(--game-ui-center-y)!important;margin:0!important;width:920px!important;max-width:920px!important;height:auto!important;max-height:608px!important;box-sizing:border-box;transform:translate(-50%,-50%) scale(var(--game-ui-scale,1));transform-origin:center;overflow:auto}
html.game-ui-ready body .game-ui-floating{position:fixed;inset:auto;margin:0;transform:scale(var(--game-ui-scale,1));transform-origin:0 0;overflow:auto}
/* Desktop inspection cards keep their original size when the game is enlarged. */
@media (hover:hover) and (pointer:fine){
 html.game-ui-ready body .item-hover.game-ui-floating{transform:scale(min(1,var(--game-ui-scale,1)))}
 html.game-ui-ready body #game-ui #overlay .dialog{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--game-ui-dialog-compensation,1));max-height:var(--game-ui-dialog-height,608px);transform-origin:center}
}
/* Keep wheel, finger and controller scrolling without visible scrollbar tracks. */
:is(.game-shell,.game-shell *,dialog,dialog *,[popover],[popover] *){scrollbar-width:none}
:is(.game-shell,.game-shell *,dialog,dialog *,[popover],[popover] *)::-webkit-scrollbar{display:none;width:0;height:0}
/* Choice menus fit the game height; longer lists are paged explicitly. */
html.game-ui-ready body #overlay:is([data-mode="pause"],[data-mode="advanced"]) .dialog{width:560px;max-width:100%;padding:16px 22px}
html.game-ui-ready body #overlay[data-mode="pause"] .dialog::before{height:58px;margin:0 auto 6px}
html.game-ui-ready body #overlay[data-mode="pause"] #dialog-label{font-size:13px;letter-spacing:2px}
html.game-ui-ready body #overlay[data-mode="pause"] #dialog-title{font-size:24px;margin:8px 0}
html.game-ui-ready body #overlay[data-mode="pause"] #dialog-text{margin:0 0 12px}
html.game-ui-ready body #overlay[data-mode="pause"] .dialog::after{margin-top:12px}
html.game-ui-ready body #overlay:is([data-mode="pause"],[data-mode="advanced"]) #dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none}
html.game-ui-ready body #overlay #dialog-actions>.menu-page-hidden{display:none!important}
html.game-ui-ready body #overlay[data-mode="pause"] #dialog-actions button{min-height:44px;font-size:16px;padding:8px}
.menu-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.menu-pages[hidden]{display:none}
.menu-pages button{min-height:40px;padding:8px 12px}
html.game-ui-ready .mobile-panel-tabs{display:none!important}
/* The artwork and its slots are identical on mouse and touch devices. */
html.game-ui-ready #inventory-dialog .armory-character{display:block!important}
html.game-ui-ready #inventory-dialog .armory-bag{display:flex!important}
html.game-ui-ready #inventory-dialog .armory-character{max-width:none}
html.game-ui-ready #game-ui dialog{overscroll-behavior:contain}
html.game-ui-ready :is(dialog,#game-ui) button{touch-action:manipulation}
html.game-ui-ready #game-ui .bag-item,html.game-ui-ready #game-ui .equipment-slot,html.game-ui-ready #game-ui #inventory-items [data-soul],html.game-ui-ready #game-ui .bank-columns [data-id],html.game-ui-ready #game-ui .bank-columns [data-soul]{touch-action:none}
html.game-ui-ready #game-ui .service-close,html.game-ui-ready #game-ui #close-inventory,html.game-ui-ready #game-ui .milestones-close,html.game-ui-ready #game-ui .library-close{min-width:28px;min-height:28px}
/* Mobile UI sheets still offer touch-only actions, on the shared game scale. */
.game-ui-ready #mobile-sheet[open]{display:flex;flex-direction:column;height:608px}
.game-ui-ready .mobile-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-ui-ready .mobile-sheet-body{flex:1;min-height:0;overflow:auto}
.game-ui-ready .mobile-sheet-actions{display:flex;flex-wrap:wrap;gap:8px}
#tome-picker{background:#12232e;color:#e6e1d5;padding:20px;border:1px solid #b39a67}
.tome-picker-grid{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tome-picker-grid .tome-card{width:64px;height:64px;flex:none}
/* Preserve world proportions in fullscreen too. */
html.game-ui-ready.game-fullscreen #game{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,150dvh)!important;height:auto!important;aspect-ratio:3/2;object-fit:contain}
@media(pointer:coarse) and (hover:none) and (orientation:landscape){
 html.game-ui-ready.touch-game #game{width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5))!important;height:auto!important;left:calc((100% + env(safe-area-inset-left) - env(safe-area-inset-right))/2);top:calc((100% + env(safe-area-inset-top) - env(safe-area-inset-bottom))/2)}
}

#ground-loot-panel{width:560px;max-height:570px;overflow:auto;padding:20px;background:#12232e;color:#e6e1d5;border:1px solid #b39a67}
.ground-loot-grid{display:grid;grid-template-columns:repeat(auto-fill,64px);gap:10px;margin:16px 0}
.ground-loot-grid .bag-item{position:relative;width:64px;height:64px;min-height:64px;padding:4px;overflow:hidden}
.ground-loot-grid .bag-item img,.ground-loot-grid .item-icon{width:100%;height:100%;object-fit:contain}
.ground-loot-grid .bag-item:focus-visible,.ground-loot-grid .bag-item.chosen{outline:2px solid #f6da89;outline-offset:2px}
.ground-loot-grid .ground-loot-count{display:block!important;position:absolute;right:3px;bottom:2px;background:#101820;color:#fff;padding:1px 3px}
.ground-loot-symbol{font-size:30px;color:#eccf85}

@media (hover:hover) and (pointer:fine){
 html.game-ui-ready body #overlay[data-compact-pause="true"] .dialog{width:300px;padding:16px 24px}
 html.game-ui-ready body #overlay[data-compact-pause="true"] .dialog::before{height:92px;margin:0 auto 8px}
 html.game-ui-ready body #overlay[data-compact-pause="true"] #dialog-label{font-size:18px;letter-spacing:3px;white-space:nowrap}
 html.game-ui-ready body #overlay[data-compact-pause="true"] #dialog-title{font-size:26px;margin:12px 0 8px}
 html.game-ui-ready body #overlay[data-compact-pause="true"] #dialog-actions{grid-template-columns:1fr;gap:6px}
 html.game-ui-ready body #overlay[data-compact-pause="true"] #dialog-actions button{min-height:38px;padding:6px 8px;font-size:16px}
 html.game-ui-ready body #overlay[data-compact-pause="true"] .dialog::after{margin-top:20px}
}

/* Keep town-service controls proportionate to their painted frames. */
html.game-ui-ready #inventory-dialog:not(.shopping):not(.crafting-open) .inventory-frame-gold{font-size:13px}
#bank-dialog.service-panel .bank-gold{font-size:12px}
#bank-dialog.service-panel .bank-tabs button,#bank-dialog.service-panel .bank-purchase button{font-size:10px;min-height:24px;padding:3px 6px}
:is(#bank-dialog,#shop-dialog) .bank-search{padding:3px;gap:4px;margin:7px 0 4px}
:is(#bank-dialog,#shop-dialog) .bank-search input{font-size:11px;padding:5px 7px;min-height:0}
:is(#bank-dialog,#shop-dialog) .bank-search button{font-size:10px;min-height:24px;padding:3px 6px}
#craft-dialog #soul-select{width:90%;min-height:26px;font-size:11px;padding:4px 6px}
#craft-dialog .soul-circle{margin:8px auto;max-width:210px}
#craft-dialog .soul-core,#craft-dialog .soul-slot{width:54px;height:54px;min-width:54px;min-height:54px}
#craft-dialog .soul-core img{width:44px;height:44px}
#craft-dialog .soul-slots{gap:12px;margin-top:8px}
#craft-dialog .soul-preview{width:90%;font-size:10px;padding:6px}
#craft-dialog .soul-craft-button{min-width:130px;min-height:26px;font-size:11px;margin:6px auto}
#craft-dialog .soul-services{width:82%;margin-top:6px}
#craft-dialog .soul-services button{font-size:11px;min-height:25px;padding:3px 8px}
#shop-dialog .shop-grid{grid-template-columns:repeat(var(--seller-columns,7),48px);grid-template-rows:repeat(5,48px);grid-auto-rows:48px;gap:5px;align-content:start}
#shop-dialog .shop-grid>.bag-item,#shop-dialog .shop-empty-slot{box-sizing:border-box;width:48px;height:48px;min-width:0;min-height:0;padding:3px;margin:0}
#shop-dialog .shop-empty-slot{border:1px solid #81718c88;border-radius:2px;background:#131c2b88}
#shop-dialog .shop-grid .item-icon{width:100%;height:100%;min-height:0;display:grid;place-items:center}
#shop-dialog .shop-grid .item-icon canvas,#bank-dialog.service-panel .bank-grid .item-icon canvas{width:100%!important;height:100%!important;min-width:0;min-height:0;object-fit:contain}
#shop-dialog .shop-detail:empty{display:none}
.item-hover.ground-loot-preview{pointer-events:none!important}

/* Compact close control shared by all gameplay popups; separate from choice paging. */
html.game-ui-ready body #game-ui #overlay .dialog>.popup-close{position:absolute;right:7px;top:7px;z-index:5;display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin:0;padding:0;border:1px solid #958c8b;border-radius:3px;background:#10141ce8;color:#eee5df;font:22px/1 Arial,sans-serif;letter-spacing:0;box-shadow:none;cursor:pointer}
html.game-ui-ready body #game-ui #overlay .dialog>.popup-close:hover{background:#303346;border-color:#e2d4c5}
html.game-ui-ready body #game-ui #overlay .dialog>.popup-close:focus-visible{outline:2px solid #bbd8e9;outline-offset:2px}
html.game-ui-ready body #game-ui #overlay #dialog-label{padding-inline:24px}

/* Gameplay clicks and drags must not select browser text. */
body{user-select:none;-webkit-user-select:none}
input,textarea,[contenteditable="true"],[contenteditable=""]{user-select:text;-webkit-user-select:text}

/* Audio menu: large touch targets, keyboard and controller sliders. */
.audio-settings{display:grid;gap:24px;width:min(420px,100%);margin:20px auto;text-align:left}.audio-setting{display:grid;grid-template-columns:1fr auto;gap:10px;color:#e9ddc6;font-size:17px}.audio-setting output{color:#edc577;font-variant-numeric:tabular-nums}.audio-setting input[type=range]{grid-column:1/-1;width:100%;min-width:0;height:32px;margin:0;accent-color:#d7ae62;cursor:pointer}.audio-setting input:focus-visible{outline:2px solid #a5d5ee;outline-offset:4px}
@media(max-height:500px){.audio-settings{gap:10px;margin:8px auto}.audio-setting{gap:3px;font-size:15px}}

/* Controller purchases use the same floating actions as touch. */
.controller-active #shop-detail{display:none!important}