/* RUCKUS RUN: the touch overlay (js/ui/touch.js). Purely visual: hit-testing is done by position
   in the script, so nothing here takes pointer events. Sizes and positions are set in pixels by
   the script; only transform and opacity animate. */

.tc-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility 0s linear .16s;
  --tc-k: 1;
}
.tc-root.tc-show { opacity: 1; visibility: visible; transition: opacity .16s ease; }

/* Reads the safe-area insets for the script (they are zero without viewport-fit=cover). */
.tc-safe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────── */

.tc-btn { position: absolute; left: 0; top: 0; will-change: transform; }

.tc-face, .tc-pulse { position: absolute; inset: 0; border-radius: 50%; }

.tc-face {
  display: grid;
  place-items: center;
  border: 3px solid var(--rr-cream);
  background: rgba(27, 18, 48, .38);
  color: var(--rr-cream);
  box-shadow: 0 calc(4px * var(--tc-k)) 0 rgba(27, 18, 48, .30);
  transition: transform .06s ease-out, background-color .06s linear, color .06s linear;
}
.tc-face .ui-icon { grid-area: 1 / 1; width: 58%; height: 58%; }
.tc-jump .tc-face .ui-icon { width: 56%; height: 56%; margin-top: -4%; }

.tc-btn.tc-on .tc-face {
  background: var(--rr-sun);
  color: var(--rr-cream);
  border-color: var(--rr-cream);
  transform: scale(.94);
  box-shadow: 0 calc(1px * var(--tc-k)) 0 rgba(27, 18, 48, .30);
}

/* An 80 ms ring that leaves the button as it is pressed. */
.tc-pulse { border: 3px solid var(--rr-sun); opacity: 0; }
.tc-btn.tc-on .tc-pulse { animation: tc-pulse 80ms ease-out both; }
@keyframes tc-pulse {
  from { opacity: .95; transform: scale(1); }
  to { opacity: 0; transform: scale(1.22); }
}

/* Roll is a spiral on the ground and a slam arrow in the air. */
.tc-roll .tc-i-slam { opacity: 0; transform: scale(.6); }
.tc-roll .tc-i-roll, .tc-roll .tc-i-slam { transition: opacity .08s linear, transform .08s ease-out; }
.tc-roll.tc-air .tc-i-roll { opacity: 0; transform: scale(.6); }
.tc-roll.tc-air .tc-i-slam { opacity: 1; transform: none; }

/* ── Stick ─────────────────────────────────────────────────────────────────────────────────── */

.tc-stick {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .12s ease;
  will-change: transform;
}
.tc-stick.tc-on { opacity: 1; }
.tc-fixed .tc-stick { opacity: .72; }
.tc-fixed .tc-stick.tc-on { opacity: 1; }

.tc-ring { grid-area: 1 / 1; display: block; width: 100%; height: 100%; overflow: visible; }
.tc-ring-fill { fill: rgba(27, 18, 48, .38); stroke: var(--rr-cream); stroke-width: 3; vector-effect: non-scaling-stroke; }
.tc-ring-mark { fill: var(--rr-cream); fill-opacity: .55; stroke: none; }

.tc-knob {
  grid-area: 1 / 1;
  border: 3px solid var(--rr-cream);
  border-radius: 50%;
  background: rgba(27, 18, 48, .55);
  box-shadow: 0 calc(3px * var(--tc-k)) 0 rgba(27, 18, 48, .30);
  transition: background-color .06s linear;
  will-change: transform;
}
.tc-stick.tc-on .tc-knob { background: var(--rr-sun); }

/* ── "Turn your phone" chip ────────────────────────────────────────────────────────────────── */

.tc-chip {
  position: absolute;
  left: 50%;
  top: 19%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 9px 16px 9px 12px;
  border: 3px solid var(--rr-outline);
  border-radius: 18px;
  background: var(--rr-ink-panel);
  color: var(--rr-cream);
  font: 700 14px/1.2 var(--rr-body);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .22s ease, transform .22s ease;
}
.tc-chip.tc-show { opacity: 1; transform: translate(-50%, 0); }
.tc-chip .ui-icon { color: var(--rr-sun); }

@media (prefers-reduced-motion: reduce) {
  .tc-root, .tc-face, .tc-chip, .tc-stick { transition: none; }
  .tc-btn.tc-on .tc-pulse { animation: none; }
}