/* Thumb controls share the same input actions as keyboard and gamepad. */
#touch{z-index:7;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touch .touch-toolbar{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:46%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
#touch .touch-toolbar button{width:44px;height:44px;border-radius:12px;font-size:10px;background:#0b1225d9;border-color:#dfc88b75}
.touch-brand{display:none}
.joystick-area{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:132px;text-align:center;pointer-events:auto}
#joystick{position:relative;width:132px;height:132px;border-radius:50%;border:1px solid #e8cd946b;background:radial-gradient(circle,#17243a70 0 39%,#080f20a6 40% 68%,#ebce8222 69%);box-shadow:inset 0 0 25px #0009,0 3px 18px #0005;touch-action:none}
#joystick>span:not(.joystick-knob){position:absolute;color:#f3da9a9c;font-size:21px;line-height:1;pointer-events:none}
.stick-north{top:7px;left:calc(50% - 6px)}.stick-south{bottom:7px;left:calc(50% - 6px)}.stick-west{left:10px;top:calc(50% - 12px)}.stick-east{right:10px;top:calc(50% - 12px)}
.joystick-knob{position:absolute;width:54px;height:54px;top:calc(50% - 27px);left:calc(50% - 27px);border-radius:50%;border:2px solid #f2d994b3;background:radial-gradient(circle at 35% 25%,#596279,#141d30 75%);box-shadow:0 5px 10px #0009,inset 0 2px 3px #ffffff35;pointer-events:none;will-change:transform}
.joystick-knob i{position:absolute;inset:15px;border:1px solid #e6cd9155;border-radius:50%}
#joystick.is-held .joystick-knob{border-color:#ffe69c;box-shadow:0 0 15px #e9c67750,0 5px 10px #0009}
#joystick-help{display:block;color:#c4c8d1;font:700 7px/1.4 Arial,sans-serif;white-space:nowrap;margin-top:6px;text-shadow:0 2px 3px #000}
.touch-attack-pad{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,52px);grid-auto-rows:52px;gap:7px;pointer-events:auto}
#touch .touch-key{display:grid;place-items:center;width:100%;height:100%;padding:0 2px;font:800 9px/1.15 Arial,sans-serif;letter-spacing:.015em;background:linear-gradient(150deg,#29364beb,#10192ce8);border:1px solid #e4d4ab7a;box-shadow:0 4px 0 #02071299,inset 0 1px 1px #ffffff22;backdrop-filter:none}
#touch .touch-key.light,#touch .touch-key.heavy{color:#ffdf94;border-color:#e6bc6d}
#touch .touch-key.kick,#touch .touch-key.heavykick{color:#a5e6ff;border-color:#6bb4d7}
#touch .touch-key.special{color:#c7b3ff;border-color:#ac8af0;background:linear-gradient(145deg,#33234ce8,#11172de8)}
#touch .touch-key.ultimate{color:#ffdb77;border-color:#dab04f;background:linear-gradient(145deg,#49351de8,#171623e8);font-size:8px}
#touch .touch-key.is-ready{box-shadow:0 0 13px #ffd45a8c,inset 0 0 9px #ffe18d35;border-color:#ffe598}
#touch .touch-key.is-held{background:#eacb84;color:#151723;box-shadow:0 0 18px #eacb8466;transform:translateY(2px)}
#touch button{touch-action:none;-webkit-tap-highlight-color:transparent}
.touch-hint{display:none}
.touch-layout #hud .hud-tools{display:none}
.touch-layout #hud .hud-bottom{bottom:auto;top:19%;pointer-events:none}
.touch-layout #hud .meter.right{grid-column:3}
.touch-layout #hud .meter-caption strong{max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.touch-layout .training-readout{top:30%}
.touch-layout #hud .name-row strong{font-size:max(10px,1.42cqw)}
.touch-layout #hud .name-row span,.touch-layout #hud .hud-hp,.touch-layout #hud .break-badge{display:none}
@media(orientation:landscape) and (max-height:430px){
 #touch .touch-toolbar{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:46%}
 .joystick-area{width:116px;left:max(14px,env(safe-area-inset-left));bottom:max(9px,env(safe-area-inset-bottom))}
 #joystick{width:116px;height:116px}
 .touch-attack-pad{grid-template-columns:repeat(5,46px);grid-auto-rows:46px;gap:6px;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
 .touch-layout #hud .hud-bottom{top:21%}
}
@media(orientation:landscape) and (max-width:700px){
 #touch .touch-toolbar{left:max(146px,calc(env(safe-area-inset-left) + 132px));transform:none;flex-direction:column;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(orientation:portrait){
 .touch-layout{--touch-header:calc(64px + env(safe-area-inset-top))}
 .touch-layout.match #game,.touch-layout.match #hud{height:calc(100% - 290px - var(--touch-header));top:var(--touch-header)}
 .touch-layout.match #announcement{top:calc((100% - 290px + var(--touch-header))/2)}
 .touch-layout .hud-inner{width:100vw;height:56.25vw}
 #touch .touch-toolbar{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));bottom:auto;transform:none;align-items:center;justify-content:flex-end}
 .touch-brand{display:block;margin-right:auto;color:#e8cd8b;font:900 11px Arial,sans-serif;letter-spacing:.12em}
 .joystick-area{left:max(14px,env(safe-area-inset-left));bottom:max(82px,calc(env(safe-area-inset-bottom) + 62px));width:clamp(104px,32vw,148px)}
 #joystick{width:clamp(104px,32vw,148px);height:clamp(104px,32vw,148px)}
 #joystick-help{font-size:7px;letter-spacing:0}
 .touch-attack-pad{right:max(14px,env(safe-area-inset-right));bottom:max(30px,calc(env(safe-area-inset-bottom) + 16px));grid-template-columns:repeat(3,clamp(44px,13vw,58px));grid-auto-rows:clamp(44px,13vw,58px);gap:7px}
 #touch .touch-key.special{grid-column:3;grid-row:1}#touch .touch-key.ultimate{grid-column:3;grid-row:2}
 #touch .touch-key.kick{grid-column:1;grid-row:2}#touch .touch-key.heavykick{grid-column:2;grid-row:2}
 #touch .touch-key.block{grid-column:1;grid-row:3}#touch .touch-key.dash{grid-column:2;grid-row:3}
 #touch .touch-key.counter{grid-column:3;grid-row:3}#touch .touch-key.throw{grid-column:2;grid-row:4}
 .touch-hint{display:block;position:absolute;bottom:258px;left:10px;right:10px;text-align:center;font-size:10px;color:#abb3c5;letter-spacing:.03em}
 .touch-layout #hud .hud-bottom{top:26%}
 .touch-layout .training-readout{top:38%;font-size:6px}
 .touch-layout #hud .meter-caption{font-size:6px}
 .touch-layout #hud .timer{font-size:22px}
 .touch-layout #hud .round-label{font-size:6px}
}