:root{
  --pink:#ff5c8a; --rose:#ff86b0; --peach:#ffd7c2; --deep:#c2185b;
  --cream:#fff5f7; --ink:#3a0d24; --white:#fff;
  --shadow:0 10px 40px rgba(194,24,91,.25);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#1a0410;color:var(--white)}
body{position:fixed;inset:0;overscroll-behavior:none;touch-action:none}

/* ---------- background floating hearts ---------- */
#hearts{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fheart{position:absolute;bottom:-10%;font-size:1.6rem;opacity:0;
  animation:rise linear infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.7}
  100%{transform:translateY(-115vh) rotate(40deg);opacity:0}
}

#confetti{position:fixed;inset:0;z-index:60;pointer-events:none}

/* ---------- story progress bars ---------- */
#progress{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;gap:4px;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 0}
#progress .pbar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
#progress .pbar>i{display:block;height:100%;width:0;background:var(--white);border-radius:3px}
#progress .pbar.done>i{width:100%}
#progress .pbar.active>i{width:100%;transition:width .35s ease}

/* ---------- deck / slides ---------- */
#deck{position:relative;z-index:10;height:100%;width:100%}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:64px 26px 90px;gap:14px;
  background:var(--bg,linear-gradient(160deg,var(--pink),var(--deep)))}
.slide .kicker{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.85}
.slide h1{font-size:2rem;font-weight:800;line-height:1.15}
.slide h2{font-size:1.5rem;font-weight:800;line-height:1.2}
.slide p{font-size:1.02rem;line-height:1.5;opacity:.95;max-width:22em}
.slide .huge{font-size:4.6rem;font-weight:900;line-height:1;letter-spacing:-.02em;
  text-shadow:var(--shadow)}
.slide .unit{font-size:1rem;font-weight:700;opacity:.9;letter-spacing:.02em}
.slide .em{font-size:4.2rem;line-height:1}
.slide small{opacity:.8}

/* entrance animation: stagger children */
.slide.onlight{color:#2b2b33}
.slide.onlight .kicker{opacity:.6}
.slide.onlight small{color:#5a5a66}
.slide.enter>*{opacity:0;transform:translateY(22px);
  animation:pop .55s cubic-bezier(.2,.8,.2,1) forwards}
.slide.enter>*:nth-child(1){animation-delay:.05s}
.slide.enter>*:nth-child(2){animation-delay:.15s}
.slide.enter>*:nth-child(3){animation-delay:.25s}
.slide.enter>*:nth-child(4){animation-delay:.35s}
.slide.enter>*:nth-child(5){animation-delay:.45s}
.slide.enter>*:nth-child(6){animation-delay:.55s}
.slide.enter>*:nth-child(7){animation-delay:.65s}
.slide.enter>*:nth-child(8){animation-delay:.75s}
@keyframes pop{to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.spin-in{animation:spinin .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes spinin{from{transform:scale(.3) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- versus bar race ---------- */
.vs{width:100%;max-width:22em;display:flex;flex-direction:column;gap:16px;margin-top:6px}
.row{text-align:left}
.row .lbl{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px;font-size:1rem}
.track{height:26px;background:rgba(255,255,255,.22);border-radius:20px;overflow:hidden}
.fill{height:100%;width:0;border-radius:20px;transition:width 1.1s cubic-bezier(.2,.85,.2,1);
  background:linear-gradient(90deg,#fff,var(--peach))}
.fill.b{background:linear-gradient(90deg,var(--peach),#ffe08a)}
.winner{font-size:.92rem;font-weight:800;margin-top:4px}

/* ---------- 24h chart ---------- */
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;width:100%;max-width:23em;margin-top:6px}
.chart .bar{flex:1;background:linear-gradient(180deg,#fff,var(--peach));border-radius:4px 4px 0 0;
  height:2%;transition:height .9s cubic-bezier(.2,.85,.2,1);min-height:2px;position:relative}
.chart .bar.peak{background:linear-gradient(180deg,#fff,#ffd43b);box-shadow:0 0 14px #ffd43b}
.chart .bar .peaklbl{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:.7rem;font-weight:800;color:#ffd43b;white-space:nowrap}
.axis{display:flex;gap:3px;width:100%;max-width:23em}
.axis span{flex:1;text-align:center;font-size:.66rem;opacity:.7}

/* ---------- emoji leaderboard ---------- */
.board{width:100%;max-width:20em;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.eitem{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.16);
  border-radius:16px;padding:10px 14px}
.eitem .rank{font-weight:900;font-size:1.1rem;width:1.2em;opacity:.85}
.eitem .glyph{font-size:2rem}
.eitem .cnt{margin-left:auto;font-weight:800}

/* ---------- word cloud ---------- */
.cloud{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;align-items:center;
  max-width:24em;margin-top:6px}
.cloud span{font-weight:800;line-height:1;opacity:.92}

/* ---------- media chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.chip{background:rgba(255,255,255,.16);border-radius:18px;padding:14px 16px;min-width:6.5em}
.chip .n{font-size:1.8rem;font-weight:900}
.chip .t{font-size:.8rem;opacity:.9;margin-top:2px}

/* ---------- color swatches ---------- */
.swblock{width:100%;max-width:22em}
.swblock .who{font-weight:800;font-size:1.05rem;margin-bottom:8px;text-align:left}
.swrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.sw{width:52px;height:52px;border-radius:12px;border:2px solid rgba(0,0,0,.18);
  box-shadow:0 4px 14px rgba(0,0,0,.22);opacity:0;transform:scale(.4);
  animation:swpop .5s cubic-bezier(.2,.85,.3,1.3) forwards}
.swrow .sw:nth-child(1){animation-delay:.1s}
.swrow .sw:nth-child(2){animation-delay:.18s}
.swrow .sw:nth-child(3){animation-delay:.26s}
.swrow .sw:nth-child(4){animation-delay:.34s}
.swrow .sw:nth-child(5){animation-delay:.42s}
@keyframes swpop{to{opacity:1;transform:scale(1)}}

/* ---------- chat bubbles (first topic) ---------- */
.chatlog{width:100%;max-width:20em;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.bub{max-width:80%;padding:9px 13px;border-radius:16px;font-size:.95rem;line-height:1.3;text-align:left}
.bub.l{align-self:flex-start;background:rgba(255,255,255,.9);color:var(--ink);border-bottom-left-radius:5px}
.bub.r{align-self:flex-end;background:#7a1030;border-bottom-right-radius:5px}

/* ---------- days grid (setia tiap hari) ---------- */
.daysgrid{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:22em;margin:2px auto}
.dday{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.5)}
.dday.off{background:rgba(255,255,255,.22);box-shadow:none}

/* ---------- LDR route ---------- */
.route{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:22em;margin:6px 0}
.city{font-weight:800;font-size:1rem;line-height:1.3;text-align:center}
.city .pin{font-size:2.1rem;display:block}
.city small{display:block;opacity:.85;font-weight:600}
.rail{position:relative;flex:1;height:26px;margin:0 8px}
.rail::before{content:"";position:absolute;top:50%;left:0;right:0;height:0;
  border-top:3px dashed rgba(255,255,255,.65)}
.train{position:absolute;top:-4px;font-size:1.5rem;animation:choo 3.2s ease-in-out infinite}
@keyframes choo{0%{left:0;transform:scaleX(1)}
  48%{left:calc(100% - 1.4em);transform:scaleX(1)}
  52%{left:calc(100% - 1.4em);transform:scaleX(-1)}
  100%{left:0;transform:scaleX(-1)}}
.ldrrow{display:flex;justify-content:space-between;width:100%;max-width:20em;
  font-weight:700;background:rgba(255,255,255,.15);border-radius:14px;padding:10px 16px}

/* ---------- gift photo ---------- */
.giftpic{max-width:82%;max-height:52vh;width:auto;border-radius:18px;
  border:4px solid rgba(255,255,255,.85);box-shadow:0 12px 40px rgba(0,0,0,.4);
  object-fit:cover;animation:spinin .7s cubic-bezier(.2,.8,.2,1) both}
.giftpic.missing{display:flex;align-items:center;justify-content:center;
  min-width:70%;min-height:38vh;background:rgba(255,255,255,.12);font-size:3rem}

/* ---------- timeline (recap) ---------- */
.tl{width:100%;max-width:21em;display:flex;flex-direction:column;gap:12px;margin-top:6px;text-align:left}
.tl .ev{display:flex;gap:12px;align-items:flex-start}
.tl .dot{font-size:1.2rem;line-height:1.4}
.tl .txt{font-size:.92rem;line-height:1.35}
.tl .txt b{font-weight:800}

/* ---------- buttons / hint ---------- */
.btn{margin-top:12px;border:none;border-radius:30px;padding:14px 26px;font-size:1rem;font-weight:800;
  background:var(--white);color:var(--deep);box-shadow:var(--shadow);cursor:pointer}
.btn.ghost{background:rgba(255,255,255,.18);color:#fff}
.tapzone{position:fixed;top:0;bottom:0;width:35%;z-index:30;border:none;background:transparent;
  cursor:pointer;opacity:0}
#tapPrev{left:0}#tapNext{right:0;width:65%}
#mute{position:fixed;z-index:45;top:calc(env(safe-area-inset-top) + 18px);right:14px;
  width:38px;height:38px;border:none;border-radius:50%;background:rgba(0,0,0,.25);
  color:#fff;font-size:1.1rem;cursor:pointer;backdrop-filter:blur(4px)}
#hint{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 18px);left:0;right:0;z-index:35;
  text-align:center;font-size:.82rem;opacity:.75;pointer-events:none;
  animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:.85}}

@media (min-height:760px){.slide .huge{font-size:5.4rem}.slide h1{font-size:2.3rem}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition:none!important}}