/* JK Game DOS Arcade — touch controls (appended to jkdos.css) */
#touchpad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px;
  padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(7, 6, 15, 0.96), rgba(7, 6, 15, 0.82));
  border-top: 2px solid #3c2468;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font-family: "Press Start 2P", "VT323", monospace;
}
#touchpad[hidden] { display: none; }
body.has-touchpad { padding-bottom: 230px; }
body.has-touchpad .play-actions .btn[onclick*="requestFullScreen"] { display: none; } /* true fullscreen hides the pad */

.tp-stick {
  position: relative; width: 156px; height: 156px; border-radius: 50%; justify-self: start;
  background: radial-gradient(circle at 50% 45%, #1b1233, #0c0816 70%);
  border: 3px solid #3c2468; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
}
.tp-stick-ring { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(139, 92, 246, 0.35); }
.tp-arrow { position: absolute; font-size: 12px; color: rgba(255, 255, 255, 0.35); transition: color .08s; }
.tp-up { top: 8px; left: 50%; transform: translateX(-50%); }
.tp-down { bottom: 8px; left: 50%; transform: translateX(-50%); }
.tp-left { left: 10px; top: 50%; transform: translateY(-50%); }
.tp-right { right: 10px; top: 50%; transform: translateY(-50%); }
.tp-stick.dir-up .tp-up, .tp-stick.dir-down .tp-down, .tp-stick.dir-left .tp-left, .tp-stick.dir-right .tp-right { color: #22f0ff; text-shadow: 0 0 10px #22f0ff; }
.tp-nub {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b28cff, #6d3fd6 60%, #3c2468);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); transition: transform .04s linear;
}
.tp-stick.is-active .tp-nub { background: radial-gradient(circle at 40% 35%, #ff9bd6, #ff3cac 60%, #a8206f); }

.tp-mid { display: flex; flex-direction: column; gap: 8px; align-self: stretch; justify-content: flex-end; }
.tp-buttons { display: grid; grid-template-columns: repeat(3, minmax(52px, 1fr)); gap: 8px; justify-self: end; max-width: 240px; }

.tp-key {
  min-height: 46px; padding: 0 8px; border-radius: 10px; border: 2px solid #3c2468;
  background: linear-gradient(#241744, #120b22); color: #e9e4ff; font: inherit; font-size: 10px; letter-spacing: .04em;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 3px 0 #08050f, 0 6px 14px rgba(0, 0, 0, 0.45); touch-action: none; cursor: pointer;
}
.tp-key small { font-family: "VT323", monospace; font-size: 12px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0; }
.tp-key.tp-big { grid-column: span 3; min-height: 50px; }
.tp-key.tp-primary { background: linear-gradient(#ff5cc0, #c21f7f); border-color: #ff9bd6; color: #fff; }
.tp-key.tp-primary small { color: rgba(255, 255, 255, 0.8); }
.tp-key.tp-small { min-height: 40px; min-width: 52px; font-size: 9px; }
.tp-key.tp-extra { border-color: #22f0ff; color: #22f0ff; }
.tp-key.is-down, .tp-key:active { transform: translateY(3px); box-shadow: 0 0 0 #08050f, 0 2px 6px rgba(0, 0, 0, 0.45); filter: brightness(1.25); }
.tp-key.is-latched { background: linear-gradient(#22f0ff, #0e9fb0); color: #07060f; border-color: #8ff7ff; }
#tp-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

#tp-toggle[aria-pressed="true"] { background: #22f0ff; color: #07060f; }

@media (orientation: landscape) and (max-height: 520px) {
  #touchpad { background: none; border-top: 0; pointer-events: none; padding-bottom: 6px; }
  #touchpad > * { pointer-events: auto; }
  .tp-stick { width: 132px; height: 132px; opacity: .85; }
  .tp-buttons { max-width: 200px; opacity: .9; }
  body.has-touchpad { padding-bottom: 0; }
}
@media (min-width: 900px) { body.has-touchpad { padding-bottom: 0; } }