/* The "How to play" guide (web/guide/): a long reading page on top of app.css. Same ink, brass and sand; a wider
   frame with a contents list beside the text on large screens, a comfortable line length, phone screenshots kept
   phone-sized, and tables that scroll inside their own box. Dark only, like the rest of the site. */

.guide-page { --wide: 1120px; --measure: 40rem; }
.guide-page .top, .guide-page .foot { max-width: calc(var(--wide) + 2 * var(--gutter)); }
.guide-page .foot { display: grid; gap: 6px; }

.guide {
  width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto;
  padding: 8px calc(var(--gutter) + var(--safe-r)) 24px calc(var(--gutter) + var(--safe-l));
  display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ intro */
.guide-intro { display: grid; gap: 12px; padding: 12px 0 4px; max-width: var(--measure); }
.guide-intro .art { width: 120px; height: 65px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.guide-intro .title { font-size: 2rem; }
.guide-intro .lead { max-width: none; font-size: 1.125rem; line-height: 1.55; }
.guide-intro .lead + .lead { font-size: 1.0625rem; }

/* ------------------------------------------------------------------ contents */
.toc { padding: 16px 18px; }
.toc h2 { color: var(--sand); font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 8px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; padding: 8px 4px; border-radius: var(--radius-s);
  color: var(--paper); text-decoration: none; font-weight: 800; line-height: 1.3; }
.toc a::before { content: counter(toc); flex: none; width: 1.6em; color: var(--sand-lo); font-weight: 900; text-align: right; }
.toc a:hover { color: var(--brass-hi); background: rgba(226, 181, 83, 0.08); }

/* ------------------------------------------------------------------ sections and text */
.guide-body { display: grid; gap: 48px; min-width: 0; }
.guide-section { display: grid; gap: 16px; min-width: 0; scroll-margin-top: 16px; }
.guide-section > * { max-width: var(--measure); }
.guide-section > .shots, .guide-section > .table-wrap, .guide-section > figure.wide { max-width: none; }
.guide-section > .table-cap { margin: 4px 0 -8px; color: var(--sand); font-weight: 900; font-size: 0.9375rem; line-height: 1.45; }
.guide-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.625rem; line-height: 1.15; color: var(--paper); letter-spacing: 0.01em; }
.guide-section h2 small { display: block; font-family: var(--font); color: var(--sand); font-weight: 900; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.guide-section h3 { font-size: 1.1875rem; font-weight: 900; color: var(--paper); margin-top: 8px; }
.guide-section p, .guide-section li { color: var(--paper-2); font-weight: 600; font-size: 1.0625rem; line-height: 1.6; }
.guide-section p { margin: 0; }
.guide-section b, .guide-section strong { color: var(--paper); font-weight: 900; }
.guide-section ul, .guide-section ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.guide-section li::marker { color: var(--sand-lo); font-weight: 900; }
.guide-section a { color: var(--brass-hi); font-weight: 800; }
.guide-section code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9375rem; color: var(--sand); }

/* advice, set apart from the rules */
.tip { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--brass-line); background: rgba(226, 181, 83, 0.08); display: grid; gap: 4px; }
.tip p { color: var(--paper); }
.tip .tip-label { color: var(--sand); font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* how big the game is: a compact grid of numbers */
.guide-section > .stats { max-width: none; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.stats > div { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--brass-line-soft); background: rgba(20, 22, 18, 0.7); display: grid; gap: 2px; align-content: start; }
.stats > div:first-child { grid-column: 1 / -1; }
.stats dt { font-family: var(--font); font-weight: 900; font-size: 1.625rem; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--brass-hi); }
.stats dd { margin: 0; color: var(--paper-2); font-weight: 700; font-size: 0.9375rem; line-height: 1.4; }
.live { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--brass-line-soft);
  background: rgba(10, 11, 9, 0.5); font-size: 1rem !important; }
.live .pulse { flex: none; }

/* ------------------------------------------------------------------ screenshots */
.shots { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 4px 0; }
.shot { margin: 0; display: grid; gap: 8px; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--brass-line-soft); background: var(--ink-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36); }
.shot figcaption { color: var(--muted); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.shot.phone { flex: 0 1 244px; }
.shot.wide { flex: 1 1 100%; }
.shot.wide img { border-radius: 8px; }
/* phones: a row of phone screenshots scrolls sideways in its own strip, the next one peeking in */
@media (max-width: 599px) {
  .shots { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 14px;
    margin: 4px calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding: 0 var(--gutter); }
  .shots:has(> .shot:only-child) { justify-content: center; overflow: visible; }
  .shot.phone { flex: 0 0 min(70%, 270px); scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--brass-line-soft); border-radius: var(--radius); background: rgba(10, 11, 9, 0.35);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-wrap:focus-visible { outline-offset: 2px; }
.guide table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; line-height: 1.4; }
.guide th, .guide td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid rgba(214, 172, 86, 0.12); }
.guide thead th { border-top: 0; color: var(--sand); font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.guide tbody th { color: var(--paper); font-weight: 900; min-width: 7.5em; }
.guide td { color: var(--paper-2); font-weight: 600; min-width: 10em; }
.guide td.num, .guide th.num { text-align: right; white-space: nowrap; min-width: 0; }
.guide tbody tr:hover { background: rgba(226, 181, 83, 0.05); }

/* ------------------------------------------------------------------ quick start */
.steps { counter-reset: step; list-style: none; padding: 0 !important; display: grid; gap: 10px !important; }
.steps li { counter-increment: step; position: relative; padding: 12px 14px 12px 56px; border-radius: var(--radius); border: 1px solid var(--brass-line-soft);
  background: rgba(20, 22, 18, 0.7); color: var(--paper); }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brass); color: #1d1606; font-weight: 900; font-size: 0.9375rem; }

.to-top { font-weight: 800; font-size: 0.9375rem; }
.guide-meta { color: var(--faint); font-size: 0.9375rem; font-weight: 700; margin: 0; }

/* ------------------------------------------------------------------ larger screens */
@media (min-width: 700px) {
  .guide { padding-top: 24px; gap: 32px; }
  .guide-intro .title { font-size: 2.75rem; }
  .guide-section h2 { font-size: 2rem; }
}
@media (min-width: 1000px) {
  .guide { grid-template-columns: 250px minmax(0, 1fr); column-gap: 56px; }
  .guide-intro { grid-column: 1 / -1; }
  .toc { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; }
  .guide-section { scroll-margin-top: 24px; }
  .guide td { min-width: 6em; }
  .guide tbody th { min-width: 6em; }
  .guide thead th { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) { html:has(.guide-page) { scroll-behavior: smooth; } }