/* The world fills the viewport; every control and dialog belongs to the stage. */
html:has(.game-shell),body.game-shell{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#17251f}
body.game-shell{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
body.game-shell [hidden]{display:none!important}
#stage.game-stage,#stage.game-stage:fullscreen{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;aspect-ratio:auto;overflow:hidden;background:#17251f;isolation:isolate}
#stage #game{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;image-rendering:pixelated;touch-action:none}
#stage .game-hud{display:block!important;position:absolute;inset:0;pointer-events:none;z-index:5;padding:0;background:none}
.game-hud button,.game-hud .hud-joystick{pointer-events:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.game-shell button:focus-visible,.game-shell a:focus-visible{outline:2px solid #ecce88;outline-offset:3px}
.hero-hud{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));width:228px;pointer-events:none}
.hero-card{display:flex;gap:8px;align-items:center;padding:6px 8px 6px 5px;background:linear-gradient(125deg,#0c1719ed,#1a2a22ca);border:1px solid #b6975e80;box-shadow:0 3px 12px #0005,inset 0 1px #f3ddb21c;border-radius:9px 18px 9px 9px;backdrop-filter:blur(3px)}
.hero-avatar{position:relative;flex:0 0 48px;width:48px;height:58px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#76714755,#101c17);border:1px solid #c4a66c88;border-radius:6px;box-shadow:inset 0 0 9px #0007;padding:0}
.hero-avatar canvas{display:block;width:38px!important;height:53px!important;position:absolute;left:4px;top:-2px;image-rendering:pixelated}
.hero-avatar strong{position:absolute;bottom:0;left:0;right:0;background:#101c17ed;color:#f4d59a;font:700 9px/15px system-ui;text-align:center;white-space:nowrap}
.hero-resources.player-health{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1;min-width:0;top:auto;left:auto;right:auto;bottom:auto;width:auto;padding:0;border:0;background:none;box-shadow:none}
.hero-heading{display:flex;justify-content:space-between;align-items:center;line-height:1;margin:0 1px 1px}
.hero-heading strong{font-size:11px;color:#ece6cc;font-weight:600;letter-spacing:.15px}
.hero-class-mark{font-size:12px;color:var(--accent,#cebb93)}
.hero-resources .resource-bar{position:relative;width:100%;height:17px;border:1px solid #342628;overflow:hidden;border-radius:3px;background:#130e13;box-shadow:inset 0 1px 3px #0007;margin:0}
.hero-resources .resource-bar i{display:block;position:absolute;inset:0 auto 0 0;height:100%;border-radius:1px;transition:width .12s linear}
.hero-resources .health-track i{background:linear-gradient(0deg,#85394b,#d16461 60%,#e89178);box-shadow:inset 0 1px #ffdbc23d}
.hero-resources .mana-track{height:13px;border-color:#263c4f;background:#0d1722}
.hero-resources .mana-track i{background:linear-gradient(0deg,#295482,#548ac1 65%,#88bce3)}
.hero-resources .resource-bar>span:last-child{position:absolute;inset:0;text-align:center;font:600 10px/15px system-ui;color:#fff6e7;text-shadow:0 1px 2px #000}
.hero-resources .mana-track>span:last-child{font-size:9px;line-height:11px}
.resource-mark{position:absolute;left:3px;top:1px;z-index:1;color:#fff6e8cc}
.resource-mark svg{width:11px;height:11px;display:block}
.mana-track .resource-mark svg{width:8px;height:8px}
.hero-resources .xp-track{position:relative;height:3px;border:0;margin:0;background:#4b49305c;overflow:hidden;border-radius:2px;width:100%}
.hero-resources .xp-track i{display:block;height:100%;background:linear-gradient(90deg,#afa76a,#e3ca84);transition:width .2s}
.hud-wallets{display:flex;gap:7px;align-items:center;padding:4px 3px 2px;font-size:11px;color:#f1d499}
.hud-wallet{display:flex;gap:4px;align-items:center;min-width:50px;max-width:100px;min-height:20px;line-height:1;padding:0 5px 0 0;border:0;background:none;text-shadow:0 1px 2px #000}
.hud-wallet strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.hud-wallet svg{display:block;width:14px;height:14px}
.crystal-wallet{color:#a6dbe7;padding:0 6px;min-height:24px;cursor:pointer}
.hud-menu-row{display:flex;gap:5px;margin:5px 0 0;width:max-content;max-width:calc(100vw - 16px);pointer-events:auto}
.hud-icon-button{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;color:#d8c89b;border:1px solid #ad94636b;border-radius:8px;background:linear-gradient(145deg,#24382ddc,#101f1cde);box-shadow:0 3px 7px #0004,inset 0 1px #f8e3b31c;touch-action:manipulation}
.hud-icon-button::before{content:"";position:absolute;inset:-2px}
.hud-icon-button svg{display:block;width:24px;height:24px;pointer-events:none}
.hud-icon-button:hover{border-color:#e5c98f;background:#314536e8}
.hud-icon-button:active{transform:translateY(1px);background:#3e513a}
.hud-badge{position:absolute;right:-3px;top:-5px;padding:0 3px;min-width:15px;height:15px;font:600 9px/14px system-ui;color:#f4db9e;background:#20312b;border:1px solid #baa17089;border-radius:4px;pointer-events:none}
.hud-status-dot{position:absolute;left:4px;bottom:4px;width:5px;height:5px;border-radius:50%;background:#a6e4a6;box-shadow:0 0 5px #a6e4a6;pointer-events:none}
.hunt-button{padding-top:3px;padding-bottom:11px}
.hunt-button svg{width:23px;height:23px}
.auto-caption{position:absolute;bottom:3px;font:700 7px/1 system-ui;letter-spacing:.6px;pointer-events:none}
.hunt-button.active{background:linear-gradient(140deg,#4a603ce8,#213e2ee8);border-color:#b7d994;color:#e3efc0;box-shadow:0 0 10px #b2d68428}
.hunt-button:disabled{opacity:.4}
.hud-effects{display:flex;gap:5px;flex-wrap:wrap;max-width:264px;margin:4px 0;pointer-events:auto}
.hud-effect{position:relative;width:32px;height:40px;padding:0;border:0;background:none;color:#d9e4c1;touch-action:manipulation}
.hud-effect-art{display:flex;align-items:center;justify-content:center;position:absolute;top:2px;left:2px;width:28px;height:28px;background:#16261ff2;border:1px solid #c2b27b6b;border-radius:50%;box-shadow:0 2px 5px #0007}
.hud-effect-art svg{width:17px;height:17px}
.hud-effect-clock{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:conic-gradient(#e6cd85 var(--effect-angle,360deg),#7a805f45 0);-webkit-mask:radial-gradient(transparent 63%,#000 67%);mask:radial-gradient(transparent 63%,#000 67%)}
.hud-effect small{position:absolute;bottom:0;left:0;right:0;text-align:center;font:650 8px/1 system-ui;color:#efdfb1;text-shadow:0 1px 2px #000}
.hud-effect.paused small{color:#a1ada4}
.hud-minimap{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:152px;height:104px;padding:3px;border:1px solid #c1aa73b3;border-radius:7px;background:#102019e8;box-shadow:0 4px 12px #0006,inset 0 0 0 1px #f6e3bc29;overflow:hidden;touch-action:manipulation}
.hud-minimap canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated}
.minimap-compass{position:absolute;left:5px;top:4px;color:#f4df9c;filter:drop-shadow(0 1px 2px #000)}
.minimap-compass svg{width:17px;height:17px}
.minimap-expand{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;background:#0f201acf;color:#e3dbb1;border-radius:3px;width:22px;height:22px}
.minimap-expand svg{width:13px;height:13px}
.hud-target{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:260px;min-height:26px;padding:6px 10px;border:1px solid #9c69584d;border-radius:5px;background:#1b2119bd;color:#e7ccaa;font-size:10px;text-align:center;text-shadow:0 1px #000;pointer-events:none}
#stage .boss-encounter{position:absolute;left:50%;right:auto;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);width:280px;max-width:calc(100vw - 420px);padding:8px 12px;background:#221915e6;border:1px solid #aa72596b;border-radius:6px;box-shadow:0 3px 9px #0005}
#stage .boss-encounter>strong{font-size:10px;letter-spacing:.7px}
#stage .boss-encounter>span{font-size:9px}
#stage .boss-encounter small{font-size:9px;margin-top:3px}
.game-shell .hud-joystick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));right:auto;top:auto;display:block;width:132px;height:132px;padding:0;background:radial-gradient(circle,#1c2d2340 0 43%,#12231e29 44% 63%,transparent 64%);border:1px solid #e0d0a62e;border-radius:50%;box-shadow:inset 0 0 0 8px #d4c99706;touch-action:none;user-select:none;cursor:grab;opacity:.65}
.hud-joystick.active{opacity:1;cursor:grabbing;background:radial-gradient(circle,#263b2a5c 0 43%,#12231e50 44% 63%,transparent 64%)}
.joystick-ring{position:absolute;inset:20px;border:1px solid #d4c99742;border-radius:50%;pointer-events:none}
.joystick-ring i{position:absolute;display:block;background:#e2d2a967;left:50%;top:-2px;width:2px;height:5px}
.joystick-ring i:nth-child(2){top:50%;left:auto;right:-2px;width:5px;height:2px}
.joystick-ring i:nth-child(3){top:auto;bottom:-2px}
.joystick-ring i:nth-child(4){top:50%;left:-2px;width:5px;height:2px}
.joystick-thumb{position:absolute;left:50%;top:50%;width:51px;height:51px;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));display:grid;place-items:center;border:1px solid #d4bd876e;border-radius:50%;background:radial-gradient(circle at 40% 32%,#84907094,#324b35b3 55%,#15291de3);box-shadow:0 3px 9px #0007,inset 0 1px 2px #fbefd555;pointer-events:none}
.joystick-thumb span{width:17px;height:17px;border:1px solid #ebdeaa4a;transform:rotate(45deg);border-radius:3px;background:#d9d3a016}
.hud-actions{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:232px;height:176px;pointer-events:none}
.hud-actions .skillbar{display:contents;border:0;padding:0;margin:0;background:none;position:static}
.hud-attack{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:82px;height:82px;border:2px solid #d0b174bd;border-radius:50%;padding:0;background:radial-gradient(circle at 40% 30%,#56664be3,#283b2bec 62%,#17291fe8);box-shadow:0 4px 13px #0009,inset 0 0 0 4px #e4cd9122,inset 0 1px 3px #fff4c748;color:#efe1b1;touch-action:none}
.hud-attack canvas{width:45px!important;height:45px!important;display:block;image-rendering:pixelated}
.attack-label{font:750 8px/1 system-ui;letter-spacing:1px;margin-top:-1px}
.hud-attack:active,.hud-attack.is-held{border-color:#f5dc9d;box-shadow:0 0 16px #e5c68655,inset 0 0 0 4px #f1cf852b;transform:scale(.96)}
.hud-attack:disabled{filter:grayscale(.7);opacity:.5}
.hud-actions .hud-skill{position:absolute;display:block;width:56px;height:56px;min-height:0;overflow:hidden;border:1px solid #c5b98b9c;border-radius:50%;padding:5px;background:radial-gradient(circle at 40% 25%,#384b3aeb,#13271fed);color:#faedce;box-shadow:0 3px 9px #0008,inset 0 0 0 2px #e4d49a14;touch-action:manipulation;text-align:center}
.hud-actions .hud-skill::after{content:none}
.hud-actions .hud-skill canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated;pointer-events:none;border-radius:50%}
.hud-skill small{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font:750 15px/1 system-ui;color:#fff7dc;text-shadow:0 1px 4px #000;z-index:3;pointer-events:none}
.hud-skill kbd{position:absolute;left:auto;top:auto;right:3px;bottom:2px;font-size:8px;background:#0d201cd9;border-radius:3px;z-index:3;pointer-events:none}
.hud-skill:disabled{opacity:.85;cursor:default}
.hud-skill:disabled canvas{opacity:.45}
.hud-skill.empty{border-style:dashed;border-color:#cec29c60}
.hud-skill.no-mana{border-color:#758bad88}
.hud-skill.no-mana canvas{filter:grayscale(.6)}
.cooldown-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#08131bd1 var(--cooldown-angle,0deg),transparent 0deg);pointer-events:none}
.hud-actions .skill-position-0{right:94px;bottom:0}
.hud-actions .skill-position-1{right:164px;bottom:47px}
.hud-actions .skill-position-2{right:118px;bottom:109px}
.hud-actions .skill-position-3{right:45px;bottom:112px}
.game-shell .asset-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#13211fea;color:#e8d5a6;z-index:30;font-size:12px;letter-spacing:.3px}
.loader-rune{font-size:32px;color:#d8bb80;animation:loader-turn 3s linear infinite}
@keyframes loader-turn{to{transform:rotate(360deg)}}
#stage .toast{position:absolute;left:50%;right:auto;top:max(55px,env(safe-area-inset-top));bottom:auto;transform:translate(-50%,-8px);max-width:min(440px,70vw);width:max-content;min-height:0;padding:7px 12px;font-size:11px;border:1px solid #b1a07266;background:#14251fe8;border-radius:5px;box-shadow:0 3px 12px #0005;pointer-events:none;z-index:35}
#stage .toast.visible{transform:translate(-50%,0)}
#stage .realm-panel,#stage .game-menu{position:fixed;inset:0;margin:auto;transform:none;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:0;border:1px solid #b7a47470;border-radius:10px;background:#16251ff5;color:#eee6c9;box-shadow:0 16px 60px #000a;overflow:hidden;font-size:12px;touch-action:pan-y}
#stage .realm-panel{width:min(900px,calc(100vw - 20px));height:min(640px,calc(100dvh - 20px))}
#stage .realm-panel[open],#stage .game-menu[open]{display:flex;flex-direction:column}
#stage dialog::backdrop{background:#07110dcc;backdrop-filter:blur(2px)}
#stage .realm-panel-head{padding:10px 14px;flex-shrink:0;min-height:50px}
#stage .realm-panel-head>div>span{font-size:8px;letter-spacing:1px}
#stage .realm-panel-head h2{font-size:20px}
#stage .realm-panel-tabs{padding:6px 10px;gap:6px;flex-shrink:0}
#stage .realm-panel-tabs button{padding:7px 10px;font-size:11px;min-height:34px}
#stage .realm-panel-tabs small{font-size:9px}
#stage .realm-panel-body{flex:1;min-height:0;padding:12px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
#stage .panel-close{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;min-height:38px;font:24px/1 system-ui;border-radius:7px;color:#e3d8b4;background:#25382b;border:1px solid #6c745259}
.game-menu{width:400px;height:min(720px,calc(100dvh - 20px))}
.game-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #84936735;flex-shrink:0}
.game-menu-head small{font-size:8px;letter-spacing:2px;color:#b9b895}
.game-menu-head h2{font-size:23px;margin:3px 0 0}
.game-menu-body{padding:12px;overflow:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.game-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.game-menu-grid>button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:65px;padding:8px 3px;font-size:11px;background:#20352af2;border:1px solid #84936754;border-radius:6px;color:#e7dcaf;touch-action:manipulation}
.game-menu-grid svg{width:24px;height:24px}
.menu-class-section{margin-top:14px}
.menu-class-section h3{font-size:12px;font-weight:500;margin:0 0 7px;color:#d3c89f}
.menu-class-section .class-choices{flex-direction:row;gap:5px}
.menu-class-section .class-choice{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:74px;padding:3px;flex:1;width:0;text-align:center}
.menu-class-section .class-choice canvas{width:29px;height:40px}
.menu-class-section .class-choice strong{font-size:13px}
.menu-class-section .class-choice small,.menu-class-section .selection-mark{display:none}
.menu-settings{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.menu-settings label{display:flex;gap:7px;align-items:center;font-size:11px;padding:7px 2px}
.menu-settings input{accent-color:#b7c697;width:16px;height:16px}
.menu-setting-button{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;background:#27392b;border:1px solid #88976a5e;border-radius:5px;font-size:12px}
.menu-setting-button svg{width:19px;height:19px}
.menu-detail{border-top:1px solid #8b96733c;padding:8px 0}
.menu-detail>summary{cursor:pointer;font-size:12px;padding:4px 0;color:#d8d5b0}
.menu-travel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:8px}
.menu-travel-grid button{font-size:11px;padding:8px 5px;min-height:36px;border:1px solid #6e7b4f5e;border-radius:4px;background:#263b2b}
.menu-travel-grid button:disabled{opacity:.4}
.menu-detail>p{font-size:10px;color:#a7b99e;line-height:1.5}
.menu-progress{display:flex;flex-wrap:wrap;gap:9px;font-size:11px;padding:8px 0}
.menu-progress button{font-size:11px;border:1px solid #89916550;background:#30402a;border-radius:4px;padding:4px 7px}
.menu-version{display:block;font-size:9px;color:#90a38c;margin:10px 0 2px;text-align:center}
.studio-tools .equipment-panel{display:block;background:none;padding:8px 0;border:0;width:100%}
.studio-tools .animation-bar{height:auto;min-height:40px;padding:7px 0;margin:5px 0;background:none}
.studio-tools .direction-controls{flex-wrap:wrap}
.studio-tools .direction-controls button{width:auto;min-width:48px;height:30px;padding:5px;font-size:10px}
.studio-tools .direction-controls span{width:100%;font-size:10px}
.studio-tools .class-lore{padding-top:8px}
.studio-tools .class-lore summary{font-size:11px}
.studio-tools #autoWalk,.studio-tools #reset{font-size:11px;min-height:34px;padding:7px;border:1px solid #69754e5e;background:#263b2b;border-radius:4px;margin:6px 0}
.character-class-switch{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}
.character-class-switch button{padding:6px 12px;min-height:34px;border:1px solid #74825878;background:#23392b;border-radius:4px;font-size:11px}
.character-class-switch button.active{color:#f0d59b;border-color:#d1b875;background:#48543b}
.map-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start}
.map-summary{padding:10px;background:#1e3226;border:1px solid #7383514d;border-radius:5px}
.map-summary>small{font-size:8px;letter-spacing:1.5px;color:#b9ba95}
.map-summary h3{font:normal 20px/1.1 Georgia,serif;margin:6px 0 8px;color:#eddfb2}
.map-summary p{font-size:10px;line-height:1.5;color:#b8c5a4;margin:0 0 10px}
.map-summary button{display:block;width:100%;min-height:35px;padding:7px 5px;margin-top:6px;background:#2d422e;border:1px solid #8b956751;border-radius:4px;font-size:10px;text-align:left}
.map-summary button:disabled{opacity:.4}
.map-legend{margin-top:12px;display:grid;gap:7px;font-size:9px;color:#c9d5b1}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{display:inline-block;width:6px;height:6px;background:var(--marker);border-radius:2px}
.map-layout #worldMap{display:block;width:100%;height:auto;max-height:none;image-rendering:pixelated;border:1px solid #8497675e;border-radius:4px;touch-action:none}
@media(pointer:coarse){.hud-skill kbd{display:none}.hud-joystick{opacity:.8}}
@media(max-width:600px){.hero-hud{left:max(9px,env(safe-area-inset-left));top:max(9px,env(safe-area-inset-top));width:190px}.hero-card{padding:4px 5px 4px 3px;gap:6px}.hero-avatar{flex-basis:40px;width:40px;height:52px}.hero-avatar canvas{width:34px!important;height:48px!important;left:2px;top:-1px}.hero-avatar strong{font-size:8px;line-height:13px}.hero-heading strong{font-size:10px}.hero-resources .resource-bar{height:15px}.hero-resources .resource-bar>span:last-child{font-size:9px;line-height:13px}.hero-resources .mana-track{height:12px}.hero-resources .mana-track>span:last-child{font-size:8px;line-height:10px}.hero-resources.player-health{gap:3px}.hud-wallets{padding-top:2px;gap:4px}.hud-wallet strong{font-size:10px}.hud-menu-row{gap:3px;margin-top:4px}.hud-icon-button{width:42px;height:42px;padding:8px}.hud-icon-button svg{width:22px;height:22px}.hud-badge{font-size:8px;height:13px;min-width:13px;line-height:12px}.hud-minimap{top:max(9px,env(safe-area-inset-top));right:max(9px,env(safe-area-inset-right));width:108px;height:75px}.hud-effects{gap:4px;max-width:248px}.hud-effect{width:30px;height:38px}.hud-effect-art{width:26px;height:26px}.hud-effect-clock{width:30px;height:30px}.game-shell .hud-joystick{left:max(14px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:120px;height:120px}.hud-actions{right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:218px;height:160px}.hud-attack{width:74px;height:74px}.hud-attack canvas{width:40px!important;height:40px!important}.hud-actions .hud-skill{width:50px;height:50px;padding:4px}.hud-actions .skill-position-0{right:84px;bottom:0}.hud-actions .skill-position-1{right:148px;bottom:43px}.hud-actions .skill-position-2{right:105px;bottom:100px}.hud-actions .skill-position-3{right:41px;bottom:104px}.hud-target{top:97px;max-width:180px;font-size:9px}#stage .boss-encounter{top:166px;max-width:calc(100vw - 32px);width:260px}#stage .toast{top:145px;font-size:10px;padding:6px 9px;max-width:calc(100vw - 32px)}#stage .realm-panel{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}#stage .realm-panel-head{padding:8px 9px}#stage .realm-panel-head h2{font-size:17px}#stage .panel-wallet{font-size:11px}#stage .panel-wallet small{display:none}#stage .realm-panel-tabs{padding:5px 7px;gap:4px}#stage .realm-panel-tabs button{font-size:10px;padding:6px 7px}#stage .realm-panel-tabs small{display:none}#stage .realm-panel-body{padding:8px}.map-layout{grid-template-columns:90px minmax(0,1fr);gap:7px}.map-summary{padding:7px}.map-summary h3{font-size:15px}.map-summary>small{font-size:7px;letter-spacing:.5px}.map-summary p{font-size:9px}.map-summary button{font-size:9px;padding:6px 3px}.map-legend{font-size:8px}.game-menu-head h2{font-size:21px}}
@media(max-width:380px){.hud-menu-row{gap:3px}.hud-icon-button{width:40px;height:40px}.hud-minimap{width:94px;height:65px}.hero-hud{width:182px}.game-shell .hud-joystick{left:10px;width:100px;height:100px}.joystick-ring{inset:15px}.joystick-thumb{width:44px;height:44px}.hud-actions{right:10px;width:190px;height:146px}.hud-attack{width:66px;height:66px}.hud-actions .hud-skill{width:46px;height:46px}.hud-actions .skill-position-0{right:78px;bottom:0}.hud-actions .skill-position-1{right:140px;bottom:40px}.hud-actions .skill-position-2{right:108px;bottom:90px}.hud-actions .skill-position-3{right:42px;bottom:98px}}
@media(max-height:450px) and (min-width:601px){.hero-hud{left:max(10px,env(safe-area-inset-left));top:8px;width:202px}.hero-avatar{height:48px;width:38px;flex-basis:38px}.hero-avatar canvas{width:31px!important;height:44px!important;left:2px}.hero-avatar strong{font-size:8px;line-height:12px}.hero-card{padding:4px;gap:5px}.hero-heading strong{font-size:10px}.hero-resources .resource-bar{height:14px}.hero-resources .resource-bar>span:last-child{font-size:9px;line-height:12px}.hero-resources .mana-track{height:11px}.hero-resources .mana-track>span:last-child{font-size:8px;line-height:9px}.hero-resources.player-health{gap:3px}.hud-wallets{padding-top:2px;padding-bottom:0}.hud-menu-row{gap:4px;margin-top:3px}.hud-icon-button{width:40px;height:40px;padding:7px}.hud-icon-button svg{width:22px;height:22px}.hud-minimap{width:124px;height:86px;top:9px;right:max(10px,env(safe-area-inset-right))}.game-shell .hud-joystick{width:110px;height:110px;left:max(18px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}.joystick-thumb{width:45px;height:45px}.hud-actions{width:206px;height:152px;right:max(15px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.hud-attack{width:72px;height:72px}.hud-attack canvas{width:39px!important;height:39px!important}.hud-actions .hud-skill{width:48px;height:48px}.hud-actions .skill-position-0{right:82px;bottom:0}.hud-actions .skill-position-1{right:143px;bottom:40px}.hud-actions .skill-position-2{right:102px;bottom:94px}.hud-actions .skill-position-3{right:41px;bottom:99px}#stage .realm-panel{width:calc(100vw - 24px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}#stage .realm-panel-head{padding:5px 12px;min-height:42px}#stage .realm-panel-tabs{padding:4px 8px}#stage .realm-panel-body{padding:8px}.map-layout{grid-template-columns:130px minmax(0,1fr)}.map-layout #worldMap{width:auto;max-width:100%;max-height:calc(100dvh - 126px)}#stage .toast{top:50px;font-size:10px;padding:6px 9px}}
@media(prefers-reduced-motion:reduce){.resource-bar i,.xp-track i{transition:none}.loader-rune{animation:none}}
/* Let short menus fit their content; long inventories and trees scroll inside. */
#stage .realm-panel{top:50%;bottom:auto;left:0;right:0;margin:0 auto;transform:translateY(-50%);height:auto;max-height:min(640px,calc(100dvh - 20px))}
@media(max-width:600px){#stage .realm-panel{height:auto;max-height:calc(100dvh - 12px)}}
@media(max-height:450px) and (min-width:601px){#stage .realm-panel{height:auto;max-height:calc(100dvh - 16px)}}