/* GBA-styled controls: indigo body tones, grey D-pad, A/B in the GBA's purple, pixel-ish bevels */
.gba-pad { display: none; width: min(100%, 480px); user-select: none; -webkit-user-select: none; touch-action: none;
  grid-template-columns: 1fr 1fr; grid-template-areas: "sh sh" "dpad ab" "sys sys"; gap: 14px 8px; padding: 8px 12px; box-sizing: border-box;
  font: bold 12px/1 monospace; }
@media (pointer: coarse) { .gba-pad { display: grid; } }
.gba-pad button { touch-action: none; -webkit-tap-highlight-color: transparent; border: 0; color: #e8e0ff;
  background: #3a3a52; box-shadow: inset -2px -2px 0 #22223a, inset 2px 2px 0 #5a5a7a; border-radius: 4px; min-height: 44px; }
.gba-pad button.on { background: #22223a; box-shadow: inset 2px 2px 0 #15152a; }
.gba-shoulders { grid-area: sh; display: flex; justify-content: space-between; }
.gba-shoulders button { width: 38%; border-radius: 14px 14px 4px 4px; background: #565670; }
.gba-dpad { grid-area: dpad; display: grid; grid-template: repeat(3, 52px) / repeat(3, 52px); justify-content: center; }
.gba-dpad button { border-radius: 2px; background: #2c2c34; box-shadow: inset -2px -2px 0 #18181e, inset 2px 2px 0 #4a4a56; }
.gba-dpad button.dg { background: transparent; box-shadow: none; color: #7a7a96; font-size: 14px; }
.gba-dpad span { background: #2c2c34; }
.gba-ab { grid-area: ab; position: relative; height: 150px; }
.gba-ab button { position: absolute; width: 66px; height: 66px; border-radius: 50%; font-size: 18px;
  background: #5a3a8a; box-shadow: inset -3px -3px 0 #3a2260, inset 3px 3px 0 #7a5aaa; }
.gba-a { right: 4px; top: 12px; } .gba-b { right: 78px; top: 64px; }
.gba-sys { grid-area: sys; display: flex; justify-content: center; gap: 24px; }
.gba-sys button { width: 96px; min-height: 44px; border-radius: 22px; font-size: 11px; letter-spacing: 1px; }
/* a stand-alone GBA-style button (e.g. CHANGE VERSION) */
.gba-btn { font: bold 11px/1 monospace; letter-spacing: 1px; color: #e8e0ff; border: 0; border-radius: 22px; min-height: 44px;
  padding: 0 18px; white-space: nowrap; background: #3a3a52; box-shadow: inset -2px -2px 0 #22223a, inset 2px 2px 0 #5a5a7a; }
/* landscape phones: the game fills the screen and the controls float over it, translucent */
@media (orientation: landscape) and (pointer: coarse) {
  .gba-pad { display: block; position: fixed; inset: 0; pointer-events: none; padding: 0; }
  .gba-pad > div { position: fixed; pointer-events: none; }
  .gba-pad button, .gba-pad .gba-dpad span { pointer-events: auto; opacity: 0.38; }
  .gba-pad button.on { opacity: 0.65; }
  .gba-shoulders { top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
  .gba-shoulders button { width: 132px; }
  .gba-dpad { left: 10px; bottom: 58px; grid-template: repeat(3, 50px) / repeat(3, 50px); }
  .gba-ab { right: 10px; bottom: 58px; width: 150px; height: 140px; }
  .gba-sys { left: 10px; right: 10px; bottom: 6px; justify-content: space-between; gap: 0; }
}