/* On-screen gamepad. --pad-u is the base unit; Size S/M/L scales it. */
.tpad { --pad-u: calc(clamp(44px, 11vmin, 72px) * var(--pad-scale, 1)); position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: var(--pad-op, .7); touch-action: none; user-select: none; -webkit-user-select: none; }
.tpad[hidden] { display: none; }
.tp { position: absolute; display: grid; place-items: center; pointer-events: auto; touch-action: none; border: 2px solid rgb(242 238 228 / .7); background: rgb(14 18 16 / .45); color: var(--ink); font: 700 var(--t-1) var(--font-ui); }
.tp.is-down { background: rgb(219 169 69 / .55); border-color: var(--accent); transform: scale(.94); }
.dpad { width: var(--pad-u); height: var(--pad-u); border-radius: var(--r-1); }
.dpad--up { left: calc(env(safe-area-inset-left) + 24px + var(--pad-u)); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u) * 2); }
.dpad--down { left: calc(env(safe-area-inset-left) + 24px + var(--pad-u)); bottom: calc(env(safe-area-inset-bottom) + 24px); }
.dpad--left { left: calc(env(safe-area-inset-left) + 24px); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u)); }
.dpad--right { left: calc(env(safe-area-inset-left) + 24px + var(--pad-u) * 2); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u)); }
.face { width: var(--pad-u); height: var(--pad-u); border-radius: 50%; }
.face--n { right: calc(env(safe-area-inset-right) + 24px + var(--pad-u) * 1.25); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u) * 2.5); }
.face--s { right: calc(env(safe-area-inset-right) + 24px + var(--pad-u) * 1.25); bottom: calc(env(safe-area-inset-bottom) + 24px); }
.face--w { right: calc(env(safe-area-inset-right) + 24px + var(--pad-u) * 2.5); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u) * 1.25); }
.face--e { right: calc(env(safe-area-inset-right) + 24px); bottom: calc(env(safe-area-inset-bottom) + 24px + var(--pad-u) * 1.25); }
.shoulder { width: calc(var(--pad-u) * 2.2); height: calc(var(--pad-u) * .9); border-radius: var(--r-1); }
.shoulder--l1 { left: calc(env(safe-area-inset-left) + 24px); top: calc(env(safe-area-inset-top) + 8px + var(--pad-u)); }
.shoulder--l2 { left: calc(env(safe-area-inset-left) + 24px); top: calc(env(safe-area-inset-top) + 8px); height: calc(var(--pad-u) * .9); }
.shoulder--r1 { right: calc(env(safe-area-inset-right) + 24px); top: calc(env(safe-area-inset-top) + 8px + var(--pad-u)); }
.shoulder--r2 { right: calc(env(safe-area-inset-right) + 24px); top: calc(env(safe-area-inset-top) + 8px); }
.pill { width: 72px; height: var(--touch-min); border-radius: var(--r-full); bottom: calc(env(safe-area-inset-bottom) + 16px); }
.pill--select { left: calc(50% - 76px); }
.pill--start { left: calc(50% + 4px); }
.stick { width: calc(var(--pad-u) * 2); height: calc(var(--pad-u) * 2); min-width: 88px; min-height: 88px; border-radius: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); }
.stick--l { left: calc(env(safe-area-inset-left) + 24px + var(--pad-u) * 3.4); }
.stick--r { right: calc(env(safe-area-inset-right) + 24px + var(--pad-u) * 3.9); }
.stick__thumb { display: grid; place-items: center; width: calc(var(--pad-u) * 1.1); height: calc(var(--pad-u) * 1.1); border-radius: 50%; border: 2px solid rgb(242 238 228 / .7); background: rgb(14 18 16 / .6); pointer-events: none; }
.tp--menu { left: calc(50% - 22px); top: calc(env(safe-area-inset-top) + 8px); width: var(--touch-min); height: var(--touch-min); border-radius: 50%; }
@media (orientation: portrait) {
  .tpad { --pad-u: calc(clamp(44px, 9vw, 60px) * var(--pad-scale, 1)); }
  .stick { display: none; }
}