/* The fight, 16-bit edition (loaded after the GROKFIGHT sheets). The canvas is the game's
   own 360 px tall pixel buffer, scaled up with hard edges by the renderer (which sizes and
   centres it inside .fight-stage); the HUD is drawn into it, so the DOM HUD stays hidden.
   Desktop: a borderless 16:9 screen on black. A phone on its side: the whole screen. A
   phone held upright: a handheld, the screen in a bezel at the top, the controller under it.
   The DOM here (pause window, touch pad, tips) follows DESIGN.md: ink edges, hard drops,
   Jersey 10, one red action; the pad's round buttons are pixel circles (no border-radius). */

.fight-root,
.fight-root[data-stage] {
  background: #0f0d18;
  background-image: none;
}
.fight-root .fight-hud { display: none; }

.fight-stage {
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0f0d18;
  box-shadow: none;
}
.fight-stage::before,
.fight-stage::after { display: none; }
.fight-canvas,
.fight-stage > canvas {
  border-radius: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* a phone on its side: the screen is the stage */
.fight-root[data-layout="full"] .fight-stage { width: 100vw; height: 100dvh; aspect-ratio: auto; }

/* a phone held upright: 16:9 at the top under the notch, the controller below */
.fight-root[data-layout="tall"] {
  --bar: 0px;
  justify-content: flex-start;
  padding: max(6px, env(safe-area-inset-top)) 0 calc(max(8px, env(safe-area-inset-bottom)) + var(--pad-h));
}
.fight-root[data-layout="tall"] .fight-stage {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------- the touch pad, 16-bit */
/* the stick: a pixel ring (translucent Night, an ink edge), gold arrows when pushed, a gold
   knob that turns red while a thumb holds it */
.touch-pad .tp-stick {
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33' shape-rendering='crispEdges'%3E%3Cpath fill='%232e2c3d' fill-opacity='.5' d='M14 1h5v1h-5zM11 2h11v1h-11zM8 3h17v1h-17zM7 4h19v1h-19zM6 5h21v1h-21zM5 6h23v1h-23zM4 7h25v1h-25zM3 8h27v1h-27zM3 9h27v1h-27zM3 10h27v1h-27zM2 11h29v1h-29zM2 12h29v1h-29zM2 13h29v1h-29zM1 14h31v1h-31zM1 15h31v1h-31zM1 16h31v1h-31zM1 17h31v1h-31zM1 18h31v1h-31zM2 19h29v1h-29zM2 20h29v1h-29zM2 21h29v1h-29zM3 22h27v1h-27zM3 23h27v1h-27zM3 24h27v1h-27zM4 25h25v1h-25zM5 26h23v1h-23zM6 27h21v1h-21zM7 28h19v1h-19zM8 29h17v1h-17zM11 30h11v1h-11zM14 31h5v1h-5z'/%3E%3Cpath fill='%23231d33' d='M14 0h5v1h-5zM11 1h3v1h-3zM19 1h3v1h-3zM8 2h3v1h-3zM22 2h3v1h-3zM7 3h1v1h-1zM25 3h1v1h-1zM6 4h1v1h-1zM26 4h1v1h-1zM5 5h1v1h-1zM27 5h1v1h-1zM4 6h1v1h-1zM28 6h1v1h-1zM3 7h1v1h-1zM29 7h1v1h-1zM2 8h1v1h-1zM30 8h1v1h-1zM2 9h1v1h-1zM30 9h1v1h-1zM2 10h1v1h-1zM30 10h1v1h-1zM1 11h1v1h-1zM31 11h1v1h-1zM1 12h1v1h-1zM31 12h1v1h-1zM1 13h1v1h-1zM31 13h1v1h-1zM0 14h1v1h-1zM32 14h1v1h-1zM0 15h1v1h-1zM32 15h1v1h-1zM0 16h1v1h-1zM32 16h1v1h-1zM0 17h1v1h-1zM32 17h1v1h-1zM0 18h1v1h-1zM32 18h1v1h-1zM1 19h1v1h-1zM31 19h1v1h-1zM1 20h1v1h-1zM31 20h1v1h-1zM1 21h1v1h-1zM31 21h1v1h-1zM2 22h1v1h-1zM30 22h1v1h-1zM2 23h1v1h-1zM30 23h1v1h-1zM2 24h1v1h-1zM30 24h1v1h-1zM3 25h1v1h-1zM29 25h1v1h-1zM4 26h1v1h-1zM28 26h1v1h-1zM5 27h1v1h-1zM27 27h1v1h-1zM6 28h1v1h-1zM26 28h1v1h-1zM7 29h1v1h-1zM25 29h1v1h-1zM8 30h3v1h-3zM22 30h3v1h-3zM11 31h3v1h-3zM19 31h3v1h-3zM14 32h5v1h-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  image-rendering: pixelated;
}
.touch-pad .tp-arrow { border-bottom-color: rgb(255 255 255 / .75); }
.touch-pad .tp-stick[data-dir~="up"] .tp-arrow--up,
.touch-pad .tp-stick[data-dir~="down"] .tp-arrow--down,
.touch-pad .tp-stick[data-dir~="left"] .tp-arrow--left,
.touch-pad .tp-stick[data-dir~="right"] .tp-arrow--right { border-bottom-color: var(--gold); }
.touch-pad .tp-knob {
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M4 1h2v1h-2zM2 2h5v1h-5zM2 3h6v1h-6zM1 4h8v1h-8zM2 5h8v1h-8zM3 6h7v1h-7zM4 7h5v1h-5zM5 8h4v1h-4zM6 9h1v1h-1z'/%3E%3Cpath fill='%23fff3a6' d='M6 1h1v1h-1zM7 2h2v1h-2zM8 3h1v1h-1zM9 4h1v1h-1z'/%3E%3Cpath fill='%23c9851a' d='M1 5h1v1h-1zM1 6h2v1h-2zM2 7h2v1h-2zM2 8h3v1h-3zM4 9h2v1h-2z'/%3E%3Cpath fill='%23231d33' d='M4 0h3v1h-3zM2 1h2v1h-2zM7 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM1 3h1v1h-1zM9 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM9 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM2 9h2v1h-2zM7 9h2v1h-2zM4 10h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 7h1v1h-1zM10 7h1v1h-1zM1 9h1v1h-1zM9 9h1v1h-1zM2 10h2v1h-2zM7 10h2v1h-2zM4 11h3v1h-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}
.touch-pad .tp-zone.is-down .tp-knob { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff5a4a' d='M4 1h2v1h-2zM2 2h5v1h-5zM2 3h6v1h-6zM1 4h8v1h-8zM2 5h8v1h-8zM3 6h7v1h-7zM4 7h5v1h-5zM5 8h4v1h-4zM6 9h1v1h-1z'/%3E%3Cpath fill='%23ffb3a8' d='M6 1h1v1h-1zM7 2h2v1h-2zM8 3h1v1h-1zM9 4h1v1h-1z'/%3E%3Cpath fill='%23a3202c' d='M1 5h1v1h-1zM1 6h2v1h-2zM2 7h2v1h-2zM2 8h3v1h-3zM4 9h2v1h-2z'/%3E%3Cpath fill='%23231d33' d='M4 0h3v1h-3zM2 1h2v1h-2zM7 1h2v1h-2zM1 2h1v1h-1zM9 2h1v1h-1zM1 3h1v1h-1zM9 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM9 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM2 9h2v1h-2zM7 9h2v1h-2zM4 10h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 7h1v1h-1zM10 7h1v1h-1zM1 9h1v1h-1zM9 9h1v1h-1zM2 10h2v1h-2zM7 10h2v1h-2zM4 11h3v1h-3z'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; }

/* P K S and TOSS: pixel circles with an ink edge and drop, lit from the upper right */
.touch-pad .tp-btn,
.touch-pad .tp-pause,
.fight-root .fight-fs {
  border-radius: 0;
  font-family: var(--font-pixel);
  font-weight: 400;
}
.touch-pad .tp-btn {
  border: 0;
  color: var(--paper);
  background: var(--pad) center / contain no-repeat;
  box-shadow: none;
  text-shadow: 0 2px 0 var(--ink);
  image-rendering: pixelated;
  transition: transform .06s;
}
.touch-pad .tp-btn::after { border-radius: 0; }
.touch-pad .tp-btn b { font-weight: 400; font-size: calc(var(--tp-btn) * .5); line-height: .8; }
/* the letter says it (P punch, K kick, S skill: HOW TO PLAY and the pause window spell it
   out); a caption under 18.667 px would not read, and one at that size would not fit */
.touch-pad .tp-btn small { display: none; }
.touch-pad .tp-btn--p { --pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 18' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8323c' d='M7 1h1v1h-1zM4 2h5v1h-5zM3 3h7v1h-7zM2 4h9v1h-9zM2 5h10v1h-10zM2 6h11v1h-11zM2 7h12v1h-12zM3 8h12v1h-12zM4 9h12v1h-12zM5 10h10v1h-10zM6 11h9v1h-9zM7 12h8v1h-8zM8 13h6v1h-6zM9 14h4v1h-4z'/%3E%3Cpath fill='%23ff7a70' d='M8 1h2v1h-2zM9 2h4v1h-4zM10 3h4v1h-4zM11 4h4v1h-4zM12 5h3v1h-3zM13 6h2v1h-2zM14 7h2v1h-2zM15 8h1v1h-1z'/%3E%3Cpath fill='%23a3202c' d='M1 7h1v1h-1zM1 8h2v1h-2zM1 9h3v1h-3zM2 10h3v1h-3zM2 11h4v1h-4zM2 12h5v1h-5zM3 13h5v1h-5zM4 14h5v1h-5zM7 15h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M7 0h3v1h-3zM4 1h3v1h-3zM10 1h3v1h-3zM3 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM15 4h1v1h-1zM1 5h1v1h-1zM15 5h1v1h-1zM1 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM16 8h1v1h-1zM0 9h1v1h-1zM16 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM3 14h1v1h-1zM13 14h1v1h-1zM4 15h3v1h-3zM10 15h3v1h-3zM7 16h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 10h1v1h-1zM16 10h1v1h-1zM1 13h1v1h-1zM15 13h1v1h-1zM2 14h1v1h-1zM14 14h1v1h-1zM3 15h1v1h-1zM13 15h1v1h-1zM4 16h3v1h-3zM10 16h3v1h-3zM7 17h3v1h-3z'/%3E%3C/svg%3E"); }
.touch-pad .tp-btn--k { --pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 18' shape-rendering='crispEdges'%3E%3Cpath fill='%232f6fe0' d='M7 1h1v1h-1zM4 2h5v1h-5zM3 3h7v1h-7zM2 4h9v1h-9zM2 5h10v1h-10zM2 6h11v1h-11zM2 7h12v1h-12zM3 8h12v1h-12zM4 9h12v1h-12zM5 10h10v1h-10zM6 11h9v1h-9zM7 12h8v1h-8zM8 13h6v1h-6zM9 14h4v1h-4z'/%3E%3Cpath fill='%236fa2ff' d='M8 1h2v1h-2zM9 2h4v1h-4zM10 3h4v1h-4zM11 4h4v1h-4zM12 5h3v1h-3zM13 6h2v1h-2zM14 7h2v1h-2zM15 8h1v1h-1z'/%3E%3Cpath fill='%231b3f93' d='M1 7h1v1h-1zM1 8h2v1h-2zM1 9h3v1h-3zM2 10h3v1h-3zM2 11h4v1h-4zM2 12h5v1h-5zM3 13h5v1h-5zM4 14h5v1h-5zM7 15h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M7 0h3v1h-3zM4 1h3v1h-3zM10 1h3v1h-3zM3 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM15 4h1v1h-1zM1 5h1v1h-1zM15 5h1v1h-1zM1 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM16 8h1v1h-1zM0 9h1v1h-1zM16 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM3 14h1v1h-1zM13 14h1v1h-1zM4 15h3v1h-3zM10 15h3v1h-3zM7 16h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 10h1v1h-1zM16 10h1v1h-1zM1 13h1v1h-1zM15 13h1v1h-1zM2 14h1v1h-1zM14 14h1v1h-1zM3 15h1v1h-1zM13 15h1v1h-1zM4 16h3v1h-3zM10 16h3v1h-3zM7 17h3v1h-3z'/%3E%3C/svg%3E"); }
.touch-pad .tp-btn--s { --pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 18' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M7 1h1v1h-1zM4 2h5v1h-5zM3 3h7v1h-7zM2 4h9v1h-9zM2 5h10v1h-10zM2 6h11v1h-11zM2 7h12v1h-12zM3 8h12v1h-12zM4 9h12v1h-12zM5 10h10v1h-10zM6 11h9v1h-9zM7 12h8v1h-8zM8 13h6v1h-6zM9 14h4v1h-4z'/%3E%3Cpath fill='%23fff3a6' d='M8 1h2v1h-2zM9 2h4v1h-4zM10 3h4v1h-4zM11 4h4v1h-4zM12 5h3v1h-3zM13 6h2v1h-2zM14 7h2v1h-2zM15 8h1v1h-1z'/%3E%3Cpath fill='%23c9851a' d='M1 7h1v1h-1zM1 8h2v1h-2zM1 9h3v1h-3zM2 10h3v1h-3zM2 11h4v1h-4zM2 12h5v1h-5zM3 13h5v1h-5zM4 14h5v1h-5zM7 15h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M7 0h3v1h-3zM4 1h3v1h-3zM10 1h3v1h-3zM3 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM15 4h1v1h-1zM1 5h1v1h-1zM15 5h1v1h-1zM1 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM16 8h1v1h-1zM0 9h1v1h-1zM16 9h1v1h-1zM1 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM3 14h1v1h-1zM13 14h1v1h-1zM4 15h3v1h-3zM10 15h3v1h-3zM7 16h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 10h1v1h-1zM16 10h1v1h-1zM1 13h1v1h-1zM15 13h1v1h-1zM2 14h1v1h-1zM14 14h1v1h-1zM3 15h1v1h-1zM13 15h1v1h-1zM4 16h3v1h-3zM10 16h3v1h-3zM7 17h3v1h-3z'/%3E%3C/svg%3E"); color: var(--ink); text-shadow: 0 2px 0 var(--gold-hi); }
.touch-pad .tp-btn--toss { --pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16' shape-rendering='crispEdges'%3E%3Cpath fill='%234a886c' d='M6 1h1v1h-1zM4 2h4v1h-4zM3 3h6v1h-6zM2 4h8v1h-8zM2 5h9v1h-9zM1 6h11v1h-11zM2 7h11v1h-11zM3 8h11v1h-11zM4 9h9v1h-9zM5 10h8v1h-8zM6 11h6v1h-6zM7 12h4v1h-4zM8 13h1v1h-1z'/%3E%3Cpath fill='%2375a073' d='M7 1h2v1h-2zM8 2h3v1h-3zM9 3h3v1h-3zM10 4h3v1h-3zM11 5h2v1h-2zM12 6h2v1h-2zM13 7h1v1h-1z'/%3E%3Cpath fill='%23366b72' d='M1 7h1v1h-1zM1 8h2v1h-2zM2 9h2v1h-2zM2 10h3v1h-3zM3 11h3v1h-3zM4 12h3v1h-3zM6 13h2v1h-2z'/%3E%3Cpath fill='%23231d33' d='M6 0h3v1h-3zM4 1h2v1h-2zM9 1h2v1h-2zM2 2h2v1h-2zM11 2h2v1h-2zM2 3h1v1h-1zM12 3h1v1h-1zM1 4h1v1h-1zM13 4h1v1h-1zM1 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM14 8h1v1h-1zM1 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM13 10h1v1h-1zM2 11h1v1h-1zM12 11h1v1h-1zM2 12h2v1h-2zM11 12h2v1h-2zM4 13h2v1h-2zM9 13h2v1h-2zM6 14h3v1h-3z'/%3E%3Cpath fill='%23231d33' d='M0 9h1v1h-1zM14 9h1v1h-1zM1 11h1v1h-1zM13 11h1v1h-1zM2 13h2v1h-2zM11 13h2v1h-2zM4 14h2v1h-2zM9 14h2v1h-2zM6 15h3v1h-3z'/%3E%3C/svg%3E"); border: 0; box-shadow: none; }
.touch-pad .tp-btn--toss b { font-family: var(--font-pixel); font-size: 18.667px; letter-spacing: 0; }
/* SUPER: a gold plate that appears when the meter is full */
.touch-pad .tp-btn--super {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--gold);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 3px 0 var(--ink), inset 0 -3px 0 var(--gold-deep), inset 0 2px 0 var(--gold-hi);
  font-size: max(28px, calc(var(--tp-btn) * .42));
  letter-spacing: 0;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% + 1px), calc(100% - 2px) calc(100% + 1px), calc(100% - 2px) calc(100% + 3px), 2px calc(100% + 3px), 2px calc(100% + 1px), 0 calc(100% + 1px), 0 2px, 2px 2px);
}
.touch-pad[data-super="1"] .tp-btn--super { animation: px-super-blink .5s steps(1) infinite; }
@keyframes px-super-blink { 50% { background: var(--gold-hi); } }
/* pressed: the button sits lower */
.touch-pad .tp-btn.is-down { filter: brightness(1.12); transform: translateY(3px); box-shadow: none; }
.touch-pad[data-super="1"] .tp-btn--super.is-down { transform: translateY(3px); box-shadow: inset 0 -3px 0 var(--gold-deep); }

/* pause and full screen: Paper plates */
.touch-pad .tp-pause,
.fight-root .fight-fs {
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink), inset 0 -2px 0 var(--cloud-shade);
}
.touch-pad .tp-pause.is-down,
.fight-root .fight-fs:active { filter: none; transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--cloud-shade); }
.touch-pad .tp-pause svg { fill: var(--ink); }
.fight-root .fight-fs svg { stroke: var(--ink); stroke-linecap: square; stroke-linejoin: miter; }
.fight-root .fight-fs[aria-pressed="true"] { background: var(--gold); }
/* pause / full screen: the bottom middle, between the thumbs, clear of the HUD's faces */
.fight-root[data-layout="full"] .tp-sys,
.fight-root[data-layout="desktop"] .tp-sys {
  top: auto;
  right: auto;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
}
.fight-root[data-layout="full"] > .fight-fs {
  top: auto;
  left: calc(50% - 60px);
  bottom: max(8px, env(safe-area-inset-bottom));
}
.fight-root[data-layout="tall"] .tp-sys {
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(var(--pad-bottom, 8px) + 6px);
  transform: translateX(-50%);
}
.fight-root[data-layout="tall"] > .fight-fs { top: auto; right: auto; left: calc(50% - 60px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 6px); }

/* ---------------------------------------------------------------- the pause window */
/* a Cloud window over a Night wash (no blur): PAUSED on a Night band top-left, KEEP FIGHTING
   the one red action, the rest as plates, the keys as key caps */
.fight-pause { background: rgb(46 44 61 / .72); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.fight-pause .pause-card {
  border: var(--fp) solid var(--ink);
  border-bottom-width: calc(var(--fp) * 3);
  border-radius: 0;
  background:
    linear-gradient(var(--ink) 0 0) left top / var(--fp) var(--fp) no-repeat padding-box,
    linear-gradient(var(--ink) 0 0) right top / var(--fp) var(--fp) no-repeat padding-box,
    var(--cloud);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--cloud-shade);
  text-align: left;
  overflow: hidden;
  animation: none;
  clip-path: polygon(
    calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp),
    calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2),
    100% calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp)),
    calc(100% - var(--fp) * 2) calc(100% - var(--fp)), calc(100% - var(--fp) * 2) 100%,
    calc(var(--fp) * 2) 100%, calc(var(--fp) * 2) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp)),
    var(--fp) calc(100% - var(--fp) * 2), 0 calc(100% - var(--fp) * 2),
    0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
.fight-pause .family-corner { display: none; }
.fight-pause .pause-card { width: min(100%, 460px); }
.fight-pause .pause-head {
  padding: calc(var(--fp) * 6) calc(var(--fp) * 10) calc(var(--fp) * 4);
  border: 0;
  border-bottom: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--night);
  box-shadow: inset 0 var(--fp) 0 var(--plum);
}
.fight-pause .pause-title {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: var(--t2);
  line-height: 1;
  color: var(--paper);
  text-transform: uppercase;
  text-shadow: 0 var(--fp) 0 var(--ink);
  background: none;
  border: 0;
  box-shadow: none;
  rotate: none;
  transform: none;
}
.fight-pause .pause-title span { display: none; }
.fight-pause .pause-body { padding: calc(var(--fp) * 8) calc(var(--fp) * 10) calc(var(--fp) * 10); }
.fight-pause .pause-actions { gap: calc(var(--fp) * 5); }
.fight-pause .btn {
  --drop: var(--fp);
  justify-content: flex-start;
  min-height: max(44px, calc(var(--fp) * 22));
  padding: var(--fp) calc(var(--fp) * 8) 0;
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--cloud-shade);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: var(--t15);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: none;
  filter: none;
  transform: none;
  transition: none;
  clip-path: polygon(var(--fp) 0, calc(100% - var(--fp)) 0, calc(100% - var(--fp)) var(--fp), 100% var(--fp),
    100% calc(100% + var(--drop) - var(--fp)), calc(100% - var(--fp)) calc(100% + var(--drop) - var(--fp)),
    calc(100% - var(--fp)) calc(100% + var(--drop)), var(--fp) calc(100% + var(--drop)),
    var(--fp) calc(100% + var(--drop) - var(--fp)), 0 calc(100% + var(--drop) - var(--fp)), 0 var(--fp), var(--fp) var(--fp));
}
@media (hover: hover) {
  .fight-pause .btn:hover { background: var(--gold-hi); transform: none; }
}
.fight-pause .btn.is-current,
.fight-pause .btn:focus-visible {
  --drop: calc(var(--fp) * 2);
  outline: none;
  background: var(--gold);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep);
  transform: translateY(calc(var(--fp) * -1));
}
.fight-pause .btn:active { --drop: var(--fp); transform: translateY(var(--fp)); box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--cloud-shade); }
.fight-pause .btn-candy {
  background: var(--red);
  color: var(--paper);
  text-shadow: 0 var(--fp) 0 var(--red-deep);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--red-deep), inset 0 var(--fp) 0 var(--red-hi);
}
@media (hover: hover) {
  .fight-pause .btn-candy:hover { background: var(--red-hi); }
}
.fight-pause .btn-candy.is-current,
.fight-pause .btn-candy:focus-visible {
  background: var(--red);
  color: var(--gold-hi);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 0 0 var(--fp) var(--gold), inset 0 calc(var(--fp) * -2) 0 var(--red-deep);
}
.fight-pause .pause-hint { margin: calc(var(--fp) * 8) 0 0; font-family: var(--font-pixel); font-weight: 400; font-size: var(--t1); line-height: 1.35; color: var(--plum); text-align: left; }
.fight-pause .pause-hint b { color: var(--ink); font-weight: 400; }
@media (max-height: 520px) {
  .fight-pause .pause-head { padding: calc(var(--fp) * 5) calc(var(--fp) * 8) calc(var(--fp) * 3); }
  .fight-pause .pause-title { font-size: var(--t15); }
  .fight-pause .pause-body { padding: calc(var(--fp) * 6) calc(var(--fp) * 8) calc(var(--fp) * 8); }
  .fight-pause .pause-actions .btn { min-height: 44px; font-size: var(--t1); }
  .fight-pause .pause-hint { margin-top: calc(var(--fp) * 6); }
}

/* the notes over the stage ("Turn sideways for a bigger view", "Tap to pause"): plates */
.fight-root .fight-tips .fight-tip {
  min-height: 34px;
  padding: 2px 4px 0 10px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--ink), inset 0 -2px 0 var(--cloud-shade);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 18.667px;
  line-height: 1;
  text-transform: uppercase;
}
.fight-root .fight-tips .fight-tip--watch { padding-right: 10px; }
.fight-root .fight-tip-x {
  width: 26px;
  height: 26px;
  margin: 0 0 2px 4px;
  border-radius: 0;
  background: var(--cloud-shade);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 18.667px;
}
.fight-root .fight-tip-x::after { border-radius: 0; }

/* a phone held upright: a handheld console. A 4:3 screen in a bezel at the top, the logo
   printed on the body, the controls below */
.fight-root[data-layout="tall"] {
  background: var(--night);
  background-image: none;
  box-shadow: inset -12px 0 0 rgb(35 29 51 / .35);
}
.fight-root[data-layout="tall"] .fight-stage {
  aspect-ratio: 4 / 3;
  width: calc(100% - 20px);
  margin: 0 10px;
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--plum), 0 0 0 10px var(--ink), 0 12px 0 2px var(--ink);
}
.fight-root[data-layout="tall"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(max(6px, env(safe-area-inset-top)) + (100vw - 20px) * .75 + 36px);
  width: min(62vw, 300px);
  aspect-ratio: 229 / 59;
  transform: translateX(-50%);
  background: url("../assets/px/logo.png?v=2") center / contain no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: .9;
  pointer-events: none;
}
/* SELECT / START: pause and full screen sit under the logo */
.fight-root[data-layout="tall"] .tp-sys,
.fight-root[data-layout="tall"] > .fight-fs {
  bottom: auto;
  top: calc(max(6px, env(safe-area-inset-top)) + (100vw - 20px) * .75 + 36px + min(62vw, 300px) * .2576 + 26px);
}
.fight-root[data-layout="tall"] .tp-sys { left: calc(50% + 26px); transform: translateX(-50%); }
.fight-root[data-layout="tall"] > .fight-fs { left: calc(50% - 26px - 44px); }

@media (prefers-reduced-motion: reduce) {
  .touch-pad[data-super="1"] .tp-btn--super { animation: none; }
}