.touch-controls:has(.arcade-input){display:block;padding-top:8px;min-height:0}
.arcade-input{width:min(100%,390px);margin:auto;display:grid;grid-template-columns:1fr;gap:7px}
.input-mode-tabs{display:flex;justify-content:center;gap:5px}
.input-mode-tabs button{padding:6px 15px;min-height:30px;border:1px solid #bfd0b3;background:#f6f7e9;border-radius:18px;font-size:11px;color:#315b4b;font-weight:bold}
.input-mode-tabs button[aria-pressed=true]{background:#315b4b;color:#fffaf0;border-color:#315b4b}
.arcade-touchpad{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;height:83px;border:2px solid #adc3a0;border-radius:15px;background:linear-gradient(135deg,#f8faed,#d9e7cf);color:#486d52;font-size:13px;font-weight:bold;touch-action:none;user-select:none;-webkit-user-select:none}
.touchpad-glyph{font-size:30px;line-height:1;opacity:.65}
.arcade-touchpad.is-tracking{background:#d5e8c9;border-color:#628650}
.touchpad-finger{position:absolute;width:33px;height:33px;margin:-16px 0 0 -16px;border:2px solid #3c7757;background:#ffffff65;box-shadow:0 0 0 7px #5882491a;border-radius:50%;opacity:0;pointer-events:none}
.arcade-dpad{display:grid;grid-template-columns:48px 48px 48px;grid-template-rows:44px 44px 44px;gap:4px;justify-content:center}
.arcade-dpad .control{width:48px;min-width:0;height:44px;padding:0;margin:0}
.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-center{grid-area:2/2}.dpad-right{grid-area:2/3}.dpad-down{grid-area:3/2}
.dpad-dot{display:flex;align-items:center;justify-content:center;color:#94ae83;font-size:15px}
.arcade-dpad.rally-pad{grid-template-rows:44px}.rally-pad .dpad-left{grid-area:1/1}.rally-pad .dpad-center{grid-area:1/2}.rally-pad .dpad-right{grid-area:1/3}
.arcade-action-row{display:flex;justify-content:center;gap:8px}
.arcade-action-row .control{height:38px;min-height:38px;font-size:11px;min-width:77px;margin:0;padding:0 12px}
.arcade-input[data-input-mode=pad] .arcade-dpad{display:none}.arcade-input[data-input-mode=buttons] .arcade-touchpad{display:none}
@media(max-width:650px){.game-stage:has(.arcade-input) .canvas-wrap{max-height:calc(100dvh - 304px);width:calc((100dvh - 304px)*.75)}.game-stage:has(.arcade-input[data-input-mode=buttons]) .canvas-wrap{max-height:calc(100dvh - 354px);width:calc((100dvh - 354px)*.75)}.game-stage:has(.arcade-input[data-input-type=rally][data-input-mode=buttons]) .canvas-wrap{max-height:calc(100dvh - 270px);width:calc((100dvh - 270px)*.75)}.input-mode-tabs button{min-height:32px}.arcade-action-row .control{min-height:42px;height:42px}.arcade-input{gap:6px}.game-stage:has(.arcade-input){padding-top:7px}.arcade-touchpad{height:81px}}
@media(max-height:620px) and (max-width:650px){.arcade-touchpad{height:60px}.game-stage:has(.arcade-input) .canvas-wrap{max-height:calc(100dvh - 280px);width:calc((100dvh - 280px)*.75)}.arcade-dpad{grid-template-columns:44px 44px 44px;grid-template-rows:40px 40px 40px}.arcade-dpad .control{width:44px;height:40px}.arcade-input[data-input-mode=buttons]~*{margin:0}}
