:root{
  --cream:#fff8f0; --paper:#fffdfa; --ink:#2a1d19; --ink-soft:#6b5750;
  --coral:#e2604a; --coral-deep:#c04430; --gold:#e9a13b;
  --line:rgba(42,29,25,.14); --shadow:rgba(74,45,35,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);overflow:hidden;
  font-family:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
img{max-width:100%;display:block}
a{color:var(--coral-deep)}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90;display:none}

/* ---------- top bar ---------- */
.topbar{
  flex:0 0 auto;display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;
  padding:14px clamp(14px,3vw,28px) 10px;
}
.topbar h1{
  font-family:"Fraunces",Georgia,serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.25rem,3.1vw,1.95rem);margin:0;line-height:1.12;
}
.topbar .sub{
  width:100%;
  font-family:"Fraunces",serif;font-style:italic;color:var(--ink-soft);
  font-size:clamp(.9rem,2vw,1.08rem);margin:2px 0 0;
}
.topbar .intro{
  width:100%;margin:6px 0 0;font-size:.88rem;color:var(--ink-soft);opacity:.85
}

/* ---------- stage ---------- */
.stage{position:relative;flex:1 1 auto;min-height:0;margin:0 clamp(10px,2.4vw,24px)}
#scene{
  width:100%;height:100%;display:block;border-radius:20px;
  background:#fdf0e0;border:1px solid var(--line);
  box-shadow:0 18px 46px -26px var(--shadow);
  touch-action:none;cursor:crosshair;
}

/* ---------- hud ---------- */
#hud{
  position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:12px;
  background:rgba(255,253,250,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  box-shadow:0 4px 16px -8px var(--shadow);
}
.hud-dots{display:flex;gap:6px}
.dot{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;background:rgba(42,29,25,.07);color:var(--ink-soft);
  border:1px dashed rgba(42,29,25,.25);transition:transform .25s
}
.dot.on{background:#fff3dc;border:1px solid var(--gold);color:var(--ink);transform:scale(1.06)}
.dot.next{border-style:solid;border-color:var(--coral);color:var(--coral-deep);animation:dotPulse 1.9s ease-in-out infinite}
.dot.locked{opacity:.4}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.hud-count{font-size:.82rem;color:var(--ink-soft);white-space:nowrap}
.hud-btn{
  border:none;border-radius:999px;padding:8px 16px;cursor:pointer;font-family:inherit;
  font-size:.85rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  box-shadow:0 4px 12px -4px rgba(192,68,48,.7);animation:nudge 1.8s ease-in-out infinite
}
@keyframes nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}


/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(42,29,25,.5);backdrop-filter:blur(4px)
}
.modal.open{display:flex}
.modal-inner{
  background:var(--paper);border-radius:22px;max-width:440px;width:100%;
  max-height:88vh;overflow:auto;padding:22px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  animation:pop .38s cubic-bezier(.2,1.3,.4,1) both
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:16px;background:#eee3d6}
/* the celebration gif is small and pixel-art-ish; show it whole, not cropped */
.modal-photo.is-gif{aspect-ratio:auto;height:auto;object-fit:contain;background:transparent}
.modal-kicker{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--coral-deep);margin:0 0 6px
}
.modal-inner h2{font-family:"Fraunces",serif;font-weight:600;font-size:1.4rem;margin:0 0 10px;line-height:1.2}
.modal-memory{margin:0 0 14px;color:var(--ink-soft);font-size:.96rem;line-height:1.6}
.modal-clue{
  margin:0;padding:14px 16px;border-left:3px solid var(--gold);
  background:#fff6e6;border-radius:0 12px 12px 0;
  font-family:"Fraunces",serif;font-style:italic;font-size:1.02rem;line-height:1.5
}
.modal-close{
  margin-top:18px;width:100%;padding:13px;border:none;border-radius:13px;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep))
}

/* ---------- answer panel ---------- */
.answer{
  position:fixed;z-index:80;left:50%;bottom:22px;transform:translate(-50%,140%);
  width:min(460px,calc(100vw - 28px));max-height:86vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.9,.3,1);text-align:center
}
.answer.open{transform:translate(-50%,0)}
.answer h2{font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem;margin:0 0 6px}
.answer-sub{margin:0 0 16px;color:var(--ink-soft);font-size:.92rem}
.yesno{display:flex;gap:12px;margin-top:4px}
.yesno button{
  flex:1;padding:16px 18px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1.05rem;font-weight:600;letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.2,1.3,.4,1),filter .2s,box-shadow .2s
}
.yesno button:active{transform:translateY(1px)}
.btn-yes{
  color:#fff;background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  box-shadow:0 6px 18px -6px rgba(192,68,48,.75)
}
.btn-yes:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn-no{
  color:var(--ink-soft);background:transparent;border:1px solid var(--line)!important
}
.btn-no:hover{border-color:var(--ink-soft)!important;color:var(--ink)}
.btn-no.is-armed{
  border-color:var(--coral)!important;color:var(--coral-deep);
  background:rgba(226,96,74,.07)
}
.answer-msg{min-height:1.4em;margin:12px 0 0;font-size:.92rem;color:var(--coral-deep)}
.answer-msg .hint{color:var(--ink);font-family:"Fraunces",serif;font-style:italic}
.answer-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.answer-hint,.answer-min{
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:8px 16px;font-family:inherit;font-size:.84rem;cursor:pointer
}
.answer-hint:hover,.answer-min:hover{border-color:var(--coral);color:var(--coral-deep)}
.answer.is-win .modal-photo,.answer.is-declined .modal-photo{margin-top:10px}
.answer.is-declined .modal-kicker{color:var(--ink-soft)}
.answer.is-declined .answer-note{background:rgba(42,29,25,.05)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;text-align:left;margin:14px 0 0;font-size:.94rem}
.facts dt{font-weight:600;color:var(--ink-soft)}
.facts dd{margin:0}
.answer-note{
  margin:16px 0 0;padding:14px;border-radius:12px;background:#fff6e6;
  font-family:"Fraunces",serif;font-style:italic;font-size:1rem;line-height:1.5
}
.answer-links{margin:14px 0 0;display:flex;gap:16px;justify-content:center;font-size:.92rem}
.answer-sent{margin:14px 0 0;font-size:.82rem;color:var(--ink-soft);opacity:.8}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:560px){
  #hud{top:10px;left:10px;padding:6px 10px;gap:8px}
  .dot{width:26px;height:26px;font-size:13px}
  .hud-count{display:none}
  .stage{margin:0 8px}
}

.demo-banner{
  width:100%;margin:8px 0 0;padding:8px 12px;border-radius:10px;
  background:#fff3dc;border:1px dashed var(--gold);color:#7a5a1e;
  font-size:.78rem;text-align:center
}