/* Styles for the how-to-play pages (app/views/guides/, GuidesController).
 *
 * These pages are documents, not game screens: they're read on a laptop or a
 * phone, in the light or the dark, by somebody who hasn't played yet. So they
 * get their own sheet rather than borrowing the game UI's — the palette is a
 * cousin of it (the same warm paper and the same eight seat colours, which the
 * diagrams need to match the screenshots), but the typography and spacing are
 * a reading page's.
 *
 * Only the guide layout links this file, so nothing here can reach a game.
 *
 * The vocabulary, roughly in page order:
 *   .wrap .hero .facts        the page and its masthead
 *   section .head .eyebrow    a titled band of content
 *   .steps .step              numbered walkthroughs
 *   .shots .screen            screenshots, TV-sized or phone-sized
 *   .panels .panel .arrow     side-by-side diagrams, "before -> after"
 *   .g .c                     a square grid diagram (Turf's board)
 *   .band                     a 0-100 spectrum diagram (Wavelength's dial)
 *   .chips .chip              card chips (Hot Streak, Play Nine)
 *   .pc .meld                 playing cards and melds (Kalookie)
 *   .deck .tile .thumb        shape cards (Turf's tetrominoes)
 *   .words .word              word cards (Wordsmiths clues, Letter Rip answers)
 *   .bars .bar                a simple bar chart (Hot Streak's deck)
 *   .key .key__row            a legend for a screenshot
 *   .tips .tip                the closing advice
 *   .rules                    the numbered short version
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #41301f;
  --ink-soft: #7a6752;
  --ink-faint: #a3907a;
  --ground: #fdf6e6;
  --surface: #fffdf8;
  --sunk: #f2e7d1;
  --line: #e0d0b0;
  --line-strong: #c9b591;
  --mud: #b3a695;
  --good: #2f9e5f;
  --bad: #e0525f;
  /* The eight player colours, in roster order, matching the game screens. */
  --seat-0: #ff5d5d; --seat-1: #45c4e8; --seat-2: #6fcf73; --seat-3: #ffc233;
  --seat-4: #a472e8; --seat-5: #ff8fc0; --seat-6: #3ba5a0; --seat-7: #ff8a3d;
  --accent: var(--seat-3);
  --display: ui-rounded, "SF Pro Rounded", "Varela Round", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --cell: 34px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f6ecd9; --ink-soft: #b39f85; --ink-faint: #8b7960;
    --ground: #1c150e; --surface: #281e15; --sunk: #322518;
    --line: #453321; --line-strong: #5d452c; --mud: #8b8070;
    --good: #57c98a; --bad: #ff7f89;
  }
}
:root[data-theme="dark"] {
  --ink: #f6ecd9; --ink-soft: #b39f85; --ink-faint: #8b7960;
  --ground: #1c150e; --surface: #281e15; --sunk: #322518;
  --line: #453321; --line-strong: #5d452c; --mud: #8b8070;
  --good: #57c98a; --bad: #ff7f89;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.1rem, 4vw, 2.5rem) 6rem;
  display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5rem);
}
p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, .display { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 780; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 720; }
strong { font-weight: 660; }
em { font-style: normal; background: linear-gradient(transparent 62%, var(--sunk) 62%); }
code { font-family: var(--mono); font-size: 0.86em; background: var(--sunk); padding: 0.1em 0.35em; border-radius: 4px; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--seat-1); outline-offset: 3px; }

.eyebrow {
  font-family: var(--display); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0;
}
section { display: flex; flex-direction: column; gap: 1.5rem; }
.head { display: flex; flex-direction: column; gap: 0.4rem; }

/* ---- the way back to the catalog ---------------------------------------- */
.backlink {
  font-family: var(--display); font-weight: 700; font-size: 0.9rem;
  text-decoration: none; color: var(--ink-soft); align-self: flex-start;
  border: 2.5px solid var(--line-strong); border-radius: 999px;
  padding: 0.25rem 0.95rem; background: var(--surface);
}
.backlink:hover { color: var(--ink); border-color: var(--ink); }

/* ---- hero --------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; gap: 1.3rem; }
.hero .lede { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--ink-soft); max-width: 32ch; }
.hero .lede b { color: var(--ink); font-weight: 660; }
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fact {
  font-family: var(--display); font-weight: 700; font-size: 0.88rem;
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 0.25rem 0.9rem;
  background: var(--surface);
}

/* ---- steps -------------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: 1rem; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem 1.1rem; align-items: start;
}
.step__n {
  grid-row: span 2;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--seat, var(--sunk));
  color: #41301f;
}
.step h3 { align-self: center; }
.step__body { display: flex; flex-direction: column; gap: 0.9rem; }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; }
  .step__n { grid-row: auto; }
}

/* ---- diagram scaffolding ------------------------------------------------ */
.panels { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }
/* For panels too wide to sit side by side (rows of word cards, say): stack them
   and turn the arrow to match, rather than letting flex-wrap strand it. */
.panels--stack { flex-direction: column; align-items: stretch; }
.panels--stack .arrow { transform: rotate(90deg); padding: 0; align-self: flex-start; margin-left: 1.2rem; }
.panel { display: flex; flex-direction: column; gap: 0.5rem; }
.panel__label {
  font-family: var(--display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.arrow {
  align-self: center; font-size: 1.8rem; color: var(--line-strong);
  line-height: 1; padding-top: 1.4rem;
}
@media (max-width: 640px) { .arrow { transform: rotate(90deg); padding: 0; } }
.caption { font-size: 0.92rem; color: var(--ink-soft); max-width: 68ch; }

/* ---- square grids (Turf's board) --------------------------------------- */
.g {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, var(--cell)));
  gap: 3px;
  padding: 6px;
  background: var(--surface);
  border: 4px solid var(--ink);
  border-radius: 14px;
  width: max-content;
  max-width: 100%;
}
.c {
  aspect-ratio: 1;
  border-radius: 20%;
  background: var(--sunk);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-style: normal;
  font-size: calc(var(--cell) * 0.44);
  color: rgba(65, 48, 31, 0.55);
  min-width: 0;
}
.c--paint { background: var(--s); }
.c--fresh { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9), inset 0 0 0 4px rgba(65,48,31,0.4); }
.c--steal { box-shadow: inset 0 0 0 3px #41301f; }
/* A square its owner painted again while somebody came for it: it held. Both
   rims, dark outside — the game screen draws it the same way, since a steal is
   the dark edge and fresh paint the pale one, and a square that was held is the
   two of them stacked. */
.c--held { box-shadow: inset 0 0 0 3px #41301f, inset 0 0 0 6px rgba(255,255,255,0.85); }
.c--star { box-shadow: inset 0 0 0 3px var(--seat-3); }
.c--star:not(.c--paint) { color: var(--ink); }
.c--grey { background: #8b93a1; }
.c--mud {
  background:
    repeating-linear-gradient(45deg, rgba(65,48,31,0.24) 0 3px, transparent 3px 7px),
    var(--mud);
}
/* Ghosts are what a player is *about* to paint, so they read as translucent —
   with a flat fallback first for anything without color-mix. */
.c--ghost {
  background: var(--s);
  background: color-mix(in srgb, var(--s) 38%, transparent);
  box-shadow: inset 0 0 0 3px var(--s);
  /* The tint is translucent, so the ground shows through and the letter has to
     follow the theme rather than the seat colour. */
  color: var(--ink);
}
.c--clash {
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--a) 55%, transparent) 0 50%,
    color-mix(in srgb, var(--b) 55%, transparent) 50% 100%);
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* ---- shape cards (Turf's tetrominoes) ---------------------------------- */
.deck { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tile {
  margin: 0; background: var(--surface); border: 3px solid var(--ink);
  border-radius: 14px; padding: 0.7rem; width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.tile__art { height: 62px; display: grid; place-items: center; }
.tile figcaption { font-family: var(--display); font-weight: 800; font-size: 0.95rem; }
.thumb { display: grid; grid-template-columns: repeat(var(--cols), 13px); gap: 3px; }
.thumb i { display: block; width: 13px; height: 13px; border-radius: 3px; background: transparent; }
.thumb i.on { background: var(--ink); }

/* ---- a 0-100 spectrum (Wavelength's dial) ------------------------------ */
.band {
  display: flex; flex-direction: column; gap: 0.5rem;
  width: 100%; max-width: 640px;
}
.band__ends {
  display: flex; justify-content: space-between;
  font-family: var(--display); font-weight: 780; font-size: 0.95rem;
}
/* The rail is the coordinate space: marks overhang the track and flags sit
   clear of it, so only the coloured zones are clipped to the rounded ends. */
.band__rail { position: relative; margin: 1.9rem 0; }
.band__track {
  position: relative; height: 46px; border-radius: 999px;
  border: 3px solid var(--ink); overflow: hidden;
  background: linear-gradient(90deg, #d8ecf7, #f6e7c8);
}
/* Scoring bands, widest first, so the narrow ones paint on top. */
.band__zone { position: absolute; inset-block: 0; }
.band__zone--1 { background: rgba(255, 194, 51, 0.45); }
.band__zone--2 { background: rgba(255, 168, 51, 0.60); }
.band__zone--3 { background: rgba(140, 208, 130, 0.75); }
.band__zone--4 { background: rgba(47, 158, 95, 0.85); }
/* The track is a light gradient in both themes, so what sits on it is a fixed
   dark rather than --ink, which inverts. */
.band__mark { position: absolute; inset-block: -5px; width: 3px; background: #41301f; border-radius: 2px; }
.band__mark--team { width: 5px; inset-block: -8px; background: var(--seat-0); }
.band__flag {
  position: absolute; bottom: calc(100% + 0.35rem); transform: translateX(-50%);
  font-family: var(--display); font-weight: 780; font-size: 0.78rem;
  background: var(--ink); color: var(--ground);
  border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap;
}
.band__flag--below { bottom: auto; top: calc(100% + 0.35rem); }
.band__flag--team { background: var(--seat-0); color: #41301f; }
/* A name under a dial, for the diagrams that label who went where. */
.band__who {
  position: absolute; top: calc(100% + 0.3rem); transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 660; color: var(--ink-soft); white-space: nowrap;
}
.band--legend { max-width: 420px; }
.band__scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint);
}
.band--legend .band__track { height: 30px; }

/* ---- card chips (Hot Streak, Play Nine) -------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
/* A chip is a picture of a physical card, so it keeps its own light colours in
   both themes — which means its ink and its border have to be fixed too, or
   they invert out from under it in the dark. Same reason as .band__mark. */
.chip {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  min-width: 2.4rem; height: 3rem; padding: 0 0.5rem;
  display: inline-grid; place-items: center;
  border: 3px solid #41301f; border-radius: 10px;
  background: #fffdf8; color: #41301f;
}
.chip--low { background: #dff3e2; }
.chip--mid { background: #fdeec4; }
.chip--high { background: #fbdada; }
.chip--zero { background: #fffdf8; }
.chip--ace { background: #e6dcfb; }
.chip--mod { background: #d8ecf7; font-size: 0.9rem; }
.chip--action { background: #f6e2f0; font-size: 0.78rem; line-height: 1.1; min-width: 4.2rem; }
.chip--down { background: #efe3ca; color: #a3907a; }
.chip--bust { border-color: #c0343f; color: #c0343f; }
/* Not a card: a running total sitting beside them, so this one is page text. */
.chip--sum {
  border: none; background: none; color: var(--ink);
  font-size: 1.05rem; min-width: 0; height: auto;
}

/* A Play Nine grid: a row of columns, because the column is the scoring unit. */
.grid8 { display: flex; gap: 0.35rem; width: max-content; max-width: 100%; flex-wrap: wrap; }
.pair {
  display: grid; gap: 0.35rem; padding: 0.25rem; border-radius: 12px;
  border: 3px solid transparent;
}
.pair--matched { border-color: #2f9e5f; background: rgba(47, 158, 95, 0.14); }

/* ---- playing cards and melds (Kalookie) --------------------------------- */
/* A picture of a real playing card, so like .chip it keeps its own light
   colours in both themes and fixes its ink and border to match. The pip does
   the work rather than the colour: a suit has to be readable in a diagram
   printed grey as well as on a screen. */
.pc {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  min-width: 2.7rem; height: 3.1rem; padding: 0 0.45rem;
  display: inline-grid; place-items: center;
  border: 3px solid #41301f; border-radius: 10px;
  background: #fffdf8; color: #41301f;
  white-space: nowrap;
}
.pc--red { color: #c0343f; }
.pc--joker { background: #efe6ff; color: #6b3fb0; }
/* A joker on the table has stopped being wild: it is the card it stands for,
   and it wears both. */
.pc--joker small { display: block; font-size: 0.6rem; opacity: 0.85; margin-top: -0.15em; }
.pc--ghost { background: none; border-style: dashed; border-color: #a3907a; color: #a3907a; }

/* A meld is one thing, so its cards overlap into a strip rather than sitting
   apart — the same shape the game screens draw. */
.melds { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-start; }
.meld {
  display: inline-flex; padding: 0.3rem 0.35rem; border-radius: 12px;
  background: rgba(65, 48, 31, 0.07);
}
.meld .pc { margin-right: -0.4rem; }
.meld .pc:last-child { margin-right: 0; }
.meld--set { background: rgba(255, 194, 51, 0.24); }
.meld--run { background: rgba(69, 196, 232, 0.20); }
.meld--bad { background: rgba(224, 82, 95, 0.16); }
/* A labelled meld: the strip with a caption under it. */
.meld-box { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.meld-box > span { font-size: 0.82rem; color: var(--ink-soft); font-weight: 660; }

/* ---- word cards (Wordsmiths clues, Letter Rip answers) ----------------- */
.words { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; }
.word {
  margin: 0; background: var(--surface); border: 3px solid var(--seat, var(--line-strong));
  border-radius: 14px; padding: 0.7rem 1rem; min-width: 7rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.word b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.word span { font-size: 0.78rem; color: var(--ink-soft); font-weight: 660; }
.word--struck { border-color: var(--line); background: rgba(224, 82, 95, 0.10); }
.word--struck b { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--ink-faint); }
.word--struck span { color: var(--bad); }
.word mark { background: rgba(164, 114, 232, 0.35); color: inherit; border-radius: 3px; padding: 0 0.08em; }
.word em { background: none; color: var(--ink-faint); font-weight: 700; letter-spacing: 0.04em; }

/* Letter tiles (Letter Rip's block). */
.tiles { display: flex; gap: 0.4rem; }
.tiles i {
  font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.3rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--seat-3); color: #41301f;
  border: 3px solid var(--ink); border-radius: 8px;
}

/* ---- a bar chart (Hot Streak's deck) ---------------------------------- */
.bars { display: flex; flex-direction: column; gap: 0.3rem; max-width: 520px; }
.bar { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.bar b { font-family: var(--display); font-weight: 800; text-align: right; }
.bar i {
  display: block; height: 0.85rem; border-radius: 999px;
  width: calc(var(--n) / 12 * 100%);
  background: var(--accent);
}
.bar span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---- screenshots ------------------------------------------------------- */
.shots { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.shots--pair { grid-template-columns: 2fr 1fr; align-items: start; }
.shots--phones { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 720px) { .shots--pair { grid-template-columns: 1fr; } }
.screen { display: flex; flex-direction: column; gap: 0.45rem; }
.screen img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--sunk);
}
.screen--phone img { max-width: 230px; }
.screen span {
  font-family: var(--display); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---- legends ----------------------------------------------------------- */
.key { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; }
.key__row {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem;
}
.key__row .g { --cell: 30px; border-width: 3px; border-radius: 10px; padding: 4px; flex: none; }
.key__row .chip { flex: none; height: 2.4rem; }
.key__row div { min-width: 0; }
.key__row b { font-family: var(--display); display: block; font-size: 0.95rem; }
.key__row span { font-size: 0.86rem; color: var(--ink-soft); }

/* ---- tips -------------------------------------------------------------- */
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.tip {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  border-radius: 14px; padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.tip h3 { font-size: 1.05rem; }
.tip p { font-size: 0.94rem; color: var(--ink-soft); }
.tip p strong { color: var(--ink); }

/* ---- the short version ------------------------------------------------- */
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; counter-reset: r; }
.rules li {
  display: flex; gap: 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.75rem 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(0.98rem, 2vw, 1.1rem);
}
.rules li::before {
  counter-increment: r; content: counter(r);
  flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--seat, var(--sunk)); font-size: 0.92rem; color: #41301f;
}

/* ---- tables ------------------------------------------------------------ */
/* Grid and flex tracks floor at their content's min-width unless told not to,
   which is how one wide table drags the whole page sideways on a phone. */
.step > *, .step__body > *, .shots > *, .key > *, .tips > *, .panels > * { min-width: 0; }
.scroll { overflow-x: auto; min-width: 0; }
table { border-collapse: collapse; font-size: 0.94rem; min-width: 420px; }
th, td { text-align: left; padding: 0.45rem 1.1rem 0.45rem 0; border-bottom: 1px solid var(--line); }
thead th {
  font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
td { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; padding-right: 0; }

/* ---- other games ------------------------------------------------------- */
.more { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.more a {
  font-family: var(--display); font-weight: 700; font-size: 0.88rem;
  text-decoration: none; border: 2.5px solid var(--line-strong); border-radius: 999px;
  padding: 0.25rem 0.9rem; background: var(--surface); color: var(--ink-soft);
}
.more a:hover { color: var(--ink); border-color: var(--ink); }

footer { border-top: 1px solid var(--line); padding-top: 1.4rem; color: var(--ink-soft); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.9rem; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }