:root {
  --ink: #08080a;
  --paper: #f4efe6;
  --muted: rgba(244, 239, 230, 0.62);
  --dim: rgba(244, 239, 230, 0.56); /* ~4.6:1 on the dark background */
  --faint: rgba(244, 239, 230, 0.14);
  --red: #e3262f;
  --red-hi: #ff5a5f;
  --blue: #2463ff;
  --blue-hi: #6b95ff;
  --gold: #f5c542;
  --gold-hi: #ffe39a;

  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --top: 64px;
  --seam: 3.2vw;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* The server-written text summary (index.html): kept in the page for search engines, but
   visually hidden; the app shows the same things. Shown as the whole page without JavaScript. */
.summary {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.summary a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Splash ─────────────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(227, 38, 47, 0.22), transparent 70%),
    var(--ink);
  cursor: pointer;
}
.splash__title {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--display); text-transform: uppercase; line-height: 0.84;
  text-align: center;
}
.splash__word {
  font-size: clamp(4.5rem, 15vw, 12.5rem);
  opacity: 0;
  text-shadow: 0 10px 0 rgba(0, 0, 0, 0.5);
}
.splash__word--hot {
  background: linear-gradient(180deg, #ff7a6e 0%, var(--red) 55%, #8f0f15 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 40px rgba(227, 38, 47, 0.55));
}
.splash__sub {
  margin-top: 0.7em;
  font-family: var(--cond); font-weight: 800;
  font-size: clamp(0.95rem, 1.9vw, 1.5rem); letter-spacing: 0.55em;
  color: var(--gold); opacity: 0;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 2.2vw, 32px);
  background: linear-gradient(rgba(8, 8, 10, 0.85), rgba(8, 8, 10, 0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.logo { display: flex; align-items: baseline; gap: 0.7em; color: var(--paper); text-decoration: none; }
.logo__main { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.logo__sub { font-family: var(--cond); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.boutno {
  font-family: var(--cond); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.boutno b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--paper); margin-left: 0.2em; }
/* Fights called out of every pairing, under the bout number */
.progress { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.progress__bar { flex: 1; min-width: 64px; height: 3px; border-radius: 2px; background: var(--faint); overflow: hidden; }
.progress__bar i {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--gold), var(--gold-hi)); border-radius: inherit;
  transition: width 0.6s var(--ease-out);
}
/* One fight out of hundreds would be under a pixel: show a sliver as soon as there's any */
.progress:not([aria-valuenow="0"]) .progress__bar i { min-width: 3px; }
.progress__count { font-size: 0.62rem; letter-spacing: 0.08em; color: var(--dim); white-space: nowrap; }
.sound {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--faint);
  transition: border-color 0.2s, background 0.2s;
}
.sound:hover { border-color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.sound svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound__cone { fill: currentColor; }
.sound[aria-pressed="true"] .sound__x, .sound[aria-pressed="false"] .sound__wave { display: none; }
.sound[aria-pressed="false"] { color: var(--dim); }

/* ── Stage ──────────────────────────────────────────────────────────── */
.stage {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1fr 0 1fr;
  transition: grid-template-columns 0.7s var(--ease-out);
  --mx: 0; --my: 0;
}
body[data-pick="left"] .stage { grid-template-columns: 1.1fr 0 0.9fr; }
body[data-pick="right"] .stage { grid-template-columns: 0.9fr 0 1.1fr; }
body:is([data-phase="pick"], [data-phase="method"]) .stage[data-hover="left"] { grid-template-columns: 1.1fr 0 0.9fr; }
body:is([data-phase="pick"], [data-phase="method"]) .stage[data-hover="right"] { grid-template-columns: 0.9fr 0 1.1fr; }

.corner {
  position: relative; min-width: 0; overflow: hidden; isolation: isolate;
  grid-row: 1;
}
.corner--red {
  grid-column: 1;
  margin-right: calc(var(--seam) * -1);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--seam) * 2) 100%, 0 100%);
}
.corner--blue {
  grid-column: 3;
  margin-left: calc(var(--seam) * -1);
  clip-path: polygon(calc(var(--seam) * 2 + 6px) 0, 100% 0, 100% 100%, 6px 100%);
}

/* backgrounds */
.corner__bg { position: absolute; inset: 0; z-index: -1; transition: filter 0.6s var(--ease-out); }
.corner--red .corner__bg {
  background:
    radial-gradient(70% 55% at 30% 42%, rgba(255, 70, 70, 0.28), transparent 70%),
    radial-gradient(130% 100% at 0% 0%, #7d0e14 0%, #2c0507 48%, #0b0203 100%);
}
.corner--blue .corner__bg {
  background:
    radial-gradient(70% 55% at 70% 42%, rgba(80, 130, 255, 0.28), transparent 70%),
    radial-gradient(130% 100% at 100% 0%, #10338f 0%, #07153d 48%, #02050f 100%);
}
.corner__bg::before { /* halftone */
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.5px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 65%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 65%);
}
.corner__bg::after { /* light sweep */
  content: ''; position: absolute; inset: -20% -60%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%);
  transform: translateX(-70%);
}
.corner__mark {
  position: absolute; bottom: -0.2em;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(14rem, 36vw, 36rem); line-height: 0.8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.06);
  translate: calc(var(--mx) * -26px) calc(var(--my) * -14px);
  transition: -webkit-text-stroke-color 0.5s, translate 0.25s linear;
  user-select: none;
}
.corner--red .corner__mark { left: -0.06em; }
.corner--blue .corner__mark { right: -0.02em; }

/* portrait: sits on the inner side, facing the other corner */
.portrait {
  position: absolute; bottom: 0; top: calc(var(--top) * 0.6);
  width: 56%;
  pointer-events: none;
  translate: calc(var(--mx) * 14px) calc(var(--my) * 6px);
  transition: translate 0.25s linear, transform 0.9s var(--ease-out);
}
.corner--red .portrait { right: calc(var(--seam) * 1.1); }
.corner--blue .portrait { left: calc(var(--seam) * 1.1); }
.portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Tinted in the corner colour at rest; full colour when in play. Same filter list both ways so it animates. */
  transition: filter 0.7s var(--ease-out), opacity 0.6s;
}
.corner--red .portrait img { filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(2.4) contrast(1.12) brightness(0.72); }
.corner--blue .portrait img { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2) contrast(1.12) brightness(0.68); }
/* cartoon art is much lighter than photos: tint it darker so the copy over it stays readable */
.corner--red .portrait--art img { filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(2.4) contrast(1.12) brightness(0.56); }
.corner--blue .portrait--art img { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2) contrast(1.12) brightness(0.52); }
body:is([data-phase="pick"], [data-phase="method"]) .corner:hover .portrait img,
.corner.is-picked .portrait img,
.corner.is-winner .portrait img { filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) contrast(1.04) brightness(1); }

.portrait--photo img { object-fit: cover; object-position: 50% 12%; }
/* Same fade for photos and art: toward the text, the floor and the top edge */
.corner--red .portrait {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.corner--blue .portrait {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 38%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Cut-out game art is framed like a photo: zoomed so the head is the same size and
   height as a photographed face. --fx/--fy/--hh (face position, head height) and --ar
   (width / height) come from fighters.js. */
.portrait--art { container-type: size; overflow: hidden; --eye-y: 0.2; --head: 0.18; }
.portrait--art img {
  --k: calc(var(--head) / var(--hh)); /* image height, in box heights */
  inset: auto; width: auto; max-width: none;
  height: calc(var(--k) * 100cqh);
  left: calc(50cqw - var(--fx) * var(--ar) * var(--k) * 100cqh);
  top: calc(var(--eye-y) * 100cqh - var(--fy) * var(--k) * 100cqh);
}
/* Mirror anything facing away from the other corner */
.portrait--flip img { transform: scaleX(-1); }
.corner.is-winner .portrait { transform: scale(1.04); }
.corner--red.is-loser .portrait { transform: translateX(-5%) rotate(-3deg) scale(0.95); }
.corner--blue.is-loser .portrait { transform: translateX(5%) rotate(3deg) scale(0.95); }

.credit {
  position: absolute; z-index: 3; bottom: 10px;
  max-width: 44%;
  font-size: 0.62rem; line-height: 1.35; letter-spacing: 0.02em;
  color: var(--dim); text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}
.credit:hover { opacity: 1; color: var(--paper); text-decoration: underline; }
.corner--red .credit { left: clamp(20px, 4.5vw, 72px); }
.corner--blue .credit { right: clamp(20px, 4.5vw, 72px); text-align: right; }

/* content */
.corner__inner::before { /* darken the text side so copy stays legible over portraits */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, rgba(6, 3, 4, 0.55) 0%, rgba(6, 3, 4, 0.25) 45%, transparent 68%);
}
.corner--blue .corner__inner::before { background: linear-gradient(to left, rgba(2, 4, 12, 0.55) 0%, rgba(2, 4, 12, 0.25) 45%, transparent 68%); }
.corner__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--top) + 2vh) calc(var(--seam) * 2 + 3vw) 15vh clamp(20px, 4.5vw, 72px);
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease-out);
}
.corner--blue .corner__inner {
  padding: calc(var(--top) + 2vh) clamp(20px, 4.5vw, 72px) 15vh calc(var(--seam) * 2 + 3vw);
  align-items: flex-end; text-align: right;
}
.name {
  width: 100%;
  margin: 1.6vh 0 0.8vh;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: 0.86;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
  translate: calc(var(--mx) * 8px) calc(var(--my) * 5px);
  transition: translate 0.25s linear;
}
.name__first {
  display: block; margin-bottom: 0.12em;
  font-size: clamp(1.2rem, 2.3vw, 2.3rem); letter-spacing: 0.05em;
  color: var(--muted);
}
.name__last {
  display: block; width: max-content; white-space: nowrap;
  font-size: clamp(3.4rem, 8.4vw, 9rem);
  background: linear-gradient(180deg, #fff 0%, #f4efe6 55%, #bdb19d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: left 60%;
  transition: filter 0.4s;
}
.corner--blue .name__last { transform-origin: right 60%; margin-left: auto; }
.alias { font-family: var(--cond); font-weight: 600; font-style: italic; font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--gold); letter-spacing: 0.02em; }
.origin { margin-top: 0.4vh; font-family: var(--cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }

.tape {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 0 clamp(16px, 2.4vw, 40px);
  margin: 3vh 0 2.6vh;
}
.tape__row { position: relative; border-top: 2px solid var(--faint); padding-top: 0.8vh; }
.tape__row dt {
  font-family: var(--cond); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim);
}
.tape__row dd b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem); line-height: 1.1; white-space: nowrap;
}
.tape__row dd small { font-family: var(--cond); font-weight: 600; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.tape__row--div dd b {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(0.95rem, 1.25vw, 1.3rem); letter-spacing: 0.06em; line-height: 1.25;
  white-space: normal; max-width: 9em; margin-top: 0.35em;
}
.tape__row[data-adv] { border-top-color: var(--gold); }
.tape__row[data-adv] dt { color: var(--gold); }
.tape__row[data-adv] dt::after { content: ' ▲'; font-size: 0.8em; }
.est {
  display: inline-block; margin-left: 0.45em; padding: 0 0.35em;
  font-style: normal; font-family: var(--cond); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 2px;
  color: var(--dim); border: 1px solid var(--faint); border-radius: 3px;
  cursor: help;
}

.blurb {
  max-width: 30rem;
  font-size: clamp(0.9rem, 1.02vw, 1.04rem); line-height: 1.6;
  color: rgba(244, 239, 230, 0.8);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.origin, .tape, .blurb { transition: opacity 0.5s var(--ease-out); }
.alias, .origin, .tape { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }

/* click target */
.corner__hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.corner__hit:focus-visible { outline: 3px solid var(--gold); outline-offset: -8px; }
body:not([data-phase="pick"]):not([data-phase="method"]) .corner__hit { cursor: default; pointer-events: none; }

/* hover / pick / result states */
body:is([data-phase="pick"], [data-phase="method"]) .corner:hover .corner__bg::after { animation: sweep 1.1s var(--ease-out); }
body:is([data-phase="pick"], [data-phase="method"]) .corner:hover .corner__mark { -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); }
body:is([data-phase="pick"], [data-phase="method"]) .corner--red:hover .name__last { filter: drop-shadow(0 0 28px rgba(255, 80, 80, 0.55)); }
body:is([data-phase="pick"], [data-phase="method"]) .corner--blue:hover .name__last { filter: drop-shadow(0 0 28px rgba(90, 140, 255, 0.6)); }

body.is-idle[data-phase="pick"] .corner--red .corner__bg::after { animation: sweep 1.6s var(--ease-out) infinite 0s; animation-duration: 3.2s; }
body.is-idle[data-phase="pick"] .corner--blue .corner__bg::after { animation: sweep 3.2s var(--ease-out) infinite 1.6s; }

.corner.is-picked .corner__bg { filter: saturate(1.25) brightness(1.12); }
.corner.is-picked .corner__mark { -webkit-text-stroke-color: rgba(245, 197, 66, 0.22); }
.corner.is-picked::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 120px rgba(245, 197, 66, 0.18);
}
.corner.is-dimmed .corner__bg, .corner.is-dimmed .corner__inner { filter: grayscale(0.7) brightness(0.55); }
.corner.is-loser .corner__bg, .corner.is-loser .corner__inner { filter: grayscale(1) brightness(0.38); }

.corner.is-winner .corner__inner, .corner.is-loser .corner__inner { transform: translateY(-11vh); }
.corner.is-winner :is(.origin, .tape, .blurb), .corner.is-loser :is(.origin, .tape, .blurb) { opacity: 0; }

.stamp {
  position: absolute; z-index: 3; top: 27%; left: 50%;
  translate: -50% 0;
  transform: rotate(-9deg);
  padding: 0.2em 0.65em 0.3em;
  border: 5px solid var(--gold); outline: 2px solid var(--gold); outline-offset: 5px;
  font-family: var(--display); text-transform: uppercase; text-align: center;
  color: var(--gold);
  background: rgba(8, 8, 10, 0.35);
  box-shadow: 0 0 60px rgba(245, 197, 66, 0.35);
  opacity: 0; pointer-events: none;
}
.corner--blue .stamp { transform: rotate(8deg); }
.stamp b { display: block; font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 0.95; letter-spacing: 0.04em; }
.stamp span { display: block; font-family: var(--cond); font-weight: 800; font-size: clamp(0.85rem, 1.15vw, 1.15rem); letter-spacing: 0.34em; }
.corner.is-winner .stamp { opacity: 1; }

/* ── Center column ──────────────────────────────────────────────────── */
.center { grid-column: 2; grid-row: 1; position: relative; z-index: 5; pointer-events: none; }
.vs {
  position: absolute; left: 50%; top: 46%;
  translate: -50% -50%;
  display: flex; align-items: center;
  font-family: var(--display); font-size: clamp(4.2rem, 8.5vw, 8.5rem); line-height: 1;
  transition: opacity 0.5s var(--ease-out), scale 0.6s var(--ease-out);
}
.vs::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 1.55em; height: 1.55em; translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(8, 8, 10, 0.92) 55%, transparent 56%),
    conic-gradient(from 0deg, var(--red), var(--gold), var(--blue), var(--gold), var(--red));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 90px rgba(245, 197, 66, 0.2);
  animation: spin 6s linear infinite;
}
.vs span {
  display: block;
  background: linear-gradient(180deg, #fff8dc 0%, var(--gold) 50%, #a8740a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.7));
}
.vs__v { transform: translateY(-0.05em) skewX(-8deg); }
.vs__s { transform: translateY(0.05em) skewX(-8deg); margin-left: -0.02em; }
body:is([data-phase="impact"], [data-phase="result"], [data-phase="out"]) .vs { opacity: 0; scale: 0.6; }

/* Tale-of-the-tape silhouettes: height to scale, body width from weight-for-height */
.scale {
  position: absolute; left: 50%; bottom: 2.5vh;
  translate: -50% 0;
  width: clamp(220px, 21vw, 320px); height: auto;
  overflow: visible;
  transition: opacity 0.4s, transform 0.7s var(--ease-out);
}
.sil { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.9s cubic-bezier(.5, 0, .3, 1.3); }
.sil--red { fill: url(#silRed); }
.sil--blue { fill: url(#silBlue); }
.sil--red .sil__limb { stroke: url(#silRed); }
.sil--blue .sil__limb { stroke: url(#silBlue); }
.sil__limb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scale__ground { stroke: var(--faint); stroke-width: 1; }
.scale__label { font-family: var(--cond); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; fill: var(--muted); }
.scale__label tspan.adv { fill: var(--gold); }
body[data-phase="method"] .scale { transform: translateY(-118px); }
body:is([data-phase="intro"], [data-phase="result"], [data-phase="out"], [data-phase="splash"], [data-phase="boot"]) .scale { opacity: 0; }
body[data-phase="impact"] .scale { transform: translateY(-118px); }
body[data-phase="impact"] .scale .sil.is-down { transform: rotate(var(--fall)); }
/* DQ: the loser is sent out of the ring rather than knocked over */
.sil.is-out { transition: transform 0.9s var(--ease-out), opacity 0.9s; }
body[data-phase="impact"] .scale .sil.is-out { transform: translateX(var(--out)); opacity: 0.15; }

/* ── Finishes ───────────────────────────────────────────────────────── */
/* DQ: a referee's red card on the loser, where the winner's stamp sits */
.foul {
  position: absolute; z-index: 3; top: 22%; left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: 0.3em;
  width: clamp(120px, 11vw, 170px); aspect-ratio: 2 / 3;
  border-radius: 8px;
  background: linear-gradient(160deg, #ff3b44, #b3121a);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18) inset, 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 70px rgba(227, 38, 47, 0.45);
  color: #fff; text-align: center; text-transform: uppercase;
  pointer-events: none;
}
.foul b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: 0.9; letter-spacing: 0.02em; }
.foul span { font-family: var(--cond); font-weight: 800; font-size: clamp(0.66rem, 0.85vw, 0.82rem); letter-spacing: 0.26em; }

/* Decision: the three judges' scorecards */
.judges {
  position: fixed; left: 50%; bottom: 6vh; z-index: 16;
  transform: translateX(-50%);
  display: flex; gap: clamp(8px, 1.2vw, 16px);
  pointer-events: none;
}
.judge {
  display: grid; justify-items: center; gap: 2px;
  min-width: clamp(96px, 9vw, 130px);
  padding: 0.7em 0.9em 0.75em;
  border-radius: 6px;
  background: #f4efe6; color: var(--ink);
  border-top: 6px solid var(--c);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
}
.judge--red { --c: var(--red); }
.judge--blue { --c: var(--blue); }
.judge small { font-family: var(--cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(8, 8, 10, 0.55); }
.judge b { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.05; letter-spacing: 0.02em; }
.judge span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--cond); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }

/* ── Method picker ──────────────────────────────────────────────────── */
.moves {
  position: fixed; left: 50%; bottom: 4vh; z-index: 15;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
.moves__label {
  font-family: var(--cond); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
}
.moves__label b { color: var(--paper); }
.moves__row { display: flex; gap: 10px; }
.move {
  position: relative;
  min-width: 8.2em;
  padding: 0.55em 1.5em 0.5em;
  font-family: var(--display); font-size: clamp(1.25rem, 1.9vw, 1.8rem);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px; transform-origin: center;
  opacity: 0; transform: translateY(80px);
  transition: opacity 0.3s, transform 0.55s var(--ease-out), background 0.2s, color 0.2s;
}
.move::after { /* shine sweep, drawn inside the button's own box */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  transition: background-position 0.6s var(--ease-out);
}
.move:hover::after, .move:focus-visible::after { background-position: -30% 0; }
.move__key {
  position: absolute; top: 5px; left: 16px;
  font-family: var(--cond); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em;
  opacity: 0.45;
}
body[data-pick="left"] .move { --accent: var(--red); }
body[data-pick="right"] .move { --accent: var(--blue); }
.move:hover, .move:focus-visible { background: var(--accent); border-color: transparent; outline: none; }
.move:active { transform: translateY(2px) scale(0.97) !important; }

body[data-phase="method"] .moves { pointer-events: auto; }
body[data-phase="method"] .moves__label { opacity: 1; transform: none; }
body[data-phase="method"] .move { opacity: 1; transform: none; }
body[data-phase="method"] .move:nth-child(2) { transition-delay: 0.05s, 0.05s, 0s, 0s; }
body[data-phase="method"] .move:nth-child(3) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
body[data-phase="method"] .move:hover { transform: translateY(-4px); }

/* ── Results sheet ──────────────────────────────────────────────────── */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 14;
  padding: 0 clamp(0px, 2vw, 32px);
  transform: translateY(110%);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.sheet.is-open { transform: none; pointer-events: auto; }
.sheet__inner {
  max-width: 1200px; margin: 0 auto;
  max-height: calc(100dvh - var(--top)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr minmax(300px, 1.15fr) 1fr; gap: 3vw;
  padding: 3.4vh clamp(20px, 3.5vw, 52px) max(3.6vh, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(16, 16, 20, 0.84), rgba(8, 8, 10, 0.97));
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -30px 90px rgba(0, 0, 0, 0.65);
}
.sheet__side--red { --c: var(--red-hi); }
.sheet__side--blue { --c: var(--blue-hi); text-align: right; }
.sheet__pct { font-family: var(--display); font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: 0.9; color: var(--c); }
.sheet__pct b { font-weight: 400; }
.sheet__name { display: inline-block; color: inherit; text-decoration: none; margin-top: 0.3em; font-family: var(--cond); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }
.sheet__votes { font-size: 0.82rem; color: var(--dim); margin: 0.15em 0 1.6vh; }
.sheet__methods { list-style: none; display: grid; gap: 0.5em; }
.sheet__methods li {
  display: grid; grid-template-columns: 5.6em 1fr 3.2em; align-items: center; gap: 0.7em;
  font-family: var(--cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
}
.sheet__methods li i { position: relative; height: 6px; border-radius: 3px; background: var(--faint); overflow: hidden; }
.sheet__methods li i::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--w, 0%); border-radius: inherit; background: var(--c);
  transition: width 1.1s var(--ease-out) 0.35s;
}
.sheet__methods li b { font-weight: 700; text-align: right; }
.sheet__side--blue .sheet__methods li { grid-template-columns: 3.2em 1fr 5.6em; }
.sheet__side--blue .sheet__methods li span { order: 3; text-align: right; }
.sheet__side--blue .sheet__methods li b { order: 1; text-align: left; }
.sheet__side--blue .sheet__methods li i { order: 2; }
.sheet__side--blue .sheet__methods li i::after { left: auto; right: 0; }
.sheet__methods li.is-mine { color: var(--paper); }
.sheet__methods li.is-mine span::after { content: ' ●'; color: var(--gold); font-size: 0.8em; }
.sheet__side--blue .sheet__methods li.is-mine span::after { content: none; }
.sheet__side--blue .sheet__methods li.is-mine span::before { content: '● '; color: var(--gold); font-size: 0.8em; }

.sheet__mid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8vh; }
.verdict__kicker { font-family: var(--cond); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
.verdict__title {
  font-family: var(--display); text-transform: uppercase; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 3.2rem); margin-top: 0.12em;
  background: linear-gradient(180deg, #fff8dc, var(--gold) 60%, #c08a14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.verdict__sub { margin-top: 0.4em; font-size: 0.92rem; color: var(--muted); }
.split {
  position: relative; width: 100%; height: 14px;
  display: flex; justify-content: space-between; gap: 3px;
  border-radius: 7px; background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.split i { display: block; height: 100%; width: 0; transition: width 1.2s var(--ease-out) 0.25s; }
.split__red { background: linear-gradient(90deg, #8f0f15, var(--red-hi)); border-radius: 7px 0 0 7px; box-shadow: 0 0 20px rgba(227, 38, 47, 0.6); }
.split__blue { background: linear-gradient(270deg, #0d2a86, var(--blue-hi)); border-radius: 0 7px 7px 0; box-shadow: 0 0 20px rgba(36, 99, 255, 0.6); }
.split__mark { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; translate: -50% 0; background: rgba(255, 255, 255, 0.5); }
.fav { font-family: var(--cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); min-height: 1em; }
.fav b { color: var(--paper); font-weight: 700; }

.next {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-top: 0.4vh;
  padding: 0.6em 1.7em 0.55em;
  font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #120d02;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 0 0 rgba(245, 197, 66, 0);
  transition: transform 0.2s var(--ease-out), filter 0.2s;
  animation: throb 2.2s ease-in-out infinite 1.4s;
}
.next svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.next:hover { transform: translateY(-2px); filter: brightness(1.08); }
.next:hover svg { transform: translateX(4px); }
.next:active { transform: scale(0.97); }

/* A fact about the fighter you picked, between the crowd numbers and the AI */
.dyk {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(150px, 0.3fr) 1fr; gap: 0.4em 2.4vw; align-items: baseline;
  padding-top: 2.2vh; margin-top: 0.4vh;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dyk[hidden] { display: none; }
.sheet.is-open .dyk { animation: dyk-in 0.6s var(--ease-out) 0.5s backwards; }
@keyframes dyk-in { from { opacity: 0; transform: translateY(8px); } }
.dyk__label { font-family: var(--cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.dyk__text { font-size: 0.95rem; line-height: 1.55; color: rgba(244, 239, 230, 0.86); }
.dyk__who { font-family: var(--cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.2em; }
.dyk[data-side="left"] .dyk__who { color: var(--red-hi); }
.dyk[data-side="right"] .dyk__who { color: var(--blue-hi); }

/* The AI's pre-generated verdict, under the crowd numbers */
.ai {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(150px, 0.3fr) 1fr; gap: 0.4em 2.4vw;
  padding-top: 2.2vh; margin-top: 0.4vh;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ai[hidden] { display: none; }
.ai__label {
  font-family: var(--cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase;
  background: linear-gradient(90deg, #f0b8a0, #d97757);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai__agree {
  display: inline-block; margin-top: 0.55em; padding: 0.2em 0.6em;
  font-family: var(--cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--faint); border-radius: 3px;
}
.ai__agree.is-yes { color: var(--gold); border-color: rgba(245, 197, 66, 0.4); }
.ai__call { font-size: 0.95rem; line-height: 1.55; color: rgba(244, 239, 230, 0.86); min-height: 3.1em; }
.ai__pick { font-family: var(--cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.2em; }
.ai[data-side="left"] .ai__pick { color: var(--red-hi); }
.ai[data-side="right"] .ai__pick { color: var(--blue-hi); }
.ai__text::after { content: '▍'; margin-left: 1px; color: #d97757; animation: caret 0.9s steps(1) infinite; }
.ai:has(.ai__fair.is-in) .ai__text::after { content: none; }
.ai__fair {
  margin-top: 0.55em; font-size: 0.88rem; line-height: 1.5; color: var(--muted);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s, transform 0.6s var(--ease-out);
}
.ai__fair.is-in { opacity: 1; transform: none; }
.ai__fairlabel { font-family: var(--cond); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-right: 0.4em; }
/* Thumbs on the AI's call: they arrive with "Fair fight?", once the verdict has been read */
.ai__rate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-top: 0.7em;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.5s, transform 0.6s var(--ease-out), visibility 0.5s;
}
.ai__rate[hidden] { display: none; }
.ai:has(.ai__fair.is-in) .ai__rate { opacity: 1; visibility: visible; transform: none; }
.ai__ratelabel { font-family: var(--cond); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-right: 0.2em; }
.ai__vote {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 32px; padding: 0 0.75em;
  font-family: var(--cond); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--dim); border: 1px solid var(--faint); border-radius: 3px;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.ai__vote svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai__vote:hover { color: var(--paper); border-color: rgba(244, 239, 230, 0.35); }
.ai__vote:active { transform: scale(0.94); }
.ai__vote[data-rate="up"][aria-pressed="true"] { color: var(--gold); border-color: rgba(245, 197, 66, 0.5); background: rgba(245, 197, 66, 0.08); }
.ai__vote[data-rate="down"][aria-pressed="true"] { color: var(--red-hi); border-color: rgba(255, 90, 95, 0.5); background: rgba(255, 90, 95, 0.08); }
.ai__vote[aria-pressed="true"] svg { fill: currentColor; fill-opacity: 0.25; }
/* After a thumbs down: an optional one-tap reason, on its own line */
.ai__why { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; animation: why-in 0.35s var(--ease-out); }
.ai__why[hidden] { display: none; }
.ai__reason {
  min-height: 30px; padding: 0 0.7em;
  font-family: var(--cond); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); border: 1px dashed var(--faint); border-radius: 3px;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.ai__reason:hover { color: var(--paper); border-color: rgba(244, 239, 230, 0.35); }
.ai__reason:active { transform: scale(0.94); }
.ai__reason[aria-pressed="true"] { color: var(--red-hi); border-style: solid; border-color: rgba(255, 90, 95, 0.5); background: rgba(255, 90, 95, 0.08); }
@keyframes why-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes caret { 50% { opacity: 0; } }

/* ── Leaderboard ────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 11px; border-radius: 19px;
  border: 1px solid rgba(245, 197, 66, 0.35);
  font-family: var(--cond); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover { background: rgba(245, 197, 66, 0.1); border-color: var(--gold); transform: translateY(-1px); }

.board {
  position: fixed; inset: 0; z-index: 35;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 4, 6, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(0.8); backdrop-filter: blur(10px) saturate(0.8);
  opacity: 0; transition: opacity 0.35s;
}
.board[hidden] { display: none; }
.board.is-open { opacity: 1; }
.board__panel {
  width: min(1080px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(20, 20, 26, 0.96), rgba(9, 9, 12, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(245, 197, 66, 0.06) inset;
  transform: translateY(24px) scale(0.97); transition: transform 0.55s var(--ease-out);
}
.board.is-open .board__panel { transform: none; }
.board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2.6vh, 28px); }
.board__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  background: linear-gradient(180deg, #fff8dc, var(--gold) 60%, #c08a14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.board__sub { margin-top: 0.45em; font-size: 0.9rem; color: var(--muted); min-height: 1.2em; }
.board__close {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--faint); transition: background 0.2s, transform 0.3s var(--ease-out);
}
.board__close:hover { background: rgba(255, 255, 255, 0.07); transform: rotate(90deg); }
.board__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.board__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.5vw, 48px); }
.board__h {
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--cond); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.board__list { list-style: none; display: grid; gap: 4px; }
.board__empty { padding: 18px 0; color: var(--dim); font-size: 0.92rem; }

.brow {
  display: grid; grid-template-columns: 1.6em auto 1fr auto; align-items: center; gap: 12px;
  padding: 8px 10px 8px 4px; border-radius: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s, transform 0.5s var(--ease-out), background 0.2s;
  transition-delay: calc(var(--i) * 45ms + 120ms), calc(var(--i) * 45ms + 120ms), 0s;
}
.board.is-filled .brow { opacity: 1; transform: none; }
.brow:hover { background: rgba(255, 255, 255, 0.04); }
.brow__rank { font-family: var(--display); font-size: 1.25rem; color: var(--dim); text-align: right; }
.brow:nth-child(1) .brow__rank { color: var(--gold); }
.brow__main { min-width: 0; display: grid; gap: 7px; }
.brow__main b { font-family: var(--cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow__main em { font-style: normal; color: var(--gold); font-size: 0.8em; margin: 0 0.2em; }
.brow__stat { text-align: right; line-height: 1.15; }
.brow__stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.brow__stat small { font-size: 0.72rem; color: var(--dim); white-space: nowrap; }
.brow__bar, .brow__split { display: flex; height: 5px; border-radius: 3px; background: var(--faint); overflow: hidden; }
.brow__bar > i, .brow__split > i { display: block; width: 0; transition: width 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 300ms); }
.board.is-filled .brow__bar > i, .board.is-filled .brow__split > i { width: var(--w); }
.brow__bar > i { background: linear-gradient(90deg, #b8860b, var(--gold)); }
.brow__split { gap: 2px; background: none; }
.brow__split > i:first-child { background: var(--red-hi); border-radius: 3px 0 0 3px; }
.brow__split > i:last-child { background: var(--blue-hi); border-radius: 0 3px 3px 0; }

.thumb {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background-color: #1a1a20; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px var(--ring, var(--gold)), 0 4px 14px rgba(0, 0, 0, 0.5);
  font-family: var(--display); font-size: 1rem; color: var(--muted);
}
.thumb--red { --ring: var(--red); }
.thumb--blue { --ring: var(--blue); }
.thumbs { display: flex; }
.thumbs .thumb + .thumb { margin-left: -10px; }

/* Every pairing seen */
.finale {
  position: fixed; inset: 0; z-index: 12;
  display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 24px;
  pointer-events: none;
}
.finale[hidden] { display: none; }
.finale > * { pointer-events: auto; }
.finale__kicker { font-family: var(--cond); font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); font-size: 0.85rem; }
.finale__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.9;
  font-size: clamp(3.4rem, 10vw, 9rem);
  background: linear-gradient(180deg, #fff 0%, #f4efe6 55%, #bdb19d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.5));
}
body[data-phase="done"] .vs, body[data-phase="done"] .scale { opacity: 0; }

/* ── Featured-bout badge (bout of the day, tournament) ──────────────── */
.badge {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  padding: 6px 14px 5px; border-radius: 999px;
  font-family: var(--cond); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: #120d02; background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 24px rgba(245, 197, 66, 0.35);
  animation: badge-in 0.6s var(--ease-out);
}
.badge[hidden] { display: none; }
@keyframes badge-in { from { opacity: 0; transform: translateY(-8px) scale(0.9); } }

/* ── Method explanations (hover or keyboard focus) ─────────────────── */
.move[data-tip]::before {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px;
  width: max-content; max-width: 220px; padding: 7px 10px;
  font-family: var(--body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; line-height: 1.35; text-align: center;
  color: var(--paper); background: rgba(12, 12, 16, 0.96); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, translate 0.25s var(--ease-out);
}
.move:hover::before, .move:focus-visible::before { opacity: 1; translate: -50% 0; }

/* ── Your record, share buttons, toast ──────────────────────────────── */
.record { font-size: 0.82rem; color: var(--muted); min-height: 1em; }
.record b { color: var(--gold); font-weight: 600; }
.share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--faint);
  font-family: var(--cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); text-decoration: none; background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s, border-color 0.2s;
}
.share__btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--muted); }
.share__btn[hidden] { display: none; }
.share__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 45; translate: -50% 20px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.9rem; color: #120d02; background: var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, translate 0.35s var(--ease-out);
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.sheet__name:hover, .brow__main a:hover, .page a:hover { text-decoration: underline; }
.brow__main a, .page a { color: inherit; text-decoration: none; }
.ai { cursor: pointer; }

/* ── Scorecard, every few votes, across the top of the results ─────── */
.milestone {
  grid-column: 1 / -1; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 3vw;
  margin-bottom: calc(10px - 1.6vw); /* a tighter gap under it than the sheet's 3vw rows */
  padding: 12px 48px 12px 16px; border-radius: 16px; /* room on the right for the close button */
  background: linear-gradient(100deg, rgba(245, 197, 66, 0.13), rgba(245, 197, 66, 0.03) 45%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(245, 197, 66, 0.32);
  animation: milestone-in 0.7s var(--ease-out) backwards;
}
.milestone[hidden] { display: none; }
.milestone::after { /* one shine across, as it lands */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 227, 154, 0.16) 50%, transparent 65%);
  transform: translateX(-100%); animation: sweep-once 1.3s var(--ease-out) 0.35s;
}
.milestone__kicker { font-family: var(--cond); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.milestone__big { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.milestone__big b {
  font-family: var(--display); font-weight: 400; font-size: 2.5rem; line-height: 1;
  background: linear-gradient(180deg, #fff8dc, var(--gold) 60%, #c08a14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.milestone__big span { font-family: var(--cond); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.milestone__big small { font-size: 0.85em; color: var(--dim); letter-spacing: 0.08em; }
.milestone__sub { margin-top: 4px; font-size: 0.8rem; color: var(--muted); }
.milestone__close {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--faint); color: var(--muted);
  transition: background 0.2s, color 0.2s, transform 0.3s var(--ease-out);
}
.milestone__close:hover { background: rgba(255, 255, 255, 0.07); color: var(--paper); transform: rotate(90deg); }
.milestone__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.milestone__shares { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.milestone__share { padding: 5px 11px; font-size: 0.72rem; }
.milestone__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.milestone__stat {
  min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
  animation: milestone-in 0.6s var(--ease-out) backwards;
}
.milestone__stat:nth-child(1) { animation-delay: 0.15s; }
.milestone__stat:nth-child(2) { animation-delay: 0.25s; }
.milestone__stat:nth-child(3) { animation-delay: 0.35s; }
.milestone__stat dt { font-family: var(--cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.milestone__stat dd b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
.milestone__stat dd b em { font-style: normal; color: var(--gold); font-size: 0.75em; margin: 0 0.1em; }
.milestone__stat dd b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(245, 197, 66, 0.5); text-underline-offset: 3px; }
.milestone__stat dd small { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--muted); }
.milestone__cup {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid rgba(245, 197, 66, 0.2);
  animation: milestone-in 0.6s var(--ease-out) 0.45s backwards;
}
.milestone__cup > svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.milestone__cup p { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.milestone__cup p b { font-family: var(--cond); font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); margin-right: 0.3em; }
.milestone__acts { flex: none; display: flex; gap: 8px; }
.share__btn--gold { color: #120d02; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
.share__btn--gold:hover { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; filter: brightness(1.08); }
@keyframes milestone-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes sweep-once { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Page panel: fighter pages, bracket, about ─────────────────────── */
.page__panel { position: relative; width: min(1180px, 100%); }
.page__close { position: absolute; top: clamp(16px, 2.4vw, 30px); right: clamp(16px, 2.4vw, 30px); z-index: 2; }
.page__body > .board__title { padding-right: 56px; }
.thumb--big { width: 92px; height: 92px; box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(0, 0, 0, 0.6); }

.fp__head { display: flex; align-items: center; gap: 20px; padding-right: 56px; margin-bottom: 20px; }
.fp__origin { font-family: var(--cond); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.fp__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 18px; }
.fp__stats > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.fp__stats dt { font-family: var(--cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.fp__stats dd { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; }
.fp__stats dd small { display: block; font-family: var(--cond); font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.fp__stats .fp__div { font-family: var(--cond); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3em; }
.fp__hl { border-color: rgba(245, 197, 66, 0.35) !important; }
.fp__hl dd { color: var(--gold); }
.fp__blurb { max-width: 60rem; color: rgba(244, 239, 230, 0.82); line-height: 1.6; margin-bottom: 22px; }
.fp__facts { list-style: none; columns: 2 22rem; column-gap: 28px; margin: 4px 0 22px; }
.fp__facts li {
  break-inside: avoid; position: relative; padding: 0 0 10px 18px;
  font-size: 0.92rem; line-height: 1.55; color: rgba(244, 239, 230, 0.82);
}
.fp__facts li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.fp__list { list-style: none; display: grid; gap: 6px; }
.fprow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px;
  padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s, transform 0.5s var(--ease-out); transition-delay: calc(var(--i) * 30ms + 100ms);
}
.board.is-filled .fprow { opacity: 1; transform: none; }
.fprow__main { min-width: 0; display: grid; gap: 7px; }
.fprow__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-family: var(--cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; }
.fprow__crowd { font-family: var(--body); font-weight: 400; font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--dim); }
.fprow__ai { font-size: 0.88rem; line-height: 1.5; color: rgba(244, 239, 230, 0.78); }
.fprow__ai .is-win { color: var(--gold); }
.fprow__ai .is-loss { color: var(--muted); }
.fprow__ai--locked { color: var(--dim); font-style: italic; }
.fprow__you { font-family: var(--cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fprow__act { align-self: center; }

.bracket__how { color: var(--muted); font-size: 0.88rem; margin: 6px 0 20px; }
.bracket { display: grid; grid-template-columns: repeat(6, minmax(160px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.bracket__round { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; }
.bracket__bouts { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; } /* later rounds line up between the bouts that feed them */
.bracket__round .board__h { margin-bottom: 2px; }
.bracket__round.is-current .board__h { color: var(--gold); border-bottom-color: rgba(245, 197, 66, 0.4); }
.match { border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); padding: 4px; }
.match.is-live { border-color: rgba(245, 197, 66, 0.35); }
.match__row { display: grid; grid-template-columns: 1.4em auto 1fr auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; }
.match__row .thumb { width: 28px; height: 28px; }
.match__seed { font-family: var(--cond); font-weight: 700; font-size: 0.72rem; color: var(--dim); text-align: right; }
.match__name { font-family: var(--cond); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match__votes { font-family: var(--cond); font-weight: 700; font-size: 0.8rem; color: var(--muted); }
.match__row.is-win { background: rgba(245, 197, 66, 0.12); }
.match__row.is-win .match__name { color: var(--gold); }
.match__row.is-out { opacity: 0.45; }
.match__call, .match__you { display: block; margin: 4px 6px 4px; text-align: center; font-family: var(--cond); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
.match__call { padding: 5px; border-radius: 6px; color: #120d02 !important; background: var(--gold); text-decoration: none !important; }
.match__you { color: var(--dim); }
.champ { display: grid; justify-items: center; gap: 10px; padding: 14px 0; text-align: center; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.past { list-style: none; display: grid; gap: 6px; color: var(--muted); font-size: 0.88rem; }

.about p { max-width: 62rem; line-height: 1.65; color: rgba(244, 239, 230, 0.82); margin-bottom: 14px; }
.about .board__h { margin-top: 22px; }
.credits { list-style: none; columns: 2 280px; column-gap: 28px; font-size: 0.82rem; color: var(--muted); }
.credits li { break-inside: avoid; padding: 3px 0; }
.credits a { text-decoration: underline; text-decoration-color: var(--faint); }

/* ── Finale card ─────────────────────────────────────────────────────── */
.card {
  width: min(520px, 100%); padding: 22px 24px;
  border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, rgba(125, 14, 20, 0.55), rgba(8, 8, 10, 0.92) 45%, rgba(16, 51, 143, 0.55));
  border: 1px solid rgba(245, 197, 66, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.card__head { font-family: var(--cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.card__big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.card__big b { font-family: var(--display); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.card__big span { font-family: var(--cond); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.card__stats dt { font-family: var(--cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.card__stats dd { font-family: var(--display); font-size: 1.45rem; }
.card__stats dd small { display: block; font-family: var(--body); font-size: 0.75rem; color: var(--muted); }
.card__wide { grid-column: 1 / -1; }
.finale__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.finale { overflow-y: auto; }

/* ── Effects layers ─────────────────────────────────────────────────── */
.flash { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
.fx { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}

@keyframes sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes throb {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 197, 66, 0); filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(1%, 3%); }
}

/* ── Phones and narrow windows ──────────────────────────────────────── */
/* Narrow screens, and short landscape phones, where the side-by-side layout has no room */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  :root { --seam: 16px; --top: 56px; }
  body { overflow-x: hidden; overflow-y: auto; }
  .logo__sub { display: none; }
  .logo__main { font-size: 1.1rem; }
  .boutno span { display: none; }
  .progress__bar { min-width: 40px; }
  /* No room for the count beside the bar: tapping the bout number shows it in a bubble below.
     The padding makes a finger-sized target without moving anything. */
  .boutno { position: relative; padding: 8px 6px; margin: -8px -6px; cursor: pointer; }
  .progress__count {
    position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% -4px;
    padding: 5px 10px; border-radius: 999px; font-size: 0.75rem;
    color: #120d02; background: var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.2s, translate 0.3s var(--ease-out);
  }
  .progress__count::after { content: ' called'; }
  .boutno.is-open .progress__count { opacity: 1; translate: -50% 0; }
  .pill { padding: 0; width: 38px; justify-content: center; }
  .pill span { display: none; }
  .topbar__right { gap: 10px; }
  .board { padding: 10px; }
  .board__cols { grid-template-columns: 1fr; }
  .brow { gap: 10px; }

  .stage {
    position: relative; inset: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr !important; /* beat the desktop pick/hover widths */
    grid-template-rows: auto 0 auto;
  }
  .corner--red {
    grid-column: 1; grid-row: 1;
    margin: 0 0 calc(var(--seam) * -1);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seam) * 2), 0 100%);
  }
  .corner--blue {
    grid-column: 1; grid-row: 3;
    margin: calc(var(--seam) * -1) 0 0;
    clip-path: polygon(0 calc(var(--seam) * 2 + 5px), 100% 5px, 100% 100%, 0 100%);
  }
  .center { grid-column: 1; grid-row: 2; }
  .vs { top: 50%; font-size: 3.6rem; }
  .scale { width: 150px; bottom: auto; top: -84px; left: 10px; translate: none; }
  .scale__label { display: none; }
  body[data-phase="method"] .scale, body[data-phase="impact"] .scale { transform: none; }

  .corner__inner, .corner--blue .corner__inner { position: relative; inset: auto; justify-content: flex-start; }
  .corner__inner { padding: calc(var(--top) + 12px) 20px 104px; }
  .corner--blue .corner__inner { padding: 78px 20px 150px; }
  .name__first { font-size: 1.15rem; }
  .name__last { font-size: clamp(2.8rem, 15vw, 4.6rem); }
  .tape { margin: 16px 0 14px; gap: 0 18px; }
  .tape__row dd b { font-size: 1.5rem; }
  .tape__row dd small { font-size: 0.85rem; }
  .blurb { font-size: 0.9rem; line-height: 1.55; }
  .corner__mark { font-size: 15rem; }
  .portrait { top: 0; width: 64%; opacity: 0.6; }
  .credit { bottom: 8px; max-width: 70%; }
  .corner--blue .credit { bottom: 118px; }
  .corner--red .credit { left: auto; right: 20px; text-align: right; }

  .corner.is-winner .corner__inner, .corner.is-loser .corner__inner { transform: none; }
  .corner.is-winner :is(.origin, .tape, .blurb), .corner.is-loser :is(.origin, .tape, .blurb) { opacity: 1; }
  /* Clear of the top bar and badge: over the stats, with a darker backing so it reads on top of them */
  .stamp { top: 38%; width: max-content; background: rgba(8, 8, 10, 0.78); }
  .stamp b { font-size: 2.2rem; }
  .foul { top: 34%; width: 104px; }
  .foul b { font-size: 2.4rem; }

  .moves { position: fixed; left: 0; right: 0; bottom: 0; translate: none; padding: 28px 12px max(14px, env(safe-area-inset-bottom)); }
  body[data-phase="method"] .moves { background: linear-gradient(transparent, rgba(8, 8, 10, 0.95) 35%); }
  .moves__row { width: 100%; }
  .move { flex: 1; min-width: 0; padding: 0.6em 0.4em 0.55em; font-size: 1.2rem; }
  .move__key { display: none; }

  .sheet { position: fixed; padding: 0; }
  .sheet__inner {
    max-height: 86dvh; overflow-y: auto;
    grid-template-columns: 1fr 1fr; grid-template-areas: 'score score' 'mid mid' 'dyk dyk' 'ai ai' 'left right';
    gap: 20px 16px; padding: 22px 18px max(22px, env(safe-area-inset-bottom));
  }
  .sheet__mid { grid-area: mid; }
  .dyk { grid-area: dyk; grid-template-columns: 1fr; padding-top: 14px; }
  .ai { grid-area: ai; grid-template-columns: 1fr; padding-top: 14px; }
  .ai__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ai__agree { margin-top: 0; }
  .sheet__side--red { grid-area: left; }
  .sheet__side--blue { grid-area: right; }
  .sheet__pct { font-size: 3.2rem; }
  .sheet__name { font-size: 0.95rem; }
  .sheet__methods li { grid-template-columns: 1fr 2.8em; }
  .sheet__methods li i { grid-column: 1 / -1; order: 3 !important; }
  .sheet__side--blue .sheet__methods li { grid-template-columns: 2.8em 1fr; }
  .next { order: 5; }

  .milestone { grid-area: score; grid-template-columns: 1fr; gap: 12px; margin-bottom: 0; padding: 14px; }
  .milestone__head { padding-right: 30px; }
  .milestone__big b { font-size: 2.3rem; }
  .milestone__stats { gap: 6px; }
  .milestone__stat { padding: 8px; }
  .milestone__stat dt { font-size: 0.6rem; letter-spacing: 0.12em; }
  .milestone__stat dd b { font-size: 1.1rem; white-space: normal; }
  .milestone__stat dd small { font-size: 0.68rem; }
  .milestone__cup { flex-wrap: wrap; }
  .milestone__cup p { flex-basis: calc(100% - 36px); }
  .milestone__acts { width: 100%; }
}

@media (hover: none) { .move__key { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grain { animation: none; }
}

/* Very narrow phones: the three tape columns don't fit side by side */
@media (max-width: 360px) {
  .tape { grid-template-columns: 1fr 1fr; }
  .tape__row--div { grid-column: 1 / -1; margin-top: 10px; }
}

/* Phones: new panels and pieces */
@media (max-width: 760px) {
  .badge { top: calc(100% + 6px); font-size: 0.66rem; }
  .move[data-tip]::before { display: none; } /* no hover on touch; the labels stay short */
  .fp__head { gap: 14px; }
  .thumb--big { width: 70px; height: 70px; }
  .fprow { grid-template-columns: auto 1fr; }
  .fprow__act { grid-column: 2; justify-self: start; }
  .bracket { grid-template-columns: 1fr; overflow-x: visible; }
  .card__big b { font-size: 2.6rem; }
  .finale { place-content: start center; padding-top: calc(var(--top) + 16px); }
}