/* Direct retail movement: forward/back walks, left/right turns. */
.touch{gap:16px}
.pad,.pad.floating-active{--pad-size:184px;--direction-offset:64px;--diagonal-offset:47px;--direction-size:48px;width:var(--pad-size);height:var(--pad-size);flex:0 0 var(--pad-size);border:1px solid #3b4c71;border-radius:50%;background:repeating-radial-gradient(circle,#192238 0 18px,#111827 19px 20px);box-shadow:inset 0 0 0 8px #0b101c,0 8px 24px #0008;color:#dce8ff;cursor:grab;-webkit-tap-highlight-color:transparent}
.pad.floating-active{cursor:grabbing}
.direction-key{--x:0px;--y:0px;position:absolute;left:50%;top:50%;width:var(--direction-size);height:var(--direction-size);transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));display:grid;place-items:center;border:1px solid #536991;border-radius:50%;background:#263451;color:#dce8ff;box-shadow:inset 0 -4px 0 #11192a,0 3px 8px #0007;font:700 22px/1 system-ui,sans-serif;pointer-events:none}
.direction-up{--y:calc(-1*var(--direction-offset))}.direction-up-right{--x:var(--diagonal-offset);--y:calc(-1*var(--diagonal-offset))}.direction-right{--x:var(--direction-offset)}.direction-down-right{--x:var(--diagonal-offset);--y:var(--diagonal-offset)}.direction-down{--y:var(--direction-offset)}.direction-down-left{--x:calc(-1*var(--diagonal-offset));--y:var(--diagonal-offset)}.direction-left{--x:calc(-1*var(--direction-offset))}.direction-up-left{--x:calc(-1*var(--diagonal-offset));--y:calc(-1*var(--diagonal-offset))}
.pad .knob{width:44px;height:44px;z-index:2;display:grid;place-items:center;border:1px solid #43577f;background:#0e1422;color:#a9b6d1;box-shadow:0 2px 8px #0008;font-style:normal;pointer-events:none}
.move-label{font:700 10px/1 ui-monospace,monospace;letter-spacing:.1em;pointer-events:none}
.pad.floating-active .knob{border-color:#8da9ff;color:#edf2ff;background:#253253;box-shadow:0 0 14px #8da9ff55}
.pad[data-direction="n"] .direction-up,.pad[data-direction="ne"] .direction-up-right,.pad[data-direction="e"] .direction-right,.pad[data-direction="se"] .direction-down-right,.pad[data-direction="s"] .direction-down,.pad[data-direction="sw"] .direction-down-left,.pad[data-direction="w"] .direction-left,.pad[data-direction="nw"] .direction-up-left{border-color:#b9cbff;background:#8da9ff;color:#080a10;box-shadow:inset 0 -2px #435b9c,0 0 14px #8da9ff66}
.touch-actions{display:grid;grid-template-columns:repeat(2,72px);gap:10px;pointer-events:auto;touch-action:none}
.touch-actions button{--action:#263451;--action-edge:#65718a;--action-text:#dce5f8;height:72px;min-width:0;padding:0;border:1px solid var(--action-edge);border-radius:50%;background:var(--action);color:var(--action-text);box-shadow:inset 0 -6px 0 #0005,0 6px 14px #0008;font:800 12px/1 "Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.06em;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;opacity:var(--availability,1)}
.touch-actions button:is([data-action="leftPunch"],[data-action="rightPunch"]){--action:#8da9ff;--action-edge:#c0cfff;--action-text:#080a10}
.touch-actions button:is([data-action="leftKick"],[data-action="rightKick"]){--action:#b4a1ef;--action-edge:#d9ccff;--action-text:#100d20}
.touch-actions button:active{background:#e1e9ff;border-color:#fff;color:#080a10;transform:translateY(3px);box-shadow:inset 0 -2px 0 #0004,0 0 18px #8da9ff80}
.touch-actions button:is([data-action="leftKick"],[data-action="rightKick"]):active{background:#ece5ff;box-shadow:inset 0 -2px 0 #0004,0 0 18px #b4a1ef80}
.touch-actions button:focus-visible{outline:3px solid #dce5f8;outline-offset:4px}
.touch-help{display:none;color:#a9b6d1;font-size:11px;text-align:center;margin:8px 0 0}
@media(pointer:coarse),(max-width:680px){.touch{min-height:196px;align-items:center}.pad{margin-bottom:0}.touch-help{display:block}.stage{min-height:290px}}
@media(max-width:380px){.touch{gap:8px}.pad,.pad.floating-active{--pad-size:166px;--direction-offset:57px;--diagonal-offset:42px;--direction-size:44px}.touch-actions{grid-template-columns:repeat(2,64px);gap:8px}.touch-actions button{height:64px}}
@media(max-width:340px){.pad,.pad.floating-active{--pad-size:154px;--direction-offset:51px;--diagonal-offset:37px}.touch-actions{grid-template-columns:repeat(2,58px);gap:6px}.touch-actions button{height:58px;font-size:11px}}
@media(pointer:coarse) and (orientation:landscape){.touch{min-height:0;align-items:flex-end;inset:auto max(24px,var(--sr)) max(104px,calc(var(--sb) + 84px)) max(24px,var(--sl))}.pad,.pad.floating-active{--pad-size:166px;--direction-offset:57px;--diagonal-offset:42px;--direction-size:44px}.touch-actions{grid-template-columns:repeat(2,64px);gap:8px}.touch-actions button{height:64px}.touch-help{display:none}.pad{margin-bottom:0}}

/* Six direct buttons keep left and right limbs in separate columns. */
.touch-actions{grid-template-columns:repeat(2,60px);gap:8px}.touch-actions button{height:60px;font-size:11px}
.specials{display:flex;align-items:center;gap:8px;pointer-events:auto}
.specials label{font-size:11px;color:#a9b6d1}.specials select{flex:1;min-width:0;min-height:44px;background:#0e1422;color:#dce5f8;border:1px solid #65718a;padding:6px;font:inherit;font-size:12px}.specials button{padding:6px 12px;min-height:44px;white-space:nowrap}
#action-hud{position:absolute;left:50%;top:12px;bottom:auto;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:48%;justify-content:center;padding:7px 10px;background:#08101cce;color:#dce5f8;font:700 11px/1.3 system-ui,sans-serif;pointer-events:none;z-index:2}
#action-hud[hidden],#action-focus[hidden],#target-marker[hidden]{display:none}
#action-hud label{display:flex;align-items:center;gap:7px}#boost-meter{width:88px;height:9px;accent-color:#82eaff}#action-state{color:#cbb8ef}
#target-marker{position:absolute;left:0;top:0;width:22px;height:22px;border:2px solid #82eaff;border-radius:50%;box-shadow:0 0 12px #82eaff66;pointer-events:none;z-index:2}
#action-focus{position:absolute;left:50%;top:25%;transform:translateX(-50%);color:#b8f4ff;font:800 13px/1.3 system-ui,sans-serif;letter-spacing:.14em;text-shadow:0 2px 5px #000;pointer-events:none;z-index:2}
@media(max-width:440px){.touch{gap:8px}.pad,.pad.floating-active{--pad-size:144px;--direction-offset:49px;--diagonal-offset:35px;--direction-size:38px}.touch-actions{grid-template-columns:repeat(2,52px);gap:6px}.touch-actions button{height:52px;font-size:10px}.direction-key{font-size:18px}}
@media(max-width:360px){.pad,.pad.floating-active{--pad-size:122px;--direction-offset:41px;--diagonal-offset:29px;--direction-size:32px}.pad .knob{width:36px;height:36px}.touch-actions{grid-template-columns:repeat(2,48px);gap:4px}.touch-actions button{height:48px;font-size:9px}}
@media(pointer:coarse) and (orientation:landscape){.touch-actions{grid-template-columns:repeat(2,52px);gap:6px}.touch-actions button{height:52px}.touch{bottom:max(104px,calc(var(--sb) + 84px))}#action-hud{top:8px;bottom:auto;left:50%;transform:translateX(-50%);max-width:45%;justify-content:center;font-size:9px}}

#action-impacts{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.action-impact{position:absolute;width:22px;height:22px;border:2px solid #ffeac4;border-radius:50%;color:#ffeac4;box-shadow:0 0 12px #ffa663;transform:translate(-50%,-50%) scale(var(--impact-scale,1));opacity:var(--impact-opacity,1)}
.action-impact::before,.action-impact::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}.action-impact::after{transform:translate(-50%,-50%) rotate(-45deg)}
.action-impact.super{width:42px;height:42px;border-width:3px;border-color:#dbf8ff;color:#dbf8ff;box-shadow:0 0 20px #82eaff}.action-impact.super::before,.action-impact.super::after{width:66px}
.action-impact.blocked{border-color:#8ca8c5;color:#8ca8c5;box-shadow:0 0 8px #59748f}.action-impact.blocked::before,.action-impact.blocked::after{display:none}
@media(prefers-reduced-motion:reduce){.action-impact{transform:translate(-50%,-50%)}}

/* Stack action status and notices in their own corner, leaving the recovered
   scoreboard's left column clear. Hidden action HUDs keep normal notice layout. */
#action-overlay{display:contents}
#action-overlay:has(#action-hud:not([hidden])){position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:max-content;max-width:min(360px,calc(100% - 104px));pointer-events:none;z-index:2}
#action-overlay:has(#action-hud:not([hidden])) #action-hud{position:static;transform:none;max-width:100%;box-sizing:border-box;gap:5px 10px;padding:6px 8px;font-size:10px;justify-content:flex-end}
#action-overlay:has(#action-hud:not([hidden])) .message{position:static;max-width:100%;box-sizing:border-box;margin:0;padding:6px 8px;font-size:10px;line-height:1.3}
@media(pointer:coarse) and (orientation:landscape){#action-overlay:has(#action-hud:not([hidden])){max-width:min(300px,calc(100% - 104px))}}

/* Action HUD replaces the large retail portrait/stat panels only during play.
   Health and readiness sit at the top; the center and floor remain readable. */
#action-overlay:has(#action-hud:not([hidden])){left:12px;right:12px;top:10px;width:auto;max-width:none;gap:4px}
#action-overlay:has(#action-hud:not([hidden])) #action-hud{width:100%;display:flex;align-items:flex-start;justify-content:space-between;background:none;padding:0;gap:12px;flex-wrap:nowrap}
.action-vitals,.action-readiness{padding:8px 10px;background:#07121bdd;border:1px solid #8aa8c32b;border-radius:4px}
.action-vitals{display:grid;gap:8px;width:clamp(130px,22vw,220px)}
#action-hud .action-vitals label{display:grid;gap:4px;text-align:left;letter-spacing:.05em}
.action-vitals progress{width:100%;height:8px;accent-color:#86e2de}.target-vitals progress{accent-color:#ffb56b}
.action-readiness{display:grid;grid-template-columns:auto auto;gap:6px 12px;max-width:280px}
#action-hud .action-readiness label{justify-content:space-between;gap:8px}.action-readiness progress{width:58px;height:7px;accent-color:#91d6f8}#guard-meter{accent-color:#91dfb1}.action-readiness #special-meter{accent-color:#d0b2f1}
#super-ready{font-size:9px;color:#ebd497;align-self:center}#action-state{grid-column:1 / -1;min-height:0;text-align:right}#action-state:empty{display:none}
#action-hud[data-counter="true"] #action-state{color:#fff0ac}#action-hud[data-guarding="true"] #guard-meter{accent-color:#fff}#action-hud[data-boost-locked="true"] #boost-meter{accent-color:#657584}
#action-overlay:has(#action-hud:not([hidden])) .message{background:#07121ba6;max-width:50%;font-size:10px;padding:4px 7px}
#target-marker{width:16px;height:16px;transform:translate(-50%,-50%);border-radius:3px;border-width:1px;box-shadow:none}
#action-threats{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}.action-threat{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:22px;height:26px;border:1px solid #ffcd7e;background:#6b220ded;color:#fff1cd;clip-path:polygon(50% 0,100% 100%,0 100%);font:900 17px/1 system-ui;padding-top:5px;font-style:normal}.action-threat.super{background:#752249;color:#ffe0f0}.action-threat.offscreen{width:auto;height:auto;clip-path:none;padding:5px 7px;border-radius:3px;font-size:9px}.action-threat[hidden]{display:none}
@media(pointer:coarse) and (orientation:landscape){.touch{bottom:max(18px,var(--sb))}.pad,.pad.floating-active{--pad-size:144px;--direction-offset:49px;--diagonal-offset:35px;--direction-size:38px}#action-overlay:has(#action-hud:not([hidden])){top:8px;left:12px;right:12px;max-width:none}.action-vitals,.action-readiness{padding:5px 8px}.action-vitals{gap:5px}.action-readiness{gap:5px 10px}}
@media(max-width:440px){#action-overlay:has(#action-hud:not([hidden])){left:8px;right:8px;top:8px}#action-overlay:has(#action-hud:not([hidden])) #action-hud{font-size:9px;gap:6px}.action-vitals{width:110px;flex-shrink:0;padding:6px;gap:7px}.action-readiness{grid-template-columns:1fr;padding:6px;gap:5px;width:160px}.action-readiness progress{width:48px}#super-ready{font-size:8px}#action-overlay:has(#action-hud:not([hidden])) .message{max-width:55%;font-size:9px}}
#player-marker{position:absolute;transform:translate(-50%,8px);pointer-events:none;color:#dffffa;border-top:2px solid #affff4;padding:3px 5px 0;font:800 9px/1 system-ui;text-shadow:0 1px 3px #000,0 1px 3px #000;z-index:2}#player-marker[hidden]{display:none}
#special-name{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#action-hud .impact-readiness{display:flex;align-items:center;justify-content:space-between;gap:6px;letter-spacing:0;color:#b7c4d0}.impact-readiness small{font:700 8px/1.2 system-ui;white-space:nowrap}.action-vitals .impact-readiness progress{height:4px;width:58%;accent-color:#e8a579}.impact-readiness [data-broken="true"]{color:#ffb88c}

@media(pointer:coarse) and (orientation:landscape){.touch{bottom:max(104px,calc(var(--sb) + 90px))}.specials{top:max(8px,var(--st));left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:min(330px,50vw);margin:0;pointer-events:auto}.specials label{display:none}.specials select{font-size:10px}.specials button{font-size:10px;padding:4px 8px}}