:root {
  --bg: #0d0d1a;
  --surface: #151528;
  --surface2: #1c1c35;
  --surface3: #232348;
  --border: #2a2a4a;
  --border-strong: #3a3a6a;
  --text: #e8e8f0;
  --text-dim: #a8a8c8;
  --text-muted: #6e6e8e;
  --accent: #ff6b35;
  --accent-dark: #e25118;
  --accent2: #ffd166;
  --red: #ff4757;
  --green: #2ed573;
  --blue: #5352ed;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(255, 107, 53, 0.08);
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 107, 53, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(83, 82, 237, 0.06) 0%, transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* === Top bar === */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 13, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
}
.brand-name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.5px;
}
.topbar-nav { display: flex; gap: 18px; font-size: 14px; color: var(--text-dim); }
.topbar-nav a:hover { color: var(--accent); text-decoration: none; }

/* === Stage === */
.stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.hero {
  text-align: center;
  margin-bottom: 22px;
}
.hero-kicker {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero-sub {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 15px;
}

/* === Game === */
.game { display: flex; flex-direction: column; align-items: stretch; }

.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}
.score {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text-dim);
}
.score-num {
  color: var(--accent);
  font-size: 28px;
}
.ghost-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Card */
.card-stack {
  position: relative;
  min-height: 460px;
  display: grid;
}
.card {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  outline: none;
  position: relative;
  overflow: hidden;
}
.card:focus-visible { border-color: var(--accent); }
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.card-face { display: flex; flex-direction: column; gap: 18px; }
.card-face[hidden] { display: none; }

.card-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.card-quote::before { content: '“'; color: var(--accent); margin-right: 2px; }
.card-quote::after { content: '”'; color: var(--accent); margin-left: 2px; }

.card-prompt {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border: 2px solid var(--border-strong);
  background: var(--surface3);
  color: var(--text);
  border-radius: 14px;
  font-weight: 700;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}
.vote-btn:active { transform: scale(0.97); }
.vote-no:hover { border-color: var(--red); background: rgba(255, 71, 87, 0.08); }
.vote-yes:hover { border-color: var(--green); background: rgba(46, 213, 115, 0.08); }
.vote-label { font-family: var(--serif); font-size: 26px; line-height: 1; }
.vote-sub { font-size: 11px; color: var(--text-dim); font-weight: 500; }

/* Reveal */
.card-back { gap: 16px; }
.reveal-verdict {
  font-family: var(--serif);
  font-size: clamp(24px, 5.5vw, 30px);
  line-height: 1.2;
}
.reveal-verdict.right { color: var(--green); }
.reveal-verdict.wrong { color: var(--red); }
.reveal-aggregate {
  font-size: 15px;
  color: var(--text-dim);
}
.reveal-aggregate strong { color: var(--text); }
.reveal-gravity {
  background: rgba(255, 209, 102, 0.06);
  border-left: 3px solid var(--accent2);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.reveal-source { font-size: 12px; color: var(--text-muted); }
.reveal-source a { color: var(--text-dim); text-decoration: underline; }
.next-btn {
  margin-top: 4px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background 0.15s ease;
}
.next-btn:hover { background: var(--accent-dark); }

/* Finished */
.card-finished {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.card-finished h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 32px);
  margin-bottom: 12px;
}
.finished-score {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--text-dim);
}
.finished-score strong { color: var(--accent); }
.finished-stat {
  background: rgba(255, 209, 102, 0.06);
  border-left: 3px solid var(--accent2);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--text-dim);
  margin: 16px 0 24px;
  text-align: left;
}
.finished-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.primary-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.primary-btn:hover { background: var(--accent-dark); text-decoration: none; }
.primary-btn-outline {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}
.primary-btn-outline:hover { background: rgba(255, 107, 53, 0.08); }

/* Report CTA */
.report-cta {
  display: block;
  text-align: center;
  margin: 18px 0 4px;
  padding: 14px 18px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.report-cta:hover { background: rgba(255, 107, 53, 0.08); text-decoration: none; }

/* === Below the fold === */
.below-fold { margin-top: 56px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 4.5vw, 28px);
  margin-bottom: 10px;
  margin-top: 32px;
}
.section-lede {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.gravity-list {
  list-style: none;
  display: grid;
  gap: 12px;
}
.gravity-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.gravity-list strong {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 18px;
  margin-right: 4px;
}
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* === Footer === */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.site-footer a { color: var(--text-dim); }
.site-footer .muted { font-size: 12px; margin-top: 8px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* === Long-form pages (about, report) === */
.longform {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.longform h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 38px);
  margin-bottom: 18px;
  line-height: 1.15;
}
.longform h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 4.5vw, 28px);
  margin-top: 32px;
  margin-bottom: 10px;
}
.longform p, .longform li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dim);
}
.longform p { margin-bottom: 12px; }
.longform ul { margin-bottom: 12px; padding-left: 22px; }
.longform a { color: var(--accent); text-decoration: underline; }
.longform .lead {
  font-size: 17px;
  color: var(--text);
}
.coming-soon {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
}

/* Animation */
@keyframes flipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-back:not([hidden]),
.card-front:not([hidden]) {
  animation: flipIn 0.3s ease-out;
}

/* Mobile tweaks — single-screen fit per Matt 2026-05-10:
   the card + See-the-Report button must both be above the fold without
   scrolling. Compresses the topbar, drops the hero (the card itself
   carries the prompt), shortens the score row, and pins the report CTA. */
@media (max-width: 480px) {
  .topbar { padding: 8px 14px; }
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .brand-mark { width: 28px; height: 28px; font-size: 18px; }
  .brand-name { font-size: 18px; }
  .topbar-nav { gap: 14px; font-size: 13px; }

  .stage { padding: 12px 14px 24px; }

  /* Hide the hero on mobile -- the card already says "Did this objection
     succeed?" so the duplicate kicker just steals vertical space. */
  .hero { display: none; }

  .score-row { margin-bottom: 8px; padding: 0 2px; }
  .score { font-size: 16px; }
  .score-num { font-size: 22px; }
  .ghost-btn { padding: 6px 12px; font-size: 12px; }

  /* Card -- tighter padding, smaller gaps, smaller quote on small phones */
  .card-stack { min-height: 360px; }
  .card { padding: 18px 16px; border-radius: 16px; }
  .card-face { gap: 14px; }
  .card-meta { font-size: 11px; }
  .card-quote { font-size: 19px; line-height: 1.3; }
  .card-prompt { font-size: 13px; }
  .vote-btn { padding: 12px 8px; }
  .vote-label { font-size: 22px; }
  .vote-sub { font-size: 10px; }

  /* See the Report — make it visually the natural endpoint of the screen,
     full-width, accent-coloured outlined button just below the card. */
  .report-cta {
    margin-top: 14px;
    padding: 14px;
    text-align: center;
    font-size: 15px;
  }
}

/* Small-phones tighter still (iPhone SE etc.) */
@media (max-width: 380px) {
  .card-quote { font-size: 17px; }
  .card-stack { min-height: 320px; }
  .card { padding: 16px 14px; }
}