/* Opt-in only. The unclipped root retains diagonal pointer capture for every skin. */
.direction-pad{--edge:#d7bd70;--face:#12161ce8;--arrow:#f5e8c5;position:relative!important;width:156px!important;height:156px!important;box-sizing:border-box;clip-path:none!important;transform:none!important;touch-action:none!important;user-select:none;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;isolation:isolate;cursor:grab;outline:none;padding:0}
.direction-pad:active{cursor:grabbing}.direction-pad:focus-visible{outline:2px dashed #f2dab0;outline-offset:5px}.direction-pad::before,.direction-pad::after{content:'';position:absolute;pointer-events:none;box-sizing:border-box}
.direction-pad>span{position:absolute!important;display:block;width:52px;height:52px;font-size:0!important;color:var(--arrow)!important;line-height:0!important;text-shadow:none!important;box-sizing:border-box;pointer-events:none;transition:background-color 85ms,filter 85ms,translate 85ms}
.direction-pad .joy-up{left:52px!important;top:0!important;right:auto!important;bottom:auto!important;--turn:0deg}.direction-pad .joy-right{right:0!important;top:52px!important;left:auto!important;bottom:auto!important;--turn:90deg}.direction-pad .joy-down{left:52px!important;bottom:0!important;top:auto!important;right:auto!important;--turn:180deg}.direction-pad .joy-left{left:0!important;top:52px!important;right:auto!important;bottom:auto!important;--turn:270deg}
.direction-pad>span::after{content:'';position:absolute;width:13px;height:13px;border-top:3px solid currentColor;border-left:3px solid currentColor;left:18px;top:20px;transform:rotate(calc(45deg + var(--turn)));box-sizing:border-box}
.direction-pad>i{position:absolute!important;left:60px!important;top:60px!important;display:block;width:36px!important;height:36px!important;box-sizing:border-box;pointer-events:none;z-index:3;border-radius:50%!important;background:#11151a!important;border:1px solid #d0b575!important;box-shadow:0 3px 5px #0007!important;transition:background-color 100ms}
.direction-pad[data-mask]:not([data-mask="0"])>i{background:#816531!important}.direction-pad>span.is-on{color:#fff7d9!important;filter:brightness(1.4);translate:0 2px}.direction-pad.hitarea{outline:1px dashed #5ce8c8!important;outline-offset:0;background:#3adcab16!important}.direction-pad.hitarea::after{inset:2px;border:1px dotted #69e5cd5c}
/* A: four discrete machined keys and a short central spindle. */
.direction-pad[data-direction=A]::before{inset:5px;background:#06090c9c;clip-path:polygon(32% 0,68% 0,68% 32%,100% 32%,100% 68%,68% 68%,68% 100%,32% 100%,32% 68%,0 68%,0 32%,32% 32%)}
.direction-pad[data-direction=A]>span{background:linear-gradient(135deg,#383a3be8,#101418f5 68%);border:1px solid #bead7e;border-radius:5px;box-shadow:inset 0 1px 0 #f8e5b43d,0 3px 6px #0005;scale:.91}
.direction-pad[data-direction=A]>span.is-on{background:linear-gradient(145deg,#b2924c,#5b4826);border-color:#ffe8ad}.direction-pad[data-direction=A]>i{border-radius:7px!important;background:#090d10!important;width:28px!important;height:28px!important;left:64px!important;top:64px!important;border-color:#7b7154!important}
/* B: open center and thick black chevrons with gold cutting edges. */
.direction-pad[data-direction=B]>span{background:#f4d263;clip-path:polygon(8% 62%,17% 52%,10% 50%,50% 8%,90% 47%,84% 51%,95% 62%,72% 67%,50% 48%,28% 68%);transform:rotate(var(--turn));filter:drop-shadow(0 3px 2px #000a)}
.direction-pad[data-direction=B]>span::before{content:'';position:absolute;inset:4px 4px 6px;background:linear-gradient(#1b1e22,#030609);clip-path:polygon(6% 64%,50% 10%,94% 59%,74% 66%,50% 42%,28% 67%)}
.direction-pad[data-direction=B]>span::after{display:none}.direction-pad[data-direction=B]>i{width:14px!important;height:14px!important;left:71px!important;top:71px!important;border-radius:2px!important;border-color:#ddc887!important;background:#0b111bbb!important;opacity:.8;rotate:45deg;box-shadow:none!important}.direction-pad[data-direction=B]>span.is-on{background:#fff1ab;filter:brightness(1.45) drop-shadow(0 3px 2px #000b);translate:0 0;scale:1.13}.direction-pad[data-direction=B]>span.is-on::before{background:#b18b25}
/* C: low-contrast circular touch bed with a tactile traveling thumb cap. */
.direction-pad[data-direction=C]::before{inset:4px;border:1px solid #e8d7a785;border-radius:50%;background:#080f1975;box-shadow:inset 0 0 0 7px #090e1930}
.direction-pad[data-direction=C]>span{scale:.85;color:#ddcfaa!important}.direction-pad[data-direction=C]>span::after{border-width:2px}.direction-pad[data-direction=C]>i{width:52px!important;height:52px!important;left:52px!important;top:52px!important;background:radial-gradient(circle at 35% 25%,#48505b,#161d25 80%)!important;border:2px solid #cfbe8b!important;box-shadow:0 4px 10px #0005!important}.direction-pad[data-direction=C]>span.is-on{background:#b39a5340;border-radius:50%;color:#fff8dc!important;translate:0 0}.direction-pad[data-direction=C][data-mask]:not([data-mask="0"])>i{border-color:#ffe3a0!important;background:radial-gradient(circle at 35% 25%,#846c3d,#2b261d 80%)!important}
/* D: separate angular petals, a diamond hub and a fine outer diamond. */
.direction-pad[data-direction=D]::before{inset:23px;border:1px solid #e4c47879;rotate:45deg;background:#080d1659}
.direction-pad[data-direction=D]>span{background:#bbaa7b;clip-path:polygon(50% 0,100% 47%,77% 100%,23% 100%,0 47%);transform:rotate(var(--turn));scale:.89}
.direction-pad[data-direction=D]>span::before{content:'';position:absolute;inset:1px;background:linear-gradient(#30383ff2,#111820f0);clip-path:inherit}.direction-pad[data-direction=D]>span::after{transform:rotate(45deg);width:12px;height:12px;left:20px;top:24px;border-width:2px}.direction-pad[data-direction=D]>i{width:24px!important;height:24px!important;left:66px!important;top:66px!important;rotate:45deg;border-radius:2px!important;background:#15202ae0!important}.direction-pad[data-direction=D]>span.is-on{background:#ffe5a1;translate:0 0;scale:.96}.direction-pad[data-direction=D]>span.is-on::before{background:#795e2c}
.dragon-ui #joystick.direction-pad{left:80px!important;bottom:12px!important;width:156px!important;height:156px!important;clip-path:none!important;border-radius:0!important;background:none!important;border:0!important;box-shadow:none!important}.dragon-ui #vehicleHorn{bottom:181px!important}
@media(prefers-reduced-motion:reduce){.direction-pad>span,.direction-pad>i{transition:none!important}.direction-pad>span.is-on{translate:none!important}}