/* ConnectiCraft Arcade — PocketArch-style Webretro touch overlay.
   This is an HTML/CSS adaptation for Webretro's keyboard-backed WASM input;
   native RetroArch .cfg overlays cannot be loaded by the browser build. */
#touchcontrols {
  display: none;
  position: fixed;
  z-index: 12;
  inset: 0;
  padding: max(12px, env(safe-area-inset-top))
           max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom))
           max(14px, env(safe-area-inset-left));
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}

.touch-dpad, .touch-abxy, .touch-center, .touch-shoulders {
  pointer-events: auto;
}

/* Soft, translucent PocketArch-like controls with large touch targets. */
.touch-key {
  min-width: 48px;
  min-height: 48px;
  padding: 5px;
  border: 1px solid rgba(238, 244, 220, .42);
  border-radius: 50%;
  background: rgba(20, 25, 19, .34);
  color: rgba(249, 251, 240, .9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14),
              0 2px 10px rgba(0, 0, 0, .18);
  font: 800 15px Arial, sans-serif;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: .78;
}
.touch-key:active, .touch-key.pressed {
  background: rgba(211, 241, 103, .78);
  border-color: rgba(244, 255, 190, .9);
  color: #10150d;
  transform: scale(.94);
  box-shadow: 0 0 16px rgba(215, 242, 106, .34);
}

.touch-dpad {
  display: grid;
  grid-template: repeat(3, 52px) / repeat(3, 52px);
  gap: 3px;
  opacity: .9;
}
.touch-dpad .touch-key { border-radius: 15px; }
.touch-dpad .touch-up { grid-area: 1 / 2; }
.touch-dpad .touch-left { grid-area: 2 / 1; }
.touch-dpad .touch-right { grid-area: 2 / 3; }
.touch-dpad .touch-down { grid-area: 3 / 2; }

.touch-abxy {
  display: grid;
  grid-template: repeat(2, 64px) / repeat(2, 64px);
  gap: 7px;
  transform: translate(8px, -8px) rotate(-12deg);
  margin-right: max(2px, env(safe-area-inset-right));
  opacity: .9;
}
.touch-abxy .touch-key {
  min-width: 64px;
  min-height: 64px;
  font-size: 19px;
}
.touch-abxy .touch-y { grid-area: 1 / 1; }
.touch-abxy .touch-x { grid-area: 1 / 2; }
.touch-abxy .touch-b { grid-area: 2 / 1; }
.touch-abxy .touch-a { grid-area: 2 / 2; }

.touch-center {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.touch-center .touch-key {
  min-width: 72px;
  min-height: 36px;
  border-radius: 20px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: .08em;
}

.touch-shoulders {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 154px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  transform: none;
}
.touch-shoulders .touch-key {
  min-width: 74px;
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
  transform: translateY(-14px);
}

@media (pointer: coarse), (max-width: 700px) {
  #touchcontrols { display: flex; }
  /* Reserve a dedicated control band below the gameplay canvas. */
  #canvas, #canvasmask {
    top: var(--menuheight) !important;
    height: calc(100vh - var(--menuheight) - 170px) !important;
  }
  #webretrotitle.show { top: 16vh; }
  body.coreselect #webretrotitle { top: 12vh; }
  #ffd { max-height: 46vh; }
}

/* Landscape mobile: controls sit below the gameplay area. */
@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-width: 900px) {
  #touchcontrols {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    min-height: 150px;
  }
  #canvas, #canvasmask {
    height: calc(100vh - var(--menuheight) - 156px) !important;
  }
  .touch-dpad { transform: scale(.92); transform-origin: left bottom; }
  .touch-abxy { transform: translate(8px, -8px) rotate(-12deg) scale(.94); transform-origin: right bottom; }
  .touch-center { bottom: max(12px, env(safe-area-inset-bottom)); }
  /* L/R belong in the reserved band too, never over the canvas. */
  .touch-shoulders {
    top: auto;
    bottom: max(184px, calc(env(safe-area-inset-bottom) + 164px));
    padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  #canvas, #canvasmask {
    height: calc(100vh - var(--menuheight) - 128px) !important;
  }
  #touchcontrols { min-height: 122px; }
  .touch-dpad { transform: scale(.84); }
  .touch-abxy { transform: translate(8px, -6px) rotate(-12deg) scale(.86); }
  .touch-center { bottom: 8px; }
  .touch-center .touch-key { min-width: 62px; min-height: 31px; }
  .touch-shoulders {
    top: auto;
    bottom: max(152px, calc(env(safe-area-inset-bottom) + 136px));
    padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  #touchcontrols { padding-left: 10px; padding-right: 14px; }
  .touch-dpad { transform: scale(.78); transform-origin: left bottom; }
  .touch-abxy { transform: translate(8px, -6px) rotate(-12deg) scale(.80); transform-origin: right bottom; margin-right: max(2px, env(safe-area-inset-right)); }
  .touch-center { bottom: max(14px, env(safe-area-inset-bottom)); }
  .touch-shoulders { top: auto; bottom: 160px; gap: 28px; }
}

@media (prefers-reduced-transparency: reduce) {
  .touch-key { background: rgba(20, 25, 19, .78); backdrop-filter: none; }
}