.virtual-key{--dpad-radius:17%;--dpad-radius-in:20%;--dpad-fg:hsl(var(--muted));--dpad-fg-hover:hsl(var(--muted-hover));--dpad-bg:hsl(var(--background));--arrowcolor:hsl(var(--muted-foreground));--dpad-arrow-shift:5px;--dpad-arrow-move:35%;opacity:.4;.d-pad{position:relative;width:100%;height:100%;overflow:hidden;a{display:flex;align-items:center;justify-content:center;position:absolute;-webkit-tap-highlight-color:rgba(255,255,255,0);width:30%;height:40%;line-height:40%;background:var(--dpad-fg);text-align:center;scale:1;border:2px solid var(--dpad-fg-hover);background:linear-gradient(0deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%);transition:transform .1s ease,scale .1s ease;transform-origin:center}.key-active{scale:.9}a.left,a.right{width:40%;height:30%}a.up{top:0;left:50%;transform:translate(-50%);border-radius:var(--dpad-radius) var(--dpad-radius) 50% 50%;&.key-active{transform:translate(-55%);background:linear-gradient(0deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%)}&.round-button{border-radius:50%;width:33%;height:33%;top:3%}}a.down{bottom:0;left:50%;transform:translate(-50%);border-radius:50% 50% var(--dpad-radius) var(--dpad-radius);&.key-active{transform:translate(-55%);background:linear-gradient(180deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%)}&.round-button{border-radius:50%;width:33%;height:33%;bottom:3%}}a.left{top:50%;left:0;transform:translateY(-50%);border-radius:var(--dpad-radius) 50% 50% var(--dpad-radius);&.key-active{transform:translateY(-55%);background:linear-gradient(-90deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%)}&.round-button{border-radius:50%;width:33%;height:33%;left:3%}}a.right{top:50%;right:0;transform:translateY(-50%);border-radius:50% var(--dpad-radius) var(--dpad-radius) 50%;&.key-active{transform:translateY(-55%);background:linear-gradient(90deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%)}&.round-button{border-radius:50%;width:33%;height:33%;right:3%}}}.rect-button{display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(255,255,255,0);background:var(--dpad-fg);text-align:center;min-width:72px;min-height:38px;border-radius:8px;scale:1;transition:transform .1s ease,scale .1s ease;border:2px solid var(--dpad-fg-hover);background:linear-gradient(0deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%);&.key-active{scale:.9;transform:translateY(5%);background:linear-gradient(0deg,var(--dpad-fg) 0,var(--dpad-fg-hover) 50%)}&.small{min-height:0;min-width:0;padding:4px 8px}}}