/* Live hardware additions over the existing, original console casing. */
.direction-pad{isolation:isolate;perspective:350px}
.connected-pad-face{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;filter:drop-shadow(0 3px 2px #0009)}
.pad-disc{transform-origin:75px 75px;transition:transform .10s ease-out;transform-box:view-box}
.direction-pad[data-pressed="up"] .pad-disc{transform:rotateX(12deg) translateY(-1px)}
.direction-pad[data-pressed="down"] .pad-disc{transform:rotateX(-12deg) translateY(1px)}
.direction-pad[data-pressed="left"] .pad-disc{transform:rotateY(-12deg) translateX(-1px)}
.direction-pad[data-pressed="right"] .pad-disc{transform:rotateY(12deg) translateX(1px)}
.direction-pad[data-pressed="home"] .pad-disc{transform:scale(.97)}
.direction-pad button{position:relative;z-index:1;border-radius:0}
.direction-pad button:hover,.direction-pad button:active{background:none}
.direction-pad button:focus-visible{outline:2px solid #91e6f7;outline-offset:-2px;border-radius:5px}
.hardware-accessories{display:contents}
.analog-control{position:absolute;z-index:6;display:flex;align-items:center;flex-direction:column;gap:7px}
.analog-control{top:59%;width:10.3%;min-width:44px}
.analog-left{left:7.8%}
.analog-right{right:5.2%}
.analog-stick{display:block;position:relative;aspect-ratio:1;width:100%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.analog-stick:active{cursor:grabbing}
.analog-stick:focus-visible,.brightness-step:focus-visible{outline:2px solid #8deeff;outline-offset:5px}
.analog-well{position:absolute;inset:0;border:0;border-radius:50%;pointer-events:none}
.analog-cap{position:absolute;inset:15%;border:0;border-radius:50%;transform:translate(var(--stick-x,0px),var(--stick-y,0px));transition:transform .12s ease-out}
.analog-well img{display:block;width:100%;height:100%;max-width:none;border:0;border-radius:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* URL artwork retains its shading when Windows contrast mode removes CSS gradients. */
.analog-stick,.connected-pad-face,.hardware-label,.bumper-top-mark,.console-skin{forced-color-adjust:none}
.analog-stick,.brightness-step,.bumper-control{appearance:none;-webkit-appearance:none}
.analog-stick[data-dragging="true"] .analog-cap{transition:none}
.hardware-label{color:#b3d8e9;text-shadow:0 1px 3px #000;font:600 clamp(6px,.7vw,9px)/1.4 'Space Grotesk',Arial,sans-serif;letter-spacing:1px;white-space:nowrap}
.brightness-step{position:absolute;top:5.15%;width:4.8%;height:6.5%;min-width:32px;min-height:32px;z-index:8;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:manipulation}
.brightness-down{left:26.3%}.brightness-up{left:73.8%}
#device-screen:after{content:'';position:absolute;inset:0;z-index:45;border-radius:inherit;background:rgba(0,0,0,var(--display-dim,0));pointer-events:none}
.feedback-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.analog-control{gap:4px}.hardware-label{letter-spacing:.4px}}
@media(prefers-reduced-motion:reduce){.pad-disc,.analog-cap{transition:none}}

.direction-pad{clip-path:circle(50%);touch-action:none}
.direction-pad[data-pressed="up-left"] .pad-disc{transform:rotateX(9deg) rotateY(-9deg)}
.direction-pad[data-pressed="up-right"] .pad-disc{transform:rotateX(9deg) rotateY(9deg)}
.direction-pad[data-pressed="down-left"] .pad-disc{transform:rotateX(-9deg) rotateY(-9deg)}
.direction-pad[data-pressed="down-right"] .pad-disc{transform:rotateX(-9deg) rotateY(9deg)}