/* Fight screen: the letterboxed stage box, the HUD (js/fight/hud.js), the announcer,
   the pause overlay and the touch pad (js/input.js). Candy-cloud look: tokens from
   tokens.css, thick --foreground outlines, hard 0 Npx drop shadows, 135deg candy stripes.

   Expected DOM (js/fight/hud.js exports buildFightLayout() that makes exactly this):

     <div class="fight-root" data-stage="portrait|sky|night|moon|trenches|rooftop|island|datacenter|dojo" data-layout="desktop|tall|full" data-pad="1|" data-fs="1|">
       <div class="fight-stage">                 16:9 box, letterboxed and centred (desktop)
         <canvas class="fight-canvas"></canvas>   renderer draws here
         <div class="fight-hud"></div>            createHUD(el) (adds .hud)
         <div class="fight-tips">…</div>          "Tap to pause" / "Turn sideways" (fight-screen.js)
       </div>
       <div class="fight-touch"></div>            input.setTouchLayer(el) (adds .touch-pad: .tp-zone
                                                  with the .tp-stick, .tp-buttons, .tp-sys with pause)
       <button class="fight-fs">                  full screen (fight-screen.js; in .fight-tips in watch)
       <div class="fight-pause" hidden>           pause overlay
         <div class="pause-card" role="dialog" aria-modal="true" aria-labelledby="pause-title">
           <div class="pause-head"><h2 class="pause-title" id="pause-title">Paused <span>♡</span></h2></div>
           <div class="pause-body">
             <div class="pause-actions"> <button class="btn btn-candy btn-block">…</button> <button class="btn btn-block">…</button> </div>
             <p class="pause-hint">…</p>
           </div>
         </div>
       </div>
     </div>

   The HUD sizes itself in container units of .hud (1cqw = 1% of the stage width), so it
   scales with the stage at any window size.

   js/fight/fight-screen.js sets data-layout on .fight-root (and data-pad="1" while the
   touch pad is up):
     desktop  the 16:9 box, letterboxed (a mouse / keyboard screen in landscape)
     tall     portrait: HUD strip on top, the stage (any shape: the renderer's view follows
              it), the thumb area below it with the pad
     full     landscape touch / a short screen: the stage fills the screen, the HUD and the
              pad sit over it
   The pad (.touch-pad) always covers the whole root; each layout places its parts. */

body[data-screen="fight"] {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
/* no pull-to-refresh or rubber-band on the page itself while fighting */
html:has(> body[data-screen="fight"]) { overscroll-behavior: none; }

/* ---------- screen + stage box ---------------------------------------------------------- */

.fight-root {
  --gutter: clamp(12px, 3.6vmin, 44px);
  --frame: 5px;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* the visible height: the iOS toolbar never covers the pad */
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--primary) 12%, transparent) 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%, var(--pink-soft), transparent 58%);
  background-size: 25px 25px, auto;
  /* gesture hygiene: no scroll, pinch or double-tap zoom, selection, callout or loupe */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* the site's blue theme, and a dusk look for the night stage */
.fight-root[data-stage="sky"] {
  --pink-soft: oklch(90% .08 228);
  --primary: oklch(68% .15 248);
  --primary-border: oklch(55% .16 248);
}
.fight-root[data-stage="night"] {
  background-color: oklch(30% .06 285);
  background-image:
    radial-gradient(circle at 1px 1px, oklch(100% 0 0 / .1) 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%, oklch(45% .12 300), transparent 62%);
}

.fight-stage {
  position: relative;
  box-sizing: content-box; /* aspect-ratio applies to the canvas area, not the border */
  width: min(
    calc(100vw - 2 * var(--gutter) - 2 * var(--frame) - 20px),
    calc((100dvh - 2 * var(--gutter) - 2 * var(--frame) - 36px) * 16 / 9)
  );
  aspect-ratio: 16 / 9;
  margin-bottom: 14px; /* room for the frame's drop shadow */
  border: var(--frame) solid var(--foreground);
  border-radius: 10px;
  background: var(--foreground);
  box-shadow:
    0 0 0 7px var(--lemon-soft),
    0 0 0 10px var(--foreground),
    0 18px 0 -2px var(--primary),
    0 32px 40px color-mix(in oklab, var(--foreground) 22%, transparent);
}
/* the frame's corner rosettes (bottom two; the HUD owns the top) */
.fight-stage::before,
.fight-stage::after {
  content: "✿";
  position: absolute;
  z-index: 3;
  bottom: -20px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--foreground);
  border-radius: 50%;
  background: var(--sky-soft);
  color: var(--primary);
  box-shadow: 2px 3px 0 var(--foreground);
  font-size: 1.2rem;
  line-height: 1;
  pointer-events: none;
}
.fight-stage::before { left: -20px; }
.fight-stage::after { right: -20px; background: var(--mint-soft); }

.fight-canvas,
.fight-stage > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* ---------- HUD ---------------------------------------------------------------------- */

.hud {
  --u: 1cqw;
  --line: max(2px, calc(var(--u) * .26));
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: size;
  pointer-events: none;
  color: var(--foreground);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
}
/* a soft wash behind the top bar so it reads over the busy stage art (the hanging
   portrait frame sits right under it) */
.hud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 21%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card-solid) 62%, transparent) 0 45%, transparent);
}
.fight-root[data-stage="night"] .hud::before,
.fight-root:is([data-stage="moon"], [data-stage="trenches"], [data-stage="datacenter"]) .hud::before {
  background: linear-gradient(180deg, color-mix(in oklab, var(--foreground) 55%, transparent) 0 45%, transparent);
}
.hud-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hud-top {
  position: absolute;
  top: calc(var(--u) * 1.5);
  left: calc(var(--u) * 1.6);
  right: calc(var(--u) * 1.6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * .9);
}

.hud-side {
  --pcol: var(--p1);
  --pborder: var(--p1-border);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
  min-width: 0;
}
.hud-side[data-side="1"] {
  --pcol: var(--p2);
  --pborder: var(--p2-border);
  flex-direction: row-reverse;
}

/* portrait tile */
.hud-face {
  --family-feature-color: oklch(.75 .16 var(--feature-hue, 0));
  position: relative;
  flex: none;
  width: calc(var(--u) * 6.2);
  aspect-ratio: 1;
  border: var(--line) solid var(--foreground);
  border-radius: calc(var(--u) * 1.2);
  background: var(--card-solid);
  box-shadow: 0 calc(var(--u) * .35) 0 var(--foreground);
  transform-origin: 50% 80%;
}
.hud-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--u) * 1.2 - var(--line));
  background: var(--sky-soft);
}
.hud-side[data-side="1"] .hud-face img { background: var(--pink-soft); }
.hud-face.is-ko img { filter: grayscale(.9) brightness(.9); }
.hud-face.is-ko { transform: rotate(-6deg); }
.hud-side[data-side="1"] .hud-face.is-ko { transform: rotate(6deg); }

/* featured tiers glow like the family portrait's .family-featured tiles (scaled down) */
.hud-featured {
  --feature-hue: var(--feature-hue-base, 0);
  animation: hud-hue-spin var(--feature-hue-speed, 10s) linear infinite;
  box-shadow:
    0 calc(var(--u) * .35) 0 var(--foreground),
    0 0 0 calc(var(--u) * .3) color-mix(in oklab, var(--family-feature-color) 70%, transparent),
    0 0 calc(var(--u) * 1.2) calc(var(--u) * .35) color-mix(in oklab, var(--family-feature-color) 60%, transparent),
    0 0 calc(var(--u) * 2.8) calc(var(--u) * .8) color-mix(in oklab, var(--family-feature-color) 38%, transparent);
}
.hud-featured img { box-shadow: inset 0 0 0 calc(var(--u) * .22) var(--family-feature-color); }
.hud-featured-50k { --feature-hue-speed: 12s; }
.hud-featured-100k { --feature-hue-speed: 8s; }
.hud-featured-1m { --feature-hue-speed: 5.5s; }
@keyframes hud-hue-spin {
  from { --feature-hue: var(--feature-hue-base, 0); }
  to { --feature-hue: calc(var(--feature-hue-base, 0) + 360); }
}
.hud-face-mark {
  position: absolute;
  top: calc(var(--u) * -.55);
  right: calc(var(--u) * -.55);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border: max(1px, calc(var(--u) * .12)) solid var(--foreground);
  border-radius: 50%;
  background: var(--family-feature-color);
  box-shadow: calc(var(--u) * .08) calc(var(--u) * .16) 0 var(--foreground);
  font-size: calc(var(--u) * 1);
  line-height: 1;
}
.hud-side[data-side="1"] .hud-face-mark { right: auto; left: calc(var(--u) * -.55); }

/* P1 / P2 / CPU tag hanging off the portrait */
.hud-tag {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -.95);
  translate: -50% 0;
  padding: .12em .55em .1em;
  border: max(1.5px, calc(var(--u) * .16)) solid var(--foreground);
  border-radius: 999px;
  background: var(--pcol);
  color: #fff;
  box-shadow: 0 calc(var(--u) * .14) 0 var(--foreground);
  font-size: calc(var(--u) * .95);
  letter-spacing: .04em;
  line-height: 1.1;
  white-space: nowrap;
}
.hud-tag--cpu { background: var(--card-solid); color: var(--foreground); }

/* name, tier, hearts, bars */
.hud-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .5);
  padding-top: calc(var(--u) * .15);
}
.hud-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  min-width: 0;
}
.hud-side[data-side="1"] .hud-row { flex-direction: row-reverse; }

.hud-name {
  min-width: 0;
  overflow: hidden;
  padding: .12em .6em .14em;
  border: var(--line) solid var(--foreground);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: 0 calc(var(--u) * .22) 0 var(--foreground);
  font-size: calc(var(--u) * 1.45);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-tier {
  flex: none;
  padding: .16em .6em .14em;
  border: max(1.5px, calc(var(--u) * .18)) solid var(--foreground);
  border-radius: 999px;
  background: var(--tier-base);
  color: var(--tier-base-fg);
  box-shadow: calc(var(--u) * .08) calc(var(--u) * .18) 0 var(--foreground);
  font-size: calc(var(--u) * 1.02);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud-tier[data-tier="5k"] { background: var(--tier-5k); color: var(--tier-5k-fg); }
.hud-tier[data-tier="10k"] { background: var(--tier-10k); color: var(--tier-10k-fg); }
.hud-tier[data-tier="50k"] { background: var(--tier-50k); color: var(--tier-50k-fg); }
.hud-tier[data-tier="100k"] { background: var(--tier-100k); color: var(--tier-100k-fg); }
.hud-tier[data-tier="1m"] { background: var(--tier-1m); color: var(--tier-1m-fg); }

.hud-pips {
  display: flex;
  gap: calc(var(--u) * .2);
  flex: none;
  margin-left: auto;
}
.hud-side[data-side="1"] .hud-pips { margin-left: 0; margin-right: auto; }
.hud-pip {
  width: calc(var(--u) * 1.75);
  height: calc(var(--u) * 1.6);
  overflow: visible;
  fill: var(--card-solid);
  stroke: var(--foreground);
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 calc(var(--u) * .14) 0 var(--foreground));
}
.hud-pip.is-won { fill: var(--pcol); }

/* health bar: white sticker rim, dark track, lemon/pink damage trail, striped fill */
.hud-health {
  width: 100%;
  height: calc(var(--u) * 2.15);
  padding: max(1.5px, calc(var(--u) * .17));
  border: var(--line) solid var(--foreground);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: 0 calc(var(--u) * .3) 0 var(--foreground);
}
.hud-track {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 84%, var(--pcol));
  box-shadow: inset 0 calc(var(--u) * .22) 0 oklch(0% 0 0 / .25);
}
.hud-trail,
.hud-fill {
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%; /* P1 drains toward the timer */
  will-change: transform;
}
.hud-side[data-side="1"] .hud-trail,
.hud-side[data-side="1"] .hud-fill { transform-origin: 0 50%; }
.hud-trail { background: var(--lemon-soft); transition: background-color .25s; }
.hud-trail[data-mode="hot"] { background: oklch(97% .08 98); }
.hud-trail[data-mode="drain"] { background: var(--rose-soft); }
.hud-fill { overflow: hidden; }
.hud-fill-paint {
  position: absolute;
  inset: 0;
  transform-origin: inherit;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / .5) 0 24%, transparent 24% 70%, oklch(0% 0 0 / .12) 70%),
    repeating-linear-gradient(135deg, oklch(100% 0 0 / .2) 0 calc(var(--u) * .9), transparent calc(var(--u) * .9) calc(var(--u) * 1.8)),
    var(--pcol);
}
.hud-health.is-low .hud-fill-paint { animation: hud-low .5s steps(1, end) infinite; }
.hud-health.is-low { animation: hud-low-rim .5s steps(1, end) infinite; }
@keyframes hud-low { 50% { filter: brightness(1.45) saturate(1.2); } }
@keyframes hud-low-rim { 50% { background: var(--lemon-soft); } }

/* super meter: thinner, sits on the timer side, candy rainbow when full */
.hud-meter {
  position: relative;
  width: 74%;
  height: calc(var(--u) * 1.15);
  margin-left: auto;
  margin-top: calc(var(--u) * .1);
  padding: max(1px, calc(var(--u) * .12));
  border: max(1.5px, calc(var(--u) * .2)) solid var(--foreground);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: 0 calc(var(--u) * .22) 0 var(--foreground);
}
.hud-side[data-side="1"] .hud-meter { margin-left: 0; margin-right: auto; }
.hud-meter-track {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 84%, var(--lemon-soft));
}
.hud-meter-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 100% 50%;
  will-change: transform;
}
.hud-side[data-side="1"] .hud-meter-fill { transform-origin: 0 50%; }
.hud-meter-paint {
  position: absolute;
  inset: 0;
  transform-origin: inherit;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / .45) 0 30%, transparent 30%),
    repeating-linear-gradient(135deg, oklch(100% 0 0 / .3) 0 calc(var(--u) * .6), transparent calc(var(--u) * .6) calc(var(--u) * 1.2)),
    linear-gradient(90deg, var(--mint-soft), var(--lemon-soft));
}
.hud-side[data-side="1"] .hud-meter-paint {
  background:
    linear-gradient(180deg, oklch(100% 0 0 / .45) 0 30%, transparent 30%),
    repeating-linear-gradient(135deg, oklch(100% 0 0 / .3) 0 calc(var(--u) * .6), transparent calc(var(--u) * .6) calc(var(--u) * 1.2)),
    linear-gradient(90deg, var(--lemon-soft), var(--mint-soft));
}
.hud-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at);
  width: max(1px, calc(var(--u) * .12));
  background: color-mix(in oklab, var(--foreground) 55%, transparent);
}
.hud-meter.is-full {
  box-shadow: 0 calc(var(--u) * .22) 0 var(--foreground), 0 0 0 calc(var(--u) * .3) color-mix(in oklab, var(--pcol) 45%, transparent), 0 0 calc(var(--u) * 1.4) calc(var(--u) * .2) var(--pcol);
  animation: hud-meter-glow 1.1s ease-in-out infinite;
}
.hud-meter.is-full .hud-meter-paint {
  background:
    linear-gradient(180deg, oklch(100% 0 0 / .45) 0 30%, transparent 30%),
    linear-gradient(90deg, var(--pink-soft), var(--lemon-soft), var(--mint-soft), var(--sky-soft), var(--violet-soft), var(--pink-soft)) 0 0 / 300% 100%;
  animation: hud-candy-flow 2.4s linear infinite;
}
.hud-meter.is-full .hud-tick { opacity: 0; }
@keyframes hud-candy-flow { to { background-position: 0 0, 300% 0; } }
@keyframes hud-meter-glow {
  50% { box-shadow: 0 calc(var(--u) * .22) 0 var(--foreground), 0 0 0 calc(var(--u) * .5) color-mix(in oklab, var(--pcol) 25%, transparent), 0 0 calc(var(--u) * 2.2) calc(var(--u) * .5) var(--pcol); }
}
.hud-ready {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--u) * .5);
  translate: 0 -50%;
  padding: .14em .55em .12em;
  border: max(1.5px, calc(var(--u) * .16)) solid var(--foreground);
  border-radius: 999px;
  background: var(--lemon-soft);
  box-shadow: calc(var(--u) * .08) calc(var(--u) * .16) 0 var(--foreground);
  font-size: calc(var(--u) * .92);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
.hud-side[data-side="1"] .hud-ready { right: auto; left: calc(100% + var(--u) * .5); }
.hud-meter.is-full .hud-ready { opacity: 1; visibility: visible; rotate: -2deg; }

/* skill chip: the fighter's skill prop as a round sticker at the outer end of the meter row
   (the meter gives up a little width for it; SUPER READY still fits between them). While a
   buff runs, a ring around it counts down (--left: 1 -> 0, set by hud.js). */
.hud-info { position: relative; }
.hud-meter { width: 68%; }
.hud-skill {
  --skill: var(--primary);
  --left: 0;
  position: absolute;
  left: calc(var(--u) * -.55);
  bottom: calc(var(--u) * -.68);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.5);
  aspect-ratio: 1;
  border: max(1.5px, calc(var(--u) * .2)) solid var(--foreground);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, oklch(100% 0 0 / .9) 0 18%, transparent 19%),
    color-mix(in oklab, var(--skill) 34%, var(--card-solid));
  box-shadow: 0 calc(var(--u) * .2) 0 var(--foreground);
  transform-origin: 50% 60%;
}
.hud-side[data-side="1"] .hud-skill { left: auto; right: calc(var(--u) * -.55); }
.hud-skill-prop {
  position: relative;
  width: 84%;
  height: 84%;
  object-fit: contain;
  rotate: -8deg;
  filter: drop-shadow(0 max(1px, calc(var(--u) * .1)) 0 color-mix(in oklab, var(--foreground) 55%, transparent));
}
.hud-skill-ring {
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  overflow: visible;
  rotate: -90deg;
  opacity: 0;
  pointer-events: none;
}
.hud-skill-track { fill: none; stroke: var(--foreground); stroke-width: 6.5; }
.hud-skill-arc {
  fill: none;
  stroke: var(--card-solid);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--left) * 100);
}
.hud-skill[data-kind="power"] .hud-skill-arc { stroke: var(--gold-soft); }
.hud-skill[data-kind="speed"] .hud-skill-arc { stroke: var(--sky-soft); }
.hud-skill[data-kind="armor"] .hud-skill-arc { stroke: var(--violet-soft); }
.hud-skill[data-kind="regen"] .hud-skill-arc { stroke: var(--mint-soft); }
.hud-skill.is-buffed .hud-skill-ring { opacity: 1; }
.hud-skill.is-buffed { animation: hud-skill-glow 1.1s ease-in-out infinite; }
.hud-skill.is-ending .hud-skill-ring { animation: hud-skill-blink .36s steps(1, end) infinite; }
/* S would do nothing yet (their shot / minion / rain is still out): greyed, back in colour
   (with a pop from hud.js) the moment it works again */
.hud-skill.is-waiting { background: var(--muted); box-shadow: 0 calc(var(--u) * .12) 0 var(--foreground); translate: 0 calc(var(--u) * .08); }
.hud-skill.is-waiting .hud-skill-prop { filter: grayscale(1) opacity(.5); }
/* stuck in a 'stick' trap's goo: the portrait drips */
.hud-face.is-slowed::after {
  content: "";
  position: absolute;
  left: -9%;
  right: -9%;
  bottom: -14%;
  height: 34%;
  border: max(1.5px, calc(var(--u) * .2)) solid var(--foreground);
  border-radius: 45% 55% 40% 60% / 60% 55% 45% 40%;
  background: radial-gradient(circle at 28% 34%, oklch(100% 0 0 / .7) 0 11%, transparent 12%), var(--lime-soft);
  box-shadow: 0 calc(var(--u) * .2) 0 var(--foreground);
  pointer-events: none;
}
@keyframes hud-skill-glow {
  50% { box-shadow: 0 calc(var(--u) * .2) 0 var(--foreground), 0 0 calc(var(--u) * 1.2) calc(var(--u) * .3) color-mix(in oklab, var(--skill) 70%, transparent); }
}
@keyframes hud-skill-blink { 50% { opacity: .35; } }

/* ---------- timer rosette ----------------------------------------------------------- */

.hud-timer {
  position: relative;
  width: calc(var(--u) * 7.6);
  aspect-ratio: 100 / 124;
  margin-top: calc(var(--u) * -.7);
}
.hud-rosette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hud-rosette-shadow { fill: var(--foreground); }
.hud-rosette-body { fill: var(--lemon-soft); stroke: var(--foreground); stroke-width: 3.4; stroke-linejoin: round; }
.hud-rosette-ring { fill: var(--card-solid); stroke: var(--foreground); stroke-width: 2.8; }
.hud-tail { stroke: var(--foreground); stroke-width: 3.2; stroke-linejoin: round; }
.hud-tail--p1 { fill: var(--p1); }
.hud-tail--p2 { fill: var(--p2); }
.hud-time {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% * 100 / 124);
  display: grid;
  place-items: center;
  padding-top: calc(var(--u) * .1);
  font-size: calc(var(--u) * 2.9);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.hud-timer.is-low .hud-rosette-ring { fill: var(--pink-soft); }
.hud-timer.is-low .hud-rosette-body { fill: var(--rose-soft); }
.hud-timer.is-low .hud-time { color: var(--primary-border); }

/* ---------- combo counter --------------------------------------------------------- */

.hud-combo {
  --tilt: -5deg;
  --pcol: var(--p1);
  position: absolute;
  top: calc(var(--u) * 10.8);
  left: calc(var(--u) * 2);
  display: flex;
  align-items: center;
  font-size: calc(var(--u) * 1.5);
  line-height: 1;
  opacity: 0;
  transform: scale(.6) rotate(var(--tilt));
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.hud-combo[data-side="1"] { --tilt: 5deg; --pcol: var(--p2); left: auto; right: calc(var(--u) * 2); }
.hud-combo.is-on { opacity: 1; transform: rotate(var(--tilt)); }
/* a big outlined numeral breaking out of a lemon "HIT ✦" sticker */
.hud-combo-n {
  position: relative;
  z-index: 1;
  margin-right: -.18em;
  color: #fff;
  font-size: 2.7em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  -webkit-text-stroke: .2em var(--foreground);
  paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--foreground), 0 .11em 0 var(--pcol), 0 .14em 0 var(--foreground);
}
.hud-combo-label {
  padding: .16em .7em .16em .55em;
  border: var(--line) solid var(--foreground);
  border-radius: 999px;
  background: var(--lemon-soft);
  box-shadow: 0 calc(var(--u) * .28) 0 var(--foreground), 0 0 0 calc(var(--u) * .3) color-mix(in oklab, var(--pcol) 35%, transparent);
  letter-spacing: .04em;
}
.hud-combo-label i { font-style: normal; color: var(--pcol); }

/* ---------- announcer ------------------------------------------------------------- */

.hud-announce {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}
.hud-call {
  --band: var(--pink-soft);
  --shade: var(--primary);
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  translate: 0 -3cqh;
}
.hud-call[data-side="0"] { --shade: var(--p1); --band: var(--pink-soft); }
.hud-call[data-side="1"] { --shade: var(--p2); --band: var(--sky-soft); }
.hud-call--round { --band: var(--sky-soft); --shade: var(--p2); }
.hud-call--fight { --band: var(--pink-soft); --shade: var(--primary); }
.hud-call--ko { --band: var(--lemon-soft); --shade: var(--primary); }
.hud-call--perfect { --band: var(--mint-soft); --shade: oklch(62% .15 160); }
.hud-call--timeover { --band: var(--peach-soft); --shade: oklch(66% .15 45); }
.hud-call--draw { --band: var(--lavender-soft); --shade: oklch(60% .14 285); }

.hud-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--u) * 10.5);
  margin-top: calc(var(--u) * -5.25);
  border-block: max(3px, calc(var(--u) * .35)) solid var(--foreground);
  background: repeating-linear-gradient(135deg, var(--band) 0 calc(var(--u) * 1.5), var(--card-solid) calc(var(--u) * 1.5) calc(var(--u) * 3));
  box-shadow: 0 calc(var(--u) * .5) 0 color-mix(in oklab, var(--foreground) 30%, transparent);
  opacity: .95;
}
.hud-call--super { translate: 0 -24cqh; }
.hud-call--super .hud-band {
  height: calc(var(--u) * 7.5);
  margin-top: calc(var(--u) * -3.75);
  background: linear-gradient(90deg, var(--pink-soft), var(--lemon-soft), var(--mint-soft), var(--sky-soft), var(--violet-soft), var(--pink-soft)) 0 0 / 300% 100%;
  animation: hud-band-flow 3s linear infinite;
}
@keyframes hud-band-flow { to { background-position: 300% 0; } }

.hud-words {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hud-word {
  display: block;
  padding: 0 .1em;
  color: #fff;
  font-size: min(calc(var(--u) * 10), calc(var(--u) * 150 / var(--len, 6)));
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.05;
  white-space: nowrap;
  -webkit-text-stroke: .17em var(--foreground);
  paint-order: stroke fill;
  text-shadow:
    0 .07em 0 var(--foreground),
    0 .13em 0 var(--shade),
    0 .17em 0 var(--foreground);
}
.hud-call--fight .hud-word { font-size: min(calc(var(--u) * 12.5), calc(var(--u) * 150 / var(--len, 6))); }
.hud-call--super .hud-word { font-size: min(calc(var(--u) * 6.4), calc(var(--u) * 110 / var(--len, 6))); }
.hud-kicker {
  margin-bottom: .2em;
  padding: .1em .65em .14em;
  border: max(2px, calc(var(--u) * .3)) solid var(--foreground);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: 0 .14em 0 var(--foreground);
  font-size: calc(var(--u) * 2.6);
  white-space: nowrap;
  rotate: -3deg;
}
.hud-spark {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  translate: 0;
  color: var(--lemon-soft);
  font-size: calc(var(--u) * 3.4);
  font-style: normal;
  line-height: 1;
  text-shadow: calc(var(--u) * .12) calc(var(--u) * .2) 0 var(--foreground);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.hud-spark:nth-of-type(2n) { color: var(--primary); }
.hud-spark:nth-of-type(3n) { color: var(--mint-soft); }

/* ---------- pause overlay ------------------------------------------------------------ */

.fight-pause {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in oklab, var(--foreground) 45%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: pause-fade .18s ease-out both;
}
.fight-pause[hidden] { display: none; }
.pause-card {
  position: relative;
  width: min(100%, 380px);
  max-height: calc(100dvh - 32px);
  border: 4px solid var(--foreground);
  border-radius: 22px;
  background: var(--card-solid);
  color: var(--foreground);
  box-shadow: 0 6px 0 var(--primary-border), 0 14px 28px color-mix(in oklab, var(--primary) 24%, transparent);
  text-align: center;
  animation: pause-pop .28s cubic-bezier(.2, 1.4, .35, 1) both;
}
.pause-head {
  padding: 14px 18px 12px;
  border-bottom: 3px solid var(--foreground);
  border-radius: 18px 18px 0 0;
  background: repeating-linear-gradient(135deg, var(--pink-soft) 0 18px, var(--card-solid) 18px 36px);
}
.pause-title {
  display: inline-block;
  margin: 0;
  padding: 4px 18px 6px;
  border: 3px solid var(--foreground);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: 0 4px 0 var(--foreground);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  rotate: -2deg;
}
.pause-title span { color: var(--primary); }
.pause-body {
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y; /* the one thing on this screen a finger may scroll */
  padding: 16px 20px 18px;
}
.pause-actions { display: grid; gap: 12px; }
.pause-actions .btn { width: 100%; }
.pause-hint {
  margin: 14px 0 0;
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
}
.pause-hint kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 .35em;
  border: 1.5px solid var(--foreground);
  border-radius: 6px;
  background: var(--muted);
  color: var(--foreground);
  box-shadow: 0 2px 0 var(--foreground);
  font: 700 11px/1.5 var(--font-display);
}
.pause-card .family-corner { width: 30px; height: 30px; font-size: 1.1rem; }
.pause-card .family-corner-tl { top: -15px; left: -15px; }
.pause-card .family-corner-tr { top: -15px; right: -15px; }
@keyframes pause-fade { from { opacity: 0; } }
@keyframes pause-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }

/* ---------- touch pad (js/input.js setTouchLayer) ------------------------------------- */

.touch-pad {
  --tp-stick: clamp(112px, 30vmin, 150px); /* the stick's ring */
  --tp-btn: clamp(56px, 15vmin, 72px);     /* P K S: never under 56 px */
  --tp-edge: 14px;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* fight-screen.js decides (a coarse pointer, or a finger has touched the page) */
.fight-root[data-pad="1"] > .touch-pad { display: block; }

/* the stick's zone: wherever a thumb lands in it becomes the stick's centre */
.tp-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 72%;
  pointer-events: auto;
  touch-action: none;
}
.tp-stick {
  position: absolute;
  left: calc(max(var(--tp-edge), env(safe-area-inset-left)) + 8px);
  bottom: calc(max(var(--tp-edge), env(safe-area-inset-bottom)) + 6px);
  width: var(--tp-stick);
  aspect-ratio: 1;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, color-mix(in oklab, var(--card-solid) 40%, transparent) 35%),
    color-mix(in oklab, var(--card-solid) 62%, transparent);
  box-shadow: 0 5px 0 var(--foreground), inset 0 0 0 5px color-mix(in oklab, var(--pink-soft) 70%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
  /* JS moves it (translate) to where the thumb lands; it glides home on release */
  transition: translate .18s cubic-bezier(.2, 1.3, .4, 1), opacity .15s;
}
.tp-zone.is-down .tp-stick { transition: none; }
.tp-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--tp-stick) * .085) solid transparent;
  border-bottom: calc(var(--tp-stick) * .11) solid color-mix(in oklab, var(--foreground) 75%, transparent);
  border-top-width: 0;
  transform-origin: 50% 0;
  transition: border-bottom-color .08s;
}
/* each arrow sits on the ring, pointing outward */
.tp-arrow--up { transform: translate(-50%, calc(var(--tp-stick) * -.42)); }
.tp-arrow--down { transform: translate(-50%, calc(var(--tp-stick) * .42)) rotate(180deg); }
.tp-arrow--left { transform: translate(calc(-50% - var(--tp-stick) * .36), calc(var(--tp-stick) * -.055)) rotate(-90deg); }
.tp-arrow--right { transform: translate(calc(-50% + var(--tp-stick) * .36), calc(var(--tp-stick) * -.055)) rotate(90deg); }
.tp-stick[data-dir~="up"] .tp-arrow--up,
.tp-stick[data-dir~="down"] .tp-arrow--down,
.tp-stick[data-dir~="left"] .tp-arrow--left,
.tp-stick[data-dir~="right"] .tp-arrow--right { border-bottom-color: var(--primary); }
.tp-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, oklch(100% 0 0 / .8) 0 14%, transparent 15%), var(--lemon-soft);
  box-shadow: 0 4px 0 var(--foreground);
  pointer-events: none;
}
.tp-zone.is-down .tp-knob { background: radial-gradient(circle at 38% 32%, oklch(100% 0 0 / .8) 0 14%, transparent 15%), var(--pink-soft); }

/* P K S on an arc around the right thumb, TOSS above-left, SUPER on top when it is ready */
.tp-buttons {
  position: absolute;
  right: max(var(--tp-edge), env(safe-area-inset-right));
  bottom: max(var(--tp-edge), env(safe-area-inset-bottom));
  width: calc(var(--tp-btn) * 3);
  height: calc(var(--tp-btn) * 2.9);
  pointer-events: none;
  touch-action: none;
}
.tp-btn,
.tp-pause,
.fight-fs {
  position: absolute;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  padding: 0;
  border: 3px solid var(--foreground);
  border-radius: 50%;
  color: var(--foreground);
  box-shadow: 0 5px 0 var(--foreground);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s, box-shadow .06s;
}
.tp-btn {
  width: var(--tp-btn);
  height: var(--tp-btn);
  background: radial-gradient(circle at 36% 30%, oklch(100% 0 0 / .75) 0 12%, transparent 13%), var(--c, var(--card-solid));
}
/* a slightly bigger target than the drawn circle */
.tp-btn::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.tp-btn b { font-size: calc(var(--tp-btn) * .4); font-weight: 700; }
.tp-btn small {
  margin-top: .18em;
  font-size: max(8.5px, calc(var(--tp-btn) * .135));
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .78;
}
.tp-btn--p { --c: var(--pink-soft); left: 0; bottom: calc(var(--tp-btn) * .1); }
.tp-btn--k { --c: var(--sky-soft); left: calc(var(--tp-btn) * 1.02); bottom: calc(var(--tp-btn) * .52); }
.tp-btn--s { --c: var(--lemon-soft); left: calc(var(--tp-btn) * 2); bottom: calc(var(--tp-btn) * 1.28); }
.tp-btn--toss {
  --c: var(--mint-soft);
  --d: max(46px, calc(var(--tp-btn) * .74));
  left: calc(var(--tp-btn) * .71 - var(--d) / 2);
  bottom: calc(var(--tp-btn) * 1.73 - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-width: 2.5px;
  box-shadow: 0 4px 0 var(--foreground);
}
.tp-btn--toss b { font-size: max(10px, calc(var(--tp-btn) * .19)); letter-spacing: .04em; }
.tp-btn--super {
  left: calc(var(--tp-btn) * .45);
  bottom: calc(var(--tp-btn) * 2.24);
  width: auto;
  height: auto;
  padding: .5em 1em .55em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-soft), var(--lemon-soft), var(--mint-soft), var(--sky-soft), var(--violet-soft), var(--pink-soft)) 0 0 / 300% 100%;
  box-shadow: 0 5px 0 var(--foreground), 0 0 0 5px color-mix(in oklab, var(--primary) 35%, transparent);
  font-size: max(12px, calc(var(--tp-btn) * .24));
  letter-spacing: .05em;
  visibility: hidden;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .2s cubic-bezier(.2, 1.5, .35, 1), visibility 0s .2s;
}
.tp-btn--super b { font-size: inherit; }
.touch-pad[data-super="1"] .tp-btn--super {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .15s, transform .25s cubic-bezier(.2, 1.5, .35, 1);
  animation: hud-band-flow 3s linear infinite;
}
.tp-btn.is-down,
.tp-pause.is-down,
.fight-fs:active {
  transform: translateY(4px) scale(.95);
  box-shadow: 0 1px 0 var(--foreground);
  filter: brightness(1.06) saturate(1.2);
}
.touch-pad[data-super="1"] .tp-btn--super.is-down { transform: translateY(4px) scale(.95); }

/* pause (and, beside it, full screen): the corner of the stage, far from both thumbs */
.tp-sys {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  pointer-events: none;
}
.tp-pause,
.fight-fs {
  position: relative;
  width: 44px;
  height: 44px;
  border-width: 2.5px;
  background: var(--card-solid);
  box-shadow: 0 3px 0 var(--foreground);
}
.tp-pause svg { width: 13px; height: 15px; fill: var(--foreground); }
.fight-fs { display: none; position: absolute; z-index: 7; }
.fight-fs svg { width: 18px; height: 18px; fill: none; stroke: var(--foreground); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fight-root[data-fs="1"] .fight-fs { display: grid; }
.fight-fs[aria-pressed="true"] { background: var(--lemon-soft); }

/* ---------- little notes over the stage: "tap to pause", "turn sideways" ---------------- */

.fight-tips {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  width: max-content;
  max-width: calc(100% - 16px);
  translate: -50% 0;
  pointer-events: none;
}
.fight-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 4px 4px 4px 12px;
  border: 2px solid var(--foreground);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card-solid) 90%, transparent);
  box-shadow: 0 3px 0 var(--foreground);
  color: var(--foreground);
  font: 700 12.5px/1.15 var(--font-display);
  white-space: nowrap;
  pointer-events: auto;
}
.fight-tip[hidden] { display: none; }
.fight-tip--watch { padding-right: 12px; opacity: .88; pointer-events: none; }
.fight-tip-x {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -2px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--muted);
  color: var(--foreground);
  font: 700 14px/1 var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
}
/* a thumb-sized target around the small drawn circle */
.fight-tip-x::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.fight-tips .fight-fs { position: relative; display: none; width: 36px; height: 36px; }
.fight-root[data-fs="1"] .fight-tips .fight-fs { display: grid; }
.fight-root.is-paused .fight-tips { visibility: hidden; }

/* ---------- layout: tall (portrait) --------------------------------------------------- */

.fight-root[data-layout="tall"] {
  --frame: 3px;
  --side: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
  /* the HUD strip above the stage: ~8.3 of its units tall */
  --bar: min(calc((100vw - 2 * var(--side) - 12px) * .215), 110px);
  --stage-top: calc(max(6px, env(safe-area-inset-top)) + var(--bar) + 12px);
  --pad-h: 0px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: var(--stage-top) var(--side) calc(max(8px, env(safe-area-inset-bottom)) + var(--pad-h));
}
/* the thumb area under the stage */
.fight-root[data-layout="tall"][data-pad="1"] { --pad-h: clamp(196px, 28dvh, 300px); }
.fight-root[data-layout="tall"] .fight-stage {
  flex: 1 1 0;
  width: auto;
  min-height: 140px;
  /* with no pad (watch) it could get very tall: past ~5:8 it would only add sky */
  max-height: calc((100vw - 2 * var(--side)) * 1.6);
  aspect-ratio: auto;
  margin: 0 3px 8px;
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--lemon-soft), 0 0 0 6px var(--foreground), 0 9px 0 -1px var(--primary);
}
.fight-root[data-layout="tall"] .fight-stage::before,
.fight-root[data-layout="tall"] .fight-stage::after { display: none; }

/* HUD strip: sits above the stage box, sized to the stage's width */
.fight-root[data-layout="tall"] .hud::before { display: none; }
.fight-root[data-layout="tall"] .hud-top {
  --u: min(2.55cqw, 12.5px);
  --line: 2px;
  top: auto;
  bottom: calc(100% + var(--frame) + 13px);
  left: -6px;
  right: -6px;
  gap: calc(var(--u) * .6);
}
.fight-root[data-layout="tall"] .hud-face { width: calc(var(--u) * 5.7); }
.fight-root[data-layout="tall"] .hud-timer { width: calc(var(--u) * 7.1); margin-top: calc(var(--u) * -.6); }
.fight-root[data-layout="tall"] .hud-time { font-size: calc(var(--u) * 2.9); }
/* no room for name + tier + hearts on one line: name on top, hearts beside the meter */
.fight-root[data-layout="tall"] .hud-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name name" "health health" "meter pips";
  align-items: center;
  gap: calc(var(--u) * .55) calc(var(--u) * .4);
}
.fight-root[data-layout="tall"] .hud-side[data-side="1"] .hud-info {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "name name" "health health" "pips meter";
}
/* the skill chip sits on the portrait's free top corner (the outer one: the featured mark
   has the inner one). 6.7u = the portrait (5.7u) + the side's gap (1u). */
.fight-root[data-layout="tall"] .hud-skill { top: calc(var(--u) * -.75); bottom: auto; left: calc(var(--u) * -7.35); width: calc(var(--u) * 2.4); }
.fight-root[data-layout="tall"] .hud-side[data-side="1"] .hud-skill { left: auto; right: calc(var(--u) * -7.35); }
.fight-root[data-layout="tall"] .hud-row { display: contents; }
.fight-root[data-layout="tall"] .hud-name { grid-area: name; justify-self: start; max-width: 100%; font-size: max(12px, calc(var(--u) * 1.55)); }
.fight-root[data-layout="tall"] .hud-side[data-side="1"] .hud-name { justify-self: end; }
.fight-root[data-layout="tall"] .hud-tier { display: none; }
.fight-root[data-layout="tall"] .hud-pips { grid-area: pips; margin: 0; }
.fight-root[data-layout="tall"] .hud-pip { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.46); }
.fight-root[data-layout="tall"] .hud-health { grid-area: health; height: calc(var(--u) * 2.1); }
.fight-root[data-layout="tall"] .hud-meter { grid-area: meter; width: 100%; height: calc(var(--u) * 1.25); margin: 0; }
.fight-root[data-layout="tall"] .hud-ready { display: none; }
.fight-root[data-layout="tall"] .hud-combo { --u: 2.6cqw; top: calc(var(--u) * 1.2); }
/* pause (and full screen) sit in the stage's top-right corner: the counters go under them */
.fight-root[data-layout="tall"][data-pad="1"] .hud-combo { top: 62px; }
/* the announcer sized to a narrow stage: as big as its width allows */
.fight-root[data-layout="tall"] .hud-band { height: 17cqw; margin-top: -8.5cqw; }
.fight-root[data-layout="tall"] .hud-word { font-size: min(15cqw, calc(140cqw / var(--len, 6))); }
.fight-root[data-layout="tall"] .hud-call--fight .hud-word { font-size: min(19cqw, calc(140cqw / var(--len, 6))); }
.fight-root[data-layout="tall"] .hud-call--super .hud-word { font-size: min(10cqw, calc(110cqw / var(--len, 6))); }
.fight-root[data-layout="tall"] .hud-kicker { font-size: 4.4cqw; }

/* the pad: the stick in the left half of the thumb area, the buttons in the right half */
.fight-root[data-layout="tall"] > .touch-pad {
  --tp-stick: clamp(116px, 33vw, 156px);
  --tp-btn: clamp(58px, 16.4vw, 76px);
  --pad-bottom: max(8px, env(safe-area-inset-bottom));
}
.fight-root[data-layout="tall"] .tp-zone { width: 50%; height: calc(var(--pad-h) + var(--pad-bottom)); }
.fight-root[data-layout="tall"] .tp-stick {
  left: calc(50% - var(--tp-stick) / 2 - 3px);
  bottom: calc(var(--pad-bottom) + (var(--pad-h) - var(--tp-stick)) / 2);
}
.fight-root[data-layout="tall"] .tp-buttons {
  right: var(--side);
  bottom: calc(var(--pad-bottom) + (var(--pad-h) - var(--tp-btn) * 2.9) * .45);
}
.fight-root[data-layout="tall"] .tp-sys {
  top: calc(var(--stage-top) + var(--frame) + 8px);
  right: calc(var(--side) + 3px + var(--frame) + 8px);
}
.fight-root[data-layout="tall"] > .fight-fs {
  top: calc(var(--stage-top) + var(--frame) + 8px);
  right: calc(var(--side) + 3px + var(--frame) + 8px + 44px + 8px);
}

/* ---------- layout: full (a phone on its side) ---------------------------------------------- */

.fight-root[data-layout="full"] { display: block; padding: 0; }
.fight-root[data-layout="full"] .fight-stage {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fight-root[data-layout="full"] .fight-stage::before,
.fight-root[data-layout="full"] .fight-stage::after { display: none; }
.fight-root[data-layout="full"] .fight-canvas { border-radius: 0; }
.fight-root[data-layout="full"] .hud::before { border-radius: 0; height: 24%; }

/* a compact HUD across the top; its units follow the screen's height too, so a short
   screen gets a short strip. Both top corners stay free for pause / full screen. */
.fight-root[data-layout="full"] .hud-top {
  --u: min(.98cqw, 1.95cqh);
  --line: max(1.5px, calc(var(--u) * .26));
  --corner: 0px;
  top: max(6px, env(safe-area-inset-top));
  left: calc(max(10px, env(safe-area-inset-left)) + var(--corner));
  right: calc(max(10px, env(safe-area-inset-right)) + var(--corner));
}
.fight-root[data-layout="full"][data-pad="1"] .hud-top { --corner: 54px; }
.fight-root[data-layout="full"] .hud-face { width: calc(var(--u) * 5.4); }
.fight-root[data-layout="full"] .hud-timer { width: calc(var(--u) * 6.7); margin-top: calc(var(--u) * -.5); }
.fight-root[data-layout="full"] .hud-name { font-size: max(11px, calc(var(--u) * 1.5)); }
.fight-root[data-layout="full"] .hud-tier { font-size: max(9px, calc(var(--u) * 1.02)); }
.fight-root[data-layout="full"] .hud-combo { --u: min(1.1cqw, 2.2cqh); top: calc(var(--u) * 9.4); }

.fight-root[data-layout="full"] > .touch-pad {
  --tp-stick: clamp(104px, 29vh, 138px);
  --tp-btn: clamp(56px, 15vh, 68px);
}
/* the zone: the left side under the HUD */
.fight-root[data-layout="full"] .tp-zone { top: 24%; width: 45%; height: auto; }
/* see-through until pressed, so the fight shows through the corners */
.fight-root[data-layout="full"] .tp-stick { opacity: .8; }
.fight-root[data-layout="full"] .tp-zone.is-down .tp-stick { opacity: 1; }
.fight-root[data-layout="full"] .tp-btn { opacity: .84; }
.fight-root[data-layout="full"] .tp-btn.is-down { opacity: 1; }
.fight-root[data-layout="full"] .tp-sys { top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
.fight-root[data-layout="full"] > .fight-fs { top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }

/* ---------- small screens ------------------------------------------------------------------ */

/* short screens (phones on their side): the pause card has to fit ~375px of height: two
   columns of buttons, a slimmer head */
@media (max-height: 520px) {
  .pause-head { padding: 8px 14px 7px; }
  .pause-title { font-size: 20px; padding: 2px 14px 4px; }
  .pause-body { padding: 10px 14px 12px; max-height: calc(100dvh - 90px); }
  .pause-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pause-actions .btn { min-height: 40px; padding-block: 6px; }
  .pause-actions .btn-candy,
  .pause-actions .btn:nth-child(even):last-child { grid-column: 1 / -1; }
  .pause-hint { margin-top: 10px; font-size: 11.5px; }
  .pause-card { width: min(100%, 460px); }
}

/* ---------- reduced motion: gameplay stays, decoration stops ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hud-featured,
  .hud-skill,
  .hud-skill-ring,
  .hud-meter.is-full,
  .hud-meter.is-full .hud-meter-paint,
  .hud-health.is-low,
  .hud-health.is-low .hud-fill-paint,
  .hud-call--super .hud-band,
  .touch-pad[data-super="1"] .tp-btn--super,
  .fight-pause,
  .pause-card { animation: none !important; }
  .hud-combo, .tp-btn, .tp-btn--super, .tp-stick, .hud-trail { transition: none; }
  .hud-health.is-low { background: var(--lemon-soft); }
}