:root{
  --pink:#ff6fa5;
  --pink-soft:#ffe1ee;
  --purple:#8b7bff;
  --purple-soft:#e9e4ff;
  --blue-sky:#7ec8f2;
  --yellow:#ffcf5c;
  --yellow-soft:#fff3d6;
  --ink:#2b2440;
  --ink-soft:#6f6785;
  --card-bg:#ffffff;
  --radius-lg:28px;
  --radius-md:18px;
  --font-display:'Fredoka', sans-serif;
  --font-body:'Quicksand', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:linear-gradient(180deg,#bfe3ff 0%,#dce9ff 22%,#f3e9ff 45%,#ffe7f3 70%,#fff3e0 100%);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Sky decorations ---------- */
.sky{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 30% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50% 25%, #fff, transparent),
    radial-gradient(2px 2px at 70% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 20% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 5%, #fff, transparent);
  opacity:.8;
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.4;} to{opacity:.9;}}
.floaty{position:absolute; font-size:2.4rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.08)); animation:bob 6s ease-in-out infinite;}
.floaty.astro{animation-duration:7s;}
.floaty.ball{animation-duration:5s;}
.floaty.rocket{font-size:2rem; animation-duration:8s;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-14px) rotate(6deg);}}

/* ---------- Topbar ---------- */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:1200px; margin:0 auto;
  flex-wrap:wrap; gap:12px;
}
.brand{font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--ink);}
.live-counter, .how-btn{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);
  padding:8px 16px; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.how-btn{cursor:pointer; border:none; font-family:var(--font-body);}
.live-sep{opacity:.45; font-weight:700;}
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:#ff5c8a; display:inline-block;
  box-shadow:0 0 0 rgba(255,92,138,.6); animation:pulse 1.8s infinite;
}
.pulse-dot.small{width:6px; height:6px; background:#2ecc71;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,92,138,.5);}
  70%{box-shadow:0 0 0 8px rgba(255,92,138,0);}
  100%{box-shadow:0 0 0 0 rgba(255,92,138,0);}
}

/* ---------- Hero ---------- */
.hero{position:relative; z-index:2; text-align:center; padding:24px 20px 8px; max-width:800px; margin:0 auto;}
.hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem, 4.4vw, 2.9rem); line-height:1.25; margin:0 0 14px;
}
.hero .accent{color:var(--pink);}
.tagline{font-size:1rem; color:var(--ink-soft); font-weight:600;}
.tagline .underline{text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:4px;}

.wish-tally{
  margin:22px auto 0; max-width:340px;
  padding:18px 28px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,225,238,.75));
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  box-shadow:0 14px 36px -18px rgba(255,111,165,.45);
  backdrop-filter:blur(8px);
  animation:tallyIn .7s ease both;
}
.wish-tally-num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 7vw, 3.2rem);
  font-weight:700;
  line-height:1;
  color:var(--pink);
  letter-spacing:-.02em;
  transition:transform .25s ease;
}
.wish-tally-num.pop{animation:tallyPop .35s ease;}
.wish-tally-label{
  margin-top:6px;
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
}
.wish-tally-sub{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--ink-soft);
}
@keyframes tallyIn{
  from{opacity:0; transform:translateY(10px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes tallyPop{
  0%{transform:scale(1);}
  45%{transform:scale(1.08);}
  100%{transform:scale(1);}
}

/* ---------- Content grid ---------- */
.content-grid{
  position:relative; z-index:2;
  max-width:1100px; margin:28px auto; padding:0 20px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:22px;
  align-items:start;
}
@media(max-width:860px){
  .content-grid{grid-template-columns:1fr;}
}

.card{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:26px 26px 24px;
  box-shadow:0 20px 50px -20px rgba(90,60,140,.25);
}
/* Left card keeps natural height; right card mirrors it and scrolls inside */
.live-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height:var(--live-card-height, auto);
}
.live-card .card-head,
.live-card .card-sub,
.live-card .hint.center{flex:0 0 auto;}
.live-card .live-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
.live-card .hint.center{margin-top:14px; padding-top:0;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card-head h2{font-family:var(--font-display); font-size:1.15rem; margin:0; font-weight:600;}
.card-sub{color:var(--ink-soft); font-size:.85rem; margin:4px 0 18px;}
.count-badge{
  background:var(--purple-soft); color:var(--purple); font-weight:700; font-size:.8rem;
  padding:4px 12px; border-radius:999px;
}
.live-badge{
  display:flex; align-items:center; gap:6px; background:#e9fff1; color:#1fa35c;
  font-weight:700; font-size:.78rem; padding:5px 12px; border-radius:999px;
}

/* wish list */
.wish-list{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px;}
.wish-list li{display:flex; align-items:center; gap:10px;}
.wish-num{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:#fff;
}
.wish-list input{
  flex:1; border:1.5px solid #f0edf7; background:#fbfaff; border-radius:12px;
  padding:11px 14px; font-family:var(--font-body); font-size:.9rem; color:var(--ink);
  outline:none; transition:border-color .15s, background .15s;
}
.wish-list input:focus{border-color:var(--pink); background:#fff;}
.wish-star{color:#e3dff0; font-size:1.1rem; cursor:pointer; transition:color .15s, transform .15s;}
.wish-star.active{color:var(--yellow); transform:scale(1.15);}

.actions-row{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.btn{
  font-family:var(--font-body); font-weight:700; font-size:.85rem;
  border:none; border-radius:14px; padding:11px 18px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-soft{background:var(--purple-soft); color:var(--purple); flex:1;}
.btn-soft-yellow{background:var(--yellow-soft); color:#b9860b; flex:1;}
.btn-generate{
  width:100%; padding:15px; font-size:.95rem; color:#fff; border-radius:16px;
  background:linear-gradient(90deg, var(--pink), var(--purple));
  box-shadow:0 12px 24px -10px rgba(139,123,255,.55);
}
.hint{text-align:center; font-size:.75rem; color:#ada6bf; margin:10px 0 0;}
.hint.center{margin-top:14px;}

/* live wishes */
.live-list{display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding-right:4px;}
.live-list::-webkit-scrollbar{width:6px;}
.live-list::-webkit-scrollbar-thumb{background:#eee5f7; border-radius:10px;}
.wish-item{
  display:flex; align-items:flex-start; gap:12px;
  background:#faf9ff; border-radius:16px; padding:12px 14px;
}
.wish-item.wish-ladder{
  animation:wishLadder .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes wishLadder{
  from{opacity:0; transform:translateY(-12px);}
  to{opacity:1; transform:translateY(0);}
}
.wish-avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff;
}
.wish-body{flex:1; min-width:0;}
.wish-row-top{display:flex; justify-content:space-between; gap:8px;}
.wish-anon{font-size:.72rem; font-weight:700; color:#a79fc2;}
.wish-time{font-size:.7rem; color:#c3bcd6; white-space:nowrap;}
.wish-text{font-size:.88rem; margin-top:2px; word-break:break-word;}
.wish-like{background:none; border:none; cursor:pointer; font-size:.95rem; color:#d8b7cb; align-self:flex-start;}
.wish-like.liked{color:var(--pink);}
.empty-state{text-align:center; color:#b9b2cc; padding:16px 10px; font-size:.9rem;}

/* how section */
.how-section{
  position:relative; z-index:2; max-width:1100px; margin:20px auto 10px; padding:26px 24px;
  background:linear-gradient(120deg, var(--yellow-soft), var(--pink-soft));
  border-radius:var(--radius-lg);
}
.how-section h2,
.how-section h3{font-family:var(--font-display); text-align:center; margin:0 0 20px; font-size:1.2rem;}
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center;}
@media(max-width:760px){ .how-grid{grid-template-columns:repeat(2,1fr);} }
.how-step{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-soft);}
.how-icon{
  width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; box-shadow:0 8px 16px -6px rgba(0,0,0,.12); margin-bottom:4px;
}
.how-step strong{color:var(--ink); font-size:.85rem;}
.made-with{text-align:center; margin-top:20px; font-weight:700; color:var(--ink-soft); font-size:.85rem; line-height:1.5;}

/* footer */
.footer{
  position:relative; z-index:2; text-align:center; padding:26px 20px 40px; color:var(--ink-soft); font-size:.85rem;
}
.social-row{display:flex; justify-content:center; gap:14px; margin-top:10px; font-size:1.3rem;}
.social-row a{text-decoration:none; filter:grayscale(0);}
.copyright{margin:16px 0 0; font-size:.75rem; color:#ada6bf; font-weight:600;}

/* modal / card */
.modal-overlay{
  position:fixed; inset:0; background:rgba(30,20,50,.55); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:20px; padding:16px; max-width:340px; width:100%; position:relative;}
.modal-close{
  position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; font-size:.9rem;
}
#cardCanvas{width:100%; border-radius:14px; display:block;}
.modal-actions{display:flex; gap:10px; margin-top:14px;}
.modal-actions .btn{flex:1;}

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; font-size:.85rem;
  z-index:60; opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1;}