/* NAPTOWN TOUCH — overlay styles for the WebMUGEN touch plugin.
   Research-driven rules baked in here:
   - Buttons 60–68px visual, hitbox ~1.15x the artwork (the ::after
     halo on buttons; the pad element itself is the bigger hitbox).
   - Opacity is a player setting (default ~70%); NOTHING auto-fades
     or auto-hides during a match — hiding is manual, or the toggle.
   - iPhone Safari has no element fullscreen and no reliable
     orientation lock, so the layout never depends on them: the layer
     is position:fixed inset:0 sized with 100dvh, padded for the
     safe areas, and portrait gets a rotate prompt instead.
   - touch-action: none everywhere on the controls, so the browser
     can never scroll, pinch-zoom, or double-tap-zoom mid-fight. */

#touch-controls {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 9998;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#touch-controls.tc-hidden { display: none; }

/* --- Portrait rotate prompt (phones) --- */
.tc-rotate {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 16, 0.88);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  pointer-events: auto;
  touch-action: none;
}
.tc-rotate-big { font-size: 54px; }
.tc-rotate-text { font-size: 19px; font-weight: 700; padding: 0 24px; }
@media (orientation: portrait) and (max-width: 820px) {
  .tc-rotate { display: flex; }
  .tc-pad, .tc-cluster, .tc-start { display: none; }
}

/* --- Left: 8-way sliding pad ---
   Element box = hitbox (bigger); the drawn circle is the ::before. */
.tc-pad {
  pointer-events: auto;
  touch-action: none;
  position: absolute;
  left: calc(8px + env(safe-area-inset-left, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: calc(184px * var(--tc-scale, 1));
  height: calc(184px * var(--tc-scale, 1));
  box-sizing: border-box;
}
.tc-pad::before {
  content: '';
  position: absolute;
  inset: calc(9px * var(--tc-scale, 1));
  border-radius: 50%;
  background: rgba(20, 20, 28, var(--tc-opacity, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.tc-pad.tc-active::before { border-color: #ffd23e; }
.tc-pad-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.tc-pad-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(34px * var(--tc-scale, 1));
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* --- Right cluster --- */
.tc-cluster {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--tc-scale, 1));
}
.tc-row {
  display: flex;
  gap: calc(12px * var(--tc-scale, 1));
  justify-content: flex-end;
}
.tc-shortcuts { justify-content: space-between; }

.tc-btn {
  pointer-events: auto;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 20, 28, var(--tc-opacity, 0.7));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  width: calc(64px * var(--tc-scale, 1));
  height: calc(64px * var(--tc-scale, 1));
  font-size: calc(17px * var(--tc-scale, 1));
  cursor: pointer;
}
/* Invisible halo: makes the real hitbox ~1.15x the drawn button. */
.tc-btn::after {
  content: '';
  position: absolute;
  inset: calc(-5px * var(--tc-scale, 1));
  border-radius: 50%;
}
/* Visible pressed feedback, always (no fade tricks). */
.tc-btn.tc-active {
  background: #ffd23e;
  color: #14141c;
  border-color: #fff;
  transform: scale(1.08);
}
.tc-lp, .tc-mp, .tc-hp { border-color: rgba(255, 120, 90, 0.75); }
.tc-lk, .tc-mk, .tc-hk { border-color: rgba(90, 170, 255, 0.75); }

/* Shortcut buttons: smaller, distinct. */
.tc-grab, .tc-sp {
  width: calc(56px * var(--tc-scale, 1));
  height: calc(56px * var(--tc-scale, 1));
  font-size: calc(13px * var(--tc-scale, 1));
}
.tc-grab { border-color: rgba(120, 255, 170, 0.8); }
.tc-sp {
  border-color: #ffd23e;
  background: rgba(90, 64, 0, var(--tc-opacity, 0.7));
}

/* --- Start / Pause: top-centre, far from the action --- */
.tc-start {
  position: absolute;
  left: 50%;
  top: calc(8px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: calc(44px * var(--tc-scale, 1));
  height: calc(44px * var(--tc-scale, 1));
  font-size: calc(14px * var(--tc-scale, 1));
}
.tc-start.tc-active { transform: translateX(-50%) scale(1.08); }

/* --- Corner buttons + settings panel --- */
.tc-toggle {
  pointer-events: auto;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
  position: fixed;
  right: calc(10px + env(safe-area-inset-right, 0px));
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 20, 28, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tc-gear { top: calc(58px + env(safe-area-inset-top, 0px)); }

.tc-panel {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right, 0px));
  top: calc(106px + env(safe-area-inset-top, 0px));
  z-index: 9999;
  width: 250px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(14, 14, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tc-panel.tc-hidden { display: none; }
.tc-panel-title { font-weight: 800; margin-bottom: 8px; }
.tc-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}
.tc-panel-row label { flex: 0 0 76px; }
.tc-panel-row input[type="range"] { flex: 1; min-width: 0; }
.tc-panel-val { flex: 0 0 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* Small screens: nudge clusters to the very corners. */
@media (max-width: 560px) {
  .tc-pad { left: calc(2px + env(safe-area-inset-left, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tc-cluster { right: calc(2px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}