/* Touch trick HUD (touch mode only; desktop, keyboard, gamepad and the console layout never show it).
 *
 *   left thumb    drive stick: sideways steers, up is gas, down is brake / reverse
 *   right thumb   trick stick (touch-trick-stick.js) with BOOST (and JUMP / GRAB on a board) beside it
 *   bottom centre the trick readout: what the stick does now, and the direction -> trick legend
 *
 * Art is the served Infin8 control hardware already used by the drive stick and BOOST
 * (assets/arcade/infin8-ui/brand/control-stick-*, control-button-round-*, via --ctl-* in sleddin-hud.css),
 * themed per sled theme; nothing is redrawn or recoloured here. Sizes follow the touch scale from
 * Settings > Controls > Touch (--touch-scale, clamped .88-1.15 like the other pads) and the safe-area
 * insets (--i8-safe-*). States use shape and text as well as colour: a held direction is framed solid and
 * filled, a direction that needs air is framed dashed and the status line says TRICKS NEED AIR. */

.sled-stage .trick-zone, .sled-stage .trick-readout { display: none; }
.sled-stage { --trick-scale: clamp(.88, var(--touch-scale, 1), 1.15); --trick-stick-box: 136px; --trick-stick: 120px; }
html[data-input-mode="touch"][data-game-state="playing"] .sled-stage { --trick-stick-box: 112px; --trick-stick: 96px; }

/* Right thumb pad: actions above the trick stick in portrait, beside it in landscape. */
html[data-input-mode="touch"] .sled-stage .touch-controls .right-controls {
  grid-template-columns: auto; grid-template-areas: "actions" "stick"; justify-items: end; align-items: end; gap: 8px;
}
html[data-input-mode="touch"] .sled-stage .touch-controls .right-controls > .action-pad { grid-area: actions; }
@media (orientation: landscape) {
  html[data-input-mode="touch"] .sled-stage .touch-controls .right-controls { grid-template-columns: auto auto; grid-template-areas: "actions stick"; gap: 10px; }
}
html[data-touch-handedness="left"] .sled-stage .touch-controls .right-controls { justify-items: start; }
@media (orientation: landscape) {
  html[data-touch-handedness="left"][data-input-mode="touch"] .sled-stage .touch-controls .right-controls { grid-template-areas: "stick actions"; }
}

/* The trick stick: the same ring and knob as the drive stick. */
html[data-input-mode="touch"] .sled-stage[data-trick-stick="on"] .trick-zone { display: grid; }
.sled-stage .trick-zone {
  grid-area: stick; position: relative; place-items: center; width: var(--trick-stick-box); height: var(--trick-stick-box);
  border-radius: 50%; touch-action: none; --ctl-stick: var(--trick-stick);
}
.sled-stage .trick-zone .trick-track { width: var(--ctl-stick); height: var(--ctl-stick); }
.sled-stage .trick-zone:focus-visible { outline: 3px solid var(--i8-cyan); outline-offset: 2px; }
.sled-stage .trick-zone[data-direction]:not([data-direction=""]) .trick-knob { background-position: 0 100%; filter: drop-shadow(0 0 6px var(--i8-accent)); }
.sled-stage .trick-zone[data-direction]:not([data-direction=""]) .trick-track { filter: brightness(1.15); }

/* Direction arrows on the ring band (12 px on screen at every touch scale). */
.sled-stage .trick-dir {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(77, 232, 255, .55); border-radius: 50%;
  background: rgba(9, 12, 24, .7); color: var(--i8-cyan); font: 800 calc(12px / var(--trick-scale)) / 1 var(--i8-font-display, var(--i8-font)); pointer-events: none;
}
.sled-stage .trick-dir:empty, .sled-stage .trick-dir[data-state="empty"] { display: none; }
.sled-stage .trick-dir[data-dir="up"] { top: 2px; left: 50%; transform: translateX(-50%); }
.sled-stage .trick-dir[data-dir="down"] { bottom: 2px; left: 50%; transform: translateX(-50%); }
.sled-stage .trick-dir[data-dir="left"] { left: 2px; top: 50%; transform: translateY(-50%); }
.sled-stage .trick-dir[data-dir="right"] { right: 2px; top: 50%; transform: translateY(-50%); }
.sled-stage .trick-dir[data-state="locked"] { border-style: dashed; color: var(--i8-muted); opacity: .8; }
.sled-stage .trick-dir[data-state="active"] { border: 2px solid var(--i8-cyan-bright, #7ff0ff); background: var(--i8-cyan); color: #070910; }

/* Bottom centre: the trick readout sits between the two thumb pads, above the screen's safe edge. */
html[data-input-mode="touch"][data-game-state="playing"] .sled-stage[data-trick-stick="on"] .trick-readout { display: flex; }
.sled-stage .trick-readout {
  --trick-left-pad: calc(var(--trick-stick-box) * var(--trick-scale));
  --trick-right-pad: calc(var(--trick-stick-box) * var(--trick-scale));
  position: absolute; left: 50%; bottom: calc(var(--i8-safe-b) + 4px); z-index: 7; transform: translateX(-50%);
  flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box;
  width: max-content; max-width: calc(100% - var(--i8-safe-l) - var(--i8-safe-r) - 2 * max(var(--trick-left-pad), var(--trick-right-pad)) - 16px);
  margin: 0; padding: 6px 10px; pointer-events: none; text-align: center;
  border: 1px solid rgba(77, 232, 255, .45); border-radius: 9px; background: rgba(9, 12, 24, .74); color: var(--i8-text);
  opacity: var(--touch-opacity, .92); font: 700 12px/1.15 var(--i8-font);
}
.sled-stage .trick-readout__status { margin: 0; max-width: 100%; }
.sled-stage .trick-readout__state { color: var(--i8-cyan); font-family: var(--i8-font-display, var(--i8-font)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sled-stage .trick-readout__hint { color: var(--i8-text-soft, #d6dced); font-weight: 600; }
.sled-stage .trick-readout[data-state="locked"] .trick-readout__state { color: var(--i8-warning, #ffd479); }
.sled-stage .trick-readout__map { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sled-stage .trick-readout__map li {
  min-width: 0; padding: 3px 7px; border: 1px solid rgba(77, 232, 255, .5); border-radius: 7px; background: rgba(17, 22, 36, .82);
  color: var(--i8-cyan); font: 800 11px/1.1 var(--i8-font-display, var(--i8-font)); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sled-stage .trick-readout__map li[hidden] { display: none; }
.sled-stage .trick-readout__map li[data-state="locked"] { border-style: dashed; color: var(--i8-muted); }
.sled-stage .trick-readout__map li[data-state="active"] { border: 2px solid var(--i8-cyan-bright, #7ff0ff); background: var(--i8-cyan); color: #070910; }

/* Portrait phones: the gap between the pads is too narrow at large touch sizes, so the readout rests in
   the bottom band directly above the drive stick (mirrored for left-handed play), legend in two columns. */
@media (orientation: portrait) and (max-width: 480px) {
  .sled-stage .trick-readout {
    left: var(--i8-safe-l); bottom: calc(var(--i8-safe-b) + var(--trick-stick-box) * var(--trick-scale) + 10px); transform: none; align-items: flex-start;
    max-width: calc(100% - var(--i8-safe-l) - var(--i8-safe-r) - 120px * var(--trick-scale) - 16px);
  }
  html[data-touch-handedness="left"] .sled-stage .trick-readout { left: auto; right: var(--i8-safe-r); align-items: flex-end; }
  .sled-stage .trick-readout__hint { display: none; }
  .sled-stage .trick-readout__map { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Riding on touch: the bottom HUD row and the nearby-action prompts sit above the taller right pad. */
html[data-input-mode="touch"][data-game-state="playing"] .sled-stage[data-trick-stick="on"] .sled-world-hud {
  padding-bottom: calc(var(--i8-safe-b) + 212px * var(--trick-scale) + 8px);
}
html[data-input-mode="touch"][data-game-state="playing"] .sled-stage[data-trick-stick="on"] .sled-world-hud > #winter-dock {
  bottom: calc(var(--i8-safe-b) + 212px * var(--trick-scale) + 8px);
}
@media (orientation: landscape) {
  html[data-input-mode="touch"][data-game-state="playing"] .sled-stage[data-trick-stick="on"] .sled-world-hud { padding-bottom: calc(var(--i8-safe-b) + 120px * var(--trick-scale) + 8px); }
  html[data-input-mode="touch"][data-game-state="playing"] .sled-stage[data-trick-stick="on"] .sled-world-hud > #winter-dock { bottom: calc(var(--i8-safe-b) + 120px * var(--trick-scale) + 8px); }
}
html[data-popout-open] .sled-stage .trick-readout, html[data-soft-keyboard="open"] .sled-stage .trick-readout { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sled-stage .trick-zone .trick-knob { transition: none; } }