/* ── Arena ───────────────────────────────────────────────────────────────────
   The competitive mode. Same flatness as the rest of the app — one hairline, two
   surfaces, one accent — with one addition the solo screens never needed: TWO
   sides. Wherever the player and the opponent appear together, the player wears
   --vs-mine (the accent, which is already "you" everywhere else) and the
   opponent wears --vs-theirs. That pairing is the only new idea here; everything
   else composes tokens and the existing primitives.

   Composes: tokens.css → base.css → components.css. No new values. */

/* ── line icons outside a button ──────────────────────────────────────────────
   The app's ICON.* set is drawn to be STROKED, but the fill:none/stroke rule
   lives on `.icon-btn svg`. Every ICON used elsewhere — the tab bar, the action
   cards, the moments, the submit and result marks — needs the same treatment or
   it renders as a solid black shape: a blob in the light, invisible in the dark.
   The two fill-based marks (avatars, game marques) are excluded by class. */
.tab-ic svg,
.ah-act-ic svg, .ah-setup > svg,
.am-submit svg, .am-go svg, .am-giveup svg,
.am-moment-mark svg, .am-re-mark svg, .am-final-x svg,
.ai-fig svg, .ai-acts .pill svg,
.afr-search-ic svg, .afr-add svg, .afr-link-acts .pill svg,
.af-vs svg,
.am-done-acts .pill svg {
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══ the bottom tabs ═════════════════════════════════════════════════════ */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-chrome);
  display: flex;
  background: var(--surface);
  border-top: var(--hairline) solid var(--line);
  padding-bottom: var(--sab);
}
.tabbar[hidden] { display: none; }

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2) var(--space-3);
  background: none;
  border: 0;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--t);
}
.tab-ic { display: block; }
.tab-ic svg { width: var(--icon-lg); height: var(--icon-lg); }
.tab-l {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.tab:hover { color: var(--dim); }
.tab.on { color: var(--accent); }

/* The bar floats over the page, so the page has to end above it. */
body.has-tabbar .scroll { padding-bottom: calc(var(--space-11) + 24px + var(--sab)); }

/* ══ avatars ═════════════════════════════════════════════════════════════ */

.av { display: block; flex: none; }
/* the flame frames get a soft glow in their own colour (--fr is set inline). */
.av-flame { filter: drop-shadow(0 0 2px var(--fr)); }
@media (prefers-reduced-motion: reduce) { .av-flame { filter: none; } }
.av-chip { display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; }
.av-chip-t { display: flex; flex-direction: column; min-width: 0; }
.av-chip-t strong {
  font-size: var(--text-lg);
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-chip-t small { font-size: var(--text-xs); color: var(--mute); font-family: var(--font-mono); }

/* ══ profile setup ═══════════════════════════════════════════════════════ */

.nav-sub { display: block; font-size: var(--text-2xs); color: var(--mute); font-weight: 400; }

.ap { max-width: 460px; margin: 0 auto; padding: var(--space-6) 0; }
/* Sits BELOW the save button now — it explains why the screen exists, which is
   context you want after the form, not a wall of text before it. */
.ap-intro { color: var(--mute); font-size: var(--text-sm); line-height: var(--leading-prose);
  margin: var(--space-8) 0 0; text-align: center; }

.ap-preview {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.ap-preview-n {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-label);
  color: var(--text);
}

.ap-field { display: block; margin-bottom: var(--space-8); }
.ap-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--space-4);
}
.ap-input {
  width: 100%;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-label);
}
.ap-input:focus { outline: none; border-color: var(--accent); }
.ap-note {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--mute);
  min-height: 1.2em;
}
.ap-note.bad { color: var(--danger-text); }
.ap-note.good { color: var(--success-text); }

.ap-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-3); }
.ap-av {
  display: grid; place-items: center;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.ap-av:hover { border-color: var(--line-2); }
.ap-av.on { border-color: var(--accent); background: var(--accent-dim); }

.ap-label-sub { text-transform: none; letter-spacing: var(--tracking-none); color: var(--mute); font-weight: 400; }
.ap-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: var(--space-3); }
.ap-frame {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.ap-frame:hover:not(.locked) { border-color: var(--line-2); }
.ap-frame.on { border-color: var(--accent); background: var(--accent-dim); }
.ap-frame.locked { opacity: 0.5; cursor: default; }
.ap-frame-l {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--mute);
  display: inline-flex; align-items: center; gap: 2px; text-align: center;
}
.ap-frame-l svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }

.ap-save { width: 100%; justify-content: center; }

.ap-stats, .am-stats { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.ap-stat {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.ap-stat strong { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text); }
.ap-stat span {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}

/* ══ challenges home ═════════════════════════════════════════════════════ */

/* Every arena screen below lives INSIDE .scroll, which already supplies the
   24px side gutter — so none of them may add their own, or the column sits
   ~40px in while the hub sits at 24 and switching tabs visibly jumps. Vertical
   padding is theirs; horizontal is not. The top offset matches .hub-scroll
   exactly (space-9 + the notch), which is the reference the solo side sets.
   --wrap keeps the header aligned with the list under it and with the hub. */
.ah-top {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: calc(var(--space-9) + var(--sat)) 0 0;
  max-width: var(--wrap); margin-inline: auto;
}
.ah-me { flex: 1; min-width: 0; }
.ah-top-acts { display: flex; gap: var(--space-2); }

.ah-mecard, .ah-setup {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%;
  padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
}
.ah-setup {
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--accent-line);
  border-radius: var(--radius);
}
.ah-setup svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--accent); flex: none; }
.ah-setup span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ah-setup strong { font-size: var(--text-lg); color: var(--text); }
.ah-setup small { font-size: var(--text-xs); color: var(--mute); }

.ah-me-t { display: flex; flex-direction: column; min-width: 0; }
.ah-me-k {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--mute);
}
.ah-me-t strong { font-size: var(--text-2xl); color: var(--text); }

.ah { padding: var(--space-6) 0; max-width: var(--wrap); margin-inline: auto; }
.ah-sec {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--mute);
  margin: var(--space-8) 0 var(--space-4);
}

.ah-acts, .ah-list { display: flex; flex-direction: column; gap: var(--space-3); }

.ah-act, .ah-resume {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  color: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--t), background var(--t);
}
.ah-act:hover, .ah-resume:hover { border-color: var(--line-2); background: var(--surface-2); }
.ah-act.primary { border-color: var(--accent-line); }
.ah-act.primary:hover { background: var(--accent-dim); }

.ah-act-ic { display: grid; place-items: center; width: var(--control); height: var(--control); flex: none; color: var(--accent); }
.ah-act-ic svg { width: var(--icon-lg); height: var(--icon-lg); }
.ah-act-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ah-act-k {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}
.ah-act-t strong { font-size: var(--text-lg); color: var(--text); }
.ah-act-t small { font-size: var(--text-xs); color: var(--dim); }
.ah-act-go { color: var(--mute); flex: none; }
.ah-act-go svg { width: var(--icon); height: var(--icon); }

.ah-resume { border-color: var(--accent-line); background: var(--accent-dim); }
.ah-resume-dot {
  width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full);
  background: var(--accent); flex: none;
}

.ah-inv {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--accent-line);
  border-radius: var(--radius);
}
.ah-inv-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ah-inv-t strong { font-size: var(--text-lg); color: var(--text); }
.ah-inv-t small { font-size: var(--text-xs); color: var(--mute); }
.ah-yes { flex: none; }
.ah-no { flex: none; }


.ah-fair {
  margin-top: var(--space-7);
  color: var(--mute);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  text-align: center;
}

/* ══ finding an opponent ═════════════════════════════════════════════════ */

.af { padding: var(--space-9) 0; text-align: center; max-width: var(--wrap); margin-inline: auto; }
.af-stage { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.af-vs { color: var(--mute); }
.af-vs svg { width: var(--icon-lg); height: var(--icon-lg); }
.af-them {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  border: var(--hairline) dashed var(--line-2);
}
.af-q { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--mute); }
.af-searching { animation: af-pulse 1.6s var(--ease) infinite; }
@keyframes af-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.af-h { font-size: var(--text-xl); color: var(--text); margin-bottom: var(--space-3); }
.af-sub { color: var(--dim); line-height: var(--leading-prose); }
.af-dots { display: flex; gap: var(--space-3); justify-content: center; margin: var(--space-7) 0; }
.af-dots i {
  width: var(--space-3); height: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--mute);
  animation: af-pulse 1.2s var(--ease) infinite;
}
.af-dots i:nth-child(2) { animation-delay: 0.2s; }
.af-dots i:nth-child(3) { animation-delay: 0.4s; }
.af-cancel { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .af-searching, .af-dots i { animation: none; }
}

/* ══ friends ═════════════════════════════════════════════════════════════ */

.afr { padding: var(--space-6) 0; max-width: var(--wrap); margin-inline: auto; }
.afr-search {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
}
.afr-search:focus-within { border-color: var(--accent); }
.afr-search-ic { color: var(--mute); display: flex; }
.afr-search-ic svg { width: var(--icon); height: var(--icon); }
.afr-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-lg);
}
.afr-search input:focus { outline: none; }

.afr-list { display: flex; flex-direction: column; gap: var(--space-3); }
.afr-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.afr-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.afr-t strong { font-size: var(--text-lg); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afr-t small { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--mute); }
.afr-play, .afr-add { flex: none; }
.afr-add svg { width: var(--icon-sm); height: var(--icon-sm); }
.afr-sent { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--mute); }
.afr-cancel { flex: none; }
.afr-none { color: var(--mute); font-size: var(--text-base); line-height: var(--leading-prose); padding: var(--space-5) 0; }

/* your personal invite link, at the top of the friends screen */
.afr-link {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.afr-link-t { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.afr-link-t strong { color: var(--text); font-size: var(--text-lg); }
.afr-link-t small { color: var(--dim); font-size: var(--text-sm); line-height: var(--leading-prose); }
.afr-link-acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.afr-link-acts .pill { display: inline-flex; align-items: center; gap: var(--space-2); }
.afr-link-acts .pill svg { width: var(--icon-sm); height: var(--icon-sm); }

/* friend-count chip beside the "Your friends" heading, amber at the ceiling */
.afr-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--mute); letter-spacing: 0; text-transform: none; }
.afr-count.full { color: var(--accent); }
.afr-cap {
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--accent-line); border-radius: var(--radius);
  background: var(--surface); color: var(--dim);
  font-size: var(--text-sm); line-height: var(--leading-prose);
}
.afr-remove-note { margin-top: var(--space-4); color: var(--danger-text); font-size: var(--text-sm); line-height: var(--leading-prose); }

/* ══ invite links ════════════════════════════════════════════════════════ */

.ai { padding: var(--space-9) 0; text-align: center; max-width: 460px; margin: 0 auto; }
.ai-copy { color: var(--dim); line-height: var(--leading-prose); margin: 0 0 var(--space-8); }
.ai-fig { color: var(--accent); margin-bottom: var(--space-6); }
.ai-fig svg { width: 48px; height: 48px; margin: 0 auto; }
.ai-h { font-size: var(--text-xl); color: var(--text); margin-bottom: var(--space-4); }
.ai-sub { color: var(--dim); line-height: var(--leading-prose); }
.ai-code {
  margin: var(--space-7) 0;
  padding: var(--space-5);
  background: var(--surface-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.ai-url {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--text);
  word-break: break-all;
}
.ai-acts { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.ai-acts .pill { display: inline-flex; align-items: center; gap: var(--space-3); }
.ai-acts .pill svg { width: var(--icon-sm); height: var(--icon-sm); }
.ai-note { margin-top: var(--space-7); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--mute); }

/* the player card on the add-friend landing screen */
.ai-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: var(--space-7) 0; }
.ai-card-n { font-size: var(--text-xl); color: var(--text); }

/* ══ the match ═══════════════════════════════════════════════════════════ */

.arena-match { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ── the VS banner ────────────────────────────────────────────────────────────
   The one thing always on screen. A slim control bar (leave + where-you-are)
   over two signal plates — mine amber, theirs cyan — meeting at a VS node. The
   phase timer drains along the very top edge. Flat, hairline, one accent per
   side; the app's own material, not a sports scoreboard. */
.am-vs {
  position: relative;
  flex: none;
  background: var(--surface);
  border-bottom: var(--hairline) solid var(--line);
  overflow: hidden;
  padding-top: var(--sat);   /* the banner sits under the notch otherwise */
}
/* the draining timer rides just below the safe area, not up under the status bar */
.am-vs-timer { position: absolute; top: var(--sat); left: 0; right: 0; height: 3px; background: var(--raised); z-index: 4; }
.am-vs-timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(1); transition: transform .12s linear, background var(--t); }
.am-vs-timer.low i { background: var(--red); }
.am-vs-timer.hidden { visibility: hidden; }

/* the control bar — the back button gets its own room, no overlap with the plates */
.am-vs-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) 0;
}
.am-vs-leave { flex: none; }
.am-vs-ctx {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-vs-bar .icon-btn { width: var(--control-sm); height: var(--control-sm); }
/* a spacer the width of the leave button, so the context label stays centred */
.am-vs-bar::after { content: ''; width: var(--control-sm); flex: none; }

.am-vs-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.am-vs-side {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
  --c: var(--mute);
  transition: opacity var(--duration-2) var(--ease);
}
.am-vs-side.mine { --c: var(--vs-mine); }
.am-vs-side.theirs { --c: var(--vs-theirs); flex-direction: row-reverse; text-align: right; }
.am-vs-plate {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 9%, transparent);
  border: var(--hairline) solid color-mix(in srgb, var(--c) 42%, transparent);
}
.am-vs-side.mine .am-vs-plate { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.am-vs-side.theirs .am-vs-plate { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.am-vs-side > * { position: relative; z-index: 1; }

.am-vs-meta { display: flex; flex-direction: column; min-width: 0; }
.am-vs-name {
  font-family: var(--font-mono); font-size: var(--text-md); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em;
}
.am-vs-role {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c);
  min-height: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-vs-away { color: var(--over-text); }

/* score as pips — best-of-N slots that fill; the 'any' format shows a number */
.am-vs-pips { display: flex; gap: 3px; margin-top: 4px; }
.am-vs-side.theirs .am-vs-pips { justify-content: flex-end; }
.am-vs-pip {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  border: var(--hairline) solid color-mix(in srgb, var(--c) 45%, transparent);
  transition: background var(--duration-2) var(--ease), transform var(--duration-2) var(--ease);
}
.am-vs-pip.on { background: var(--c); }
.am-vs-pip.pop { animation: am-pip-pop .45s var(--ease); }
@keyframes am-pip-pop { 0%{transform:scale(0);} 60%{transform:scale(1.5);} 100%{transform:scale(1);} }
.am-vs-num { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--c); line-height: 1; margin-top: 2px; }

/* the centre column — the VS node with the series length captioned under it, so
   "Best of 3" is always visible in the header itself */
.am-vs-center { align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.am-vs-fmt {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}

/* the VS node — a clean hex plate with the lettermark, coloured on a decision.
   No brackety wires: a single confident mark reads better at banner size. */
.am-vs-node { position: relative; width: 40px; height: 44px; display: grid; place-items: center; flex: none; }
.am-vs-hex {
  position: absolute; inset: 0;
  background: var(--surface-2);
  border: var(--hairline) solid var(--line-2);
  clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%);
  transition: border-color var(--duration-2) var(--ease), background var(--duration-2) var(--ease);
}
.am-vs-vs {
  position: relative;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .04em; color: var(--dim);
  transition: color var(--duration-2) var(--ease);
}
.am-vs.win  .am-vs-hex { border-color: var(--vs-win); }
.am-vs.win  .am-vs-vs { color: var(--vs-win); }
.am-vs.lose .am-vs-hex { border-color: var(--vs-lose); }
.am-vs.lose .am-vs-vs { color: var(--vs-lose); }

/* the surge — a bright dot running from a side into the node, across the row */
.am-vs-surge {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: var(--radius-full);
  margin-top: -4px; opacity: 0; pointer-events: none; z-index: 2;
  box-shadow: 0 0 8px 2px currentColor;
}
.am-vs.surge-them .am-vs-surge.from-them { animation: am-surge-l 620ms var(--ease); color: var(--vs-theirs); }
.am-vs.surge-me   .am-vs-surge.from-me   { animation: am-surge-r 620ms var(--ease); color: var(--vs-mine); }
@keyframes am-surge-l { 0%{opacity:1; right:var(--space-4); transform:translateX(0);} 100%{opacity:0; right:50%; transform:translateX(50%);} }
@keyframes am-surge-r { 0%{opacity:1; left:var(--space-4);  transform:translateX(0);} 100%{opacity:0; left:50%;  transform:translateX(-50%);} }

/* turn states — the active side lit, the other knocked back */
.am-vs[data-active="mine"]   .am-vs-side.theirs { opacity: .4; }
.am-vs[data-active="theirs"] .am-vs-side.mine   { opacity: .4; }

/* entry — the two plates slide in and the node pops as they connect */
.am-vs.enter .am-vs-side.mine   { animation: am-slide-l .5s var(--ease) both; }
.am-vs.enter .am-vs-side.theirs { animation: am-slide-r .5s var(--ease) both; }
.am-vs.enter .am-vs-node { animation: am-node-pop .5s var(--ease) both; }
@keyframes am-slide-l { from{transform:translateX(-40px); opacity:0;} to{transform:none; opacity:1;} }
@keyframes am-slide-r { from{transform:translateX(40px);  opacity:0;} to{transform:none; opacity:1;} }
@keyframes am-node-pop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.2);} 100%{transform:scale(1); opacity:1;} }

.am-stage { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

.am-wait, .am-phase {
  flex: 1;
  padding: var(--space-7) var(--space-6);
  max-width: 620px; width: 100%; margin: 0 auto;
}
.am-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-5); }
.am-wait-fig { color: var(--mute); }
.am-wait-fig svg { width: 48px; height: 48px; }
.am-wait h2 { font-size: var(--text-xl); color: var(--text); }
.am-wait p { color: var(--dim); }

.am-phase-h { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.am-phase-h h2 { font-size: var(--text-xl); color: var(--text); flex: 1; }
.am-kick {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--mute);
  width: 100%;
}
.am-note { color: var(--dim); line-height: var(--leading-prose); margin-bottom: var(--space-6); }
.am-their-state { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--mute); text-align: center; margin-top: var(--space-5); }
.am-warn { font-size: var(--text-xs); color: var(--mute); text-align: center; margin-top: var(--space-6); line-height: var(--leading-body); }

/* setup: the format vote */
.am-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.am-opt {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  color: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--t), background var(--t);
}
.am-opt:hover { border-color: var(--line-2); }
.am-opt strong { font-size: var(--text-lg); color: var(--text); }
.am-opt small { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--mute); }
.am-opt.on { border-color: var(--vs-mine); background: var(--vs-live); }
.am-opt.theirs { border-style: dashed; border-color: var(--vs-theirs); }
.am-opt.on.theirs { border-style: solid; }
.am-opt-them { position: absolute; top: var(--space-3); right: var(--space-3); }
.am-opt:disabled { opacity: 0.55; pointer-events: none; }
.am-opt.on:disabled { opacity: 1; }

.am-submit-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-7); }
.am-submit { min-width: 160px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); }
.am-submit svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ban + pick: the roster grid */
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-3); }
.am-grid.watching { opacity: 0.6; }
.am-gtile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  color: inherit; cursor: pointer;
  transition: border-color var(--t), background var(--t), opacity var(--t);
}
.am-gtile:hover:not(:disabled) { border-color: var(--accent-line); background: var(--surface-2); }
.am-gtile:disabled { cursor: default; }
.am-gtile-ic { display: block; width: 44px; height: 44px; }
.am-gtile-ic svg { width: 100%; height: 100%; }
.am-gtile-n {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); color: var(--dim);
  text-align: center; line-height: var(--leading-tight);
}
/* Selected-but-not-yet-confirmed, in the ban step. Wears the player's own
   colour like a chosen format option, so "picked" and "committed" look
   different — a tap is not a submit. */
.am-gtile.sel { border-color: var(--vs-mine); background: var(--vs-live); }
.am-gtile.banned { border-color: var(--danger-line); opacity: 0.5; }
.am-gtile.used { opacity: 0.32; }
/* in the reveal the ban is the point, so the tile stays lit and the X reads bold
   (in the pick grid a banned tile is merely unavailable, so it dims as above) */
.am-ban .am-gtile.banned { opacity: 1; }
.am-ban .am-gtile.banned .am-gtile-ic { opacity: 0.4; }
.am-gtile-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}

/* ready */
.am-ready { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.am-ready-ic { width: 96px; height: 96px; margin: var(--space-6) 0; }
.am-ready-ic svg { width: 100%; height: 100%; }
.am-ready h2 { font-size: var(--text-2xl); color: var(--text); }
.am-ready-line { color: var(--dim); margin: var(--space-4) 0 var(--space-8); line-height: var(--leading-prose); }

/* how this round is won — stated before it starts, since not every game is a
   race against the clock */
.am-ready-metric {
  display: flex; align-items: flex-start; gap: var(--space-3);
  max-width: 36ch; margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-align: left;
  color: var(--dim); font-size: var(--text-sm); line-height: var(--leading-prose);
}
.am-ready-metric svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; margin-top: 2px; color: var(--mute); }
.am-ready-metric strong { color: var(--text); }
.am-ready-metric.moves { border-color: var(--accent-line); }
.am-ready-metric.moves svg { color: var(--accent); }
.am-go { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 220px; justify-content: center; }
.am-go svg { width: var(--icon-sm); height: var(--icon-sm); }
.am-go.done { opacity: 0.7; }

/* live */
.am-live { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.am-live-top {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
  flex: none;
}
.am-live-g {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
  flex: 1;
}
.am-live-clock { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text); }
.am-live-clock.low { color: var(--red); }
/* a moves game counts moves, not seconds — the accent marks it as a different
   kind of number so a glance never mistakes it for a stopwatch */
.am-live-clock.am-live-moves { color: var(--accent); font-size: var(--text-lg); }
.am-giveup { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.am-giveup svg { width: var(--icon-sm); height: var(--icon-sm); }
.am-live-board { position: relative; flex: 1; min-height: 0; display: flex; }

/* you've solved a fewest-moves round and the result now waits on the opponent */
.am-live.solved-wait .am-live-board { opacity: 0.55; }
.am-live-wait {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  z-index: var(--z-veil);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border: var(--hairline) solid var(--accent-line); border-radius: var(--radius);
  background: var(--surface); text-align: center; pointer-events: none;
}
.am-live-wait-n { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--accent); }
.am-live-wait p { color: var(--dim); font-size: var(--text-sm); }

/* the mounted game fills the round; its own screen chrome is suppressed */
.mp-board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mp-fail { margin: auto; padding: var(--space-8); color: var(--over-text); text-align: center; }

/* the count-in cover: opaque, so neither player sees the board early */
.mp-cover {
  position: absolute; inset: 0;
  z-index: var(--z-veil);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4);
  background: var(--bg);
}
.mp-count { font-family: var(--font-mono); font-size: 84px; line-height: 1; color: var(--accent); }
.mp-count-sub {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--mute);
}
.mp-cover.go { opacity: 0; transition: opacity var(--duration-2) var(--ease); }

/* round result */
.am-done { display: flex; flex-direction: column; align-items: center; text-align: center; }
.am-re-mark { margin: var(--space-6) 0; }
.am-re-mark svg { width: 56px; height: 56px; }

/* the final scoreboard */
.am-done h2 { font-size: var(--text-2xl); color: var(--text); margin-bottom: var(--space-4); }
.am-done.won h2 { color: var(--vs-win); }
.am-final { display: flex; align-items: center; gap: var(--space-7); margin: var(--space-8) 0; }
.am-final-side { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.am-final-side strong { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--text); }
.am-final-side small { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--mute); }
.am-final-x { color: var(--mute); }
.am-final-x svg { width: var(--icon-lg); height: var(--icon-lg); }

/* the scorecard table — round × player, cell = time / X / gave-up / surrender */
.am-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.am-tbl th, .am-tbl td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
  text-align: center;
}
.am-tbl tbody tr:last-child td { border-bottom: 0; }
.am-tbl thead th {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
  background: var(--surface-2);
}
.am-tbl-type { text-align: left; }
.am-tbl-hd { display: inline-flex; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: .02em; }
.am-tbl-hd span { font-size: var(--text-sm); color: var(--text); }
.am-tbl-type { display: flex; align-items: center; gap: var(--space-3); }
.am-tbl-ic { width: 22px; height: 22px; flex: none; }
.am-tbl-ic svg { width: 100%; height: 100%; }
.am-tbl-ic.empty { visibility: hidden; }
td.am-tbl-type { font-size: var(--text-base); color: var(--text); }
.am-tbl-unplayed { color: var(--mute); font-size: var(--text-sm); }

.am-cell { font-family: var(--font-mono); font-size: var(--text-md); color: var(--dim); }
.am-cell svg { width: var(--icon); height: var(--icon); display: inline-block; vertical-align: middle; }
.am-cell.time.win, .am-cell.won { color: var(--vs-win); }
.am-cell.dnf { color: var(--vs-lose); }
.am-cell.gaveup { color: var(--over-text); }
.am-cell.surrender { color: var(--mute); }
.am-cell.none { color: var(--mute); }
.am-cell.won svg, .am-cell.dnf svg, .am-cell.gaveup svg, .am-cell.surrender svg {
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

.am-done-acts { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 320px; margin-top: var(--space-8); }
.am-done-acts .pill { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: var(--space-3); }
.am-done-acts .pill svg { width: var(--icon-sm); height: var(--icon-sm); }
.am-again.waiting { opacity: 0.6; }
.am-done .am-re-mark { animation: am-mark-pop .5s var(--ease); }
.am-done.won .am-re-mark { color: var(--vs-win); }
.am-done.lost .am-re-mark { color: var(--vs-lose); }
.am-done.drawn .am-re-mark { color: var(--mute); }
.am-done.won h2 { color: var(--vs-win); }

/* ── the big moments — opponent found, round result ───────────────────────────
   A full-bleed overlay over the stage for the punctuation between phases. It is
   transient (auto-clears) and the banner keeps showing through the top, so the
   score pip that just filled stays in view. */
.am-moment {
  position: absolute; inset: 0; z-index: var(--z-veil);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center; padding: var(--space-8);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  animation: am-moment-in var(--duration-2) var(--ease);
}
@keyframes am-moment-in { from { opacity: 0; } to { opacity: 1; } }
.am-moment .eyebrow { color: var(--mute); animation: am-rise .4s var(--ease) both; }
.am-moment h2 { font-size: var(--text-3xl); color: var(--text); margin: 0; animation: am-rise .4s var(--ease) .12s both; }
.am-moment p { color: var(--dim); margin: 0; font-size: var(--text-base); max-width: 30ch; animation: am-rise .4s var(--ease) .2s both; }
@keyframes am-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the mark, on a coloured glow that blooms behind it */
.am-moment-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.am-moment-mark::before {
  content: ''; position: absolute; inset: -45%; border-radius: var(--radius-full); opacity: 0;
}
.am-moment-mark svg { position: relative; width: 100%; height: 100%; }
.am-moment.won  .am-moment-mark { color: var(--vs-win); }
.am-moment.lost .am-moment-mark { color: var(--vs-lose); }
.am-moment.draw .am-moment-mark { color: var(--mute); }
.am-moment.found .am-moment-mark { color: var(--accent); }
.am-moment.won  .am-moment-mark::before { background: radial-gradient(circle, color-mix(in srgb, var(--vs-win) 34%, transparent), transparent 70%); animation: am-glow .55s var(--ease) forwards; }
.am-moment.found .am-moment-mark::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); animation: am-glow .55s var(--ease) forwards; }
.am-moment.lost .am-moment-mark::before { background: radial-gradient(circle, color-mix(in srgb, var(--vs-lose) 26%, transparent), transparent 70%); animation: am-glow .55s var(--ease) forwards; }
@keyframes am-glow { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
.am-moment.won  .am-moment-mark svg, .am-moment.found .am-moment-mark svg { animation: am-mark-pop .55s var(--ease) both; }
.am-moment.lost .am-moment-mark svg { animation: am-mark-shake .5s var(--ease) both; }
.am-moment.draw .am-moment-mark svg { animation: am-mark-pop .45s var(--ease) both; }
@keyframes am-mark-pop   { 0%{transform:scale(0) rotate(-15deg);} 50%{transform:scale(1.3) rotate(7deg);} 72%{transform:scale(.9) rotate(-3deg);} 100%{transform:scale(1) rotate(0);} }
@keyframes am-mark-shake { 0%{transform:scale(.6);} 25%{transform:scale(1);} 30%,50%,70%{transform:translateX(-9px);} 40%,60%,80%{transform:translateX(9px);} 100%{transform:translateX(0);} }

/* ── the pick → board hero: the chosen tile grows to fill the stage ──────────── */
.am-hero {
  position: fixed; z-index: var(--z-ghost);
  border-radius: var(--radius);
  border: var(--hairline) solid var(--vs-mine);
  background: color-mix(in srgb, var(--vs-mine) 12%, var(--surface));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); overflow: hidden;
  transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease);
}
.am-hero-ic { display: grid; place-items: center; width: 44px; height: 44px; transition: width .55s var(--ease), height .55s var(--ease); }
.am-hero-ic svg { width: 100%; height: 100%; }
.am-hero.grown .am-hero-ic { width: 96px; height: 96px; }
.am-hero-name {
  font-family: var(--font-mono); font-size: var(--text-md);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--vs-mine);
  opacity: 0; transition: opacity var(--duration-2) var(--ease) .25s, font-size .55s var(--ease);
}
.am-hero.grown .am-hero-name { opacity: 1; font-size: var(--text-2xl); }
.am-hero.gone { opacity: 0; transition: opacity var(--duration-2) var(--ease); }

/* ── the ban stamp — the X pressed onto a banned tile in the reveal ──────────── */
.am-gtile-x {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--red); opacity: 0;
}
.am-gtile-x svg { width: 46%; height: 46%; }
/* a banned tile in the reveal shows its X (staggered stamp adds .stamp); the X is
   plainly visible once stamped, animation or not */
.am-gtile.stamp .am-gtile-x { opacity: 1; animation: am-stamp .45s var(--ease); }
@keyframes am-stamp { 0%{opacity:0; transform:scale(2.2) rotate(-12deg);} 60%{opacity:1; transform:scale(.9);} 100%{opacity:1; transform:scale(1);} }
.am-gtile.theirs-look { border-color: var(--vs-theirs); background: color-mix(in srgb, var(--vs-theirs) 10%, transparent); }
.am-gtile.theirs-look.pulse { animation: am-lock-pulse .5s var(--ease); }
@keyframes am-lock-pulse { 0%{box-shadow:0 0 0 0 var(--vs-theirs);} 100%{box-shadow:0 0 0 8px transparent;} }

@media (prefers-reduced-motion: reduce) {
  .am-vs-side, .am-vs-node, .am-vs-surge, .am-vs-pip,
  .am-moment, .am-moment-mark, .am-hero, .am-gtile-x, .am-re-mark { animation: none !important; transition: none !important; }
}

/* A challenge board offers no help: the hint and reveal controls the solo
   screens carry are hidden here. The handlers refuse in match mode too — a
   hidden button is a UI fact, not a rule. */
.in-match [data-hint],
.in-match [data-solve],
.in-match [data-check],
.in-match .q-hint,
.in-match .sg-tools { display: none; }
.in-match .q-chrome { display: none; }

/* ══ the call window ═════════════════════════════════════════════════════ */

.cw {
  position: fixed;
  z-index: var(--z-ghost);
  width: 200px;
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.cw[hidden] { display: none; }
.cw.dragging { opacity: 0.85; }

.cw-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-bottom: var(--hairline) solid var(--line);
  cursor: grab;
  touch-action: none;
}
.cw.dragging .cw-bar { cursor: grabbing; }
.cw-grip {
  width: var(--space-6); height: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--mute);
  flex: none;
}
.cw-who {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cw-body { position: relative; display: flex; flex-direction: column; background: var(--bg); }
.cw.collapsed .cw-body { display: none; }
.cw-remote { width: 100%; display: block; background: var(--bg); }
.cw-self {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  width: 56px; border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--line-2);
  display: block;
}
.cw-msg { padding: var(--space-5); font-size: var(--text-xs); color: var(--dim); text-align: center; line-height: var(--leading-body); }
.cw-msg.bad { color: var(--danger-text); }

.cw-tools { display: flex; gap: var(--space-2); padding: var(--space-2); justify-content: center; }
.cw-btn {
  display: grid; place-items: center;
  width: var(--control-sm); height: var(--control-sm);
  background: none;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--dim);
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.cw-btn:hover { color: var(--text); border-color: var(--line-2); }
.cw-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.cw-btn.off { color: var(--over-text); border-color: var(--over); }
.cw-btn.end { color: var(--danger-text); border-color: var(--danger-line); }
.cw-btn.accept { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cw-btn.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cw-btn.decline { color: var(--dim); }

/* ══ small shared additions ══════════════════════════════════════════════ */

.btn-row.col { flex-direction: column; }
.btn-row.col .pill { width: 100%; justify-content: center; }

/* Landscape phones: the banner and the lobby have to give the board room. */
@media (max-height: 520px) and (orientation: landscape) {
  .am-vs { padding: var(--space-1) var(--space-2) 0; }
  .am-vs-side { padding: var(--space-2) var(--space-3); }
  .am-vs-node { width: 34px; height: 34px; }
  .am-vs-node svg { width: 34px; height: 34px; }
  .am-ready-ic { width: 56px; height: 56px; margin: var(--space-3) 0; }
  .am-phase, .am-wait { padding: var(--space-4) var(--space-6); }
  .mp-count { font-size: 56px; }
}

/* Phase-specific tuning. These modifiers exist because each step of the lobby
   wants a different rhythm: the vote and the draft are dense grids, the pick is
   a wall of games, and the roster tiles have to stay tappable on a phone. */
.am-setup .am-opts { margin-top: var(--space-4); }
.am-ban .am-grid, .am-pick .am-grid { margin-top: var(--space-4); }
.am-pick .am-note { min-height: 2.6em; }

/* The searching player's own avatar, held steady while the other slot pulses. */
.af-me { display: grid; place-items: center; }

/* Nobody won — a challenge that ended without a board being finished. */
.am-done.drawn h2 { color: var(--dim); }