@font-face{font-family:"Hanken";src:url(/f/hanken.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/f/newsreader.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --bg:#f9f9f6; --surface:#f9f9f6; --white:#ffffff;
  --sc-low:#f4f4f1; --sc:#eeeeeb; --sc-high:#e8e8e5;
  --on:#1a1c1b; --on-var:#494456;
  --outline:#7b7488; --outline-var:#cbc3d9;
  --primary:#6108e6; --primary-c:#7a3bff; --on-primary:#ffffff; --primary-fixed:#e9ddff;
  --secondary:#006c50; --secondary-c:#00fabe;
  --tertiary:#445a00; --lime:#c2f439; --lime-dim:#a7d712;
  --error:#ba1a1a; --error-c:#ffdad6;
  --sans:"Hanken","Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --r-sm:2px; --r-lg:4px; --r-xl:8px; --r-full:12px;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--on);font-family:var(--serif);font-size:16px;line-height:1.6;
  background:var(--bg);min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.sheet{display:flex;flex-direction:column;min-height:100vh}
main.wrap{flex:1 0 auto;width:100%;max-width:640px;margin:0 auto;padding:28px 20px 120px}
@media(min-width:768px){ main.wrap{padding:44px 24px 72px} }

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

/* ── Top app bar ── */
header.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--outline-var)}
@media(min-width:768px){ header.appbar{padding:0 40px;gap:24px} }
.appbar .brand{font-family:var(--sans);font-weight:800;font-size:clamp(22px,5vw,26px);letter-spacing:-.02em;color:var(--on);margin:0}
.appbar .brand a{color:var(--on)}
.appbar .brand a:hover{text-decoration:none}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;
  color:var(--on-var);border-radius:var(--r-full);cursor:pointer;transition:background .15s,transform .1s}
.iconbtn:hover{background:var(--sc-low);color:var(--on)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:24px;height:24px}

/* Desktop inline nav (hidden on mobile) */
.topnav{display:none}
@media(min-width:768px){
  .topnav{display:flex;align-items:center;gap:28px;margin:0 auto}
  .topnav a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:14px;
    letter-spacing:.02em;color:var(--on-var);padding-bottom:3px;border-bottom:2px solid transparent}
  .topnav a:hover{color:var(--on);text-decoration:none}
  .topnav a[aria-current]{color:var(--primary);border-bottom-color:var(--primary)}
  .topnav a svg{width:18px;height:18px}
}

/* ── Bottom nav (mobile) ── */
nav.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;align-items:center;
  height:64px;padding:0 4px;background:var(--white);border-top:1px solid var(--outline-var)}
@media(min-width:768px){ nav.bottomnav{display:none} }
.bottomnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:20%;color:var(--on-var);opacity:.62;font-family:var(--sans);transition:opacity .15s,transform .15s}
.bottomnav a:hover{opacity:1;text-decoration:none}
.bottomnav a svg{width:24px;height:24px}
.bottomnav a span{font-size:12px;font-weight:500;letter-spacing:.01em}
.bottomnav a[aria-current]{color:var(--primary);opacity:1;font-weight:700}
.bottomnav a[aria-current]::before{content:"";position:absolute;top:2px;width:5px;height:5px;border-radius:50%;background:var(--secondary)}

/* ── Type & sections ── */
.eyebrow,.label{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-var);display:block}
.eyebrow{margin-bottom:12px}
.center .eyebrow,.eyebrow.center{text-align:center}
section{margin-top:44px}
h2.section-title{font-family:var(--sans);font-weight:800;font-size:clamp(24px,5vw,32px);letter-spacing:-.02em;line-height:1.15;margin:6px 0 8px;text-wrap:balance}
.sub{color:var(--on-var);font-size:16px;margin:0 0 26px}
.center{text-align:center}
.dim{color:var(--on-var)}
.mt0{margin-top:0}

/* Section divider under an eyebrow heading */
.rule{height:1px;background:var(--outline-var);margin:10px 0 22px}

/* ── The riddle (grotesk headline) ── */
.riddle{font-family:var(--sans);font-weight:800;font-size:clamp(24px,5.2vw,34px);letter-spacing:-.02em;line-height:1.2;
  color:var(--on);text-wrap:balance;margin:16px 0 0}
.riddle.center,.center .riddle{text-align:center}
.sitting-no{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-var);margin-top:14px}

/* ── The answer (the theatrical reveal) ── */
.answer-stage{text-align:center;margin:44px 0 0}
.answer{display:inline-flex;align-items:flex-start;gap:6px;font-family:var(--sans);font-weight:800;
  font-size:clamp(44px,13vw,72px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:var(--on);margin:6px 0 0}
.answer .spark{width:.42em;height:.42em;margin-top:.06em;color:var(--secondary-c);
  filter:drop-shadow(0 0 8px rgba(0,250,190,.55))}
.answer-note{max-width:44ch;margin:22px auto 0;color:var(--on-var);font-size:17px;line-height:1.6}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--outline-var);border-radius:var(--r-xl);padding:22px 22px;margin-top:32px}
.card .eyebrow{text-align:left}

/* ── Verdict pills ── */
.pill{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px 4px;border-radius:var(--r-full);display:inline-block}
.pill.correct{color:var(--secondary);background:rgba(0,250,190,.22)}
.pill.partial{color:var(--primary);background:var(--primary-fixed)}
.pill.outwitted,.pill.forsworn{color:var(--error);background:var(--error-c)}
.verdict-row{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.you-answer{font-family:var(--serif);font-weight:500;font-style:italic;font-size:21px;line-height:1.4;margin:0;color:var(--on)}
.badge{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-var);white-space:nowrap}

/* ── Roasts ── */
.roast{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--on)}
.roast::before{content:"— ";color:var(--primary)}

/* ── Stats row ── */
.stats{margin-top:22px;padding-top:18px;border-top:1px solid var(--outline-var);display:flex;gap:28px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.stat b{font-family:var(--sans);font-weight:800;font-size:26px;display:block;color:var(--on)}
.stat span{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-var)}

/* ── Forms ── */
form.answer-form{margin-top:32px}
textarea,input[type=text],input[type=email]{
  width:100%;background:transparent;color:var(--on);border:0;border-bottom:1px solid var(--outline);
  font-family:var(--serif);font-size:20px;padding:12px 2px;resize:vertical;transition:border-color .2s,box-shadow .2s}
textarea{min-height:60px;line-height:1.5}
textarea::placeholder,input::placeholder{color:var(--on-var);opacity:.55}
textarea:focus,input[type=text]:focus,input[type=email]:focus{
  outline:none;border-bottom:2px solid var(--primary);box-shadow:0 6px 14px -8px rgba(97,8,230,.4)}
.charcount{font-family:var(--sans);font-weight:500;font-size:12px;color:var(--on-var);text-align:right;margin-top:8px;letter-spacing:.04em}

/* Card-style inputs (leagues, account) sit on white with a full border */
.card input[type=text],.card input[type=email]{border:1px solid var(--outline-var);border-radius:var(--r-lg);
  background:var(--white);font-size:17px;padding:12px 14px}
.card input:focus{border:1px solid var(--primary);box-shadow:0 0 0 3px var(--primary-fixed)}

/* ── The Oath (inline confidence dial) ── */
.oath{margin-top:30px}
.oath-legend{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-var);margin-bottom:14px;text-align:center}
.oath-opts{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.oath-opt{position:relative}
.oath-opt input{position:absolute;opacity:0;pointer-events:none}
.oath-opt label{position:relative;display:inline-block;cursor:pointer;font-family:var(--serif);font-size:17px;color:var(--on-var);padding:4px 2px 8px;transition:color .2s,font-weight .2s}
.oath-opt label .note{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--on-var);opacity:.7;margin-top:2px}
.oath-opt input:checked+label{color:var(--on);font-family:var(--sans);font-weight:700}
.oath-opt input:focus-visible+label{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}
.orbit-dot{position:absolute;top:-4px;right:-8px;width:8px;height:8px;background:var(--primary);border-radius:50%;
  opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}
.oath-opt input:checked+label .orbit-dot{opacity:1;transform:scale(1)}

/* ── Buttons ── */
button.cta,.cta{display:block;width:100%;margin-top:24px;background:var(--primary);color:var(--on-primary);border:0;
  border-radius:var(--r-lg);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 0 14px;cursor:pointer;text-align:center;transition:background .2s,transform .1s,box-shadow .2s}
button.cta:hover,.cta:hover{background:var(--primary-c);text-decoration:none;color:var(--on-primary)}
button.cta:active,.cta:active{transform:scale(.98)}
.cta.ghost{background:transparent;color:var(--on);border:1px solid var(--on)}
.cta.ghost:hover{background:var(--sc-low);color:var(--on)}
.cta.tertiary{background:var(--lime);color:#151f00}
.cta.tertiary:hover{background:var(--lime-dim);color:#151f00}

/* ── The seal (square submit) ── */
.seal-wrap{display:flex;justify-content:center;margin-top:36px}
.seal-btn{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:0;cursor:pointer;
  background:var(--primary);color:var(--on-primary);border-radius:var(--r-xl);
  box-shadow:0 0 20px rgba(97,8,230,.4);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.seal-btn svg{width:34px;height:34px}
.seal-btn:hover,.seal-btn:focus-visible{box-shadow:0 0 30px rgba(97,8,230,.7);transform:scale(1.08);outline:none}
.seal-btn:active{transform:scale(.95);box-shadow:0 0 15px rgba(97,8,230,.4)}
.seal-hint{text-align:center;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-var);margin-top:14px}

/* ── Sealed acknowledgement ── */
.seal{width:96px;height:96px;margin:8px auto 0;border-radius:var(--r-xl);background:var(--primary);
  display:grid;place-items:center;color:var(--on-primary);box-shadow:0 0 26px rgba(97,8,230,.4)}
.seal svg{width:44px;height:44px}

/* ── Candle countdown ── */
.candle-wrap{text-align:center}
.candle{width:24px;height:80px;margin:0 auto;border-radius:5px 5px 3px 3px;position:relative;
  background:linear-gradient(var(--primary-fixed) 0%,var(--primary-fixed) var(--melt,20%),#efeafc var(--melt,20%),#e4ddf5 100%);
  box-shadow:inset -5px 0 8px rgba(0,0,0,.06)}
.candle::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:9px;height:14px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#e9ddff,var(--primary-c) 55%,var(--primary));box-shadow:0 0 16px var(--primary-c)}
.countdown{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--primary);margin-top:16px;font-variant-numeric:tabular-nums}

/* ── Hall of Fame / gallery cards (colour-tagged) ── */
.entry{background:var(--white);border:1px solid var(--outline-var);border-left:4px solid var(--lime-dim);
  border-radius:var(--r-lg);padding:16px 18px;margin-top:14px;transition:transform .25s,box-shadow .25s,border-left-width .25s}
.entry:hover{transform:translateY(-2px);box-shadow:0 8px 22px -12px rgba(26,28,27,.35);border-left-width:6px}
.entry.forsworn{border-left-color:var(--error)}
.entry.correct{border-left-color:var(--secondary-c)}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.entry-answer{font-family:var(--serif);font-weight:500;font-style:italic;font-size:18px;margin:0;color:var(--on)}
.entry-roast{margin:9px 0 0;color:var(--on-var);font-size:15px;line-height:1.55}
.entry-roast::before{content:"— ";color:var(--primary)}

/* ── Nation strip ── */
.nations{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.02em}
.nation{border:1px solid var(--outline-var);border-radius:var(--r-full);padding:4px 11px;color:var(--on-var)}
.nation.lead{color:var(--primary);border-color:var(--primary);background:var(--primary-fixed)}

/* ── Verdict calendar ── */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:280px;margin:16px 0 0}
.cal i{aspect-ratio:1;border-radius:var(--r-sm);background:var(--sc-high);display:block}
.cal i.correct{background:var(--secondary-c)} .cal i.partial{background:var(--primary-c)}
.cal i.outwitted,.cal i.forsworn{background:var(--error)} .cal i.miss{background:var(--sc)}

/* ── Leaderboard (leagues) ── */
.board-list{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.lb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 10px;border-bottom:1px solid var(--outline-var);border-radius:var(--r-sm)}
.lb-row:hover{background:var(--white)}
.lb-left{display:flex;align-items:center;gap:14px;min-width:0}
.lb-rank{font-family:var(--sans);font-weight:800;font-size:22px;color:var(--on);width:34px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.lb-name{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--on);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-beads{display:flex;gap:4px;flex-wrap:wrap;max-width:120px}
.lb-beads i{width:9px;height:9px;border-radius:50%;background:var(--outline-var)}
.lb-points{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--on-var);white-space:nowrap;font-variant-numeric:tabular-nums}
.lb-points b{color:var(--on)}
.lb-row.you{border:1px solid var(--lime-dim);background:rgba(194,244,57,.14);border-radius:var(--r-lg);padding:14px 16px;margin:6px 0}
.lb-row.you .lb-name{font-weight:800}
.lb-row.you .lb-beads i{background:var(--lime-dim)}

/* ── Decrees / errors, in-voice ── */
.decree{background:var(--sc-low);border:1px solid var(--outline-var);border-left:4px solid var(--primary);
  border-radius:var(--r-lg);padding:16px 18px;margin-top:26px;font-style:italic;color:var(--on)}

/* ── worldline banner ── */
.worldline{display:flex;align-items:center;gap:14px;margin:24px 0 0;font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--primary);justify-content:center}
.worldline::before,.worldline::after{content:"";height:1px;flex:1;max-width:120px;background:linear-gradient(90deg,transparent,var(--outline-var))}
.worldline::after{background:linear-gradient(90deg,var(--outline-var),transparent)}

/* ── Footer ── */
footer{flex:none;padding:36px 20px 28px;text-align:center;font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-var)}
footer a{color:var(--on-var);text-decoration:underline;text-underline-offset:2px}
footer a:hover{color:var(--primary)}

/* ── Animations ── */
@media(prefers-reduced-motion:no-preference){
  .seal{animation:seal-press 600ms cubic-bezier(.2,1.3,.4,1) both}
  @keyframes seal-press{from{transform:scale(1.6) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  .answer{animation:clarity 900ms cubic-bezier(.2,.8,.2,1) both}
  .answer .spark{animation:spark 800ms cubic-bezier(.25,1,.5,1) .1s both}
  .answer-note{animation:clarity 900ms cubic-bezier(.2,.8,.2,1) .35s both}
  @keyframes clarity{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
  @keyframes spark{0%{transform:scale(0) rotate(-45deg);opacity:0}40%{transform:scale(1.3) rotate(15deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
  .anim-in{animation:slide-in-right .5s ease-out both}
  @keyframes slide-in-right{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
  .lb-row.you{animation:pulse-glow 2s cubic-bezier(.4,0,.6,1) infinite}
  @keyframes pulse-glow{0%,100%{box-shadow:0 0 14px rgba(194,244,57,.25)}50%{box-shadow:0 0 24px rgba(194,244,57,.6)}}
}