/* Götchi Arcade physical controller skins v1.0.004 · shapes created in CSS, no raster lag */
:root{--shell:#d4d5ce;--shell-edge:#929592;--ink:#282b30;--accent:#bb2529;--face:#ad2635;--face-label:#fff}
body.controller-app{background:#090d13;color:#eaf5f2;overflow-x:hidden}
body.controller-app header{padding-block:10px 3px}
body.controller-app #pad{--shell:#d3d4cd;--shell-edge:#92948f;--ink:#25272b;--accent:#b52632;
  --face:#b52632;--face-label:white;padding:0;background:transparent;border:none;
  margin:4px auto 0;width:min(1040px,100%);box-shadow:none}
.controller-head{padding:5px 15px 9px;gap:12px}
.controller-head h1{font-size:clamp(15px,2.4vw,24px);margin:0}
.controller-head p{margin:4px 0}
#controller-type{font-size:12px;letter-spacing:.11em;text-transform:uppercase}
#controller-latency{color:#9de5c8}
.pad-shell{position:relative;background:linear-gradient(160deg,var(--shell) 0%,var(--shell) 65%,var(--shell-edge) 160%);
 color:var(--ink);padding:clamp(15px,2.8vw,28px);border-radius:clamp(20px,3vw,48px);
 min-height:235px;box-shadow:inset 0 3px 5px #ffffff9c,inset 0 -9px 14px #00000018,0 12px 28px #0009;
 border:2px solid #0003;isolation:isolate;user-select:none;-webkit-user-select:none}
.pad-shell::before{content:"";position:absolute;inset:7px;border:1px solid #ffffff50;border-radius:inherit;pointer-events:none}
.pad-mark{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;
 font-size:clamp(10px,1.6vw,15px);font-weight:900;letter-spacing:.12em;line-height:1.1}
.pad-mark small{font-size:10px;letter-spacing:.08em;opacity:.75;font-weight:700}
.pad-mark strong{font-weight:950}
.pad-shell .gamepad{position:relative;display:grid;grid-template-columns:1fr 1fr;
 gap:clamp(22px,9vw,115px);align-items:center;max-width:900px;margin:6px auto 0;padding:4px 0 2px}
.pad-shell .dpad{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
 grid-template-rows:repeat(3,1fr);gap:0;width:clamp(138px,20vw,202px);height:clamp(138px,20vw,202px);max-width:none;
 background:radial-gradient(circle,#525a61 0 18%,#0000 18% 100%);filter:drop-shadow(0 3px 1px #0004)}
.pad-shell .dpad button{width:100%;height:100%;min-height:0;padding:0;color:transparent;font-size:0;border:0;
 border-radius:0;background:linear-gradient(145deg,#444a51,#191d25 80%);box-shadow:inset 1px 2px 2px #aeb4b436,
 inset -2px -3px 3px #0008;touch-action:none}
.pad-shell .dpad button[data-button=UP]{grid-area:1/2;border-radius:7px 7px 0 0}
.pad-shell .dpad button[data-button=DOWN]{grid-area:3/2;border-radius:0 0 7px 7px}
.pad-shell .dpad button[data-button=LEFT]{grid-area:2/1;border-radius:7px 0 0 7px}
.pad-shell .dpad button[data-button=RIGHT]{grid-area:2/3;border-radius:0 7px 7px 0}
.pad-shell .dpad::after{content:"";z-index:1;pointer-events:none;position:absolute;inset:33.2%;
 background:radial-gradient(circle,#191e26 0 35%,#313640 36% 100%);border-radius:50%}
.pad-shell .dpad .pressed{background:#747b83;transform:scale(.96);box-shadow:inset 0 3px 6px #000a}
.pad-shell .actions{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
 align-items:center;justify-items:center;gap:7px;width:clamp(147px,22vw,215px);height:clamp(147px,22vw,215px);
 margin:auto;max-width:none}
.pad-shell .actions[data-layout=dual]{display:flex;justify-content:center;gap:14px;height:auto;min-height:150px}
.pad-shell .actions[data-layout=none]{display:none}
.pad-shell .gamepad[data-dpad-only=true]{grid-template-columns:1fr}
.pad-shell .actions button{width:clamp(49px,6.2vw,65px);height:clamp(49px,6.2vw,65px);max-width:none;
 min-height:0;padding:2px;border:3px solid #181a1f8f;flex:none;aspect-ratio:1;border-radius:50%;
 color:var(--face-label);background:radial-gradient(circle at 35% 23%,#ffffff47,transparent 38%),var(--face);
 box-shadow:inset 0 2px 4px #ffffff62,inset 0 -5px 4px #0004,0 4px 0 #0005,0 7px 8px #0003;
 font-size:clamp(16px,2.4vw,23px);font-weight:900;letter-spacing:0}
.pad-shell .actions button.pressed{transform:translateY(3px) scale(.97);box-shadow:inset 0 3px 5px #0008,0 1px 0 #0005}
.pad-shell .actions button[hidden],.pad-shell .aux button[hidden]{display:none!important}
.pad-shell .actions button[data-button=Y]{grid-area:2/1}
.pad-shell .actions button[data-button=X]{grid-area:1/2}
.pad-shell .actions button[data-button=B]{grid-area:3/2}
.pad-shell .actions button[data-button=A]{grid-area:2/3}
.pad-shell .actions button[data-button=L],.pad-shell .actions button[data-button=R],
.pad-shell .actions button[data-button=L2],.pad-shell .actions button[data-button=R2]{
 position:absolute;top:-25px;width:clamp(50px,7vw,90px);height:30px;border-radius:14px 14px 7px 7px;
 font-size:12px}
.pad-shell .actions button[data-button=L]{left:-42%}
.pad-shell .actions button[data-button=R]{right:-42%}
.pad-shell .actions button[data-button=L2]{left:-42%;top:-60px}
.pad-shell .actions button[data-button=R2]{right:-42%;top:-60px}
.pad-shell .aux{display:flex;justify-content:center;gap:clamp(15px,4vw,36px);margin:0 auto 5px;
 align-items:center}
.pad-shell .aux button{border:2px solid #20232b99;border-radius:99px;min-width:0;min-height:0;
 padding:5px 13px;background:linear-gradient(#4c5057,#25272c);color:#f3f6f7;box-shadow:0 2px 1px #0005;
 font-size:10px;letter-spacing:.07em;font-weight:850}
.pad-shell .aux button.pressed{background:#777a80;transform:translateY(2px)}
#orientation-note{margin:4px auto 10px;text-align:center;font-size:12px;color:#a9c5bb}
#leave-controller{margin-top:8px}
.pad-screen{display:none}
#pad[data-skin=nes] .pad-shell{border-radius:17px;background:linear-gradient(145deg,#e1dfd8,#bcbcb6);
 padding:21px 23px 16px}
#pad[data-skin=nes] .pad-shell::after{content:"";position:absolute;inset:19% 18px 16%;background:#24282d;
 border-radius:4px;z-index:-1;box-shadow:inset 0 3px 5px #080b0dd0}
#pad[data-skin=nes] .pad-mark{color:#a5272b;background:#d2d1cb;padding:3px 9px;border-radius:3px}
#pad[data-skin=nes] .actions[data-layout=dual]{flex-direction:row}
#pad[data-skin=nes] .actions button{--face:#a91823;--face-label:#fff}
#pad[data-skin=nes] .aux{position:relative;margin-top:-18px}
#pad[data-skin=nes] .aux button{background:#171b20;color:#cbd0cc;border-radius:16px;font-size:9px}
#pad[data-skin=snes] .pad-shell{--shell:#d4d3d0;--shell-edge:#999a9c;--face:#585361;border-radius:43% / 58%;padding:26px 5% 12px}
#pad[data-skin=snes] .pad-mark{justify-content:center;color:#4e4f59}
#pad[data-skin=snes] .actions{background:#999ba6;border-radius:49%}
#pad[data-skin=snes] .actions button[data-button=Y]{--face:#148e52}
#pad[data-skin=snes] .actions button[data-button=X]{--face:#355fba}
#pad[data-skin=snes] .actions button[data-button=B]{--face:#d2b328}
#pad[data-skin=snes] .actions button[data-button=A]{--face:#c63d3e}
#pad[data-skin=gb] .pad-shell,#pad[data-skin=gbc] .pad-shell{
 width:min(430px,100%);margin:0 auto;border-radius:22px 22px 75px 22px;
 min-height:min(71dvh,660px);display:flex;flex-direction:column;justify-content:space-around;
 --shell:#d7d8c9;--shell-edge:#a0a49b;--face:#8b2459;padding:20px 26px}
#pad[data-skin=gbc] .pad-shell{--shell:#8b6ab7;--shell-edge:#4d327a;--face:#7e235f;--ink:#fff}
#pad[data-skin=gb] .pad-mark,#pad[data-skin=gbc] .pad-mark{justify-content:center}
#pad[data-skin=gb] .pad-screen,#pad[data-skin=gbc] .pad-screen{display:flex;align-items:center;justify-content:center;
 height:clamp(110px,23dvh,190px);margin:16px 10px;background:#6d7965;color:#dce0b2;
 border:clamp(16px,4vw,28px) solid #4c505a;border-bottom-width:30px;border-radius:17px 17px 45px 17px;
 box-shadow:inset 0 3px 16px #0009;text-align:center;font:900 14px monospace;letter-spacing:.15em}
#pad[data-skin=gbc] .pad-screen{background:#436c82;border-color:#302c4d;color:#bcfff3}
#pad[data-skin=gb] .gamepad,#pad[data-skin=gbc] .gamepad{gap:8px;padding:8px 0}
#pad[data-skin=gb] .dpad,#pad[data-skin=gbc] .dpad{width:clamp(116px,32vw,156px);height:clamp(116px,32vw,156px)}
#pad[data-skin=gb] .actions,#pad[data-skin=gbc] .actions{min-height:155px}
#pad[data-skin=gb] .actions button[data-button=A],#pad[data-skin=gbc] .actions button[data-button=A]{transform:translateY(-22px)}
#pad[data-skin=gb] .actions button[data-button=B],#pad[data-skin=gbc] .actions button[data-button=B]{transform:translateY(17px)}
#pad[data-skin=gb] .aux button,#pad[data-skin=gbc] .aux button{transform:rotate(-24deg);min-width:70px}
#pad[data-skin=megadrive] .pad-shell,#pad[data-skin=mastersystem] .pad-shell{
 --shell:#22232a;--shell-edge:#08090d;--ink:#dcdde4;--face:#21232a;
 --face-label:#e8e9f0;border-radius:45% / 75%;padding:25px 5% 18px}
#pad[data-skin=megadrive] .gamepad,#pad[data-skin=mastersystem] .gamepad{gap:12px}
#pad[data-skin=megadrive] .actions{display:flex;gap:5px;width:auto;height:auto;justify-content:center;
 background:#07080c;border-radius:99px;padding:14px 16px;transform:rotate(-9deg)}
#pad[data-skin=megadrive] .actions button{transform:rotate(9deg);order:8}
#pad[data-skin=megadrive] .actions button[data-button=Y]{order:1}
#pad[data-skin=megadrive] .actions button[data-button=B]{order:2}
#pad[data-skin=megadrive] .actions button[data-button=A]{order:3}
#pad[data-skin=megadrive] .actions button.pressed{transform:rotate(9deg) translateY(3px)}
#pad[data-skin=megadrive] .pad-mark{justify-content:center}
#pad[data-skin=mastersystem] .actions button{--face:#b2343b}
#pad[data-skin=gamegear] .pad-shell{--shell:#222730;--shell-edge:#090d13;--ink:#e4edfd;--face:#404c66;
 border-radius:45px;padding:24px 5% 16px}
#pad[data-skin=gamegear] .pad-screen{display:flex;background:#334a64;color:#a1edf9;margin:10px 12%;min-height:57px;
 align-items:center;justify-content:center;border-radius:8px;font:900 11px monospace;letter-spacing:.15em}
#pad[data-skin=gba] .pad-shell{--shell:#7a6abb;--shell-edge:#352865;--ink:#f5f2ff;--face:#47425f;border-radius:44% / 65%}
#pad[data-skin=playstation] .pad-shell{--shell:#bbbcbf;--shell-edge:#7f8087;--ink:#282932;--face:#34343a;
 border-radius:36% / 66%;padding:33px 6% 19px}
#pad[data-skin=playstation] .actions button[data-button=Y]{color:#ef799b}
#pad[data-skin=playstation] .actions button[data-button=X]{color:#52c49d}
#pad[data-skin=playstation] .actions button[data-button=B]{color:#74a3ef}
#pad[data-skin=playstation] .actions button[data-button=A]{color:#e87983}
#pad[data-skin=n64] .pad-shell{--shell:#b4b4b0;--shell-edge:#77787b;--ink:#343434;--face:#2656ab;
 border-radius:33% / 68%}
#pad[data-skin=n64] .actions button[data-button=A]{--face:#2c65bb}
#pad[data-skin=n64] .actions button[data-button=B]{--face:#479a32}
#pad[data-skin=n64] .actions button[data-button=X],#pad[data-skin=n64] .actions button[data-button=Y]{--face:#d5af28}
#pad[data-skin=nds] .pad-shell{--shell:#c8c9d1;--shell-edge:#777780;--ink:#222936;--face:#424656}
#pad[data-skin=nds] .pad-screen{display:flex;background:#4f6372;border:12px solid #373e4b;margin:5px auto;
 justify-content:center;align-items:center;height:100px;width:min(270px,90%);color:#c6ebed;border-radius:10px}
#pad[data-skin=original] .pad-shell{--shell:#122e35;--shell-edge:#07171d;--ink:#c8fff0;--face:#236e69;--accent:#7affd3}
#pad[data-skin=atari] .pad-shell{--shell:#3a3028;--shell-edge:#18100e;--ink:#efdbc6;--face:#bc2c2e}
#pad[data-skin=atari] .actions[data-layout=dual]{display:flex}
@media(orientation:portrait){
 #pad:not([data-orientation=portrait]) .pad-shell{min-height:250px}
 #pad:not([data-orientation=portrait]) .gamepad{gap:clamp(9px,4vw,32px)}
 #pad:not([data-orientation=portrait]) .actions button{width:clamp(36px,12vw,61px);height:clamp(36px,12vw,61px)}
 #pad:not([data-orientation=portrait]) .dpad{width:clamp(108px,32vw,162px);height:clamp(108px,32vw,162px)}
 #pad:not([data-orientation=portrait]) .actions{width:clamp(110px,32vw,162px);height:clamp(110px,32vw,162px)}
 #pad[data-skin=megadrive] .actions{width:auto;height:auto;gap:0;padding:6px}
 #pad[data-skin=megadrive] .actions button{width:clamp(33px,10vw,48px);height:clamp(33px,10vw,48px)}
}
@media(orientation:landscape) and (max-height:530px){
 body.controller-app #pad .controller-head{padding:0 8px}
 body.controller-app #pad .controller-head p{display:none}
 body.controller-app #pad .pad-shell{min-height:0;padding:7px 18px 4px;border-radius:25px}
 body.controller-app #pad .pad-mark{font-size:10px}
 body.controller-app #pad .pad-screen{display:none}
 body.controller-app #pad .dpad{width:min(31vh,130px);height:min(31vh,130px)}
 body.controller-app #pad .actions{width:min(37vh,155px);height:min(37vh,155px)}
 body.controller-app #pad .actions[data-layout=dual]{width:auto;height:auto;min-height:110px}
 body.controller-app #pad .actions button{width:min(15vh,54px);height:min(15vh,54px)}
 body.controller-app #pad .aux{margin:0}
 body.controller-app #pad .aux button{padding:2px 9px}
 body.controller-app #pad .actions button[data-button=L],body.controller-app #pad .actions button[data-button=R]{top:0}
 body.controller-app #pad .actions button[data-button=L2],body.controller-app #pad .actions button[data-button=R2]{top:-20px}
 body.controller-app #pad #orientation-note{margin:0}
}
@media(prefers-reduced-motion:reduce){.pad-shell .padbtn{transition:none!important}}

/* Thumb-first controls v1.0.004: visible controls have breathing room while
   their transparent hit halos accept off-centre taps. A geometric nearest-
   button router arbitrates overlapping halos: a tap never presses two keys. */
.pad-shell .actions button{position:relative}
.pad-shell .actions button[data-button=L],
.pad-shell .actions button[data-button=R],
.pad-shell .actions button[data-button=L2],
.pad-shell .actions button[data-button=R2]{position:absolute}
.pad-shell .actions button::before,
.pad-shell .aux button::before{
 content:"";position:absolute;inset:-14px;border-radius:inherit;touch-action:none
}
.pad-shell .aux button{position:relative}
.pad-shell .actions{gap:clamp(10px,2vw,16px);width:clamp(178px,24vw,246px);height:clamp(178px,24vw,246px)}
.pad-shell .actions[data-layout=dual]{gap:clamp(18px,4vw,30px);min-height:155px}
.pad-shell .actions button{width:clamp(52px,6.2vw,69px);height:clamp(52px,6.2vw,69px)}
.pad-shell .gamepad{gap:clamp(18px,5vw,78px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:center}
.pad-shell .dpad{width:clamp(138px,20vw,204px);height:clamp(138px,20vw,204px)}
/* Shoulder buttons remain above the diamond; do not crowd the action row. */
.pad-shell .actions button[data-button=L],
.pad-shell .actions button[data-button=R],
.pad-shell .actions button[data-button=L2],
.pad-shell .actions button[data-button=R2]{min-height:30px;height:32px}
@media(orientation:portrait){
 #pad:not([data-orientation=portrait]) .gamepad{gap:8px}
 #pad:not([data-orientation=portrait]) .actions{width:clamp(155px,43vw,207px);height:clamp(155px,43vw,207px);gap:9px}
 #pad:not([data-orientation=portrait]) .actions button{width:clamp(46px,12vw,62px);height:clamp(46px,12vw,62px)}
 #pad:not([data-orientation=portrait]) .dpad{width:clamp(108px,32vw,162px);height:clamp(108px,32vw,162px)}
 #pad:not([data-orientation=portrait]) .actions[data-layout=dual]{width:auto;height:auto;gap:20px;min-height:130px}
 #pad[data-skin=megadrive] .actions{width:auto!important;height:auto!important;gap:8px!important;padding:9px 12px}
 #pad[data-skin=megadrive] .actions button{width:clamp(42px,12vw,55px);height:clamp(42px,12vw,55px)}
}
/* Narrow portrait devices: reduce decorative padding, not the thumb hitbox. */
@media(orientation:portrait) and (max-width:365px){
 body.controller-app main{padding-inline:10px}
 body.controller-app #pad .pad-shell{padding-left:9px;padding-right:9px}
 body.controller-app #pad .pad-shell .gamepad{gap:6px}
 #pad:not([data-orientation=portrait]) .actions{width:144px;height:144px;gap:5px}
 #pad:not([data-orientation=portrait]) .actions button{width:46px;height:46px}
 #pad:not([data-orientation=portrait]) .dpad{width:110px;height:110px}
 #pad[data-skin=gb] .dpad,#pad[data-skin=gbc] .dpad{width:110px;height:110px}
 #pad[data-skin=gb] .actions,#pad[data-skin=gbc] .actions{width:144px;height:144px}
 #pad[data-skin=gb] .gamepad,#pad[data-skin=gbc] .gamepad{gap:5px}
}
@media(orientation:landscape) and (max-height:530px){
 body.controller-app #pad .pad-shell .gamepad{gap:clamp(12px,5vw,60px)}
 body.controller-app #pad .dpad{width:clamp(110px,33vh,168px);height:clamp(110px,33vh,168px)}
 body.controller-app #pad .actions{width:clamp(174px,46vh,220px);height:clamp(174px,46vh,220px);gap:10px}
 body.controller-app #pad .actions button{width:clamp(48px,13vh,62px);height:clamp(48px,13vh,62px)}
 body.controller-app #pad .actions[data-layout=dual]{width:auto;height:auto;gap:24px;min-height:108px}
 body.controller-app #pad[data-skin=megadrive] .actions{width:auto;height:auto;gap:10px}
 body.controller-app #pad .actions button[data-button=L],
 body.controller-app #pad .actions button[data-button=R],
 body.controller-app #pad .actions button[data-button=L2],
 body.controller-app #pad .actions button[data-button=R2]{height:30px}
}