/* THE GOODNIGHT CLUB · night theme */
:root{ /* MILA'S SUPPER CLUB · warm ember theme */
  --bg:#2a1420; --bg2:#3a1f2c; --card:#40242f; --card2:#4a2836;
  --ink:#fdf3e7; --ink-dim:#e0cbb8; --ink-faint:#b39a8b;
  --amber:#f2b25c; --amber-soft:#f7d998; --lav:#e88ca0; --rose:#f5a8c6;
  --ok:#9fe6b0; --line:rgba(232,140,160,.20);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% -10%, #5a2c3a 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; min-height:100vh;
}
/* ember dots */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 66%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 82%, #fff 50%, transparent 51%);
}
#app{max-width:540px;margin:0 auto;padding:20px 16px 64px;position:relative}
.screen{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--amber);font-weight:800;letter-spacing:.14em;font-size:.78rem;margin:26px 0 8px;text-align:center}
h1{font-size:2.1rem;line-height:1.15;margin:.2em 0;text-align:center}
h1 .moon{font-size:2.4rem}
.confessional{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin:18px 0;font-size:1.02rem}
.confessional p{margin:.6em 0}
.honesty{border-left:3px solid var(--amber);padding:2px 0 2px 14px;color:var(--ink-dim);font-size:.94rem;margin:16px 0}
.honesty strong{color:var(--amber-soft)}
.q-title{font-size:1.5rem;margin:22px 4px 4px}
.q-sub{color:var(--ink-dim);margin:0 4px 14px;font-size:.96rem}
.choices{display:grid;gap:10px;margin:6px 0 18px}
.choice{display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;color:var(--ink);
  padding:13px 14px;font-size:1rem;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.choice:hover{transform:translateY(-1px);border-color:var(--lav)}
.choice .e{font-size:1.5rem;flex:0 0 auto}
.choice .t{font-weight:700}
.choice .s{display:block;font-weight:400;color:var(--ink-dim);font-size:.88rem}
.choice[aria-pressed="true"]{border-color:var(--amber);background:#52303f;box-shadow:0 0 0 1px var(--amber)}
.verdict{background:#4a2836;border:1px dashed var(--lav);border-radius:14px;padding:13px 15px;
  margin:4px 0 16px;font-size:.97rem;color:var(--ink)}
.verdict b{color:var(--amber-soft)}
.btn{display:block;width:100%;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--amber-soft),var(--amber));color:#3a2410;
  font-weight:800;font-size:1.06rem;padding:15px;margin:14px 0;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--lav);border:1.5px solid var(--lav);font-weight:700}
.progress{display:flex;gap:6px;justify-content:center;margin:14px 0 4px}
.progress i{width:26px;height:5px;border-radius:3px;background:#5a3a44}
.progress i.on{background:var(--amber)}
.step-card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin:12px 0}
.step-card.done{opacity:.75;border-color:rgba(159,230,176,.4)}
.step-head{display:flex;gap:10px;align-items:baseline}
.step-num{color:var(--amber);font-weight:800;font-size:.85rem;letter-spacing:.08em}
.step-title{font-size:1.12rem;font-weight:800;margin:2px 0}
.step-line{margin:.4em 0;color:var(--ink)}
.step-why{margin:.6em 0 0;font-size:.9rem;color:var(--ink-dim);border-top:1px dashed var(--line);padding-top:.6em}
.step-why b{color:var(--lav)}
.check-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.check-btn{flex:1;border:1.5px solid var(--line);background:#3a2129;color:var(--ink);
  border-radius:12px;padding:11px;font-size:.98rem;font-weight:700;cursor:pointer}
.check-btn.done{border-color:var(--ok);color:var(--ok);background:#1e2f1e}
.archetype{text-align:center;padding:8px 0}
.archetype .big{font-size:3.4rem}
.archetype h2{font-size:1.7rem;margin:.3em 0 .1em}
.archetype .tension{color:var(--amber-soft);font-style:italic;margin:.2em 0 .8em}
.traits{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.traits span{background:#52303f;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.9rem}
.prompt-card{background:#4a2836;border:1px dashed var(--lav);border-radius:14px;padding:13px 15px;margin:14px 0;text-align:left}
.prompt-card b{color:var(--amber-soft)}
.section-h{font-size:1.15rem;font-weight:800;margin:26px 4px 8px;color:var(--amber-soft)}
.card-btns{display:grid;gap:10px}
canvas.share{width:100%;border-radius:12px;border:1px solid var(--line);margin:10px 0;display:none}
.caption-box{background:#2a1820;border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  white-space:pre-wrap;font-size:.92rem;color:var(--ink-dim);margin:8px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.stat .n{font-size:1.5rem;font-weight:800;color:var(--amber)}
.stat .l{font-size:.78rem;color:var(--ink-dim)}
.cross{background:#3a2230;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin:10px 0;font-size:.95rem}
.welcome{background:#52303f;border:1px solid var(--amber);border-radius:12px;padding:10px 14px;
  margin:0 0 14px;font-size:.93rem;color:var(--amber-soft);text-align:center}
.fine{font-size:.82rem;color:var(--ink-faint);margin:8px 4px}
.disclosure-line{text-align:center;color:var(--ink-faint);font-size:.8rem;margin:26px 0 6px}
.kicker-chip{display:inline-block;background:#52303f;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.85rem;color:var(--lav);margin:4px 2px}
@media (min-width:560px){ h1{font-size:2.5rem} }

.plate-title{font-size:1.6rem;margin:.2em 4px;text-align:center;color:var(--amber-soft)}
.allergen{background:#3a2230;border:1px dashed var(--lav);border-radius:12px;padding:10px 13px;
  font-size:.86rem;color:var(--ink-dim);margin:10px 0}
.safety{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin:12px 0;font-size:.94rem}
.safety ul{margin:.5em 0;padding-left:1.2em}
.safety li{margin:.35em 0}
.rules{display:grid;gap:10px;margin:6px 0}
.rule{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.rule b{color:var(--amber-soft)}
.rule p{margin:.3em 0 0;font-size:.9rem;color:var(--ink-dim)}
.timer-btn{margin-left:auto;border:1.5px solid var(--amber);background:transparent;color:var(--amber-soft);
  border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:700;cursor:pointer}
.timer-read{font-size:.88rem;color:var(--amber-soft);min-height:1.2em;margin:.4em 0 0}
.plate-recap{background:#4a2836;border:1px dashed var(--lav);border-radius:14px;padding:12px 14px;
  margin:14px 0;text-align:left;font-size:.95rem}
.plate-recap b{color:var(--amber-soft)}