/* guess.benlei.org — tokens copied from docs/sprint-brain/design/design-language.md §5.
   These freeze July 10 noon; @fable/design-tokens becomes the source of truth at P1
   integration — swap this block for the package import then. */

:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --paper: #FFFDF7;
  --paper-pulse: #F5EEDD;
  --ink: #1C1917;
  --ink-muted: #57534E;
  --rule: #D8D2C8;
  --accent: #9A4A00;
  --ok: #166534;
  --err: #B91C1C;
  --focus: #1D4ED8;

  --font-display: "Fraunces", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-body: "IBM Plex Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --r1: 2px;
  --r2: 6px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

:root[data-theme="dark"] {
  --bg: #141210;
  --surface: #1D1A17;
  --paper: #211E1A;
  --paper-pulse: #322C24;
  --ink: #ECE7DF;
  --ink-muted: #A8A29E;
  --rule: #3A352F;
  --accent: #E8853A;
  --ok: #4CC38A;
  --err: #F87171;
  --focus: #93C5FD;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #141210;
    --surface: #1D1A17;
    --paper: #211E1A;
    --paper-pulse: #322C24;
    --ink: #ECE7DF;
    --ink-muted: #A8A29E;
    --rule: #3A352F;
    --accent: #E8853A;
    --ok: #4CC38A;
    --err: #F87171;
    --focus: #93C5FD;
  }
}

* { box-sizing: border-box; }

html { font-size: var(--text-base); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r1);
}

a { color: var(--accent); }

/* layout: guess container is 640px (design §8) */
.site-header, .game, .site-footer {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--s4);
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--s4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: var(--text-lg);
}

.header-right { display: flex; align-items: center; gap: var(--s3); }

.streak {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  color: var(--ink);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--text-base);
}

.game { flex: 1; padding-bottom: var(--s7); }

.notice {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  border: 1px dashed var(--rule);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
  background: var(--paper);
}

.prompt-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--s1);
}

.daily-prompt {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: 0 0 var(--s2);
}

.how-to { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 0; }

/* cards stack always (design §8) */
.cards { display: flex; flex-direction: column; gap: var(--s4); }

.answer-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: var(--s4);
  box-shadow: var(--shadow);
}

.card-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--s2);
  font-weight: 400;
}

/* fixture text renders as plain text; formatting tics are part of the game */
.answer-text {
  margin: 0 0 var(--s3);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  cursor: pointer;
}

.chip-selected {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper);
}

.chip:disabled { opacity: 0.55; cursor: default; }

.submit {
  margin-top: var(--s5);
  width: 100%;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: var(--r2);
  cursor: pointer;
}

.submit:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 480px) {
  .submit { position: sticky; bottom: var(--s3); box-shadow: var(--shadow); }
}

/* reveal: stamps per design §6.2 — fixed rotations, never random */
.reveal-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.stamp {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  border: 2px solid currentColor;
  border-radius: 0;
  padding: 2px 10px;
  white-space: nowrap;
  animation: stamp-in 120ms ease-out;
}

.stamp-ok { color: var(--ok); transform: rotate(-2deg); }
.stamp-err { color: var(--err); transform: rotate(1.5deg); }

@keyframes stamp-in {
  from { scale: 1.15; }
  to { scale: 1; }
}

.reveal-detail { color: var(--ink-muted); }

.result, .played { margin-top: var(--s5); }

.score-today {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 620;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.zero-note, .streak-reset-note { color: var(--ink-muted); font-size: var(--text-sm); }

.reveal-moral {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.result-actions { display: flex; align-items: center; gap: var(--s3); }

.share {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  color: var(--ink);
  cursor: pointer;
}

.toast {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ok);
}

.next-link { display: inline-block; margin-top: var(--s4); font-size: var(--text-sm); }

/* 404 receipt */
.receipt-404 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: var(--s4) var(--s5);
  overflow-x: auto;
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

@media (prefers-reduced-motion: reduce) {
  .stamp { animation: none; }
}

/* The hidden attribute must always win — author display rules otherwise defeat it. */
[hidden] { display: none !important; }