/* Compact HUD and nonmodal right-side management panels. */
:root{--side-width:min(460px,48vw);--inventory-width:min(420px,38vw);--compare-width:min(340px,32vw);--occupied-width:var(--side-width);--hud-menu-height:72px;--header-height:32px;--menu-button-width:72px}
#game-shell#game-shell#game-shell .topbar{height:calc(32px + env(safe-area-inset-top,0px));padding-inline:10px;background:#0b121bc4;border-bottom-color:#71829630}
#game-shell#game-shell#game-shell .wordmark.battle-brand{height:30px;width:64px}
#game-shell#game-shell#game-shell .battle-logo{height:23px}
#game-shell#game-shell#game-shell .battle-logo img{width:100px}
#game-shell#game-shell#game-shell .battle-brand>span{font-size:6px;line-height:7px}
#game-shell#game-shell#game-shell .top-actions{gap:3px}
#game-shell#game-shell#game-shell .top-actions button{height:28px;min-height:28px;width:auto;min-width:48px;padding:0 7px;background:#152331;border-color:#526272;font-size:11px;white-space:nowrap}
#viewport#viewport#viewport#viewport .hud-top{grid-template-columns:clamp(150px,21vw,190px) minmax(0,1fr);grid-template-rows:auto auto;gap:5px 10px;top:6px;inset-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px));max-height:none}
#viewport#viewport#viewport#viewport .player-panel{grid-column:1;grid-row:1;width:100%;padding:5px 7px;gap:0;align-self:start}
#viewport#viewport#viewport#viewport .player-panel .portrait{display:none}
#viewport#viewport#viewport#viewport .player-name{margin:0 0 4px;gap:4px;flex-wrap:nowrap}
#viewport#viewport#viewport#viewport .player-name strong{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#viewport#viewport#viewport#viewport .player-name .class-icon{width:15px;height:15px}
#viewport#viewport#viewport#viewport .player-name .compact-level{display:inline;font-size:10px;white-space:nowrap;margin-left:auto}
#viewport#viewport#viewport#viewport #power-label{display:none}
#viewport#viewport#viewport#viewport .player-panel .resource{height:12px;margin-top:3px}
#viewport#viewport#viewport#viewport .player-panel .resource span{font-size:9px;line-height:10px}
#viewport#viewport#viewport#viewport .exp-track{margin-top:4px;height:2px}
#viewport#viewport#viewport#viewport #stage-hud{grid-column:1;grid-row:2;justify-self:stretch;width:100%;max-width:none;max-height:calc(var(--app-height) - 165px);gap:3px}
#viewport#viewport#viewport#viewport .stage-hud-main{padding:4px 7px;gap:1px;background:#101a25c9}
#viewport#viewport#viewport#viewport #stage-hud-region{font-size:10px;line-height:13px}
#viewport#viewport#viewport#viewport #stage-hud-stage{font-size:16px;line-height:19px}
#viewport#viewport#viewport#viewport .stage-hud-detail{font-size:10px;line-height:13px}
#viewport#viewport#viewport#viewport .hud-actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:4px;grid-column:2;grid-row:1;align-self:start;justify-self:end;width:min(100%,376px);max-width:100%}
#viewport#viewport#viewport#viewport #boss-controls,#viewport#viewport#viewport#viewport #combat-menu,#viewport#viewport#viewport#viewport #combat-menu-items{display:contents;position:static;overflow:visible}
#viewport#viewport#viewport#viewport #combat-menu-toggle{display:none!important}
#viewport#viewport#viewport#viewport .hud-actions button:not(#boss-options button){position:relative;pointer-events:auto;display:grid;place-items:center;flex:0 0 var(--menu-button-width);width:var(--menu-button-width);min-width:var(--menu-button-width);height:34px;min-height:34px;padding:3px 5px;margin:0;background:linear-gradient(#243445c9,#0d1824c9);border:1px solid #8192a84d;border-radius:3px;font-size:12px!important;line-height:16px;white-space:normal;word-break:keep-all;box-shadow:0 2px 5px #0005}
#viewport#viewport#viewport#viewport .hud-actions button>div,#viewport#viewport#viewport#viewport .hud-actions button>strong{display:flex!important;align-items:center;justify-content:center;gap:3px;font-size:12px!important;line-height:16px}
#viewport#viewport#viewport#viewport .hud-actions button small{display:none!important}
#viewport#viewport#viewport#viewport .hud-actions button>img,#viewport#viewport#viewport#viewport .hud-actions button>svg{display:none}
#viewport#viewport#viewport#viewport .hud-actions button[aria-pressed=true],#viewport#viewport#viewport#viewport #boss-request-button[data-state=reserved]{border-color:#b0ddf9;box-shadow:inset 0 0 10px #62aee650}
#viewport#viewport#viewport#viewport .hud-actions button::after{content:attr(aria-label);position:absolute;top:calc(100% + 5px);right:0;display:none;width:max-content;max-width:180px;font-size:12px;line-height:17px;white-space:normal;padding:5px 8px;color:#e2eaf3;background:#0b1524;border:1px solid #60758c;z-index:30;pointer-events:none}
@media(hover:hover){#viewport#viewport#viewport#viewport .hud-actions button:hover::after{display:block}}
#viewport#viewport#viewport#viewport .hud-actions button:focus-visible::after{display:block}
#viewport#viewport#viewport#viewport .hud-actions button>b{font-size:9px!important;line-height:13px;min-width:13px;width:13px;height:13px;top:-3px;right:-3px}
#viewport#viewport#viewport#viewport #auto-skills-button.on{color:#99e5ca;background:#17382ecf;border-color:#75bda5}
#viewport#viewport#viewport#viewport #auto-skills-button.on::before{filter:drop-shadow(0 0 4px #83e9bc)}
#viewport#viewport#viewport#viewport #toast-stack{top:155px;width:min(220px,28%)}
#viewport#viewport#viewport#viewport .loot-entry{max-height:46px;padding:4px 6px}
#viewport#viewport#viewport#viewport .loot-entry>img{height:26px;width:26px}

/* Every in-game management window uses the same right-side bounds. */
:root body dialog.battle-side-panel[open]{position:fixed!important;top:calc(var(--app-top,0px) + max(6px,env(safe-area-inset-top,0px)))!important;right:calc(max(6px,env(safe-area-inset-right,0px)) + 100vw - var(--app-left,0px) - var(--app-width,100vw))!important;left:auto!important;bottom:auto!important;transform:none!important;width:var(--side-width)!important;max-width:var(--side-width)!important;height:calc(var(--app-height,100dvh) - max(6px,env(safe-area-inset-top,0px)) - max(6px,env(safe-area-inset-bottom,0px)))!important;max-height:calc(var(--app-height,100dvh) - max(6px,env(safe-area-inset-top,0px)) - max(6px,env(safe-area-inset-bottom,0px)))!important;margin:0!important;padding:8px!important;background:linear-gradient(120deg,#18222df5,#0a121bf5)!important;border:1px solid #647586!important;box-shadow:-8px 0 25px #0005;z-index:30;overflow:hidden!important;contain:layout}
:root body dialog.battle-side-panel::backdrop{background:none;backdrop-filter:none}
:root[data-side-panel]:not([data-side-panel=none]) #viewport .skills-wrap{visibility:hidden;pointer-events:none}
:root[data-side-panel]:not([data-side-panel=none]) #viewport .hud-actions{visibility:hidden;pointer-events:none}
:root[data-side-panel]:not([data-side-panel=none]) #clear-notice{left:calc((100% - var(--occupied-width))/2)!important;max-width:calc(100% - var(--occupied-width) - 20px);font-size:14px}
:root[data-side-panel]:not([data-side-panel=none]) #clear-title{font-size:clamp(20px,3vw,32px)}
:root[data-side-panel]:not([data-side-panel=none]) #viewport .screen-overlay{right:var(--occupied-width)}
:root[data-side-panel]:not([data-side-panel=none]) #viewport .screen-overlay .result-card{max-height:95%;overflow:auto;padding:16px}

/* The bag dedicates its space to worn equipment and the item cube. */
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 30px minmax(0,1fr) 28px;gap:6px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .dialog-heading h2{font-size:17px;line-height:24px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .close-dialog{width:32px;height:32px;min-width:32px;min-height:32px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar{display:flex;grid-column:1;gap:6px;min-width:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #character-stats{display:flex;flex:0 0 auto}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .stats-grid{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-heading-actions{flex:1;min-width:0;display:flex;gap:4px;flex-wrap:nowrap}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar button{min-width:0;min-height:30px;height:30px;padding:3px 6px;font-size:11px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-column:1;grid-row:3;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:7px;min-width:0;min-height:0;height:auto;position:relative;overflow:hidden}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .equipment-panel,#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .items-panel{padding:4px;gap:5px;min-height:0;overflow:hidden}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout h3{font-size:12px;line-height:17px;margin:0;white-space:nowrap}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .equipment-panel h3 span{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .items-heading h3{margin:0;font-size:12px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .items-heading{flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .auto-equip-help{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-filter{min-height:28px;gap:4px;font-size:11px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #inventory-slot-filter{min-height:28px;height:28px;padding:3px;font-size:11px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:1px;overflow:auto}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .tile-slot{font-size:9px;line-height:13px;min-height:13px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #inventory-scroll{flex:1;min-height:0;overflow:auto;padding:2px;scrollbar-gutter:auto;scroll-snap-type:y proximity}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));grid-auto-rows:max-content;gap:4px;align-content:start}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-tile{scroll-snap-align:start;min-height:0;aspect-ratio:1;padding:2px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-visual{height:100%;aspect-ratio:1}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .gear-tile{aspect-ratio:auto}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .gear-visual{height:auto;aspect-ratio:1}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .dismantle-toolbar{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .bag-tools{position:relative;flex:0 0 28px;z-index:5}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .bag-tools summary{display:grid;place-items:center;width:28px;height:30px;cursor:pointer;background:#1b2b3c;border:1px solid #556678;list-style:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .bag-tools[open] .dismantle-toolbar{position:absolute;right:0;top:34px;display:grid;width:min(260px,40vw);padding:8px;background:#101d2c;border:1px solid #64788e;box-shadow:0 6px 20px #0008}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .bag-tools #dismantle-preview{display:block;white-space:normal}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-detail-sheet{display:none;grid-column:1/-1;grid-row:1;position:static;padding:0;min-width:0;min-height:0;overflow:hidden}

#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true] #item-detail-sheet{display:flex;flex-direction:column}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-sheet-heading{display:flex;align-items:center;gap:8px;padding:0 0 5px;flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-sheet-heading strong{font-size:12px;font-weight:500}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-detail-back{min-height:30px;padding:3px 8px;font-size:12px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector{overflow:auto;min-height:0;padding:7px;display:block;flex:1}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-heading{display:grid;grid-template-columns:1fr 1fr}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item{display:flex;padding:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item>img{width:28px;height:28px;flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item h3{font-size:12px;line-height:17px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-body{display:block;overflow:visible;min-height:0;height:auto;margin-top:8px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-compare-pane{margin:6px 0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-actions{position:static;display:flex;flex-wrap:wrap;margin-top:8px;padding-top:8px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-actions>button{min-height:36px;flex:1 1 100px;font-size:12px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog>.shop{display:flex;grid-column:1;grid-row:4}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog>.shop button{height:28px;min-height:28px;font-size:11px;padding:3px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog>.inventory-skill-footer{display:none}

/* Each equipped item is one row, followed by its actual circular sockets. */
#gems-dialog#gems-dialog#gems-dialog#gems-dialog[open]{display:flex;flex-direction:column;gap:5px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog>.dialog-heading{min-height:36px;padding-bottom:4px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog>.dialog-heading h2{font-size:17px;line-height:24px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .close-dialog{height:32px;width:32px;min-height:32px;min-width:32px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-tabs{display:flex;flex-wrap:nowrap;overflow:auto;min-height:34px;gap:0;padding:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-tabs button{flex:0 0 auto;min-height:34px;padding:5px 8px;font-size:12px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-page{padding:6px 0;min-height:0;overflow:auto;flex:1}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-list{display:flex;flex-direction:column;gap:5px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:8px 5px;border-radius:3px;min-width:0;background:linear-gradient(100deg,#243247,#152030);border-color:#4f617950}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-heading{display:flex;min-width:0;gap:5px;margin:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-heading img{width:25px;height:25px;object-fit:contain;flex-shrink:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-heading strong{font-size:11px;line-height:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-heading small{font-size:9px;line-height:13px;margin-top:2px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid{display:flex;justify-content:flex-end;gap:5px;min-width:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid button{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gem-tier,#978666);background:radial-gradient(ellipse,#131d2a,#05090f);position:relative;box-shadow:inset 0 0 0 2px #ab93623d}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid button>small,#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid button>span:not(.gem-badge):not(.empty-socket){display:none}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid .gem-badge{display:block;flex:none;width:28px;height:28px;margin:0;border:0;border-radius:50%}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid .gem-badge img{border-radius:50%;width:100%;height:100%}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid .gem-badge b{font-size:9px;line-height:11px;right:-4px;bottom:-3px;padding:0 2px;border-radius:2px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid .empty-socket{width:26px;height:26px;display:block;overflow:hidden;font-size:0;border-radius:50%;border:0;background:#060a0f;box-shadow:inset 0 0 5px #000}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-section-head{margin:0 0 7px;gap:5px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-section-head h3{font-size:14px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-section-head label{font-size:11px;white-space:nowrap}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-bag-list,#gems-dialog#gems-dialog#gems-dialog#gems-dialog .unique-catalog,#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-exchange-grid{grid-template-columns:1fr;gap:6px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-bag-levels{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:7px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-bag-levels button{min-height:76px;padding:5px 1px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-bag-levels .gem-badge{width:32px;height:32px;flex-basis:32px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-card-heading strong{font-size:14px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-card-heading small{font-size:11px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-card-heading>span:last-child{font-size:11px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-pick-list button{padding:8px;gap:7px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-pick-list strong{font-size:13px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-pick-list small{font-size:12px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-picker>p{font-size:12px;line-height:18px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .exchange-result{display:flex;flex-wrap:wrap;padding:10px;gap:7px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .exchange-result>span{font-size:12px;margin:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-status{font-size:12px;padding:7px;margin-bottom:7px}
.gem-confirm{padding:10px;background:#17283b;border:1px solid #8399ae;margin-bottom:10px}
.gem-confirm p{font-size:13px;line-height:1.6;white-space:pre-line;margin:0 0 10px}
.gem-confirm>div{display:flex;gap:7px}.gem-confirm button{flex:1;min-height:36px;background:#29465d;border:1px solid #6a8ca6}
@media(max-width:760px){
 :root{--menu-button-width:66px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:68px minmax(0,1fr);gap:5px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar button{font-size:10px;padding:3px 4px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-heading{grid-template-columns:1fr}
 #gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid{gap:3px}
 #gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid button{width:28px;height:28px;min-width:28px;min-height:28px}
 #gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-socket-grid .gem-badge{width:24px;height:24px}
 #gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-gear-heading img{display:none}
}

/* Compact text menus retain separate, readable names. */
#viewport#viewport#viewport#viewport #auto-skills-state{position:static;font-size:10px!important;width:auto;height:auto;min-width:0;line-height:14px}
#game-shell#game-shell#game-shell .top-actions #main-menu-button{display:block!important;font-size:11px!important}
:root body dialog.battle-side-panel>.dialog-heading{min-height:36px;padding-bottom:4px}
:root body dialog.battle-side-panel>.dialog-heading h2{font-size:17px;line-height:24px}
:root body dialog.battle-side-panel .close-dialog{width:32px;height:32px;min-width:32px;min-height:32px}
:root body dialog.battle-side-panel :is(section,nav,div){min-width:0}
:root body dialog.battle-side-panel .dialog-footer{font-size:11px;line-height:16px;max-height:36px;overflow:auto;flex-shrink:0;margin:3px 0}
:root body dialog.battle-side-panel.save-dialog[open]{height:auto!important;overflow:auto!important}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel[open]{grid-template-rows:36px auto minmax(0,1fr) auto;gap:5px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel[data-category=home]{grid-template-rows:36px minmax(0,1fr) auto}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #crafting-nav{flex-wrap:nowrap;overflow:auto}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #crafting-nav button{flex:0 0 auto;min-height:32px;font-size:12px;padding:4px 8px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #crafting-content{overflow:auto}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-home{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;align-content:start;padding:2px;gap:6px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-home button{min-height:88px;padding:8px;gap:5px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-home strong{font-size:14px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-home span{font-size:11px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-category{height:auto;overflow:visible}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-layout{display:block;height:auto;overflow:visible}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-recipes{height:auto;overflow:visible;padding:5px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #crafting-list{overflow:visible}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #pendant-crafting{overflow:visible}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-detail{display:none;height:auto;overflow:visible}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel[data-recipe-open=true] .crafting-recipes{display:none}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel[data-recipe-open=true] .crafting-detail{display:flex;flex-direction:column;gap:6px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel[data-recipe-open=true] .recipe-back{display:block;min-height:32px;margin-bottom:6px;font-size:12px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .craft-result-pane{overflow:visible;padding:8px;flex:none}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .craft-material-pane{overflow:visible;padding:8px;flex:none}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-item-head{flex-direction:row;text-align:left;gap:8px;padding-bottom:6px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-item-head>img{width:48px;height:48px;flex-basis:48px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-item-head h3{font-size:15px;line-height:21px}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #crafting-material-summary{grid-template-columns:minmax(0,1fr)}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel #refining-actions{grid-template-columns:minmax(0,1fr)}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .material-filters{display:flex;flex-wrap:wrap}
#crafting-dialog#crafting-dialog#crafting-dialog#crafting-dialog.battle-side-panel .crafting-status{font-size:11px;line-height:16px;max-height:48px;overflow:auto;margin:0}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[open]{gap:4px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel>.loadout-guide{display:none}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skills-mode-tabs{gap:3px;overflow:auto;flex-wrap:nowrap}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skills-mode-tabs button{min-height:30px;padding:4px 7px;font-size:12px;white-space:nowrap}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-preset-bar{display:block;margin:0}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #skill-presets{display:flex;gap:4px;flex-wrap:wrap}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #skill-presets button{min-height:28px;padding:3px 7px;font-size:11px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-preset-bar>span{display:block;font-size:10px;line-height:14px;margin-top:2px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .selection-status{font-size:11px;line-height:15px;max-height:30px;overflow:auto;margin:0}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .specialization-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:126px minmax(0,1fr);gap:5px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #skill-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,1fr);height:126px;overflow:hidden;width:100%;padding:2px;gap:4px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button{flex:none;width:100%;min-width:0;height:100%;min-height:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;padding:4px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button>img{width:23px;height:23px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button strong{font-size:11px;line-height:14px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button small{display:none}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #specialization-detail{display:block;height:100%;padding:7px;overflow:auto}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=growth] .specialization-layout{grid-template-rows:minmax(0,1fr)}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=passive] .specialization-layout{grid-template-rows:minmax(0,1fr)}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=growth] #skill-collection,#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=passive] #skill-collection,#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=growth] .skill-preset-bar{display:none}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .point-grid{grid-template-columns:minmax(0,1fr)}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .specialization-heading h3{font-size:17px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .trait-option{padding:7px;gap:5px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .trait-option strong{font-size:12px}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .trait-option small{font-size:11px;line-height:16px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel[open]{display:flex;flex-direction:column;gap:5px;overflow:hidden}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel #live-tabs{flex-wrap:nowrap;overflow:auto;gap:3px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel #live-tabs button{flex:0 0 auto;font-size:12px;min-height:32px;padding:4px 8px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel #live-content{overflow:auto;flex:1;min-height:0;padding-right:2px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel #live-recipient{font-size:11px;margin:0}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel h3{font-size:17px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .live-section-title{flex-wrap:wrap;gap:5px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-board{padding:7px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-board-top{flex-wrap:wrap;gap:4px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-claim-bar{flex-direction:column;align-items:stretch;gap:6px;padding:7px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-grid.icon-calendar{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:88px;gap:4px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .icon-calendar .attendance-day{min-height:0;padding:4px;gap:3px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-day header span{display:none}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-items{min-height:0}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .attendance-caption{display:none}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .admin-grid{grid-template-columns:minmax(0,1fr);gap:8px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .admin-bootstrap-card{grid-template-columns:minmax(0,1fr)}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .admin-panel{padding:8px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .form-pair{grid-template-columns:minmax(0,1fr)}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .box-form{grid-template-columns:minmax(0,1fr);padding:8px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .ranking-row{grid-template-columns:30px minmax(0,1fr) minmax(80px,.8fr);gap:6px;padding:8px 5px;font-size:12px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .ranking-row>div b{font-size:12px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .ranking-row>b{font-size:12px;overflow-wrap:anywhere}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .my-ranking{flex-wrap:wrap;gap:5px;padding:8px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .rank-filters{flex-wrap:wrap;gap:4px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .mail-card{padding:9px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .mail-card header{flex-direction:column;gap:3px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel .live-footer{max-height:60px;overflow:auto;padding-top:4px}
#live-dialog#live-dialog#live-dialog#live-dialog.battle-side-panel #live-status{font-size:11px;line-height:15px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel[open]{display:flex;flex-direction:column;gap:6px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel #stage-chapters{grid-template-columns:minmax(0,1fr);overflow:auto;min-height:0;flex:1;gap:6px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .stage-chapter{padding:8px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .chapter-heading{min-height:55px;gap:7px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .chapter-heading img{width:48px;height:48px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .chapter-heading h3{font-size:14px;line-height:19px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .difficulty-selector{display:flex;gap:4px;padding:5px;flex-shrink:0}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .difficulty-selector button{min-width:0;padding:4px;font-size:11px}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel #stage-progress{font-size:11px;margin:0}
#stages-dialog#stages-dialog#stages-dialog#stages-dialog.battle-side-panel .stage-buttons{gap:4px;margin:8px 0}
#help-dialog#help-dialog#help-dialog#help-dialog.battle-side-panel[open]{display:flex;flex-direction:column;gap:6px}
#help-dialog#help-dialog#help-dialog#help-dialog.battle-side-panel .help-content{flex:1;min-height:0;overflow:auto;font-size:12px}
#help-dialog#help-dialog#help-dialog#help-dialog.battle-side-panel .help-grid{grid-template-columns:minmax(65px,.35fr) minmax(0,1fr);font-size:12px;gap:7px}
#help-dialog#help-dialog#help-dialog#help-dialog.battle-side-panel p{font-size:12px;line-height:1.7}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel[open]{display:block;overflow:auto!important}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel .dialog-heading{position:sticky;top:-8px;background:#14202c;z-index:2}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel .merchant-intro{display:flex;flex-wrap:wrap;padding:8px;gap:8px}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel .merchant-intro>img{width:40px;height:48px}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel .merchant-intro>div{flex:1 1 160px}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel #merchant-grades{display:flex;flex-wrap:wrap;gap:4px}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel #merchant-grades button{min-width:0;flex:1 1 52px;font-size:12px;padding:5px}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel #merchant-items{max-height:none;min-height:0;overflow:visible}
#merchant-dialog#merchant-dialog#merchant-dialog#merchant-dialog.battle-side-panel .merchant-actions{display:flex;flex-direction:column;gap:5px}

/* Reserve space for the menu before positioning the desktop map. */
#viewport#viewport#viewport#viewport .right-hud{top:calc(var(--hud-menu-height) + 14px);max-height:calc(100% - var(--hud-menu-height) - 28px);overflow:auto}
:root[data-side-panel]:not([data-side-panel=none]) #viewport .right-hud{visibility:hidden;pointer-events:none}
:root[data-side-panel=inventory-dialog]{--side-width:var(--inventory-width)}
:root[data-side-panel=inventory-dialog][data-inventory-detail=true]{--occupied-width:calc(var(--inventory-width) + var(--compare-width) + 8px)}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true][open]{width:var(--occupied-width)!important;max-width:var(--occupied-width)!important;grid-template-columns:minmax(0,var(--compare-width)) minmax(0,1fr);column-gap:8px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true]>.dialog-heading{grid-column:2;grid-row:1}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true]>.inventory-toolbar{grid-column:2;grid-row:2}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true]>.cube-layout{display:contents}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true] .inventory-catalog{display:grid;grid-column:2;grid-row:3;grid-template-columns:72px minmax(0,1fr);gap:5px;min-height:0;overflow:hidden}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true] #item-detail-sheet{display:flex;grid-column:1;grid-row:1/-1;min-height:0;padding:7px;border:1px solid #53677b;background:#101b28}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true]>.shop{grid-column:2;grid-row:4}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog>.dialog-footer{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-sheet-heading{justify-content:space-between;gap:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-detail-back{order:2;white-space:nowrap;padding:3px 5px;font-size:11px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector{display:flex;flex-direction:column;gap:5px;overflow:auto;padding:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-heading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item{display:flex;flex-direction:column;align-items:flex-start;padding:4px;gap:3px;min-width:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item:not(.comparison-selected){display:flex}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item h3{font-size:12px;line-height:16px;overflow-wrap:anywhere}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-body{flex:1 0 auto;overflow:visible;min-height:0;height:auto;margin:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-option-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-actions{position:sticky;bottom:-4px;flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:#101b28;padding:5px 0 0;margin-top:auto;z-index:2}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-actions>button{min-width:0;min-height:32px;font-size:11px;line-height:15px;padding:4px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #equip-selected-item{grid-column:1/-1;min-height:34px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector>*{flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-compare{display:flex;flex-wrap:wrap;gap:4px;font-size:12px;line-height:17px;padding:5px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inspection-compare b{font-size:12px;white-space:normal;overflow-wrap:anywhere}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-option-row{font-size:12px;gap:4px;padding:5px}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-option-row b,#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-option-row strong{font-size:12px;white-space:normal;overflow-wrap:anywhere}
#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .gear-pane-title h4,#inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .skill-delta-summary h4{font-size:12px;line-height:17px;margin:3px 0}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-row{min-width:0;min-height:0;width:100%;overflow:hidden}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button span{min-width:0}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button strong{display:block;font-size:12px;line-height:16px;white-space:nowrap;overflow:visible}
#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button>img{flex:0 0 23px}
@media(max-width:1000px){
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:62px minmax(0,1fr);gap:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true] .inventory-catalog{grid-template-columns:62px minmax(0,1fr);gap:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-heading-actions{flex-wrap:wrap}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar button{min-height:26px;height:26px;font-size:10px;padding:2px 3px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[open]{grid-template-rows:32px auto minmax(0,1fr) 26px;gap:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:3px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog[data-detail-open=true] #item-detail-sheet{padding:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog#inventory-dialog .item-sheet-heading strong{font-size:11px}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .specialization-layout{grid-template-rows:114px minmax(0,1fr)}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #skill-collection{height:114px}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button{gap:3px;padding:3px}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-list-button>img{width:19px;height:19px;flex-basis:19px}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=growth] .specialization-layout,#skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel[data-skills-tab=passive] .specialization-layout{grid-template-rows:minmax(0,1fr)}
}
@media(max-height:420px){
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel>.dialog-footer{display:none}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-preset-bar>span{display:none}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel #skill-presets{flex-wrap:nowrap}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-preset{flex:1;min-width:0}
 #skills-dialog#skills-dialog#skills-dialog#skills-dialog.battle-side-panel .skill-preset small{display:none}
}

/* Compact gem bag: all 45 skill/tier stacks fit in five rows at normal side-panel widths. */
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;align-content:start;padding:3px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile{position:relative;display:block;min-width:0;min-height:0;width:100%;aspect-ratio:1;padding:0;border:0;background:#101b29;border-radius:2px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile .gem-badge{display:block;box-sizing:border-box;width:100%;height:100%;margin:0;border:2px solid var(--gem-tier);border-radius:2px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile .gem-badge img{display:block;width:100%;height:100%;object-fit:contain}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile .gem-badge b{bottom:0;right:0;font-size:12px;line-height:1.1;padding:1px 2px;border:0;border-radius:0}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-stack{position:absolute;top:2px;right:2px;font-size:11px;line-height:1;background:#091320dd;color:#fff;padding:1px 2px;pointer-events:none}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile:hover,#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-tile:focus-visible{outline:2px solid #b7ebe5;outline-offset:1px}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-grid>.gem-empty-state{grid-column:1/-1}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-section-head button{font-size:12px;min-height:30px;padding:3px 8px;background:#203446;border:1px solid #51697b;white-space:nowrap}
#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-tabs button{flex:1;min-width:0;font-size:12px}
.codex-item-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid #cc9bea;background:#111a29}
.codex-item-icon img{width:34px;height:34px;object-fit:contain}
@media(max-width:700px){#gems-dialog#gems-dialog#gems-dialog#gems-dialog .gem-inventory-grid{gap:3px}}