/* On-screen PlayStation controller, sized for a phone held sideways. */
.pad-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pad {
  --cluster: clamp(112px, 40vh, 170px);
  --pad-bg: rgba(255, 255, 255, .13);
  --pad-bg-down: rgba(255, 255, 255, .38);
  --pad-edge: rgba(255, 255, 255, .22);
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .25s ease;
}
.pad > * { pointer-events: auto; touch-action: none; }
.pad.is-dimmed { opacity: .1; }
.pad.is-hidden { display: none; }

.pad-btn {
  border: 2px solid var(--pad-edge);
  background: var(--pad-bg);
  color: rgba(255, 255, 255, .9);
  font-weight: 800;
  touch-action: none;
  transition: transform .05s ease, background .05s ease;
}
.pad-btn.is-down { background: var(--pad-bg-down); transform: scale(.93); }

/* D-pad: a round touch zone with a cross drawn inside. */
.pad-dpad {
  position: absolute;
  left: calc(var(--safe-left) + 2.5vw);
  bottom: calc(var(--safe-bottom) + 9vh);
  width: var(--cluster);
  height: var(--cluster);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .1);
}
.pad-dpad::before, .pad-dpad::after {
  content: "";
  position: absolute;
  background: var(--pad-bg);
  border: 2px solid var(--pad-edge);
  border-radius: 10px;
}
.pad-dpad::before { left: 34%; right: 34%; top: 6%; bottom: 6%; }
.pad-dpad::after { top: 34%; bottom: 34%; left: 6%; right: 6%; }
.pad-arrow { position: absolute; z-index: 1; width: 0; height: 0; border: 9px solid transparent; opacity: .75; }
.pad-arrow.up { top: 12%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; border-top-width: 0; }
.pad-arrow.down { bottom: 12%; left: 50%; transform: translateX(-50%); border-top-color: #fff; border-bottom-width: 0; }
.pad-arrow.left { left: 12%; top: 50%; transform: translateY(-50%); border-right-color: #fff; border-left-width: 0; }
.pad-arrow.right { right: 12%; top: 50%; transform: translateY(-50%); border-left-color: #fff; border-right-width: 0; }
.pad-dpad:not([data-dir="0"]):not([data-dir=""]) { background: rgba(255, 255, 255, .12); }

/* Face buttons in the PlayStation diamond. */
.pad-face {
  position: absolute;
  right: calc(var(--safe-right) + 2.5vw);
  bottom: calc(var(--safe-bottom) + 9vh);
  width: var(--cluster);
  height: var(--cluster);
  pointer-events: none;
}
.pad-round {
  position: absolute;
  width: 37%;
  height: 37%;
  border-radius: 50%;
  font-size: calc(var(--cluster) * .17);
  line-height: 1;
  pointer-events: auto;
}
.pad-round.triangle { top: 0; left: 31.5%; color: #4fe0b0; }
.pad-round.cross { bottom: 0; left: 31.5%; color: #8fb4ff; }
.pad-round.square { left: 0; top: 31.5%; color: #ff9bdc; }
.pad-round.circle { right: 0; top: 31.5%; color: #ff8a80; }

.pad-shoulder {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  display: flex;
  gap: 8px;
}
.pad-left-top { left: calc(var(--safe-left) + 2.5vw); }
.pad-right-top { right: calc(var(--safe-right) + 2.5vw); flex-direction: row-reverse; }
.pad-pill { min-width: 62px; height: 40px; border-radius: 12px; font-size: .95rem; }

.pad-center {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 6px);
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}
.pad-small { min-width: 70px; height: 30px; border-radius: 999px; font-size: .7rem; letter-spacing: .08em; }