:root{
  --bg:#f7f6f5;
  --card:#ffffff;
  --muted:#98a0ad;
  --accent-1:#2b8f8a;
  --accent-2:#f3d6b4;
  --accent-3:#55606a;
  --radius:14px;
  --shadow-soft: 0 8px 20px rgba(18,24,30,0.08);
  --shadow-strong: 0 12px 30px rgba(18,24,30,0.12);
  --glass: rgba(255,255,255,0.55);
  --mobile-padding:18px;
  --font-head: 'Playfair Display', serif;
  --font-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:linear-gradient(180deg,var(--bg),#fff);
  color:var(--accent-3);
  -webkit-font-smoothing:antialiased;
  padding:20px;
}
.screen{ min-height:calc(100vh - 40px); display:flex; align-items:center; justify-content:center; padding:var(--mobile-padding); }
.center-content{display:flex;align-items:center;justify-content:center;flex-direction:column}
.card{ width:100%; max-width:420px; background:linear-gradient(180deg, rgba(255,255,255,0.86), rgba(250,250,250,0.98)); border-radius:calc(var(--radius) + 2px); box-shadow:var(--shadow-soft); padding:18px; text-align:center; transform-origin:center; animation:fadeInScale 420ms ease; }
.card img{ width:100%; height:auto; border-radius:12px; display:block; user-select:none; pointer-events:none; }
.cover-text{ margin-top:12px; }
#coverTitle {
    margin-bottom: 6px;
}

#coverSubtitle {
    margin-top: 0;
}

.cover-text {
    margin-bottom: 28px;
    text-align: center;
    animation: fadein 0.8s ease;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* controls + spacing */
.controls{margin-top:12px; display:flex; gap:12px; justify-content:center}
.btn{ padding:12px 16px; border-radius:999px; border:none; font-weight:700; cursor:pointer; transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, opacity .12s ease; box-shadow:none; font-family:var(--font-body); display:inline-flex; align-items:center; gap:10px; justify-content:center; min-height:44px; -webkit-tap-highlight-color: transparent; user-select:none; }

/* primary */
.btn.primary{ background: linear-gradient(90deg, rgba(43,143,138,0.14), rgba(255,255,255,0.02)); color:var(--accent-3); border: 1px solid rgba(43,143,138,0.12); padding:10px 14px; min-width:140px; box-shadow: 0 6px 18px rgba(43,143,138,0.06); }

/* yeay */
.btn.yeay{ background: linear-gradient(180deg, #ffffff, rgba(243,214,180,0.08)); color:var(--accent-3); border: 1px solid rgba(34,40,47,0.06); padding:10px 14px; min-width:120px; box-shadow: var(--shadow-soft); position:relative; overflow:visible; letter-spacing:0.2px; font-weight:800; }
.btn.yeay::before{ content:""; display:inline-block; width:34px; height:34px; border-radius:50%; margin-right:6px; vertical-align:middle; background: linear-gradient(135deg, var(--accent-1), #6fcbbf); box-shadow: 0 6px 14px rgba(43,143,138,0.14), inset 0 -3px 8px rgba(255,255,255,0.18); transform:translateY(0); }
.btn.yeay:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong) }
.btn.yeay:active{ transform: translateY(-2px) scale(.995); }

/* when yeay transforms to emoji state, smaller circular appearance */
.btn.yeay.emoji {
  padding:8px 10px;
  min-width:56px;
  border-radius:12px;
  font-size:18px;
  background:transparent;
  border: none;
  box-shadow:none;
}
.btn.yeay.emoji::before{ display:none; }

/* yeay small wrap: add spacing from open button */
.yeay-small-wrap{ margin-top:12px; display:flex; justify-content:center; }

/* memory / other layout */
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:120; pointer-events:none; }
.hidden{display:none}
#countdownOverlay{ background:rgba(0,0,0,0.45); transition:background .5s ease; pointer-events:auto; }
.count-number{ font-size:clamp(72px, 18vw, 220px); color:white; font-weight:900; letter-spacing: -4px; transform:translateY(0); animation:pop 700ms ease; text-shadow: 0 6px 40px rgba(0,0,0,0.6); }
.memory-wrap{ width:100%; max-width:760px; display:flex; flex-direction:column; gap:18px; align-items:center; padding:14px; }
.photo-area{ width:100%; max-width:640px; border-radius:14px; overflow:hidden; position:relative; box-shadow:var(--shadow-soft); background:linear-gradient(180deg,#fff, #fbfbfc); }
.photo-area img{ width:100%; display:block; height:auto }
.typewriter-area{ width:100%; max-width:640px; background:rgba(255,255,255,0.6); padding:14px; border-radius:12px; box-shadow:var(--shadow-soft); }
.greeting{ font-family:var(--font-body); font-size:1.05rem; line-height:1.6; min-height:3.5rem; white-space:pre-wrap; font-weight:500; text-align:center; letter-spacing:0.1px; color:var(--accent-3); }
.thumbnails{ display:flex; gap:8px; width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.thumb{ width:84px; height:84px; min-width:84px; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(16,24,40,0.06); cursor:pointer; flex:0 0 auto; }
.thumb img{ width:100%; height:100%; object-fit:cover }
.action-column{ display:flex; gap:12px; flex-direction:column; align-items:center; margin-top:6px; }

/* replay button style */
#replayBtn{ min-width:150px; border-radius:12px; padding:10px 16px; background: linear-gradient(180deg,#ffffff,#f3f3f3); border:1px solid rgba(0,0,0,0.06); box-shadow:0 10px 24px rgba(0,0,0,0.06); font-weight:700; }

/* small screens */
@media (max-width:420px){
  .thumb{ width:64px; height:64px; min-width:64px }
  .card{ padding:12px }
  #coverTitle{ font-size:1.25rem }
  .count-number{ font-size:clamp(64px, 22vw, 180px) }
}

/* canvas overlay container */
#flyingLayer { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }

/* simple utilities */
@keyframes fadeInScale { from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }
@keyframes pop { 0% { transform: scale(.8); opacity:0 } 60% { transform: scale(1.07); opacity:1 } 100% { transform:scale(1); opacity:1 } }