/* ==========================================================================
   /how-to-play -- the printed instruction sheet, set as a web document.

   Same footing as /privacy: a single readable column, Bebas section headings,
   Atkinson 20px / 1.6 body, no art and no email capture. It is a document
   somebody reads at the table, not a marketing band.

   Where it goes further than /privacy is the two things a rules sheet needs
   and a legal notice does not: numbered steps you can find again mid-game,
   and a boxed quick reference. Both are built from tokens.css -- the 3px
   border, the hard offset shadow, the pink numerals -- so they read as this
   brand rather than as a generic article.
   ========================================================================== */

.htp {
  /* Slightly wider than /privacy's 720: the step rows carry a 44px numeral
     gutter, so the measure of the text itself lands in the same place. */
  max-width: 760px;
}

.htp__title {
  margin-top: var(--space-3);
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
}

.htp__intro {
  margin-top: var(--space-5);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--muted);
}

/* ---------- Players / time strip ---------- */

.htp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: var(--border) solid var(--line);
}

.htp__meta-term {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

.htp__meta-value {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* ---------- Type ---------- */

.htp__h {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  /* Fixed, like /privacy's section headings: this is a document, so the
     headings do not ride the marketing pages' clamp() scales. */
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
}

.htp__h--flush { margin-top: 0; }

.htp p {
  margin-top: var(--space-4);
  font-size: 20px;
  line-height: 1.6;
}

.htp p + p { margin-top: var(--space-3); }

/* The button is styled by components.css and must keep its own look. */
.htp a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* ---------- Bulleted lists ---------- */

.htp__bullets {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.htp__bullets li {
  position: relative;
  margin-top: var(--space-3);
  padding-left: var(--space-5);
  font-size: 20px;
  line-height: 1.6;
}

/* Pink ink on --bg-0 only, which is where this page sits. */
.htp__bullets li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--accent-text);
}

/* ---------- Numbered steps ---------- */

.htp__steps {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: htp-step;
}

.htp__steps > li {
  counter-increment: htp-step;
  position: relative;
  margin-top: var(--space-5);
  padding-left: 48px;
  font-size: 20px;
  line-height: 1.6;
}

.htp__steps > li:first-child { margin-top: 0; }

/* A real numeral tile rather than a list marker: it is what makes a step
   findable when somebody looks back at the page mid-round. Pink carries ink
   text, never white -- see design/docs/02-design-system.md. */
.htp__steps > li::before {
  content: counter(htp-step);
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.htp__step-title { font-weight: 700; }

.htp__step-title--block { display: block; }

/* ---------- Quick reference ---------- */

.htp__qref {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--bg-1);
  border: var(--border) solid var(--text);
  /* Shadows are ink, not layout, so the offset cannot push the page sideways
     at 360px. */
  box-shadow: var(--shadow-hard);
}

.htp__qref .htp__steps { margin-top: 0; }

/* Tighter than the walk-through above it: this list is scanned, not read. */
.htp__qref .htp__steps > li { margin-top: var(--space-4); }

/* ---------- Tips, clarifications, variants ---------- */

.htp__block { margin-top: var(--space-6); }

.htp__block-title {
  font-family: var(--font-body);
  font-size: var(--fs-faq-q);
  line-height: var(--lh-faq-q);
  font-weight: 700;
}

.htp__block-title + p { margin-top: var(--space-2); }

/* ---------- Tracker band ---------- */

.htp__tracker {
  margin-top: var(--space-9);
  padding: var(--space-6) var(--space-5);
  background: var(--bg-1);
  border: var(--border) solid var(--text);
}

.htp__cta { margin-top: var(--space-5); }

@media (min-width: 768px) {
  .htp__tracker { padding: var(--space-7) var(--space-6); }
}