/*
   * The game's own palette, from src/theme/tokens.ts.
   *
   * This is the one page a stranger sees before they install anything — a
   * store link, a settings tap, a search result — and a bare white document
   * says the app was assembled by somebody else. It is also the page that has
   * to be *believed*, so it is styled to look like the game and written to
   * read like a person: no scroll-jacking, no animation, nothing that gets in
   * the way of reading a policy on a bad connection.
   *
   * Dark only, deliberately. The game has one look and this is it; a light
   * variant would be a second design to keep true.
   */
  :root {
    --ink: #14110E; --ink2: #1B1713; --wood: #241E19;
    --edge: #3D342A; --edge-soft: #2C251E;
    --bone: #F3ECE0; --muted: #A2957F; --dim: #6E6454;
    --brass: #E6AC3E; --brass-deep: #B07E23; --porc: #6FA9C4;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background:
      radial-gradient(1100px 620px at 12% -8%, #221C16 0%, transparent 62%),
      var(--ink);
    color: var(--muted);
    font: 400 17px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

  /* The mark, drawn in CSS from the same numbers as Mark.tsx: a 2x2 of tiles
     with a 7.5% gap, one of them brass. No image to load and nothing to drift. */
  .mark { display: flex; gap: 5px; margin-bottom: 1.4rem; }
  .mark i {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--wood); border: 1px solid var(--edge);
    display: grid; place-items: center;
    font-style: normal; font-weight: 700; font-size: 13px; color: var(--dim);
  }
  .mark i.on {
    background: linear-gradient(150deg, #F5C468, var(--brass) 52%, var(--brass-deep));
    border-color: var(--brass-deep); color: #261904;
  }

  .kicker {
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--brass); margin: 0 0 .5rem;
  }
  h1 {
    font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.12;
    color: var(--bone); margin: 0 0 .6rem; letter-spacing: -.01em;
  }
  .sub { color: var(--dim); margin: 0 0 2.2rem; font-size: .95rem; }
  .lede { color: var(--bone); font-size: 1.08rem; }

  h2 {
    font-size: 1.15rem; color: var(--bone); margin: 2.8rem 0 .9rem;
    padding-top: 1.6rem; border-top: 1px solid var(--edge-soft);
    letter-spacing: -.005em;
  }
  p { margin: 0 0 1rem; }
  a { color: var(--brass); text-decoration-color: rgba(230,172,62,.4); text-underline-offset: 3px; }
  a:hover { text-decoration-color: var(--brass); }
  strong { color: var(--bone); font-weight: 600; }

  /* Wide content scrolls inside itself; the page never scrolls sideways. */
  .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; min-width: 30rem; }
  th, td {
    text-align: left; padding: .85rem .9rem; vertical-align: top;
    border-bottom: 1px solid var(--edge-soft);
  }
  th {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
    color: var(--dim); font-weight: 600;
  }
  td:first-child { color: var(--bone); width: 34%; }
  tr:last-child td { border-bottom: 0; }

  ul { margin: 0 0 1rem; padding-left: 0; list-style: none; }
  li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
  li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 2px; background: var(--porc);
  }

  .card {
    background: var(--wood); border: 1px solid var(--edge-soft);
    border-radius: 14px; padding: 1.3rem 1.4rem; margin: 1.4rem 0;
  }
  .card p:last-child { margin-bottom: 0; }

  footer {
    margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--edge-soft);
    color: var(--dim); font-size: .88rem;
  }
  @media (max-width: 480px) { .wrap { padding-top: 2rem; } body { font-size: 16px; } }

  nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 2.4rem; }
  nav a { font-size: .9rem; text-decoration: none; color: var(--dim); }
  nav a:hover { color: var(--brass); }
  nav a.on { color: var(--bone); }