/* ==========================================================================
   The play screen and the coach (prefix .co-).

   One grid, three regimes, and the board is sized by what is left:
     side     >= 1100px wide, or landscape from 560px: board left, coach panel right,
              nothing taller than the viewport (the stage is a size container, so the
              board is min(stage width, stage height - strip - dock)).
     stacked  portrait tablets: board on top (up to the viewport limit), the coach panel
              below it as a scroll region with a sticky footer.
     phone    under 720px: the board goes edge to edge and the panel is a sheet under it.
   The shell header is off on this screen (css/shell.css), so the play header is ours.
   Tokens come from styles.css (never redefined here); components from css/system.css.
   data-view = play | summary, data-phase = thinking | evaluating | handoff | result |
   summary, data-mode = solo | duel (all set by app.js on #game-layout).
   ========================================================================== */

/* ── The page ── */
body.playing-mode {
  padding: 0;
  overflow-x: hidden;
  background: var(--color-bg);
}
body.playing-mode .app {
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
}
body.playing-mode #setup-panel,
body.playing-mode #landing-screen { display: none !important; }

/* ── Layout variables ── */
.co-play {
  --co-head-h: 64px;
  --co-pad: 12px;
  --co-gap: 12px;
  --co-strip-h: 30px;
  --co-dock-h: 48px;
  --co-panel-w: clamp(340px, 31vw, 440px);
  --co-panel-min: 272px;
  --co-gutter: 0px;
  --co-radius: var(--radius-3xl);
  /* Stacked regimes: the board is as wide as the screen, unless that would leave the
     panel less than --co-panel-min of height. The two gaps are the ones of the stage (turn
     strip / board / dock); the header is --co-head-h tall as it really is. */
  --board-size: clamp(
    240px,
    min(calc(100vw - 2 * var(--co-gutter)), calc(100vh - var(--co-head-h) - var(--co-strip-h) - var(--co-dock-h) - 2 * var(--co-gap) - var(--co-panel-min))),
    100vw
  );
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(var(--co-panel-min), 1fr);
  grid-template-areas: "head" "stage" "panel";
  width: 100%;
  min-width: 0;
  color: var(--color-text);
  /* The layout is as tall as the screen; on a screen too short for the board plus the
     minimum panel it grows and the page scrolls instead of clipping the panel. */
  height: max(100vh, calc(var(--co-head-h) + var(--co-strip-h) + var(--board-size) + var(--co-dock-h) + 2 * var(--co-gap) + var(--co-panel-min)));
}
@supports (height: 100dvh) {
  .co-play {
    --board-size: clamp(
      240px,
      min(calc(100vw - 2 * var(--co-gutter)), calc(100dvh - var(--co-head-h) - var(--co-strip-h) - var(--co-dock-h) - 2 * var(--co-gap) - var(--co-panel-min))),
      100vw
    );
    height: max(100dvh, calc(var(--co-head-h) + var(--co-strip-h) + var(--board-size) + var(--co-dock-h) + 2 * var(--co-gap) + var(--co-panel-min)));
  }
}
.co-play.hidden { display: none !important; }

@media (min-width: 720px) {
  .co-play { --co-head-h: 70px; --co-gutter: var(--co-pad); --co-panel-min: 300px; }
}

/* ── Header ── */
.co-head {
  grid-area: head;
  position: relative;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "exit info stats"
    "dots dots dots";
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 0;
  min-height: var(--co-head-h);
  padding: 6px var(--co-pad) 8px;
  min-width: 0;
}
.co-exit { grid-area: exit; padding-inline: var(--space-3); }
.co-exit-label { display: none; }

.co-head-info { grid-area: info; min-width: 0; display: grid; gap: 1px; }
.co-head-title {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.co-head-title:empty { display: none; }
.co-head-pos {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.co-head-stats { grid-area: stats; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* Running points */
.co-score { display: grid; justify-items: end; gap: 0; line-height: 1; }
.co-score-label {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.co-score-line { display: inline-flex; align-items: baseline; gap: 3px; }
.co-score-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.co-score-max { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.co-score.is-bump .co-score-value { animation: co-bump 520ms var(--ease-spring); }
@keyframes co-bump { 0% { transform: scale(1); color: var(--color-text); } 35% { transform: scale(1.16); color: var(--color-gold); } 100% { transform: scale(1); } }

/* The clock: a ring that drains, with the time inside */
.co-clock {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  --co-clock-c: var(--color-gold);
}
.co-clock.hidden { display: none; }
.co-clock-ring { width: 28px; height: 28px; flex: none; }
.co-clock-track { fill: none; stroke: var(--color-surface-4); stroke-width: 3.4; }
.co-clock-arc {
  fill: none;
  stroke: var(--co-clock-c);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 0;
  transition: stroke 200ms ease;
}
.co-clock-value {
  min-width: 2.9em;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.co-clock.urgency-mid { --co-clock-c: var(--color-dubious); }
.co-clock.urgency-mid .co-clock-value { color: var(--color-dubious); }
.co-clock.urgency-high { --co-clock-c: var(--color-blunder); }
.co-clock.urgency-high .co-clock-value { color: var(--color-blunder); }
/* A result stops the clock: it keeps its reading in the quiet colour, so it does not look like it still runs */
.co-clock.is-stopped { --co-clock-c: var(--color-text-muted); }
.co-clock.is-stopped .co-clock-value { color: var(--color-text-muted); }
/* Untimed: a calm, full ring and an infinity sign, no urgency */
.co-clock.is-untimed { --co-clock-c: var(--color-text-muted); padding-right: 12px; }
.co-clock.is-untimed .co-clock-value { min-width: 0; font-family: var(--font-ui); font-size: var(--text-xl); font-weight: 500; }

.co-sound[aria-pressed="true"] .co-sound-off,
.co-sound[aria-pressed="false"] .co-sound-on { display: none; }
.co-sound[aria-pressed="false"] { color: var(--color-text-muted); }

/* Progress dots: one per position, coloured by how the answer went (a filled dot is a
   hit, a ring a miss, a dash no move: never colour alone; every dot has its own text). */
.co-dots {
  grid-area: dots;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.co-dots:empty { display: none; }
.co-dot {
  --co-dot-c: var(--color-surface-4);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 28px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-4);
}
.co-dot[data-state="hit"] { background: var(--co-dot-c); }
.co-dot[data-state="miss"] { background: transparent; box-shadow: inset 0 0 0 2px var(--co-dot-c); }
.co-dot[data-state="none"] { background: transparent; border-top: 2px dashed var(--color-text-muted); border-radius: 0; height: 0; }
.co-dot[data-state="current"] { background: var(--color-gold); box-shadow: 0 0 0 3px rgba(221, 167, 52, 0.28); }
.co-dot[data-q="brilliant"] { --co-dot-c: var(--q-brilliant); }
.co-dot[data-q="great"] { --co-dot-c: var(--q-great); }
.co-dot[data-q="perfect"] { --co-dot-c: var(--q-perfect); }
.co-dot[data-q="very_good"] { --co-dot-c: var(--q-very-good); }
.co-dot[data-q="good"] { --co-dot-c: var(--q-good); }
.co-dot[data-q="interesting"] { --co-dot-c: var(--q-interesting); }
.co-dot[data-q="dubious"] { --co-dot-c: var(--q-dubious); }
.co-dot[data-q="bad"] { --co-dot-c: var(--q-bad); }
.co-dot[data-q="blunder"] { --co-dot-c: var(--q-blunder); }
.co-dot-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Duel scoreboard (replaces the running points) */
.co-duel { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.co-duel.hidden, .co-score.hidden { display: none; }
.co-duel-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 10px 3px 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.co-duel-side.is-active { border-color: var(--color-gold-dim); background: var(--color-gold-bg); }
.co-duel-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-dim);
  background: var(--color-surface-3);
  color: var(--color-gold);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.co-duel-side.is-active .co-duel-avatar { background: var(--color-gold); color: var(--color-on-gold); border-color: var(--gold-500); }
.co-duel-copy { display: grid; min-width: 0; line-height: 1.05; }
.co-duel-name {
  max-width: 7ch;
  overflow: hidden;
  /* Legible on the gold wash of the player whose turn it is (4.5:1), not the muted grey */
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-duel-points { font-size: var(--text-base); font-variant-numeric: tabular-nums; }

/* ── Stage: turn strip, board, dock ── */
.co-stage {
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  padding-inline: var(--co-gutter);
}
.co-stage-inner {
  display: grid;
  grid-template-rows: var(--co-strip-h) var(--board-size) var(--co-dock-h);
  row-gap: var(--co-gap);
  width: var(--board-size);
  margin-inline: auto;
  min-width: 0;
}
.co-turn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1;
}
.co-turn-king { flex: none; width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.co-turn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-turn-text:empty { display: none; }
/* A duel names the player ("Ana plays White", Coach.renderTurn). A name is whatever a person typed (24 letters, say): when the line is
   too narrow the NAME gets the ellipsis (its whole text is in its title) and the side to move keeps its full width, because the side is
   the point of the line and the king beside it only repeats it. */
.co-turn-text:has(.co-turn-name) { display: flex; gap: 0.3em; text-overflow: clip; }
.co-turn-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-turn-side { flex: none; }

/* The board fills its wrap; the wrap is exactly --board-size wide and tall. */
.co-stage .board-wrap {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  min-width: 0;
  isolation: isolate;
}
.co-stage .board-wrap .board {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100%;
}
.co-stage .board-wrap .board-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

/* The dock under the board: what the round allows (hint, skip) and, after the answer,
   the tools that act on the board. The row keeps its height in both states. */
.co-dock { display: grid; min-width: 0; }
.co-dock-set {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
}
.co-dock-btn {
  min-height: var(--co-dock-h);
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.15;
}
.co-dock-btn .btn-label { text-wrap: balance; }
#shared-actions { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.co-dock-btn.hidden { display: none; }
.co-play:not([data-phase="result"]) #board-exploration-actions,
.co-play[data-phase="result"] #shared-actions { display: none; }
.co-dock-btn[aria-pressed="true"] {
  border-color: var(--color-gold-dim);
  background: var(--color-gold-bg);
  color: var(--color-gold);
}

/* ── Coach panel ── */
.co-panel {
  grid-area: panel;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-bottom: 0;
  border-radius: var(--co-radius) var(--co-radius) 0 0;
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 38%);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.32);
}
.co-expand {
  grid-row: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-1) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 650;
}
.co-expand:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text); }
/* The handle is as wide as the panel and the panel (and the screen) clip: an outside ring would lose three of its four sides. */
.co-expand:focus-visible { --focus-ring-offset: -3px; }
.co-expand-grip { width: 36px; height: 4px; border-radius: 4px; background: var(--color-border); }
.co-expand[aria-expanded="true"] .co-expand-grip { background: var(--color-gold-dim); }
.co-scroll {
  grid-row: 2;
  /* The last lines fade out under the footer instead of being cut off (the padding below
     the content keeps the very end of the scroll fully visible). */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-4) var(--space-5);
  scroll-padding-block: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-4) transparent;
}
/* The scroll region is a tab stop (a keyboard has to be able to scroll the notes) and sits flush inside a panel that clips: the
   ring is drawn inside it, and the fade under the footer is dropped while it shows (the mask would cut the ring's last side).
   The ring itself is the global one (styles.css reads --focus-ring and --focus-ring-offset): an `outline-offset` declared here has the
   specificity (0,2,0) and always lost to that rule (0,3,0), so the offset travels as a custom property, which cannot lose (the
   pattern of `.segmented > *` in css/system.css). It is set on the FOCUSED state, not on the region: a custom property is inherited, and
   every button inside the notes would otherwise draw its ring inset as well. */
.co-scroll:focus-visible {
  --focus-ring-offset: -3px;
  -webkit-mask-image: none;
  mask-image: none;
}
.co-foot {
  grid-row: 3;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-hairline);
  background: rgba(11, 17, 24, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.co-next { width: 100%; justify-content: center; }
.co-next[disabled] { opacity: 0.55; }
.co-legend {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.co-legend-entry { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.co-summary-actions { display: grid; gap: var(--space-2); }
.co-play[data-phase="thinking"] .co-foot,
.co-play[data-phase="evaluating"] .co-foot,
.co-play[data-phase="handoff"] .co-foot { display: none; }
.co-play[data-phase="result"] .co-summary-actions,
.co-play[data-phase="summary"] .co-next,
.co-play[data-phase="summary"] .co-legend { display: none; }
.co-summary-actions.hidden { display: none; }

/* Which content shows in the scroll area */
.co-thinking:empty { display: none; }
.co-play[data-phase="result"] .co-thinking,
.co-play[data-phase="summary"] .co-thinking { display: none; }
.co-result-wrap.hidden { display: none; }

/* ── Stacked, tablet portrait: board on top, panel below as a sheet with margins ── */
@media (min-width: 720px) {
  .co-head { padding-inline: var(--co-pad); }
  .co-panel { margin-inline: var(--co-pad); }
  .co-stage .board-wrap { border-radius: var(--radius-xl); overflow: hidden; }
  .co-exit-label { display: inline; }
}

/* ── Every stacked layout (phone and tablet, portrait): the panel is a sheet under the board.
   In a result its handle opens it over the board, so the whole analysis can be read, and closes
   it again. ── */
@media (max-width: 1099px) and (orientation: portrait) {
  .co-play[data-phase="result"]:not([data-view="summary"]) .co-expand { display: flex; }
  .co-play[data-expanded="true"] { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head" "panel"; }
  .co-play[data-expanded="true"] .co-stage { display: none; }
}

/* ── Phone: the board runs edge to edge ── */
@media (max-width: 719px) and (orientation: portrait) {
  /* --co-head-h is the header as it really is (the row plus the dots): the board and the sheet
     are sized from it, so a smaller number would push the sheet under the dock. */
  .co-play { --co-head-h: 69px; --co-gap: 8px; --co-strip-h: 26px; --co-dock-h: 46px; --co-panel-min: 244px; }
  .co-stage .board-wrap .board { border-radius: 0; box-shadow: none; border-inline: 0; }
  /* The turn strip and the dock take the width of the screen (inset by the page gutter, like the panel); only the board is
     as wide as its own size. On a screen too short for a full-width board it is centred instead of dragging the dock in. */
  .co-stage-inner { width: 100%; }
  .co-stage .board-wrap { justify-self: center; }
  .co-exit { padding-inline: 0; width: var(--btn-h-md); }
  .co-dots { margin-top: 5px; }
  .co-score-value { font-size: var(--text-xl); }
  .co-clock { padding-right: 8px; }
  .co-panel { border-inline: 0; }
  .co-turn { padding-inline: var(--co-pad); }
  .co-dock { padding-inline: var(--co-pad); }
  .co-play[data-expanded="true"] .co-panel { border-radius: 0; box-shadow: none; }
  /* A duel scoreboard needs a row of its own under the header */
  .co-play[data-mode="duel"] { --co-head-h: 92px; }
  .co-play[data-mode="duel"] .co-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "exit info stats"
      "duel duel duel"
      "dots dots dots";
  }
  .co-play[data-mode="duel"] .co-duel { grid-area: duel; justify-content: space-between; margin-top: 4px; }
  .co-play[data-mode="duel"] .co-head-stats { display: contents; }
  .co-play[data-mode="duel"] .co-clock { grid-area: stats; }
  .co-play[data-mode="duel"] .co-sound { display: none; }
  .co-play[data-mode="duel"] .co-duel-name { max-width: 12ch; }
}
/* The title is the page's h1: when there is no room for it, it stays for a screen reader (never display: none). */
@media (max-width: 480px) {
  .co-head-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .co-head-pos { font-size: 0.9375rem; }
}
@media (max-width: 400px) {
  .co-score-label { display: none; }
  .co-head-pos { font-size: 0.875rem; }
  .co-clock-value { min-width: 2.6em; font-size: 0.875rem; }
  .co-clock { padding-right: 8px; }
}
/* The dock's labels wrap at word breaks and, on the narrowest screens, the icons make room */
.co-dock-btn .btn-label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 480px) {
  .co-dock-btn { padding-inline: 6px; font-size: 0.78rem; }
  #board-exploration-actions .co-dock-btn .ui-icon { display: none; }
}
@media (max-width: 400px) {
  /* Hint and skip share the row in equal halves and lose their icons: "Omitir (0 pts)" must never wrap to three lines. */
  #shared-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #shared-actions .co-dock-btn .ui-icon { display: none; }
  /* "Posición 1 de 10" wraps to two lines instead of being cut to "Po..."; the score and the clock keep their room. */
  .co-head-pos {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.15;
    text-overflow: clip;
    text-wrap: balance;
    white-space: normal;
  }
}
@media (max-width: 340px) {
  /* Nothing else can give: the ring goes, the time stays, and the "/ 10" of the score is left to a screen reader (the points are
     the number that matters; with text at 130% "Posición" would otherwise lose its last letter). */
  .co-clock-ring { display: none; }
  .co-clock { padding-left: 10px; }
  .co-score-max { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ── Short phones (320x568, 375x667, 360x640): the page must not scroll and the panel must not be squeezed under the dock.
   The chrome is tightened (header, turn strip, dock, gaps) so the board gets the height and the sheet keeps enough of it to
   show a verdict; everything is sized here, the board follows from --board-size. ── */
@media (max-width: 719px) and (orientation: portrait) and (max-height: 700px) {
  .co-play { --co-head-h: 62px; --co-gap: 6px; --co-strip-h: 24px; --co-dock-h: 44px; --co-panel-min: 184px; }
  .co-head { padding-block: 4px; }
  /* 4px above the 44px buttons leave no room for a ring 2px away (3px wide) before the top edge of the screen: it hugs the button. */
  .co-head :is(.co-exit, .co-sound):focus-visible { --focus-ring-offset: 0px; }
  .co-dots { margin-top: 3px; }
  .co-turn { font-size: var(--text-sm); }
  .co-turn-king { width: 20px; height: 20px; }
  .co-play[data-mode="duel"] { --co-head-h: 89px; --co-panel-min: 156px; }
  /* The scoreboard of a duel is one line per player (name beside the points) so the header stays as short as a solo one plus a row. */
  .co-play[data-mode="duel"] .co-duel { margin-top: 1px; }
  .co-play[data-mode="duel"] .co-dots { margin-top: 2px; }
  .co-play[data-mode="duel"] .co-duel-side { padding: 1px 10px 1px 1px; }
  .co-play[data-mode="duel"] .co-duel-avatar { width: 24px; height: 24px; }
  .co-play[data-mode="duel"] .co-duel-copy { grid-auto-flow: column; align-items: center; gap: 6px; }
  .co-expand { min-height: var(--hit); }
  .co-scroll { padding: var(--space-3) var(--space-3) var(--space-4); }
  .co-foot { padding: 6px var(--space-3) calc(6px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .co-next { min-height: 46px; }
  /* The summary footer is three rows of buttons: tighter, and without the icons of the secondary ones, so their words fit on two lines. */
  .co-play[data-view="summary"] .co-summary-actions { gap: 6px; }
  .co-play[data-view="summary"] .co-summary-actions .btn { min-height: 44px; padding-inline: 8px; }
  .co-play[data-view="summary"] .co-summary-actions .btn:not(#summary-again-btn) .ui-icon { display: none; }
}

/* ── Side regime: board left, panel right ── */
/* The board is as large as the screen allows (its height, or what the panel leaves of
   the width) and the pair board + panel is centred: nothing is taller than the viewport. */
@media (min-width: 1100px), (orientation: landscape) and (min-width: 560px) {
  .co-play {
    --co-head-h: 56px;
    --co-strip-h: 28px;
    --co-gutter: 0px;
    --co-radius: var(--radius-3xl);
    --board-size: max(240px, min(
      calc(100vw - var(--co-panel-w) - var(--co-gap) - 2 * var(--co-pad)),
      calc(100vh - var(--co-head-h) - var(--co-strip-h) - var(--co-dock-h) - 2 * var(--co-gap) - var(--co-pad))
    ));
    grid-template-columns: var(--board-size) var(--co-panel-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "stage panel";
    justify-content: center;
    column-gap: var(--co-gap);
    height: 100vh;
    padding: 0 var(--co-pad) var(--co-pad);
    overflow: hidden;
  }
  @supports (height: 100dvh) {
    .co-play {
      --board-size: max(240px, min(
        calc(100vw - var(--co-panel-w) - var(--co-gap) - 2 * var(--co-pad)),
        calc(100dvh - var(--co-head-h) - var(--co-strip-h) - var(--co-dock-h) - 2 * var(--co-gap) - var(--co-pad))
      ));
      height: 100dvh;
    }
  }
  .co-head {
    grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas: "exit info dots stats";
    column-gap: var(--space-4);
    min-height: var(--co-head-h);
    padding: 6px 0;
  }
  .co-head { padding-inline: 0; }
  .co-panel { margin-inline: 0; }
  .co-dots { justify-content: center; margin: 0; max-width: 360px; justify-self: center; width: 100%; }
  .co-stage { padding-inline: 0; }
  .co-stage-inner { width: 100%; align-content: start; }
  .co-stage .board-wrap { border-radius: var(--radius-xl); }
  .co-panel {
    border-bottom: 1px solid var(--color-hairline);
    border-radius: var(--co-radius);
    box-shadow: var(--shadow-2);
    background-color: var(--color-surface);
  }
  .co-scroll { padding: var(--space-5) var(--space-5) var(--space-6); }
  .co-foot { padding: var(--space-4) var(--space-5); background: rgba(11, 17, 24, 0.7); }
  .co-legend { display: flex; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .co-play { --co-head-h: 60px; --co-pad: 16px; --co-gap: 14px; }
}

/* ── Short landscape phones: the header shrinks, the panel keeps its width ── */
@media (orientation: landscape) and (max-height: 520px) {
  .co-play { --co-head-h: 44px; --co-pad: 8px; --co-gap: 6px; --co-strip-h: 24px; --co-dock-h: 44px; --co-panel-w: clamp(300px, 42vw, 420px); }
  .co-head { padding-block: 0; }
  .co-head-info { gap: 0; }
  .co-head-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .co-clock { min-height: 32px; }
  .co-score-label { display: none; }
  .co-exit-label { display: none; }
  .co-exit { width: var(--btn-h-md); padding-inline: 0; }
  .co-dots { max-width: 200px; }
  .co-scroll { padding: var(--space-3); }
  .co-foot { padding: var(--space-2) var(--space-3); }
  .co-legend { display: none; }
  /* Under a board this small the dock keeps its words (an icon alone says nothing to a person who has not learnt it) and
     loses its icons and its padding instead: three buttons of about 80px, two short lines each. */
  .co-dock-btn { padding: 2px 4px; font-size: 0.72rem; line-height: 1.12; }
  .co-dock-btn .ui-icon { display: none; }
  #shared-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The header title is already hidden here: the position keeps the room and wraps before it is cut. */
  .co-head-pos { white-space: normal; line-height: 1.1; }
}

/* ── Short landscape: the turn line and the dock stand BESIDE the board (QA UX-031 / VIS-012, polish-layout PL-A) ──
   A phone on its side (320-430px tall), a small tablet (1024x600) or a laptop window under 700px has no height to spare: with the turn strip
   above the board and the dock under it, 120px of a 390px screen went to chrome and the board was 258px. Here the strip and the dock are one
   column to the right of the board, so the board takes everything under the header (--co-head-h) and the coach panel keeps its own column
   and its own scroll. The column has a fixed width (--co-side-w), so the board does not move when the dock swaps its buttons. Every dock
   button keeps its words (two or three short lines) and is at least --co-dock-h tall; at 560px and wider only: a landscape window narrower
   than that keeps the stacked layout above. */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 700px) {
  .co-play {
    --co-side-w: 96px;
    --co-top-gap: 4px;
    /* Narrower than the side regime's 340px floor: a window 560-670px wide and 520-700px tall would otherwise overflow sideways. */
    --co-panel-w: clamp(260px, 33vw, 440px);
    --board-size: max(200px, min(
      calc(100vw - var(--co-panel-w) - var(--co-side-w) - 2 * var(--co-gap) - 2 * var(--co-pad)),
      calc(100vh - var(--co-head-h) - var(--co-top-gap) - var(--co-pad))
    ));
    /* The panel takes what the board and its column leave, up to 460px (the pair is centred). */
    grid-template-columns: calc(var(--board-size) + var(--co-gap) + var(--co-side-w)) minmax(var(--co-panel-w), 460px);
  }
  @supports (height: 100dvh) {
    .co-play {
      --board-size: max(200px, min(
        calc(100vw - var(--co-panel-w) - var(--co-side-w) - 2 * var(--co-gap) - 2 * var(--co-pad)),
        calc(100dvh - var(--co-head-h) - var(--co-top-gap) - var(--co-pad))
      ));
    }
  }
  .co-stage { padding-top: var(--co-top-gap); }
  .co-stage-inner {
    grid-template-columns: var(--board-size) var(--co-side-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "board strip" "board dock";
    column-gap: var(--co-gap);
    row-gap: var(--co-gap);
    justify-content: start;
    align-content: start;
  }
  .co-stage .board-wrap { grid-area: board; }
  /* The turn line: the king over the words, centred in the column. A name a person typed gets the ellipsis on its own line. */
  .co-turn {
    grid-area: strip;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 2px;
    font-size: var(--text-sm);
    line-height: 1.2;
    text-align: center;
  }
  .co-turn-text { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .co-turn-text:has(.co-turn-name) { flex-direction: column; align-items: center; gap: 0; }
  .co-turn-name { max-width: 100%; white-space: nowrap; }
  /* The dock: one button per row, as wide as the column, under the turn line. */
  .co-dock { grid-area: dock; align-content: start; }
  .co-dock-set { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: minmax(var(--co-dock-h), auto); align-content: start; }
  #shared-actions { grid-template-columns: minmax(0, 1fr); }
  .co-dock-btn { flex-direction: column; gap: 4px; padding: 6px 6px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 520px) {
  /* A phone on its side: the column is as narrow as its words allow, the panel gives up width before the board does, and the board
     sits 6px under the header (its row is the controls' own 44px: the exit button stood 2px over the board's corner, RK-5; the 4px
     it gives are taken from the height-limited boards only, 336 -> 332px at 844x390). */
  .co-play {
    --co-panel-w: clamp(232px, 39vw, 400px);
    --co-side-w: clamp(64px, 10.5vw, 100px);
    --co-top-gap: 6px;
  }
  .co-turn { gap: 2px; font-size: 0.75rem; }
  .co-turn-king { width: 20px; height: 20px; }
  .co-dock-btn { padding: 2px 3px; }
}
/* A wider phone has the room for the next size of type in its column (the board is the height's, the panel gets the rest). */
@media (orientation: landscape) and (min-width: 800px) and (max-height: 520px) {
  .co-turn { font-size: 0.8rem; }
  .co-dock-btn { font-size: 0.78rem; }
}

/* ── Waiting: the "evaluating" overlay over the board ── */
.co-search {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  /* One definite cell, so the card's max-height means the board's height */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: var(--space-4);
  /* Its size is the board's: the card answers to it (see the container query below) */
  container-type: size;
  background: rgba(6, 10, 16, 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: ui-fade var(--dur-2) ease both;
}
.co-search.hidden { display: none; }
.co-search-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: min(360px, 100%);
  max-height: 100%;
  overflow: hidden auto;
  padding: var(--space-5);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-3xl);
  background-color: var(--color-surface-2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40%);
  box-shadow: var(--shadow-3);
  text-align: center;
}
.co-search-spinner { width: 26px; height: 26px; margin-bottom: var(--space-1); }
.co-search-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.1;
  text-wrap: balance;
}
.co-search-meta { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; text-wrap: balance; }
.co-search-meta:empty { display: none; }
.co-search-progress { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.co-search-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-4);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
.co-search-bar {
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gold-gradient);
  transition: width 140ms linear;
}
.co-search-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.co-search-card > * { flex: none; }
.co-search-facts { flex: 0 1 auto; min-height: 0; width: 100%; margin-top: var(--space-2); overflow: hidden; text-align: left; }
.co-search-facts:empty { display: none; }
/* Whatever the size, the way out stays in reach: it sticks to the foot of the card */
.co-search-cancel { position: sticky; bottom: 0; margin-top: var(--space-2); }
.co-search-cancel.hidden { display: none; }
/* A small board (a phone, a short window) has no room for a story: the wait says what is
   happening and keeps the way out in reach. */
@container (max-height: 545px) {
  .co-search-facts { display: none; }
}
@container (max-height: 320px) {
  .co-search { padding: var(--space-2); }
  .co-search-card { padding: var(--space-3); gap: var(--space-1); }
  .co-search-spinner { display: none; }
  .co-search-title { font-size: var(--text-xl); }
  .co-search-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
}
.spinner.co-search-spinner { border-width: 3px; }

/* ── Duel: pass the device ── */
.co-handoff {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  /* "safe": a card taller than the board scrolls from its top instead of being cut at both ends */
  place-items: safe center;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(221, 167, 52, 0.12), rgba(221, 167, 52, 0) 60%),
    rgba(4, 8, 14, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  container-type: size;
  animation: ui-fade var(--dur-3) ease both;
}
.co-handoff.hidden { display: none; }
.co-handoff:hover, .co-handoff:active { background-color: rgba(4, 8, 14, 0.95); }
/* The cover clips everything outside itself (overflow, and the board's own clipping): its ring is drawn inside (see .co-scroll). */
.co-handoff:focus-visible { --focus-ring-offset: -6px; }
.co-handoff-card { display: grid; justify-items: center; gap: var(--space-2); width: 100%; min-width: 0; max-width: 22rem; }
/* A name is whatever a person typed (20 letters without a space, say): it wraps anywhere rather than running off the screen. */
.co-handoff-card > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.co-handoff-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  background: var(--color-gold-bg);
  color: var(--color-gold);
  font-size: var(--text-2xl);
  font-weight: 750;
  box-shadow: 0 0 0 8px rgba(221, 167, 52, 0.1), var(--shadow-2);
}
.co-handoff-eyebrow { color: var(--color-gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.co-handoff-eyebrow:empty { display: none; }
.co-handoff-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 650;
  line-height: 1.05;
  text-wrap: balance;
}
.co-handoff-sub { color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-normal); text-wrap: balance; }
.co-handoff-cta {
  margin-top: var(--space-3);
  padding: 12px var(--space-6);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(221, 167, 52, 0.7);
}
/* A board of a phone held upright and short (320x568): a smaller avatar and type, so the tap target is never pushed out of sight. */
@container (max-height: 340px) {
  .co-handoff-avatar { width: 44px; height: 44px; margin-bottom: 0; font-size: var(--text-lg); box-shadow: 0 0 0 4px rgba(221, 167, 52, 0.1); }
  /* RC-2 (r2-core, marked edit): a duel keeps the whole 24-letter name of a profile (it kept 20): tighter lines so two names of 24 "W"s still fit. */
  .co-handoff-card { gap: 2px; }
  .co-handoff-title { font-size: 1.25rem; line-height: 1; }
  .co-handoff-sub { font-size: var(--text-xs); line-height: 1.2; }
  .co-handoff-cta { margin-top: var(--space-1); padding: 8px var(--space-5); }
}
@container (max-height: 280px) {
  .co-handoff-avatar { display: none; }
}

/* ── Toasts: on this screen they sit under the header, never over the actions ── */
body.playing-mode .toast-stack { inset: calc(env(safe-area-inset-top, 0px) + 8px) 0 auto; }
body.playing-mode .toast-stack .toast { width: min(440px, 100%); }
/* Stacked layouts (phone, tablet portrait): the header holds the exit button, the score and the clock, so a toast goes under it
   (over the "who moves" strip, which a result does not need) instead of hiding them for six seconds. A duel header is taller. */
@media (max-width: 1099px) and (orientation: portrait) {
  body.playing-mode .toast-stack { top: calc(env(safe-area-inset-top, 0px) + 76px); }
  body.playing-mode:has(.co-play[data-mode="duel"]) .toast-stack { top: calc(env(safe-area-inset-top, 0px) + 100px); }
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
  .co-score.is-bump .co-score-value { animation: none; }
  .co-search, .co-handoff { animation: none; }
  .co-clock-arc, .co-search-bar { transition: none; }
}
html[data-motion="reduce"] .co-score.is-bump .co-score-value { animation: none; }

/* ==========================================================================
   The coach panel: cards, the result, the duel, the summary
   ========================================================================== */

.co-thinking,
.co-result {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}
/* The column of the analysis is the container the verdict card answers to (RK-4, see "The verdict card stacks" below): the card cannot restyle
   itself from its own size, and the window's width says nothing about the width the panel really gets. */
.co-result-inner { min-width: 0; container: co-result / inline-size; }
.co-result-inner.hidden { display: none; }

/* Entrance: each block rises in turn (never under reduced motion) */
.co-result > *,
.co-thinking > * { animation: co-rise 420ms var(--ease-out) both; }
.co-result > :nth-child(2), .co-thinking > :nth-child(2) { animation-delay: 60ms; }
.co-result > :nth-child(3), .co-thinking > :nth-child(3) { animation-delay: 110ms; }
.co-result > :nth-child(4) { animation-delay: 160ms; }
.co-result > :nth-child(5) { animation-delay: 200ms; }
.co-result > :nth-child(n+6) { animation-delay: 240ms; }
@keyframes co-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.co-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 50%);
}
/* The how-to-play line of the very first session (app.js prependFirstRunNote, QA UX-027): a quiet note, not a card of its own. */
.co-first-run {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-gold-dim);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  line-height: 1.5;
}
/* The summary says so when the browser did not save the session (app.js paintUnsavedNote, Profile.storageStatus()). */
.co-unsaved {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  line-height: 1.5;
}
.co-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.co-eyebrow-gold { color: var(--color-gold); }
.co-caption { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.co-caption-strong { margin: var(--space-3) 0 var(--space-1); color: var(--color-text); font-weight: 650; }
.co-empty { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-normal); }

.co-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}
.co-note .ui-icon { flex: none; margin-top: 1px; }
.co-note-info { background: var(--color-good-bg); border-color: var(--color-good-bd); }
.co-note-info .ui-icon { color: var(--color-good); }
.co-note-warn { background: var(--color-dubious-bg); border-color: var(--color-dubious-bd); }
.co-note-warn .ui-icon { color: var(--color-dubious); }
.co-note-success { background: var(--color-perfect-bg); border-color: var(--color-perfect-bd); }
.co-note-success .ui-icon { color: var(--color-perfect); }
.co-note-gold { background: var(--color-gold-bg); border-color: var(--color-gold-dim); }
.co-note-gold .ui-icon { color: var(--color-gold); }
.co-dotsloader { display: inline-flex; gap: 3px; align-items: center; height: 1.2em; }
.co-dotsloader i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-good); animation: co-blink 1.2s ease-in-out infinite; }
.co-dotsloader i:nth-child(2) { animation-delay: 160ms; }
.co-dotsloader i:nth-child(3) { animation-delay: 320ms; }
@keyframes co-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ── The position while the person thinks ── */
.co-ctx { display: grid; gap: var(--space-2); }
.co-ctx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.co-ctx-top .co-eyebrow { margin: 0; }
.co-ctx-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.co-ctx-players { margin: 0; color: var(--color-text); font-size: var(--text-md); font-weight: 600; }
.co-ctx-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.co-ctx-kind { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-normal); }
.co-ctx-mover { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text); font-size: var(--text-base); }
.co-ctx-mover .ui-icon { color: var(--color-gold); flex: none; }
.co-ctx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  margin-top: var(--space-1);
  color: var(--color-gold);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.co-ctx-link:hover { color: var(--gold-200); }
.co-goal { display: grid; gap: var(--space-3); }
.co-goal-text, .co-goal-hints { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-base); line-height: var(--lh-normal); }
.co-goal-text { color: var(--color-text); font-weight: 600; }
.co-goal-text .ui-icon { color: var(--color-gold); flex: none; margin-top: 2px; }
.co-goal-hints { color: var(--color-text-muted); font-size: var(--text-sm); }
.co-goal-hints .ui-icon { flex: none; margin-top: 1px; }
.co-turnbanner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--color-gold-bg), var(--color-surface-2));
}
.co-turnbanner-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-weight: 750;
}
.co-turnbanner-copy { min-width: 0; }
/* A name is whatever a person typed: it wraps anywhere instead of running out of the card. */
.co-turnbanner-title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 650; line-height: 1.1; overflow-wrap: anywhere; }
.co-turnbanner-sub { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.co-skel { display: grid; gap: var(--space-3); }
.co-hero-pending .skeleton-circle { width: 116px; height: 116px; }
.co-hero-pending .co-hero-title { color: var(--color-text-muted); }

/* ── The verdict ── */
.co-hero {
  --co-q: var(--q-no-move);
  --co-q-bg: var(--q-no-move-bg);
  --co-q-bd: var(--q-no-move-bd);
  /* The title answers to the width of its own card (the panel is 340px wide at 1024 and on a phone on its side): "Gran jugada"
     stays on one line instead of breaking after "Gran" (see the container query below). */
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "gauge copy"
    "chips chips";
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--co-q-bd);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  background-image: linear-gradient(155deg, var(--co-q-bg), rgba(11, 17, 24, 0) 86%);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.co-hero-pending { --co-q: var(--color-text-muted); }
.co-hero[data-q="brilliant"] { --co-q: var(--q-brilliant); --co-q-bg: var(--q-brilliant-bg); --co-q-bd: var(--q-brilliant-bd); }
.co-hero[data-q="great"] { --co-q: var(--q-great); --co-q-bg: var(--q-great-bg); --co-q-bd: var(--q-great-bd); }
.co-hero[data-q="perfect"] { --co-q: var(--q-perfect); --co-q-bg: var(--q-perfect-bg); --co-q-bd: var(--q-perfect-bd); }
.co-hero[data-q="very_good"] { --co-q: var(--q-very-good); --co-q-bg: var(--q-very-good-bg); --co-q-bd: var(--q-very-good-bd); }
.co-hero[data-q="good"] { --co-q: var(--q-good); --co-q-bg: var(--q-good-bg); --co-q-bd: var(--q-good-bd); }
.co-hero[data-q="interesting"] { --co-q: var(--q-interesting); --co-q-bg: var(--q-interesting-bg); --co-q-bd: var(--q-interesting-bd); }
.co-hero[data-q="dubious"] { --co-q: var(--q-dubious); --co-q-bg: var(--q-dubious-bg); --co-q-bd: var(--q-dubious-bd); }
.co-hero[data-q="bad"] { --co-q: var(--q-bad); --co-q-bg: var(--q-bad-bg); --co-q-bd: var(--q-bad-bd); }
.co-hero[data-q="blunder"] { --co-q: var(--q-blunder); --co-q-bg: var(--q-blunder-bg); --co-q-bd: var(--q-blunder-bd); }
.co-hero-gauge { grid-area: gauge; display: grid; place-items: center; min-width: 0; }
.co-hero-copy { grid-area: copy; display: grid; gap: var(--space-2); min-width: 0; }
.co-hero-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  text-wrap: balance;
  margin: 0;
  color: var(--co-q);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
/* The annotation of a quality ("!!", "?!", a star): never smaller than 11px, whatever the text around it (it was 0.5em of the
   parent, 7.5px in the summary legend), and centred on the line instead of riding the baseline. */
.co-glyph { flex: none; align-self: center; min-width: 1.2em; font-family: var(--font-ui); font-size: max(0.6875rem, 0.85em); font-weight: 800; line-height: 1; letter-spacing: 0; text-align: center; }
/* In the verdict title the glyph is a small round badge next to the serif headline, as big as the x-height of the title. */
.co-hero-title .co-glyph {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  min-width: 1.45em;
  height: 1.45em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.5em;
  background: var(--co-q-bg);
}
@container (max-width: 400px) {
  .co-hero-title { font-size: var(--text-2xl); }
}
.co-hero-verdict { margin: 0; font-size: var(--text-md); line-height: var(--lh-normal); text-wrap: pretty; }
.co-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.co-hero .gauge { --gauge-color: var(--co-q); }
.gauge-very-good { --gauge-color: var(--color-very-good); }
.gauge-interesting { --gauge-color: var(--color-interesting); }
.gauge-bad { --gauge-color: var(--color-bad); }
.gauge-no-move { --gauge-color: var(--color-text-muted); }
.co-gauge-text { font-size: var(--text-2xl); font-weight: 700; }

/* ── Your move against the best ── */
.co-cmp { display: grid; gap: var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.co-cmp-row { display: grid; gap: 6px; min-width: 0; }
.co-cmp-head { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.co-cmp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.co-tag {
  --co-tag-c: var(--color-text-muted);
  --co-tag-bg: var(--color-surface-3);
  --co-tag-bd: var(--color-border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--co-tag-bd);
  border-radius: var(--radius-pill);
  background: var(--co-tag-bg);
  color: var(--co-tag-c);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}
.co-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* The same hues as the arrows on the board (css/board.css): you and the second player
   blue, the best move green, the first player violet, the move of the game gold. */
.co-tag[data-kind="user"], .co-tag[data-kind="p2"] { --co-tag-c: var(--bd-user, var(--color-good)); --co-tag-bg: var(--color-good-bg); --co-tag-bd: var(--color-good-bd); }
.co-tag[data-kind="best"] { --co-tag-c: var(--bd-best, var(--color-perfect)); --co-tag-bg: var(--color-perfect-bg); --co-tag-bd: var(--color-perfect-bd); }
.co-tag[data-kind="master"] { --co-tag-c: var(--color-gold); --co-tag-bg: var(--color-gold-bg); --co-tag-bd: var(--color-gold-dim); }
.co-tag[data-kind="p1"] { --co-tag-c: var(--bd-user-alt, var(--color-interesting)); --co-tag-bg: var(--color-interesting-bg); --co-tag-bd: var(--color-interesting-bd); }
.co-cmp-san { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.co-cmp-eval { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.co-barrow { display: flex; align-items: center; gap: var(--space-2); }
.co-bar { --bar-c: var(--color-text-muted); flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-4); }
.co-bar[data-kind="user"], .co-bar[data-kind="p2"] { --bar-c: var(--bd-user, var(--color-good)); }
.co-bar[data-kind="best"] { --bar-c: var(--bd-best, var(--color-perfect)); }
.co-bar[data-kind="master"] { --bar-c: var(--color-gold); }
.co-bar[data-kind="p1"] { --bar-c: var(--bd-user-alt, var(--color-interesting)); }
.co-bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bar-c); animation: co-grow 700ms var(--ease-out) both; transform-origin: left; }
@keyframes co-grow { from { transform: scaleX(0); } to { transform: none; } }
.co-bar-pct { flex: none; min-width: 3ch; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.co-cmp-note { display: flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.co-cmp-good { color: var(--color-perfect); font-weight: 600; }
.co-quote { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-gold-dim); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-gold-bg); }
.co-quote-cap { margin-bottom: 4px; color: var(--color-gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.co-quote blockquote { margin: 0; color: var(--color-text); font-size: var(--text-base); line-height: var(--lh-normal); }

/* "How to read these numbers": a real button (a tooltip does not exist on a phone) that opens a short explanation. */
.co-help { display: grid; margin-top: var(--space-2); }
.co-help-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: var(--hit);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  cursor: pointer;
}
.co-help-btn:hover { color: var(--color-text); }
.co-help-btn .ui-icon { flex: none; }
.co-help-body { display: grid; gap: var(--space-2); padding: var(--space-3); border-left: 3px solid var(--color-border-mid); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-surface-3); }
.co-help-body[hidden] { display: none; }
.co-help-body p { margin: 0; color: var(--color-text); font-size: var(--text-sm); line-height: var(--lh-normal); }

/* ── Why ── */
.co-insights { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.co-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.co-insight-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-md);
  background: var(--color-gold-bg);
  color: var(--color-gold);
}
.co-insight-text { margin: 0 0 6px; font-size: var(--text-base); line-height: var(--lh-normal); text-wrap: pretty; }
/* The theme of the position (sacrifice, only move...), told after the answer. */
/* The opening of an openings-session position: its name, then the book moves from here (or where the game left the book). */
.co-opening-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-text); font-weight: 650; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.co-book { display: grid; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.co-book-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-width: 0; }
.co-book-san { flex: none; min-width: 4.5ch; color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.co-book-name { min-width: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }

.co-theme { display: grid; gap: 4px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.co-theme-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.co-theme-label { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.co-theme-hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.co-insight-tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.co-concepts { display: grid; gap: var(--space-2); }
.co-concepts .co-eyebrow { margin: 0; }
.co-concept-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.co-concept { border-color: var(--color-gold-dim); background: var(--color-gold-bg); color: var(--color-gold); }
/* button.chip (css/system.css) sets 32px and a hit area of 42px: a lesson chip is a real button. */
button.co-concept { min-height: 44px; }
.co-concept:hover { background: var(--color-surface-3); }
.co-concept-body { display: grid; gap: var(--space-4); justify-items: center; }
/* Wide and short: the board beside the words */
.co-concept-body.is-beside { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; }
.co-concept-body.is-beside .co-concept-text { font-size: var(--text-base); line-height: var(--lh-normal); }
.co-concept-board { max-width: 100%; }
.co-concept-board .mini-board { max-width: 100%; height: auto; }
.co-concept-text { margin: 0; font-size: var(--text-md); line-height: var(--lh-loose); }

/* ── Engine lines ── */
.co-line-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.co-line-item { display: grid; gap: var(--space-2); }
.co-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rank move eval"
    "rank pv marks";
  align-items: center;
  gap: 2px var(--space-3);
  width: 100%;
  min-height: var(--hit);
  padding: 8px var(--space-3);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  text-align: left;
}
.co-line:hover { border-color: var(--color-border-mid); background: var(--color-surface-3); }
.co-line.is-selected, .co-line[aria-pressed="true"] { border-color: var(--color-gold-dim); background: var(--color-gold-bg); }
.co-line-rank { grid-area: rank; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface-4); color: var(--color-text); font-size: 0.75rem; font-weight: 700; }
.co-line.is-selected .co-line-rank { background: var(--color-gold); color: var(--color-on-gold); }
.co-line-move { grid-area: move; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; }
.co-line-eval { grid-area: eval; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.co-line-marks { grid-area: marks; display: inline-flex; gap: 4px; justify-self: end; }
.co-line-pv { grid-area: pv; min-width: 0; overflow: hidden; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
/* A narrow panel (about 230-270px: a phone on its side, see the short landscape regime) cannot hold the rank, the line and two pills side by side:
   the pills (Best, Master name) get a row of their own under the line and wrap, so the list never scrolls sideways. The item is the container:
   the width that counts is the one the line has, whatever the panel is. */
.co-line-item { container-type: inline-size; }
@container (max-width: 300px) {
  .co-line { grid-template-areas: "rank move eval" "rank pv pv" "rank marks marks"; }
  .co-line-marks { flex-wrap: wrap; justify-self: start; min-width: 0; }
}
.co-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: 0.6875rem; font-weight: 700; line-height: 1.6; }
.co-pill-best { color: var(--color-perfect); background: var(--color-perfect-bg); border-color: var(--color-perfect-bd); }
.co-pill-user { color: var(--color-good); background: var(--color-good-bg); border-color: var(--color-good-bd); }
.co-pill-master { color: var(--color-gold); background: var(--color-gold-bg); border-color: var(--color-gold-dim); }
.co-stepper { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-gold-dim); border-radius: var(--radius-lg); background: var(--color-surface); }
.co-stepper[hidden] { display: none; }
.co-step-ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.co-step-btn { flex: none; }
.co-step-pos { flex: 1 1 auto; min-width: 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 650; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-step-btn { width: 44px; min-height: 44px; padding: 0; }
.co-step-san { display: flex; flex-wrap: wrap; gap: 2px; }
/* A move of the line is a real 44px target (no invisible hit area: neighbours would steal taps). */
.co-tok {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.co-tok-n { color: var(--color-text-muted); font-weight: 500; }
.co-tok:hover { background: var(--color-surface-3); }
.co-tok[aria-current="step"] { border-color: var(--color-gold-dim); background: var(--color-gold-bg); color: var(--color-gold); }
.co-step-tip { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Progress, rewards ── */
.co-rewards { display: grid; gap: var(--space-3); }
.co-rewards .co-eyebrow { margin: 0; }
.co-xp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.co-xp { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gold); font-size: var(--text-lg); font-weight: 750; font-variant-numeric: tabular-nums; }
.co-xp-big { font-size: var(--text-2xl); }
.co-level { display: grid; gap: 6px; }
.co-achievement { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-gold-dim); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--color-gold-bg), var(--color-surface-2)); }
.co-achievement-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-gold); color: var(--color-on-gold); font-size: 1.2rem; }
.co-achievement-title { margin: 0; font-size: var(--text-base); line-height: var(--lh-snug); }
.co-fact { border-color: var(--color-gold-dim); background-image: linear-gradient(120deg, var(--color-gold-bg), rgba(37, 21, 0, 0) 70%); }
.co-fact .co-eyebrow { margin-bottom: var(--space-2); }
.co-fact-text { margin: 0; font-size: var(--text-base); line-height: var(--lh-loose); text-wrap: pretty; }
.co-fact-meta { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Duel result ── */
.co-duel-banner {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-2xl);
  background: linear-gradient(140deg, var(--color-gold-bg), var(--color-surface) 90%);
  text-align: center;
}
.co-duel-banner.is-tie { border-color: var(--color-border); background: var(--color-surface-2); }
.co-duel-banner-title { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 650; line-height: 1.1; }
.co-duel-banner.is-tie .co-duel-banner-title { color: var(--color-text); }
.co-duel-banner-title { overflow-wrap: anywhere; }
.co-duel-banner-sub { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-wrap: balance; }
.co-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.co-player {
  --co-q: var(--q-no-move);
  --co-q-bg: var(--q-no-move-bg);
  --co-q-bd: var(--q-no-move-bd);
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--co-q-bd);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  background-image: linear-gradient(170deg, var(--co-q-bg), rgba(11, 17, 24, 0) 80%);
  text-align: center;
}
.co-player[data-q="brilliant"] { --co-q: var(--q-brilliant); --co-q-bg: var(--q-brilliant-bg); --co-q-bd: var(--q-brilliant-bd); }
.co-player[data-q="great"] { --co-q: var(--q-great); --co-q-bg: var(--q-great-bg); --co-q-bd: var(--q-great-bd); }
.co-player[data-q="perfect"] { --co-q: var(--q-perfect); --co-q-bg: var(--q-perfect-bg); --co-q-bd: var(--q-perfect-bd); }
.co-player[data-q="very_good"] { --co-q: var(--q-very-good); --co-q-bg: var(--q-very-good-bg); --co-q-bd: var(--q-very-good-bd); }
.co-player[data-q="good"] { --co-q: var(--q-good); --co-q-bg: var(--q-good-bg); --co-q-bd: var(--q-good-bd); }
.co-player[data-q="interesting"] { --co-q: var(--q-interesting); --co-q-bg: var(--q-interesting-bg); --co-q-bd: var(--q-interesting-bd); }
.co-player[data-q="dubious"] { --co-q: var(--q-dubious); --co-q-bg: var(--q-dubious-bg); --co-q-bd: var(--q-dubious-bd); }
.co-player[data-q="bad"] { --co-q: var(--q-bad); --co-q-bg: var(--q-bad-bg); --co-q-bd: var(--q-bad-bd); }
.co-player[data-q="blunder"] { --co-q: var(--q-blunder); --co-q-bg: var(--q-blunder-bg); --co-q-bd: var(--q-blunder-bd); }
.co-player.is-winner { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold-dim), 0 12px 28px -14px rgba(221, 167, 52, 0.5); }
.co-player-crown {
  position: absolute;
  top: -11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.co-player-head { display: flex; align-items: center; justify-content: center; gap: var(--space-2); max-width: 100%; }
.co-player-avatar { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-4); color: var(--color-text); font-size: 0.6875rem; font-weight: 750; }
/* A long name wraps onto a second line (then ellipsis); the whole name is the title of the heading. */
.co-player-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; margin: 0; overflow: hidden; font-size: var(--text-base); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; text-align: left; }
.co-player .gauge { --gauge-color: var(--co-q); }
.co-player-q { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 0; color: var(--co-q); font-size: var(--text-base); font-weight: 700; }
.co-player-q .co-glyph { font-size: 0.9em; }
.co-player-move { margin: 0; font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; }
.co-player-why { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); text-wrap: pretty; }
.co-player-xp { margin: 0; color: var(--color-gold); font-size: var(--text-sm); font-weight: 700; }
.co-player-new, .co-sum-duelnew { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 0; color: var(--color-gold); font-size: var(--text-sm); font-weight: 650; line-height: var(--lh-snug); text-align: left; overflow-wrap: anywhere; }
.co-player-new .ui-icon, .co-sum-duelnew .ui-icon { flex: none; margin-top: 2px; }

/* ── The closing summary ── */
.co-summary.hidden { display: none; }
.co-summary { min-width: 0; outline: none; }
.co-summary:not(.hidden) { display: grid; gap: var(--space-4); align-content: start; }
.co-sum-col { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.co-sum-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-3xl);
  background-color: var(--color-surface);
  background-image: radial-gradient(120% 140% at 0% 0%, rgba(221, 167, 52, 0.16), rgba(221, 167, 52, 0) 60%);
  box-shadow: var(--shadow-2);
  animation: co-rise 520ms var(--ease-out) both;
}
.co-sum-hero-duel { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.co-sum-hero-duel .co-sum-copy { justify-items: center; }
.co-sum-hero-duel .co-sum-stats { justify-content: center; }
.co-sum-gauge { display: grid; place-items: center; }
.co-sum-copy { display: grid; gap: var(--space-2); min-width: 0; }
.co-sum-copy .co-eyebrow { margin: 0; }
.co-sum-title { margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 650; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.co-sum-sub { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); }
.co-sum-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0 0; }
.co-sum-stat { display: grid; gap: 2px; margin: 0; }
.co-sum-stat dt { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.co-sum-stat dd { margin: 0; font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
/* A duel summary: one card per player (never merged numbers), side by side. */
.co-sum-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.co-sum-duelist { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: var(--space-5) var(--space-3) var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); background: var(--color-surface-2); text-align: center; }
.co-sum-duelist.is-winner { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold-dim); }
.co-sum-duelname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin: 0; overflow: hidden; font-size: var(--text-base); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.co-sum-duelgauge { display: grid; place-items: center; }
.co-sum-duelist .co-caption { text-align: center; }
.co-sum-duelmix { display: grid; gap: 2px; width: 100%; margin-top: var(--space-2); text-align: left; }
.co-sum-duelmix .co-seg { height: 10px; margin: 2px 0 var(--space-2); }
.co-sum-duelmix .co-legend-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.co-sum-duelmix .co-legend-item { font-size: var(--text-sm); }
.co-seg { display: flex; gap: 3px; height: 14px; margin: var(--space-2) 0 var(--space-3); overflow: hidden; border-radius: var(--radius-pill); }
.co-seg-part { flex-basis: 0; min-width: 8px; background: var(--co-seg-c, var(--color-surface-4)); }
.co-legend-list { display: grid; gap: 6px var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.co-legend-item { display: flex; align-items: baseline; gap: 6px; color: var(--co-seg-c, var(--color-text)); font-size: var(--text-base); }
.co-legend-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--co-seg-c); align-self: center; }
.co-legend-label { flex: 1 1 auto; color: var(--color-text); }
.co-legend-count { color: var(--color-text); font-variant-numeric: tabular-nums; }
[data-q="brilliant"] { --co-seg-c: var(--q-brilliant); }
[data-q="great"] { --co-seg-c: var(--q-great); }
[data-q="perfect"] { --co-seg-c: var(--q-perfect); }
[data-q="very_good"] { --co-seg-c: var(--q-very-good); }
[data-q="good"] { --co-seg-c: var(--q-good); }
[data-q="interesting"] { --co-seg-c: var(--q-interesting); }
[data-q="dubious"] { --co-seg-c: var(--q-dubious); }
[data-q="bad"] { --co-seg-c: var(--q-bad); }
[data-q="blunder"] { --co-seg-c: var(--q-blunder); }
[data-q="no_move"] { --co-seg-c: var(--q-no-move); }
.co-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.co-pos {
  position: relative;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
.co-pos:hover { border-color: var(--color-gold-dim); background: var(--color-surface-3); transform: translateY(-2px); }
.co-pos-board { display: block; width: 100%; }
.co-pos-board .mini-board { width: 100%; height: auto; border-radius: 4px; }
.co-pos-n { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: rgba(4, 8, 14, 0.82); color: var(--color-text); font-size: 0.75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.co-pos-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-2); width: 100%; padding-inline: 2px; }
.co-pos-q { display: inline-flex; align-items: baseline; gap: 4px; color: var(--co-seg-c); font-size: var(--text-sm); font-weight: 700; }
.co-pos-q .co-glyph { font-size: 0.85em; }
.co-pos-pts { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.co-pos-duel { display: inline-flex; align-items: baseline; gap: 4px; color: var(--co-seg-c); font-size: var(--text-sm); }
.co-pos-duel-name { max-width: 7ch; overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.co-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.co-summary-actions > .btn { width: 100%; }
.co-share-text { width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); }

/* ── The summary takes the whole screen (the board rests) ── */
.co-play[data-view="summary"] .co-stage { display: none; }
.co-play[data-view="summary"] { grid-template-columns: minmax(0, 1160px); grid-template-areas: "head" "panel"; grid-template-rows: auto minmax(0, 1fr); justify-content: center; }
.co-play[data-view="summary"] .co-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "exit info stats"; }
.co-play[data-view="summary"] .co-dots { display: none; }
.co-play[data-view="summary"] .co-panel { margin-inline: 0; }
.co-play[data-view="summary"] .co-summary-actions { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: stretch; }
.co-play[data-view="summary"] .co-summary-row { display: contents; }
.co-play[data-view="summary"] .co-foot { justify-items: stretch; }
/* Wide: the verdict of the session on the left, what it gave (the mix of moves, the rewards) on the right, and the positions as a
   row of their own under both, so no column is left half empty. A duel has one wide column: the hero, then a card per player. */
@media (min-width: 900px) {
  .co-play[data-view="summary"] #session-summary-result { grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.4fr); gap: var(--space-5); }
  .co-play[data-view="summary"] #session-summary-result.co-summary-duel { grid-template-columns: minmax(0, 1fr); }
  .co-play[data-view="summary"] .co-sum-positions { grid-column: 1 / -1; }
  /* The achievements of a first session are six cards tall: two to a row, so the right column is about as tall as the left one. */
  .co-play[data-view="summary"] .co-sum-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-content: start; }
  .co-play[data-view="summary"] .co-sum-rewards > :not(.co-achievement) { grid-column: 1 / -1; margin: 0; }
}
/* In a duel summary the scoreboard of the header would repeat the cards (and push the title out of the row): it is hidden. */
.co-play[data-view="summary"][data-mode="duel"] .co-duel { display: none; }
/* Two columns of buttons (phones and narrow tablets): the primary action has a row to itself, and the way home fills the last one
   when the others would leave it alone in a corner. Four across are too narrow under 900px ("Jugar / otra vez" wrapped). */
@media (max-width: 899px) {
  .co-play[data-view="summary"] .co-summary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-play[data-view="summary"] #summary-again-btn { grid-column: 1 / -1; }
  .co-play[data-view="summary"] .co-summary-actions[data-tail="odd"] #summary-menu-btn { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .co-sum-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--space-4); }
  .co-sum-stats { justify-content: center; }
  .co-play[data-view="summary"] .co-panel { border-radius: var(--co-radius) var(--co-radius) 0 0; }
  .co-hero { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-3); gap: var(--space-2) var(--space-3); }
  .co-hero-title { font-size: var(--text-2xl); }
  .co-hero-pending .skeleton-circle { width: 84px; height: 84px; }
  .co-players { gap: var(--space-2); }
}

/* The verdict card stacks (RK-4): the gauge over the words, centred, as soon as the column the card sits in is too narrow for both. The
   card has `overflow: hidden` (its rounded corners and its tinted gradient), so a headline wider than its column was cut off at the card's edge
   without a sound: "Brilliant" and "Inaccuracy" at 24px need about 130px next to a gauge of 84-92px, and the panel is 232-300px wide in every
   landscape window under 900px (568x320 up to 880x700), where a media query on the width of the window (it used to stop at 640px) only
   covered a corner of them. The width of the card is what decides, so the query asks for it, whatever the window. */
@container co-result (max-width: 279px) {
  .co-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gauge" "copy" "chips"; justify-items: center; text-align: center; padding: var(--space-3); }
  .co-hero-title { justify-content: center; }
  .co-chips { justify-content: center; }
}
/* Whatever the column, a word that cannot fit on a line of its own breaks instead of running past the edge of a card that clips. */
.co-hero-copy { grid-template-columns: minmax(0, 1fr); }
.co-hero-title > span:not(.co-glyph), .co-hero-verdict { overflow-wrap: anywhere; }
/* Reduced motion: no entrances, no growing bars */
@media (prefers-reduced-motion: reduce) {
  .co-result > *, .co-thinking > *, .co-sum-hero, .co-bar-fill { animation: none; }
  .co-dotsloader i { animation: none; opacity: 0.7; }
  .co-pos:hover { transform: none; }
}
html[data-motion="reduce"] .co-result > *,
html[data-motion="reduce"] .co-thinking > *,
html[data-motion="reduce"] .co-sum-hero,
html[data-motion="reduce"] .co-bar-fill { animation: none; }