/* reversi.site – Impossible Comeback (/comeback/), Learn (/learn/) and Embed (/embed/) (FEAT package).
   Loads after site.css and game.css and uses their tokens and components (SPEC §4.11). The board itself
   is styled by game.css (.board-*). Class prefixes: .cb-, .learn-, .embed-. Mobile first; no inline
   styles, no !important. The home page promo (comeback/promo.js) uses site.css classes only. */

/* =========================================================================
   Impossible Comeback
   Phones: header, board, panel – the board and the controls fit 390×844 without scrolling.
   Desktop: the board on the left, the heading and the panel on the right.
   ========================================================================= */

.cb {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'board' 'panel';
  gap: var(--space-3);
  width: min(100% - 16px, 1120px);
  margin: var(--space-3) auto var(--space-6);
}

.cb-head {
  grid-area: head;
  min-width: 0;
}
.cb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cb-eyebrow .icon {
  width: 1rem;
  height: 1rem;
}
.cb-title {
  margin: 2px 0 0;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}
.cb-title__no {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 24px;
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.cb-meta__dots {
  display: inline-flex;
  color: var(--accent-text);
}
.cb-dots {
  display: block;
  flex: none;
}

.cb-board {
  grid-area: board;
  justify-self: center;
  /* Leave room for the heading and the panel on phones (svh: mobile browser bars do not change it). */
  width: min(100%, calc(100vh - var(--header-h) - 290px), 640px);
  width: min(100%, calc(100svh - var(--header-h) - 290px), 640px);
  min-width: min(100%, 260px);
  aspect-ratio: 1;
}
.cb-noscript {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--board-frame);
  color: #ffffff;
  text-align: center;
}
.cb-noscript a {
  color: #ffffff;
}

.cb-panel {
  grid-area: panel;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}
.cb-play {
  display: grid;
  gap: var(--space-2);
}
.cb-try {
  min-height: var(--lh-xs);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-status {
  min-height: var(--lh-md);
  margin: 0;
  font-weight: var(--fw-semibold);
}
.cb-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.cb[data-state='error'] .cb-status {
  color: var(--danger);
}

/* One square per own move of this try: check = the win was kept, cross = it slipped. */
.cb-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
}
.cb-mark .icon {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.cb-mark--kept {
  background: var(--success);
  color: var(--on-accent);
}
.cb-mark--slipped {
  background: var(--danger);
  color: var(--on-danger);
}

.cb-score {
  display: flex;
  gap: var(--space-2);
}
.cb-score__side {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.cb-score__who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-score__n {
  font: var(--fw-bold) var(--text-2xl) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.cb-score .play-chip {
  width: 20px;
  height: 20px;
}

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cb-actions .btn {
  flex: 1 1 auto;
}
.cb-actions:not(:has(.btn:not([hidden]))) {
  display: none;
}

.cb-note {
  margin: 0;
}
.cb-note > p {
  margin: 0 0 var(--space-2);
}
.cb-note > p:last-child {
  margin-bottom: 0;
}

/* Result */
.cb-result {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cb-result > * {
  margin: 0;
}
.cb-result__title {
  color: var(--accent-text);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}
.cb-journey {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cb-journey .play-chip {
  width: 32px;
  height: 32px;
}
.cb-journey__n {
  font: var(--fw-black) var(--text-4xl) / 1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.cb-result__tries {
  font-weight: var(--fw-semibold);
}
.cb-result__marks {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}
.cb-result__try {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cb-square {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.cb-square--kept {
  background: var(--success);
}
.cb-square--slipped {
  background: var(--danger);
}
.cb-result__streak {
  display: flex;
  gap: var(--space-6);
}
.cb-result__streak dt,
.cb-stat dt {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-result__streak dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}
.cb-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cb-result__actions .btn {
  flex: 1 1 auto;
}
.cb-next,
.cb-countdown {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-variant-numeric: tabular-nums;
}
.cb-replay {
  font-size: var(--text-sm);
}

/* Record and history (below the game) */
.cb-stats {
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.cb-stats__title {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
}
.cb-statlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 0 var(--space-5);
}
.cb-stat {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.cb-stat dd {
  margin: 0;
  font: var(--fw-bold) var(--text-2xl) / 1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.cb-history__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: var(--lh-md);
}
.cb-history {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 420px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.cb-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}
.cb-day__num {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 11px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cb-day__mark {
  display: grid;
  place-items: center;
}
.cb-day__mark .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.cb-day[data-status='won'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.cb-day[data-status='helped'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.cb-day[data-status='tried'] {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}
.cb-day[data-status='playing'],
.cb-day[data-status='today'] {
  border: 2px dashed var(--accent);
  color: var(--text);
}
.cb-day[data-status='missed'] {
  border-style: dotted;
  background: var(--surface-2);
}
.cb-storage {
  max-width: 60ch;
  margin: 0;
}

@media (min-width: 520px) {
  .cb-statlist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .cb {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'board head' 'board panel';
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    margin-block: var(--space-5) var(--space-7);
  }
  .cb-board {
    width: min(100%, calc(100svh - var(--header-h) - 64px), 640px);
  }
  .cb-title {
    font-size: var(--text-3xl);
    line-height: var(--lh-3xl);
  }
  .cb-panel {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
}

/* Phones held sideways and short screens: board and panel side by side. */
@media (orientation: landscape) and (max-height: 600px) and (min-width: 560px) {
  .cb {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'board head' 'board panel';
    column-gap: var(--space-4);
  }
  .cb-board {
    width: calc(100vh - var(--header-h) - 24px);
    width: calc(100svh - var(--header-h) - 24px);
    min-width: 240px;
  }
}

@media (max-width: 359.98px) {
  .cb-score__who {
    font-size: var(--text-xs);
  }
  .cb-score__n {
    font-size: var(--text-xl);
  }
}

/* =========================================================================
   Learn (/learn/)
   Phones: the step text above the board, feedback and buttons below it.
   Desktop: the board on the left, everything else on the right.
   ========================================================================= */

.learn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'top' 'board' 'bottom' 'end';
  gap: var(--space-3);
  width: min(100% - 16px, 1120px);
  margin: var(--space-3) auto var(--space-6);
}
.learn-head {
  grid-area: head;
  min-width: 0;
}
.learn-head .eyebrow {
  margin-bottom: 2px;
}
.learn-title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}
.learn-intro {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

.learn-top {
  grid-area: top;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.learn-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.learn-progress__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.learn-dots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.learn-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-input);
  border-radius: 50%;
  color: var(--on-accent);
}
.learn-dot .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.learn-dot[data-state='done'] {
  border-color: var(--accent);
  background: var(--accent);
}
.learn-dot[data-state='current'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.learn-step {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
}
.learn-text {
  margin: 0;
}

.learn-board {
  grid-area: board;
  justify-self: center;
  width: min(100%, calc(100vh - var(--header-h) - 290px), 600px);
  width: min(100%, calc(100svh - var(--header-h) - 290px), 600px);
  min-width: min(100%, 260px);
  aspect-ratio: 1;
}
.learn-noscript {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--board-frame);
  color: #ffffff;
  text-align: center;
}
.learn-noscript a {
  color: #ffffff;
}

.learn-bottom {
  grid-area: bottom;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.learn-feedback {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.learn-feedback[data-tone='warning'] {
  border-color: var(--warning);
  background: var(--warning-soft);
}
.learn-feedback[data-tone='success'] {
  border-color: var(--success);
  background: var(--success-soft);
}
.learn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.learn-skipall {
  margin: 0;
  font-size: var(--text-sm);
}

.learn-end {
  grid-area: end;
  min-width: 0;
}
.learn-end__title {
  margin: 0 0 var(--space-2);
}
.learn-end__tiles {
  max-width: 560px;
}
.learn[data-state='end'] :is(.learn-top, .learn-board, .learn-bottom) {
  display: none;
}

@media (max-width: 519.98px) {
  .learn-head .eyebrow {
    display: none;
  }
}

@media (min-width: 860px) {
  .learn {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: 'board head' 'board top' 'board bottom' 'board .';
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    margin-block: var(--space-5) var(--space-7);
  }
  .learn[data-state='end'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'head' 'end';
  }
  .learn-board {
    width: min(100%, calc(100svh - var(--header-h) - 64px), 600px);
  }
  .learn-title {
    font-size: var(--text-3xl);
    line-height: var(--lh-3xl);
  }
  .learn-intro {
    font-size: var(--text-md);
    line-height: var(--lh-md);
  }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 560px) {
  .learn {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: 'board head' 'board top' 'board bottom' 'board .';
    column-gap: var(--space-4);
  }
  .learn-board {
    width: calc(100vh - var(--header-h) - 24px);
    width: calc(100svh - var(--header-h) - 24px);
    min-width: 240px;
  }
}

/* =========================================================================
   Embed (/embed/): fits a 420×480 iframe; the board shrinks with the frame's height.
   ========================================================================= */

body.page-embed {
  min-height: 0;
  overflow: hidden;
}
.embed {
  --embed-w: min(100%, calc(100vh - 116px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 6px;
  height: 100vh;
  height: 100dvh;
  padding: 8px;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .embed {
    --embed-w: min(100%, calc(100dvh - 116px));
  }
}
.embed-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: var(--embed-w);
  min-width: 0;
}
.embed .embed-level {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding-block: 4px;
  font-size: var(--text-sm);
}
.embed-new {
  flex: none;
}
.embed-score {
  display: flex;
  flex: none;
  gap: var(--space-3);
  margin: 0 0 0 auto;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.embed-score__side {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.embed-score .play-chip {
  width: 16px;
  height: 16px;
}
.embed-board {
  width: var(--embed-w);
  aspect-ratio: 1;
}
.embed-board .board-frame {
  --coord: 12px;
  --frame-pad: 6px;
  gap: 2px;
  border-radius: var(--radius-md);
}
.embed-board .board-ranks span,
.embed-board .board-files span {
  font-size: 9px;
}
.embed-status {
  width: var(--embed-w);
  min-height: var(--lh-sm);
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.embed-foot {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.embed-noscript {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--board-frame);
  color: #ffffff;
  text-align: center;
}
.embed-noscript a {
  color: #ffffff;
}

@media (pointer: coarse) {
  .embed {
    --embed-w: min(100%, calc(100vh - 124px));
  }
  .embed .embed-level {
    min-height: 44px;
  }
}
@supports (height: 100dvh) {
  @media (pointer: coarse) {
    .embed {
      --embed-w: min(100%, calc(100dvh - 124px));
    }
  }
}

/* =========================================================================
   Windows contrast themes: marks, squares and days keep their meaning without colour.
   ========================================================================= */
@media (forced-colors: active) {
  .cb-mark,
  .cb-square,
  .cb-day,
  .learn-dot {
    forced-color-adjust: none;
  }
  .cb-mark--kept,
  .cb-square--kept,
  .cb-day[data-status='won'],
  .learn-dot[data-state='done'] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  .cb-mark--slipped,
  .cb-square--slipped,
  .cb-day[data-status='tried'] {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
  .cb-day,
  .cb-day[data-status='helped'],
  .cb-day[data-status='missed'],
  .learn-dot {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  .cb-day[data-status='playing'],
  .cb-day[data-status='today'],
  .learn-dot[data-state='current'] {
    border: 2px dashed Highlight;
  }
  .cb-result,
  .cb-score__side,
  .cb-stat,
  .learn-feedback {
    border: 1px solid CanvasText;
  }
}