:root {
  /* Perfect Event palette (perfectevent.se) */
  --bg: #f9f7ff;
  --purple: #4e3aa1;
  --purple-deep: #2e2170;
  --pink: #f25273;
  --pink-deep: #d93a5c;
  --mint: #89e5ca;
  --lavender: #e6e0ff;
  --apricot: #ffe8ed;
  --accent: var(--purple);
  --ai: var(--purple);
  --text: #2b1f63;
  --muted: rgba(43, 31, 99, 0.74);
  --faint: rgba(43, 31, 99, 0.55);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: #fff;
  --line: rgba(78, 58, 161, 0.18);
  --good: #12886a;
  --bad: var(--pink-deep);
  --shadow: 0 18px 50px -28px rgba(78, 58, 161, 0.45);
  --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);
  /* Stand-in for Albra Display, the site's licensed headline face */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

*, *::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; }

/* ------------------------------------------------------------------ */
/* Soft pastel background                                               */
/* ------------------------------------------------------------------ */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--lavender) 0%, #f1edff 38%, var(--bg) 75%);
}

.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 22s ease-in-out infinite alternate;
}
.blob.b1 { background: radial-gradient(circle, #d6ccff 0%, transparent 65%); top: -30vmax; left: -25vmax; }
.blob.b2 { background: radial-gradient(circle, var(--apricot) 0%, transparent 65%); bottom: -35vmax; right: -30vmax; opacity: 0.9; animation-duration: 26s; animation-delay: -6s; }
.blob.b3 { background: radial-gradient(circle, #d7f7ee 0%, transparent 65%); top: 30%; left: 40%; width: 50vmax; height: 50vmax; opacity: 0.7; animation-duration: 30s; animation-delay: -12s; }
.blob.b4 { background: radial-gradient(circle, #ffd3dd 0%, transparent 65%); top: 55%; left: -20vmax; width: 40vmax; height: 40vmax; opacity: 0.5; 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.035;
  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(230, 224, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  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.6);
  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(--purple); color: #fff; }
.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: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}

/* Headlines follow the site: heavy display serif, lowercase, tight tracking. */
.quote-heading, .center-block h1, .stats-head h1, .verdict h2 {
  font-variation-settings: 'opsz' 144;
  text-transform: lowercase;
  word-spacing: 0.1em;
  color: var(--purple);
}

.quote-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* Same scale as the quote under it; shrinks with it on the reveal. */
.quote-heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, min(6.2vw, 4.4svh), 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: font-size 0.6s ease;
}
body.revealed .quote-heading { font-size: clamp(1.1rem, min(4.6vw, 3.1svh), 1.7rem); }

.how-steps { width: min(380px, 100%); margin: clamp(14px, 3svh, 24px) auto 0; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.how-steps li { position: relative; margin: 0 0 clamp(10px, 2svh, 16px); padding-left: 44px; color: var(--text); font-size: 1.05rem; line-height: 1.4; counter-increment: step; }
.how-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 700; font-size: 0.95rem; }
.center-block .how-note { margin-top: 4px; font-size: 0.9rem; color: var(--faint); }
.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: 4px; margin-bottom: var(--space-l); border-radius: 999px; background: rgba(78, 58, 161, 0.12); overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink)); 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.16;
  letter-spacing: -0.015em;
  color: var(--purple-deep);
  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(--pink);
  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.9; }
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: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--purple);
  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(--pink); outline-offset: 3px; }
.choice[data-guess='ai']:hover { border-color: var(--purple); background: var(--lavender); }
.choice[data-guess='human']:hover { border-color: var(--pink); background: var(--apricot); }
.choice:disabled { cursor: default; opacity: 0.5; }
.choice.picked { opacity: 1; border-color: var(--pink); background: var(--apricot); }

/* 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: 1.5px solid var(--purple);
  background: rgba(255, 255, 255, 0.55);
  color: var(--purple);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: lowercase;
  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(--pink); outline-offset: 3px; }
.btn.primary {
  border-color: var(--pink);
  color: #fff;
  background: var(--pink);
  box-shadow: 0 12px 28px -14px rgba(242, 82, 115, 0.8);
}
.btn.primary:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.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: var(--pink); color: var(--pink-deep); }

/* Cards */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  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-family: var(--serif); font-variation-settings: 'opsz' 144; font-weight: 700; font-size: clamp(1.6rem, 4svh, 2.2rem); line-height: 1.05; letter-spacing: -0.03em; text-transform: lowercase; }
.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: var(--purple-deep);
  animation: pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.reveal.good .badge { background: var(--mint); }
.reveal.bad .badge { background: var(--pink); color: #fff; }
.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: var(--bg);
}
.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, #ffd3dd, var(--apricot));
}
.avatar.ai { background: linear-gradient(135deg, #cfc4ff, var(--lavender)); }
.author-name { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--purple); }
.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(--purple-deep); }

.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(--pink-deep); 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: 700;
  font-size: clamp(2.4rem, 10vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.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-weight: 700;
  font-size: clamp(3rem, 8svh, 4.2rem);
  line-height: 1;
  color: var(--pink);
}

/* 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: 700; font-size: clamp(1.8rem, 4.4svh, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; }

.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(--pink);
  box-shadow: 0 0 0 0 rgba(242, 82, 115, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(242, 82, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 82, 115, 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-weight: 700; font-size: clamp(1.6rem, 4.2svh, 2.3rem); line-height: 1.05; color: var(--purple); }
.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(--pink); font-size: clamp(2rem, 5.2svh, 2.8rem); }

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

.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.1rem; line-height: 1.35; color: var(--purple-deep); }
.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: 600;
  color: var(--purple);
  background: var(--bg);
}
.chip.ai { background: var(--lavender); }
.chip.human { background: var(--apricot); color: var(--pink-deep); }
.chip.good { color: var(--good); }
.chip.bad { color: var(--bad); }

.bar { height: 10px; border-radius: 999px; background: var(--lavender); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink)); 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(--pink); }

.error-box { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--apricot); border: 1px solid rgba(242, 82, 115, 0.45); color: #a3203e; font-size: 0.92rem; }

.spinner { width: 34px; height: 34px; margin: 40px auto; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--pink); 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; }
}

/* ------------------------------------------------------------------ */
/* Ice breaker: two options and the room's split                        */
/* ------------------------------------------------------------------ */

.question-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-m) 0 var(--space-m);
}
body.voted .question-block { flex: 0; }

.pair { display: flex; flex-direction: column; align-items: stretch; }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(96px, 15svh, 140px);
  padding: 22px 20px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--purple-deep);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.opt-text {
  position: relative;
  font-size: clamp(1.2rem, 5.4vw, 1.55rem);
  font-weight: 600;
  line-height: 1.28;
  text-wrap: balance;
}
.opt[data-choice='a']:hover:not(:disabled) { border-color: var(--purple); background: var(--lavender); }
.opt[data-choice='b']:hover:not(:disabled) { border-color: var(--pink); background: var(--apricot); }
.opt:active:not(:disabled) { transform: scale(0.98); }
.opt:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.opt:disabled { cursor: default; }

/* The bar that fills each option with its share of the votes */
.opt-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.opt[data-choice='a'] .opt-fill { background: linear-gradient(90deg, #d9d0ff, var(--lavender)); }
.opt[data-choice='b'] .opt-fill { background: linear-gradient(90deg, #ffc9d5, var(--apricot)); }

.opt-pct {
  position: relative;
  flex: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1;
  color: var(--purple);
}
.opt-pct:empty { display: none; }
.opt[data-choice='b'] .opt-pct { color: var(--pink-deep); }

.opt-chip {
  position: absolute;
  top: 8px;
  left: 12px;
  display: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.opt[data-choice='b'] .opt-chip { background: var(--pink); }

body.voted .opt { justify-content: space-between; text-align: left; min-height: 0; padding: 30px 18px 18px; }
body.voted .opt-text { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }
body.voted .opt:not(.picked) { opacity: 0.72; }
body.voted .opt.picked { border-color: var(--purple); }
body.voted .opt.picked[data-choice='b'] { border-color: var(--pink); }
body.voted .opt.picked .opt-chip { display: block; }

/* Pink "eller" badge that overlaps both options */
.pair .or {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: -14px 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  box-shadow: 0 10px 24px -12px rgba(242, 82, 115, 0.8);
}

.pair.enter .opt[data-choice='a'] { animation: inLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pair.enter .opt[data-choice='b'] { animation: inRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both; }
.pair.enter .or { animation: pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.25s both; }
@keyframes inLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes inRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.question-block .prompt { margin: var(--space-l) 0 0; }

.verdict-title {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144;
  font-weight: 700;
  font-size: clamp(1.6rem, 4svh, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--purple);
}
.reveal .crowd { margin-top: var(--space-s); }
.ice { margin: var(--space-m) 0 0; color: var(--purple-deep); font-weight: 600; }
.ice::before { content: '💬 '; }

/* Stats: one question with its A/B split */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.split-side { display: flex; flex-direction: column; gap: 4px; }
.split-side.b { text-align: right; align-items: flex-end; }
.split-pct { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--purple); }
.split-side.b .split-pct { color: var(--pink-deep); }
.split-text { font-size: 0.95rem; line-height: 1.3; color: var(--text); }
.split-side .chip { align-self: flex-start; background: var(--purple); color: #fff; }
.split-side.b .chip { align-self: flex-end; background: var(--pink); }
.split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--lavender); }
.split-bar span { display: block; height: 100%; transition: width 0.8s ease; }
.split-bar .a { background: var(--purple); }
.split-bar .b { background: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  .pair.enter .opt, .pair.enter .or { animation: none; }
}