/* Touch gestures (shared/touch-controls.mjs). Nothing is reserved on screen for controls: the
   whole page is the gesture surface during play. The only things drawn are a faint marker where
   the steering finger started and a pause button in the HUD. Each game tints them through the
   --tc-* custom properties below. */

:root {
  --tc-ink: #fff;
  --tc-fill-solid: rgba(20, 20, 30, 0.72);
  --tc-edge: rgba(255, 255, 255, 0.55);
  --tc-pressed: rgba(243, 195, 90, 0.78);
  /* Steering marker: colour and opacity. */
  --tc-marker: #fff;
  --tc-marker-opacity: 0.3;
}

/* Words for keys or for touch: wrap them in .key-only / .touch-only. */
html.is-touch .key-only { display: none !important; }
html:not(.is-touch) .touch-only { display: none !important; }

/* No double-tap zoom anywhere on a touch page; menus can still scroll and pinch. */
html.is-touch { touch-action: manipulation; }
html.is-touch, html.is-touch body { overscroll-behavior: none; }

/* The pages use viewport-fit=cover: keep the HUD and the field clear of notches and rounded
   corners. */
html.is-touch body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

/* Menus focus their main button for keyboard players; after a touch that ring is only noise
   (browsers keep :focus-visible for keyboard use, so keyboard players on a touch device keep it). */
html.is-touch .overlay button:focus:not(:focus-visible) { outline: none; }

/* Short screens (a phone in landscape): a menu panel can be taller than the screen and scrolls;
   its main button stays in sight at the bottom so a first-time player finds it. */
@media (max-height: 560px) {
  html.is-touch #title-start,
  html.is-touch #play-again {
    position: sticky;
    bottom: 0.4rem;
    z-index: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* During play: no scrolling, zooming, selection, callouts or pull-to-refresh. */
html.tc-playing,
html.tc-playing body {
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html.tc-playing body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Steering marker: a small ring where the steering finger went down, with a short tick towards
   the held direction. */
.tc-marker {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--tc-marker);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: var(--tc-marker-opacity);
  transform: translate(var(--tc-marker-x, -100px), var(--tc-marker-y, -100px));
  pointer-events: none;
  animation: tc-marker-in 0.12s ease-out;
}

.tc-marker[hidden] { display: none; }

.tc-marker-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 3px;
  margin: -1.5px 0 0 -6px;
  border-radius: 2px;
  background: var(--tc-marker);
  transform: rotate(var(--tc-tick-angle, 0deg)) translateX(22px);
  transition: transform 0.08s ease-out;
}

.tc-marker[data-direction="right"] { --tc-tick-angle: 0deg; }
.tc-marker[data-direction="down"] { --tc-tick-angle: 90deg; }
.tc-marker[data-direction="left"] { --tc-tick-angle: 180deg; }
.tc-marker[data-direction="up"] { --tc-tick-angle: 270deg; }

@keyframes tc-marker-in {
  from { opacity: 0; }
}

/* Pause: a round button in the HUD bar. */
.tc-pause {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -4px 0;
  padding: 0;
  border: 2px solid var(--tc-edge);
  border-radius: 50%;
  background: var(--tc-fill-solid);
  color: var(--tc-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tc-pause[hidden] { display: none; }
.tc-icon { fill: currentColor; }
.tc-pause .tc-icon { width: 55%; height: 55%; }
/* In a HUD bar it sits at the right end, also when the bar wraps. */
.hud .tc-pause { margin-left: auto; }
html.is-touch .hud button { white-space: nowrap; }

/* Thumb-sized HUD links and buttons (the back arrow is a single character otherwise). */
html.is-touch .hud-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  margin: -4px 0;
}

html.is-touch .hud-sound { min-height: 34px; }
.tc-pause:active { background: var(--tc-pressed); }
html:not(.is-touch) .tc-pause { display: none; }

/* Landscape phones: the HUD is one short line, so its pause button is a little smaller and
   sits inside the bar. */
@media (orientation: landscape) and (max-height: 560px) {
  .hud .tc-pause { width: 40px; height: 40px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-marker { animation: none; }
  .tc-marker-tick { transition: none; }
}