.presentation-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}.stage-hud{position:absolute;inset:0;z-index:4;color:#eadfbe;pointer-events:none;font-family:system-ui,"Noto Sans TC",sans-serif}.stage-hud button,.stage-hud select,.stage-hud input{pointer-events:auto}.stage-hud button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.hud-vitals{position:absolute;top:20px;left:24px;display:flex;gap:10px;align-items:center;filter:drop-shadow(0 2px 4px #0008)}.hud-portrait{width:44px;height:64px;object-fit:cover;object-position:50% 0;image-rendering:pixelated;mask-image:linear-gradient(#000 78%,transparent)}.hud-vitals>div{width:170px}.hud-identity{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}.hud-identity strong{font-size:19px;letter-spacing:3px}.hud-era{font-size:9px;color:#c4c7ae}.hud-health,.hud-mana{height:14px;border:1px solid #b4a16b66;background:#101e23dc;position:relative;overflow:hidden;border-radius:2px}.hud-mana{height:10px;margin-top:4px}.hud-health i,.hud-mana i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#7c444c,#bf6c5c);transition:width .16s}.hud-mana i{background:linear-gradient(90deg,#356777,#73b6b1)}.hud-health span,.hud-mana span{position:relative;display:block;text-align:center;font-size:8px;line-height:12px;text-shadow:1px 1px #000}.hud-mana span{font-size:7px;line-height:8px}.hud-scene-label{position:absolute;top:21px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;text-shadow:0 2px 5px #000}.hud-scene-label>span{font:23px Georgia,serif;letter-spacing:10px;margin-left:10px}.hud-scene-label small{font-size:8px;letter-spacing:4px;color:#90afa9}.hud-utilities{position:absolute;right:20px;top:18px;display:flex;gap:5px}.hud-utilities button{background:#10262ccd;border:1px solid #66847b55;border-radius:4px;padding:7px 9px;font-size:10px;color:#cdd8c4;min-height:32px}.hud-utilities button[aria-pressed=true]{border-color:#cdaf6c;color:#f1d796}.hud-utilities .hud-fullscreen,.hud-utilities .hud-settings-button{font-size:17px;padding:3px 9px}.hud-loadout{position:absolute;top:96px;left:25px;display:flex;gap:5px;align-items:center}.hud-loadout button,.hud-loadout select{border:1px solid #7d997a66;background:#10292cdb;color:#d3d8bf;font-size:10px;padding:5px 8px;border-radius:3px;max-width:155px;min-height:29px}.hud-loadout button[aria-pressed=true]{color:#f2d392;border-color:#d0b46d}.hud-cast-label{position:absolute;top:23%;left:50%;transform:translateX(-50%);opacity:0;color:#fae9b7;font-size:17px;letter-spacing:3px;text-shadow:0 0 9px #caa56d66,0 2px 3px #000;transition:opacity .18s;text-align:center;white-space:nowrap}.hud-cast-label.visible{opacity:1}.hud-movement{position:absolute;left:25px;bottom:33px;width:126px;height:92px;display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:42px 42px;gap:4px}.hud-movement button{border:1px solid #98a68a70;background:linear-gradient(135deg,#173036d9,#102126e6);border-radius:8px;font-size:22px;color:#c5cfb5;box-shadow:inset 0 0 10px #a0bca10d}.hud-movement button:active{background:#31575c}.hud-movement small{display:block;font-size:7px;line-height:8px}.hud-movement [data-move=up]{grid-column:2}.hud-movement [data-move=left]{grid-row:2;grid-column:1}.hud-movement [data-move=down]{grid-row:2;grid-column:2}.hud-movement [data-move=right]{grid-row:2;grid-column:3}.hud-skills{position:absolute;right:25px;bottom:32px;display:flex;gap:12px;align-items:flex-end}.hud-skill{position:relative;width:62px;padding:0;color:#cbb47b;background:none;border:0;display:flex;flex-direction:column;align-items:center}.skill-orb{position:relative;width:54px;height:54px;border:1px solid #b3a06d;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 40% 30%,#294554,#0a1e2a 70%);box-shadow:0 0 0 3px #081b2499,0 0 0 4px #a9966638,inset 0 0 12px #a3bcb916,0 3px 10px #0008}.skill-orb:before{content:"";position:absolute;inset:4px;border:1px solid #a6a4783b;border-radius:50%}.skill-orb svg{width:31px;height:31px;filter:drop-shadow(0 0 4px currentColor);z-index:1}.hud-skill strong{font-size:10px;font-weight:500;margin-top:8px;letter-spacing:1px;text-shadow:1px 2px #071720}.skill-key{position:absolute;top:-13px;right:0;z-index:2;min-width:17px;text-align:center;background:#14282f;border:1px solid #9e9d76a8;border-radius:3px;font:9px ui-monospace,monospace;padding:2px 4px;color:#d9cfac}.hud-skill.active .skill-orb{border-color:#ffe7a6;box-shadow:0 0 0 3px #191a17,0 0 0 4px #d6b86b,0 0 23px #b79a5450}.skill-progress{position:absolute;inset:auto 0 0;height:var(--progress,0%);background:#050d1b70;pointer-events:none}.skill-cast{color:#adcbff}.skill-aoe{color:#b2e4dc}.skill-heavy{color:#f3ba8c}.skill-guard{color:#ddd0f0}.skill-attack .skill-orb{width:65px;height:65px}.hud-meta{position:absolute;left:25px;bottom:10px;display:flex;gap:12px;color:#92afa8;font:8px ui-monospace,monospace;opacity:.8}.hud-settings{position:absolute;right:20px;top:60px;width:310px;max-height:calc(100% - 85px);overflow:auto;pointer-events:auto;padding:20px;background:#0d222bf5;border:1px solid #8aa29766;border-radius:8px;box-shadow:0 15px 50px #0008;font-size:12px}.hud-settings[hidden]{display:none}.hud-settings-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:16px}.close-settings{font-size:23px;color:#b6c9bd;background:none;border:0}.hud-settings label{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:12px 0}.hud-settings select{background:#1e373e;color:#e2debf;border:1px solid #49666a;padding:6px;font-size:11px;max-width:150px}.hud-settings input[type=range]{width:136px;accent-color:#bfab73}.hud-settings input[type=checkbox]{accent-color:#c9b373;width:16px;height:16px}.graphics-explain,.voice-privacy,.voice-note{font-size:10px!important;line-height:1.8;color:#8fabaa;margin:12px 0}.voice-options{border-top:1px solid #54716c66;padding-top:14px;margin-top:16px}.voice-state{font-size:11px;color:#d8c48c;line-height:1.6}.voice-commands{display:flex;flex-wrap:wrap;gap:6px}.voice-commands button{font-size:10px;color:#ceddcf;background:#234046;border:1px solid #597b7755;padding:6px 8px;border-radius:4px}.monster-hud .hud-vitals>div{width:185px}.monster-hud .hud-mana{display:none}.monster-hud .hud-loadout{top:82px}.stage-wrap .stage-top,.stage-wrap .stage-corner,.stage-wrap .stage-options{display:none}.stage-wrap .loading-layer{z-index:8}.stage-wrap .impact-flash{z-index:3}.stage-wrap canvas{touch-action:auto}body.immersive .workbench,body.immersive .bestiary-workbench{display:block;max-width:none;height:calc(100svh - 72px);min-height:510px}body.immersive .loadout-panel,body.immersive .inspector-panel,body.immersive .creature-browser,body.immersive .creature-inspector,body.immersive .stage-heading,body.immersive .transport,body.immersive .motion-panel,body.immersive>footer{display:none}body.immersive .center-panel,body.immersive .creature-center{height:100%}body.immersive .stage-wrap,body.immersive .creature-center .stage-wrap{height:100%;min-height:510px;aspect-ratio:auto}body.immersive .topbar{height:72px}.tools-toggle{border:1px solid #7f956a88;padding:7px 10px!important;border-radius:4px}.tools-toggle[aria-pressed=true]{color:#f2d392;background:#344837}.stage-wrap:fullscreen .hud-skills{bottom:40px;right:40px}.stage-wrap:fullscreen .hud-movement{bottom:40px;left:40px}
@media(max-width:1050px){.hud-skills{gap:7px;right:18px}.hud-skill{width:52px}.skill-orb{width:47px;height:47px}.skill-attack .skill-orb{width:56px;height:56px}.hud-skill strong{font-size:9px}.hud-utilities{right:14px}.hud-scene-label{display:none}}
@media(max-width:620px){body.immersive .topbar{height:58px;padding:0 12px}body.immersive .workbench,body.immersive .bestiary-workbench{height:calc(100svh - 58px);min-height:480px}body.immersive .stage-wrap,body.immersive .creature-center .stage-wrap{min-height:480px}.hud-vitals{top:15px;left:14px;gap:7px}.hud-portrait{width:32px;height:50px}.hud-vitals>div{width:132px}.hud-identity strong{font-size:16px;letter-spacing:1px}.hud-era{font-size:8px}.hud-utilities{top:15px;right:11px;gap:3px;max-width:100px;flex-wrap:wrap;justify-content:flex-end}.hud-utilities button{font-size:8px;padding:5px;min-height:27px}.hud-utilities .hud-fullscreen,.hud-utilities .hud-settings-button{font-size:15px;padding:3px 7px}.hud-loadout{left:14px;top:82px;gap:4px}.hud-loadout button,.hud-loadout select{font-size:9px;padding:4px 6px;max-width:125px}.hud-skills{display:grid;grid-template-columns:repeat(4,43px);gap:11px 7px;right:12px;bottom:25px;align-items:end}.hud-skill{width:43px}.skill-orb{width:40px;height:40px}.skill-attack .skill-orb{width:47px;height:47px}.skill-orb svg{width:25px;height:25px}.hud-skill strong{font-size:8px;margin-top:5px}.skill-key{font-size:7px;min-width:12px;top:-8px;right:0;padding:1px 2px}.hud-movement{left:12px;bottom:31px;grid-template-columns:repeat(3,34px);grid-template-rows:38px 38px;width:110px;height:80px;gap:3px}.hud-movement button{font-size:18px;border-radius:6px}.hud-meta{left:14px;bottom:8px;font-size:7px;gap:7px}.hud-settings{right:10px;top:78px;width:min(310px,calc(100% - 20px));max-height:calc(100% - 90px);padding:16px}.hud-cast-label{font-size:14px;top:26%;letter-spacing:1px}.monster-hud .hud-skills{grid-template-columns:repeat(5,43px);gap:7px}.monster-hud .hud-vitals>div{width:155px}.stage-wrap:fullscreen .hud-skills{bottom:25px;right:12px}.stage-wrap:fullscreen .hud-movement{bottom:30px;left:12px}.topbar .tools-toggle{font-size:9px!important}}
@media(max-height:550px) and (min-width:621px){body.immersive .workbench,body.immersive .bestiary-workbench{min-height:300px}body.immersive .stage-wrap,body.immersive .creature-center .stage-wrap{min-height:300px}.hud-skills{bottom:20px}.hud-movement{bottom:25px}.hud-settings{max-height:calc(100% - 75px)}.skill-orb{width:43px;height:43px}.skill-attack .skill-orb{width:50px;height:50px}}

/* Keep inspection controls discoverable in both layouts. */
.hud-facing{white-space:nowrap}.hud-loadout{max-width:calc(100% - 35px)}
@media(max-width:620px){.hud-movement{grid-template-columns:repeat(3,42px);grid-template-rows:44px 44px;width:132px;height:91px;left:10px}.hud-skills{grid-template-columns:repeat(4,44px);gap:11px 4px;right:10px}.hud-skill{width:44px;min-height:56px}.skill-orb{width:42px;height:42px}.hud-facing{font-size:9px!important}.hud-loadout select{max-width:115px}.hud-utilities button{min-height:30px}.hud-settings label{min-height:32px}}
@media(max-width:620px){.topbar nav{gap:9px}.topbar .brand{font-size:17px;gap:7px;letter-spacing:1px}.topbar .brand small{display:none}.topbar .brand-mark{width:27px;height:32px;font-size:19px}.topbar #fullscreenButton,.topbar #helpButton,.topbar a[href*="originals.html"]{display:none}.topbar nav a{font-size:9px;white-space:nowrap}.bestiary .topbar nav a[href*="magic-notes.html"]{display:none}}
@media(max-width:370px){.hud-skills{grid-template-columns:repeat(3,44px)}.hud-loadout{gap:3px}.hud-loadout select{max-width:100px}.hud-loadout button{padding:4px}.hud-utilities{max-width:86px}.hud-vitals>div{width:117px}}
@media(max-width:620px){.topbar nav a[href="/bestiary.html"],.topbar nav a[href="/armory.html"]{display:block}.stage-wrap{background:#162128}}
body:not(.immersive) .hud-skills{transform:scale(.76);transform-origin:bottom right}body:not(.immersive) .hud-movement{transform:scale(.76);transform-origin:bottom left}body:not(.immersive) .hud-vitals{transform:scale(.82);transform-origin:top left}body:not(.immersive) .hud-utilities{transform:scale(.8);transform-origin:top right}body:not(.immersive) .hud-scene-label{display:none}body:not(.immersive) .hud-loadout{top:80px}

.monster-hud .hud-health{display:none}

/* Trial formations and larger combat lettering share the existing HUD space. */
.hud-crowdbar{position:absolute;left:25px;top:137px;display:flex;align-items:center;gap:7px;color:#c8d6c0;font-size:9px;text-shadow:0 1px 3px #000}.hud-crowdbar[hidden]{display:none}.crowd-caption{letter-spacing:1px;color:#a5c6bc}.crowd-count-buttons{display:flex;gap:3px}.crowd-count-buttons button{border:1px solid #5a7a7280;border-radius:3px;padding:4px 7px;min-height:25px;background:#10292ce6;color:#cdddcf;font-size:10px}.crowd-count-buttons button[aria-pressed=true]{border-color:#e2bd69;background:#394437;color:#ffe3a0}.crowd-status{font-size:8px;color:#91b4ac}.crowd-options{border-top:1px solid #54716c66;padding-top:6px;margin-top:12px}.monster-hud .crowd-options{display:none}.hud-settings .damage-size{font-weight:800}.hud-settings .target-global{accent-color:#c9b373}.hud-settings .target-density{min-width:128px}body:not(.immersive) .hud-crowdbar{top:113px;transform:scale(.85);transform-origin:top left}
@media(max-width:620px){.hud-crowdbar{left:14px;top:120px;gap:5px;max-width:calc(100% - 28px)}.crowd-caption{font-size:8px}.crowd-count-buttons button{padding:4px 6px;min-height:28px;font-size:9px}.crowd-status{max-width:62px;font-size:7px}.hud-settings .target-density{min-width:116px}body:not(.immersive) .hud-crowdbar{top:113px;transform:scale(.8)}}
@media(max-height:550px) and (min-width:621px){.hud-crowdbar{top:131px}.crowd-count-buttons button{min-height:23px;padding:3px 6px}}

/* Full, individually illustrated skill emblems; static artwork at every tier. */
.hud-skill{--emblem-light:#b6d8df}.skill-heavy{--emblem-light:#eeb16b}.skill-cast{--emblem-light:#bdadfa}.skill-aoe{--emblem-light:#a9ead2}.skill-guard{--emblem-light:#d9d49b}.skill-jump{--emblem-light:#dfc38c}.skill-air{--emblem-light:#c4c8f1}.monster-hud .skill-guard{--emblem-light:#f0ad9d}
.skill-orb{border-color:#ead3a459;background:#0c1b25;box-shadow:0 0 0 2px #0a1722,0 0 0 3px #9b835c55,inset 0 0 9px #0008,0 3px 8px #0009}.skill-orb:before{inset:1px;border-color:#e8d6b136;z-index:3;pointer-events:none}.skill-orb svg.skill-emblem{display:block;width:100%;height:100%;filter:none;position:relative;z-index:1;overflow:visible}.skill-progress{z-index:2;background:linear-gradient(0deg,#040d18c4,#081724a8);box-shadow:inset 0 1px #eef4c64d}.hud-skill strong{color:#dfd0a6;text-shadow:0 1px 2px #000,0 2px 4px #000}.hud-skill.active .skill-orb{border-color:#ffe6a7;box-shadow:0 0 0 2px #132128,0 0 0 3px #dbc086,0 0 13px color-mix(in srgb,var(--emblem-light) 28%,transparent)}.hud-skill:focus-visible{outline:none}.hud-skill:focus-visible .skill-orb{outline:2px solid #ffe4a1;outline-offset:4px}.hud-skill:active .skill-orb{transform:scale(.95)}.skill-key{border-color:#c1ab75;background:#11232eed;color:#f4e1b5;box-shadow:0 1px 3px #0009}
.stage-wrap[data-quality=low] .skill-orb,.stage-wrap[data-quality=low] .hud-skill.active .skill-orb{box-shadow:0 0 0 2px #0a1722,0 0 0 3px #9b835c77}
@media(prefers-reduced-motion:reduce){.hud-skill .skill-orb{animation:none;transition:none}.hud-skill:active .skill-orb{transform:none}}

/* v4 — one four-way joystick; core actions above a separate magic rack. */
.hud-movement{display:flex;flex-direction:column;align-items:center;gap:7px;left:max(25px,env(safe-area-inset-left));bottom:max(31px,env(safe-area-inset-bottom));width:128px;height:auto;pointer-events:none}
.hud-joystick{--stick-x:0px;--stick-y:0px;position:relative;width:122px;height:122px;border-radius:50%;border:1px solid #bdc4a069;background:radial-gradient(circle at 48% 43%,#36535673 0 20%,#172e359c 21% 47%,#0b1d269e 48% 64%,#90aaa41a 65% 67%,#0a1b2399 68%);box-shadow:inset 0 0 16px #081722bd,0 3px 12px #0005;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:4px}
.hud-joystick:focus-visible{outline:2px solid #f3d899}.hud-joystick.engaged{border-color:#edd7a1;cursor:grabbing;box-shadow:inset 0 0 16px #081722bd,0 0 17px #94d3ca23}
.stick-axis{position:absolute;background:#a0bfaf17;pointer-events:none}.stick-axis-x{height:1px;left:14px;right:14px;top:50%}.stick-axis-y{width:1px;top:14px;bottom:14px;left:50%}.stick-direction{position:absolute;font:16px system-ui,sans-serif;color:#bbcbb6b5;line-height:16px;pointer-events:none}.stick-up{top:6px;left:calc(50% - 6px)}.stick-down{bottom:7px;left:calc(50% - 6px)}.stick-left{left:10px;top:calc(50% - 10px);font-size:25px}.stick-right{right:10px;top:calc(50% - 10px);font-size:25px}
.stick-thumb{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;transform:translate(var(--stick-x),var(--stick-y));border:1px solid #c9c6a284;border-radius:50%;background:radial-gradient(circle at 34% 28%,#75938b,#304f53 45%,#17323e 80%);box-shadow:inset 0 1px 3px #d8e6bc42,inset 0 -4px 7px #0716238c,0 3px 7px #0008;pointer-events:none}.stick-thumb i{position:absolute;inset:13px;border:1px solid #c9d2ae6b;border-radius:4px;transform:rotate(45deg);background:#d7d7ac13}
.hud-movement>small{font-size:9px;color:#c1c8ad;letter-spacing:2px;text-shadow:0 1px 3px #000}.hud-joystick[data-direction=up] .stick-up,.hud-joystick[data-direction=down] .stick-down,.hud-joystick[data-direction=left] .stick-left,.hud-joystick[data-direction=right] .stick-right{color:#ffe5a5;text-shadow:0 0 8px #e3c787}
.hud-skills{display:flex;flex-direction:column;align-items:flex-end;right:max(25px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));gap:17px}
.hud-skill-row{display:flex;align-items:flex-end;gap:12px}.hud-core-row{padding:0 5px 0 12px;gap:15px}.hud-core-row .hud-skill{width:54px}.hud-core-row .skill-orb{width:49px;height:49px}.hud-core-row .skill-attack .skill-orb{width:58px;height:58px}.hud-core-row .hud-skill strong{margin-top:6px}
.hud-magic-row{padding:10px 6px 0 12px;border-top:1px solid #98b3a22b;background:linear-gradient(0deg,#0a1b243b,transparent 80%);border-radius:10px}.hud-magic-row .hud-skill{width:62px}.hud-magic-row .skill-orb{width:55px;height:55px}.hud-magic-row .hud-skill strong{white-space:nowrap;letter-spacing:.7px}.skill-time_key{color:#f5d89a;--emblem-light:#f0d086}.skill-time_key .skill-orb{border-color:#eed096b8;box-shadow:0 0 0 2px #0a1722,0 0 0 3px #b594526e,inset 0 0 9px #0008,0 3px 8px #0009}.monster-hud .hud-magic-row{border-top:0;background:none;padding:0}.monster-hud .hud-magic-row .hud-skill{width:58px}
.hud-identity{flex-wrap:wrap;justify-content:flex-start;gap:2px 5px;align-items:center}.hud-identity strong{max-width:134px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:1px}.hud-era{flex-basis:100%;font-size:8px;line-height:1.5}.hud-name-edit{width:22px;height:21px;border:1px solid #a2b8a240;border-radius:3px;background:#15333c99;color:#cbbd8a;font-size:15px;padding:0;line-height:18px}.hud-name-edit:hover{color:#ffe2a3;border-color:#dcc285}.hud-name-edit[hidden],.name-settings[hidden]{display:none}.hud-loadout [data-hero]{max-width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-vitals>div{min-width:0}
.name-settings{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #54716c66}.name-settings>strong{font-size:13px;color:#e4d19e}.hud-settings .name-settings input{width:164px;min-width:0;max-width:64%;padding:8px 9px;border:1px solid #5c7778;background:#142e37;color:#fff0cf;border-radius:4px;font:13px system-ui,sans-serif}.name-settings>p{font-size:10px;line-height:1.7;color:#99b4ad;margin:10px 0}.name-actions{display:flex;gap:7px}.name-actions button{padding:8px 11px;border:1px solid #9b997066;border-radius:4px;background:#2a423e;color:#edddb5;font-size:11px}.name-actions button[type=submit]{background:#48543e;border-color:#c8b27899}.name-status{display:block;min-height:14px;color:#c5dcac;font-size:10px;margin-top:9px}.hud-name-edit:focus-visible,.name-actions button:focus-visible{outline:2px solid #f1d391;outline-offset:2px}
@media(max-width:1050px){.hud-skills{right:18px;gap:15px}.hud-skill-row{gap:8px}.hud-core-row{gap:13px}.hud-magic-row .hud-skill{width:56px}.hud-magic-row .skill-orb{width:50px;height:50px}.hud-core-row .hud-skill{width:50px}.hud-core-row .skill-orb{width:45px;height:45px}.hud-core-row .skill-attack .skill-orb{width:53px;height:53px}}
@media(max-width:620px){
 .hud-movement{width:112px;left:max(12px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));gap:6px}.hud-joystick{width:106px;height:106px}.stick-thumb{width:44px;height:44px;margin:-22px 0 0 -22px}.stick-thumb i{inset:12px}.hud-movement>small{font-size:8px;letter-spacing:1px}
 .hud-skills{display:flex;right:max(12px,env(safe-area-inset-right));bottom:max(25px,env(safe-area-inset-bottom));gap:15px}.hud-core-row{display:flex;gap:8px;padding:0 0 0 7px}.hud-core-row .hud-skill{width:46px;min-height:56px}.hud-core-row .skill-orb{width:43px;height:43px}.hud-core-row .skill-attack .skill-orb{width:46px;height:46px}.hud-core-row .hud-skill strong{font-size:9px;margin-top:5px}
 .hud-magic-row{display:grid;grid-template-columns:repeat(3,46px);gap:13px 8px;justify-content:end;padding:10px 0 0 8px}.hud-magic-row .hud-skill{width:46px;min-height:57px}.hud-magic-row .skill-orb{width:44px;height:44px}.hud-magic-row .hud-skill strong{font-size:9px;margin-top:5px;letter-spacing:0}.hud-magic-row .skill-time_key{grid-column:3;grid-row:1}.hud-magic-row .skill-heavy{grid-column:2;grid-row:2}.hud-magic-row .skill-guard{grid-column:3;grid-row:2}
 .hud-identity strong{max-width:104px}.hud-name-edit{width:19px;height:19px;font-size:13px}.hud-era{font-size:7px}.hud-loadout [data-hero]{max-width:60px}.hud-loadout select{max-width:102px}.hud-loadout .hud-facing{max-width:47px;font-size:8px!important}.hud-loadout{gap:4px}.hud-utilities{top:13px}
 .monster-hud .hud-magic-row{display:flex;gap:6px}.monster-hud .hud-magic-row .hud-skill{width:44px}.monster-hud .hud-magic-row .skill-orb{width:42px;height:42px}.monster-hud .hud-magic-row .skill-attack .skill-orb{width:47px;height:47px}
 .stage-wrap:fullscreen .hud-skills{right:max(12px,env(safe-area-inset-right));bottom:max(25px,env(safe-area-inset-bottom))}.stage-wrap:fullscreen .hud-movement{left:max(12px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom))}
}
@media(max-width:370px){.hud-skills{right:9px}.hud-core-row{gap:6px}.hud-magic-row{gap:13px 6px}.hud-movement{left:8px;width:106px}.hud-joystick{width:100px;height:100px}.hud-identity strong{max-width:90px}.hud-loadout [data-hero]{max-width:51px}.hud-loadout select{max-width:92px}}
@media(max-height:550px) and (min-width:621px){
 .hud-skills{gap:11px;bottom:22px;right:max(17px,env(safe-area-inset-right))}.hud-core-row{gap:12px}.hud-core-row .hud-skill{width:44px}.hud-core-row .skill-orb{width:40px;height:40px}.hud-core-row .skill-attack .skill-orb{width:46px;height:46px}.hud-magic-row{padding-top:7px;gap:8px}.hud-magic-row .hud-skill{width:46px}.hud-magic-row .skill-orb{width:43px;height:43px}.hud-skill strong{margin-top:5px;font-size:8px}.skill-key{top:-9px;font-size:7px;padding:1px 3px}.hud-movement{width:104px;left:max(17px,env(safe-area-inset-left));bottom:25px}.hud-joystick{width:98px;height:98px}.stick-thumb{width:42px;height:42px;margin:-21px 0 0 -21px}.hud-movement>small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.stick-thumb{transition:none}}
/* Short landscape phones keep every control inside the visible stage. */
@media(max-height:550px) and (min-width:621px){
 body.immersive .topbar{height:52px;min-height:52px;padding-top:0;padding-bottom:0}
 body.immersive .workbench,body.immersive .bestiary-workbench{height:calc(100svh - 52px);min-height:0}
 body.immersive .stage-wrap,body.immersive .creature-center .stage-wrap{height:100%;min-height:0}
 .hud-meta{bottom:7px}.hud-settings{top:54px;max-height:calc(100% - 65px)}
}

/* v6 — the installed preview fills the usable viewport; sprites retain their
   original 16:9 scene proportions. Safe areas belong to controls, not art. */
:root{--preview-header-size:72px}
html{height:100%;background:#102522}
body.immersive{display:flex;flex-direction:column;height:100vh;height:100svh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
body.immersive .topbar{flex:0 0 calc(var(--preview-header-size) + env(safe-area-inset-top,0px));height:calc(var(--preview-header-size) + env(safe-area-inset-top,0px));min-height:0;padding-top:env(safe-area-inset-top,0px);padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));gap:12px}
body.immersive .workbench,body.immersive .bestiary-workbench{display:block;flex:1 1 0;width:100%;max-width:none;height:auto;min-height:0;min-width:0;margin:0;overflow:hidden}
body.immersive .center-panel,body.immersive .creature-center{height:100%;min-height:0}
body.immersive .stage-wrap,body.immersive .creature-center .stage-wrap{height:100%;min-height:0;aspect-ratio:auto}
.stage-wrap{--hud-safe-top:0px}
.stage-wrap:fullscreen{--hud-safe-top:env(safe-area-inset-top,0px);width:100%;height:100vh;height:100dvh;min-height:0;aspect-ratio:auto}
.stage-wrap canvas{object-fit:contain}
.hud-vitals{left:max(24px,env(safe-area-inset-left,0px));top:calc(20px + var(--hud-safe-top))}
.hud-utilities{right:max(20px,env(safe-area-inset-right,0px));top:calc(18px + var(--hud-safe-top))}
.hud-loadout,.hud-crowdbar{left:max(25px,env(safe-area-inset-left,0px))}
.hud-settings{right:max(12px,env(safe-area-inset-right,0px));max-height:calc(100% - 75px - env(safe-area-inset-bottom,0px))}
.topbar nav .nav-label-full,.topbar nav .nav-label-compact{margin:0;color:inherit}
.nav-label-compact{display:none}
html.installed-app{--preview-header-size:48px}
@media(display-mode:standalone),(display-mode:fullscreen){:root{--preview-header-size:48px}}

/* Keep the main destinations available even on narrow phones. The original
   workbench hid every header link below 620px. */
@media(max-width:620px),(max-height:550px){
 :root{--preview-header-size:48px}
 body.immersive .topbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));gap:9px}
 .topbar .header-center,.topbar .brand small{display:none}
 .topbar .brand{font-size:17px;letter-spacing:1px;gap:7px;flex-shrink:0}.topbar .brand-mark{width:27px;height:30px;font-size:19px}
 .topbar nav{gap:5px;align-items:center;white-space:nowrap;min-width:0;margin-left:auto}
 .topbar nav .nav-label-full{display:none}.topbar nav .nav-label-compact{display:inline}
 .topbar nav a[data-preview-nav],.bestiary .topbar nav a[data-preview-nav]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:4px 6px;font-size:11px}
 .topbar #toolsToggle{min-width:44px;min-height:40px;font-size:11px!important;padding:4px 7px!important}
 .topbar #fullscreenButton,.topbar #helpButton,.topbar a[href*="originals.html"]{display:none}
 body:not(.immersive) .hud-movement{transform:none}
 .hud-vitals{left:max(14px,env(safe-area-inset-left,0px));top:calc(15px + var(--hud-safe-top))}
 .hud-utilities{right:max(11px,env(safe-area-inset-right,0px));top:calc(13px + var(--hud-safe-top))}
 .hud-loadout,.hud-crowdbar{left:max(14px,env(safe-area-inset-left,0px))}
 .hud-loadout{top:calc(82px + var(--hud-safe-top))}.hud-crowdbar{top:calc(120px + var(--hud-safe-top))}
 .hud-settings{top:calc(54px + var(--hud-safe-top));max-height:calc(100% - 66px - var(--hud-safe-top) - env(safe-area-inset-bottom,0px))}
}
@media(max-width:620px){
 .hud-movement{width:148px;left:max(12px,env(safe-area-inset-left,0px));bottom:max(30px,env(safe-area-inset-bottom,0px));gap:7px}
 .hud-joystick{width:140px;height:140px;flex:none}
 .stick-thumb{width:56px;height:56px;margin:-28px 0 0 -28px}.stick-thumb i{inset:15px}
 .hud-movement>small{font-size:9px;letter-spacing:1px;white-space:nowrap}
}
@media(max-width:370px){
 .hud-movement{width:144px;left:max(8px,env(safe-area-inset-left,0px))}
 .hud-skills{right:max(8px,env(safe-area-inset-right,0px))}
 .hud-core-row{gap:5px;padding-left:5px}.hud-magic-row{gap:13px 5px;padding-left:5px}
}
@media(max-height:550px) and (min-width:621px){
 :root,html.installed-app{--preview-header-size:44px}
 .hud-movement{width:132px;left:max(17px,env(safe-area-inset-left,0px));bottom:max(25px,env(safe-area-inset-bottom,0px));gap:5px}
 .hud-joystick{width:124px;height:124px;flex:none}
 .stick-thumb{width:50px;height:50px;margin:-25px 0 0 -25px}.stick-thumb i{inset:13px}
 .hud-movement>small{font-size:8px;letter-spacing:1px;white-space:nowrap}
 .hud-skills{bottom:max(22px,env(safe-area-inset-bottom,0px))}
}

.audio-settings{border-top:1px solid #54716c66;margin-top:16px;padding-top:16px}.audio-settings>strong{display:block;color:#ead6a2;margin-bottom:12px}.audio-settings .audio-status{min-height:30px;margin:12px 0 8px;font-size:10px;line-height:1.7;color:#d6c58f;overflow-wrap:anywhere}.audio-settings a{display:inline-block;font-size:10px;line-height:1.7;color:#8cd5d5;text-decoration:underline;text-underline-offset:3px}.audio-settings select{max-width:170px}
.hud-settings{z-index:10}

/* Real-time skill cooldowns; the icon remains readable beneath the timer. */
.skill-cooldown{position:absolute;inset:0;z-index:5;display:grid;place-items:center;font:900 23px/1 "Arial Black",Impact,system-ui,sans-serif;color:#fff2c4;text-shadow:0 2px 1px #071013,2px 0 1px #071013,-2px 0 1px #071013,0 0 8px #000;pointer-events:none;font-variant-numeric:tabular-nums;letter-spacing:-.7px}.skill-cooldown[hidden]{display:none}.skill-cd-total{position:absolute;top:-9px;left:-2px;z-index:6;padding:1px 3px;border:1px solid #8f815466;border-radius:3px;background:#102126ed;color:#e6d6a8;font:700 8px/1.2 system-ui,sans-serif;letter-spacing:0;white-space:nowrap;pointer-events:none}.skill-cd-total[hidden]{display:none}.hud-skill.cooling .skill-emblem{filter:saturate(.7) brightness(.68)}.hud-skill.cooling .skill-orb{border-color:#817859;box-shadow:0 0 0 2px #07161d,0 0 0 3px #786b4f66}.hud-skill.cooling .skill-progress{box-shadow:inset 0 1px #f4e5a58a}.hud-skill[aria-disabled=true]{cursor:default}.hud-resolution{font-variant-numeric:tabular-nums;color:#c4d8cb}.resolution-status{font-size:11px;line-height:1.6;color:#e5d9b2;margin:8px 0}.resolution-note{font-size:10px;line-height:1.65;color:#a9beb4;margin:8px 0}.graphics-resolution{max-width:176px}
@media(max-width:620px){.skill-cooldown{font-size:20px}.skill-cd-total{font-size:7px;padding:1px 2px;top:-8px;left:-1px}.resolution-status{font-size:10px}.hud-resolution{font-size:7px}}

/* v8 — fixed document shell. Only named inspection/settings containers scroll.
   Do not put touch-action:none on .stage-wrap: it would also disable scrolling
   in the settings panel because touch-action is intersected with ancestors. */
html.preview-shell{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html.preview-shell body{position:fixed;inset:var(--preview-viewport-top,0px) 0 auto;display:flex;flex-direction:column;width:100%;height:100vh;height:var(--preview-viewport-height,100dvh);min-width:0;min-height:0;max-height:var(--preview-viewport-height,100dvh);margin:0;overflow:hidden;overscroll-behavior:none}
html.preview-shell .topbar,html.preview-shell body>footer{flex-shrink:0}
html.preview-shell .workbench,html.preview-shell .bestiary-workbench{flex:1 1 0;width:100%;height:auto;min-height:0;min-width:0;max-height:100%;margin:0 auto;overscroll-behavior:none}
html.preview-shell body:not(.immersive) .workbench,html.preview-shell body:not(.immersive) .bestiary-workbench{overflow:auto;-webkit-overflow-scrolling:touch}
html.preview-shell body.immersive .workbench,html.preview-shell body.immersive .bestiary-workbench{overflow:hidden}
html.preview-shell .stage-wrap canvas,html.preview-shell .hud-skills,html.preview-shell .hud-skills button,html.preview-shell .hud-joystick,html.preview-shell .hud-utilities,html.preview-shell .hud-crowdbar{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.preview-shell .hud-settings,html.preview-shell dialog{overscroll-behavior:none;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
html.preview-shell .loadout-panel,html.preview-shell .inspector-panel,html.preview-shell .creature-browser,html.preview-shell .creature-inspector,html.preview-shell .action-grid,html.preview-shell .weapon-list,html.preview-shell .monster-grid,html.preview-shell .pose-strip{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.preview-shell .hud-settings input[type=range]{touch-action:none}
html.preview-shell .stage-wrap:fullscreen{height:100dvh;max-height:100dvh}
@media(max-width:900px){html.preview-shell body:not(.immersive) .workbench>*,html.preview-shell body:not(.immersive) .bestiary-workbench>*{flex-shrink:0}}
@media(max-width:620px){html.preview-shell .hud-settings input[type=text],html.preview-shell .search-label input{font-size:16px}}

/* v9 — phone/app presentation is the stage itself, without website chrome.
   Inspector tools remain an explicitly opened view, reachable inside settings. */
html.preview-shell.game-viewport body.immersive{padding:0;background:#141d25}
html.preview-shell.game-viewport body.immersive>.topbar,
html.preview-shell.game-viewport body.immersive>footer{display:none!important}
html.preview-shell.game-viewport body.immersive>.workbench,
html.preview-shell.game-viewport body.immersive>.bestiary-workbench{flex:1 1 100%;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0}
html.preview-shell.game-viewport body.immersive .center-panel,
html.preview-shell.game-viewport body.immersive .creature-center{width:100%;height:100%;min-height:0;margin:0;padding:0;border:0}
html.preview-shell.game-viewport body.immersive .stage-wrap{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;--hud-safe-top:env(safe-area-inset-top,0px);background:linear-gradient(#141d25,#20262a)}
html.preview-shell.game-viewport body.immersive .stage-wrap canvas{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
html.preview-shell.game-viewport body.immersive .hud-scene-label{display:none}
html.preview-shell.game-viewport body.immersive .hud-loadout{top:calc(96px + var(--hud-safe-top))}
html.preview-shell.game-viewport body.immersive .hud-crowdbar{top:calc(137px + var(--hud-safe-top))}
html.preview-shell.game-viewport body.immersive .hud-settings{top:calc(58px + var(--hud-safe-top));max-height:calc(100% - 70px - var(--hud-safe-top) - env(safe-area-inset-bottom,0px))}
html.preview-shell.game-viewport body.immersive .hud-meta{bottom:max(8px,env(safe-area-inset-bottom,0px))}
/* Widescreen phones crop only the empty upper/lower stage padding. Portrait
   retains the complete scene so the body and underfoot vitals stay visible. */
@media(orientation:landscape){
 html.preview-shell.game-viewport body.immersive .stage-wrap canvas{object-fit:cover}
}
@media(max-width:620px){
 html.preview-shell.game-viewport body.immersive .hud-loadout{top:calc(82px + var(--hud-safe-top))}
 html.preview-shell.game-viewport body.immersive .hud-crowdbar{top:calc(120px + var(--hud-safe-top))}
}
@media(pointer:coarse){html.preview-shell .hud-settings input[type=text]{font-size:16px}}

/* v9 in-stage navigation and growth controls. */
.hud-workshop-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 18px}
.hud-workshop-menu a,.hud-workshop-menu button{border:1px solid #64796c;background:#142b2d;color:#e8d8ad;border-radius:6px;padding:10px 8px;text-align:center;text-decoration:none;font:inherit;font-size:13px}
.skill-growth-panel{border-top:1px solid #617165;border-bottom:1px solid #617165;padding:12px 0;margin:14px 0;color:#d6e3d8}
.skill-growth-panel h3{font-size:16px;color:#f0d99c;margin:0 0 10px}.skill-growth-panel p{font-size:12px;line-height:1.6;margin:7px 0}.skill-growth-panel small{display:block;font-size:11px;color:#9aafa6;line-height:1.5}
.defense-training-controls{display:grid;gap:8px;margin:12px 0}.defense-training-controls button{padding:10px;border-radius:6px;background:#27464a;color:#f0dfaf;border:1px solid #91b0a0;font:inherit}
.hud-defense-status{position:absolute;top:calc(174px + var(--hud-safe-top));left:max(25px,env(safe-area-inset-left,0px));font-size:11px;color:#f6d789;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000}
.hud-defense-status:empty{display:none}.hud-skill[data-passive="true"] .skill-cd-total{color:#abdfb1;border-color:#608c79}.hud-skill[data-passive="true"] .skill-key{opacity:.65}
@media(max-width:600px){.hud-defense-status{top:calc(156px + var(--hud-safe-top));left:max(14px,env(safe-area-inset-left,0px));font-size:10px}.hud-workshop-menu a,.hud-workshop-menu button{font-size:12px}}

/* v14 — touch controls follow the thumb; desktop keeps its existing two rows.
   The transparent left zone owns the pointer. Its small floating visual is
   placed at the initial contact, so a player never has to find a fixed circle. */
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement{
 position:absolute;left:0;bottom:0;width:44%;height:52%;min-height:140px;max-height:340px;
 display:block;gap:0;transform:none;pointer-events:auto;touch-action:none;z-index:1;
 user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement::before{
 content:"";position:absolute;left:max(72px,calc(env(safe-area-inset-left,0px) + 56px));
 bottom:max(70px,calc(env(safe-area-inset-bottom,0px) + 56px));width:48px;height:48px;
 border:1px solid #b9d5c52b;border-radius:50%;background:radial-gradient(circle,#a6d7cb0a,transparent 70%);
 pointer-events:none;transform:translateX(-50%);
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement>small{
 position:absolute;left:max(24px,calc(env(safe-area-inset-left,0px) + 12px));
 bottom:max(32px,calc(env(safe-area-inset-bottom,0px) + 18px));
 font-size:9px;line-height:1.5;letter-spacing:1px;color:#a8c1b585;white-space:nowrap;pointer-events:none;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement.engaged::before,
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement.engaged>small{opacity:0}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-joystick{
 position:absolute;left:var(--stick-origin-x,72px);top:var(--stick-origin-y,50%);bottom:auto;
 transform:translate(-50%,-50%);width:112px;height:112px;margin:0;opacity:0;
 border:1px solid #c0d7be70;background:radial-gradient(circle,#24474934 0 28%,#142e373b 29% 67%,transparent 68%);
 box-shadow:inset 0 0 12px #081b2426,0 1px 8px #06182026;pointer-events:none;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-joystick.engaged{opacity:.82}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .stick-thumb{
 width:42px;height:42px;margin:-21px 0 0 -21px;background:radial-gradient(circle at 36% 28%,#97b5a8a6,#365e5f82 55%,#173b469c);
 border-color:#dce3bc9c;box-shadow:inset 0 1px 3px #e2ecc930,0 2px 5px #05192354;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .stick-thumb i{inset:11px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .stick-direction{color:#c3d7c78c}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .stick-axis{background:#b1c7b51c}

/* A generous attack target anchors the quarter arc. Secondary actions are
   next to it; spells sit on the outer arc. Only actual buttons catch taps. */
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skills{
 --touch-attack-size:88px;--touch-secondary-size:64px;--touch-magic-size:50px;--touch-passive-size:44px;
 position:absolute;right:max(20px,calc(env(safe-area-inset-right,0px) + 8px));
 bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 8px));
 width:258px;height:266px;display:block;padding:0;gap:0;transform:none;pointer-events:none;z-index:2;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill-row{display:contents;padding:0;border:0;background:none}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill{
 --touch-size:var(--touch-magic-size);position:absolute;width:var(--touch-size);height:calc(var(--touch-size) + 14px);
 min-width:44px;min-height:44px;padding:0;margin:0;display:flex;align-items:center;justify-content:flex-start;
 pointer-events:auto;touch-action:none;border-radius:50% 50% 12px 12px;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill .skill-orb{
 width:var(--touch-size);height:var(--touch-size);flex:0 0 var(--touch-size);
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill strong{
 position:absolute;top:calc(var(--touch-size) + 3px);left:50%;transform:translateX(-50%);
 margin:0;font-size:9px;line-height:11px;letter-spacing:.5px;white-space:nowrap;
 color:#eee0b7;text-shadow:0 1px 2px #06121c,0 0 5px #06121c;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill .skill-key{display:none}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill .skill-cd-total{
 top:-6px;left:50%;transform:translateX(-50%);padding:1px 3px;font-size:7px;line-height:1.2;
 background:#10232de8;border-color:#bcaa6852;pointer-events:none;
}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skill .skill-cooldown{font-size:22px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="attack"]{--touch-size:var(--touch-attack-size);right:0;bottom:0}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="attack"] strong{font-size:11px;font-weight:650;letter-spacing:2px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="attack"] .skill-orb{border-color:#e7d5a5a8;box-shadow:0 0 0 2px #10232b,0 0 0 4px #c0a7655c,inset 0 0 9px #0008,0 3px 8px #0008}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="jump"]{--touch-size:var(--touch-secondary-size);right:0;bottom:114px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="dash"]{--touch-size:var(--touch-secondary-size);right:106px;bottom:0}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="heavy"]{right:94px;bottom:92px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="air_cast"]{right:202px;bottom:0}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="arcane_burst"]{right:194px;bottom:80px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="time_key"]{right:146px;bottom:158px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="guard"]{--touch-size:var(--touch-passive-size);right:68px;bottom:206px}

/* Short landscape phones retain usable targets and a clear top utility bar. */
@media(max-height:360px) and (orientation:landscape){
 .stage-wrap[data-control-layout="touch"] .hud-utilities{flex-wrap:nowrap;max-width:none;gap:3px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skills{--touch-attack-size:80px;--touch-secondary-size:58px;--touch-magic-size:46px;width:232px;height:232px;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 6px))}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="jump"]{bottom:99px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="dash"]{right:96px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="heavy"]{right:87px;bottom:82px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="air_cast"]{right:180px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="arcane_burst"]{right:176px;bottom:68px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="time_key"]{right:141px;bottom:136px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="guard"]{right:63px;bottom:174px}
}
/* Portrait keeps the left thumb lane separate from every right-hand button. */
@media(orientation:portrait) and (max-width:600px){
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement{width:36%;height:40%;max-height:320px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement>small{left:max(14px,calc(env(safe-area-inset-left,0px) + 8px));font-size:8px;letter-spacing:.3px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-skills{--touch-attack-size:78px;--touch-secondary-size:58px;--touch-magic-size:46px;width:214px;height:258px;right:max(12px,calc(env(safe-area-inset-right,0px) + 8px))}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="jump"]{bottom:104px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="dash"]{right:90px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="heavy"]{right:76px;bottom:94px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="air_cast"]{right:168px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="arcane_burst"]{right:162px;bottom:76px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="time_key"]{right:131px;bottom:150px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="guard"]{right:51px;bottom:197px}
}
@media(orientation:portrait) and (max-width:340px){
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement{width:29%}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) .hud-movement>small{font-size:7px;letter-spacing:0}
}

/* Only earned expedition techniques occupy the two open thumb positions. */
.stage-wrap .hud-skill:is(.skill-focus,.skill-wave).is-story-locked{display:none!important}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="focus_strike"]{right:0;bottom:203px}
.stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="wide_strike"]{right:205px;bottom:161px}
@media(max-height:360px) and (orientation:landscape){
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="focus_strike"]{bottom:177px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="wide_strike"]{right:199px;bottom:140px}
}
@media(orientation:portrait) and (max-width:600px){
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="focus_strike"]{right:0;bottom:190px}
 .stage-wrap[data-control-layout="touch"] .stage-hud:not(.monster-hud) [data-skill="wide_strike"]{right:125px;bottom:223px}
}