/* Content-page chrome (How to Play, Tips): header, breadcrumbs, cards. After theme.css. */
    /* Content pages (How to Play, Tips) use ONE text colour: the page title's
       — gold in dark, brown in light. Redefines the shared theme's text tokens
       for these pages only (this function is emitted after rampart_theme_css,
       so equal-specificity rules here win). Coloured buttons, the scout +/-,
       the 64x pill and the multiplier rungs keep their colours: those carry
       meaning, they are not body text. */
    :root {
      --pg-fg:    #f0c030;
      --crumb-fg: #f0c030;
      --card-fg:  #f0c030;
      --menu-fg:  #f0c030;
      --muted:    #f0c030;
    }
    html[data-theme="light"] {
      --pg-fg:    #895a03;
      --crumb-fg: #895a03;
      --card-fg:  #895a03;
      --menu-fg:  #895a03;
      --muted:    #895a03;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--pg-bg);
      background-attachment: fixed;
      color: var(--pg-fg);
      font-family: 'Segoe UI', Arial, sans-serif;
      min-height: 100vh;
    }
    .home-header {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.55rem 0.8rem 0.45rem;
      background: var(--hdr-bg);
      backdrop-filter: blur(8px);
      border-bottom: 1.5px solid var(--hdr-bd);
      box-shadow: 0 2px 12px var(--hdr-sh);
      /* backdrop-filter makes this a stacking context; lift it (and the help
         menu inside it) above the page content that follows in the DOM. */
      position: relative; z-index: 50;
    }
    .home-header a { display: flex; align-items: center; text-decoration: none; gap: 0.6rem; }
    .home-title {
      font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em;
      background: linear-gradient(90deg, #f0c030 0%, #fde68a 50%, #f59e0b 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .brand-lockup { display: flex; flex-direction: column; line-height: 1.15; }
    .home-tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; color: #f0c030; }  /* = page title colour; light theme sets #895a03 */
    .content { padding: 1rem 0.8rem 2rem; max-width: 480px; margin: 0 auto; }
    /* Full-width band between the header and the content column; the inner row
       lines up with .content so the crumbs sit flush with the card below. */
    .crumbs {
      border-bottom: 1px solid var(--panel-bd);
      background: var(--panel-bg);
    }
    .crumbs-inner {
      display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
      max-width: 480px; margin: 0 auto; padding: 0.55rem 0.8rem;
      font-size: 0.8rem; font-weight: 600;
      /* One colour throughout, matching the page title (.page-card h1); the
         light-theme value is set alongside the h1 in the light-mode ink rule. */
      color: #f0c030;
    }
    .crumbs a { color: inherit; text-decoration: none; }
    .crumbs a:hover { text-decoration: underline; }
    .crumbs [aria-current] { color: inherit; }
    .page-card {
      background: var(--panel-bg); border: 1px solid var(--panel-bd);
      border-radius: 14px; padding: 1.2rem;
    }
    .page-card h1 { font-size: 1.3rem; font-weight: 800; color: #f0c030; margin-bottom: 0.7rem; }
    .page-card p  { font-size: 0.9rem; line-height: 1.6; color: var(--pg-fg); }
    .page-card p + p { margin-top: 0.7rem; }
    /* The global reset zeroes list padding; put the indent back so bullets sit
       in from the section text rather than hanging off the card edge. */
    .page-card ul { padding-left: 1.5rem; margin: 0.35rem 0 0.6rem; }
    .page-card li {
      font-size: 0.9rem; line-height: 1.55; color: var(--pg-fg);
      margin: 0 0 0.45rem;
    }

    /* Long-form sections — same visual language as the intro popup, but flowing
       down the page instead of paginated. */
    .pg-section { margin-top: 1.6rem; }
    .pg-section:first-of-type { margin-top: 1rem; }
    .pg-section h2 {
      font-size: 1.05rem; font-weight: 800; color: #f0c030; margin-bottom: 0.5rem;
    }
    .pg-sub {
      font-size: 0.88rem; font-weight: 800; color: #f0c030;
      margin: 1rem 0 0.35rem;
    }
    .pg-logo {
      float: left; width: 38px; height: 38px; border-radius: 50%;
      box-shadow: 0 0 0 2px #f0c03088; margin: 0.15rem 0.7rem 0.3rem 0;
    }
    .pg-logo-inline {
      width: 1.15em; height: 1.15em; vertical-align: -0.22em; border-radius: 50%;
    }
    .pg-section::after { content: ''; display: block; clear: both; }
    .page-card strong { color: var(--pg-fg); }

    /* Next-step link at the foot of a content page. */
    .pg-next {
      margin: 1.8rem 0 0; padding-top: 1rem;
      border-top: 1px solid var(--panel-bd);
      font-size: 0.9rem; font-weight: 700;
    }
    .pg-next a { color: #f0c030; text-decoration: none; }
    .pg-next a:hover { text-decoration: underline; }
    html[data-theme="light"] .pg-next a { color: #895a03; }

    /* ── Tips and Tricks: advice first ──────────────────────────────────────
       A numbered rule, the reasoning under it, then an optional demo. Grouped
       into the three moments of a round: read it, order it, finish it. */
    .tip-group {
      margin: 2rem 0 0.2rem;
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--crumb-fg);
      border-bottom: 1px solid var(--panel-bd); padding-bottom: 0.4rem;
    }
    .tip { margin-top: 1.4rem; }
    .tip-head {
      display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.35rem;
    }
    .tip-no {
      flex-shrink: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
      color: var(--crumb-fg); background: var(--box-bg);
      border: 1px solid var(--panel-bd); border-radius: 20px;
      padding: 0.1rem 0.5rem;
    }
    .tip-head h2 { font-size: 1rem; font-weight: 800; color: #f0c030; }
    .tip p { font-size: 0.88rem; line-height: 1.55; color: var(--pg-fg); margin: 0 0 0.55rem; }
    /* The one-line takeaway — the part worth remembering at the board. */
    .tip-key {
      margin: 0.6rem 0 0; padding: 0.5rem 0.75rem;
      background: var(--box-bg); border-left: 3px solid #f0c030;
      border-radius: 0 8px 8px 0;
      font-size: 0.85rem; font-weight: 700; line-height: 1.45;
    }
    html[data-theme="light"] .tip-key { border-left-color: #a06010; }
    .tip .tut { margin-top: 0.9rem; }

    /* Legend — a two-column table: chips in one column, descriptions in the
       next, aligned row for row. Each <p> is display:contents so its .lg-key
       and .lg-desc drop straight into the grid. */
    .legend {
      display: grid; grid-template-columns: max-content 1fr;
      column-gap: 0.75rem; row-gap: 0.55rem; align-items: start;
    }
    .legend h2 { grid-column: 1 / -1; margin-bottom: 0; }
    .legend::after { content: none; }  /* no stray grid cell from .pg-section clearfix */
    .legend p { display: contents; }
    .lg-key { display: inline-flex; align-items: center; gap: 0.35rem; }
    .lg-desc { font-size: 0.88rem; line-height: 1.45; color: var(--pg-fg); padding-top: 0.25rem; }
    .lg-btn {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      min-width: 2rem; height: 2rem; padding: 0 0.5rem;
      background: var(--hint-bg); color: #fff;
      border: 2px solid var(--hint-border); border-radius: 50px;
      font-size: 1rem; line-height: 1;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }
    .lg-btn.scout { border-radius: 9px; border-color: var(--scout-neutral); gap: 3px; }
    .lg-btn.coach { background: #12233a; border-color: #4a90d9; color: #bfe; }
    .lg-ghost {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      min-width: 2rem; height: 2rem; font-size: 1.1rem;
      color: var(--pg-fg);
    }
    /* Mirrors the in-game multiplier pill (#cc00ff = the ×64 rung). */
    .lg-mx {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      min-width: 2.4em; height: 1.6em; padding: 0 0.4em;
      font-weight: 800; color: #cc00ff;
      border-radius: 999px;
      background: color-mix(in srgb, currentColor 22%, transparent);
    }