/* Nibbles content pages - the article layout and the example boards shared
   by the guides and the about page. Rides theme.css: every colour is a
   token, so dark mode and the colour guard both come along for free.
   Game pages never load this file. */

/* Unlike the games, these pages are for reading. */
body.reading { -webkit-user-select: text; user-select: text; }

.page { display: flex; flex-direction: column; gap: 14px; }

/* A smaller hero: on a guide the heading is the content. The about page
   is a tab beside home and the games, so it keeps the hero they have. */
.page .hero:not(.hero-full) { padding-bottom: 4px; }
.page .hero:not(.hero-full) .mascot { font-size: 44px; }
.page .hero:not(.hero-full) .title { font-size: 27px; }

.page h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.page p { margin: 0; line-height: 1.55; }
.page .tagline { line-height: inherit; }   /* the hero is the theme's, not prose */

.page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page th {
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-soft);
  padding: 4px 8px 6px 0;
}
.page td { padding: 6px 8px 6px 0; border-top: 1px dashed var(--pink-soft); vertical-align: top; }
.page td b { white-space: nowrap; }

/* ------------------------------------------------------- example boards
   The game's board, remade as plain markup: a grid of tiles and an SVG
   trace that draws itself. Every letter is real text, so the examples
   are copy, not pictures. */

.ex-board { position: relative; margin-inline: auto; }
/* The grid sets the tile size and the tiles inherit it, so the columns
   and the tiles can never disagree (the 3x3 once drew 62px tiles into
   56px columns, and the trace missed their centres). */
.ex-grid { display: grid; gap: 5px; --ex-tile: 62px; }
.ex-grid.four { grid-template-columns: repeat(4, var(--ex-tile)); }
.ex-grid.three { --ex-tile: 56px; grid-template-columns: repeat(3, var(--ex-tile)); }

/* The theme's letter tile at the example's size. */
.ex-tile {
  --tile-size: var(--ex-tile);
  width: var(--ex-tile);
  height: var(--ex-tile);
}
.ex-tile.on {
  --tile-fill: var(--pink-fill);
  --tile-ink: var(--on-accent);
  --tile-under: var(--pink-press);
}
.ex-tile.bad {
  --tile-ink: var(--danger);
  box-shadow: 0 calc(var(--tile-size) * .055) 0 var(--tile-edge), 0 0 0 2px var(--danger) inset;
}
.ex-tile.qu { --ex-tile: 76px; margin-inline: auto; }

.ex-trace { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ex-trace .draw {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: ex-draw 3.2s ease-in-out infinite;
}
@keyframes ex-draw {
  0%   { stroke-dashoffset: var(--len, 400); opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  96%  { opacity: 0; }
  100% { stroke-dashoffset: var(--len, 400); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-trace .draw { animation: none; stroke-dashoffset: 0; }
}
.ex-trace .refused {
  stroke: color-mix(in srgb, var(--danger) 80%, transparent);
  stroke-dasharray: 4 12;
  filter: none;
}

.ex-note { font-size: 13px; color: var(--ink-soft); text-align: center; }

/* The scoring examples wear the theme's word pill; the candy hint is the
   theme's bubble, sat in the flow. */
.ex-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ex-word b { color: var(--mint-deep); }
.ex-word.big b { color: var(--gold-press); }
.ex-bubble { margin-inline: auto; }

/* ------------------------------------------------------ sudoku examples */

.ex-row { display: flex; gap: 3px; justify-content: center; }
.ex-cell {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-xs);
}
.ex-cell.me { color: var(--mint-deep); }
.ex-cell.hint { background: var(--tint-lavender); color: var(--lavender-press); }
.ex-cell.hint span { opacity: .55; }
.ex-cell.ev { background: var(--evidence); }

/* A cell holding pencil marks: a tiny 3x3 grid. */
.ex-cell.marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 2px;
}
.ex-cell.marks span { display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------ faq + cta */

.faq { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.faq h2 { padding: 8px 0 10px; }
.faq details { border-top: 2px dashed var(--pink-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  padding: 12px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 0 14px; }

/* Prose links: ink, with the pink dotted underline the text buttons wear,
   rather than the browser's blue, which is the one colour no token names.
   Scoped to paragraphs: the nav's anchors have no class either. */
.page .card p a {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: var(--pink-deep);
  text-underline-offset: 3px;
}

a.play-cta {
  display: block;
  text-align: center;
  text-decoration: none;
}


/* The about page's install card. Mint is you: the line that names the
   app on this very phone. */
.app-card > a.play-cta { margin-top: 4px; }
.app-meta { font-size: 14px; color: var(--ink-soft); text-align: center; }
.app-mine { background: var(--tint-mint); border-radius: var(--r-md); padding: 10px 14px; }

/* The game cards, on the hub and again at the foot of the about page:
   tools/page-chrome.ts stamps the same two into both. */
.game-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease;
}
.game-card:active { transform: scale(.97); }
.game-mascot { font-size: 52px; line-height: 1; }
.game-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.game-name { font-size: 22px; font-weight: 800; color: var(--pink-deep); }
.game-blurb { font-size: 14px; color: var(--ink-soft); }
.game-go { margin-left: auto; font-size: 26px; }

/* --------------------------------------------------------------- desktop
   Phones keep the single column untouched; everything here sits behind a
   min-width query. Guides read as picture-book spreads (prose left, the
   example board right), the parallel pages spread into a bento grid, and
   the hub's game cards go side by side. The games never load this file. */

@media (min-width: 940px) {   /* the games' desktop breakpoint too */
  #app { max-width: 760px; }
  .page .card { padding: 22px 28px; }
  .page .title { font-size: 34px; }
  .page .mascot { font-size: 52px; }
  .page > a.play-cta { width: 100%; max-width: 520px; margin-inline: auto; }

  /* The hub: two portrait game cards under the hero and nav. */
  #app > .screen.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  #app > .screen.is-active > .hero,
  #app > .screen.is-active > .site-nav,
  #app > .screen.is-active > .foot-link { grid-column: 1 / -1; }
  #app .game-card { flex-direction: column; text-align: center; gap: 10px; padding: 28px 20px; }
  #app .game-card .game-info { align-items: center; }
  #app .game-card .game-mascot { font-size: 64px; }
  #app .game-card .game-go { margin-left: 0; }

  /* Bento pages: cards flow into two columns; hero, nav, FAQ and the
     play button stay full width. */
  #app.page-bento { max-width: 1020px; }
  .page-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .page-bento > .hero, .page-bento > .site-nav, .page-bento > a.play-cta,
  .page-bento > .card-wide, .page-bento > .card.faq { grid-column: 1 / -1; }
  .page-bento > .card.faq { width: 100%; max-width: 700px; justify-self: center; }

  /* Picture-book guides: inside a card that holds an example, prose sits
     left and the example right. Cards without one stay a single column. */
  #app.page-book { max-width: 900px; }
  .page-book .card:has(.ex-board, .ex-row, .ex-bubble, .ex-words, .ex-tile) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-auto-flow: dense;
    gap: 14px 30px;
    align-items: center;
  }
  .page-book .card > h2, .page-book .card > table { grid-column: 1 / -1; }
  .page-book .card > p { grid-column: 1; }
  .page-book .card > .ex-board, .page-book .card > .ex-bubble,
  .page-book .card > .ex-words, .page-book .card > .ex-row,
  .page-book .card > .ex-note, .page-book .card > .ex-tile { grid-column: 2; }
}