/* Controller face: Y above, X left, B right, A below. Pause sits between hands. */
#touch{gap:8px}
#touch,#touch.intro-hidden,body:has(.screen:not(.hidden)) #touch{display:none!important}
@media(pointer:coarse){
 #touch,#touch.intro-hidden,body:has(.screen:not(.hidden)) #touch{display:flex!important}
}
#touch .action-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,44px);gap:3px;flex:none}
#touch .action-pad button{width:48px;height:44px;min-height:44px;padding:2px;font-size:8px;line-height:1.15;border-radius:50%}
#touch .action-pad [data-action="special"]{grid-area:1/2}
#touch .action-pad [data-control="attack"]{grid-area:2/1}
#touch .action-pad [data-action="dodge"]{grid-area:2/3}
#touch .action-pad [data-action="jump"]{grid-area:3/2}
#touch .attack::after{font-size:6px}
#touch>.touch-pause{flex:none;align-self:center;min-height:44px;width:64px;padding:4px;font-size:9px;line-height:1.2;border-radius:18px}
@media(max-width:400px){#touch{gap:4px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px}#touch .action-pad{grid-template-columns:repeat(3,44px);gap:2px}#touch .action-pad button{width:44px}#touch>.touch-pause{width:54px;font-size:8px}}
@media(max-height:520px) and (orientation:landscape) and (pointer:coarse){
 main,main:has(#touch:not(.intro-hidden)):not(:has(.screen:not(.hidden))){display:grid;grid-template-columns:140px minmax(0,1fr) 168px;align-items:center;gap:8px;padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
 main #arena{grid-column:2;grid-row:1}
 #touch,#touch.intro-hidden,body:has(.screen:not(.hidden)) #touch{display:contents!important}
 main .dpad{grid-column:1;grid-row:1}
 main .action-pad{grid-column:3;grid-row:1}
 main .touch-pause{grid-column:2;grid-row:2;justify-self:center;align-self:center}
}