/* screens.css — landing, library, fight, how, about, author.
   Built per screen across steps 2-5. Only the author view is styled so far. */

.stub { color: var(--muted); max-width: 60ch; }

.author-table { border-collapse: collapse; width: 100%; font-size: 15px; margin-bottom: var(--space-5); }
.author-table th, .author-table td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.author-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.author-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.author-table tr.is-mismatch td { color: var(--muted); }

.tier-pill { font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }

/* 8.5 / S5: unchecked facts are visible in the author view */
.unchecked { border-bottom: 2px dotted #B8860B; }
.badge-count { background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; font-size: 13px; }
.warn { color: #9B2C2C; }
.near { color: #8A5A00; text-decoration: underline dotted; text-underline-offset: 3px; }
/* 11.9: the two flags the content pass works from */
.author-table td.flags { min-width: 260px; }
.flag { display: block; font-size: 13px; line-height: 1.35; padding: 3px 8px; margin: 2px 0; border-radius: 8px; }
.flag-tie  { background: var(--sticky); color: #5C4500; }
.flag-same { background: #FBE7DB; color: #7A3410; }
.ready-pill { margin-left: 6px; color: var(--muted); }
.author-filter { min-height: var(--tap); padding: 0 18px; font-size: 16px; }
.author-filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--ink); font-weight: 700; }
.author-table.flagged-only tbody tr:not(.is-flagged) { display: none; }

/* ============================ S2 fight (step 2) ============================ */
/* The night backdrop with a warm spotlight. Cards are working shapes; the
   design pass is step 5. */

.fight { max-width: 1100px; margin: 0 auto; text-align: center; }
.fight h1, .fight h2, .fight h3 { color: var(--spot); }

.fight-prompt { font-size: clamp(30px, 6vw, 56px); margin-bottom: var(--space-4); }

/* both cards are always the same height, whichever name wraps */
.tape-cards {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3); align-items: stretch;
}
.vs {
  font-family: var(--font-display); font-size: 34px;
  color: var(--spot); align-self: center;
}

/* The card is one button, so everything inside it is a span: a button may not
   contain headings or lists, and VoiceOver reads the card as one control. A column
   from the top: a button centres what it holds, so when one name wrapped and the
   cards stretched to match, the two pictures sat at different heights. */
.fighter-card {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  background: var(--panel); color: var(--ink);
  border: 2px solid transparent; border-radius: var(--radius);
  padding: var(--space-3);
}
.fighter-card.chosen { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* break-word only as a last guard: on a phone the size below makes every name fit */
.fighter-name {
  display: block; font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  color: var(--ink); font-size: 28px; margin: var(--space-2) 0 0;
  overflow-wrap: break-word;
}
/* 11.5: one felt comparison per fighter, drawn: the row of "yous" is the size fact a
   child who cannot read can still compare across the two cards */
.fighter-size { display: block; margin-top: var(--space-2); }
.fighter-size .figures { justify-content: flex-start; min-height: 26px; margin: 0 0 2px; }
.fighter-size .figures .times { font-size: 18px; }
.fighter-size-line { display: block; font-size: 18px; color: var(--muted); line-height: 1.3; }
/* at the foot of both cards, on the same line, and only seen on the chosen one */
.pick-flag {
  display: block; margin-top: auto; padding-top: var(--space-2);
  font-size: 15px; color: var(--accent); font-weight: 700;
  visibility: hidden;
}
.fighter-card.chosen .pick-flag { visibility: visible; }

.predict { margin: var(--space-4) 0; }
.because { font-size: 24px; }
.hint { color: var(--spot); opacity: .8; }
/* six reasons as 3 + 3 (2 + 2 + 2 on a phone): four across left two alone on the
   second row with a hole beside them */
.reason-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2); max-width: 760px; margin: 0 auto;
}
/* 11.8: the six reasons are main things: 88px, and each pictogram keeps its word */
.reason {
  min-height: 88px;
  border: 2px solid var(--spot); border-radius: var(--radius);
  background: transparent; color: var(--spot); font-size: 18px;
}
/* the grown-up layer on the night ground: small, quiet, never a control */
.grownup-line { margin: var(--space-3) 0 0; font-size: 16px; color: var(--spot); opacity: .66; }
/* 11.8: Start the fight and Next round are main things too */
.action-bar .big-go { min-height: 68px; font-size: 22px; }
.reason.chosen { background: var(--spot); color: var(--night); font-weight: 700; }

.mismatch-badge { color: var(--spot); margin-bottom: var(--space-3); }

/* ---- rounds ---- */
.round-count { color: var(--spot); opacity: .75; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
.round-attr { font-size: clamp(28px, 5vw, 44px); margin-bottom: var(--space-3); }
/* the round card, the stage and the line under them: see "the round" at the end
   of this file, which owns the whole rounds phase since the polish of 2026-09-13 */

/* ---- verdict ---- */
.tier { color: var(--spot); letter-spacing: .14em; text-transform: uppercase; font-size: 15px; }
.spotlight {
  max-width: 460px; margin: 0 auto var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-2);
  background: radial-gradient(closest-side, rgba(243,227,192,.22), transparent 78%);
  border-radius: var(--radius);
}
.winner-name { font-size: clamp(32px, 6vw, 52px); margin: var(--space-3) 0 0; }
.odds { color: var(--spot); font-size: 22px; }

/* 11.7: the winner, then the player's own result, then Why with the Author's call
   inside it, then the fun fact. One card each, in that order. */
.why, .feedback, .fun-fact {
  background: var(--panel); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-4);
  margin: var(--space-3) auto; max-width: 760px; text-align: left;
}
.why h2, .fun-fact h2 { color: var(--ink); font-size: 22px; }
.why ul { list-style: none; margin: 0; padding: 0; }
.why li { padding: var(--space-3) 0 0; margin-top: var(--space-3); border-top: 1px solid var(--line); }
.why li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.why-head { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.why-head .icon { color: var(--accent); flex: 0 0 auto; }
.why-attr { font-weight: 700; font-size: 20px; }
.why .authors-call {
  background: var(--accent-soft); border-radius: 12px;
  padding: var(--space-3); margin: 0 0 var(--space-3);
}
.authors-call .badge { color: var(--accent); border-color: var(--accent); margin-bottom: var(--space-2); }
.authors-call p:last-child { margin-bottom: 0; }
.fun-fact p { font-size: 22px; line-height: 1.35; margin: 0; }

/* 11.7: the checklist. Six mirrored rows: the pictogram and its word in the middle,
   each fighter's score drawn out to its own side, a check on each row's winner, the
   player's reason ringed, a small star on a row the player called. */
.checklist {
  background: var(--panel); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin: var(--space-3) auto; max-width: 760px;
}
.cl-heads, .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.cl-heads { padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.cl-head { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.1; min-width: 0; }
.cl-head.cl-a { justify-content: flex-end; text-align: right; }
.cl-face { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.cl-head.cl-b .cl-face { background: var(--accent-2-soft); box-shadow: 0 0 0 2px var(--accent-2); }
.cl-face .plate { height: 100%; perspective: none; }
.cl-face .plate-mat { height: 100%; border: 0; border-radius: 0; background: none; }
.cl-face .plate-art { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.cl-rows { list-style: none; margin: 0; padding: 0; }
.cl-row { padding: 9px 0; border-bottom: 1px solid var(--line); border-radius: 12px; }
.cl-row:last-child { border-bottom: 0; }
.cl-row.is-reason { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); border-bottom-color: transparent; padding-left: 8px; padding-right: 8px; margin: 4px -8px; }
.cl-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-side.cl-a { flex-direction: row-reverse; }
.cl-side .sbar i { height: 14px; }
.cl-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center; }
.cl-check { flex: 0 0 22px; display: grid; place-items: center; color: var(--check); }
.cl-side.takes-it .cl-num { color: var(--check); }
.cl-attr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; text-align: center; }
.cl-attr > .icon { color: var(--accent); flex: 0 0 auto; }
.cl-word { font-size: 18px; font-weight: 700; }
.cl-called { display: inline-flex; color: #C28A00; }
.cl-reason { flex: 1 0 100%; font-size: 14px; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 600px) {
  .checklist { padding: var(--space-3); }
  .cl-heads, .cl-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 6px; }
  .cl-head { font-size: 16px; flex-direction: column; text-align: center; gap: 4px; }
  .cl-head.cl-a { justify-content: center; text-align: center; flex-direction: column-reverse; }
  .cl-side { gap: 4px; }
  .cl-side .sbar { gap: 2px; }
  .cl-side .sbar i { min-width: 3px; height: 12px; border-radius: 3px; }
  .cl-side .sbar i:nth-child(5) { margin-right: 4px; }
  .cl-side .sbar.mirror i:nth-child(5) { margin-right: 0; margin-left: 4px; }
  .cl-num { font-size: 18px; }
  .cl-check { flex-basis: 16px; }
  .cl-check .icon { width: 15px; height: 15px; }
  .cl-attr { flex-direction: column; gap: 0; }
  .cl-word { font-size: 14px; line-height: 1.15; }
  .cl-row.is-reason { margin: 4px -6px; padding-left: 6px; padding-right: 6px; }
}

/* One attribute, both fighters: A left, B right, the check on the one that takes it.
   The fact is kid-layer text (11.8), so it is never under 22px. */
.fact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pair-side { min-width: 0; padding: var(--space-3); border-radius: 12px; background: var(--cream); }
.pair-side.takes-it { background: color-mix(in srgb, var(--check) 10%, var(--panel)); }
.pair-name {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-size: 16px; font-weight: 700; color: var(--muted);
}
.pair-name span:first-of-type { min-width: 0; }
.pair-side.takes-it .pair-name { color: var(--check); }
.pair-name .icon { flex: 0 0 auto; }
.pair-num { margin-left: auto; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pair-fact { margin: 0; font-size: 22px; line-height: 1.35; }
@media (max-width: 600px) {
  .fact-pair { grid-template-columns: 1fr; gap: var(--space-2); }
}

.feedback.good    { border-left: 6px solid var(--check); }
.feedback.partial { border-left: 6px solid var(--accent); }
.feedback.miss    { border-left: 6px solid var(--accent-2, var(--accent)); }
.feedback-head { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; margin-bottom: var(--space-2); }
.feedback.good .feedback-head { color: var(--check); }
.feedback p { font-size: 22px; line-height: 1.35; }
.feedback p:last-child { margin-bottom: 0; }
.feedback .fact-pair { margin: var(--space-3) 0; }

/* every phase ends in one action bar: Fight!, Next round, the verdict's three */
.action-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center; margin-top: var(--space-4);
}

/* ---- rematch ---- */
.check-flash {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-bottom: var(--space-4);
}
.flash-check {
  border: 1px solid var(--spot); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; color: var(--spot);
  animation: flashin .45s ease both;
}
.flash-check.even { opacity: .5; }
@keyframes flashin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rematch-head { font-size: clamp(30px, 6vw, 50px); }
.rematch-line { color: var(--spot); font-size: 20px; max-width: 640px; margin: 0 auto; }

/* ---- phones: a compact tale of the tape. 7.5 said the two cards stack below
   600px, but two 594px cards hid the second fighter and the whole second step
   of the prediction. Now both plates sit side by side, one shared table holds
   the six rows, the reason grid comes right under it, and the action bar pins
   to the bottom so Fight!, Next round and Next fight are always at the thumb. ---- */
@media (max-width: 600px) {
  .tape-cards { grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: stretch; }
  .vs { display: none; }
  .fighter-card { padding: var(--space-2) var(--space-2) 10px; container-type: inline-size; }
  /* The widest word in either roster, Schwarzenegger, is 8 times the type size, so a
     name set at 12% of the card's width always fits whole: 19px from a 390px phone up,
     18px at 375, 14px at 320. A card too narrow for 19px used to cut the word off. */
  .fighter-name { font-size: 19px; font-size: min(19px, 12cqi); margin-top: 6px; line-height: 1.1; }
  .fighter-size .figures .silhouette { height: 20px; }
  .fighter-size-line { font-size: 16px; }
  .pick-flag { padding-top: 4px; font-size: 14px; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .reason { min-height: 76px; }
  .fight-prompt { margin-bottom: var(--space-2); }
  .hint { margin-bottom: var(--space-3); }
  .predict { margin: var(--space-3) 0; }
  .action-bar {
    position: sticky; bottom: 0; z-index: 3;
    margin: var(--space-3) calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1);
    padding: 14px var(--gutter-r) max(12px, env(safe-area-inset-bottom)) var(--gutter-l);
    background: linear-gradient(to bottom, rgba(18, 16, 14, 0), var(--night) 45%);
    flex-wrap: nowrap; gap: var(--space-2);
  }
  .action-bar .big-go { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 18px; }
  /* three across on a phone: "Pick again" must stay on one line */
  .verdict-buttons .big-go { font-size: 17px; padding: 0 6px; white-space: nowrap; }
}

/* ===================== S1 — the album and the card ===================== */
/* PLAN.md 11.3, 11.4, 11.8. One job per screen: the album finds a fighter, the card
   meets it. Both end in the same match bar — the one kept from build step 10, both
   slots either side of one button, without Swap and without a second picker — pinned
   to the bottom, where the thumb is (owner's note, 2026-09-27). Sizes follow 11.8:
   what a child must hit is 68px or more, the main things 105px or more, and a fact a
   child reads is 24px (22 on a phone). */

/* The screen is at least as tall as the window, so on a short page (one bucket, Ready
   fights, a big monitor) the bar still sits on the bottom edge, not under the last row. */
.pick-screen {
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: calc(100vh - var(--header-h) - 2 * var(--main-y));
  min-height: calc(100dvh - var(--header-h) - 2 * var(--main-y));
}

/* ---- the match bar ----
   Owner's note, 2026-09-27: "some toning down and more padding as it is very in your
   face". A quiet strip like the header with room above and below; each fighter a face
   and a name at the tiles' size, on a thin ring in its slot's colour; one button at
   11.8's 68px. FIGHT waits in grey until there is a fight to start, so the one strong
   colour in the bar is always the thing to press. The middle's parts are grid items,
   so the faces line up with the button itself, and the tier note rides on its top edge. */
.match {
  position: sticky; bottom: 0; z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left mid right";
  align-items: center;
  gap: 0 var(--space-4);
  /* pushed to the foot of the screen, and full bleed across main's gutters and over
     its bottom padding, so the bar reads as part of the shell */
  margin: auto calc(var(--gutter-r) * -1) calc(var(--main-y) * -1) calc(var(--gutter-l) * -1);
  padding: var(--space-3) var(--gutter-r) max(var(--space-3), env(safe-area-inset-bottom)) var(--gutter-l);
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -16px 32px -28px rgba(31, 27, 22, .32);
}
/* past 1600px main stops growing and the bar with it, so there it is a tray standing
   on the window's edge rather than a strip cut short */
@media (min-width: 1601px) {
  .match { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
}

/* a fighter: its face and its name, hugging the button, a pill when pointed at */
.match-slot {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; min-height: var(--tap); padding: 4px 18px 4px 4px;
  border-radius: 999px; color: inherit; text-decoration: none;
}
.slot-left  { grid-area: left; justify-self: end; --slot-ring: var(--accent); --slot-soft: var(--accent-soft); }
.slot-right { grid-area: right; justify-self: start; flex-direction: row-reverse; padding: 4px 4px 4px 18px; text-align: right; --slot-ring: var(--accent-2); --slot-soft: var(--accent-2-soft); }
@media (hover: hover) { a.match-slot:hover { background: var(--cream); } }

/* The plate is cropped round rather than the face, so a card's check can sit on the rim */
.match-face {
  position: relative; flex: 0 0 auto; width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--slot-ring, var(--line));
}
.match-face .plate { height: 100%; perspective: none; border-radius: 50%; overflow: hidden; }
.match-face .plate-mat { height: 100%; border: 0; border-radius: 0; }
.match-face .plate-art { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.match-face .slot-flag { top: -6px; right: -6px; width: 22px; height: 22px; }
.match-name {
  min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: balance;
}
/* An empty slot is a dashed ring in its own colour. Of two, only the one the next pick
   fills breathes, so there is one place for the eye to go. */
.match-slot.empty .match-face {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1;
  color: var(--slot-ring); background: var(--panel); box-shadow: none;
  outline: 2px dashed color-mix(in srgb, var(--slot-ring) 35%, var(--panel)); outline-offset: 2px;
}
.match-slot.empty .match-name { font-size: 16px; font-weight: 400; color: var(--muted); }
.match-slot.next .match-face {
  outline-color: color-mix(in srgb, var(--slot-ring) 70%, var(--panel));
  animation: slot-wait 2.8s ease-in-out infinite;
}
@keyframes slot-wait { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .match-slot.next .match-face { animation: none; } }

/* A card with both slots full: each slot is the button that puts this fighter in its
   place. Replacing a fighter is the second thing to do here, not the first: a soft
   ground in the slot's tint with ink on it reads at any size, in either arena, and
   the slot's colour stays on as a thin edge. */
.match-slot.swap {
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink);
  min-height: 68px; padding: 6px 22px 6px 10px; border-radius: var(--radius);
  background: var(--slot-soft); border: 1.5px solid color-mix(in srgb, var(--slot-ring) 55%, var(--panel));
}
.slot-right.swap { padding: 6px 10px 6px 22px; }
.match-slot.swap .match-name { font: inherit; }
@media (hover: hover) { .match-slot.swap:hover { border-color: var(--slot-ring); } }

/* A filled slot and the × that takes its fighter out again travel as one (owner's
   note, 2026-09-28: "a clear fighter ... so that either can easily be cleared out"). The
   × is on the outer side, away from the middle button, so a finger going for FIGHT or
   Pick never meets it. A 56px target showing a 28px disc and no ring, like the header's
   icons; under the pointer the disc darkens and the face it would clear fades back. */
.match-pick { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pick-left  { grid-area: left; justify-self: end; flex-direction: row-reverse; }
.pick-right { grid-area: right; justify-self: start; }
.slot-clear {
  flex: 0 0 auto; position: relative; isolation: isolate;
  width: var(--tap); height: var(--tap); min-width: 0; min-height: 0; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; background: none; color: var(--muted); transition: color .16s ease;
}
.slot-clear::before, .slot-clear::after {
  content: ''; position: absolute; inset: 14px; border-radius: 50%; pointer-events: none;
}
.slot-clear::before {
  z-index: -1; background: color-mix(in srgb, var(--ink) 7%, var(--panel));
  transition: background-color .16s ease, transform .12s ease;
}
.slot-clear .icon { transition: transform .12s ease; }
.slot-clear:active::before, .slot-clear:active .icon { transform: scale(.9); }
.slot-clear:focus-visible { outline: none; }
.slot-clear:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.match-face { transition: opacity .16s ease; }
@media (hover: hover) {
  .slot-clear:hover { color: var(--ink); }
  .slot-clear:hover::before { background: color-mix(in srgb, var(--ink) 14%, var(--panel)); }
  .match-pick:has(.slot-clear:hover) .match-face { opacity: .45; }
}
/* the check that marks the card on screen goes on the face's inner side, toward the
   middle, and leaves the outer side to the × */
.slot-right .match-face .slot-flag { right: auto; left: -6px; }

/* The screen's one button sits between the two faces: FIGHT on the album, Pick on a
   card, and FIGHT again on the card of a fighter already in. */
.match-mid { display: contents; }
.match-mid > * { grid-area: mid; justify-self: center; }
.match-mid .big-go { min-height: 68px; padding: 0 36px; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.match .big-go[disabled] { opacity: 1; background: var(--cream); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.pick.for-left  { background: var(--accent); }
.pick.for-right { background: var(--accent-2); }
/* Prime's second colour is brass, which carries ink, not white. The design pass paints
   every Prime .big-go oxblood further down this file, so this has to out-rank it. */
[data-arena="prime"] .pick.for-right { background: var(--accent-2); color: var(--ink); }
.pick-lead { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; }
/* The tier note: a tag riding on FIGHT's top edge, half on the button and half in the
   bar's padding above it. Under the button it made the bar 27px taller (owner's note,
   2026-09-28: "find a new spot for that badge so it does not increase the height").
   A ring in the bar's colour cuts it out of the button; it is drawn over the button
   even while that is pressed, and a tap on it goes through to FIGHT. */
.match-note {
  grid-area: mid; align-self: start; justify-self: center;
  position: relative; z-index: 1; transform: translateY(-50%); pointer-events: none;
  margin: 0; padding: 0 10px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 16px;
  box-shadow: 0 0 0 2px var(--panel);
  background: var(--accent-soft); color: var(--muted); white-space: nowrap;
}
.match-note.fair  { background: #E1EFE6; color: #256B44; }
.match-note.close { background: var(--sticky); color: #6F5300; }
.match-note.mis   { background: var(--line); color: var(--muted); }

/* Up to 900px there is no room for names beside the faces (the longest Pick, "Pick
   Jean-Claude Van Damme", is 265px, and "Schwarzenegger" alone 144px), so the bar
   is one row: the two faces either side of the button, under the thumb. The names
   are on the tiles and the card; here they are for the screen reader. With both
   slots full a card reads "Pick Tiger" first and puts the two slot buttons under
   the thumb. */
@media (max-width: 900px) {
  /* each side is as wide as what it holds (a face, or a face and its ×), never less,
     and the middle button takes what is left, up to 340px */
  .match {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 340px) minmax(min-content, 1fr);
    gap: 0 var(--space-3);
    padding: 12px var(--gutter-r) max(12px, env(safe-area-inset-bottom)) var(--gutter-l);
  }
  .match-slot:not(.swap) { padding: 4px; }
  .match-slot:not(.swap) .match-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .match-mid .big-go { width: 100%; padding: 0 12px; }
  .match.is-swap {
    grid-template-columns: repeat(2, minmax(0, 280px)); grid-template-areas: "mid mid" "left right";
    justify-content: center; gap: 8px;
  }
  /* Each slot button is a little tile, the face over its words, like the album's: beside
     the face a phone has 113px for words, and "Schwarzenegger" alone is 128. The pair
     stand the same height. */
  .match-slot.swap, .slot-right.swap {
    justify-self: stretch; align-self: stretch;
    flex-direction: column; justify-content: center; text-align: center;
    padding: 8px 10px; gap: 4px; font-size: 16px; line-height: 1.15;
  }
  .match-slot.swap .match-face { width: 32px; height: 32px; }
  .match-slot.swap .match-name { -webkit-line-clamp: unset; overflow-wrap: break-word; }
}
/* A phone has no room for a 56px × beside each face without squeezing the button to a
   sliver, so there the × is 44px (the platform's own minimum) and the gaps close to
   8px: FIGHT keeps 138px on a 390px phone. Narrower still, the button drops its ▶ and
   then the tier note goes, and FIGHT keeps 88px at 320. */
@media (max-width: 600px) {
  .match { column-gap: var(--space-2); }
  .slot-clear { width: 44px; height: 44px; }
  .slot-clear::before, .slot-clear::after { inset: 8px; }
}
@media (max-width: 374px) {
  .match-mid .go-fight .icon { display: none; }
}
@media (max-width: 359px) {
  .match {
    column-gap: 4px;
    padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
  }
  .match-note { display: none; }
}

/* ---- the album: picture filters, then one grid ---- */
.album-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); min-width: 0; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.album-chip { min-height: 68px; min-width: 68px; padding: 0 22px; font-size: 18px; }
.album-chip .icon { flex: 0 0 auto; }
.album-chip.on { background: var(--bucket-accent, var(--accent-soft)); border-color: var(--ink); font-weight: 700; }
.album-chip.ready { margin-left: auto; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }

.album-legend {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--space-2); font-size: 16px; color: var(--muted);
}
.album-legend .icon, .tile-star { color: #C28A00; }

.album-grid, .ready-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.album-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.album-grid > li, .ready-grid > li { min-width: 0; display: flex; }
.tile {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 105px; padding: 8px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: inherit; text-decoration: none;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
/* the tile is the frame, so the plate inside it does not draw a second one */
.tile .plate { perspective: none; }
.tile .plate-mat { border: 0; border-radius: 10px; }
.tile-name { font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.tile.in-left  { border-color: var(--accent);   box-shadow: 0 0 0 2px var(--accent);   background: var(--accent-soft); }
.tile.in-right { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2); background: var(--accent-2-soft); }
/* a check in the slot's colour: on a tile in the fight, and on its face in the bar */
.slot-flag {
  position: absolute; top: -8px; right: -8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--accent);
}
.slot-flag.right { background: var(--accent-2); }
.tile-star { position: absolute; top: 12px; left: 12px; display: flex; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)); }
@media (hover: hover) { .tile:hover, .ready-card:hover { border-color: var(--ink); transform: translateY(-2px); } }

/* ready fights: both plates, a vs, both names; one tap to a fight */
.ready-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.ready-card {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: inherit; text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}
.ready-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.ready-card .plate { perspective: none; }
.ready-card .plate-mat { border: 0; }
.ready-names { text-align: center; font-size: 18px; font-weight: 700; line-height: 1.25; }
.ready-names em { font-style: normal; color: var(--muted); font-weight: 400; }
.vs-small { font-family: var(--font-display); font-size: 20px; color: var(--muted); }

/* ---- the card ---- */
.card { width: 100%; max-width: 1240px; margin: 0 auto; }
.card-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 68px; padding: 0 24px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: 18px; font-weight: 700; text-decoration: none;
}
.card-step { display: flex; gap: var(--space-2); }
.card-step .icon-toggle { width: 68px; height: 68px; text-decoration: none; }
@media (hover: hover) { .card-back:hover, .card-step .icon-toggle:hover { border-color: var(--ink); } }

.card-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: start; }
/* on a wide screen the picture keeps its place while the facts scroll beside it */
.card-art { position: sticky; top: var(--space-3); }

/* 7.6, revised 2026-09-12: no frame inside the frame. The plate sits on a warm
   stage with a soft pool of light under it, and the card is the only edge. */
.specimen-plate {
  position: relative; width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(ellipse 54% 30% at 50% 78%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 8%, #FFFFFF, transparent 70%),
    linear-gradient(176deg, var(--panel) 35%, var(--cream));
  box-shadow: inset 0 1px 0 #fff, 0 18px 34px -28px rgba(31, 27, 22, .55);
}

/* 5.7 as a drawing first and a sentence second: the row of "yous" is the fact */
.compared { margin-top: var(--space-3); text-align: center; }
.figures { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex-wrap: wrap; margin-bottom: var(--space-1); color: var(--accent); }
.figures .times { font-weight: 700; font-size: 24px; color: var(--ink); align-self: center; margin-left: var(--space-2); }
.compared-line { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; }
.compared-mass { font-size: 18px; color: var(--muted); margin: 2px 0 0; }

.card-head { margin-bottom: var(--space-3); }
.card-name { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; margin: 0 0 6px; }
.card-sub { font-size: 24px; font-style: italic; color: var(--muted); line-height: 1.25; margin: 0 0 4px; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-style: italic; color: var(--muted); font-size: 16px; margin: 0; }
.card-meta .era { font-style: normal; }
.card-meta:empty { display: none; }

/* the headline: the one fact written to surprise, first and biggest */
.headline { background: var(--accent-soft); border-radius: 20px; padding: var(--space-3) var(--space-4); }
.headline-label {
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 4px;
  /* the accent alone is 3.6:1 on its own tint; 8.7 asks for 4.5 */
  color: color-mix(in srgb, var(--accent) 68%, var(--ink));
}
.headline-text { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; }
[data-arena="prime"] .headline-label { font-family: var(--font-prime); letter-spacing: .14em; }

/* the six rows: the pictogram, its word, and the fact that decides that round */
.fact-rows { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; }
.fact-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3);
  align-items: start; padding: 14px 0; border-top: 1px solid var(--line);
}
.fact-row:first-child { border-top: 0; }
.fact-row > .icon { color: var(--accent); margin-top: 2px; }
.fact-label { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.fact-text { font-size: 24px; line-height: 1.3; margin: 2px 0 0; }

/* the grown-up layer: one tap down, never deeper (11.2 rule 5) */
.grownups { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.grownups summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-3);
  font-size: 16px; font-weight: 700; color: var(--muted);
  cursor: pointer; list-style: none; border-radius: var(--radius);
}
.grownups summary::-webkit-details-marker { display: none; }
.grownups summary .icon { transition: rotate .15s ease; }
.grownups[open] summary .icon { rotate: 90deg; }
.grownups-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3) var(--space-4); padding: var(--space-2) var(--space-3) var(--space-3); }
.section-label { font-family: var(--font-hand); font-size: 22px; font-weight: 400; color: var(--muted); margin: 0 0 var(--space-2); }
.section-label .aside { font-family: var(--font-body); font-size: 14px; letter-spacing: .04em; }
[data-arena="prime"] .section-label { font-family: var(--font-prime); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.tape { margin: 0; }
.tape-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--line); }
.tape-row:first-child { border-top: 0; }
.tape-row dt { color: var(--muted); font-size: 16px; }
.tape-row dd { margin: 0; font-weight: 700; font-size: 16px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.notes, .hot-take { font-size: 18px; margin: 0; }
.sources { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--muted); }

[data-arena="prime"] .slot-flag.right { color: var(--ink); }

/* a press answers at once, on every size */
.tile:active, .ready-card:active, .chip:active, .card-back:active, .match-slot.swap:active,
.reason:active, .door:active { transform: scale(.985); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* below 1000px Ready fights no longer fits the chips' row, and a chip pushed to the
   far end of a row of its own reads as lost */
@media (max-width: 1000px) { .album-chip.ready { margin-left: 0; } }

/* a tablet: the card's two columns a little closer */
@media (max-width: 1180px) {
  .card-body { gap: var(--space-4); }
}

/* below 900px the card is one column: the picture, then the words */
@media (max-width: 900px) {
  .card-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .card-art { position: static; }
  .specimen-plate { max-width: 560px; margin: 0 auto; }
  .card-head { text-align: center; }
  .card-meta { justify-content: center; }
}

/* a phone: the album three across, the card's words a size down */
@media (max-width: 620px) {
  .pick-screen { gap: var(--space-3); }

  /* seven chips as two tidy rows of picture-over-word, none of them hidden in a scroll */
  .album-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
  .album-chip { flex-direction: column; gap: 2px; min-width: 0; padding: 6px 4px; border-radius: var(--radius); font-size: 16px; }
  .album-chip.ready { margin-left: 0; grid-column: span 2; flex-direction: row; gap: 8px; }
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .tile { padding: 6px 6px 8px; gap: 4px; }
  .tile-name { font-size: 16px; }
  .tile-star { top: 8px; left: 8px; }
  .tile-star .icon { width: 18px; height: 18px; }
  .ready-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

  .card-back { padding: 0 20px 0 12px; }
  .headline { padding: var(--space-3); }
  .headline-text, .fact-text, .compared-line { font-size: 22px; }
  .card-sub { font-size: 20px; }
  .fact-row { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .fact-row > .icon { width: 28px; height: 28px; }
}

/* A landscape phone: less room above and below, so the pinned strip stays low; the
   button keeps 11.8's 68px. No note: its tag needs 8px above FIGHT and a little air, and here there are 8. */
@media (max-height: 500px) and (min-width: 621px) {
  .match { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .match-note { display: none; }
  /* a full card's two slot buttons stand either side of "Pick Tiger", in one row, each
     face beside its words: here it is height that is short, not width */
  .match.is-swap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "left mid right"; }
  .match-slot.swap { justify-self: end; flex-direction: row; text-align: left; gap: 10px; padding: 6px 18px 6px 8px; }
  .slot-right.swap { justify-self: start; flex-direction: row-reverse; text-align: right; padding: 6px 8px 6px 18px; }
  .match-slot.swap .match-face { width: 36px; height: 36px; }
  /* seven chips on one row: a second row would cost a fifth of a 393px screen */
  .album-chips { gap: 6px; }
  .album-chip { min-height: var(--tap); padding: 0 14px; font-size: 16px; gap: 7px; }
  .album-chip .icon { width: 20px; height: 20px; }
}

/* =========================== S0 landing (step 4) =========================== */

.landing { max-width: 1000px; margin: 0 auto; text-align: center; padding-top: var(--space-5); }
.landing-title { font-size: clamp(44px, 10vw, 88px); margin-bottom: var(--space-2); }
.landing-tagline { color: var(--muted); font-size: 20px; margin-bottom: var(--space-5); }

.doors { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); align-items: stretch; }

.door {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-5) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; min-height: 260px; position: relative;
}
.door-label { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); letter-spacing: .04em; }
.door-sub { font-size: 17px; opacity: .8; }

.door-wild { background: var(--panel); color: var(--ink); }
/* four plates as a 2 x 2 block: one per bucket, so the door shows the animals,
   the bugs and the dinosaurs its own tagline promises. */
.door-collage {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  margin: 0 auto var(--space-3); max-width: 300px; min-height: 96px;
}
.collage-plate { display: block; width: 100%; }
/* no frame: the door is the card, so the animals sit straight on it (owner's note, 2026-09-27) */
.collage-plate .plate-mat { border: 0; }
.collage-plate .plate-placeholder { border-radius: 8px; }

.door {
  transition: transform .12s ease;
}
/* The soft door is a one-second press. touch-action: none keeps the browser from
   turning a drifting finger into a scroll (which cancelled the hold), and the
   other three stop iOS from starting a text selection or a callout under it. */
.door-prime {
  background: var(--night); color: var(--spot);
  border-color: var(--night); font: inherit; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.door-prime .door-label { color: var(--brass, #C9A24D); }
.door-hint {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .7;
}
.hold-ring { display: block; margin-bottom: var(--space-2); color: var(--brass, #C9A24D); }
.ring-track { stroke: currentColor; opacity: .25; }
.ring-fill  { stroke: currentColor; }
.door-prime.holding { outline: 2px solid var(--brass, #C9A24D); outline-offset: 3px; }

/* 2.2 S0 footer: About the facts, sound, units */
.landing-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) 0 max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 16px;
}
.landing-foot a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--space-2); text-decoration: none;
}

@media (max-width: 800px) {
  .doors { grid-template-columns: 1fr; gap: var(--space-3); }
  .door-collage { max-width: 220px; }
  .door { min-height: 200px; padding: var(--space-4) var(--space-3); }
  .door-collage { max-width: 200px; margin-bottom: var(--space-2); }
  .landing { padding-top: var(--space-3); }
  .landing-tagline { font-size: 18px; margin-bottom: var(--space-3); }
  .landing-foot { margin-top: var(--space-4); }
}

/* ====================== design pass (step 5) ====================== */

/* pictograms sit with their labels, never alone (7.2: never colour-only) */
.round-attr { display: inline-flex; align-items: center; gap: var(--space-3); justify-content: center; text-wrap: balance; }
.round-attr .icon { flex: 0 0 auto; }
.round-attr .icon { color: var(--spot); }
.reason { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2); }
.reason .icon { color: currentColor; }

/* 7.1 / 7.8: the arena at night, with a warm spotlight in Wild and a harder
   white one in Prime over a faint rope-line motif */
/* The glow is painted by the body, which grows with the page, and painted once:
   on the root it was hidden under the body's own night for the first screen and
   then repeated at every screen height below, so a long verdict showed a second
   spotlight halfway down. The root is plain night for whatever lies past the body. */
[data-scene="arena"] { background: var(--night); }
[data-scene="arena"] body {
  height: auto; min-height: 100%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(243,227,192,.20), transparent 70%),
    var(--night);
  background-repeat: no-repeat;
}
[data-arena="prime"][data-scene="arena"] body {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,.16), transparent 68%),
    repeating-linear-gradient(180deg, transparent 0 58px, rgba(201,162,77,.07) 58px 60px),
    var(--night);
  background-repeat: no-repeat;
}
[data-arena="prime"] .fight-prompt,
[data-arena="prime"] .winner-name,
[data-arena="prime"] .rematch-head { font-family: var(--font-prime); text-transform: uppercase; letter-spacing: .03em; }
[data-arena="prime"] .tier { color: var(--brass); }
[data-arena="prime"] .big-go { background: var(--accent); border-color: var(--brass); }

.verdict-phase .spotlight { animation: spot-in .6s ease both; }
@keyframes spot-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .verdict-phase .spotlight, .flash-check { animation: none; }
}

/* The fight card's picture sits straight on the card, as the door's animals do: the
   card is the frame, and a hairline round the picture inside it was a second one
   (owner's note, 2026-09-28). The mat and the art are the card's own --panel, so no
   box shows where the edge was. */
.fighter-card .plate-mat { border: 0; border-radius: 10px; }

/* 8.7: focus must stay visible on the night backdrop too */
[data-scene="arena"] :focus-visible { outline-color: var(--spot); }

/* ================== S3 how we decide / S4 about (step 6) ================== */

.prose { max-width: 70ch; margin: 0 auto; }
.prose h2 { margin-top: var(--space-5); }
.prose .lede { font-size: 21px; color: var(--muted); }
.prose .small { font-size: 15px; color: var(--muted); }

.attr-explain { list-style: none; margin: 0; padding: 0; }
.attr-explain li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
}
.attr-explain-icon { flex: 0 0 auto; color: var(--accent); }
.attr-explain p { margin: 4px 0 0; color: var(--muted); }

.table-scroll { overflow-x: auto; }
.rubric-table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 620px; }
.rubric-table th, .rubric-table td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;
}
.rubric-table thead th { background: var(--accent-soft); font-size: 14px; }
.rubric-table tbody th { text-align: center; font-size: 18px; width: 3em; }

.weight-bars { list-style: none; margin: 0; padding: 0; }
.weight-bars li { display: flex; align-items: center; gap: var(--space-3); padding: 5px 0; }
.weight-name { flex: 0 0 10em; font-size: 16px; }
.weight-bar { height: 14px; width: var(--w); background: var(--accent); border-radius: 7px; }
.weight-num { font-weight: 700; font-variant-numeric: tabular-nums; }

.tier-list { margin: 0; }
.tier-list div { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.tier-list dt { font-weight: 700; }
.tier-list dd { margin: 0; color: var(--muted); }

.honesty li { margin-bottom: var(--space-2); }
.tell-dad {
  font-family: var(--font-hand); font-size: 26px;
  margin-top: var(--space-5); color: var(--accent);
}
[data-arena="prime"] .tell-dad { font-family: var(--font-prime); font-size: 18px; text-transform: uppercase; }

@media (max-width: 600px) {
  .weight-name { flex-basis: 7em; font-size: 15px; }
}

/* ---- 8.4 3D viewer: only present when a record has a model ---- */
.viewer3d { position: relative; width: 100%; border-radius: 8px; overflow: hidden; }
.viewer3d canvas { display: block; width: 100%; height: auto; touch-action: none; }
.specimen-plate.has-3d .plate { display: none; }   /* the model replaces the plate */
.reset-view {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font-size: 14px;
}

/* ==================== the round (owner's notes of 2026-09-13) ====================
   "add some art and action scenes", "animations instead of showing the score right
   away", "make sure all the spacing is uniform". The stage is one big button above
   the scorecard: both fighters on the arena floor, a tap plays the round's scene, a
   tap after that plays it again. The scorecard under it is one grid, so the two
   fighters' facts, bars and checks share rows; each fighter's head sits beside its
   name and the bars take the two fighter colours. One 16px beat separates every part
   of the round on every screen, and the count sits tight above its title.
   Everything here is prefixed round-: the library owns ".stage". */
.rounds-phase { display: flex; flex-direction: column; gap: 12px; }
.rounds-phase > :not(.action-bar) { margin: 0; }
.rounds-phase .round-count { margin: 0; }
.round-top { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: calc(6px - var(--space-3)) !important; }

/* 11.6: the tracker. Six pictograms in the order the rounds are played, each filling
   with its winner's colour as it is decided, so by round six the player has watched
   the checklist build itself. Their words show where there is room for them. */
.round-tracker { list-style: none; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; }
.track { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 38px; }
.track-dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(243, 227, 192, .28); color: rgba(243, 227, 192, .5);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.track-word { font-size: 14px; color: rgba(243, 227, 192, .62); display: none; white-space: nowrap; }
.track.is-now .track-dot { border-color: var(--spot); color: var(--spot); box-shadow: 0 0 0 4px rgba(243, 227, 192, .16); }
.track.is-now .track-word { color: var(--spot); }
.track.is-won-a .track-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.track.is-won-b .track-dot { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
[data-arena="prime"] .track.is-won-b .track-dot { color: var(--night); }
.track.is-even .track-dot { border-style: dashed; border-color: rgba(243, 227, 192, .6); color: rgba(243, 227, 192, .8); }
@media (min-width: 901px) { .track-word { display: block; } .track { min-width: 62px; } }

/* ---- the stage ---- */
.round-stage {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid rgba(243, 227, 192, .16); border-radius: var(--radius);
  overflow: hidden; background: var(--night); color: var(--spot);
  cursor: pointer; text-align: center;
}
.round-stage-canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; max-height: 34vh; }
.round-stage-cue {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 18px; border-radius: 999px;
  background: var(--spot); color: var(--night);
  font-weight: 700; font-size: 18px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  animation: cue-pulse 1.4s ease-in-out infinite;
  pointer-events: none; max-width: calc(100% - 24px);
}
.round-stage-cue .icon { color: var(--night); flex: 0 0 auto; }
/* After the first play the pill is the quiet "Play it again" for good (fight.js never
   takes is-done off again): it fades back in when a film ends, and a replay fades it out
   in that same dress. is-playing comes second so its quicker fade wins while both apply. */
.round-stage.is-done .round-stage-cue {
  background: rgba(18, 16, 14, .55); color: var(--spot);
  border: 1px solid rgba(243, 227, 192, .45); box-shadow: none; animation: none;
  font-size: 15px; min-height: 36px; padding: 4px 14px;
  transition: opacity .35s ease;
}
.round-stage.is-done .round-stage-cue .icon { color: var(--spot); }
.round-stage.is-playing .round-stage-cue { opacity: 0; animation: none; transition: opacity .2s ease; }
/* reduced motion: the stage is a still of the round's end, not a control */
.round-stage.is-still .round-stage-cue { display: none; }
.round-stage[disabled] { cursor: default; }
@keyframes cue-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}
[data-arena="prime"] .round-stage { border-color: rgba(201, 162, 77, .3); }
[data-arena="prime"] .round-stage-cue { font-family: var(--font-prime); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }

/* ---- the scorecard ----
   While the question is being asked it holds the two faces and nothing else. When the
   scene starts the two bars appear and race; when it lands the two facts arrive under
   them, the largest words on the screen, with the check on the one that takes it.
   One grid, so both fighters' heads, bars and facts share rows and the bars line up.
   The bar sits above the fact so that the fact's arrival moves nothing. */
.round-card {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
  column-gap: var(--space-4); row-gap: 0;
  background: var(--panel); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4); text-align: left;
}
.round-side { display: contents; }   /* its three parts are the grid's items */
/* Placed by hand, not by auto-flow: while the question is being asked only the two heads
   exist, and auto-flow would stack them in one column. */
.round-side[data-side="a"] > * { grid-column: 1; }
.round-side[data-side="b"] > * { grid-column: 2; }
.round-side > .round-head { grid-row: 1; }
.round-side > .bar-wrap   { grid-row: 2; }
.round-side > .round-fact { grid-row: 3; }
.round-head { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: 56px; }
.round-side[data-side="a"] .round-head { flex-direction: row-reverse; text-align: right; }
.round-head h3 { margin: 0; color: var(--ink); font-size: 24px; line-height: 1.15; min-width: 0; }
.round-face {
  display: block; width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%; overflow: hidden; background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.round-side[data-side="b"] .round-face { background: var(--accent-2-soft); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent-2); }
.round-face .plate { height: 100%; perspective: none; }
.round-face .plate-mat { height: 100%; border: 0; border-radius: 0; background: none; }
.round-face .plate-art { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* the two bars meet in the middle: A's grows leftward and keeps its number on the
   outside, B's grows rightward */
.round-side .bar-wrap { margin: var(--space-2) 0 0; animation: rise-in .3s ease both; }
.round-side[data-side="a"] .bar-wrap { flex-direction: row-reverse; }
.round-side .bar-num { min-width: 1.3em; text-align: center; }
.round-side .bar-wrap[hidden], .round-fact[hidden] { display: none; }
.bar-num.is-set { animation: num-pop .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes num-pop { from { transform: scale(1.5); } to { transform: none; } }

/* 11.8: the fact is kid-layer text: 24px, never under 22, the numbers in bold */
.round-fact { font-size: 24px; line-height: 1.3; margin: var(--space-3) 0 var(--space-2); animation: rise-in .4s ease both; transition: color .25s ease; }
.round-side[data-side="a"] .round-fact { text-align: right; }
.round-card.landed .takes-it .round-fact { color: var(--check); }
/* 11.6: the check lands on the winning fact. It keeps its place from then on, so a
   replay never reflows the fact: it lifts off as the replay starts and drops back in
   when the round lands again. (Before the first landing the whole fact is hidden.) */
.round-check {
  display: inline-grid; vertical-align: -5px; margin: 0 8px 0 0;
  width: 30px; height: 30px; border-radius: 50%; place-items: center;
  background: var(--check); color: var(--panel);
  animation: check-off .2s ease-in both;
}
.round-card.landed .takes-it .round-check { animation: check-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes check-in { from { opacity: 0; transform: translateY(-10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes check-off { to { opacity: 0; transform: scale(.6); } }

/* the line between the stage and the card: the answer to the call, the headline of the
   reveal, with the card under it as the evidence. It keeps its height while empty. */
.round-verdict { color: var(--spot); font-size: 24px; line-height: 1.25; min-height: 1.3em; scroll-margin-top: 10px; }
.round-verdict.is-in { animation: rise-in .35s ease both; }
.round-verdict .called { color: #8FD6A8; }
.round-verdict .surprise { color: #F6CF6A; }

/* ---- the landing, choreographed (owner's note of 2026-09-28: "way more dynamic") ----
   After the check drops on the stage, a token in the winner's colour flies up in an arc
   into the round's place in the tracker (fight.js flyToTracker), and the tracker's
   pictogram stamps in with a ring. The winning bar catches a sheen. "You called it!"
   slams in; "Surprise!" wobbles. The global reduced-motion rule in base.css stills all
   of it, and fight.js skips the flight there. */
.rounds-phase { position: relative; }
.round-token {
  position: absolute; z-index: 6; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 3px rgba(255, 253, 248, .9), 0 0 20px 5px color-mix(in srgb, var(--accent) 70%, transparent);
}
.round-token.for-b { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(255, 253, 248, .9), 0 0 20px 5px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.round-token.for-even { background: var(--spot); box-shadow: 0 0 0 3px rgba(18, 16, 14, .5), 0 0 16px 4px rgba(243, 227, 192, .5); }
.track-dot { position: relative; }
.track.just-landed .track-dot { animation: track-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.track.just-landed .track-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid currentColor; pointer-events: none;
  animation: track-ring .7s ease-out both;
}
@keyframes track-stamp { from { transform: scale(1.6); } to { transform: none; } }
@keyframes track-ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.round-side .sbar { position: relative; }
.round-card.landed .takes-it .sbar::after {
  content: ''; position: absolute; inset: -3px -2px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat;
  background-size: 240% 100%; mix-blend-mode: soft-light;
  animation: bar-sheen .9s ease-out .12s both;
}
@keyframes bar-sheen { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.round-side[data-side="b"] .round-fact { animation-delay: .07s; }
.round-verdict.is-in .called, .round-verdict.is-in .surprise { display: inline-block; }
.round-verdict.is-in .called { animation: called-in .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.round-verdict.is-in .surprise { animation: surprise-in .75s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes called-in {
  0% { opacity: 0; transform: scale(1.9) rotate(-5deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes surprise-in {
  0% { opacity: 0; transform: scale(.5); }
  40% { opacity: 1; transform: scale(1.12) rotate(5deg); }
  62% { transform: rotate(-4deg); }
  82% { transform: rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

/* Next round pressed before the scores landed: the button scores the round first */
.big-go.is-waiting[disabled] { opacity: 1; cursor: progress; }
.big-go.is-waiting .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the round's one button stays at the thumb on every screen, so a short laptop
   window never hides Next round under the fold */
.rounds-phase .action-bar,
.verdict-phase .action-bar {
  position: sticky; bottom: 0; z-index: 3;
  margin: 0 calc(var(--gutter-r) * -1) 0 calc(var(--gutter-l) * -1);
  padding: 14px var(--gutter-r) max(12px, env(safe-area-inset-bottom)) var(--gutter-l);
  background: linear-gradient(to bottom, rgba(18, 16, 14, 0), var(--night) 45%);
}
/* 11.7: Next fight, Rematch and Pick again are on screen from the verdict's first
   frame at every width; a laptop used to open the verdict with no button in view. */
.verdict-phase .action-bar { margin-top: var(--space-3); }
@media (min-width: 601px) {
  .rounds-phase .action-bar {
    background: radial-gradient(ellipse 42% 100% at 50% 100%, var(--night) 45%, rgba(18, 16, 14, 0) 100%);
  }
  .verdict-phase .action-bar {
    background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--night) 50%, rgba(18, 16, 14, 0) 100%);
  }
}

/* the round itself arrives: the count, the label, the stage, then the card */
.rounds-phase .round-count, .rounds-phase .round-attr, .rounds-phase .round-card, .rounds-phase .round-verdict { animation: rise-in .45s ease both; }
.rounds-phase .round-stage { animation: fade-in .45s ease both; animation-delay: .12s; }
.rounds-phase .round-attr { animation-delay: .06s; }
.rounds-phase .round-card { animation-delay: .2s; }
.rounds-phase .round-verdict { animation-delay: .3s; }
.rounds-phase .round-attr .icon { animation: pop-in .5s cubic-bezier(.2, 1.4, .4, 1) .18s both; }
.rounds-phase .round-verdict.is-in { animation: rise-in .35s ease both; }   /* after the entrance rule, so the answer rises too */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { transform: scale(.5); } to { transform: none; } }

/* a short window (a laptop at 720px, a landscape phone): a lower stage, so the card
   and the button share the screen with it */
/* a landscape tablet: the landed card and Next both on the screen */
@media (max-height: 860px) {
  .round-stage-canvas { max-height: 30vh; }
  .track-word { display: none !important; }
  .track { min-width: 38px !important; }
}
@media (max-height: 800px) {
  .round-stage-canvas { max-height: 27vh; }
  .round-attr { font-size: clamp(24px, 3.6vw, 32px); }
  .round-attr .icon { width: 28px; height: 28px; }
  .track-word { display: none !important; }
  .track { min-width: 38px !important; }
  .round-head { min-height: 48px; }
  .round-face { width: 46px; height: 46px; flex-basis: 46px; }
  .round-fact { margin-top: 10px; }
  .rounds-phase .action-bar { padding-top: 8px; }
}

/* phones: the two fighters stack, with a hairline between them; the check is the
   badge alone, and the line under the card carries its words */
@media (max-width: 600px) {
  .round-stage-canvas { aspect-ratio: 4 / 3; max-height: 44vh; }
  .round-stage-cue { font-size: 16px; padding: 5px 14px; min-height: 40px; }
  .round-card { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; padding: var(--space-3); }
  .round-side { display: block; }
  .round-side > * { grid-column: auto !important; grid-row: auto !important; }
  .round-side[data-side="b"] { border-top: 1px solid var(--line); padding-top: var(--space-2); margin-top: var(--space-2); }
  /* stacked, the two sides read the same way: face, name, bar, fact, all from the left */
  .round-side[data-side="a"] .round-head { flex-direction: row; text-align: left; }
  .round-side[data-side="a"] .bar-wrap { flex-direction: row; }
  .round-side[data-side="a"] .round-fact { text-align: left; }
  .sbar.mirror { flex-direction: row; --dir: to right; }
  .sbar.mirror i:nth-child(5) { margin-left: 0; margin-right: 7px; }
  .round-head { min-height: 48px; }
  .round-face { width: 44px; height: 44px; flex-basis: 44px; }
  .round-head h3 { font-size: 20px; }
  .round-fact { font-size: 22px; margin: 10px 0 4px; }
  .round-verdict { font-size: 20px; }
  /* a phone has no height to hold open for a line that is not there yet; when the line
     arrives the answer takes the screen anyway (fight.js scrolls it to the top) */
  .round-verdict:empty { min-height: 0; }
  .track-dot { width: 30px; height: 30px; }
  .track { min-width: 32px; }
  .round-tracker { gap: 6px; }
}
/* a short phone (an iPhone SE): the two faces stay clear of Next while the question is asked */
@media (max-width: 600px) and (max-height: 700px) {
  .round-stage-canvas { max-height: 36vh; }
}
@media (prefers-reduced-motion: reduce) {
  .round-stage-cue { animation: none; }
}