/* v41: one presentation layer. World geometry and combat rules remain independent.
   Sizes are CSS pixels, bounded by visible viewport and safe areas, not hardware pixels. */
:root{
 --sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
 --serif:'Noto Serif KR',Georgia,serif;
 --text:#e9edf0;--muted:#9aadb9;--cyan:#85c9c5;--gold:#d4b77f;
 --line:rgba(175,192,201,.22);--glass:rgba(9,18,27,.88);
 --ui-panel:linear-gradient(150deg,rgba(21,34,45,.95),rgba(8,17,26,.95));
 --ui-border:rgba(155,176,189,.25);--ui-highlight:rgba(227,233,235,.07);
 --edge:clamp(10px,1.05vw,22px);--header-height:60px;
 --ui-left:max(var(--edge),var(--safe-left,0px));--ui-right:max(var(--edge),var(--safe-right,0px));
 --ui-bottom:max(10px,var(--safe-bottom,0px));--skill-size:clamp(50px,3.55vw,66px);
}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{transition:background-color .15s,border-color .15s,box-shadow .15s}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
button:disabled{cursor:not-allowed}
#game-shell{left:var(--app-left,0px);right:auto;width:var(--app-width,100vw);height:var(--app-height,100dvh);padding-bottom:0}
#game-shell .topbar{height:calc(var(--header-height) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--ui-right) 0 var(--ui-left);display:flex;gap:18px;background:linear-gradient(90deg,#08121ce8,#0c1722df);border-bottom:1px solid #a9b6bc2b;box-shadow:0 3px 18px #0003;z-index:9}
#game-shell .regions{display:none}
#game-shell .wordmark.battle-brand{display:flex;position:relative;flex-direction:column;justify-content:center;gap:0;width:98px;height:58px;flex-shrink:0;overflow:hidden}
#game-shell .battle-logo{width:100%;height:43px;position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
#game-shell .battle-logo img{position:absolute;width:160px;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-51%)}
#game-shell .battle-brand>span{font:600 9px Georgia,serif;letter-spacing:.32em;text-indent:.32em;color:#b8d7dc;line-height:12px}
#game-shell .top-actions{margin-left:auto;gap:7px;height:auto}
#game-shell .top-actions .mode-label{font-size:12px;color:#92a4ae;display:block}
#game-shell .top-actions button{display:block;border:1px solid var(--ui-border);background:#11213160;border-radius:6px;min-height:34px;color:#becbd3}
#game-shell .top-actions button:hover{background:#1a3440;border-color:#799aab}
#game-shell .icon-button{width:34px;height:34px;font-size:17px}
#game-shell .main-menu-button{font-size:12px;padding:5px 10px}
#game-shell #return-town-button{position:static;display:flex;align-items:center;justify-content:center;width:auto;min-width:80px;min-height:34px;padding:5px 11px;gap:0;border:1px solid #90aea42b;border-radius:6px;background:#14272b80;box-shadow:none;color:#c0d5d1}
#game-shell #return-town-button strong{font-size:12px;line-height:20px}
#game-shell #return-town-button small{display:none}
#game-shell .glass{background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:0 4px 20px #0003,inset 0 1px var(--ui-highlight);backdrop-filter:none}
#viewport .location,#viewport #context-hint{display:none}
#viewport .vignette{box-shadow:inset 0 -90px 80px -40px #030e16bb,inset 0 45px 55px -45px #040a11}
/* Three separate top anchors; stage and target are never repeated in the side rail. */
#viewport .player-panel{position:absolute;left:var(--ui-left);top:12px;right:auto;width:clamp(246px,20vw,304px);max-width:none;padding:10px;gap:10px;border-radius:8px;pointer-events:none}
#viewport .portrait{display:block;position:relative;width:42px;height:58px;flex-shrink:0;border:1px solid #c8b07966;border-radius:6px;background:#081520}
#viewport .portrait img{object-fit:contain;width:100%;height:100%}
#viewport .portrait span{left:50%;bottom:-5px;transform:translateX(-50%);min-width:26px;height:17px;line-height:17px;font-size:11px;padding:0 4px;background:#d5ba86;color:#1c211f;white-space:nowrap}
#viewport .player-info{min-width:0;flex:1}
#viewport .player-name{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:nowrap;margin-bottom:6px}
#viewport .player-name strong{font-size:14px;line-height:20px;white-space:nowrap}
#viewport .player-name .class-icon{width:18px;height:18px;display:inline-block}
#viewport .player-name>span{font-size:11px;line-height:17px;white-space:nowrap}
#viewport .resource{height:17px;border:1px solid #63809138;border-radius:3px;background:#050e17}
#viewport .resource span{font-size:12px;line-height:15px;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
#viewport .resource.mp{margin-top:4px}
#viewport .resource.hp>i{background:linear-gradient(90deg,#357875,#85c7b1)}
#viewport .resource.mp>i{background:linear-gradient(90deg,#2b506c,#72a4c6)}
#viewport .exp-track{height:2px;margin-top:6px;background:#3a4044}
#viewport .exp-track>i{background:#d1b17a}
#viewport #stage-hud{position:absolute;top:12px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:clamp(280px,24vw,352px);max-width:none;display:flex;align-items:stretch;gap:5px;z-index:6;pointer-events:none}
#viewport .stage-hud-main{flex:1;min-width:0;padding:8px 12px;gap:3px;border:1px solid #9fb2c135;border-radius:8px;background:linear-gradient(150deg,#142431e6,#08131fdf);box-shadow:0 4px 18px #0002;text-align:left;pointer-events:auto}
#viewport #stage-hud-region{font-size:12px;line-height:17px;color:#b6c8cc}
#viewport #stage-hud-difficulty{font-size:12px;line-height:18px;color:#85c9c5}
#viewport #stage-hud-stage{font-size:clamp(19px,1.35vw,24px);line-height:28px;letter-spacing:.035em;color:#eff4f4}
#viewport .stage-hud-detail{font-size:11px;line-height:16px;color:#9ab0bb}
#viewport #stage-hud-progress{font-size:11px;line-height:16px;color:#becbd1;overflow:hidden;text-overflow:ellipsis}
#viewport .stage-hud-track{height:2px;margin-top:1px;background:#89a9aa22}
#viewport .stage-hud-track>i{background:#85c9c5}
#viewport #stage-hud[data-region="dungeon"] .stage-hud-main{border-color:#b7997055;background:linear-gradient(155deg,#35252ae0,#141723df)}
#viewport #stage-hud[data-region="dungeon"] #stage-hud-stage{color:#eac595}
#viewport #auto-run-banner{position:static;inset:auto;transform:none;min-height:0;width:auto;max-width:74px;display:flex;align-items:stretch;padding:0;border:0;background:none;box-shadow:none;pointer-events:auto}
#viewport #auto-run-mode{display:none}
#viewport #auto-run-banner:has(#auto-challenge-button[hidden]):has(#expedition-repeat-cancel[hidden]){display:none}
#viewport #auto-run-banner:has(#expedition-repeat-cancel:not([hidden])){max-width:150px}
#viewport #auto-challenge-button{white-space:normal;min-height:44px;max-width:66px;padding:7px;border:1px solid #83beb744;border-radius:7px;color:#9bd5cf;background:#153134d9;font-size:12px;line-height:19px}
#viewport #target-panel{position:absolute;left:50%;right:auto;top:116px;bottom:auto;transform:translateX(-50%);width:280px;max-width:none;padding:6px 10px;border-radius:6px;pointer-events:none;background:#0d1622c7;border-color:#9fafbb2b;z-index:5}
#viewport #target-name{font-size:12px;line-height:17px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}
#viewport #target-panel .resource{height:13px;margin-top:4px}
#viewport #target-panel .resource span{font-size:10px;line-height:11px}
#viewport #target-panel .resource.enemy>i{background:linear-gradient(90deg,#a75d69,#cf9295)}
#viewport .boss-timer{margin-top:6px}
#viewport .boss-timer strong{font-size:18px;line-height:22px}
#viewport .boss-timer span{font-size:11px}
#viewport .right-hud{position:absolute;right:var(--ui-right);left:auto;top:12px;width:clamp(176px,13vw,214px);max-width:none;z-index:6}
#viewport .minimap{display:block;border-radius:8px;padding:5px 7px}
#viewport .minimap canvas{display:block;width:100%;height:auto;aspect-ratio:190/120;opacity:.85;border:0;border-radius:4px}
#viewport .minimap>div{font-size:10px;display:flex;gap:5px;padding-top:3px;color:#94a9b5}
#viewport #coords{display:none}
#viewport .quest{border:0;border-top:1px solid #b0c0c328;background:linear-gradient(90deg,#111f2de6,#0b1620bb);border-radius:6px;padding:0 10px;margin-top:9px;box-shadow:none}
#viewport #quest-toggle{min-height:34px;gap:5px}
#viewport #quest-title{font-size:12px;font-weight:600}
#viewport .quest-symbol{font-size:16px;color:#baa16e}
#viewport #quest-description{font-size:11px;line-height:1.6;color:#a2b2ba;margin:2px 0 8px}
#viewport .objective{font-size:11px;margin:6px 0;gap:6px}
#viewport .objective b{font-size:11px;color:#d6bc8c}
#viewport .quest-reward{display:none}
#viewport #quest-action{min-height:32px;margin:8px 0 10px;font-size:12px;background:#d3bd8d;color:#17242a;border:1px solid #e5d5b055;border-radius:5px}
/* A quiet lower-left acquisition lane; no loot is placed over the character. */
#viewport .bottom-left{position:absolute;left:var(--ui-left);right:auto;top:auto;bottom:var(--ui-bottom);width:clamp(216px,18vw,280px);max-width:none;display:flex;flex-direction:column;gap:5px;z-index:7;pointer-events:none}
#viewport #loot-feed{display:flex;flex-direction:column;gap:4px;min-height:0;pointer-events:none}
.loot-entry{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;padding:5px 8px;border-left:2px solid var(--loot-color);border-bottom:1px solid #95acb520;border-radius:3px;background:linear-gradient(90deg,#0b1726eb,#12232ace 80%,#11202a60);animation:loot-arrive .18s ease-out both;text-shadow:0 1px 2px #000}
.loot-entry img{width:30px;height:30px;object-fit:contain;flex-shrink:0;background:#0b152040;border-radius:3px}
.loot-entry>div{min-width:0;flex:1}
.loot-entry strong{display:block;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e0e9ed}
.loot-entry small{display:block;font-size:10px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--loot-color)}
.loot-entry.exceptional{border-left-width:3px;border-color:#d7bc78;box-shadow:inset 0 0 18px #dcbe6315;background:linear-gradient(90deg,#302a20f0,#19232add)}
.loot-special-mark{font-size:15px;color:#e8cf90}
.loot-material-mark{width:30px;text-align:center;font-size:20px;color:var(--loot-color);flex-shrink:0}
#viewport #kina-gain{font-size:12px;line-height:20px;font-variant-numeric:tabular-nums;color:#e2c896;text-shadow:0 1px 3px #000;padding:0 6px}
#viewport .currency{display:flex;flex-wrap:nowrap;align-items:center;padding:8px 10px;gap:6px;max-width:100%;border:0;border-top:1px solid #a9b6ba28;border-radius:5px;background:linear-gradient(90deg,#0c1927e0,#0c18257a);box-shadow:none}
#viewport .currency b{font-size:13px;font-variant-numeric:tabular-nums;color:#e0e9eb;min-width:0;overflow:hidden;text-overflow:ellipsis}
#viewport .currency>span{font-size:10px;color:#9fb1bd}
#viewport .currency .currency-symbol{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;line-height:20px}
#viewport .currency .currency-symbol>span{position:absolute;inset:0;display:grid;place-items:center}
#viewport .currency .currency-symbol>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #000a)}
#viewport .currency .coin{font-size:17px;color:#cfb680}
#viewport .currency .aether{font-size:18px;color:#82bebd;margin-left:6px}
#viewport .save-label{display:block;font-size:10px;line-height:15px;color:#8caaa1;padding-left:3px}
#viewport #combat-log{position:static;display:none}
#viewport #toast-stack{position:absolute;top:175px;right:var(--ui-right);left:auto;bottom:auto;transform:none;width:260px;max-width:28%;display:flex;align-items:stretch;flex-direction:column;gap:5px;pointer-events:none;z-index:11}
#viewport .toast{font-size:12px;line-height:1.6;padding:7px 10px;border:1px solid #8ea9b636;border-left:2px solid #8db7b4;border-radius:5px;color:#d9e5e7;background:#0a1b29eb;box-shadow:0 4px 14px #0002;text-align:left;max-width:100%;overflow-wrap:anywhere}
#viewport .toast.warn{border-left-color:#e5b17d;color:#f3d2af}
#viewport .toast.success{border-left-color:#8cbfa3}
/* Menus are an edge rail, not a second combat panel. */
#viewport .bottom-right{position:absolute;right:var(--ui-right);left:auto;top:auto;bottom:var(--ui-bottom);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:156px;max-width:none;z-index:8;transform:none;pointer-events:none}
#viewport .bottom-right .bag-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;min-width:0;width:100%;padding:6px 4px;pointer-events:auto;border-radius:7px;border:1px solid #94a9b329;background:linear-gradient(150deg,#162533dd,#0a1523e6);box-shadow:inset 0 1px #eafaff08,0 3px 10px #0002;backdrop-filter:none}
#viewport .bottom-right .bag-button:hover{background:#243c49;border-color:#8bb1b388}
#viewport .menu-glyph{display:block;flex-shrink:0;width:20px;height:20px;color:#b7c9ce}
#viewport .bottom-right .bag-button>img{display:block;width:20px;height:20px;object-fit:contain}
#viewport .bottom-right .bag-button>div{font-size:12px;line-height:16px;display:flex;align-items:center;gap:3px;white-space:nowrap;color:#cdd8df}
#viewport .bottom-right .bag-button small{display:none}
#viewport .bottom-right .bag-button>b{position:absolute;top:-3px;right:-3px;font-size:10px;line-height:15px;min-width:15px;height:15px;border-radius:50%;color:#18252a;background:#ddc38c;border:1px solid #efdab0}
#viewport #auto-skills-button{order:-1;border-color:#7bacaa60;min-height:50px}
#viewport #auto-skills-button[aria-pressed="true"]{background:linear-gradient(150deg,#234844ec,#102d30e0);border-color:#8dc5bc;box-shadow:inset 0 0 15px #80c9af16}
#viewport #auto-skills-button>div{display:flex;flex-direction:column;font-size:12px;line-height:15px;color:#bddbd8}
#viewport #auto-skills-state{font-size:11px;line-height:14px;padding:1px 4px;background:none;color:#8de3cd}
#viewport #auto-skills-button[aria-pressed="false"] #auto-skills-state{color:#b3c0c8}
/* Icon artwork stays intact. Labels sit above/below the circular art, never on cooldown digits. */
#viewport .skills-wrap{position:absolute;left:50%;right:auto;top:auto;bottom:var(--ui-bottom);transform:translateX(-50%);width:calc(var(--skill-size)*11 + 10*6px + 24px);max-width:calc(100% - 16px);height:calc(var(--skill-size) + 36px);z-index:8;pointer-events:none}
#viewport .skillbar{position:relative;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;width:100%;height:100%;padding:17px 12px 19px;border:0;border-top:1px solid #b1c3c92d;border-radius:12px;background:linear-gradient(180deg,#07131de8,#0e1a2677);box-shadow:0 2px 20px #0003;backdrop-filter:none;pointer-events:none}
#viewport .skillbar .skill{position:relative;left:auto;top:auto;display:block;width:100%;height:var(--skill-size);min-width:0;padding:0;border-radius:50%;border:1px solid #b4c3c470;background:#0b1724;box-shadow:0 2px 8px #0007,inset 0 0 0 2px #8eb9c11a;overflow:visible;pointer-events:auto;touch-action:none}
#viewport .skillbar .skill-icon{position:absolute;inset:3px;display:block;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:50%;opacity:.92}
#viewport .skillbar .skill-name{position:absolute;left:50%;right:auto;top:auto;bottom:-16px;transform:translateX(-50%);width:calc(100% + 9px);padding:0;background:none;color:#d1dce2;font-size:11px;line-height:14px;font-weight:500;text-shadow:0 1px 3px #000,0 1px 8px #000;white-space:nowrap;letter-spacing:-.04em;overflow:visible}
#viewport .skillbar .skill-level{position:absolute;display:block;top:-17px;bottom:auto;right:50%;transform:translateX(50%);min-width:32px;text-align:center;color:#e2c995;font-size:10px;line-height:14px;padding:0 3px;border:0;border-radius:3px;background:#0a1626cf;text-shadow:0 1px 2px #000;z-index:3}
#viewport .skillbar .skill kbd{position:absolute;display:block;left:-1px;top:0;bottom:auto;right:auto;padding:0 3px;border:1px solid #96afb54d;background:#081523d9;border-radius:3px;font-size:9px;line-height:12px;color:#b6c7d1;z-index:4}
#viewport .skillbar .cooldown{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;font:700 25px var(--sans);text-shadow:0 2px 3px #000;color:#fff;pointer-events:none;background:none;z-index:2}
#viewport .skillbar .skill.on-cooldown .cooldown{background:#030c1966}
#viewport .skillbar .skill.no-mana{border-color:#497598}
#viewport .skillbar .skill[data-skill="attack"]{border-color:#d8c297;box-shadow:0 0 0 1px #b79a5430,inset 0 0 0 2px #ab91683a,0 4px 9px #0006}
#viewport .skillbar .skill[data-skill="potion"]{border-color:#bc899b}
#viewport .skillbar .skill[data-skill="dodge"]{border-color:#83bfba}
#viewport .skillbar .skill:active{filter:brightness(1.2);border-color:#c4ede4}
#viewport .interact-wrap{position:absolute;left:50%;right:auto;top:auto;bottom:calc(var(--skill-size) + 60px);transform:translateX(-50%);z-index:8}
#viewport .interact-button{min-height:40px;padding:6px 15px;border-radius:7px;background:#122b36e6;border:1px solid #aac9c578;font-size:13px}
#viewport #dungeon-banner{top:25%;width:min(440px,80%);pointer-events:none}
#viewport #dungeon-banner strong{font-size:24px;letter-spacing:.06em}
/* Same palette for all windows; use internal scrolling, not scale(transform). */
dialog#inventory-dialog,dialog#skills-dialog,dialog#crafting-dialog,dialog#live-dialog,dialog#stages-dialog,dialog#merchant-dialog,dialog.save-dialog,dialog#help-dialog{
 box-sizing:border-box;position:fixed;left:calc(var(--app-left,0px) + var(--app-width,100vw)/2);top:calc(var(--app-top,0px) + max(12px,env(safe-area-inset-top,0px)));bottom:auto;right:auto;transform:translateX(-50%);margin:0;
 max-width:calc(var(--app-width,100vw) - 24px - var(--safe-left,0px) - var(--safe-right,0px));
 max-height:calc(var(--app-height,100dvh) - max(12px,env(safe-area-inset-top,0px)) - max(12px,var(--safe-bottom,0px)));
 border:1px solid #8eabbb55;border-top-color:#b9c7cf88;border-radius:12px;background:linear-gradient(130deg,#142333fa,#091521fc 58%,#102333fa);color:#e5ebf0;box-shadow:0 25px 90px #0009,inset 0 1px #ffffff06;padding:18px;
}
dialog::backdrop{background:#020912aa;backdrop-filter:blur(3px)}
dialog .dialog-heading{border-bottom:1px solid #b0c2ca2e;padding-bottom:11px;margin:0;flex-shrink:0}
dialog .dialog-heading h2{font-family:var(--sans);font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.045em;margin:3px 0 0}
dialog .dialog-heading .eyebrow{font-size:10px;letter-spacing:.18em;color:#8eaeb7}
dialog .close-dialog{flex-shrink:0;width:38px;height:38px;min-height:38px;border-radius:6px;background:#14283b90;border:1px solid #a8bdc647;color:#cedae1;font-size:26px;line-height:1}
dialog .close-dialog:hover{background:#243e4c;border-color:#bfd9df}
dialog input,dialog select,dialog textarea{font-family:var(--sans);border-color:#7c98a954;background:#0b1b2b;color:#e3edf2;max-width:100%;min-width:0}
dialog button.gold-button{background:linear-gradient(135deg,#dbbf88,#bda372);color:#16202b;border-color:#ead2a87d;box-shadow:inset 0 1px #ffffff33}
dialog button.secondary-button,dialog button.small-button{background:#183044;border:1px solid #7899ab58;color:#cbdae3}
dialog .dialog-footer{font-size:12px;line-height:1.6;color:#99afbd;padding-top:9px;margin-top:8px;border-top:1px solid #b0c2ca28}
#inventory-dialog#inventory-dialog{width:1360px;height:calc(var(--app-height) - 24px);overflow:hidden}
#inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:minmax(150px,.62fr) minmax(245px,1fr) minmax(360px,2.3fr);gap:14px;min-height:0}
#inventory-dialog#inventory-dialog .gear-tile{border-color:color-mix(in srgb,var(--rarity) 65%,#2b3947);border-radius:7px;background:linear-gradient(145deg,#1e3445,#102232);box-shadow:inset 0 1px #effaff0a}
#inventory-dialog#inventory-dialog .gear-tile.selected{background:#234851;border-color:#a8d9cf;outline:1px solid #a0ddd2;outline-offset:2px}
#inventory-dialog#inventory-dialog #item-inspector{border-radius:8px;border-color:#7899ad45;background:#081622b0}
#inventory-dialog#inventory-dialog .comparison-item{border-radius:6px;background:#172b3c;border-color:#7e96a43b}
#inventory-dialog#inventory-dialog .comparison-selected{background:#1a393e;border-color:#88b6ae77}
#inventory-dialog#inventory-dialog .gear-option-compare{border-color:#8ea6b033;background:#0d20316b}
#inventory-dialog#inventory-dialog #dismantle-preview{font-size:12px;line-height:18px;white-space:normal;overflow:visible;color:#bacbd7;max-height:72px;overflow-y:auto}
#inventory-dialog#inventory-dialog .inventory-actions{gap:6px}
#skills-dialog#skills-dialog{width:1180px;height:calc(var(--app-height) - 24px)}
#skills-dialog#skills-dialog .skill-list-button{background:#142c3e;border-color:#8baaba38;border-radius:7px}
#skills-dialog#skills-dialog .skill-list-button.active{background:#21444a;border-color:#9ac7bd}
#skills-dialog#skills-dialog .skill-overview{border-radius:9px;background:#112839;border-color:#7f9aaa45}
#skills-dialog#skills-dialog .trait-option{border-radius:8px;background:#182e40;border-color:#83a0b247;box-shadow:inset 2px 0 #83a0b260}
#skills-dialog#skills-dialog .trait-option[data-state="active"]{background:linear-gradient(120deg,#21483f,#17383b);border-color:#8dc7b7;box-shadow:inset 3px 0 #a9e5cd}
#skills-dialog#skills-dialog .core-option{border-radius:8px;background:#202b32;opacity:.9;filter:none;border-color:#9b8e744f;box-shadow:none}
#skills-dialog#skills-dialog .core-option[data-state="active"]{background:linear-gradient(135deg,#594621,#263232);border:2px solid #e5cd8d;box-shadow:inset 3px 0 #f1dcad,0 0 12px #bda15b25;transform:none;opacity:1}
#skills-dialog#skills-dialog .core-option[data-state="active"] .core-number{background:#ab8744;color:#fff7df}
#skills-dialog .passive-card{border-color:#9cb2bc36;background:#162c3cd9;border-radius:8px}
#skills-dialog .passive-card>img{border:1px solid #abc6cd4d;border-radius:6px}
#skills-dialog .passive-copy small{font-size:13px;line-height:1.55}
#crafting-dialog#crafting-dialog{width:1120px;height:calc(var(--app-height) - 24px);display:none;overflow-y:auto}
#crafting-dialog#crafting-dialog[open]{display:flex;flex-direction:column;gap:12px}
#crafting-dialog .crafting-layout{flex:1 0 340px;min-height:340px;grid-template-columns:260px minmax(0,1fr);gap:12px}
#crafting-dialog .crafting-recipes,#crafting-dialog .crafting-detail,#crafting-dialog .crafting-materials{border:1px solid #8ea7b03d;background:#0c1e2e9c;border-radius:8px}
#crafting-dialog .crafting-materials{overflow:visible;flex:none;padding:11px}
#crafting-dialog .craft-recipe{min-height:45px;border-radius:5px;background:#172d3c;border-color:#93afbb33}
#crafting-dialog .craft-recipe.selected{background:#23414a;border-color:#9acac0;box-shadow:inset 2px 0 #a2daca}
#crafting-dialog .craft-recipe strong{font-size:14px;line-height:20px}
#crafting-dialog .crafting-item-head h3{font-size:22px}
#crafting-dialog .craft-requirement,#crafting-dialog .craft-requirement b{font-size:14px;line-height:22px;padding:6px 2px}
#crafting-dialog .craft-stats span{font-size:12px}
#crafting-dialog .craft-stats b{font-size:16px}
#crafting-dialog .crafting-drop-hint{font-size:12px;line-height:1.7}
/* Fixed grid areas: an unavailable icon must never move a name into the icon column. */
#crafting-dialog #crafting-material-summary{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:80px;gap:8px;max-height:none;overflow:visible}
#crafting-dialog .craft-material{height:80px;min-height:80px;max-height:80px;padding:8px;background:#132a3a;border-color:#8ba4b039;border-radius:5px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:38px 20px;grid-template-areas:"icon name" "icon count";gap:3px 8px;align-items:center;align-content:center;overflow:hidden}
#crafting-dialog .craft-material .craft-material-icon{grid-area:icon;width:30px;height:30px;position:relative;display:flex;align-items:center;justify-content:center;flex:none}
#crafting-dialog .craft-material-icon img{display:block;width:30px;height:30px;object-fit:contain}
#crafting-dialog .craft-material-icon.icon-missing:after{content:'◇';position:absolute;color:var(--material);opacity:.5;font-size:22px;line-height:30px}
#crafting-dialog .craft-material.required-now{border-color:#d9c578;box-shadow:inset 0 0 0 1px #d9c57844}
#crafting-dialog .craft-material .craft-material-name{grid-area:name;align-self:center;min-width:0;max-height:38px;margin:0;font-size:13px;line-height:19px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#crafting-dialog .craft-material .craft-material-count{grid-area:count;align-self:end;min-width:0;max-width:100%;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crafting-dialog .refining-convert{display:block;padding-top:12px;margin-top:10px}
#crafting-dialog #refining-actions{gap:7px;margin-top:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
#crafting-dialog .refining-button{padding:10px;min-height:86px;background:#1c2c37;border-color:#c3a96c66;border-radius:6px}
#crafting-dialog .refining-button strong{font-size:13px;line-height:20px;white-space:normal}
#crafting-dialog .refining-button small,#crafting-dialog .refining-kina-cost{font-size:12px;line-height:19px}
#live-dialog#live-dialog{width:1120px;height:calc(var(--app-height) - 24px);overflow:hidden}
#live-dialog #live-tabs{gap:7px}
#live-dialog #live-tabs button{min-height:38px;border-radius:6px;background:#172c3b;border:1px solid #91a9b544;color:#c2d2dc}
#live-dialog #live-tabs button[aria-selected="true"]{background:#234640;border-color:#9bd2c0;color:#d9f2e9;box-shadow:inset 0 -2px #8dccb7}
#live-dialog .attendance-board{border-color:#b4c0d345;background:linear-gradient(140deg,#25324899,#152334,#292e4755);border-radius:9px}
#live-dialog .icon-calendar .attendance-day{border-radius:6px;border-color:#9ab1c04c;background:linear-gradient(#112232,#172a3d)}
#live-dialog .icon-calendar .attendance-day.milestone{border-color:#d2b777;background:linear-gradient(#3a352a,#1c2b3c)}
#live-dialog .icon-calendar .attendance-day.today{border-color:#e4ce96;box-shadow:inset 0 0 18px #d7be6e22}
#live-dialog .icon-calendar .attendance-day.done{border-color:#729c91;background:linear-gradient(#183d35,#162c34)}
#live-dialog .mail-card,#live-dialog .admin-panel{border-color:#8fadb144;border-radius:8px;background:#122b3c}
#stages-dialog .stage-chapter{border:1px solid #a2b3bf35;background:#132a3a;border-radius:9px}
#stages-dialog .stage-buttons button{border-radius:5px;min-height:40px;background:#223749;border-color:#879faa44}
#stages-dialog .stage-buttons button.completed{background:#244039;color:#acd9c5}
#stages-dialog .stage-buttons button.current{border:1px solid #dfc387;color:#f3dfb5}
#game-shell .result-card{border-radius:12px;border-color:#bead844a;background:linear-gradient(150deg,#1a2937f5,#091821f7);box-shadow:0 24px 80px #0008}
/* Preserve the character-selection artwork; unify only its surface typography. */
.lobby .lobby-entry{border-color:#a4bfce6e;border-radius:12px;background:linear-gradient(150deg,#192b3cf2,#0d1c2ef5);box-shadow:0 18px 45px #0005}
.lobby .lobby-entry button{border-radius:6px;min-height:44px}
.lobby .lobby-entry .gold-button{background:linear-gradient(130deg,#92cfc5,#71b6b0);color:#0d252b;border:1px solid #b7e7dd}
.lobby .lobby-class-card{border-radius:8px;border-color:#9bb1c54d;background:linear-gradient(155deg,#143144cc,#0e1c2ce0)}
.lobby .lobby-class-card.selected{border-color:#9ccec6;box-shadow:inset 2px 0 #bbebdc}
/* Space-limited mouse displays. Full hotbar remains at the foot of the window. */
:root[data-ui-mode="compact"]{--header-height:48px;--skill-size:clamp(44px,5.1vw,56px);--edge:10px}
:root[data-ui-mode="compact"] #viewport .skills-wrap{bottom:var(--ui-bottom);width:calc(var(--skill-size)*11 + 60px + 16px)}
:root[data-ui-mode="compact"] #viewport .skillbar{padding-inline:8px}
:root[data-ui-mode="compact"] #viewport .bottom-left{bottom:calc(var(--skill-size) + 55px);width:220px}
:root[data-ui-mode="compact"] #viewport .bottom-right{bottom:calc(var(--skill-size) + 55px);width:138px;gap:4px}
:root[data-ui-mode="compact"] #viewport .bottom-right .bag-button{min-height:44px;padding:4px}
:root[data-ui-mode="compact"] #viewport .right-hud{display:none}
:root[data-ui-mode="compact"] #viewport .player-panel{width:218px;padding:7px;gap:7px;top:8px}
:root[data-ui-mode="compact"] #viewport .portrait{width:30px;height:47px}
:root[data-ui-mode="compact"] #viewport #stage-hud{top:8px;left:auto;right:var(--ui-right);transform:none;width:260px}
:root[data-ui-mode="compact"] #viewport #target-panel{left:auto;right:var(--ui-right);transform:none;top:111px;width:248px}
:root[data-ui-mode="compact"] #viewport #toast-stack{top:100px;left:var(--ui-left);right:auto;width:220px;max-width:35%}
/* Touch and narrow mouse controls share geometry without scaling down hit targets. */
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]){--header-height:44px;--edge:8px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .topbar{gap:10px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .wordmark.battle-brand{display:flex;width:68px;height:43px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .battle-logo{height:32px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .battle-logo img{width:124px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .battle-brand>span{font-size:8px;line-height:10px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .top-actions .mode-label{display:none}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell .top-actions{gap:4px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #game-shell #return-town-button{min-width:64px;padding:4px 7px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skills-wrap{width:var(--dock-width);height:var(--skillbar-height);max-width:none;left:auto;right:var(--ui-right);bottom:var(--ui-bottom);transform:none}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar{position:relative;display:block;width:100%;height:100%;padding:0;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .skill{position:absolute;left:var(--control-x);top:var(--control-y);width:var(--control-size);height:var(--control-size);border-radius:50%;box-shadow:0 3px 9px #0006,inset 0 0 0 2px #c1d9df16}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .skill-icon{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%}
/* Eight cast skills use two separated rows, with room above for level captions. */
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .skill-name{bottom:0;left:50%;width:calc(100% + 6px);font-size:10px;line-height:14px;padding:1px 0;border-radius:3px;background:linear-gradient(90deg,transparent,#08131eea 20%,#08131eea 80%,transparent);z-index:3}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .skill-level{display:block;top:-11px;font-size:10px;line-height:13px;min-width:30px;padding:0 2px;border:1px solid #718fa349;background:#0a1826f0}
:root[data-touch="true"] #viewport .skillbar .skill kbd{display:none}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .cooldown{font-size:24px;padding-bottom:4px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .skill[data-skill="attack"] .skill-name{font-size:13px;line-height:19px;bottom:8px;width:85%}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .skillbar .utility-skill .skill-name{bottom:2px;font-size:10px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .right-hud{display:none}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .bottom-right .bag-button{min-height:44px;padding:4px 2px;gap:2px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .bottom-right .bag-button>div{font-size:11px;line-height:14px}
:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .bottom-right .menu-glyph,:root:is([data-ui-mode="portrait"],[data-ui-mode="landscape"],[data-ui-mode="tablet"]) #viewport .bottom-right .bag-button>img{width:17px;height:17px;display:block}
:root[data-stick-active="true"][data-touch="true"] #viewport #loot-feed{opacity:.2}
/* Phone portrait/very narrow window. All 11 combat buttons remain available. */
:root[data-ui-mode="portrait"] #game-shell .topbar{gap:5px}
:root[data-ui-mode="portrait"] #game-shell .top-actions{gap:3px}
:root[data-ui-mode="portrait"] #game-shell #sound-button{display:none}
:root[data-ui-mode="portrait"] #game-shell .main-menu-button{padding:3px 6px;font-size:11px}
:root[data-ui-mode="portrait"] #game-shell .icon-button{width:30px;min-height:34px}
:root[data-ui-mode="portrait"] #viewport .player-panel{width:43%;max-width:none;padding:6px;gap:0;top:7px}
:root[data-ui-mode="portrait"] #viewport .portrait{display:none}
:root[data-ui-mode="portrait"] #viewport .player-name{flex-wrap:wrap;gap:1px 5px;margin-bottom:4px}
:root[data-ui-mode="portrait"] #viewport .player-name strong{font-size:12px;line-height:16px}
:root[data-ui-mode="portrait"] #viewport .player-name .class-icon{width:15px;height:15px}
:root[data-ui-mode="portrait"] #viewport .player-name>span{font-size:10px;line-height:15px}
:root[data-ui-mode="portrait"] #viewport .resource span{font-size:10px;line-height:15px}
:root[data-ui-mode="portrait"] #viewport #stage-hud{left:auto;right:var(--ui-right);top:7px;transform:none;width:calc(55% - 16px);gap:3px}
:root[data-ui-mode="portrait"] #viewport .stage-hud-main{padding:6px;gap:1px}
:root[data-ui-mode="portrait"] #viewport #stage-hud-region{font-size:11px;line-height:16px}
:root[data-ui-mode="portrait"] #viewport .stage-hud-heading{flex-wrap:wrap;gap:0 4px;align-items:baseline}
:root[data-ui-mode="portrait"] #viewport #stage-hud-stage{font-size:17px;line-height:22px;letter-spacing:0}
:root[data-ui-mode="portrait"] #viewport #stage-hud-difficulty{font-size:10px;max-width:none}
:root[data-ui-mode="portrait"] #viewport .stage-hud-detail{display:block;font-size:10px;line-height:14px}
:root[data-ui-mode="portrait"] #viewport #stage-hud-progress{display:block;font-size:10px;line-height:14px}
:root[data-ui-mode="portrait"] #viewport #auto-run-banner{position:absolute;right:0;top:102px;max-width:none}
:root[data-ui-mode="portrait"] #viewport #auto-challenge-button{min-height:28px;max-width:none;font-size:11px;padding:3px 7px}
:root[data-ui-mode="portrait"] #viewport .bottom-right{left:var(--ui-left);right:var(--ui-right);width:auto;top:143px;bottom:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
:root[data-ui-mode="portrait"] #viewport #target-panel{top:198px;left:50%;right:auto;transform:translateX(-50%);width:68%;padding:5px 7px}
:root[data-ui-mode="portrait"] #viewport #target-panel:not([data-boss="true"]){display:none}
:root[data-ui-mode="portrait"] #viewport .bottom-left{width:calc(100% - var(--dock-width) - var(--ui-left) - var(--ui-right) - 10px);min-width:0;max-width:190px;bottom:var(--ui-bottom);gap:4px}
:root[data-ui-mode="portrait"] #viewport .currency{display:grid;grid-template-columns:18px minmax(0,1fr);padding:6px 4px;gap:3px}
:root[data-ui-mode="portrait"] #viewport .currency>span:not(.coin):not(.aether){display:none}
:root[data-ui-mode="portrait"] #viewport .currency .aether{margin:0}
:root[data-ui-mode="portrait"] #viewport .currency b{font-size:11px;white-space:nowrap}
:root[data-ui-mode="portrait"] #viewport .save-label{display:none}
:root[data-ui-mode="portrait"] #viewport .loot-entry{padding:4px;gap:3px;flex-wrap:wrap;min-height:38px}
:root[data-ui-mode="portrait"] #viewport .loot-entry img{width:24px;height:24px}
:root[data-ui-mode="portrait"] #viewport .loot-entry>div{flex-basis:100%}
:root[data-ui-mode="portrait"] #viewport .loot-entry strong{font-size:10px;line-height:15px}
:root[data-ui-mode="portrait"] #viewport .loot-entry small{font-size:10px;line-height:14px}
:root[data-ui-mode="portrait"] #viewport .loot-entry:first-child:not(:last-child){display:none}
:root[data-ui-mode="portrait"] #viewport #kina-gain{font-size:11px;line-height:16px;padding:0 2px;overflow-wrap:anywhere}
:root[data-ui-mode="portrait"] #viewport #toast-stack{left:var(--ui-left);right:auto;top:102px;max-width:60%;width:200px}
:root[data-ui-mode="portrait"] #viewport .toast{font-size:11px;line-height:15px;padding:5px 6px}
:root[data-ui-mode="portrait"] #viewport .toast:not(:last-child){display:none}
:root[data-ui-mode="portrait"] #viewport .interact-wrap{bottom:calc(var(--skillbar-height) + 40px);right:var(--ui-right);left:auto;transform:none}
:root[data-ui-mode="portrait"] #viewport #dungeon-banner{top:31%;width:92%;padding:8px 10px}
:root[data-ui-mode="portrait"] #viewport #dungeon-banner strong{font-size:20px}
/* Landscape phone: player | stage | 3x2 menu, with radial combat controls below. */
:root[data-ui-mode="landscape"] #viewport .player-panel{width:180px;top:7px;padding:6px;gap:6px}
:root[data-ui-mode="landscape"] #viewport .portrait{width:27px;height:41px}
:root[data-ui-mode="landscape"] #viewport .player-name{flex-wrap:wrap;gap:0 4px;margin-bottom:3px}
:root[data-ui-mode="landscape"] #viewport .player-name strong{font-size:12px;line-height:16px}
:root[data-ui-mode="landscape"] #viewport .player-name>span{font-size:10px;line-height:14px}
:root[data-ui-mode="landscape"] #viewport .resource{height:14px}
:root[data-ui-mode="landscape"] #viewport .resource span{font-size:10px;line-height:12px}
:root[data-ui-mode="landscape"] #viewport #stage-hud{top:7px;left:198px;right:170px;transform:none;width:auto;max-width:310px}
:root[data-ui-mode="landscape"] #viewport .stage-hud-main{padding:5px 8px;gap:1px}
:root[data-ui-mode="landscape"] #viewport #stage-hud-region{font-size:11px;line-height:15px}
:root[data-ui-mode="landscape"] #viewport #stage-hud-stage{font-size:18px;line-height:22px;letter-spacing:0}
:root[data-ui-mode="landscape"] #viewport #stage-hud-difficulty{font-size:10px}
:root[data-ui-mode="landscape"] #viewport .stage-hud-detail,:root[data-ui-mode="landscape"] #viewport #stage-hud-progress{font-size:10px;line-height:14px}
:root[data-ui-mode="landscape"] #viewport #auto-challenge-button{min-height:30px;max-width:46px;font-size:11px;padding:4px}
:root[data-ui-mode="landscape"] #viewport .bottom-right{top:7px;bottom:auto;left:auto;right:var(--ui-right);width:150px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
:root[data-ui-mode="landscape"] #viewport .bottom-left{width:min(230px,calc(100% - var(--dock-width) - 30px));bottom:var(--ui-bottom)}
:root[data-ui-mode="landscape"] #viewport .currency{padding:5px 6px;gap:4px}
:root[data-ui-mode="landscape"] #viewport .currency b{font-size:11px}
:root[data-ui-mode="landscape"] #viewport .save-label{display:none}
:root[data-ui-mode="landscape"] #viewport .loot-entry{min-height:32px;padding:3px 6px;gap:5px}
:root[data-ui-mode="landscape"] #viewport .loot-entry img{width:25px;height:25px}
:root[data-ui-mode="landscape"] #viewport .loot-entry strong{font-size:11px;line-height:15px}
:root[data-ui-mode="landscape"] #viewport .loot-entry small{font-size:10px;line-height:13px}
:root[data-ui-mode="landscape"] #viewport .loot-entry:first-child:not(:last-child){display:none}
:root[data-ui-mode="landscape"] #viewport #target-panel{top:89px;left:198px;right:auto;transform:none;width:220px;max-width:calc(100% - 370px);padding:3px 6px}
:root[data-ui-mode="landscape"] #viewport #target-panel:not([data-boss="true"]){display:none}
:root[data-ui-mode="landscape"] #viewport #target-panel[data-boss="true"]{left:var(--ui-left);max-width:none;width:180px}
:root[data-ui-mode="landscape"] #viewport #target-panel .boss-timer{margin-top:3px}
:root[data-ui-mode="landscape"] #viewport #toast-stack{top:91px;left:198px;right:auto;width:220px;max-width:calc(100% - 370px)}
:root[data-ui-mode="landscape"] #viewport .toast{font-size:11px;line-height:15px;padding:5px 7px}
:root[data-ui-mode="landscape"] #viewport .toast:not(:last-child){display:none}
:root[data-ui-mode="landscape"] #viewport .interact-wrap{left:var(--ui-left);right:auto;bottom:140px;transform:none}
:root[data-ui-mode="landscape"] #viewport #dungeon-banner{top:35%;width:300px;padding:8px}
:root[data-ui-mode="landscape"] #viewport #dungeon-banner strong{font-size:20px}
/* Unfolded phone/tablet: keep full-size thumb controls, no desktop HUD forced by width. */
:root[data-ui-mode="tablet"] #viewport .player-panel{width:214px;padding:8px;top:8px}
:root[data-ui-mode="tablet"] #viewport .portrait{width:30px;height:46px}
:root[data-ui-mode="tablet"] #viewport .player-name strong{font-size:13px}
:root[data-ui-mode="tablet"] #viewport .player-name>span{font-size:10px}
:root[data-ui-mode="tablet"] #viewport #stage-hud{top:8px;left:auto;right:var(--ui-right);transform:none;width:min(360px,calc(100% - 246px))}
:root[data-ui-mode="tablet"] #viewport #target-panel{top:116px;left:auto;right:var(--ui-right);transform:none;width:280px}
:root[data-ui-mode="tablet"] #viewport .bottom-right{left:auto;right:var(--ui-right);width:232px;bottom:calc(var(--skillbar-height) + 46px);grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
:root[data-ui-mode="tablet"] #viewport .bottom-left{width:250px}
:root[data-ui-mode="tablet"] #viewport #toast-stack{left:var(--ui-left);right:auto;top:105px;width:240px;max-width:36%}
:root[data-ui-mode="tablet"] #viewport .interact-wrap{left:var(--ui-left);right:auto;bottom:180px;transform:none}
/* Readable dialog breakpoints: scrolling absorbs excess instead of shrinking text. */
@media(max-width:1050px){
 #inventory-dialog#inventory-dialog .cube-layout{grid-template-columns:128px 220px minmax(0,1fr);gap:10px}
 #inventory-dialog#inventory-dialog #equipment-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
 #inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 #inventory-dialog#inventory-dialog .tile-slot{font-size:12px}
 #inventory-dialog#inventory-dialog .tile-name,#inventory-dialog#inventory-dialog .affix-count{font-size:11px}
}
@media(max-width:759px){
 dialog#inventory-dialog,dialog#skills-dialog,dialog#crafting-dialog,dialog#live-dialog,dialog#stages-dialog,dialog#merchant-dialog,dialog.save-dialog,dialog#help-dialog{padding:12px;max-width:calc(var(--app-width) - 12px - var(--safe-left) - var(--safe-right));top:calc(var(--app-top) + max(6px,env(safe-area-inset-top,0px)));max-height:calc(var(--app-height) - max(6px,env(safe-area-inset-top,0px)) - max(6px,var(--safe-bottom)))}
 dialog .dialog-heading h2{font-size:20px}dialog .close-dialog{width:36px;height:36px}
 #inventory-dialog#inventory-dialog{width:calc(var(--app-width) - 12px);height:calc(var(--app-height) - 12px);overflow-y:auto;display:none}
 #inventory-dialog#inventory-dialog[open]{display:block}
 #inventory-dialog#inventory-dialog .cube-layout{display:flex;flex-direction:column;gap:14px;height:auto;overflow:visible;margin-top:12px}
 #inventory-dialog#inventory-dialog .equipment-panel,#inventory-dialog#inventory-dialog .items-panel{display:block;overflow:visible;min-height:auto}
 #inventory-dialog#inventory-dialog #equipment-slots{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64px;grid-template-rows:repeat(2,auto);gap:5px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:3px 3px 7px}
 #inventory-dialog#inventory-dialog #inventory-scroll{height:310px;min-height:220px;max-height:44dvh;overflow-y:auto;margin-top:6px}
 #inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(4,minmax(0,1fr))}
 #inventory-dialog#inventory-dialog #item-inspector{min-height:420px;max-height:none;overflow:visible;display:flex}
 #inventory-dialog#inventory-dialog .inspection-body{max-height:none;overflow:visible;flex:none}
 #inventory-dialog#inventory-dialog .inspection-body.gear-option-compare{grid-template-columns:minmax(0,1fr)}
 #inventory-dialog#inventory-dialog .inventory-footer{position:static;margin-top:12px}
 #inventory-dialog#inventory-dialog #dismantle-preview{max-height:none}
 #inventory-dialog#inventory-dialog .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:12px;gap:6px}
 #skills-dialog#skills-dialog{height:calc(var(--app-height) - 12px);padding:12px}
 #skills-dialog#skills-dialog .specialization-layout{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #skills-dialog#skills-dialog #skill-collection{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;flex-shrink:0;gap:5px;padding-bottom:6px}
 #skills-dialog#skills-dialog .skill-list-button{flex:0 0 114px;display:flex;flex-direction:row;text-align:left;gap:6px;min-height:55px;padding:5px}
 #skills-dialog#skills-dialog .skill-list-button>img{width:30px;height:30px}
 #skills-dialog#skills-dialog .skill-list-button>span{display:block}
 #skills-dialog#skills-dialog .skill-list-button strong{font-size:12px;line-height:17px}
 #skills-dialog#skills-dialog #specialization-detail{display:block;overflow-y:auto;min-height:0;padding-right:3px}
 #skills-dialog#skills-dialog .trait-option small{font-size:14px}
 #skills-dialog#skills-dialog .core-trait-list{grid-template-columns:1fr}
 #skills-dialog#skills-dialog .passive-grid{grid-template-columns:1fr}
 #skills-dialog#skills-dialog .dialog-footer{font-size:11px;line-height:16px;margin-top:4px}
 #skills-dialog#skills-dialog .skill-preset-bar>span{display:none}
 #skills-dialog#skills-dialog .passive-copy small{font-size:12px}
 #crafting-dialog .crafting-layout{display:flex;flex-direction:column;flex:none;min-height:0}
 #crafting-dialog .crafting-recipes{padding:8px;overflow:visible;flex:none}
 #crafting-dialog #crafting-list{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;padding-bottom:5px}
 #crafting-dialog .craft-recipe{display:flex;flex:0 0 174px;min-height:46px;gap:8px;white-space:nowrap}
 #crafting-dialog .craft-recipe:after{display:none}
 #crafting-dialog .crafting-detail{padding:12px;overflow:visible;flex:none}
 #crafting-dialog .crafting-item-head h3{font-size:19px}
 #crafting-dialog #crafting-material-summary{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;gap:6px}
 #crafting-dialog #refining-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 #crafting-dialog .craft-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 #crafting-dialog .craft-stats>div:last-child{grid-column:1/-1}
 #crafting-dialog .craft-button{min-height:44px;font-size:14px}
 #crafting-dialog .crafting-status{font-size:12px}
 #live-dialog#live-dialog{height:calc(var(--app-height) - 12px)}
 #live-dialog #live-tabs{gap:4px}
 #live-dialog #live-tabs button{font-size:12px;min-height:38px;padding:6px 10px}
 #live-dialog .live-section-title h3{font-size:19px}
 #live-dialog .attendance-board{padding:9px}
 #live-dialog .attendance-board-top{flex-wrap:wrap}
 #live-dialog .attendance-board-top h3{font-size:20px}
 #live-dialog .attendance-grid.icon-calendar{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 #live-dialog .icon-calendar .attendance-day{min-height:116px;padding:5px}
 #live-dialog .icon-calendar .attendance-day header b{font-size:11px}
 #live-dialog .icon-calendar .attendance-day header span{font-size:9px}
 #stage-chapters{grid-template-columns:1fr}
}
@media(max-width:380px){
 #inventory-dialog#inventory-dialog #inventory-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 #live-dialog .attendance-grid.icon-calendar{grid-template-columns:repeat(3,minmax(0,1fr))}
 :root[data-ui-mode="portrait"] #viewport .loot-entry>img,:root[data-ui-mode="portrait"] #viewport .loot-material-mark{display:none}
}
/* Keyboard / tiny-height windows: the whole modal content scrolls, with its title accessible. */
:root[data-ui-height="short"] dialog#inventory-dialog[open],:root[data-ui-height="short"] dialog#skills-dialog[open],:root[data-ui-height="short"] dialog#crafting-dialog[open]{display:block;overflow:auto;height:calc(var(--app-height) - 12px)}
:root[data-ui-height="short"] #inventory-dialog#inventory-dialog .cube-layout{min-height:440px;height:440px}
:root[data-ui-height="short"] #skills-dialog#skills-dialog .specialization-layout{display:flex;flex-direction:column;overflow:visible;height:auto}
:root[data-ui-height="short"] #skills-dialog#skills-dialog #skill-collection{display:flex;overflow-x:auto;flex-shrink:0;max-height:90px;margin:8px 0}
:root[data-ui-height="short"] #skills-dialog#skills-dialog #specialization-detail{display:grid;overflow:visible;height:auto;max-height:none}
:root[data-ui-height="short"] #skills-dialog#skills-dialog .skill-list-button{min-width:130px;flex:0 0 130px;min-height:55px}
:root[data-ui-height="short"] #skills-dialog#skills-dialog .dialog-footer{margin-top:12px}
:root[data-ui-height="short"] #crafting-dialog .crafting-layout{min-height:330px;margin-top:10px}
:root[data-ui-height="short"] #crafting-dialog .crafting-materials{margin-top:12px}
:root[data-ui-height="short"] #live-dialog#live-dialog .dialog-heading h2{font-size:19px}
:root[data-ui-height="short"] #live-dialog#live-dialog{gap:5px;padding:10px}
:root[data-ui-height="short"] #live-recipient{font-size:11px;line-height:16px;margin:0}
@media(prefers-reduced-motion:reduce){.loot-entry{animation:none}dialog::backdrop{backdrop-filter:none}}
@keyframes loot-arrive{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
/* These two-ID guards also override legacy per-panel fixed-size rules. */
:is(#inventory-dialog#inventory-dialog,#skills-dialog#skills-dialog,#crafting-dialog#crafting-dialog,#live-dialog#live-dialog){
 left:calc(var(--app-left,0px) + var(--app-width,100vw)/2);right:auto;bottom:auto;
 top:calc(var(--app-top,0px) + max(12px,env(safe-area-inset-top,0px)));margin:0;transform:translateX(-50%);
 max-width:calc(var(--app-width,100vw) - 24px - var(--safe-left,0px) - var(--safe-right,0px));
 max-height:calc(var(--app-height,100dvh) - max(12px,env(safe-area-inset-top,0px)) - max(12px,var(--safe-bottom,0px)));
}
@media(max-width:759px){
 :is(#inventory-dialog#inventory-dialog,#skills-dialog#skills-dialog,#crafting-dialog#crafting-dialog,#live-dialog#live-dialog){
  top:calc(var(--app-top,0px) + max(6px,env(safe-area-inset-top,0px)));
  max-width:calc(var(--app-width,100vw) - 12px - var(--safe-left,0px) - var(--safe-right,0px));
  max-height:calc(var(--app-height,100dvh) - max(6px,env(safe-area-inset-top,0px)) - max(6px,var(--safe-bottom,0px)));
 }
}
@media(min-width:700px) and (max-height:340px){
 :root[data-ui-mode="landscape"] #viewport .bottom-right{grid-template-columns:repeat(6,minmax(0,1fr));width:294px}
 :root[data-ui-mode="landscape"] #viewport #stage-hud{right:318px}
}

/* Keep the compact header on one row; legacy phone rules used a wrapped nav row. */
#game-shell .topbar{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center}
#game-shell .wordmark.battle-brand{order:0;margin:0;align-self:center}
#game-shell #return-town-button{order:1;flex-shrink:0}
#game-shell .top-actions{position:static;inset:auto;transform:none;order:2;width:auto;flex:0 0 auto;align-self:center;margin-left:auto;justify-content:flex-end}
#viewport .player-name .compact-level{display:none}
:root[data-ui-mode="portrait"] #viewport .player-name .compact-level{display:inline;font-size:10px;color:#d7c39c;margin-left:auto;max-width:80px;overflow:hidden;text-overflow:ellipsis}
:root[data-ui-mode="portrait"] #viewport .player-name #power-label{flex-basis:100%;font-size:10px;color:#aebfc9}
:root[data-ui-mode="portrait"] #viewport .loot-entry strong{font-size:12px;line-height:17px}
:root[data-ui-mode="portrait"] #viewport .loot-entry small{font-size:10px;line-height:14px}
@media(max-width:379px){:root[data-ui-mode="portrait"] #viewport .loot-entry strong{font-size:11px}}
/* Scroll long skill-selector strips within the modal, not beyond its right edge. */
#skills-dialog#skills-dialog .specialization-layout{min-width:0;max-width:100%}
#skills-dialog#skills-dialog #skill-collection{width:100%;max-width:100%;box-sizing:border-box;align-self:stretch}
/* System messages occupy a separate lane beside, never underneath, the right panel. */
:root[data-ui-mode="desktop"] #viewport #toast-stack{right:calc(var(--ui-right) + clamp(176px,13vw,214px) + 10px);top:175px;width:230px;max-width:23%}
@media(max-width:599px) and (max-height:560px){
 :root[data-ui-mode="portrait"] #viewport .loot-entry:not(:last-child){display:none}
 :root[data-ui-mode="portrait"] #viewport .loot-entry{max-height:56px;overflow:hidden}
}

@media(max-width:759px){#inventory-dialog#inventory-dialog>.dialog-heading{position:sticky;top:-12px;z-index:4;background:#0e1929;padding-top:3px;padding-bottom:8px}}
:root[data-ui-mode="compact"] #game-shell .wordmark.battle-brand{width:82px;height:46px}
:root[data-ui-mode="compact"] #game-shell .battle-logo{height:34px}
:root[data-ui-mode="compact"] #game-shell .battle-logo img{width:130px}
/* Split the remaining safe-area width, not the full screen width. */
:root[data-ui-mode="portrait"] #viewport .player-panel{width:calc((100% - var(--ui-left) - var(--ui-right) - 8px)*.45)}
:root[data-ui-mode="portrait"] #viewport #stage-hud{width:calc((100% - var(--ui-left) - var(--ui-right) - 8px)*.55)}
:root[data-ui-mode="tablet"] #viewport #stage-hud{width:min(360px,calc(100% - var(--ui-left) - var(--ui-right) - 226px))}
:root[data-ui-mode="landscape"] #viewport #stage-hud{left:calc(var(--ui-left) + 190px);right:calc(var(--ui-right) + 162px)}
:root[data-ui-mode="landscape"] #viewport .bottom-left{width:min(230px,calc(100% - var(--dock-width) - var(--ui-left) - var(--ui-right) - 12px))}
@media(min-width:700px) and (max-height:340px){:root[data-ui-mode="landscape"] #viewport #stage-hud{right:calc(var(--ui-right) + 306px)}}
@media(max-width:599px) and (max-height:560px){
 :root[data-ui-mode="portrait"] #viewport .bottom-right{top:120px}
 :root[data-ui-mode="portrait"] #viewport #stage-hud-mode{display:none}
 :root[data-ui-mode="portrait"] #viewport #auto-run-banner{top:78px}
}
@media(max-width:759px){#inventory-dialog#inventory-dialog #item-inspector{scroll-margin-top:62px}}

/* v42: crafted pendant */
.pendant-crafting-wrap{border-top:1px solid #ffffff18;margin-top:12px;padding-top:12px}.pendant-crafting-wrap>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.pendant-crafting-wrap small{color:#91a7b5}.pendant-crafting-wrap #pendant-crafting{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:8px}.pendant-craft-button{display:grid;grid-template-columns:36px 1fr;gap:6px;align-items:center;text-align:left;padding:8px;border:1px solid #8ea7b044;background:#142b39;border-radius:6px}.pendant-craft-button img{width:36px;height:36px;object-fit:contain;grid-row:1/3}.pendant-craft-button span{min-width:0}.pendant-craft-button strong,.pendant-craft-button small{display:block}.pendant-craft-button b{grid-column:2;font-size:11px;color:#d9c78f}.pendant-craft-button:disabled{opacity:.45}.pendant-craft-button:not(:disabled){border-color:#d6bc70}.craft-material span{min-width:0}
@media(max-width:699px){.pendant-crafting-wrap #pendant-crafting{grid-template-columns:repeat(2,minmax(0,1fr))}#crafting-dialog #crafting-material-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v44: preserve the existing two-row mobile gear strip; desktop pairs are two columns. */
@media(min-width:760px){
 #inventory-dialog#inventory-dialog #equipment-slots{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto}
}
@media(max-width:759px){
 #crafting-dialog .craft-material{grid-template-columns:24px minmax(0,1fr);column-gap:6px;padding:8px 6px}
 #crafting-dialog .craft-material .craft-material-icon,#crafting-dialog .craft-material-icon img{width:24px;height:24px}
 #crafting-dialog .craft-material .craft-material-name{font-size:12px}
}