/* ============ QuizJar — "Daily 5" dark-neon design (image-free) ============ */
:root{
  --bg:#06090f; --card:#0b0e14; --line:#171b25; --line2:#253044;
  --cyan:#4de1ff; --cyan-hi:#7febff; --on-cyan:#06121a; --pink:#ff4d9d;
  --ink:#eef4ff; --ink-soft:#9aa6bf; --ink-mute:#7f8ca6;
  --wrong-bg:#20141d; --wrong-bd:#48243a;
  --display:'Syne',system-ui,sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:440px; --cardpad:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px 16px 52px;width:100%}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(6,9,15,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.brand .mark{width:28px;height:28px;display:inline-flex;filter:drop-shadow(0 0 7px rgba(77,225,255,.4))}
.brand .mark svg{width:100%;height:100%;display:block}
.brand .txt b{color:var(--cyan)}
.nav-link{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);padding:9px 15px;border-radius:999px;
  border:1px solid var(--line2);transition:border-color .15s,color .15s,transform .12s}
.nav-link:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.nav-link:active{transform:translateY(0) scale(.97)}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:32px;padding:26px var(--cardpad) 28px;
  display:flex;flex-direction:column;gap:20px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
h1{font-family:var(--display);font-size:clamp(34px,10vw,44px);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0;color:var(--ink);text-wrap:balance}
.tagline{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

/* segment progress bars */
.bars{display:flex;gap:5px}
.bars span{flex:1;height:5px;border-radius:3px;background:var(--line2);transition:background .3s ease}
.bars span.on{background:var(--cyan)}
.pcount{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* question + options */
.q{font-family:var(--display);font-size:clamp(24px,6.5vw,30px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty;margin:0}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 18px;border-radius:16px;border:0;width:100%;
  background:var(--line);color:var(--ink);font-family:var(--body);font-size:17px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .14s,color .14s,transform .12s,box-shadow .14s}
.opt:hover{background:#1e2432;transform:translateX(3px)}
.opt:active{transform:scale(.99)}
.opt.sel{background:var(--cyan);color:var(--on-cyan);font-weight:700;box-shadow:0 10px 26px rgba(77,225,255,.35);
  transform:none;animation:selPop .34s cubic-bezier(.2,1.5,.4,1)}
.opt.sel::after{content:"PICKED";margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.1em}
.opt.dim{opacity:.5}
.opts.locked .opt{cursor:default}
@keyframes selPop{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;min-height:54px;padding:0 24px;
  font-family:var(--body);font-size:16px;font-weight:700;cursor:pointer;width:100%;transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
.btn-primary{background:var(--cyan);color:var(--on-cyan);box-shadow:0 8px 24px rgba(77,225,255,.3);position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;left:-70%;width:45%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg)}
.btn-primary:hover{background:var(--cyan-hi);transform:translateY(-2px);box-shadow:0 12px 30px rgba(77,225,255,.45)}
.btn-primary:hover::before{animation:shine .75s ease}
.btn-primary:active{transform:translateY(1px) scale(.99)}
@keyframes shine{from{left:-70%}to{left:130%}}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);font-weight:600}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(1px) scale(.99)}
.actions{display:flex;flex-direction:column;gap:10px}

/* result */
.result-score{font-family:var(--display);font-size:clamp(56px,20vw,74px);font-weight:800;line-height:.9;letter-spacing:-.04em;color:var(--cyan)}
.result-name{font-family:var(--display);font-size:clamp(20px,6vw,26px);font-weight:800;color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
.result-blurb{font-size:15px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;margin:0}
.credit{color:var(--ink-mute);font-size:12px;margin:2px 0 0}

/* confetti overlay (kept, sits above card; skipped under reduced-motion) */
.confetti{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:min(120%,520px);height:320px;pointer-events:none;z-index:4}

/* hub */
.hub-head{display:flex;flex-direction:column;gap:10px;padding:6px 0 4px}
.hub-head h1{font-size:clamp(30px,8vw,40px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(max-width:400px){.grid{grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:16px 15px;transition:border-color .15s,transform .1s,box-shadow .15s}
.tile:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 12px 30px rgba(77,225,255,.15)}
.tile .t-name{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.tile .t-tag{font-size:12px;color:var(--ink-mute)}
.section-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin:24px 2px 12px}

/* entrance animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.card{animation:fadeUp .34s cubic-bezier(.2,.7,.2,1) both}
.opts .opt{animation:fadeUp .3s cubic-bezier(.2,.7,.2,1) both}
.opts .opt:nth-child(1){animation-delay:.04s}.opts .opt:nth-child(2){animation-delay:.10s}
.opts .opt:nth-child(3){animation-delay:.16s}.opts .opt:nth-child(4){animation-delay:.22s}.opts .opt:nth-child(5){animation-delay:.28s}
.result-score{animation:popIn .45s cubic-bezier(.2,.7,.2,1) both}
.tile{animation:fadeUp .3s ease both}
.actions .btn{animation:fadeUp .34s ease both}
.actions .btn:nth-child(1){animation-delay:.08s}.actions .btn:nth-child(2){animation-delay:.16s}.actions .btn:nth-child(3){animation-delay:.24s}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

[hidden]{display:none!important}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:44px}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:20px 16px 34px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ink-mute)}
.site-footer a{color:var(--ink-soft);font-weight:600;transition:color .15s}
.site-footer a:hover{color:var(--cyan)}
.site-footer .cr{width:100%;text-align:center;font-size:12px;color:var(--ink-mute);margin-top:2px}

/* ---------- policy / prose pages ---------- */
.card.prose{display:block}
.prose h1{font-family:var(--display);font-size:clamp(26px,7vw,34px);font-weight:800;letter-spacing:-.02em;margin:2px 0 6px}
.prose .updated{color:var(--ink-mute);font-size:13px;margin:0 0 18px}
.prose h2{font-family:var(--display);font-size:17px;font-weight:800;color:var(--cyan);letter-spacing:-.01em;margin:24px 0 8px}
.prose p{margin:0 0 12px;color:var(--ink-soft);font-size:15px;line-height:1.75}