.weapon-practice{position:fixed;inset:0;z-index:5000;background:#e9efdf;color:#173d35;font-family:system-ui,sans-serif;overflow:hidden;isolation:isolate;overscroll-behavior:none}.weapon-practice button,.weapon-practice select{min-height:44px;font:inherit;color:#173d35;background:#fff;border:2px solid #acc3ad;border-radius:12px;padding:8px 12px;touch-action:manipulation}.weapon-practice button:focus-visible,.weapon-practice select:focus-visible{outline:3px solid #8d45ce;outline-offset:2px}.practice-head{position:absolute;inset:0 0 auto;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));background:#e9efdfef}.practice-head>b{flex:1}.practice-head label{flex-basis:100%;display:flex;align-items:center;gap:8px}.practice-head select{flex:1;min-width:0}.practice-head small{font-size:11px}.practice-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.practice-meter{position:absolute;top:160px;left:10px;right:10px;background:#173d35e8;color:white;border-radius:8px;padding:6px;font-size:12px;pointer-events:none}.practice-toolbar{position:absolute;top:205px;left:8px;right:8px;display:flex;gap:4px;flex-wrap:wrap}.practice-toolbar button{font-size:12px;padding:6px 9px}.practice-move,.practice-aim{position:absolute;bottom:calc(130px + env(safe-area-inset-bottom));text-align:center;touch-action:none}.practice-move{left:20px}.practice-aim{right:20px}.practice-stick{width:112px;height:112px;border-radius:50%;background:#173d3529;border:2px solid #ffffffb0;display:grid;place-items:center;touch-action:none}.practice-stick i{display:block;width:44px;height:44px;background:#173d35aa;border:2px solid #fff;border-radius:50%;pointer-events:none}.practice-move small,.practice-aim small{background:#ffffffe0;font-size:11px}.practice-skills{position:absolute;bottom:calc(48px + env(safe-area-inset-bottom));left:8px;right:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.practice-skills button{font-size:11px;padding:6px 3px;touch-action:none;user-select:none}.practice-hint{position:absolute;bottom:env(safe-area-inset-bottom);left:10px;right:10px;margin:4px 0;font-size:11px;background:#ffffffe0;padding:4px;pointer-events:none}@media(min-width:700px){.practice-head label{flex-basis:45%}.practice-head small{flex-basis:100%}.practice-meter{top:110px}.practice-toolbar{top:150px}.practice-skills{left:auto;max-width:500px}.practice-move,.practice-aim{bottom:110px}}
/* Standalone body host: do not depend on the port's #app selection guard. */
.weapon-practice button,.weapon-practice button *,.weapon-practice [role="button"],.weapon-practice [role="button"] *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.weapon-practice select,.weapon-practice option{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Status grows with the saved text preset; the toolbar follows it rather than
   overlapping a wrapped meter. Control positions/sizes remain unchanged. */
.practice-status{position:absolute;top:160px;left:8px;right:8px;pointer-events:none}
.practice-status .practice-meter{position:static;display:block}
.practice-status .practice-toolbar{position:static;margin-top:6px;pointer-events:auto}
.weapon-practice[data-hud-readability=large] .practice-meter{font-size:14px;line-height:1.35}
.weapon-practice[data-hud-readability=large] .practice-hint{font-size:12px;line-height:1.3}
@media(min-width:700px){.practice-status{top:110px}}
@media(orientation:landscape) and (max-height:550px){
 .weapon-practice .practice-head small{display:none}
 .practice-status{top:100px;left:150px;right:150px}
}
/* The same live metrics/hint stay in DOM; compact landscape exposes them through
   a keyboard-accessible disclosure instead of covering Continue and the sticks. */
.practice-readout>summary{display:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.practice-readout-body .practice-hint{position:fixed}
@media(orientation:landscape) and (max-height:550px){
 .weapon-practice .practice-head{flex-wrap:nowrap;gap:5px;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left))}
 .weapon-practice .practice-head>b{font-size:11px;flex:0 1 76px;line-height:1.2}
 .weapon-practice .practice-head>button{font-size:12px;padding:6px;flex-shrink:0}
 .weapon-practice .practice-head label{flex:1 1 0;min-width:0;font-size:11px;gap:4px}
 .weapon-practice .practice-head select{width:0;font-size:12px;padding:4px}
 .weapon-practice .practice-status{top:56px;left:100px;right:100px;z-index:3}
 .weapon-practice .practice-readout>summary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;cursor:pointer;pointer-events:auto;border:2px solid #acc3ad;border-radius:10px;background:#fff;font-size:12px;color:#173d35;list-style:none}
 .weapon-practice .practice-readout>summary::after{content:' ▾';white-space:pre}
 .weapon-practice .practice-readout[open]>summary::after{content:' ▴'}
 .weapon-practice .practice-readout>summary:focus-visible{outline:3px solid #8d45ce;outline-offset:2px}
 .weapon-practice .practice-readout-body{position:absolute;top:48px;left:-92px;right:-92px;max-height:calc(100dvh - 112px);overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#e9efdf;border:2px solid #acc3ad;border-radius:10px;padding:6px;z-index:5}
 .weapon-practice .practice-readout-body .practice-hint{position:static;margin:6px 0 0;max-height:none;pointer-events:auto;font-size:12px;line-height:1.4}
 .weapon-practice .practice-status .practice-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:4px}
 .weapon-practice .practice-toolbar button{min-width:0;min-height:44px;font-size:11px;padding:4px;line-height:1.15}
 .weapon-practice .practice-move,.weapon-practice .practice-aim{top:104px;bottom:auto}
 .weapon-practice .practice-move{left:6px}.weapon-practice .practice-aim{right:6px}
 .weapon-practice .practice-stick{width:80px;height:80px}
 .weapon-practice .practice-skills{left:6px;right:6px;max-width:none;bottom:calc(4px + env(safe-area-inset-bottom));z-index:2}
 .weapon-practice .practice-skills button{min-height:44px;font-size:11px;line-height:1.15}
}
.practice-scope{display:block;font-size:11px;line-height:1.35;margin-bottom:5px}
/* Short portrait phones also need a real vertical flow: a larger model label
   must push status down, never paint through it. Full scope text lives in details. */
@media(max-width:480px) and (max-height:700px) and (orientation:portrait){
 .weapon-practice .practice-head{position:relative;inset:auto;z-index:2}
 .weapon-practice .practice-status{position:relative;top:auto;left:auto;right:auto;margin:4px 8px;z-index:3}
 .weapon-practice .practice-readout>summary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;cursor:pointer;pointer-events:auto;border:2px solid #acc3ad;border-radius:10px;background:#fff;font-size:12px;color:#173d35;list-style:none}
 .weapon-practice .practice-readout>summary::after{content:' ▾';white-space:pre}
 .weapon-practice .practice-readout[open]>summary::after{content:' ▴'}
 .weapon-practice .practice-readout>summary:focus-visible{outline:3px solid #8d45ce;outline-offset:2px}
 .weapon-practice .practice-readout-body{position:absolute;top:48px;left:0;right:0;max-height:45dvh;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#e9efdf;border:2px solid #acc3ad;border-radius:10px;padding:6px;z-index:5}
 .weapon-practice .practice-readout-body .practice-hint{position:static;margin:6px 0 0;max-height:none;pointer-events:auto;font-size:12px;line-height:1.4}
 .weapon-practice .practice-status .practice-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:4px}
 .weapon-practice .practice-toolbar button{min-width:0;min-height:44px;font-size:12px;padding:4px;line-height:1.15}
 .weapon-practice .practice-move,.weapon-practice .practice-aim{bottom:calc(130px + env(safe-area-inset-bottom))}
}
/* Native selects have large intrinsic widths for long Boss names. Let the flex
   field shrink within the phone header while retaining its native picker. */
.weapon-practice .practice-head label{min-width:0;max-width:100%;box-sizing:border-box}
.weapon-practice .practice-head select{width:0;min-width:0;max-width:100%;flex:1 1 0;box-sizing:border-box}
/* Camera framing must use the unobscured battlefield, not paint normal targets
   underneath the short-phone header/status. Renderer reads this actual rect. */
@media(max-width:480px) and (max-height:700px) and (orientation:portrait){
 .weapon-practice{display:grid;grid-template-rows:max-content max-content minmax(0,1fr) calc(104px + env(safe-area-inset-bottom))}
 .weapon-practice .practice-head{grid-row:1}
 .weapon-practice .practice-status{grid-row:2}
 .weapon-practice .practice-canvas{position:relative;inset:auto;grid-row:3;width:100%!important;height:100%!important;min-height:0;min-width:0;align-self:stretch}
}
/* Leave the landscape target/player corridor clear; utilities live on a left
   rail instead of covering the initial training target at canvas center. */
@media(orientation:landscape) and (max-height:550px){
 .weapon-practice .practice-status,.weapon-practice.combat-training .practice-status{left:8px;right:auto;width:160px}
 .weapon-practice .practice-readout-body{left:0;right:auto;width:min(420px,calc(100vw - 32px));box-sizing:border-box}
 .weapon-practice .practice-move,.weapon-practice.combat-training .practice-move{top:auto;bottom:calc(52px + env(safe-area-inset-bottom));left:20px}
 .weapon-practice .practice-move .practice-stick,.weapon-practice.combat-training .practice-move .practice-stick{width:64px;height:64px}
 .weapon-practice .practice-aim,.weapon-practice.combat-training .practice-aim{top:auto;bottom:calc(52px + env(safe-area-inset-bottom))}
}
@media(max-width:480px) and (max-height:700px) and (orientation:portrait){
 .weapon-practice .practice-stick{width:90px;height:90px}
}
/* View writes backing-size hints inline. Keep the measured CSS viewport fluid
   across rotation, including while paused, rather than retaining portrait px. */
.weapon-practice .practice-canvas{width:100%!important;height:100%!important}
/* Four utility actions need two 44px rows. Keep movement below that rail;
   put its caption beside the 60px outer hit area, never above the skill row. */
@media(orientation:landscape) and (max-height:550px){
 .weapon-practice .practice-move,.weapon-practice.combat-training .practice-move{bottom:calc(56px + env(safe-area-inset-bottom))}
 .weapon-practice .practice-move .practice-stick,.weapon-practice.combat-training .practice-move .practice-stick{width:56px;height:56px}
 .weapon-practice .practice-move small{position:absolute;left:70px;top:12px;white-space:nowrap}
}

/* Local training choice stays inside the existing readout, not the control rail. */
.weapon-practice .practice-bomb-mode{pointer-events:auto;font-size:12px}
.weapon-practice .practice-bomb-help{display:block;font-size:11px;line-height:1.35}
/* R19 manual practice parity: one quiet footer row, outside the fight/stick and
   skill rows. Landscape uses the free top-right rail, never the center corridor. */
.weapon-practice .practice-primary-controls{position:absolute;left:8px;right:8px;bottom:calc(2px + env(safe-area-inset-bottom));z-index:3;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:8px;min-height:44px;pointer-events:auto}
.weapon-practice .practice-primary-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;padding:3px 6px;font-size:12px;font-weight:700;line-height:1.1;background:#e8eed8;border-color:#436956;touch-action:none}
.weapon-practice .practice-primary-controls button small{font-size:11px;font-weight:500;line-height:1.1}.weapon-practice .practice-primary-controls button.active{background:#315f50;color:#f4ffd9;border-color:#b1d079}
.weapon-practice [data-practice-focus-status]{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.3;padding:7px 8px;border-radius:8px;background:#eef3dfeb;color:#284c3e;pointer-events:none}
.practice-has-primary-controls .practice-readout-body .practice-hint{position:static;margin:6px 0 0;pointer-events:auto}
@media(orientation:landscape) and (max-height:550px){.weapon-practice .practice-primary-controls{left:auto;right:8px;top:56px;bottom:auto;width:220px;max-width:calc(100vw - 190px);grid-template-columns:76px minmax(0,1fr)}.weapon-practice [data-practice-focus-status]{font-size:11px;padding:5px}}

/* Free weapon practice only: utilities live in the existing paused disclosure.
   One status/pause row gives the actual canvas more height; no zoom override,
   hidden enemies, smaller hit targets, or movement/aim semantics are involved. */
/* Keep the disclosure available on tall phones and desktops too: utilities
   must never disappear behind a summary hidden by the shared legacy layout. */
.free-weapon-practice .practice-readout>summary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;cursor:pointer;pointer-events:auto;border:2px solid #acc3ad;border-radius:10px;background:#fff;font-size:12px;color:#173d35;list-style:none}
.free-weapon-practice .practice-readout>summary::after{content:' ▾';white-space:pre}
.free-weapon-practice .practice-readout[open]>summary::after{content:' ▴'}
.free-weapon-practice .practice-readout>summary:focus-visible{outline:3px solid #8d45ce;outline-offset:2px}
.free-weapon-practice .practice-readout-body{position:absolute;top:48px;left:0;right:0;max-height:45dvh;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#e9efdf;border:2px solid #acc3ad;border-radius:10px;padding:6px;z-index:5}
.free-weapon-practice .practice-utilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:8px;pointer-events:auto}
.free-weapon-practice .practice-utilities button{min-width:0;min-height:44px;padding:5px;font-size:12px;overflow-wrap:anywhere}
@media(max-width:480px) and (max-height:700px) and (orientation:portrait){
 .free-weapon-practice .practice-status{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:4px;align-items:start}
 .free-weapon-practice .practice-readout{min-width:0}
 .free-weapon-practice .practice-readout>summary{min-height:44px;padding:4px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
 .free-weapon-practice .practice-status .practice-toolbar{display:block;margin:0}
 .free-weapon-practice .practice-toolbar button{width:100%;min-height:44px}
 .free-weapon-practice .practice-readout-body{top:100%;margin-top:4px;max-height:calc(100dvh - 180px);box-sizing:border-box}
}