/* One landscape frame. The canvas keeps all available space; HUD groups own their layout. */
:root{--panel-ink:#0d141c;--panel-surface:#151f2a;--panel-edge:#45525e;--panel-blue:#92c9f3;--panel-gold:#d7c399;--header-height:48px;--hud-actions-width:224px}
#game-shell#game-shell .topbar{height:calc(var(--header-height) + env(safe-area-inset-top,0px));min-height:0;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));gap:12px;background:#0b121bef}
#game-shell#game-shell .wordmark.battle-brand{height:44px;width:78px}
#game-shell#game-shell .battle-logo{height:32px}
#game-shell#game-shell .battle-logo img{width:124px}
#game-shell#game-shell .top-actions button{border-radius:2px;min-height:36px;height:36px}
#viewport#viewport#viewport .hud-top{position:absolute;inset:10px max(10px,env(safe-area-inset-right,0px)) auto max(10px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(180px,280px) minmax(150px,1fr) var(--hud-actions-width);gap:12px;align-items:start;z-index:9;pointer-events:none;max-height:calc(var(--app-height) - var(--header-height) - var(--skillbar-height) - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
#viewport#viewport#viewport .hud-top>*{min-width:0;min-height:0;pointer-events:auto}
#viewport#viewport#viewport .player-panel{position:static;inset:auto;transform:none;width:auto;max-width:none;padding:10px;gap:9px;border-radius:2px;background:linear-gradient(110deg,#111c29ed,#0b121dd9);border:1px solid #8296a94d;box-shadow:none}
#viewport#viewport#viewport .player-panel .portrait{width:42px;height:58px;display:block}
#viewport#viewport#viewport .player-name{gap:6px;margin-bottom:6px;flex-wrap:wrap}
#viewport#viewport#viewport .player-name strong{font-size:13px}
#viewport#viewport#viewport #power-label{font-size:11px;margin:0}
#viewport#viewport#viewport .player-panel .resource{height:15px}
#viewport#viewport#viewport .player-panel .resource span{font-size:10px;line-height:13px}
#viewport#viewport#viewport #stage-hud{position:static;inset:auto;transform:none;display:flex;flex-direction:column;gap:6px;width:auto;max-width:420px;justify-self:end;min-width:0;max-height:inherit;overflow:auto;background:none;border:0;box-shadow:none;padding:0;border-radius:2px}
#viewport#viewport#viewport #stage-hud>*{flex-shrink:0}
#viewport#viewport#viewport .stage-hud-main{display:grid;width:100%;min-height:0;padding:9px 12px;gap:4px;text-align:left;border:1px solid #8193a34d;border-radius:2px;background:#101a26ed;box-shadow:none}
#viewport#viewport#viewport #stage-hud-region{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewport#viewport#viewport .stage-hud-heading{display:flex;gap:8px;align-items:baseline;margin:0}
#viewport#viewport#viewport #stage-hud-stage{font-size:22px;line-height:25px}
#viewport#viewport#viewport #stage-hud-difficulty{font-size:11px}
#viewport#viewport#viewport .stage-hud-detail{font-size:11px;line-height:16px;display:flex;justify-content:space-between;gap:8px}
#viewport#viewport#viewport .stage-hud-track{height:2px;margin:2px 0 0}
#viewport#viewport#viewport #target-panel{position:static;inset:auto;transform:none;width:100%;max-width:none;min-height:0;margin:0;padding:5px 9px;border-radius:2px;background:#11151eea;border:1px solid #77576180;text-align:left}
#viewport#viewport#viewport #target-name{font-size:12px;line-height:16px}
#viewport#viewport#viewport #target-panel .resource{height:13px;margin-top:3px}
#viewport#viewport#viewport #target-panel .resource span{font-size:10px;line-height:11px}
#viewport#viewport#viewport #target-statuses{max-height:18px;overflow:auto;margin:2px 0 0;font-size:10px}
#viewport#viewport#viewport #boss-timer{margin-top:3px;padding:0;font-size:11px}
#viewport#viewport#viewport #boss-timer strong{font-size:12px}
#viewport#viewport#viewport .hud-actions{display:flex;flex-direction:column;gap:6px;position:relative;width:100%}
#viewport#viewport#viewport #boss-controls{position:relative;inset:auto;transform:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin:0;padding:0;background:none;border:0}
#viewport#viewport#viewport #boss-controls>button{position:static;inset:auto;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;height:44px;margin:0;padding:5px;font-size:13px;border:1px solid #82735a;background:linear-gradient(#332e25,#201e1b);border-radius:2px;color:#eadab7;box-shadow:none}
#viewport#viewport#viewport #boss-controls #return-town-button{background:#18222eea;border-color:#536272;color:#d5dee8}
#viewport#viewport#viewport #return-town-button strong{font-size:12px}
#viewport#viewport#viewport #return-town-button small{display:none}
#viewport#viewport#viewport #combat-menu{position:relative;inset:auto;transform:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:6px;width:100%;height:auto;padding:0;margin:0;background:none;border:0;overflow:visible}
#viewport#viewport#viewport #combat-menu>.bag-button{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;grid-column:auto;min-width:0;min-height:44px;height:44px;width:100%;padding:6px;border:1px solid #536272;border-radius:2px;background:#152331f5;box-shadow:none}
#viewport#viewport#viewport #combat-menu>#auto-skills-button{order:0}
#viewport#viewport#viewport #combat-menu>#combat-menu-toggle{display:flex;order:1}
#viewport#viewport#viewport #combat-menu>.bag-button>div{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px}
#viewport#viewport#viewport #auto-skills-button.on{background:#183a37f2;border-color:#70b4a4;color:#c6eee2}
#viewport#viewport#viewport #combat-menu>.bag-button small{display:none}
#viewport#viewport#viewport #combat-menu-items{display:none;position:absolute;top:calc(100% + 6px);right:0;left:auto;bottom:auto;width:224px;max-height:calc(var(--app-height) - var(--header-height) - var(--skillbar-height) - 140px);overflow:auto;grid-template-columns:1fr 1fr;gap:5px;padding:7px;background:#0d1724;border:1px solid #63788b;box-shadow:0 10px 25px #0008;z-index:20}
#viewport#viewport#viewport #combat-menu[data-expanded=true] #combat-menu-items{display:grid}
#viewport#viewport#viewport #combat-menu-items .bag-button{min-height:56px;height:auto;min-width:0;padding:7px 4px;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;background:#1a2939;border:1px solid #354a5e;border-radius:2px}
#viewport#viewport#viewport #combat-menu-items .bag-button>div{font-size:12px}
#viewport#viewport#viewport #combat-menu-items img,#viewport#viewport#viewport #combat-menu-items svg{width:23px;height:23px;object-fit:contain}
#viewport#viewport#viewport #combat-menu-items small{display:none}
#viewport#viewport#viewport #auto-run-banner{position:static;inset:auto;max-width:none;width:100%;margin:0}
#viewport#viewport#viewport #boss-options{position:absolute;top:100%;right:0;left:auto;width:min(330px,70vw);max-height:45dvh;overflow:auto;z-index:30}
#viewport#viewport#viewport #toast-stack{position:absolute;left:12px;right:auto;top:116px;transform:none;width:min(270px,30%);max-width:none;gap:5px;align-items:stretch;z-index:8}
#viewport#viewport#viewport .toast{font-size:12px;line-height:1.4;padding:7px 10px;border-radius:2px}
#viewport#viewport#viewport .bottom-left{left:max(12px,env(safe-area-inset-left,0px));right:auto;bottom:max(10px,env(safe-area-inset-bottom,0px));width:min(280px,26%);max-height:35%;overflow:hidden}
#viewport#viewport#viewport .loot-entry{padding:6px 8px;border-radius:2px;gap:8px;min-height:0;max-height:60px}
#viewport#viewport#viewport .loot-entry>img{width:30px;height:30px}
#viewport#viewport#viewport .loot-entry strong{font-size:12px;line-height:16px}
#viewport#viewport#viewport .loot-entry small{font-size:10px;line-height:14px}
#viewport#viewport#viewport .currency{font-size:11px;padding:5px 7px;gap:5px;max-width:100%}
#viewport#viewport#viewport .currency b{font-size:12px}
@media(min-height:561px){:root[data-touch=false] #viewport#viewport#viewport .bottom-left{bottom:calc(var(--skill-size,52px) + 62px)}}

/* Shared modal bounds follow the visible viewport, including keyboard and browser bars. */
:root body dialog{box-sizing:border-box;border-radius:3px!important;background:linear-gradient(120deg,#151e2afc,#0b121bfC)!important;border:1px solid #6c7885!important;color:#e0e6ee;box-shadow:0 24px 90px #000b;scrollbar-width:thin;scrollbar-color:#60758a #101823;overscroll-behavior:contain}
:root body dialog[open]{position:fixed!important;left:calc(var(--app-left,0px) + var(--app-width,100vw)/2)!important;right:auto!important;top:calc(var(--app-top,0px) + max(8px,env(safe-area-inset-top,0px)))!important;bottom:auto!important;transform:translateX(-50%)!important;margin:0!important;max-width:calc(var(--app-width,100vw) - 16px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;max-height:calc(var(--app-height,100dvh) - max(8px,env(safe-area-inset-top,0px)) - max(8px,env(safe-area-inset-bottom,0px)))!important;min-height:0!important;overflow:auto}
:root body dialog::backdrop{background:#020711b8;backdrop-filter:blur(3px)}
:root body dialog .dialog-heading{flex-shrink:0;min-height:40px;margin:0;padding:0 0 8px;border-bottom:1px solid #66798a55}
:root body dialog .dialog-heading h2{font-family:var(--sans);font-size:21px;line-height:28px;font-weight:600;letter-spacing:-.04em;margin:0}
:root body dialog .dialog-heading .eyebrow{display:none}
:root body dialog .close-dialog{width:40px;height:40px;min-height:40px;min-width:40px;border:1px solid #647587;background:#1a2633;border-radius:2px!important;font-size:26px}
:root body dialog button,:root body dialog select,:root body dialog input{border-radius:2px}
:root body dialog button:disabled{cursor:not-allowed}
:root body dialog button:focus-visible{outline:2px solid #b2dfff;outline-offset:2px}
:root body dialog .gold-button,:root body dialog .craft-button,:root body dialog #equip-selected-item{background:linear-gradient(#d8c69e,#a99369)!important;border:1px solid #e4d6b5!important;color:#191b1e!important;box-shadow:none}
:root body dialog .selected,:root body dialog button[aria-pressed=true]{border-color:#91cbf7;background-color:#203c55}

/* Equipment | cube | comparison. Each column scrolls independently. */
#inventory-dialog#inventory-dialog#inventory-dialog[open]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:44px auto minmax(0,1fr) 38px;gap:8px;width:min(1360px,calc(var(--app-width) - 24px));height:min(840px,calc(var(--app-height) - 24px));padding:12px;overflow:hidden}
#inventory-dialog#inventory-dialog#inventory-dialog>.dialog-heading{position:static;grid-column:1/-1;padding:0 0 5px;background:none}
#inventory-dialog#inventory-dialog#inventory-dialog #character-stats{padding:0;gap:12px;grid-column:1/-1}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;grid-column:1/-1;min-width:0;min-height:0}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar #character-stats{display:flex;flex:1;min-width:0;gap:7px}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-toolbar .inventory-heading-actions{flex-shrink:0;flex-wrap:nowrap}
#inventory-dialog#inventory-dialog#inventory-dialog .stats-grid{grid-template-columns:repeat(6,minmax(0,1fr));font-size:12px;gap:4px 8px}
#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{display:grid;grid-template-columns:142px minmax(270px,1fr) minmax(320px,1.12fr);grid-template-rows:minmax(0,1fr);gap:12px;height:auto;min-height:0;overflow:hidden;grid-column:1/-1}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-catalog{display:contents}
#inventory-dialog#inventory-dialog#inventory-dialog .equipment-panel,#inventory-dialog#inventory-dialog#inventory-dialog .items-panel{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:hidden;padding:8px;background:#0c141ee0;border:1px solid #354454;border-radius:2px}
#inventory-dialog#inventory-dialog#inventory-dialog .cube-layout h3{font-size:14px;line-height:20px;font-weight:500;flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:max-content;gap:7px;overflow:auto;min-height:0;max-height:none;padding:2px}
#inventory-dialog#inventory-dialog#inventory-dialog .items-heading{display:block;min-height:0;margin:0;height:auto}
#inventory-dialog#inventory-dialog#inventory-dialog .items-heading h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 7px}
#inventory-dialog#inventory-dialog#inventory-dialog .items-heading h3>span{display:inline;font-size:11px;line-height:16px}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-heading-actions{display:flex;flex-wrap:wrap;gap:4px}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-heading-actions button{flex:1;min-height:34px;font-size:11px;padding:4px 6px;border-radius:2px;white-space:nowrap;background:#1b2a3b;border:1px solid #455b70}
#inventory-dialog#inventory-dialog#inventory-dialog .auto-equip-help{font-size:11px;line-height:16px;margin:0;color:#91a2b3}
#inventory-dialog#inventory-dialog#inventory-dialog .inventory-filter{min-height:32px;font-size:12px;flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog #inventory-slot-filter{min-height:32px;font-size:12px;padding:3px 6px;border-radius:2px;background:#182432}
#inventory-dialog#inventory-dialog#inventory-dialog #inventory-scroll{min-height:0;flex:1;overflow:auto;max-height:none;padding:3px;scrollbar-gutter:stable}
#inventory-dialog#inventory-dialog#inventory-dialog #inventory-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));grid-template-rows:none;grid-auto-rows:max-content;gap:6px;align-content:start}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-tile{display:block;position:relative;aspect-ratio:1;width:100%;height:auto;min-height:0;padding:3px;border:1px solid var(--rarity,#3c4a5a);border-radius:2px;background:linear-gradient(145deg,#253141,#0a121c);box-shadow:inset 0 0 0 2px #080e15;overflow:hidden}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-visual{position:relative;display:block;width:100%;height:100%;aspect-ratio:1;background:radial-gradient(ellipse,#38475988,transparent);border-radius:0}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-visual>img{width:100%;height:100%;object-fit:contain;border-radius:0}
#inventory-dialog#inventory-dialog#inventory-dialog .tile-name,#inventory-dialog#inventory-dialog#inventory-dialog .affix-count,#inventory-dialog#inventory-dialog#inventory-dialog #inventory-list .tile-slot{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .gear-tile{min-height:0;padding:3px;aspect-ratio:auto}
#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .gear-visual{height:auto;aspect-ratio:1}
#inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots .tile-slot{font-size:10px;line-height:16px;min-height:16px;font-weight:400;white-space:nowrap;color:#b5c2cf}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-tile.selected{outline:1px solid #c3e7ff;outline-offset:1px;border-color:#b7dfff;background:#28577b;box-shadow:inset 0 0 14px #60b9f366}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-tile.empty{background:#101720;border-style:solid}
#inventory-dialog#inventory-dialog#inventory-dialog .new-item-badge,#inventory-dialog#inventory-dialog#inventory-dialog .slot-number{font-size:10px;min-width:14px;height:15px;line-height:13px;padding:0 2px;border-radius:1px}
#inventory-dialog#inventory-dialog#inventory-dialog .lock-mark,#inventory-dialog#inventory-dialog#inventory-dialog .enhance-mark{font-size:10px;line-height:14px;border-radius:1px;padding:0 2px}
.cube-quantity{position:absolute;bottom:0;right:0;font-size:12px;padding:1px 3px;background:#050b15d9;color:#f3f5fa}
#inventory-dialog#inventory-dialog#inventory-dialog .dismantle-toolbar{flex-shrink:0;gap:4px;padding-top:6px;border-top:1px solid #344454}
#inventory-dialog#inventory-dialog#inventory-dialog #item-detail-sheet{position:static;inset:auto;display:flex;flex-direction:column;grid-column:auto;grid-row:auto;min-width:0;min-height:0;overflow:hidden;padding:0;box-shadow:none;border:0;border-radius:0;background:none}
#inventory-dialog#inventory-dialog#inventory-dialog .item-sheet-heading{display:none}
#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector{position:static;display:flex;flex-direction:column;flex:1;grid-column:auto;grid-row:auto;height:auto;min-height:0;max-height:none;overflow:auto;padding:10px;gap:8px;border-radius:2px;border:1px solid #526274;background:#0c141fe8}
#inventory-dialog#inventory-dialog#inventory-dialog .inspection-heading{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex-shrink:0}
#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item{display:flex;padding:6px;border-radius:2px;background:#172433}
#inventory-dialog#inventory-dialog#inventory-dialog .comparison-item h3{font-size:13px;line-height:18px}
#inventory-dialog#inventory-dialog#inventory-dialog .inspection-body{height:auto;max-height:none;min-height:80px;flex:1;overflow:auto}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-option-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
#inventory-dialog#inventory-dialog#inventory-dialog .gear-compare-pane{min-width:0;width:auto;max-width:none;overflow:visible;border-radius:2px}
#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector .item-actions{display:flex;flex-wrap:wrap;gap:5px;position:static;flex-shrink:0;margin-top:auto;padding-top:7px;background:#0c141f}
#inventory-dialog#inventory-dialog#inventory-dialog #item-inspector .item-actions>button{flex:1 1 70px;min-height:38px;font-size:12px;padding:5px;border-radius:2px}
#inventory-dialog#inventory-dialog#inventory-dialog>.shop,#inventory-dialog#inventory-dialog#inventory-dialog>.inventory-skill-footer{min-height:0;display:flex;margin:0;padding:0}
#inventory-dialog#inventory-dialog#inventory-dialog>.shop button,#inventory-dialog#inventory-dialog#inventory-dialog>.inventory-skill-footer>button{height:38px;min-height:38px;padding:5px 8px;font-size:12px;background:#1a2938;border:1px solid #45586a;border-radius:2px}

/* Crafting: recipe list, result preview, material checklist; no overlapping sticky panels. */
#crafting-dialog#crafting-dialog#crafting-dialog[open]{display:grid;grid-template-columns:1fr;grid-template-rows:44px auto minmax(0,1fr) auto;width:min(1240px,calc(var(--app-width) - 24px));height:min(800px,calc(var(--app-height) - 24px));padding:12px;gap:8px;overflow:hidden}
#crafting-dialog#crafting-dialog#crafting-dialog[data-category=home]{grid-template-rows:44px minmax(0,1fr) auto}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-content{min-height:0;overflow:hidden}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-home{grid-template-columns:repeat(4,minmax(0,1fr));height:100%;gap:10px;align-content:center;padding:8px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-home button{min-height:150px;padding:18px 10px;gap:8px;border-radius:2px;background:linear-gradient(160deg,#253448,#101924);border-color:#586a7d}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-home strong{font-size:18px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-home span{font-size:12px;line-height:1.5}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-nav{display:flex;flex-wrap:nowrap;overflow:auto;gap:0;border-bottom:1px solid #4e5e6e}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-nav button{white-space:nowrap;border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;min-height:36px;font-size:13px;flex:1;padding:6px 10px}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-nav button[aria-current=true]{color:#b7ddfb;border-bottom-color:#a4ccee;background:#24394d80}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-category{display:block;min-height:0;height:100%;overflow:auto}
#crafting-dialog#crafting-dialog#crafting-dialog .recipe-back{display:none}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-layout{display:grid;grid-template-columns:minmax(160px,.65fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr);height:100%;min-height:0;margin:0;gap:10px;overflow:hidden}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-recipes{display:flex;flex-direction:column;min-height:0;height:100%;padding:8px;overflow:hidden;border-radius:2px;background:#0c1520;border:1px solid #3e4f60}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-section-heading{flex-shrink:0;gap:5px;margin-bottom:8px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-section-heading h3{font-size:14px;margin:0}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-list,#crafting-dialog#crafting-dialog#crafting-dialog #pendant-crafting{display:flex;flex-direction:column;flex:1;min-height:0;height:auto;max-height:none;overflow:auto;gap:5px;padding:0}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-recipe,#crafting-dialog#crafting-dialog#crafting-dialog .pendant-craft-button{min-height:56px;padding:7px;flex:0 0 auto;border-radius:2px;background:#162333;border:1px solid #354a5e;gap:6px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-recipe.selected,#crafting-dialog#crafting-dialog#crafting-dialog .pendant-craft-button.selected{background:linear-gradient(90deg,#2b4e6d,#1a2b3d);border-color:#8ebde0;box-shadow:inset 3px 0 #b4dfff}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-recipe strong,#crafting-dialog#crafting-dialog#crafting-dialog .pendant-craft-button strong{font-size:13px;line-height:18px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-recipe small,#crafting-dialog#crafting-dialog#crafting-dialog .pendant-craft-button small{font-size:11px;line-height:16px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-recipe:after{display:none}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-detail{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr);padding:0;gap:10px;height:100%;min-height:0;overflow:hidden;border:0;border-radius:0;background:none}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-result-pane,#crafting-dialog#crafting-dialog#crafting-dialog .craft-material-pane{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid #405164;background:#111b28;scrollbar-width:thin}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-result-pane{background:radial-gradient(ellipse at 50% 18%,#2b425770,transparent 70%),#111b28}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head{flex-direction:column;align-items:center;text-align:center;gap:10px;padding-bottom:12px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head>img{width:88px;height:88px;flex-basis:88px;padding:5px;border:1px solid var(--grade,#728599);background:#090f19}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head h3{font-size:18px;line-height:25px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head p{font-size:12px;line-height:18px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-combo{display:flex;align-items:center;gap:7px;flex-basis:auto;border-radius:2px;font-size:11px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-combo b{font-size:13px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-stats{grid-template-columns:1fr;gap:5px;margin:10px 0}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-stats>div{display:flex;justify-content:space-between;gap:8px;grid-column:auto;background:#0c1520;padding:7px;border-radius:0}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-stats b{font-size:13px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-reference{font-size:11px;line-height:1.7;color:#92a4b6}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-detail h4{font-size:14px;line-height:20px;margin:0 0 10px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirements{gap:5px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:2px 7px;padding:8px 5px;border-radius:0;background:#0b1521;border-bottom:1px solid #314356;align-items:center}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement .requirement-icon{grid-column:1;grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;font-size:21px;color:#d2b97f;border:1px solid #4b5a6a;background:#080e17}
.requirement-icon img{width:100%;height:100%;object-fit:contain}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement .requirement-name{grid-column:2;grid-row:1/3;font-size:12px;line-height:18px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement>b{grid-column:3;grid-row:1;font-size:12px;white-space:nowrap}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement>small{grid-column:3;grid-row:2;font-size:10px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement.missing b,#crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement.missing small{color:#ff929a}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-button{position:static;min-height:44px;padding:8px;font-size:13px;margin-top:10px;box-shadow:none;border-radius:2px}
#crafting-dialog#crafting-dialog#crafting-dialog .crafting-drop-hint{font-size:11px;line-height:1.7;margin:10px 0}
#crafting-dialog#crafting-dialog#crafting-dialog #crafting-material-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:none;overflow:visible;gap:6px}
#crafting-dialog#crafting-dialog#crafting-dialog .craft-material{border-radius:2px;background:#132131}
#crafting-dialog#crafting-dialog#crafting-dialog #refining-actions{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Other management windows use the same chrome and bounded content panes. */
#skills-dialog#skills-dialog#skills-dialog[open]{display:flex;flex-direction:column;gap:7px;padding:12px;width:min(1240px,calc(var(--app-width) - 24px));height:min(850px,calc(var(--app-height) - 24px));overflow:hidden}
#skills-dialog#skills-dialog#skills-dialog>.skills-mode-tabs,#skills-dialog#skills-dialog#skills-dialog>.skill-preset-bar,#skills-dialog#skills-dialog#skills-dialog>.selection-status{flex-shrink:0}
#skills-dialog#skills-dialog#skills-dialog .specialization-layout{display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0;height:auto;gap:10px;overflow:hidden}
#skills-dialog#skills-dialog#skills-dialog #skill-collection{display:flex;flex-direction:column;min-height:0;max-height:none;height:100%;overflow:auto;padding:2px;gap:5px;width:100%}
#skills-dialog#skills-dialog#skills-dialog .skill-list-button{min-width:0;min-height:48px;width:100%;flex:none;border-radius:2px;background:#192737}
#skills-dialog#skills-dialog#skills-dialog #specialization-detail{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);grid-template-rows:auto;min-height:0;max-height:none;height:100%;overflow:auto;padding:10px;background:#101b28;border-radius:2px}
#skills-dialog#skills-dialog#skills-dialog[data-skills-tab=growth] .specialization-layout,#skills-dialog#skills-dialog#skills-dialog[data-skills-tab=passive] .specialization-layout{grid-template-columns:1fr}
#skills-dialog#skills-dialog#skills-dialog[data-skills-tab=growth] #specialization-detail,#skills-dialog#skills-dialog#skills-dialog[data-skills-tab=passive] #specialization-detail{display:block}
#skills-dialog#skills-dialog#skills-dialog .trait-option,#skills-dialog#skills-dialog#skills-dialog .core-option,#skills-dialog#skills-dialog#skills-dialog .point-row{border-radius:2px}
#live-dialog#live-dialog#live-dialog[open]{height:min(840px,calc(var(--app-height) - 24px));width:min(1160px,calc(var(--app-width) - 24px));overflow:auto;padding:12px}
#gems-dialog#gems-dialog#gems-dialog[open]{display:flex;flex-direction:column;width:min(1120px,calc(var(--app-width) - 24px));height:min(820px,calc(var(--app-height) - 24px));overflow:hidden;padding:12px}
#gems-dialog#gems-dialog#gems-dialog #gems-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#gems-dialog#gems-dialog#gems-dialog .gem-tabs{display:flex;flex-shrink:0;flex-wrap:nowrap;min-height:40px;padding:0;overflow:auto}
#gems-dialog#gems-dialog#gems-dialog .gem-tabs button{flex:1;min-height:40px;font-size:13px;white-space:nowrap;padding:6px}
#gems-dialog#gems-dialog#gems-dialog .gem-page{flex:1;min-height:0;overflow:auto;padding:12px 2px}
#gems-dialog#gems-dialog#gems-dialog .gem-skill-card,#gems-dialog#gems-dialog#gems-dialog .gem-gear,#gems-dialog#gems-dialog#gems-dialog .gem-synthesis{border-radius:2px;background:#142231;border-color:#3e5368}
#gems-dialog#gems-dialog#gems-dialog .gem-card-heading{min-height:60px;padding:9px}
#gems-dialog#gems-dialog#gems-dialog .gem-bag-levels{gap:6px;padding:10px}
#gems-dialog#gems-dialog#gems-dialog .gem-bag-levels button{min-height:88px;padding:7px 3px;border-radius:2px}
#gems-dialog#gems-dialog#gems-dialog .gem-badge{border-radius:2px}
#gems-dialog#gems-dialog#gems-dialog .gem-primary:not(:disabled){background:linear-gradient(#d8c69e,#a99369)!important;color:#171c21!important;border-color:#e4d6b5!important}

/* Narrow landscape uses a readable comparison column; detail remains scrollable. */
@media(max-width:1000px){
 :root{--hud-actions-width:202px}
 #viewport#viewport#viewport .hud-top{grid-template-columns:minmax(160px,.85fr) minmax(150px,1fr) var(--hud-actions-width);gap:8px}
 #inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:118px minmax(200px,.9fr) minmax(240px,1.1fr);gap:8px}
 #inventory-dialog#inventory-dialog#inventory-dialog .gear-option-compare{display:flex;flex-direction:column;gap:8px}
 #inventory-dialog#inventory-dialog#inventory-dialog .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #inventory-dialog#inventory-dialog#inventory-dialog .auto-equip-help{display:none}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-layout{grid-template-columns:minmax(150px,.55fr) minmax(0,1.8fr);gap:8px}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-detail{gap:7px}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-result-pane,#crafting-dialog#crafting-dialog#crafting-dialog .craft-material-pane{padding:8px}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement{grid-template-columns:28px minmax(0,1fr);padding:7px 4px}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement .requirement-icon{width:28px;height:28px;grid-row:1}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement .requirement-name{grid-column:2;grid-row:1}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement>b{grid-column:1/3;grid-row:2;text-align:right}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-requirement>small{grid-column:1/3;grid-row:3}
 #skills-dialog#skills-dialog#skills-dialog .specialization-layout{grid-template-columns:136px minmax(0,1fr)}
 #skills-dialog#skills-dialog#skills-dialog #specialization-detail{display:flex;flex-direction:column}
}
@media(max-width:700px){
 :root{--hud-actions-width:176px}
 #viewport#viewport#viewport .hud-top{grid-template-columns:minmax(140px,1fr) minmax(130px,1fr) var(--hud-actions-width);gap:6px;inset-inline:6px}
 #inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:100px minmax(170px,.9fr) minmax(200px,1.1fr);gap:6px}
 #inventory-dialog#inventory-dialog#inventory-dialog .equipment-panel,#inventory-dialog#inventory-dialog#inventory-dialog .items-panel{padding:5px;gap:5px}
 #inventory-dialog#inventory-dialog#inventory-dialog #equipment-slots{gap:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog #item-inspector{padding:6px}
 #inventory-dialog#inventory-dialog#inventory-dialog .inspection-heading{grid-template-columns:1fr}
 #inventory-dialog#inventory-dialog#inventory-dialog .comparison-item:not(.comparison-selected){display:none}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-layout{grid-template-columns:140px minmax(0,1fr)}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-detail{display:flex;flex-direction:column;overflow:auto}
 #crafting-dialog#crafting-dialog#crafting-dialog .craft-result-pane,#crafting-dialog#crafting-dialog#crafting-dialog .craft-material-pane{flex:none;overflow:visible}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head{flex-direction:row;text-align:left;gap:8px}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-item-head>img{width:50px;height:50px;flex-basis:50px}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-home{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-home button{min-height:120px;padding:10px}
 #gems-dialog#gems-dialog#gems-dialog .gem-bag-list,#gems-dialog#gems-dialog#gems-dialog .gem-gear-list{grid-template-columns:1fr}
}
/* Low-height browser windows keep touch controls full size and use internal scrolling. */
@media(max-height:560px) and (min-width:480px){
 :root{--header-height:40px}
 #game-shell#game-shell .wordmark.battle-brand{height:36px}
 #game-shell#game-shell .battle-logo{height:26px}
 #game-shell#game-shell .top-actions button{height:34px;min-height:34px}
 #viewport#viewport#viewport .hud-top{top:6px}
 #viewport#viewport#viewport .player-panel{padding:6px;gap:6px}
 #viewport#viewport#viewport .player-panel .portrait{display:none}
 #viewport#viewport#viewport .player-name .compact-level{display:inline;font-size:10px;margin-left:auto}
 #viewport#viewport#viewport #power-label{font-size:10px}
 #viewport#viewport#viewport .stage-hud-main{padding:5px 8px;gap:1px}
 #viewport#viewport#viewport #stage-hud-region{font-size:10px;line-height:13px}
 #viewport#viewport#viewport #stage-hud-stage{font-size:17px;line-height:20px}
 #viewport#viewport#viewport .stage-hud-detail{font-size:10px;line-height:14px}
 #viewport#viewport#viewport #target-panel{padding:3px 6px}
 #viewport#viewport#viewport #combat-menu-items{position:fixed;top:calc(var(--app-top,0px) + var(--header-height) + env(safe-area-inset-top,0px) + 6px);left:max(6px,env(safe-area-inset-left,0px));right:auto;width:calc(var(--app-width) - var(--hud-actions-width) - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-height:calc(var(--app-height) - var(--header-height) - var(--skillbar-height) - 32px);grid-template-columns:repeat(3,minmax(0,1fr))}
 #viewport#viewport#viewport #combat-menu-items .bag-button{min-height:48px;flex-direction:row}
 #viewport#viewport#viewport .skills-wrap{left:auto;right:max(8px,env(safe-area-inset-right,0px));bottom:max(9px,env(safe-area-inset-bottom,0px));top:auto;transform:none;width:var(--dock-width);height:var(--skillbar-height);max-width:none}
 #viewport#viewport#viewport .skillbar{display:block;position:relative;padding:0;width:100%;height:100%;border:0;background:none;box-shadow:none}
 #viewport#viewport#viewport .skillbar .skill{position:absolute;left:var(--control-x);top:var(--control-y);width:var(--control-size);height:var(--control-size);min-width:0}
 #viewport#viewport#viewport .skillbar .skill-name{bottom:0;font-size:10px;line-height:13px;background:#091421d9;width:100%}
 #viewport#viewport#viewport .skillbar .skill-level{top:-9px;line-height:12px;font-size:9px}
 #viewport#viewport#viewport #toast-stack{top:88px;width:min(220px,28%)}
 #viewport#viewport#viewport .bottom-left{width:calc(100% - var(--dock-width) - 28px);max-width:240px;max-height:35%}
 #viewport#viewport#viewport .loot-entry:not(:last-child){display:none}
 #viewport#viewport#viewport .currency>span:not(.currency-symbol){display:none}
 #viewport#viewport#viewport #context-hint{display:none}
 #inventory-dialog#inventory-dialog#inventory-dialog[open]{grid-template-rows:36px 30px minmax(0,1fr) 34px;padding:7px;gap:5px;height:calc(var(--app-height) - 16px)}
 #inventory-dialog#inventory-dialog#inventory-dialog #character-stats .stats-grid{display:none}
 #inventory-dialog#inventory-dialog#inventory-dialog #character-detail-button{min-height:30px;font-size:12px;padding:3px 8px}
 #inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{min-height:0;height:auto}
 #inventory-dialog#inventory-dialog#inventory-dialog>.shop button,#inventory-dialog#inventory-dialog#inventory-dialog>.inventory-skill-footer>button{min-height:34px;height:34px}
 #inventory-dialog#inventory-dialog#inventory-dialog .items-heading h3{margin-bottom:4px}
 #inventory-dialog#inventory-dialog#inventory-dialog .inventory-heading-actions button{min-height:30px;font-size:10px;padding:3px}
 #inventory-dialog#inventory-dialog#inventory-dialog .dismantle-toolbar{padding-top:3px}
 #inventory-dialog#inventory-dialog#inventory-dialog #dismantle-preview{display:none}
 #inventory-dialog#inventory-dialog#inventory-dialog #item-inspector .inspection-heading{flex-shrink:0}
 #inventory-dialog#inventory-dialog#inventory-dialog .inspection-body{flex:none;min-height:0;overflow:visible}
 #inventory-dialog#inventory-dialog#inventory-dialog #item-inspector .item-actions{position:static}
 #crafting-dialog#crafting-dialog#crafting-dialog[open]{grid-template-rows:36px 34px minmax(0,1fr) auto;gap:5px;padding:7px;height:calc(var(--app-height) - 16px)}
 #crafting-dialog#crafting-dialog#crafting-dialog[data-category=home]{grid-template-rows:36px minmax(0,1fr) auto}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-home button{min-height:120px}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-section-heading span{display:none}
 #crafting-dialog#crafting-dialog#crafting-dialog .crafting-status{font-size:11px;min-height:14px}
 #skills-dialog#skills-dialog#skills-dialog[open],#gems-dialog#gems-dialog#gems-dialog[open]{gap:5px;padding:7px;height:calc(var(--app-height) - 16px)}
 :root body dialog .dialog-heading{min-height:34px;padding-bottom:4px}
 :root body dialog .dialog-heading h2{font-size:18px;line-height:24px}
 :root body dialog .close-dialog{width:34px;height:34px;min-width:34px;min-height:34px}
 #skills-dialog#skills-dialog#skills-dialog .skill-preset-bar{margin:0;min-height:30px}
 #skills-dialog#skills-dialog#skills-dialog .skill-preset-bar>span{display:none}
 #skills-dialog#skills-dialog#skills-dialog .skill-preset button{min-height:30px}
}
/* The orientation gate is a top-layer dialog, including when a bag is already open. */
#orientation-dialog#orientation-dialog#orientation-dialog[open]{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;top:var(--app-top,0px)!important;left:var(--app-left,0px)!important;transform:none!important;width:var(--app-width,100vw)!important;height:var(--app-height,100dvh)!important;max-width:none!important;max-height:none!important;padding:28px;border:0!important;background:radial-gradient(ellipse at 50% 30%,#21364d,#080f19 70%)!important}
#orientation-dialog .rotation-symbol{font-size:80px;color:#b6d9f1;line-height:1}
#orientation-dialog h2{font-size:22px;line-height:1.5;margin:0;color:#e7dfcc}
#orientation-dialog p{font-size:15px;line-height:1.9;color:#afc0d2;margin:0}
#orientation-dialog small{font-size:12px;line-height:1.6;color:#8fa2b6;max-width:270px}
#orientation-dialog .gold-button{min-height:48px;min-width:200px}
@media(min-width:480px) and (max-width:599px){
 #inventory-dialog#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:86px minmax(142px,.9fr) minmax(174px,1.1fr);gap:5px}
 #viewport#viewport#viewport .bottom-left{display:none}
}