:root {
  --bg: #03130d;
  --green: #29ba74;
  --green-deep: #0c4a33;
  --teal: #19b3a3;
  --accent: #8eedb4;
  --ai: #4fc3e8;
  --text: #f3faf6;
  --muted: rgba(243, 250, 246, 0.72);
  --faint: rgba(243, 250, 246, 0.5);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.16);
  --good: #3ee08f;
  --bad: #ff6b7d;
  --radius: 22px;
  /* Vertical rhythm scales with screen height so content fits without scrolling. */
  --space-l: clamp(12px, 2.6svh, 22px);
  --space-m: clamp(8px, 1.8svh, 16px);
  --space-s: clamp(4px, 1.1svh, 10px);
  --btn-h: clamp(44px, 6svh, 52px);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Animated party background                                            */
/* ------------------------------------------------------------------ */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #0d3b2a 0%, transparent 60%),
    linear-gradient(160deg, #052419 0%, #03130d 55%, #021b1d 100%);
}

.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}
.blob.b1 { background: radial-gradient(circle, var(--green) 0%, transparent 65%); top: -30vmax; left: -25vmax; }
.blob.b2 { background: radial-gradient(circle, var(--teal) 0%, transparent 65%); bottom: -35vmax; right: -30vmax; animation-duration: 26s; animation-delay: -6s; }
.blob.b3 { background: radial-gradient(circle, #197a56 0%, transparent 65%); top: 30%; left: 40%; width: 50vmax; height: 50vmax; opacity: 0.5; animation-duration: 30s; animation-delay: -12s; }
.blob.b4 { background: radial-gradient(circle, var(--accent) 0%, transparent 65%); top: 55%; left: -20vmax; width: 40vmax; height: 40vmax; opacity: 0.16; animation-duration: 24s; animation-delay: -3s; }

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.12); }
  100% { transform: translate(-6vmax, 10vmax) scale(0.95); }
}

/* Fine grain so the gradients do not band on cheap screens */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Logo intro: pops in centered, then settles in the top-left corner    */
/* ------------------------------------------------------------------ */

.logo-wrap {
  position: fixed;
  z-index: 10;
  top: 18px;
  left: 20px;
  transform: translate(0, 0);
  transition: top 0.9s cubic-bezier(0.7, 0, 0.2, 1), left 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.logo-wrap img {
  display: block;
  height: 34px;
  width: auto;
  transition: height 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.logo-wrap.intro { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.logo-wrap.intro img { height: 92px; animation: pop 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

@keyframes pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-8deg); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Top bar: logo (left) and language switch (right) over a blurred backdrop */

.topbar {
  position: fixed;
  z-index: 9;
  inset: 0 0 auto 0;
  height: 70px;
  background: rgba(3, 19, 13, 0.9);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lang-switch {
  position: fixed;
  z-index: 10;
  top: 19px;
  right: 20px;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lang-switch button {
  min-width: 40px;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lang-switch button[aria-pressed='true'] { background: var(--accent); color: #04140e; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body.ready .topbar, body.ready .lang-switch { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Guest page layout                                                    */
/* ------------------------------------------------------------------ */

.stage {
  width: min(720px, 100%);
  margin: 0 auto;
  min-height: 100svh;
  padding: 84px 20px var(--space-l);
  display: flex;
  flex-direction: column;
}

.view { display: flex; flex-direction: column; flex: 1; }

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.quote-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.quote-top .eyebrow { margin: 0; }
.counter { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.counter strong { color: var(--text); font-weight: 700; }
.progress { height: 3px; margin-bottom: var(--space-l); border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.revealed .progress { margin-bottom: var(--space-m); }
.center-block .progress-note { margin-top: 18px; font-size: 0.9rem; color: var(--faint); }

.fade-in { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Quote */

.quote-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-m) 0 var(--space-l);
  transition: flex 0.6s ease;
}

.quote {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: var(--quote-size, clamp(1.9rem, 7.5vw, 3.1rem));
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: font-size 0.6s ease;
}
.quote.medium { --quote-size: clamp(1.6rem, 6.2vw, 2.6rem); }
.quote.long { --quote-size: clamp(1.35rem, 5.2vw, 2.15rem); }

.quote::before {
  content: '\201C';
  display: block;
  height: 0.62em;
  margin-bottom: 0.08em;
  font-size: 2.6em;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
  animation: fadeUp 0.6s ease 0.1s forwards;
}

.quote .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  animation: word 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes word {
  to { opacity: 1; transform: none; filter: blur(0); }
}

body.revealed .quote-block { flex: 0; padding-top: var(--space-s); padding-bottom: var(--space-m); }
body.revealed .quote { --quote-size: clamp(1.1rem, min(4.6vw, 3.1svh), 1.7rem); opacity: 0.92; }
body.revealed .quote::before { font-size: 2em; }

/* Choice buttons */

.choices { padding-bottom: 8px; }

.prompt {
  margin: 0 0 14px;
  text-align: center;
  color: var(--muted);
  font-weight: 500;
}

.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(14px, 2.6svh, 22px) 12px clamp(12px, 2.1svh, 18px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.choice .icon { font-size: 2.3rem; line-height: 1; }
.choice .label { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }
.choice:hover { background: var(--glass-strong); }
.choice:active { transform: scale(0.97); }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.choice[data-guess='ai']:hover { border-color: var(--ai); box-shadow: 0 0 40px -10px var(--ai); }
.choice[data-guess='human']:hover { border-color: var(--green); box-shadow: 0 0 40px -10px var(--green); }
.choice:disabled { cursor: default; opacity: 0.55; }
.choice.picked { opacity: 1; border-color: var(--accent); background: rgba(142, 237, 180, 0.14); }

/* Generic buttons */

.actions { display: grid; gap: var(--space-s); margin-top: var(--space-l); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn:hover { background: var(--glass-strong); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn.primary {
  border: 0;
  color: #04140e;
  background: linear-gradient(135deg, #c9f7dc, var(--accent) 50%, var(--green) 130%);
  box-shadow: 0 10px 30px -12px rgba(142, 237, 180, 0.55);
}
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 0.9rem; }
.btn.danger { border-color: rgba(255, 107, 125, 0.5); color: var(--bad); }

/* Cards */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 30, 21, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: clamp(14px, 2.6svh, 22px);
}

/* Reveal */

.reveal { margin-top: 4px; scroll-margin-top: 80px; }
/* Side by side even on phones: saves a full button height on the reveal. */
.reveal .actions.two { grid-template-columns: 1fr 1fr; }
.reveal .actions.two .btn { padding: 8px 10px; font-size: 0.92rem; line-height: 1.2; text-align: center; }

.verdict { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.verdict h2 { margin: 0; font-size: clamp(1.5rem, 3.8svh, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.verdict .badge {
  display: grid;
  place-items: center;
  width: clamp(34px, 5.2svh, 44px);
  height: clamp(34px, 5.2svh, 44px);
  border-radius: 50%;
  font-size: clamp(1.1rem, 2.6svh, 1.4rem);
  font-weight: 800;
  color: #04140e;
  animation: pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.reveal.good .badge { background: var(--good); }
.reveal.bad .badge { background: var(--bad); }
.reveal.good h2 { color: var(--good); }
.reveal.bad h2 { color: var(--bad); }

.answer-line { margin: 4px 0 var(--space-m); color: var(--muted); }
.answer-line strong { color: var(--text); }

.author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(10px, 1.7svh, 14px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(40px, 6.2svh, 52px);
  height: clamp(40px, 6.2svh, 52px);
  border-radius: 50%;
  font-size: clamp(1.25rem, 3svh, 1.6rem);
  background: linear-gradient(135deg, var(--green), var(--teal));
}
.avatar.ai { background: linear-gradient(135deg, #2a8fc4, var(--ai)); }
.author-name { margin: 0; font-weight: 700; font-size: 1.1rem; }
.author-title { margin: 0; color: var(--muted); font-size: 0.92rem; }
.context { margin: var(--space-m) 0 0; color: var(--muted); font-size: 0.98rem; }
.context em { color: var(--text); }

.crowd {
  margin: var(--space-m) 0 0;
  padding: clamp(8px, 1.4svh, 12px) 14px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}
.crowd strong { color: var(--accent); font-size: 1.05rem; }

/* Home / welcome back */

.center-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.center-block h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.center-block p { margin: 0 auto; max-width: 30ch; color: var(--muted); font-size: 1.05rem; }
.center-block .actions { width: min(380px, 100%); margin: clamp(16px, 3.3svh, 28px) auto 0; }

.score-big {
  margin: var(--space-m) 0 6px;
  font-family: var(--serif);
  font-size: clamp(3rem, 8svh, 4.2rem);
  line-height: 1;
  color: var(--accent);
}

/* Stats */

.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-m); }
.stats-head h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.8svh, 2rem); letter-spacing: -0.01em; }

.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.live-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(62, 224, 143, 0.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(62, 224, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 224, 143, 0); }
}

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.tile { padding: clamp(10px, 1.9svh, 16px); }
.tile .num { font-family: var(--serif); font-size: clamp(1.6rem, 4.2svh, 2.3rem); line-height: 1.05; }
.tile .lbl { margin-top: 4px; color: var(--muted); font-size: 0.88rem; line-height: 1.3; }
.tile.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.tile.wide .num { color: var(--accent); font-size: clamp(2rem, 5.2svh, 2.8rem); }

.section-title { margin: var(--space-l) 0 var(--space-s); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }

.qlist { display: grid; gap: var(--space-s); }
.qitem { padding: clamp(10px, 1.9svh, 16px); }
.qitem .qtext { margin: 0 0 10px; font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; }
.qitem .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 0.85rem; color: var(--muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.08);
}
.chip.ai { background: rgba(79, 195, 232, 0.22); }
.chip.human { background: rgba(41, 186, 116, 0.25); }
.chip.good { color: var(--good); }
.chip.bad { color: var(--bad); }

.bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--accent)); transition: width 0.8s ease; }
.bar-label { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }

.note { margin: var(--space-m) 0 0; color: var(--faint); font-size: 0.9rem; text-align: center; }

.footer-note { margin-top: auto; padding-top: var(--space-l); text-align: center; font-size: 0.75rem; color: var(--faint); }
.footer-note p { margin: 0 0 4px; }
.footer-note a { color: var(--muted); font-weight: 600; text-decoration: none; }
.footer-note a:hover { color: var(--accent); }

.error-box { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 107, 125, 0.12); border: 1px solid rgba(255, 107, 125, 0.4); color: #ffd0d6; font-size: 0.92rem; }

.spinner { width: 34px; height: 34px; margin: 40px auto; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; width: 100%; height: 100%; }

@media (min-width: 640px) {
  .stage { padding-top: 110px; }
  .logo-wrap { top: 28px; left: 32px; }
  .topbar { height: 96px; }
  .lang-switch { top: 31px; right: 32px; }
  .logo-wrap img { height: 40px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile.wide { grid-column: 1 / -1; }
  .actions.two { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) and (max-height: 760px) {
  .stage { padding-top: 84px; }
  .logo-wrap { top: 18px; left: 24px; }
  .logo-wrap img { height: 34px; }
  .topbar { height: 70px; }
  .lang-switch { top: 19px; right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .blob { animation: none; }
}