:root{
  color-scheme: dark;
  --night:#221830;
  --night-2:#2E2142;
  --card:#35274B;
  --card-hi:#44325F;
  --line:#5A4677;
  --pearl:#F7EEE7;
  --muted:#C9B8C9;
  --apricot:#F2A65A;
  --rose:#E4707F;
  --sage:#A7BF93;
  --display:"Gloock", "Georgia", "Times New Roman", serif;
  --body:"Karla", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 50% 110%, #7A3A4F 0%, rgba(122,58,79,0) 60%),
    radial-gradient(90% 50% at 85% 0%, #3B2A5A 0%, rgba(59,42,90,0) 70%),
    var(--night);
  background-attachment: fixed;
  color:var(--pearl);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  padding-inline:16px;
}
.wrap{max-width:1080px;margin:0 auto;padding-block:20px 40px;display:flex;flex-direction:column;gap:18px;min-height:100vh}
.layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:880px){ .layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px} .mapcard{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)} }
.mapcard{background:var(--night-2);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mapcard svg{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;background:#1B2A45}
@media (max-width:879px){ .mapcard{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:3} .mapcard svg{aspect-ratio:16/10;max-height:36vh} }
.maphead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 4px}
.maphead b{font-family:var(--display);font-weight:400;font-size:18px}
.maphead span{font-size:12px;color:var(--muted)}
.land{fill:#3A2E4F;stroke:#6B5A86;stroke-width:1.2;vector-effect:non-scaling-stroke}
.town{fill:#A897B8;font-family:var(--body);font-style:italic}
.seg{fill:none;stroke:var(--apricot);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.seg.new{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s ease-out forwards}
.seg.home{stroke:var(--rose);stroke-dasharray:4 5;opacity:.8}
@keyframes draw{to{stroke-dashoffset:0}}
[tabindex="-1"]:focus{outline:none}
.pin circle.body{fill:var(--rose);stroke:var(--pearl);vector-effect:non-scaling-stroke;stroke-width:1.6}
.pin.home circle.body{fill:var(--apricot)}
.pin text.num{fill:#fff;font-family:var(--body);font-weight:700}
.pin text.lab{fill:var(--pearl);font-family:var(--body);font-weight:700;paint-order:stroke;stroke:#1B2A45;stroke-linejoin:round}
.pin.new{animation:drop .55s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes drop{from{opacity:0;transform:translateY(-30%) scale(.4)}to{opacity:1;transform:none}}
.ghost circle{fill:none;stroke:var(--apricot);stroke-dasharray:3 3;vector-effect:non-scaling-stroke;stroke-width:1.5}
.ghost text{fill:var(--apricot);font-family:var(--body);paint-order:stroke;stroke:#1B2A45;stroke-linejoin:round}

/* candles progress */
.candles{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:18px;height:64px;padding-bottom:12px}
.candle{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:10px;height:30px;border-radius:3px 3px 2px 2px;
  background:repeating-linear-gradient(135deg,var(--pearl) 0 5px,var(--rose) 5px 10px);opacity:.45;transition:opacity .4s}
.candle::before{content:"";position:absolute;left:50%;top:-5px;width:1.5px;height:6px;background:#2a2030;transform:translateX(-50%)}
.flame{position:absolute;left:50%;bottom:calc(100% + 4px);width:10px;height:16px;margin-left:-5px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#FFF4C9 0 25%,var(--apricot) 55%,rgba(242,166,90,0) 75%);
  transform:scale(0);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.candle.lit{opacity:1}
.candle.lit .flame{transform:scale(1);animation:flicker 1.6s ease-in-out infinite}
.candle.lit::after{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,166,90,.28),rgba(242,166,90,0) 70%);pointer-events:none}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-2deg)}35%{transform:scale(.92,1.06) rotate(2deg)}70%{transform:scale(1.04,.95) rotate(-1deg)}}

.stage{position:relative;flex:1}
.step{display:flex;flex-direction:column;gap:18px}
.step.enter{animation:enter .5s cubic-bezier(.2,.8,.2,1) both}
.step.enter-back{animation:enterBack .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes enterBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--apricot);font-weight:700}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(38px,9vw,56px)}
h2{font-size:clamp(28px,6.4vw,38px)}
h1 em,h2 em{font-style:normal;color:var(--apricot)}
.lede{color:var(--muted);margin:0;max-width:44ch;font-size:17px}

.options{display:grid;gap:10px}
.opt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
  padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  transition:transform .18s, background .18s, border-color .18s;width:100%;position:relative}
.opt:hover{background:var(--card-hi);transform:translateY(-1px)}
.opt:focus-visible{outline:2px solid var(--apricot);outline-offset:3px}
.opt[aria-pressed="true"]{border-color:var(--apricot);background:var(--card-hi);box-shadow:0 0 0 1px var(--apricot) inset}
.opt .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--night-2);color:var(--apricot)}
.opt .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.opt b{display:block;font-size:17px;font-weight:700}
.opt span.d{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.opt[disabled]{opacity:.42;cursor:not-allowed}
.opt[disabled]:hover{transform:none;background:var(--card)}
.opt .lock{display:block;margin-top:4px;font-size:12.5px;color:var(--apricot)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gifts{grid-template-columns:1fr 1fr}
.gift{grid-template-columns:1fr;text-align:left;padding:10px;gap:10px;align-content:start}
.gift .pic{aspect-ratio:1/1;max-width:100%;border-radius:10px;background:#F1F0EE;display:grid;place-items:center;overflow:hidden}
.gift .pic img{max-height:88%;max-width:88%;object-fit:contain;mix-blend-mode:multiply}
.gift .pic.surprise{background:linear-gradient(135deg,var(--rose),var(--apricot))}
.gift .pic.surprise svg{width:56px;height:56px;stroke:var(--night);fill:none;stroke-width:1.6}
.gift b{font-size:15.5px}

textarea{width:100%;min-height:120px;resize:vertical;border-radius:14px;border:1px solid var(--line);background:var(--card);
  color:var(--pearl);font:inherit;padding:14px 16px}
textarea:focus-visible{outline:2px solid var(--apricot);outline-offset:2px}
textarea::placeholder{color:#9D8CA6}

.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:700;font-size:16px;background:var(--apricot);color:#2A1A1E;transition:transform .15s, filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--pearl);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--muted);padding:10px 4px;font-weight:500}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.date-chip{display:inline-flex;gap:10px;align-items:center;align-self:flex-start;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:14px}
.date-chip strong{color:var(--pearl)}

/* finale */
.ticket{background:var(--pearl);color:#2A1A2E;border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;top:92px;width:22px;height:22px;border-radius:50%;background:var(--night)}
.ticket::before{left:-11px}.ticket::after{right:-11px}
.ticket h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0}
.ticket .sub{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8A5A6A;font-weight:700}
.ticket hr{border:0;border-top:2px dashed #D8C8C8;margin:4px 0}
.ticket dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.ticket dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8A5A6A;font-weight:700;padding-top:3px}
.ticket dd{margin:0;font-weight:500}
.sign{font-family:var(--display);font-size:22px;color:var(--apricot);margin:0}
.note{font-size:13.5px;color:var(--muted);margin:0}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:5}
.foot{font-size:12.5px;color:#9D8CA6;text-align:center}

@media (max-width:380px){.gifts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- production additions ---- */
.eyebrow.plain{color:var(--muted)}
.pxn{font-family:"Pixelify Sans",var(--body);font-size:15px;font-weight:700;letter-spacing:0;display:inline-block;transform:translateY(1px)}

/* candles are buttons: jump to any completed step */
.candle:disabled{cursor:default}
.candle:not(:disabled):hover{opacity:.85}
.candle:focus-visible{outline:2px solid var(--apricot);outline-offset:6px}
.candle.current{box-shadow:0 0 0 2px var(--night),0 0 0 3px var(--apricot)}
.candle .cnum{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-family:"Pixelify Sans",var(--body);font-size:10px;color:var(--muted);line-height:1}
.candle.current .cnum{color:var(--apricot)}
.walker{position:absolute;left:0;bottom:12px;width:28px;height:20px;transition:transform .7s steps(10);pointer-events:none;z-index:1}
.walker svg{width:28px;height:20px;display:block;image-rendering:pixelated}
.walker.flip svg{transform:scaleX(-1)}
.walker .f2{visibility:hidden}
.walker.walking .f1{animation:frameA .24s steps(1) infinite}
.walker.walking .f2{animation:frameB .24s steps(1) infinite}
@keyframes frameA{0%{visibility:visible}50%{visibility:hidden}}
@keyframes frameB{0%{visibility:hidden}50%{visibility:visible}}
.walker.walking svg{animation:hop .24s steps(2) infinite}
@keyframes hop{50%{translate:0 -1px}}

/* option cards with a Google Maps link that never selects the option */
.optwrap{position:relative;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.optwrap.has-link .opt{padding-bottom:38px}
.gmap{font-size:13px;color:var(--apricot);text-decoration:none;font-weight:700;border-bottom:1px dashed currentColor}
.gmap:hover{color:var(--pearl)}
.gmap:focus-visible{outline:2px solid var(--apricot);outline-offset:2px;border-radius:3px}
.optwrap .gmap{position:absolute;left:74px;bottom:12px;z-index:1}
.optwrap.locked .gmap{opacity:.6}
.gmap.dark{color:#8A3A4F;font-size:12.5px}

/* 8-bit heart that bounces from a picked option */
.pxheart{position:absolute;right:16px;top:50%;width:28px;height:28px;margin-top:-14px;pointer-events:none;animation:heartHop .85s steps(8) both}
.pxheart svg{width:28px;height:28px;display:block}
@keyframes heartHop{0%{transform:translateY(8px) scale(.4);opacity:0}25%{transform:translateY(-14px) scale(1.1);opacity:1}45%{transform:translateY(0) scale(1)}62%{transform:translateY(-7px)}78%{transform:translateY(0)}100%{transform:translateY(-22px);opacity:0}}

/* sparkles and coins from new pins */
.spark{animation:spark .9s steps(6) both;opacity:0}
@keyframes spark{0%{opacity:1;transform:translate(0,0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.pinlink{cursor:pointer}
.pinlink:hover circle.body{stroke:var(--apricot)}

/* sunset scene on the evening step */
.scene{border-radius:12px;overflow:hidden;border:1px solid var(--line);line-height:0}
.scene svg{width:100%;height:auto;aspect-ratio:64/22;display:block}
.scene .sun{animation:sunset 9s steps(18) infinite}
@keyframes sunset{0%{transform:translateY(-6px)}80%{transform:translateY(9px)}100%{transform:translateY(9px)}}
.scene .boat{animation:bob 1.4s steps(2) infinite}
@keyframes bob{50%{transform:translateY(1px)}}
.scene .wave{animation:wave 1.6s steps(2) infinite}
@keyframes wave{50%{transform:translateX(2px)}}

/* ticket: pixel cake + stamp */
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ticket-head h3{margin-top:4px}
.cakebox svg{width:60px;height:56px;display:block}
.cake .f2{visibility:hidden}
.cake .f1{animation:frameA .5s steps(1) infinite}
.cake .f2{animation:frameB .5s steps(1) infinite}
.stamp{position:absolute;right:18px;top:78px;font-family:"Pixelify Sans",var(--body);font-weight:700;font-size:13px;letter-spacing:.12em;color:#B8475A;border:2px solid #B8475A;padding:3px 8px;transform:rotate(-6deg);background:rgba(247,238,231,.9);text-transform:uppercase}
.ticket dd{overflow-wrap:anywhere}
.saving-error{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:var(--rose);color:#2A1A1E;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;display:none;z-index:6}
body[data-saved="error"] .saving-error{display:block}
@media (max-width:420px){ .candles{gap:14px} .optwrap .gmap{left:16px} .optwrap.has-link .opt{padding-bottom:40px} }
@media (prefers-reduced-motion:reduce){ .walker{transition:none} .spark{display:none} }

/* ---- Duolingo-style motion: springy steps, chunky pressable cards, feedback sheet ---- */
.stage{display:grid}
.stage > .step{grid-area:1/1}
.step.leaving{pointer-events:none}
.step.enter{animation:springIn .62s cubic-bezier(.2,.9,.25,1) both}
.step.enter-back{animation:springInBack .62s cubic-bezier(.2,.9,.25,1) both}
@keyframes springIn{0%{opacity:0;transform:translateX(56px)}55%{opacity:1;transform:translateX(-7px)}78%{transform:translateX(2px)}100%{opacity:1;transform:none}}
@keyframes springInBack{0%{opacity:0;transform:translateX(-56px)}55%{opacity:1;transform:translateX(7px)}78%{transform:translateX(-2px)}100%{opacity:1;transform:none}}
.optwrap{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.opt{box-shadow:0 4px 0 #241A33;transition:transform .12s, box-shadow .12s, background .18s, border-color .18s}
.opt:hover{transform:translateY(-1px);box-shadow:0 5px 0 #241A33}
.opt:active:not([disabled]){transform:translateY(4px);box-shadow:0 0 0 #241A33}
.opt[aria-pressed="true"]{box-shadow:0 4px 0 #B06A2A,0 0 0 1px var(--apricot) inset}
.opt[disabled]{box-shadow:none}
.step.answered .opt[aria-pressed="true"]{animation:chosen .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes chosen{0%{transform:translateY(4px)}45%{transform:translateY(-3px) scale(1.02)}100%{transform:none}}
.step.answered .optwrap:not(:has([aria-pressed="true"])){transition:opacity .25s;opacity:.55}
.btn:not(.ghost){box-shadow:0 4px 0 #B06A2A}
.btn:not(.ghost):active{transform:translateY(4px);box-shadow:none}

.feedback{position:fixed;left:0;right:0;bottom:0;z-index:7;display:flex;align-items:center;gap:14px;
  padding:14px max(16px,calc((100vw - 640px)/2)) calc(16px + env(safe-area-inset-bottom,0px));
  background:#2F3B2A;border-top:2px solid var(--sage);color:var(--pearl);transform:translateY(110%);pointer-events:none}
.feedback.in{animation:sheetUp .45s cubic-bezier(.34,1.4,.64,1) forwards}
.feedback.out{animation:sheetDown .3s cubic-bezier(.4,0,1,1) forwards}
@keyframes sheetUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(110%)}}
.fb-icon{width:64px;height:64px;flex:none;display:grid;place-items:center}
.fb-icon svg{width:100%!important;height:100%!important}
.fb-static{font-size:30px;color:var(--sage);font-weight:700}
.fb-text{display:flex;flex-direction:column;gap:2px}
.fb-text b{font-family:var(--display);font-weight:400;font-size:24px;color:#CFE3BF;line-height:1.1}
.fb-text span{font-size:14px;color:var(--muted)}

.candle-spark{position:absolute;left:50%;bottom:calc(100% - 6px);width:60px;height:60px;margin-left:-30px;pointer-events:none;z-index:2}
.finale-burst{position:fixed;left:50%;top:38%;width:min(90vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:6}
@media (prefers-reduced-motion:reduce){ .feedback.in{transform:none} .feedback.out{transform:translateY(110%)} }