/* Touch controls: floating twin-stick, Start/Select, first-time hints, debug overlay. */
.touch-controls { position: absolute; inset: 0; z-index: 2; --touch-scale: 1; --touch-opacity: .7;
  --stick: calc(148px * var(--touch-scale)); --knob: calc(64px * var(--touch-scale)); touch-action: none; pointer-events: none; }
.touch-zone, .touch-buttons { pointer-events: auto; }
.touch-zone { position: absolute; top: calc(64px + var(--safe-top)); bottom: 0; width: 50%; touch-action: none; }
.touch-zone.move { left: 0; }
.touch-zone.fire { right: 0; }
.stick { position: absolute; width: var(--stick); height: var(--stick); transform: translate(-50%, -50%);
  top: calc(var(--rest-y, 70%) - 64px - var(--safe-top)); opacity: var(--touch-opacity); pointer-events: none; transition: opacity .2s; }
.touch-zone.move .stick:not(.active) { left: var(--rest-inset, 22%); }
.touch-zone.fire .stick:not(.active) { left: calc(100% - var(--rest-inset, 22%)); }
.stick.active { opacity: min(1, calc(var(--touch-opacity) + .25)); transition: none; }
.ring { position: absolute; inset: 0; border-radius: 50%; background: var(--stick-fill); border: 2px solid var(--stick-ring); }
.ring::before, .knob::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-position: center; background-repeat: no-repeat; pointer-events: none; }
.ring::before { background-image: var(--stick-well-art); background-size: var(--stick-well-art-size); }
.knob::before { background-image: var(--stick-cap-art, none); background-size: var(--stick-cap-art-size, 100%); }
.arrow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: rotate(var(--arrow-angle, 0deg)); transition: opacity .12s; }
.stick.move .arrow { fill: var(--stick-move); }
.stick.fire .arrow { fill: var(--stick-fire); }
.stick:not([data-sector="-1"]).active .arrow { opacity: 1; }
.knob { position: absolute; left: 50%; top: 50%; width: var(--knob); height: var(--knob); border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: var(--stick-cap-shadow); }
.stick.move .knob { --stick-cap-art: var(--stick-move-art); --stick-cap-art-size: var(--stick-move-art-size); background: var(--stick-move); }
.stick.fire .knob { --stick-cap-art: var(--stick-fire-art); --stick-cap-art-size: var(--stick-fire-art-size); background: var(--stick-fire); }
.stick.active .knob { transition: none; }
.stick:not(.active) .knob { transition: transform .15s var(--ease); }
.stick-label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  font: 500 .72rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .75; }
.stick.active .stick-label { opacity: 0; }
.touch-buttons { position: absolute; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--control-gap); z-index: 3; opacity: var(--touch-opacity);
  right: calc(var(--space-3) + var(--safe-right)); top: calc(var(--space-3) + var(--safe-top)); }
.touch-controls[data-orientation="portrait"] .touch-buttons { right: auto; left: 50%; transform: translateX(-50%); top: calc(var(--picture-bottom, 60%) + 16px); }
.touch-button { min-width: 74px; min-height: var(--control-height); padding: 0 14px; border-radius: var(--radius-chip); border: 1.5px solid var(--stick-ring);
  background: var(--touch-button-bg); color: var(--ink); font: 500 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--touch-button-shadow); touch-action: none; transition: transform .08s, background .08s, box-shadow .08s; }
.touch-button.down { transform: scale(.96); background: var(--touch-button-down); border-color: var(--touch-button-down); color: var(--signal-ink);
  box-shadow: var(--touch-button-down-shadow); }
/* Portrait: picture on top, a quiet deck for the thumbs below. */
.touch-controls[data-orientation="portrait"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: var(--picture-bottom, 60%);
  pointer-events: none; background: var(--deck, transparent); border-top: var(--border) solid var(--line); }
#play.touch-portrait .stage { align-items: flex-start; padding-top: calc(var(--control-height) + 2 * var(--space-3)); }
.coach { position: absolute; left: var(--rest-inset, 22%); top: calc(var(--rest-y, 70%) - 64px - var(--safe-top) - var(--stick) / 2 - 18px);
  transform: translate(-50%, -100%); padding: 8px 14px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: .86rem;
  animation: coach-in .4s var(--ease) both, coach-bob 1.6s ease-in-out .4s infinite alternate; }
.coach::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.coach.fire { left: calc(100% - var(--rest-inset, 22%)); }
#play:not(.immersive) .touch-controls[data-orientation="portrait"] .coach { top: calc(var(--rest-y, 70%) - 64px - var(--safe-top));
  transform: translate(-50%, -50%); max-width: calc(100% - 2 * var(--space-5)); white-space: normal; text-align: center;
  animation: coach-in .4s var(--ease) both; }
.coach.leaving { opacity: 0; transition: opacity .35s; }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, -80%); } }
@keyframes coach-bob { to { transform: translate(-50%, calc(-100% - 5px)); } }
.debug-overlay { position: absolute; z-index: 5; right: calc(10px + var(--safe-right)); top: calc(64px + var(--safe-top)); margin: 0;
  padding: 8px 10px; max-width: min(92vw, 420px); border-radius: 6px; background: rgba(0, 0, 0, .78); color: var(--good);
  font: 11px/1.45 var(--font-mono); white-space: pre-wrap; pointer-events: none; }

/* The rails use landscape gutters first, reserving picture width only when needed.
   Portrait shares one compact top rail. The renderer reads this stage padding. */
#play.immersive .stage { align-items: center; padding: 0 var(--touch-rail); }
#play.immersive.touch-portrait .stage { padding: var(--touch-rail) 0 0; }
#play.immersive .touch-zone { top: 0; }
#play.immersive .touch-controls::before { display: none; }
#play.immersive .stick:not(.active), .phone-controller.immersive .stick:not(.active) { opacity: 0; }
#play.immersive .touch-buttons { top: calc(var(--space-2) + var(--safe-top)); right: auto; left: 50%;
  transform: translateX(-50%); gap: var(--space-2); opacity: 1; }
#play.immersive .touch-button, .phone-controller.shared-view .touch-button { min-width: 0; width: var(--control-height); height: var(--control-height); padding: 0;
  display: grid; place-items: center; font-size: .6875rem; letter-spacing: 0;
  border: var(--border) solid var(--hud-border); border-radius: var(--radius-hud); background: var(--hud-bg); }
#play.immersive .touch-button.down { background: var(--touch-button-down); border-color: var(--touch-button-down); }
#play.immersive:not(.touch-portrait) .touch-buttons { display: contents; }
#play.immersive:not(.touch-portrait) .touch-button { position: absolute; z-index: 3;
  top: calc(var(--safe-top) + var(--touch-rail)); pointer-events: auto; }
#play.immersive:not(.touch-portrait) .touch-button[data-button="SELECT"] { left: calc(var(--safe-left) + var(--space-2)); }
#play.immersive:not(.touch-portrait) .touch-button[data-button="START"] { right: calc(var(--safe-right) + var(--space-2)); }
#play.immersive .coach { top: 68%; left: 50%; max-width: calc(100% - 24px); white-space: normal; text-align: center;
  animation: coach-in .4s var(--ease) both; }
#app[data-screen="play"]:has(#play.immersive) .toasts { top: calc(72px + var(--safe-top)); bottom: auto; }