/* Antithesia MVP — design polish pass (2026-11-07).
   Dark, but aesthetically pretty: deep black/charcoal base, layered grey depth,
   and a soft white/grey glow — the moth drawn to the light of the reveal.
   Palette: black, white, and grey ONLY. Every colour below is neutral (R=G=B),
   including rgba() tints (white/black alpha only). No accent colours, no tints. */

:root{
  --black:#050505;
  --ink:#0a0a0a;
  --coal:#111111;
  --panel:#161616;
  --panel-hi:#1e1e1e;
  --grey-850:#222222;
  --grey-800:#262626;
  --grey-750:#2e2e2e;
  --grey-700:#3d3d3d;
  --grey-600:#5f5f5f;
  --grey-500:#8a8a8a;
  --grey-400:#a8a8a8;
  --grey-300:#c9c9c9;
  --grey-200:#dedede;
  --grey-100:#ececec;
  --white:#f5f5f5;
  --paper:#ffffff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --radius-lg:24px;
  --radius-md:18px;
  --shadow-deep:0 24px 60px rgba(0,0,0,.55);
  --glow-soft:0 0 80px rgba(255,255,255,.14);
  --glow-card:0 0 90px rgba(255,255,255,.20),0 30px 60px rgba(0,0,0,.50);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--white);color:var(--ink)}

body{
  margin:0;
  color:var(--white);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Layered depth: a soft pool of light at the top (the reveal drawing you in),
     falling away to deep black at the foot — all in neutral greys. */
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 70%),
    radial-gradient(90% 40% at 50% 115%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#101010 0%,#080808 34rem,#050505 100%);
  background-attachment:fixed;
  min-height:100vh;
}

/* Subtle grey grain over everything — texture, never colour. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  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='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-header,main,footer{position:relative;z-index:1}

/* ---------- Header: the moth in its glow ---------- */
.site-header{text-align:center;padding:3.2rem 1.25rem 1.4rem;position:relative}
.site-header::before{
  content:"";
  position:absolute;
  left:50%;top:.5rem;
  width:min(560px,92vw);height:420px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 42%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,0) 78%);
  filter:blur(6px);
  pointer-events:none;
}
.lockup{
  position:relative;
  max-width:272px;width:68vw;height:auto;
  background:var(--grey-500);
  border-radius:20px;
  box-shadow:var(--glow-soft),0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);
}
.thesis{
  position:relative;
  color:var(--grey-300);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.06rem;
  line-height:1.6;
  margin:1.4rem auto 0;
}

/* ---------- Stats: quiet glassy pills ---------- */
.stats-bar{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;position:relative}
.stat{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--grey-750);
  border-radius:16px;
  padding:.65rem 1.15rem .55rem;
  min-width:104px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.35);
}
.stat-num{display:block;font-size:1.55rem;font-weight:650;letter-spacing:.01em;color:var(--paper);line-height:1.15}
.stat-label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-400)}

/* ---------- Panels: deep, soft, rounded ---------- */
main{max-width:680px;margin:0 auto;padding:.6rem 1.1rem 1rem}
.panel{
  background:linear-gradient(180deg,var(--panel-hi) 0%,var(--panel) 55%,#121212 100%);
  border:1px solid var(--grey-800);
  border-radius:var(--radius-lg);
  padding:2rem 1.9rem;
  margin-bottom:1.4rem;
  box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .55s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hidden{display:none!important}

.round-meta{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;
  color:var(--grey-400);text-transform:uppercase;
}
.live-badge{
  color:var(--paper);
  background:rgba(255,255,255,.08);
  border:1px solid var(--grey-700);
  padding:.28rem .7rem;border-radius:999px;
  letter-spacing:.22em;
}
.demo-badge{border:1px solid var(--grey-600);color:var(--grey-300);padding:.22rem .6rem;border-radius:999px;letter-spacing:.14em}

.question{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.95rem;
  line-height:1.32;
  letter-spacing:.005em;
  margin:1.5rem 0 1.6rem;
  color:var(--paper);
  text-wrap:balance;
}
h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.3;color:var(--paper)}
.hint{color:var(--grey-400);font-size:.93rem;line-height:1.55}

/* ---------- Answers: split black / white, tactile and premium ---------- */
.answers{display:grid;gap:.9rem}
.answer-btn{
  position:relative;
  font-family:var(--sans);
  font-size:1.14rem;font-weight:600;letter-spacing:.01em;
  padding:1.2rem 1.3rem 1.2rem 3.1rem;
  border-radius:var(--radius-md);
  cursor:pointer;text-align:left;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.answer-btn::before{
  content:"";
  position:absolute;left:1.15rem;top:50%;
  width:15px;height:15px;border-radius:50%;
  transform:translateY(-50%);
  transition:box-shadow .22s ease,background .22s ease;
}
.answer-a{
  background:linear-gradient(180deg,#1c1c1c 0%,#060606 100%);
  color:var(--white);
  border:1px solid var(--grey-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 26px rgba(0,0,0,.45);
}
.answer-a::before{border:2px solid var(--grey-400)}
.answer-b{
  background:linear-gradient(180deg,#ffffff 0%,#dedede 100%);
  color:var(--ink);
  border:1px solid var(--grey-300);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 26px rgba(0,0,0,.35);
}
.answer-b::before{border:2px solid var(--grey-600)}
.answer-btn:hover{transform:translateY(-2px)}
.answer-a:hover{border-color:var(--grey-500);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 32px rgba(0,0,0,.5),0 0 34px rgba(255,255,255,.08)}
.answer-b:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 32px rgba(0,0,0,.4),0 0 34px rgba(255,255,255,.16)}
.answer-btn:active{transform:translateY(0) scale(.99)}
.answer-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.answer-btn.selected{
  border-color:var(--paper);
  box-shadow:0 0 0 2px var(--paper),0 0 38px rgba(255,255,255,.28),0 16px 32px rgba(0,0,0,.5);
}
.answer-btn.selected::before{background:currentColor;box-shadow:0 0 12px rgba(255,255,255,.35)}

/* ---------- Prediction slider: a dial of grey light ---------- */
.slider-row{display:flex;align-items:center;gap:1.1rem;margin:.6rem 0 .2rem}
input[type=range]{
  flex:1;appearance:none;-webkit-appearance:none;
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--grey-700),var(--grey-500),var(--grey-300));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  accent-color:#8a8a8a;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#ffffff 0%,#dedede 55%,#a8a8a8 100%);
  border:1px solid var(--grey-400);
  box-shadow:0 0 22px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.5);
  cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#ffffff 0%,#dedede 55%,#a8a8a8 100%);
  border:1px solid var(--grey-400);
  box-shadow:0 0 22px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.5);
  cursor:grab;
}
input[type=range]:focus-visible{outline:2px solid var(--white);outline-offset:6px}
#prediction-value{
  font-family:var(--serif);
  font-size:2.15rem;font-weight:500;color:var(--paper);
  min-width:4.6rem;text-align:right;line-height:1;
  text-shadow:0 0 24px rgba(255,255,255,.25);
}
.slider-scale{display:flex;justify-content:space-between;gap:.5rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);margin:.4rem 0 1.4rem}

/* ---------- Primary button: light you press toward ---------- */
.primary-btn{
  font-family:var(--sans);
  font-size:1rem;font-weight:650;letter-spacing:.04em;
  background:linear-gradient(180deg,#ffffff 0%,#dedede 100%);
  color:var(--ink);
  border:1px solid var(--grey-300);
  border-radius:999px;
  padding:1.05rem 1.5rem;
  cursor:pointer;width:100%;
  box-shadow:0 0 30px rgba(255,255,255,.14),0 14px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,255,255,.24),0 18px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.9)}
.primary-btn:active{transform:translateY(0) scale(.99)}
.primary-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- Share / sealed / result cards: the light in the dark ---------- */
.share-card{
  position:relative;
  background:linear-gradient(165deg,#ffffff 0%,#ececec 58%,#c9c9c9 130%);
  color:var(--ink);
  border-radius:var(--radius-lg);
  padding:2rem 1.7rem 1.7rem;
  text-align:center;
  margin:1.4rem 0;
  box-shadow:var(--glow-card),inset 0 1px 0 rgba(255,255,255,.95);
}
.sealed-card{animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 0 70px rgba(255,255,255,.16),0 30px 60px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.95)}
  50%{box-shadow:0 0 110px rgba(255,255,255,.28),0 30px 60px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.95)}
}
.card-lockup{width:168px;max-width:68%;height:auto;background:var(--grey-500);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.card-question{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.5;color:#262626}
.card-line{font-size:1.13rem;line-height:1.5}
.card-points{
  font-family:var(--serif);
  font-size:1.9rem;font-weight:600;
  margin:.6rem 0 .2rem;
}
.card-foot{color:var(--grey-700);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ---------- Split bar: the truth, sweeping into grey ---------- */
.split-bar{
  position:relative;
  display:flex;height:34px;
  border-radius:999px;overflow:hidden;
  border:1px solid var(--grey-700);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.22);
  margin:1.1rem 0;
}
.split-bar::after{
  content:"";
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);
  background:var(--grey-500);
  opacity:.7;
}
.split-a{background:linear-gradient(180deg,#262626 0%,#050505 100%);transition:width 1.15s cubic-bezier(.22,.9,.28,1)}
.split-b{background:linear-gradient(180deg,#ffffff 0%,#dedede 100%);transition:width 1.15s cubic-bezier(.22,.9,.28,1)}

/* ---------- Test mode ---------- */
.test-mode-box{
  border:1.5px dashed var(--grey-600);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius-md);
  padding:1.2rem 1.2rem 1.3rem;
  margin-top:1.4rem;
  color:var(--grey-300);
  font-size:.94rem;
}
.test-mode-box .primary-btn{margin-top:.4rem}

/* ---------- Admin queue ---------- */
.queue-list{list-style:none;padding:0;margin:.6rem 0 0}
.queue-list li{
  border:1px solid var(--grey-800);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border-radius:var(--radius-md);
  padding:1rem 1.1rem;
  margin-bottom:.7rem;
  line-height:1.5;
  transition:border-color .2s ease,background .2s ease;
}
.queue-list li:hover{border-color:var(--grey-700)}
.queue-list .q-cat{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--grey-400);text-transform:uppercase}
.queue-list .q-status{font-size:.68rem;font-weight:600;letter-spacing:.08em;border:1px solid var(--grey-600);color:var(--grey-300);border-radius:999px;padding:.14rem .55rem;margin-left:.5rem;white-space:nowrap}

/* ---------- Past results / weekly report / leaderboard (catch-up sprint) ---------- */
.back-to-live{margin-top:1rem}
.text-link{color:var(--grey-200);font-weight:600;text-decoration:none;border-bottom:1px solid var(--grey-600);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.text-link:hover{color:var(--paper);border-color:var(--paper)}
.result-item{
  border:1px solid var(--grey-800);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border-radius:var(--radius-md);
  padding:1.1rem 1.15rem;
  margin-top:.7rem;
}
.result-question{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.5;color:var(--grey-200);margin:.7rem 0 .2rem}
.report-list{list-style:none;padding:0;margin:.6rem 0}
.report-list li{
  border:1px solid var(--grey-800);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border-radius:12px;
  padding:.65rem .95rem;
  margin-bottom:.5rem;
  color:var(--grey-200);
}
.shade-row{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.shade-swatch{
  flex:none;width:52px;height:52px;border-radius:14px;
  border:1px solid var(--grey-600);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 22px rgba(0,0,0,.4);
}
.shade-row .card-line{margin:0}
.board-list{list-style:none;padding:0;margin:.8rem 0 0;counter-reset:none}
.board-list li{
  display:flex;align-items:baseline;gap:.9rem;
  border:1px solid var(--grey-800);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border-radius:12px;
  padding:.7rem 1rem;
  margin-bottom:.5rem;
}
.board-rank{font-family:var(--serif);color:var(--grey-400);min-width:2rem}
.board-name{flex:1;color:var(--grey-200)}
.board-score{color:var(--grey-400);font-size:.86rem;white-space:nowrap}
.board-list li.you-row{border-color:var(--paper);box-shadow:0 0 0 1px var(--paper),0 0 26px rgba(255,255,255,.14)}
.board-list li.you-row .board-name{color:var(--paper);font-weight:650}
.board-list li.you-row.pending{border-color:var(--grey-600);box-shadow:none;border-style:dashed}
@media(max-width:520px){
  .board-list li{flex-wrap:wrap;gap:.4rem .7rem}
  .board-score{white-space:normal}
  .shade-swatch{width:44px;height:44px}
}

footer{text-align:center;color:var(--grey-500);font-size:.86rem;line-height:1.6;padding:.6rem 1.25rem 3.4rem}

/* ---------- Small screens: iPhone first ---------- */
@media(max-width:520px){
  .site-header{padding:2.4rem 1rem 1.1rem}
  .lockup{max-width:228px}
  .thesis{font-size:1rem}
  .panel{padding:1.5rem 1.25rem;border-radius:20px}
  .question{font-size:1.58rem;margin:1.25rem 0 1.35rem}
  h2{font-size:1.32rem}
  .answer-btn{font-size:1.06rem;padding:1.08rem 1.05rem 1.08rem 2.9rem}
  .share-card{padding:1.6rem 1.15rem 1.4rem}
  .stat{min-width:96px;padding:.6rem .9rem .5rem}
  .stat-num{font-size:1.4rem}
  #prediction-value{font-size:1.85rem;min-width:4rem}
}

/* ---------- Motion sensitivity ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}