.premium-pad { --pad-size: 132px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px 28px; padding: 18px 22px; margin-top: 12px; border: 1px solid #c4cae0; border-radius: 20px; background: linear-gradient(145deg, #f4f1fb, #e4e8f2); box-shadow: inset 0 1px 0 #fff, 0 4px 12px #173aaf0b; touch-action: none; user-select: none; -webkit-user-select: none; }
.premium-pad button { touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid #697799; background: #455477; color: #fffdf2; box-shadow: inset 0 2px 0 #ffffff30, 0 3px 0 #29364f; font: 600 20px/1 sans-serif; padding: 0; cursor: pointer; }
.premium-pad button.held, .premium-pad button.input-held { background: #2b653f; box-shadow: inset 0 2px 4px #10251955; transform: translateY(2px); }
.premium-pad button:disabled { opacity: .5; cursor: default; }
.premium-pad .pad-shoulders { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.premium-pad .pad-shoulders button { width: 72px; height: 36px; border-radius: 12px 12px 6px 6px; font-size: 16px; }
.premium-pad .touch-dpad { grid-row: 2; grid-column: 1; position: relative; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 0; width: var(--pad-size); height: var(--pad-size); justify-self: start; border-radius: 50%; background: #d4daea; touch-action: none; }
.premium-pad .touch-dpad button { min-width: 0; min-height: 0; border: 0; border-radius: 0; }
.premium-pad .touch-dpad button:nth-child(1) { grid-area: 1 / 2; border-radius: 8px 8px 0 0; }
.premium-pad .touch-dpad button:nth-child(2) { grid-area: 2 / 1; border-radius: 8px 0 0 8px; }
.premium-pad .dpad-center { grid-area: 2 / 2; background: #455477; position: relative; }
.premium-pad .dpad-center::after { content: ''; position: absolute; inset: 14px; border: 1px solid #ffffff35; border-radius: 50%; }
.premium-pad .touch-dpad button:nth-child(4) { grid-area: 2 / 3; border-radius: 0 8px 8px 0; }
.premium-pad .touch-dpad button:nth-child(5) { grid-area: 3 / 2; border-radius: 0 0 8px 8px; }
.premium-pad .touch-actions { grid-row: 2; grid-column: 2; display: flex; gap: 14px; justify-self: end; align-items: center; }
.premium-pad .touch-actions button { min-width: 58px; min-height: 58px; border-radius: 50%; background: #765d9f; border-color: #574279; box-shadow: inset 0 2px 0 #ffffff35, 0 4px 0 #49355f; font-size: 24px; }
.premium-pad .touch-actions button:last-child { margin-bottom: 34px; }
.premium-pad .touch-actions button.held, .premium-pad .touch-actions button.input-held { background: #2b653f; box-shadow: inset 0 2px 4px #10251955; }
.premium-pad .touch-middle { grid-row: 3; display: flex; gap: 20px; grid-column: 1 / -1; justify-content: center; }
.premium-pad .touch-middle button { width: 64px; height: 30px; border-radius: 18px; font-size: 10px; letter-spacing: 1px; }
body[data-fullscreen="true"][data-touch="true"] { padding-bottom: 260px; }
body[data-fullscreen="true"][data-touch="true"] #screen { width: min(100vw, calc((100dvh - 260px) * var(--mgba-aspect, 1.5))); }
body[data-fullscreen="true"][data-touch="true"] #touch.premium-pad { display: grid; inset: auto 10px 10px; box-sizing: border-box; }
@media (max-width: 380px) { .premium-pad { --pad-size: 120px; padding: 14px 12px; gap: 10px; } .premium-pad .touch-actions { grid-row: 2; grid-column: 2; gap: 10px; } .premium-pad .touch-actions button { min-width: 52px; min-height: 52px; } }
@media (orientation: landscape) and (max-height: 500px) { body[data-fullscreen="true"][data-touch="true"] { padding: 0 170px; } body[data-fullscreen="true"][data-touch="true"] #screen { width: min(calc(100vw - 340px), calc(100dvh * var(--mgba-aspect, 1.5))); } body[data-fullscreen="true"][data-touch="true"] #touch.premium-pad { inset: 0; background: transparent; border: 0; box-shadow: none; grid-template-columns: 140px 140px; justify-content: space-between; margin: 0; padding: 12px; pointer-events: none; } #touch.premium-pad > div { pointer-events: auto; } }