/* Touch: the controls on the screen in a race (js/input/touchControls.js), the HUD kept clear of the thumbs, the
   "turn your phone" card, and the menus' touch hints. Everything here waits for html.touch (a finger was used, or the
   device has nothing but a touch screen) - with a mouse and a keyboard none of it applies.
   One unit for every control: --tb, from the screen's short side and the size setting (--touch-scale). */
:root {
  --tb: calc(clamp(52px, 15.5vmin, 92px) * var(--touch-scale, 1));
}

.touch-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--tb);
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.touch-layer {
  --touch-alpha: 0.8;
  --edge-x: max(14px, calc(env(safe-area-inset-right) + 8px));
  --edge-l: max(14px, calc(env(safe-area-inset-left) + 8px));
  --edge-b: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  position: fixed;
  inset: 0;
  pointer-events: auto;
  /* (no scrolling, zooming or double-tap zoom from fingers on the race: every finger is a control's) */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------------------------------------------------------------- buttons: big, round, the game's plates */
.touch-btn {
  position: absolute;
  bottom: calc(var(--edge-b) + var(--y, 0) * var(--tb));
  right: calc(var(--edge-x) + var(--x, 0) * var(--tb));
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  align-items: center;
  justify-content: center;
  width: max(48px, calc(var(--s, 1) * var(--tb)));
  height: max(48px, calc(var(--s, 1) * var(--tb)));
  padding: 0;
  font-family: var(--font);
  font-size: max(11px, calc(var(--tb) * 0.18));
  font-style: italic;
  font-weight: 900;
  color: #fff;
  background: radial-gradient(circle at 50% 32%, rgb(70 104 180 / 92%), rgb(21 34 63 / 92%) 74%);
  border: max(3px, calc(var(--tb) * 0.05)) solid var(--c-rim);
  border-radius: 50%;
  box-shadow: 0 calc(var(--tb) * 0.06) 0 rgb(0 0 0 / 35%), inset 0 2px 0 rgb(255 255 255 / 22%);
  opacity: var(--touch-alpha);
  cursor: pointer;
  touch-action: none;
  transition: transform 0.06s, filter 0.06s;
}

.touch-btn b {
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.22em var(--c-ink);
}

.touch-btn .icon svg { width: calc(var(--s, 1) * var(--tb) * 0.4); height: calc(var(--s, 1) * var(--tb) * 0.4); }
.touch-btn:active { transform: scale(0.93); filter: brightness(1.25); }

/* where each sits, in --tb from the corner (--x across, --y up) and how big (--s): Hop in the thumb's corner */
.touch-hop { --x: 0; --y: 0; --s: 1.3; background: radial-gradient(circle at 50% 32%, #ffe066, #ffa51e 72%); border-color: var(--c-gold-rim); color: #fff; }
.touch-brake { --x: 1.55; --y: 0.05; --s: 0.95; }
.touch-item { --x: 0.18; --y: 1.5; --s: 1.1; }
.touch-turbo { --x: 1.5; --y: 1.35; --s: 0.72; color: rgb(255 255 255 / 45%); }
.touch-turbo.is-ready { color: var(--c-cyan); border-color: var(--c-cyan); box-shadow: 0 0 calc(var(--tb) * 0.25) rgb(111 208 255 / 70%), 0 calc(var(--tb) * 0.06) 0 rgb(0 0 0 / 35%); }
.touch-turbo b { display: none; }
.touch-go { --x: 0; --y: 0; --s: 1.3; display: none; background: radial-gradient(circle at 50% 32%, #8ff0b4, #2fbf6a 72%); border-color: #d6ffe6; }

/* auto-accelerate off: Go takes the corner, Hop sits beside it, Brake beside that */
.touch-layer[data-accel="manual"] .touch-go { display: flex; }
.touch-layer[data-accel="manual"] .touch-hop { --x: 1.5; --y: 0.05; --s: 1.1; }
.touch-layer[data-accel="manual"] .touch-brake { --x: 2.8; --y: 0.05; }
.touch-layer[data-accel="manual"] .touch-turbo { --x: 1.75; --y: 1.4; }

/* the item held, in the item button (the HUD's pictures) */
.touch-item-art {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  pointer-events: none;
}

.touch-item.has { border-color: var(--c-gold); box-shadow: 0 0 calc(var(--tb) * 0.3) rgb(255 200 60 / 70%), 0 calc(var(--tb) * 0.06) 0 rgb(0 0 0 / 35%); }
.touch-item:not(.has) .icon { opacity: 0.45; }
.touch-item.has .icon, .touch-item.has b { visibility: hidden; }

/* ---------------------------------------------------------------- steering: the floating stick, or two buttons */
.touch-steer { display: none; }
.touch-layer[data-steer="buttons"] .touch-steer { display: block; }
.touch-left, .touch-right { --s: 1.25; right: auto; }
.touch-left { left: var(--edge-l); }
.touch-right { left: calc(var(--edge-l) + 1.5 * var(--tb)); }

/* the stick: resting faintly where a thumb would be, then centred wherever it lands (js: a transform to that point) */
.touch-stick {
  position: absolute;
  bottom: calc(var(--edge-b) + var(--tb) * 0.45);
  left: calc(var(--edge-l) + var(--tb) * 0.45);
  width: calc(var(--tb) * 1.6);
  height: calc(var(--tb) * 1.6);
  background: radial-gradient(circle, rgb(21 34 63 / 30%), rgb(21 34 63 / 55%));
  border: max(3px, calc(var(--tb) * 0.05)) solid rgb(140 200 255 / 55%);
  border-radius: 50%;
  opacity: calc(var(--touch-alpha) * 0.55);
  pointer-events: none;
}

.touch-stick.is-held {
  top: 0;
  bottom: auto;
  left: 0;
  margin: calc(var(--tb) * -0.8) 0 0 calc(var(--tb) * -0.8);
  opacity: var(--touch-alpha);
}

.touch-layer:not([data-steer="stick"]) .touch-stick { display: none; }

.touch-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--tb) * 0.75);
  height: calc(var(--tb) * 0.75);
  margin: calc(var(--tb) * -0.375) 0 0 calc(var(--tb) * -0.375);
  background: radial-gradient(circle at 50% 35%, #fff, #c7d3ee 70%);
  border: max(3px, calc(var(--tb) * 0.05)) solid var(--c-ink);
  border-radius: 50%;
  box-shadow: 0 calc(var(--tb) * 0.05) 0 rgb(0 0 0 / 35%);
}

/* left-handed: the buttons on the left, the steering on the right */
.touch-layer[data-hand="left"] .touch-btn { right: auto; left: calc(var(--edge-l) + var(--x, 0) * var(--tb)); }
.touch-layer[data-hand="left"] .touch-left { left: auto; right: calc(var(--edge-x) + 1.5 * var(--tb)); }
.touch-layer[data-hand="left"] .touch-right { left: auto; right: var(--edge-x); }
.touch-layer[data-hand="left"] .touch-stick:not(.is-held) { right: calc(var(--edge-x) + var(--tb) * 0.45); left: auto; }

/* a race that is not a player alone's (a shared screen, a gamepad): the pause button only */
.touch-layer[data-only="pause"] > :not(.touch-pause) { display: none; }
.touch-layer[data-only="pause"] { pointer-events: none; }
.touch-layer[data-only="pause"] .touch-pause { pointer-events: auto; }

/* ---------------------------------------------------------------- pause: top left, above the standings */
.touch-pause {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(rgb(45 68 121 / 92%), rgb(21 34 63 / 92%));
  border: 3px solid var(--c-rim);
  border-radius: var(--r-md);
  box-shadow: 0 3px 0 rgb(0 0 0 / 35%);
  opacity: max(0.75, var(--touch-alpha));
}

.touch-pause .icon svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- the HUD kept clear of the thumbs (one player) */
/* the bottom of the screen is the thumbs': the items and coins go up beside the standings, the standings make room for
   the pause button, and the right-hand column ends above the buttons (a smaller speedometer, the map in what is left) */
/* (and clear of a notch: viewport-fit=cover lets the picture under it, not the HUD - a phone or tablet is html.touch) */
html.touch .hud[data-views="1"] .hud-tl { top: calc(max(8px, env(safe-area-inset-top)) + 56px); left: calc(var(--u) * 2 + env(safe-area-inset-left)); }
html.touch .hud[data-views="1"] .hud-bl { top: calc(var(--u) * 2 + env(safe-area-inset-top)); bottom: auto; left: calc(var(--u) * 15 + 4px + env(safe-area-inset-left)); }
html.touch .hud[data-views="1"] .hud-right {
  top: calc(var(--u) * 2 + env(safe-area-inset-top));
  right: calc(var(--u) * 2 + env(safe-area-inset-right));
  bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 6px)) + 2.7 * var(--tb));
  width: calc(var(--u) * 21);
}
html.touch .hud[data-views="1"] .hud-map { order: 2; }
html.touch .hud[data-views="1"] .hud-br { order: 1; width: 80%; }

/* a phone on its side has no room for six standings beside the thumbs' buttons: the first three, and you */
@media (max-height: 500px) {
  html.touch .hud[data-views="1"] .hud-standings li:not([data-place="1"], [data-place="2"], [data-place="3"], .me) { display: none; }
}

/* ---------------------------------------------------------------- an upright phone in a race: turn it */
.touch-rotate {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  text-align: center;
  background: var(--glass-scrim), rgb(8 14 34 / 70%);
  pointer-events: auto;
  touch-action: none;
}

.touch-rotate .icon svg { width: 6rem; height: 6rem; animation: turn-phone 2.4s ease-in-out infinite; }
.touch-rotate b { font-size: var(--t-xl); font-style: italic; font-weight: 900; paint-order: stroke fill; -webkit-text-stroke: var(--stroke) var(--c-ink); }
.touch-rotate p { max-width: 18rem; font-weight: 700; color: var(--c-text-soft); }

@keyframes turn-phone {
  0%, 20% { transform: rotate(0); }
  50%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}

html.turn-phone .touch-rotate { display: flex; }

/* ---------------------------------------------------------------- no zooming of the race */
/* (pinching or double-tapping the race would zoom the page: every finger on it is a control's; in the menus a double tap
   does not zoom either, a pinch still may) */
html.in-race #view,
html.in-race .hud { touch-action: none; }
html.touch body { touch-action: manipulation; }

/* ---------------------------------------------------------------- menus on a touch screen: touch hints, not keys */
/* (a finger needs no focus ring: the screens still focus their main choice for a keyboard, which brings it back) */
html.touch:not(.nav-keys) :where(button, input, a, [tabindex]):focus-visible { outline: none; }
html.touch .prompts,
html.touch .keys-hint { display: none; }
.touch-hint { display: none; }
html.touch .touch-hint { display: flex; }
html.touch .seat-how .ctl-strip:not(.touch-hint),
html.touch .seat-how .ctl-device { display: none; }

/* ---------------------------------------------------------------- the touch controls in the guides (js/ui/views/controlsView.js) */
.cap-touch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  color: #fff;
  background: radial-gradient(circle at 50% 32%, rgb(70 104 180), var(--c-navy-900) 74%);
  border: 2px solid var(--c-rim);
  border-radius: 50%;
}

.cap-touch svg { width: 1.25em; height: 1.25em; overflow: visible; }
.touch-settings { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.touch-guide .ctl-binding { order: -1; }
.touch-guide .ctl-row { justify-content: flex-start; }