/* TouchCtrl — mobile controller overlay.
   Skin ripped from the EmulatorJS virtual gamepad (github.com/EmulatorJS/
   EmulatorJS, GPL-3 — same license as the fork we bundle): #787878 cross
   D-pad with #333 arrow tips (white when pressed) at opacity .7, 50px round
   buttons rgba(255,255,255,.15) with 1px #ccc borders, pressed #000000ad.
   Adapted onto the TouchCtrl DOM: the four [data-dir] buttons draw the cross
   bars so slide-with-diagonals hit-testing is unchanged. */

.tctrl-overlay {
  position: fixed; inset: 0; z-index: 9400;
  pointer-events: none;
  --tctrl-bar: #787878;
  --tctrl-tip: #333;
  --tctrl-tip-press: #fff;
  --tctrl-btn-bg: rgba(255, 255, 255, 0.15);
  --tctrl-btn-border: #ccc;
  --tctrl-btn-press: rgba(0, 0, 0, 0.68);
  --tctrl-text: #eee;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tctrl-overlay * { pointer-events: none; }
.tctrl-overlay .tctrl-group, .tctrl-overlay .tctrl-btn,
.tctrl-overlay .tctrl-dpad, .tctrl-overlay .tctrl-stick,
.tctrl-overlay .tctrl-cluster { pointer-events: auto; }
/* mobile start overlay is up — hide the controller entirely so its controls
   can't steal the start tap (race backstop for late overlay creation) */
body.tctrl-suppressed .tctrl-overlay { display: none !important; }

.tctrl-group {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--gscale, 1));
  transform-origin: center;
}

/* face buttons — EJS .ejs_virtualGamepad_button */
.tctrl-btn {
  position: absolute; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--tctrl-btn-bg);
  border: 1px solid var(--tctrl-btn-border);
  color: var(--tctrl-text);
  text-align: center; line-height: 48px;
  font-weight: bold; font-size: 18px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none;
  transition: all .2s;
}
.tctrl-btn.tctrl-pressed { background: var(--tctrl-btn-press); }
.tctrl-btn.tctrl-pill {
  min-width: 62px; height: 30px; border-radius: 5px;
  font-size: 12px; letter-spacing: .04em; padding: 0 12px; line-height: 28px;
}
/* invisible touch zones extend beyond visible buttons */
.tctrl-btn::after {
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
}

/* D-pad — EJS .ejs_dpad_* cross: two 36px bars, opacity .7, #333 arrow tips.
   The four [data-dir] buttons ARE the bar segments (hit zones unchanged). */
.tctrl-dpad {
  position: relative; width: 100%; aspect-ratio: 1;
  touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: .7;
}
.tctrl-dpad-btn {
  position: absolute;
  background: var(--tctrl-bar);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.tctrl-dpad-up   { left: 34%; top: 0;    width: 32%; height: 34%; border-radius: 5px 5px 0 0; }
.tctrl-dpad-down { left: 34%; bottom: 0; width: 32%; height: 34%; border-radius: 0 0 5px 5px; }
.tctrl-dpad-left  { left: 0;  top: 34%;  width: 34%; height: 32%; border-radius: 5px 0 0 5px; }
.tctrl-dpad-right { right: 0; top: 34%;  width: 34%; height: 32%; border-radius: 0 5px 5px 0; }
.tctrl-dpad-center{ position: absolute; left: 34%; top: 34%; width: 32%; height: 32%;
  background: var(--tctrl-bar); }
/* arrow tips (EJS border-triangle trick) */
.tctrl-dpad-btn::before {
  content: ""; width: 0; height: 0; border: 8px solid;
}
.tctrl-dpad-up::before    { border-color: transparent transparent var(--tctrl-tip) transparent; }
.tctrl-dpad-down::before  { border-color: var(--tctrl-tip) transparent transparent transparent; }
.tctrl-dpad-left::before  { border-color: transparent var(--tctrl-tip) transparent transparent; }
.tctrl-dpad-right::before { border-color: transparent transparent transparent var(--tctrl-tip); }
/* pressed: tips turn white (stock .ejs_dpad_*_pressed behaviour) */
.tctrl-dpad-up.tctrl-pressed::before    { border-color: transparent transparent var(--tctrl-tip-press) transparent; }
.tctrl-dpad-down.tctrl-pressed::before  { border-color: var(--tctrl-tip-press) transparent transparent transparent; }
.tctrl-dpad-left.tctrl-pressed::before  { border-color: transparent var(--tctrl-tip-press) transparent transparent; }
.tctrl-dpad-right.tctrl-pressed::before { border-color: transparent transparent transparent var(--tctrl-tip-press); }
.tctrl-dpad-btn.tctrl-pressed { background: #8a8a8a; }

/* analog stick (N64) — same material as the EJS buttons (stock EJS has no
   analog pad; this keeps its geometry with the ripped skin) */
.tctrl-stick {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 50%; background: var(--tctrl-btn-bg);
  border: 1px solid var(--tctrl-btn-border);
  touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: .7;
}
.tctrl-stick-knob {
  position: absolute; left: 50%; top: 50%; width: 42%; height: 42%;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--tctrl-bar);
  border: 1px solid var(--tctrl-btn-border);
  transition: background .2s;
}
.tctrl-stick.tctrl-active .tctrl-stick-knob { background: #8a8a8a; }

/* clusters */
.tctrl-cluster { position: relative; width: 100%; aspect-ratio: 1.4; }

/* edit mode */
.tctrl-overlay.tctrl-edit .tctrl-group {
  outline: 1px dashed var(--tctrl-btn-border); border-radius: 6px;
  pointer-events: auto;
}
.tctrl-overlay.tctrl-edit .tctrl-btn, .tctrl-overlay.tctrl-edit .tctrl-dpad,
.tctrl-overlay.tctrl-edit .tctrl-stick { pointer-events: none; }

/* settings panel — restyled to the same monochrome system */
.tctrl-settings {
  position: fixed; right: 8px; bottom: 8px; z-index: 9600;
  width: 250px; background: rgba(12,12,22,.96); border: 1px solid #ccc;
  border-radius: 8px; padding: 12px; color: #e4e4ec;
  font-family: system-ui, sans-serif; font-size: .82rem;
}
.tctrl-settings-head { font-weight: 700; color: #fff; margin-bottom: 8px;
  display: flex; justify-content: space-between; }
.tctrl-settings-close { background: none; border: none; color: #e4e4ec; font-size: 1rem; cursor: pointer; }
.tctrl-set-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.tctrl-set-row input[type=range] { width: 120px; }
.tctrl-set-row select { background: #1a1a2e; color: #e4e4ec; border: 1px solid #555; border-radius: 4px; }
.tctrl-set-actions { display: flex; gap: 8px; margin-top: 10px; }
.tctrl-set-actions button { flex: 1; padding: 6px; border-radius: 5px;
  background: #787878; color: #fff; border: 1px solid #ccc; font-weight: 600; cursor: pointer; }

/* debug */
.tctrl-debug {
  position: fixed; top: 50px; right: 8px; z-index: 9700;
  background: rgba(0,0,0,.85); color: #6bcb77; font-family: monospace;
  font-size: .68rem; padding: 6px 8px; border-radius: 6px;
  pointer-events: none; max-width: 60vw;
}

/* EJS-style monochrome chrome on the mobile HUD bars — the "icons" are emoji
   (▶️ ⏸️ 🔄), not SVGs, so filter the BUTTONS, not svg descendants */
@media (max-width: 900px), (pointer: coarse) {
  .emu-st-hud .emu-st-btn, .emu-st-fs-bar .emu-st-btn {
    filter: grayscale(1) brightness(1.15);
  }
}
/* landscape phone: the save-slot row eats the single-row HUD — hide it */
@media (max-height: 500px) and (pointer: coarse) {
  .emu-st-slot-bar { display: none !important; }
}