/* Touch controls (pad.js). Portrait: the pad docked at the bottom, full width (2:1 like the art), rising from below the
   window edge when the game appears. Landscape: the two grips at the sides, full height (at most 560 px, on the
   bottom), sliding in from their edges; the monitor view zooms in so the glass fills the space between them. */
.pad{position:fixed;inset:0;z-index:40;pointer-events:none}
.pad-body{position:absolute;pointer-events:auto;touch-action:none;visibility:hidden;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:transform .32s cubic-bezier(.5,0,.75,0),visibility 0s .32s}
.pad-body[data-art=pad]{left:0;right:0;bottom:env(safe-area-inset-bottom);margin:0 auto;width:min(100vw,92vh);
  transform:translateY(calc(100% + env(safe-area-inset-bottom) + 8px));filter:drop-shadow(0 -2px 10px rgba(0,0,0,.35))}
.pad-body:is([data-art=grip-l],[data-art=grip-r]){bottom:0;height:min(100%,560px)}
.pad-body[data-art=grip-l]{left:env(safe-area-inset-left);transform:translateX(calc(-100% - env(safe-area-inset-left) - 8px))}
.pad-body[data-art=grip-r]{right:env(safe-area-inset-right);transform:translateX(calc(100% + env(safe-area-inset-right) + 8px))}
.pad[data-mode=portrait] .pad-body[data-art=pad],
.pad[data-mode=landscape] .pad-body:is([data-art=grip-l],[data-art=grip-r]){transform:none;visibility:visible;
  transition:transform .56s cubic-bezier(.2,.9,.25,1),visibility 0s}
.pad-plate{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pad-part{position:absolute;background:center/100% 100% no-repeat;pointer-events:none;
  transition:transform .09s ease-out,filter .09s ease-out,translate .14s cubic-bezier(.3,1.6,.5,1)}
/* keys sink into their well */
.pad-part[data-down]{transform:translateY(1.2%) scale(.955);filter:brightness(.8);transition:transform .04s,filter .04s}
/* pedals pivot on the heel */
.pad-part:is([data-part=brake],[data-part=gas])[data-down]{transform-origin:50% 100%;transform:perspective(300px) rotateX(14deg) scale(.985);filter:brightness(.82)}
/* the D-pad rocks toward the pressed arm */
.pad-part[data-part=dpad][data-down]{filter:none}
.pad-part[data-part=dpad][data-down=up]{transform:perspective(400px) rotateX(9deg)}
.pad-part[data-part=dpad][data-down=down]{transform:perspective(400px) rotateX(-9deg)}
.pad-part[data-part=dpad][data-down=left]{transform:perspective(400px) rotateY(-9deg)}
.pad-part[data-part=dpad][data-down=right]{transform:perspective(400px) rotateY(9deg)}
/* a stick follows the thumb (translate, set by pad.js) and springs back */
.pad-part[data-part=knob]{filter:drop-shadow(0 .4vmin .5vmin rgba(0,0,0,.45))}
.pad-part[data-part=knob][data-down]{transform:none;filter:drop-shadow(0 .3vmin .35vmin rgba(0,0,0,.5)) brightness(.95);transition:translate 0s}
.scene.dock{transition:transform .56s cubic-bezier(.2,.9,.25,1)}
@media (prefers-reduced-motion:reduce){.pad-body,.pad[data-mode] .pad-body,.scene.dock,.pad-part{transition:none}}