/* ---------------------------------------------------------------------------
   burbles.app — the shared sheet.

   Every page links this, and it is the ONLY place the palette is written down.
   Before it existed the accent was pasted into four files, which is how the
   site ended up on the old system blue months after the app moved off it: a
   value kept in four places disagrees eventually, and nothing goes red when
   it does.

   The tokens are the app's own, from apps/mobile/src/constants/colors.ts —
   International Orange for text, terracotta for fills, and the same greys.
   Dark is the default; light follows prefers-color-scheme.

   index.html links this for the tokens and base, then adds its own
   page-specific CSS AFTER it, so its larger display type wins on equal
   specificity. Order matters: a rule of equal weight later in the cascade
   wins, so nothing here may be written to depend on being last.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  --bg: #0A0A0C;
  --card: #151B23;
  --well: #1B222C;
  --text: #FFFFFF;
  --text2: rgba(235, 235, 245, 0.6);
  --text3: rgba(235, 235, 245, 0.52);
  --line: rgba(84, 84, 88, 0.65);
  --hair: rgba(255, 255, 255, 0.08);
  --glass: rgba(18, 20, 25, 0.72);

  --accent: #FF4F00;
  --accent-fill: #B84D28;
  --accent-tint: rgba(255, 79, 0, 0.14);
  --on-accent: #FFFFFF;

  --advantage: #30D158;
  --caution: #FFD60A;

  --common: #98A4B3;
  --uncommon: #4CC98A;
  --rare: #6EA4FF;
  --epic: #B58CF5;
  --legendary: #E9B949;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: 'Anton', "Haettenschweiler", "Arial Narrow Bold", var(--sans);

  --r-tile: 12px;
  --r-card: 18px;
  --r-panel: 22px;

  /* Kept so the document pages' own markup still resolves these names. */
  --panel: var(--card);
  --muted: var(--text2);
  --rule: var(--hair);

  /* The rank rim, as a mask so it takes currentColor. */
  --rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cg fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M512 172a340 340 0 1 1 0 680a340 340 0 1 1 0-680zm0 64a276 276 0 1 0 0 552a276 276 0 1 0 0-552z'/%3E%3Cpath d='M476 512 L548 512 L530 262 L494 262 Z'/%3E%3Cpath d='M476 512 L548 512 L530 262 L494 262 Z' transform='rotate(72 512 512)'/%3E%3Cpath d='M476 512 L548 512 L530 262 L494 262 Z' transform='rotate(144 512 512)'/%3E%3Cpath d='M476 512 L548 512 L530 262 L494 262 Z' transform='rotate(216 512 512)'/%3E%3Cpath d='M476 512 L548 512 L530 262 L494 262 Z' transform='rotate(288 512 512)'/%3E%3Cpath fill-rule='evenodd' d='M512 432a80 80 0 1 1 0 160a80 80 0 1 1 0-160zm0 52a28 28 0 1 0 0 56a28 28 0 1 0 0-56z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --card: #F2F2F7;
    --well: #EBEBF0;
    --text: #000000;
    --text2: #636366;
    --text3: #66666B;
    --line: rgba(60, 60, 67, 0.29);
    --hair: rgba(0, 0, 0, 0.08);
    --glass: rgba(250, 250, 252, 0.72);

    --accent: #C23A00;
    --accent-fill: #A6452A;
    --accent-tint: rgba(194, 58, 0, 0.08);

    --advantage: #1E7B34;
    --caution: #8A5A00;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* --- The document pages: privacy, terms, spotted -------------------------- */
/* Scoped to .doc on the body. These pages reuse bare element names — main,
   header, nav — that the landing page also uses for entirely different things
   (a sticky bar, a hero). Unscoped, `nav { margin-top: 48px; border-top }`
   landed on the landing page's sticky bar and pushed it down the page. The
   tokens and the base above stay global; everything below is these pages only. */

.doc main { max-width: 42rem; margin: 0 auto; padding: 44px 20px 80px; }

.doc header { margin-bottom: 32px; }

/* The wordmark carries the rim glyph as a background, so the pages' existing
   markup does not have to change to gain it. */
.doc .home {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.doc .home::before {
  content: ''; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: var(--rim) center / contain no-repeat;
  mask: var(--rim) center / contain no-repeat;
}
.doc .home:hover { text-decoration: none; opacity: .75; }

.doc h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.02;
  letter-spacing: -.005em; text-transform: uppercase;
  margin: 26px 0 10px;
}
.doc h2 {
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  margin: 44px 0 12px;
}
.doc h3 { font-size: 1.05rem; font-weight: 600; margin: 26px 0 8px; }

.doc p, .doc li { color: var(--text); }
.doc p { margin: 0 0 16px; }

.doc .meta { color: var(--text2); margin: 0; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.doc .muted { color: var(--text2); }
.doc .lede { font-size: clamp(1.0625rem, 2.1vw, 1.25rem); color: var(--text2); }

.doc .note {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-panel); padding: 20px 22px; margin: 28px 0;
}
.doc .note p { margin: 0 0 12px; }
.doc .note p:last-child { margin: 0; }

.doc .promise {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.05;
  letter-spacing: -.005em; color: var(--text);
}

.doc ul { padding-left: 1.2rem; margin: 0 0 16px; }
.doc li { margin: 8px 0; }

.doc .table { overflow-x: auto; margin: 16px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--hair); }
.doc th { color: var(--text2); font-weight: 600; }

.doc nav {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
}