/* Just Let's Play — the how-to-play page, once.
 *
 * Wobble, Tipsy and Friction carried this byte for byte and Slippy carried it with a few
 * additions. Throttle Track carried none of it: its page borrowed /lobby.css and
 * /watch-chrome.css, neither of which is for an article, and came out as plain paragraphs on
 * a plain ground while the other four are cards on a dotted dusk field with tabs, pills and
 * an FAQ. Same site, two different-looking pages, and nobody would guess they were siblings.
 *
 * A game's page supplies its own logo, its own words, and nothing else.
 */
:root {
    --ink: #221E3A;
    --dusk: #2E2A5E;
    --dusk-deep: #262250;
    --cream: #FDF6E3;
    --cherry: #FF4E6A;
    --mint: #23C8A0;
    --taxi: #FFB800;
    --grape: #9B5CF6;
    --blue: #4EA5FF;
    --display: 'Baloo 2', ui-rounded, "Arial Rounded MT Bold", sans-serif;
    --body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--dusk-deep);
    background-image: radial-gradient(rgba(253, 246, 227, 0.06) 1.6px, transparent 1.6px);
    background-size: 36px 36px;
    color: var(--cream);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    padding: 40px 20px 80px;
  }
  .wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
  .logo { width: min(420px, 80%); margin: 0 auto; display: block; }
  .card {
    position: relative;
    background: var(--cream);
    color: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 18px;
    box-shadow: 6px 6px 0 rgba(0,0,0,.35);
    padding: 30px 28px 24px;
  }
  .tab {
    position: absolute;
    top: -16px;
    left: 20px;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 12px;
    padding: 3px 13px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    transform: rotate(-1.5deg);
    box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  }
  .card:nth-of-type(even) .tab { transform: rotate(1.2deg); }
  h1 { font-family: var(--display); text-align: center; font-size: 26px; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
  h2 { font-family: var(--display); font-size: 21px; margin-bottom: 10px; }
  h3 { font-family: var(--display); font-size: 16px; margin: 18px 0 6px; }
  p { margin-bottom: 12px; max-width: 62ch; }
  ol, ul { margin: 0 0 12px 22px; }
  li { margin-bottom: 8px; max-width: 58ch; }
  li::marker { color: var(--grape); font-weight: 700; }
  .pill {
    display: inline-block;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 2px 10px;
    margin-right: 6px;
  }
  .pill.coop { background: var(--mint); }
  .pill.versus { background: var(--taxi); }
  .cta {
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    background: var(--mint);
    border: 4px solid var(--ink);
    border-radius: 999px;
    padding: 12px 36px;
    box-shadow: 5px 5px 0 rgba(0,0,0,.35);
    text-decoration: none;
  }
  .cta { transition: filter 160ms ease, box-shadow 160ms ease, background-color 160ms ease, opacity 160ms ease, color 160ms ease; }
  .cta:hover { filter: brightness(1.07); box-shadow: 7px 7px 0 rgba(0,0,0,.45); }
  .cta:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
  .faq dt { font-family: var(--display); font-weight: 700; margin-top: 14px; }
  .faq dd { margin: 4px 0 0 0; max-width: 60ch; }
  footer { text-align: center; font-size: 13px; opacity: 0.6; }
  a { color: var(--taxi); }
  .card a { color: var(--grape); }