/* ════════════════════════════════════════════════════════════════════════
   PLASTA — support & legal site stylesheet
   The ONE stylesheet for every page on the public support site.

   Palette is lifted from the game's own identity (see the app icon and
   cardroom.tokens.css in the repo root): dark green felt, gold, burgundy,
   cream. Nothing here is decorative for its own sake — these pages exist to
   be read, including by an App Review engineer in a hurry.

   HARD CONSTRAINTS (deliberate, do not "improve" them away):
   - No @import, no third-party font service, no webfont. System stack only,
     so the page renders with zero external requests and zero IP disclosure
     to a third party. (The GAME loads Google Fonts; this site must not.)
   - No JavaScript is required for any content on any page.
   - Every interactive element keeps a visible :focus-visible ring.
   - Body text ≥ 17px on phones, line-height 1.65, max line length ~68ch.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  /* surfaces — dark green felt */
  --bg:        #0E120F;
  --bg-panel:  #151B15;
  --bg-inset:  #1B221B;
  --line:      #2A3327;
  --line-soft: #222A20;

  /* ink */
  --text:      #ECE7DB;  /* cream        — 15.9:1 on --bg */
  --text-dim:  #B3AA8E;  /* muted cream  —  8.4:1 on --bg */
  --gold:      #E8C877;  /* headings     — 11.5:1 on --bg */
  --gold-deep: #B08D4C;
  --link:      #8FD3A0;  /* mint green   — 10.7:1 on --bg */
  --burgundy:  #7A1F1B;  /* accent rules only — never text on --bg */
  --burgundy-lit: #B23A36;

  --radius: 12px;
  --maxw: 44rem;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  /* viewport-fit=cover + safe-area padding keeps text clear of the notch and
     the home indicator when this page is opened inside the app's web view. */
  padding:
    0
    calc(20px + env(safe-area-inset-right))
    calc(40px + env(safe-area-inset-bottom))
    calc(20px + env(safe-area-inset-left));
}

.wrap{ max-width: var(--maxw); margin: 0 auto; }

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip{
  position: absolute; left: -9999px;
  background: var(--gold); color: #14180F;
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
  font-weight: 700; text-decoration: none; z-index: 10;
}
.skip:focus{ left: 0; top: 0; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
.masthead{
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  text-align: center;
}
.masthead img.wordmark{
  width: 220px; max-width: 62vw; height: auto;
  display: block; margin: 0 auto 14px;
}
.masthead .kicker{
  margin: 0;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700;
}

/* Compact masthead used on the legal pages */
.masthead.compact{ padding: 26px 0 18px; text-align: left; display: flex; align-items: center; gap: 14px; }
.masthead.compact img.appicon{ width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto; }
.masthead.compact .kicker{ margin: 0; }
.masthead.compact a{ text-decoration: none; }

/* ── Typography ────────────────────────────────────────────────────────── */
h1{
  font-size: 2rem; line-height: 1.2; font-weight: 800;
  letter-spacing: -.01em; color: var(--text);
  margin: 0 0 10px;
}
h2{
  font-size: 1.22rem; line-height: 1.3; font-weight: 700;
  color: var(--gold);
  margin: 40px 0 10px;
  padding-top: 4px;
}
h3{
  font-size: 1.02rem; font-weight: 700; color: var(--text);
  margin: 24px 0 6px;
}
p, li{ margin: 0 0 14px; }
ul, ol{ padding-left: 22px; margin: 0 0 16px; }
li{ margin-bottom: 8px; }
li > ul, li > ol{ margin-top: 8px; }
strong, b{ color: #F7F2E4; font-weight: 700; }
small{ font-size: .88rem; }

.lede{ font-size: 1.08rem; color: var(--text); margin-bottom: 22px; }
.meta{ color: var(--text-dim); font-size: .9rem; margin: 0 0 26px; }

hr{ border: 0; border-top: 1px solid var(--line-soft); margin: 34px 0; }

/* ── Links ─────────────────────────────────────────────────────────────── */
a{ color: var(--link); text-underline-offset: 3px; }
a:hover{ color: #B6E8C2; }
a:focus-visible,
button:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Panels ────────────────────────────────────────────────────────────── */
.panel{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 22px 0;
}
.panel > :last-child{ margin-bottom: 0; }
.panel h2, .panel h3{ margin-top: 0; }

/* Burgundy left-rule for the "important / read this" panels. */
.panel.accent{ border-left: 4px solid var(--burgundy-lit); }

/* ── The contact block on the support page ─────────────────────────────── */
.contact{
  background: linear-gradient(170deg, #17201A, #121711);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin: 26px 0 30px;
  text-align: center;
}
.contact p{ margin-bottom: 16px; }
.email-btn{
  display: inline-block;
  background: var(--gold);
  color: #14180F;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  /* 44px min touch target per Apple's HIG */
  min-height: 44px;
  line-height: 1.2;
}
.email-btn:hover{ background: #F2D68C; color: #14180F; }
.email-addr{
  display: block;
  margin-top: 14px;
  font-size: 1.02rem;
  word-break: break-word;
}

/* ── Card grid of legal links ──────────────────────────────────────────── */
.cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 22px 0 8px;
  padding: 0;
  list-style: none;
}
@media (min-width: 34rem){ .cards{ grid-template-columns: 1fr 1fr; } }
.cards li{ margin: 0; }
.cards a{
  display: block;
  height: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
}
.cards a:hover{ border-color: var(--gold-deep); background: var(--bg-inset); }
.cards .t{ display: block; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.cards .d{ display: block; font-size: .9rem; color: var(--text-dim); line-height: 1.5; }

/* ── In-app navigation path chips (e.g. Settings › Account › Delete) ───── */
.path{
  display: inline-block;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  color: var(--gold);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .92em;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Definition-style Q&A used for the help topics ─────────────────────── */
.topic{
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  margin-top: 18px;
}
.topic:first-of-type{ border-top: 0; padding-top: 0; margin-top: 0; }
.topic h3{ margin-top: 0; }
.topic > :last-child{ margin-bottom: 0; }

/* ── Tables (data-collection summary) ──────────────────────────────────── */
.table-scroll{ overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }
table{ border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .94rem; }
caption{ text-align: left; color: var(--text-dim); font-size: .88rem; padding-bottom: 8px; }
th, td{
  text-align: left; vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
th{ color: var(--gold); font-weight: 700; }
thead th{ border-bottom: 1px solid var(--line); }

/* ── Table of contents on the long legal pages ─────────────────────────── */
.toc{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0 30px;
}
.toc h2{ margin: 0 0 10px; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.toc ol{ margin: 0; padding-left: 20px; }
.toc li{ margin-bottom: 5px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer{
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: .9rem;
}
footer nav ul{
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
footer nav li{ margin: 0; }
footer p{ margin: 0 0 8px; }

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print{
  :root{ --bg:#fff; --bg-panel:#fff; --bg-inset:#fff; --text:#111; --text-dim:#444;
         --gold:#6b5316; --gold-deep:#6b5316; --link:#0b4a1f; --line:#bbb; --line-soft:#ddd; }
  body{ font-size: 11pt; }
  .skip, .email-btn{ display: none; }
  a{ text-decoration: underline; }
  .panel, .toc, .contact, .cards a{ border: 1px solid #bbb; }
}

/* ── Motion ────────────────────────────────────────────────────────────── */
/* There are no animations on this site by design. This is a guard for the
   scroll-to-anchor behaviour only. */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }