/* In-stage handheld controls. DOM and behavior live in touch-controls.js. */
#touch-controls { display: none; }

html[data-mobile-ui="true"] #touch-controls {
  position: absolute; inset: 0; z-index: 12; display: block;
  pointer-events: none; touch-action: none; user-select: none;
  color: #fff9e8; font-family: system-ui, sans-serif;
}
html[data-mobile-ui="true"] .touch-controls__play { position: absolute; inset: 0; pointer-events: none; }
html[data-mobile-ui="true"] .touch-controls__left,
html[data-mobile-ui="true"] .touch-controls__right {
  position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); display: grid;
  gap: 10px; pointer-events: auto;
}
html[data-mobile-ui="true"] .touch-controls__left { left: max(16px, env(safe-area-inset-left)); }
html[data-mobile-ui="true"] .touch-controls__right { right: max(16px, env(safe-area-inset-right)); }
html[data-mobile-ui="true"] .touch-control {
  min-width: 44px; min-height: 44px; margin: 0; border: 1px solid #c8e1c066;
  border-radius: 50%; background: linear-gradient(145deg, #265a4bdb, #14362cdd);
  box-shadow: 0 5px 16px #0008, inset 0 1px #e9ffe233; color: #fff9e8;
  font: 800 clamp(14px, 3.5vw, 20px)/1 system-ui, sans-serif; text-shadow: 0 1px 2px #0009;
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(7px); transition: transform .08s ease, background .08s ease, box-shadow .08s ease;
}
html[data-mobile-ui="true"] .touch-control small { display: block; margin-top: 3px; font-size: 11px; line-height: 1; }
html[data-mobile-ui="true"] .touch-control:focus-visible { outline: 3px solid #ffe49a; outline-offset: 3px; }
html[data-mobile-ui="true"] .touch-control.is-held,
html[data-mobile-ui="true"] .touch-control[aria-pressed="true"] {
  transform: translateY(2px) scale(.96); background: linear-gradient(145deg, #b8d883e8, #538458e8);
  box-shadow: 0 2px 8px #0009, inset 0 1px #ffffe855; color: #163020; text-shadow: none;
}

/* Action cluster: quiet Interact above Power; B Power inside; A Jump at outer right. */
html[data-mobile-ui="true"] .touch-controls__right {
  grid-template-columns: repeat(2, minmax(72px, 84px)); grid-template-rows: 44px minmax(68px, 84px);
  align-items: end;
}
html[data-mobile-ui="true"] .touch-control--interact {
  grid-column: 1; grid-row: 1; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  justify-self: start; align-self: end; border-color: #c8e1c044; background: #173b30b8;
  box-shadow: 0 3px 10px #0007, inset 0 1px #e9ffe222; font-size: 0; opacity: .82;
}
html[data-mobile-ui="true"] .touch-control--interact svg { width: 20px; height: 20px; fill: currentColor; }
html[data-mobile-ui="true"] .touch-control--power {
  grid-column: 1; grid-row: 2; width: clamp(68px, 10vw, 84px); height: clamp(68px, 10vw, 84px);
  min-height: 68px; background: linear-gradient(145deg, #a0773ee8, #5e4224e8); font-size: clamp(14px, 2.4vw, 18px);
}
html[data-mobile-ui="true"] .touch-control--jump {
  grid-column: 2; grid-row: 2; width: clamp(68px, 10vw, 84px); height: clamp(68px, 10vw, 84px);
  min-height: 68px; background: linear-gradient(145deg, #4d8e70e8, #24533fe8); font-size: clamp(14px, 2.4vw, 18px);
}

/* Default hidden alternatives prevent control schemes from bleeding together. */
html[data-mobile-ui="true"] .touch-controls__stick,
html[data-mobile-ui="true"] .touch-control--stop { display: none; }

/* Arcade: only Left, Right and Down on the lower-left rocker. */
html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-controls__left {
  width: 174px; grid-template-columns: repeat(3, 52px); grid-template-rows: 52px;
  align-items: end;
}
html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--left,
html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--right,
html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--down {
  display: block; min-width: 52px; min-height: 52px; font-size: 17px;
}

/* Stick: the left zone is a single drag target; down comes from a downward drag. */
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__left {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
}
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-control--left,
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-control--right,
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-control--down,
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-control--stop { display: none; }
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick {
  position: absolute; left: var(--stick-origin-x, 50%); top: var(--stick-origin-y, 50%);
  display: block; width: 100%; height: 100%; border: 1px solid #d5b97888; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #42615580, #172622d9 58%, #0c1715e8);
  box-shadow: inset 0 0 0 6px #07110f88, inset 0 0 0 7px #e7ca8c22, 0 6px 18px #0009;
  transform: translate(-50%, -50%);
}
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick::before,
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick::after {
  position: absolute; top: 50%; transform: translateY(-50%); color: #f2deb180; font: 600 16px/1 system-ui, sans-serif;
}
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick::before { content: "‹"; left: 11px; }
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick::after { content: "›"; right: 11px; }
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__stick-knob {
  position: absolute; left: calc(50% - 26px); top: calc(50% - 26px); display: block; width: 52px; height: 52px; margin: 0; border: 1px solid #efffe899;
  border-radius: 50%; background: radial-gradient(circle at 33% 28%, #b9ead4, #6db697 42%, #285d50 73%, #12332d);
  box-shadow: 0 4px 11px #000b, inset 0 1px #e9fff199, inset 0 -3px 7px #0c2d26bb;
  transform: translate(var(--stick-dx, 0px), var(--stick-dy, 0px)); transition: transform .06s linear;
}
html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__left.is-active .touch-controls__stick-knob {
  box-shadow: 0 2px 7px #000c, inset 0 1px #effff099, inset 0 -3px 7px #0c2d26cc;
}

/* Cruise: latch Left or Right, Stop explicitly, and keep a small deliberate Down. */
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-controls__left {
  grid-template-columns: repeat(4, 44px); grid-template-rows: 44px; gap: 7px; align-items: end;
}
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--left,
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--right,
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--down,
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--stop { display: block; }
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--down { font-size: 14px; }
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--stop {
  min-width: 44px; background: linear-gradient(145deg, #87524ae8, #4b2826e8); font-size: 10px;
}
html[data-mobile-ui="true"] .touch-controls__cruise-status { display: none; }
html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-controls__cruise-status {
  position: absolute; left: 0; bottom: 52px; display: block; min-width: 116px; padding: 5px 8px;
  border: 1px solid #b9d4ad66; border-radius: 10px; background: #123328c9; color: #eaf7d7;
  font: 700 11px/1 system-ui, sans-serif; text-align: center;
}

/* Top-right settings and a glass menu with three playable control choices. */
html[data-mobile-ui="true"] .touch-control--menu-toggle {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 18px;
}
html[data-mobile-ui="true"] #touch-controls.is-menu-open .touch-controls__play,
html[data-mobile-ui="true"] #touch-controls.is-menu-open .touch-control--menu-toggle { visibility: hidden; }
html[data-mobile-ui="true"] .touch-controls__menu {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: min(390px, calc(100vw - 24px)); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 18px; overflow: auto; border: 1px solid #d8efd077; border-radius: 18px;
  background: linear-gradient(145deg, #183c30f5, #0d241df5); box-shadow: 0 18px 44px #000b;
  backdrop-filter: blur(14px); pointer-events: auto;
}
html[data-mobile-ui="true"] .touch-controls__menu[hidden] { display: none; }
html[data-mobile-ui="true"] .touch-controls__menu h2 {
  margin: 0 82px 14px 0; color: #fff9e8; font: 800 1.25rem/1.1 Georgia, serif;
}
html[data-mobile-ui="true"] .touch-controls__menu h2 small {
  display: block; margin-top: 4px; color: #bed895; font: 700 .7rem/1.1 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
html[data-mobile-ui="true"] .touch-controls__menu [data-layout-choice] {
  display: grid; width: 100%; min-height: 68px; margin: 9px 0 0; padding: 12px 14px;
  border: 1px solid #9cb99577; border-radius: 13px; background: #204739c9; color: #fff9e8;
  font: 700 14px/1.2 system-ui, sans-serif; text-align: left;
}
html[data-mobile-ui="true"] .touch-controls__menu [data-layout-choice] strong,
html[data-mobile-ui="true"] .touch-controls__menu [data-layout-choice] small { display: block; }
html[data-mobile-ui="true"] .touch-controls__menu [data-layout-choice] small {
  margin-top: 4px; color: #d5e5d0; font: 500 12px/1.25 system-ui, sans-serif;
}
html[data-mobile-ui="true"] .touch-controls__menu [data-layout-choice][aria-checked="true"] {
  border-color: #e9d486; background: #5d7448e6; color: #172a1d;
}
html[data-mobile-ui="true"] .touch-control--menu-close {
  position: absolute; top: 10px; right: 10px; width: 70px; height: 44px; min-width: 70px; min-height: 44px;
  border-radius: 22px; font-size: 12px;
}
html[data-mobile-ui="true"] .touch-controls__sprint {
  width: 100%; min-height: 44px; margin-top: 12px; border-radius: 12px; font-size: 13px;
}
html[data-mobile-ui="true"] .touch-controls__menu [data-touch-slot] { margin-top: 13px; }
html[data-mobile-ui="true"] .touch-controls__menu .powers { display: flex; width: 100%; margin: 0; }
html[data-mobile-ui="true"] .touch-controls__menu .powers button { flex: 1; min-height: 44px; padding: 7px 4px; font-size: 12px; }
html[data-mobile-ui="true"] .touch-controls__utilities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
html[data-mobile-ui="true"] .touch-controls__utilities button,
html[data-mobile-ui="true"] .touch-controls__sprint {
  border: 1px solid #9cb99577; background: #204739c9; color: #fff9e8; font: 700 13px/1.1 system-ui, sans-serif;
}
html[data-mobile-ui="true"] .touch-controls__utilities button { min-height: 44px; border-radius: 12px; }
html[data-mobile-ui="true"] .touch-controls__sprint[aria-pressed="true"] { background: #5d7448e6; color: #172a1d; }

@media (max-width: 420px) {
  html[data-mobile-ui="true"] .touch-controls__left { left: max(10px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  html[data-mobile-ui="true"] .touch-controls__right { right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); gap: 7px; grid-template-columns: repeat(2, 64px); grid-template-rows: 44px 64px; }
  html[data-mobile-ui="true"] .touch-control--jump,
  html[data-mobile-ui="true"] .touch-control--power { width: 64px; height: 64px; min-height: 64px; font-size: 13px; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-controls__left { width: 142px; grid-template-columns: repeat(3, 44px); gap: 5px; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--left,
  html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--right,
  html[data-mobile-ui="true"] #touch-controls[data-layout="arcade"] .touch-control--down { min-width: 44px; min-height: 44px; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="stick"] .touch-controls__left { width: 112px; height: 112px; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-controls__left { grid-template-columns: repeat(3, 44px); grid-template-rows: 44px 44px; gap: 4px; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--stop { grid-column: 3; grid-row: 2; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--down { grid-column: 2; grid-row: 1; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--left { grid-column: 1; grid-row: 2; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-control--right { grid-column: 2; grid-row: 2; }
  html[data-mobile-ui="true"] #touch-controls[data-layout="cruise"] .touch-controls__cruise-status { bottom: 100px; }
}

/* Menus scroll normally; held gameplay gestures never move the document. */
html[data-mobile-ui="true"] #touch-controls { touch-action: auto; }
html[data-mobile-ui="true"] .touch-controls__play,
html[data-mobile-ui="true"] canvas { touch-action: none; }
html[data-mobile-ui="true"] .touch-controls__menu { touch-action: pan-y; }
html[data-mobile-ui="true"] .touch-controls__menu .chapter { margin: 0; text-align: left; font-size: 0; }
html[data-mobile-ui="true"] .touch-controls__menu .chapter a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 3px 6px 3px 0; padding: 8px 10px;
  border: 1px solid #8ba18766; border-radius: 8px; font: 600 12px/1.2 system-ui, sans-serif;
}