/* IMPACT FRAME — css/touch.css
   The touch controller. */
/* touch controller: docked under the stage in portrait, laid over its bottom edge in landscape */
.if-touch {
  --tb: clamp(58px, 17vw, 76px); --tg: 6px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 12px 0 4px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.if-pad { position: relative; pointer-events: auto; touch-action: none; }
/* the hit area reaches past the drawn buttons */
.if-pad::before { content: ""; position: absolute; inset: -14px; }
.if-dpad { display: grid; grid-template-columns: repeat(3, var(--tb)); grid-template-rows: repeat(3, var(--tb)); gap: var(--tg); flex: none; }
.if-dpad [data-t="up"] { grid-area: 1 / 2; }
.if-dpad [data-t="left"] { grid-area: 2 / 1; }
.if-dpad i { grid-area: 2 / 2; border: 2px dotted var(--print-ink); border-radius: 50%; margin: 30%; opacity: 0.35; pointer-events: none; }
.if-dpad [data-t="right"] { grid-area: 2 / 3; }
.if-dpad [data-t="down"] { grid-area: 3 / 2; }
.if-pad-r { display: flex; flex-direction: column; gap: var(--tg); flex: 0 1 calc(var(--tb) * 2.3); min-width: calc(var(--tb) * 1.4); }
.if-pad button {
  position: relative; appearance: none; margin: 0; padding: 0; border: 2.5px solid var(--print-ink); border-radius: 0;
  background: rgba(241, 240, 235, 0.86); color: var(--print-ink); box-shadow: 3px 3px 0 var(--print-ink);
  font: 800 22px/1 var(--f-mono); pointer-events: none; touch-action: none;
}
.if-pad-r button { height: calc(var(--tb) * 0.92); font-size: 15px; letter-spacing: 0.1em; text-align: left; padding-left: 0.9em; }
.if-pad-r [data-t="punch"], .if-pad-r [data-t="kick"] { border-color: var(--print-spot); box-shadow: 3px 3px 0 var(--print-spot); }
.if-pad-r [data-t="punch"] { height: var(--tb); }
.if-pad button.on { background: var(--print-ink); color: var(--print-paper); box-shadow: none; transform: translate(3px, 3px); }
.if-pad-r [data-t="punch"].on, .if-pad-r [data-t="kick"].on { background: var(--print-spot); border-color: var(--print-spot); color: var(--print-paper); }
.if-touch:not(.live) .if-pad { opacity: 0.55; }
@media (orientation: landscape) {
  .if-stage.if-touchdev { max-height: calc(100svh - 12px); }
  .if-touch {
    --tb: clamp(48px, 13svh, 66px); --tg: 5px;
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0 2.5% 3%; pointer-events: none;
  }
  .if-touch:not(.live) { visibility: hidden; }
  .if-touch .if-pad-r { flex-basis: calc(var(--tb) * 2); }
  .if-touch .if-pad button:not(.on) { background: rgba(241, 240, 235, 0.62); }
  /* the player readout moves between the pads */
  .if-touchdev .if-hud-player { left: 50%; transform: translateX(-50%); }
  .if-touchdev .if-hud-chip { display: none; }
}
.if-raw .if-hud b, .if-raw .if-banner span, .if-raw .if-hud-combo b { font-family: var(--f-mono); font-weight: 700; text-shadow: none; color: var(--print-ink); }
.if-raw .if-banner { transition: none; }
.if-narrow .if-hud-chip, .if-narrow .if-rank-meta > span:first-child, .if-narrow .if-charge .if-lbl { display: none; }