/* IMPACT FRAME — css/arena.css
   The arena: on a touch device a fight fills the screen, sideways, and the
   controller is drawn into the game as faint outlines that ink in when pressed. */
.if-tpause { display: none; }
html.if-arena-on, html.if-arena-on body { overflow: hidden; overscroll-behavior: none; }
.if-shell.if-arena {
  position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh;
  background: var(--print-paper); touch-action: none;
}
/* held upright and the browser can't lock: a quarter turn clockwise about the top-left corner */
.if-shell.if-arena.if-rot { inset: auto; top: 0; left: 100vw; width: 100dvh; height: 100vw; transform-origin: 0 0; transform: rotate(90deg); }
.if-arena .if-stage { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; }
.if-arena .if-stage:focus-visible { outline: none; }
.if-arena .if-touch {
  --tb: clamp(46px, 14vmin, 70px); --tg: 6px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 0 max(3%, env(safe-area-inset-right, 0px)) max(4%, env(safe-area-inset-bottom, 0px)) max(3%, env(safe-area-inset-left, 0px));
}
.if-shell.if-arena.if-rot .if-touch { padding: 0 3% 4%; }
.if-arena .if-touch:not(.live) { visibility: hidden; }
.if-arena .if-touch .if-pad-r { flex: 0 0 calc(var(--tb) * 1.9); }
/* reduced overlay: outlines only, faint until a finger is on them */
.if-arena .if-touch .if-pad button {
  background: transparent; box-shadow: none; border-width: 2px; border-color: var(--print-ink); color: var(--print-ink);
  opacity: 0.3; font-size: 18px; transition: opacity 0.12s;
}
.if-arena .if-touch .if-pad-r button { font-size: 12px; height: calc(var(--tb) * 0.8); }
.if-arena .if-touch .if-pad-r [data-t="punch"] { height: calc(var(--tb) * 0.95); }
.if-arena .if-touch .if-pad-r [data-t="punch"], .if-arena .if-touch .if-pad-r [data-t="kick"] { border-color: var(--print-spot); color: var(--print-spot); box-shadow: none; }
.if-arena .if-touch .if-dpad i { opacity: 0.18; }
.if-arena .if-touch .if-pad button.on { opacity: 0.85; background: var(--print-ink); color: var(--print-paper); transform: none; transition: none; }
.if-arena .if-touch .if-pad-r [data-t="punch"].on, .if-arena .if-touch .if-pad-r [data-t="kick"].on { background: var(--print-spot); color: var(--print-paper); }
.if-arena .if-tpause {
  display: block; position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); pointer-events: auto;
  width: 40px; height: 40px; padding: 0; border: 2px solid var(--print-ink); background: transparent; color: var(--print-ink);
  font: 800 14px/1 var(--f-mono); letter-spacing: 0.05em; opacity: 0.45; touch-action: manipulation;
}
.if-shell.if-arena.if-rot .if-tpause { top: 10px; right: 10px; }
.if-arena .if-touch:not(.live) ~ .if-tpause { display: none; }
/* the HUD makes room: the rank moves clear of the pause button, the player readout sits between the pads */
.if-arena .if-hud-player { left: 50%; transform: translateX(-50%); }
.if-arena .if-hud-chip { display: none; }
.if-arena .if-hud-rank { right: calc(2.2% + 50px); }