/* Three-button layout established before rendering the surrounding housing.
   Coordinates share the shell's 3:2 canvas; every moving part stays separate. */
.touch-pad.virtual-pad{position:relative;display:block;width:calc(100% - 24px);max-width:660px;aspect-ratio:3/2;margin:10px auto 0;padding:0;container-type:inline-size;isolation:isolate;touch-action:none;user-select:none;filter:drop-shadow(0 12px 10px #0009)}
.controller-shell{display:block;width:100%;height:100%;pointer-events:none}
.face-recess{position:absolute;left:72%;top:43.4%;width:32%;height:14.7%;transform:translate(-50%,-50%) rotate(-20deg);border-radius:999px;border:1px solid #61677166;background:linear-gradient(145deg,#03060a 6%,#30363d 18%,#10141b 29%,#03060a 70%,#323941 91%,#0b0f15);box-shadow:inset 0 2px 4px #000d,inset 0 -1px 1px #afbdc724,0 1px 1px #c4d0d81f,0 2px 2px #0008;pointer-events:none}
.controller-brand{position:absolute;left:47%;top:33%;transform:translate(-50%,-50%);color:#acb5be;font:900 italic 2.8cqw/1 Arial,sans-serif;letter-spacing:.11em;text-shadow:0 1px 0 #000,0 -1px 0 #d9e0e438;pointer-events:none;text-align:center}
.controller-brand span{display:block;margin-top:.65cqw;font:700 .9cqw/1 Arial,sans-serif;letter-spacing:.23em;color:#697780}
.virtual-pad button{position:absolute;display:block;margin:0;padding:0;min-width:0;min-height:0;border:0;background:transparent;border-radius:50%;box-shadow:none;touch-action:none;outline-offset:3px;-webkit-tap-highlight-color:transparent}
.virtual-pad button:hover,.virtual-pad button.held{background:transparent;border:0}
.virtual-pad button:focus-visible{outline:none}
/* Focus traces the cap's edge; keep the housing free of a floating halo. */
.virtual-pad button:focus-visible .key-cap{border-color:#d9b77c}
.virtual-pad .dpad button:focus-visible{color:#e5b56d;text-shadow:0 0 3px #e5b56d66}
.virtual-pad button:disabled{opacity:.72}
.virtual-pad .pad-key{width:11%;aspect-ratio:1;height:auto;transform:translate(-50%,-50%);color:#f49387}
.pad-key:before{content:"";position:absolute;inset:7%;border-radius:inherit;background:#03060a;box-shadow:0 1px 1px #a3afb449,inset 0 2px 5px #000}
.key-cap{position:absolute;inset:10%;display:grid;place-items:center;border-radius:inherit;border:1px solid #555d66;background:radial-gradient(ellipse at 34% 18%,#444b55 0,#272e37 35%,#11171e 76%);box-shadow:inset 0 1px 1px #c5d0d34a,inset 0 -2px 3px #05090dc9,0 3px 0 #080b10,0 5px 5px #000b;transform:translateY(-3px);font-family:Arial,sans-serif;font-size:3.2cqw;font-weight:700;font-style:italic;text-shadow:0 -1px 0 #000;transition:transform 60ms ease-out,box-shadow 60ms ease-out,filter 60ms ease-out;pointer-events:none}
.virtual-pad button:hover:not(:disabled) .key-cap{filter:brightness(1.12)}
.virtual-pad button.held .key-cap{transform:translateY(2px) scale(.96);box-shadow:inset 0 2px 5px #000a,inset 0 -1px 1px #63717a45,0 0 0 1px #060b0f;filter:brightness(.83);color:#ffbdad}
.virtual-pad .pad-a{left:62%;top:49%}.virtual-pad .pad-b{left:72%;top:43.5%}.virtual-pad .pad-c{left:82%;top:38%}
.virtual-pad .pad-start{left:60%;top:26%;width:13%;height:7%;aspect-ratio:auto;border-radius:999px;transform:translate(-50%,-50%) rotate(-18deg);color:#202630}
.pad-start:before{inset:12% 6%;box-shadow:0 1px 1px #b2bdc23b,inset 0 2px 4px #000}
.pad-start .key-cap{inset:19% 10%;font-size:1.1cqw;letter-spacing:.1em;font-style:normal;text-shadow:0 1px 0 #e8edf57a;border-color:#aab3bf;background:linear-gradient(#c1c9d2,#929ea9 68%,#727c89);box-shadow:inset 0 1px 1px #fff8,inset 0 -1px 2px #27313c,0 2px 0 #323c48,0 3px 3px #000b;transform:translateY(-2px)}
.virtual-pad .pad-start.held .key-cap{color:#28303c;transform:translateY(1px) scale(.98)}
.virtual-pad .dpad{position:absolute;display:block;left:13.25%;top:27.375%;width:23.5%;aspect-ratio:1;border:1px solid #6c76815c;border-radius:50%;background:radial-gradient(circle at center,#05070c 57%,#111820 65%,#242d37 67%,#080d14 70%,#04080e 76%);box-shadow:inset 0 3px 8px #000a,0 1px 1px #ffffff28,0 3px 4px #0007;perspective:400px}
.dpad-pivot{position:absolute;inset:8%;transform:translateY(-2px) rotateX(var(--pad-tilt-x,0deg)) rotateY(var(--pad-tilt-y,0deg));filter:drop-shadow(0 4px 2px #000b);transition:transform 65ms ease-out,filter 65ms ease-out;transform-style:preserve-3d}
.virtual-pad.dpad-pressed .dpad-pivot{transform:translateY(1px) rotateX(var(--pad-tilt-x,0deg)) rotateY(var(--pad-tilt-y,0deg));filter:drop-shadow(0 1px 1px #000c)}
.dpad-body{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.virtual-pad .dpad button{width:44%;height:44%;color:#a2aeb6;font-size:1.9cqw;line-height:1;border-radius:4px;text-shadow:0 1px 1px #000}
.virtual-pad .dpad .up{left:28%;top:-6%}.virtual-pad .dpad .down{left:28%;bottom:-6%}.virtual-pad .dpad .left{left:-6%;top:28%}.virtual-pad .dpad .right{right:-6%;top:28%}
.virtual-pad .dpad button.held{color:#f7c779;background:radial-gradient(#e5b56d18,transparent 70%);text-shadow:0 0 6px #f4b96266}
.virtual-pad .dpad button:hover:not(:disabled){color:#efd4a4}
.controller-signal{position:absolute;left:44.7%;top:40%;width:4.5%;height:3.5%;display:flex;align-items:center;justify-content:center;gap:12%;opacity:.4;pointer-events:none}
.controller-signal svg{height:100%;width:70%;fill:none;stroke:#80b9bc;stroke-width:1.4;stroke-linecap:round}
.controller-signal i{width:9%;aspect-ratio:1;border-radius:50%;background:#53655e;box-shadow:inset 0 1px 1px #ffffff40}
.virtual-pad.connected .controller-signal{opacity:1}.virtual-pad.connected .controller-signal i{background:#b4dd91;box-shadow:0 0 5px #9cda7370}
@media(prefers-reduced-motion:reduce){.virtual-pad .key-cap,.virtual-pad .dpad-pivot{transition:none}}