/* ===================================================
   DESIGN SYSTEM — BB's Birthday Website
   Theme: Blue / Mint · 3D + Memory Match Edition
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --blue-1: #e0f4ff;
  --blue-2: #b3e3ff;
  --blue-3: #5bc4f5;
  --blue-4: #1a9fd4;
  --blue-5: #0d6ea0;
  --blue-6: #084d74;
  --mint-1: #e0fff5;
  --mint-2: #a8f0d8;
  --mint-3: #3ddbb4;
  --mint-4: #1ab898;
  --pink:    #ff8fab;
  --yellow:  #ffd166;
  --cream:   #fffef0;
  --dark:    #1a2a3a;
  --text:    #2c3e50;
  --muted:   #7b9aab;
  --white:   #ffffff;

  --font-fun:  'Pacifico', cursive;
  --font-body: 'Nunito', sans-serif;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-soft: 0 8px 32px rgba(91,196,245,0.22);
  --shadow-card: 0 4px 24px rgba(26,42,58,0.12);
}

/* ═══════════ RESET ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: linear-gradient(145deg,#d4edff 0%,#d4fff4 45%,#e8d4ff 100%);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
}
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; font-family: var(--font-body); }
.hidden { display: none !important; }
.muted  { color: var(--muted); font-size: 0.88em; }

/* ═══════════ PARTICLES ═══════════ */
#particles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.particle {
  position: absolute;
  animation: floatUp linear infinite;
  opacity: 0.55;
}
@keyframes floatUp {
  0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.65; }
  90%  { opacity: 0.35; }
  100% { transform: translateY(-10vh) rotate(380deg); opacity: 0; }
}

/* ═══════════ CONFETTI CANVAS ═══════════ */
#confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
}

/* ═══════════ NAV DOTS ═══════════ */
.nav-dots {
  position: fixed;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 100;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue-2);
  border: 2px solid var(--blue-3);
  transition: all 0.3s ease;
  padding: 0;
}
.dot.active, .dot:hover {
  background: var(--blue-4);
  transform: scale(1.5);
  box-shadow: 0 0 10px var(--blue-3);
}
.dot.locked {
  opacity: 0.38;
  cursor: not-allowed;
  border-color: #9ecae3;
  background: #d8edf8;
}
.dot.locked:hover {
  transform: scale(1.18);
  box-shadow: 0 0 8px rgba(158, 202, 227, 0.6);
}

/* ═══════════ PAGE WRAPPER ═══════════ */
.page {
  display: none;
  position: fixed; inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 16px 36px;
  background: linear-gradient(145deg,#d4edff 0%,#d4fff4 45%,#e8d4ff 100%);
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}
.page.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  min-height: 100%;
  z-index: 2;
  animation: pageFadeIn 0.35s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════ BUTTONS ═══════════ */
.btn-main, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-main {
  background: linear-gradient(135deg, var(--blue-3), var(--mint-3));
  color: var(--white);
  padding: 0 26px;
  border: none;
  box-shadow: 0 6px 20px rgba(91,196,245,0.42);
}
.btn-main:hover, .btn-main:active {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(91,196,245,0.55);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--blue-5);
  padding: 0 22px;
  border: 2px solid var(--blue-2);
  box-shadow: 0 3px 10px rgba(91,196,245,0.15);
}
.btn-ghost:hover, .btn-ghost:active {
  background: var(--blue-1);
  border-color: var(--blue-3);
  transform: translateY(-2px);
}
.nav-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 16px;
  width: 100%;
  max-width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}
.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(.34,1.56,.64,1) 0.4s backwards;
}
@keyframes bounceIn {
  from { transform: scale(0.6) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ═══════════ LABELS ═══════════ */
.eyebrow {
  font-size: 0.78rem; font-weight: 800;
  color: var(--mint-4);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 4px;
}
.section-title {
  font-family: var(--font-fun);
  font-size: clamp(1.3rem, 5vw, 2rem);
  color: var(--blue-5);
  margin-bottom: 6px;
  line-height: 1.2;
}
.section-sub {
  color: var(--muted);
  font-size: 0.9rem; line-height: 1.6;
  margin-bottom: 14px;
}


/* ══════════════════════════════════════════
   PAGE 1 — HERO  (3D Frog)
══════════════════════════════════════════ */
.hero-content {
  text-align: center;
  max-width: 440px; width: 100%;
  position: relative;
}

/* ── 3D Frog canvas wrapper (Natural, Frameless) ── */
.frog-scene-wrap {
  position: relative;
  width: clamp(240px, 70vw, 300px);
  height: clamp(230px, 68vw, 290px);
  margin: 0 auto 4px;
}

.frog-canvas {
  width: 100%; height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

/* Speech bubble */
.frog-badge {
  position: absolute;
  top: 10px; right: 8px;
  background: var(--white);
  border: 2.5px solid var(--blue-2);
  border-radius: 16px 16px 16px 4px;
  padding: 5px 12px;
  font-size: 0.82rem; font-weight: 800;
  color: var(--blue-4);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  animation: badgePop 0.5s cubic-bezier(.34,1.56,.64,1) 0.5s backwards;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 5;
}
@keyframes badgePop {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Drag hint - positioned cleanly below frog scene, never obstructs the frog! */
.frog-drag-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-5);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  padding: 4px 14px;
  border: 1.5px solid var(--blue-2);
  box-shadow: 0 2px 8px rgba(91, 196, 245, 0.15);
  transition: opacity 0.5s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 92%;
  position: relative;
}

/* Stars decoration */
.hero-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.hstar {
  position: absolute;
  left: var(--x); top: var(--y);
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  animation: starPulse 2.5s ease-in-out var(--d) infinite;
}
@keyframes starPulse {
  0%,100% { opacity: 0.5; transform: scale(1) rotate(-5deg); }
  50%      { opacity: 1;   transform: scale(1.3) rotate(5deg); }
}

/* ── Hero Text ── */
.hero-title {
  font-family: var(--font-fun);
  font-size: clamp(1.9rem, 9vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.title-wave {
  color: var(--blue-4);
  display: inline-block;
  animation: titleRock 1.4s ease-in-out infinite alternate;
}
@keyframes titleRock {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2deg); }
}
.title-name {
  background: linear-gradient(90deg, var(--blue-3), var(--mint-3), var(--blue-3));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
  font-size: 1.4em;
}
@keyframes shimmer { to { background-position: 200% center; } }

.title-confetti {
  position: absolute; top: -12px; right: -14px;
  font-size: 1.6rem;
  animation: spinBounce 2s ease-in-out infinite;
}
@keyframes spinBounce {
  0%,100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(18deg) scale(1.22); }
}
.hero-sub {
  font-size: clamp(0.88rem, 3vw, 1rem);
  line-height: 1.65; margin-bottom: 22px;
  color: var(--text); position: relative; z-index: 1;
}


/* ══════════════════════════════════════════
   PAGE 2 — COUNTDOWN
══════════════════════════════════════════ */
.countdown-content { text-align: center; max-width: 500px; width: 100%; }

.flip-clock {
  display: flex; gap: 6px;
  justify-content: center; align-items: flex-start;
  margin: 18px 0; flex-wrap: wrap;
}
.flip-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flip-card {
  background: linear-gradient(160deg, var(--blue-5), var(--blue-6));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: clamp(54px, 16vw, 76px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative; overflow: hidden;
  transition: transform 0.2s;
}
.flip-card:hover { transform: perspective(400px) rotateX(8deg) scale(1.05); }
.flip-card::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(255,255,255,0.1);
}
.flip-card span {
  font-family: var(--font-fun);
  font-size: clamp(1.4rem, 5.5vw, 2.2rem);
  color: var(--white); display: block; text-align: center; letter-spacing: 2px;
}
.flip-unit label {
  font-size: 0.63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--blue-4);
}
.flip-sep {
  font-family: var(--font-fun);
  font-size: clamp(1.4rem, 5.5vw, 2.2rem);
  color: var(--blue-4); padding-top: 10px;
}
.done-text {
  font-family: var(--font-fun);
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--blue-4);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.countdown-note {
  background: var(--blue-1);
  border-left: 4px solid var(--blue-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  font-size: 0.86rem; color: var(--blue-5); font-weight: 700;
  margin: 12px 0; text-align: left;
}


/* ══════════════════════════════════════════
   PAGE 3 — LETTER (CSS 3D Flip Envelope)
══════════════════════════════════════════ */
.letter-wrapper { text-align: center; max-width: 460px; width: 100%; margin: auto 0; }

.env-scene {
  perspective: 1400px;
  margin: 14px auto;
  max-width: min(340px, 90vw);
  width: 100%;
}
.env-card {
  width: 100%; max-width: 340px; height: 190px;
  position: relative; transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.25,0.8,0.25,1);
  transform: perspective(1400px) rotateX(5deg) rotateY(-8deg);
  filter: drop-shadow(0 18px 28px rgba(91,196,245,0.3));
  margin: 0 auto;
}
.env-card:hover {
  transform: perspective(1400px) rotateX(5deg) rotateY(-8deg) scale(1.04);
  filter: drop-shadow(0 24px 36px rgba(91,196,245,0.4));
}
.env-card.flipped {
  transform: perspective(1400px) rotateY(180deg) !important;
  filter: drop-shadow(0 18px 28px rgba(91,196,245,0.2));
}
.env-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; overflow: hidden;
}
.env-front {
  background: linear-gradient(135deg, var(--blue-1), var(--mint-1));
  border: 3px solid var(--blue-2);
}
.flap-top {
  position: absolute; top: 0; left: 0; right: 0; height: 85px;
  background: linear-gradient(155deg, var(--blue-3), var(--mint-3));
  clip-path: polygon(0 0, 50% 68%, 100% 0);
}
.flap-left {
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 95px 0 0 150px;
  border-color: transparent transparent transparent rgba(91,196,245,0.16);
}
.flap-right {
  position: absolute; bottom: 0; right: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 95px 150px 0 0;
  border-color: transparent rgba(91,196,245,0.16) transparent transparent;
}
.env-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
}
.env-seal { position: relative; display: flex; align-items: center; justify-content: center; }
.seal-emoji { font-size: 1.9rem; z-index: 1; animation: sealPulse 2s ease-in-out infinite; }
.seal-ring {
  position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(91,196,245,0.4);
  animation: sealRing 2s ease-in-out infinite;
}
@keyframes sealPulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.15)} }
@keyframes sealRing  { 0%,100%{transform:scale(1);opacity:0.7}50%{transform:scale(1.4);opacity:0} }
.env-hint {
  font-size: 0.78rem; font-weight: 800; color: var(--blue-4);
  background: rgba(255,255,255,0.82);
  padding: 4px 12px; border-radius: 18px;
  border: 1.5px solid var(--blue-2);
}
.env-back {
  background: var(--cream);
  border: 3px solid var(--blue-2);
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.letter-back-preview { width: 100%; text-align: left; }
.lb-date { font-size: 0.7rem; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.lb-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lb-line {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-2), var(--mint-2));
}
.l-full{width:100%}.l-short{width:50%}.l-med{width:72%}
.lb-sign { font-size: 1.1rem; text-align: right; }

/* ═══════════ CUTE STATIONERY LETTER PAPER ═══════════ */
.letter-paper {
  position: relative;
  background-color: #fffef9;
  /* Lined notebook paper texture with subtle pastel blue rules */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 28px,
    #e4eefa 28px,
    #e4eefa 29px
  );
  border-radius: 18px 18px 22px 6px;
  padding: 30px 20px 22px 36px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.03),
    0 16px 36px -6px rgba(40, 110, 160, 0.18),
    0 0 0 1px rgba(220, 235, 245, 0.9);
  max-width: 440px;
  width: 100%;
  margin: 16px auto 12px;
  animation: paperAppear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
  border-left: 3px solid #ffccd5; /* Classic cute pink notebook margin */
  box-sizing: border-box;
}

@keyframes paperAppear {
  0%   { transform: translateY(22px) scale(0.93); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Notebook Binder Punch Holes */
.paper-holes {
  position: absolute;
  left: 10px;
  top: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  pointer-events: none;
  z-index: 2;
}
.paper-hole {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #d8edf8;
  box-shadow: inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.85);
}

/* Cute Pastel MT Washi Tape at Top Center */
.washi-tape {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 126px;
  height: 26px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 182, 193, 0.88),
    rgba(255, 182, 193, 0.88) 8px,
    rgba(255, 242, 246, 0.92) 8px,
    rgba(255, 242, 246, 0.92) 16px
  );
  clip-path: polygon(
    0% 0%, 4% 50%, 0% 100%,
    100% 100%, 96% 50%, 100% 0%
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0.95;
  z-index: 3;
  pointer-events: none;
}

/* Cute Postage Stamp Badge */
.stamp-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  z-index: 2;
}
.stamp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #ff9ebb;
  background: #fff5f8;
  border-radius: 5px;
  padding: 3px 6px;
  box-shadow: 0 2px 6px rgba(255, 158, 187, 0.25);
  transform: rotate(3deg);
}
.stamp-heart { font-size: 0.85rem; line-height: 1; }
.stamp-post {
  font-size: 0.52rem;
  font-weight: 900;
  color: #e06085;
  letter-spacing: 0.6px;
  margin-top: 1px;
}
.stamp-date {
  font-size: 0.48rem;
  font-weight: 800;
  color: #8da2b5;
}
.stamp-wavy-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0.55;
}
.stamp-wavy-lines span {
  width: 18px;
  height: 2px;
  background: #ff9ebb;
  border-radius: 2px;
  transform: skewX(-20deg);
}

/* Cute Corner Sticker Badge */
.corner-sticker {
  position: absolute;
  bottom: 12px;
  left: 36px;
  background: linear-gradient(135deg, #ffd166, #ffb703);
  color: #573700;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(255, 183, 3, 0.35);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* Dog-ear folded corner */
.paper-fold {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, transparent 50%, #ede8d8 50%, #dfd9c5 100%);
  border-radius: 0 0 18px 0;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* Letter header & content layout */
.letter-content-inner {
  position: relative;
  z-index: 1;
}
.letter-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-right: 70px; /* Leave space so stamp does not cover text */
}
.letter-date-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--blue-5);
  background: rgba(91, 196, 245, 0.16);
  padding: 3px 9px;
  border-radius: 12px;
}
.letter-badge-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mint-4);
}
.letter-salutation {
  margin-bottom: 10px;
}
.salutation-highlight {
  font-family: var(--font-fun);
  font-size: 1.05rem;
  color: #0c5780;
  background: linear-gradient(120deg, rgba(255, 209, 102, 0.42) 0%, rgba(61, 219, 180, 0.28) 100%);
  padding: 2px 10px;
  border-radius: 6px;
  display: inline-block;
}
.letter-body {
  font-size: 0.9rem;
  line-height: 29px; /* Matches ruled line pitch perfectly */
  color: #243545;
  white-space: pre-wrap;
  min-height: 90px;
  font-weight: 600;
}
.letter-sign {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1.5px dashed rgba(91, 196, 245, 0.35);
}
.sign-text {
  font-weight: 800;
  color: #1a8a70;
  font-style: italic;
  font-size: 0.88rem;
}
.sign-doodle {
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}


/* ══════════════════════════════════════════
   PAGE 4 — MEMORY MATCH GAME
══════════════════════════════════════════ */
.game-content {
  text-align: center;
  max-width: 400px; width: 100%;
  position: relative;
}

/* ── HUD ── */
.mem-hud {
  display: flex; gap: 8px;
  justify-content: center; margin-bottom: 10px;
}
.mem-stat {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  min-width: 72px;
}
.mem-stat.highlight {
  background: linear-gradient(135deg, var(--blue-5), var(--blue-6));
}
.mem-stat.highlight .ms-label,
.mem-stat.highlight .ms-val { color: var(--white); }
.ms-label {
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
.ms-val {
  font-family: var(--font-fun);
  font-size: 1rem; color: var(--blue-5);
}

/* ── Memory Grid ── */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 2px;
}

/* ── Memory Cards ── */
.mem-card {
  aspect-ratio: 1;
  cursor: pointer;
  perspective: 500px;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.mem-card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  border-radius: var(--radius-sm);
}
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-card.matched .mem-card-inner { transform: rotateY(180deg); }

.mem-card-back, .mem-card-front {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}

/* Card back (mystery) */
.mem-card-back {
  background: linear-gradient(145deg, var(--blue-3), var(--mint-3));
  border: 2.5px solid var(--blue-4);
  box-shadow: 0 3px 10px rgba(91,196,245,0.3);
  transition: box-shadow 0.2s;
}
.mem-card:hover .mem-card-back {
  box-shadow: 0 5px 16px rgba(91,196,245,0.5);
}
.mem-back-icon { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

/* Card front (revealed) */
.mem-card-front {
  background: var(--white);
  border: 2.5px solid var(--blue-2);
  transform: rotateY(180deg);
  box-shadow: 0 3px 10px rgba(26,42,58,0.1);
}
.mem-emoji { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
.mem-label {
  font-size: clamp(0.52rem, 1.8vw, 0.66rem);
  font-weight: 800; color: var(--blue-4);
  text-align: center;
}

/* Matched state */
.mem-card.matched .mem-card-front {
  background: linear-gradient(135deg, var(--mint-1), #d4fff0);
  border-color: var(--mint-4);
  box-shadow: 0 0 16px rgba(61,219,180,0.4);
}
.mem-card.matched {
  animation: matchPop 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes matchPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Shake for wrong match */
.mem-card.shake { animation: shakeCard 0.45s ease; }
@keyframes shakeCard {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ── Match Toast ── */
.mem-toast {
  position: fixed;
  bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(28px);
  background: var(--white);
  border-radius: 50px;
  padding: 9px 22px;
  font-family: var(--font-body);
  font-weight: 800; font-size: 0.9rem;
  color: var(--blue-4);
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--blue-2);
  opacity: 0;
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
  z-index: 998;
  pointer-events: none;
  white-space: nowrap;
}
.mem-toast.mem-toast--miss { color: var(--muted); border-color: #e0e0e0; }
.mem-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Card sparkle ── */
.card-sparkle {
  position: fixed;
  font-size: 1rem;
  pointer-events: none; z-index: 997;
  animation: sparkleAnim 0.7s ease forwards;
}
@keyframes sparkleAnim {
  0%   { opacity: 0; transform: scale(0.4) translateY(0); }
  40%  { opacity: 1; transform: scale(1.2) translateY(-10px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-30px); }
}

/* ── Completion overlay ── */
.mem-complete {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  animation: overlayIn 0.4s ease;
  z-index: 10;
}
@keyframes overlayIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
.mem-complete-inner { text-align: center; padding: 24px 20px; }
.mc-emoji { font-size: 3rem; margin-bottom: 8px; }
.mc-title {
  font-family: var(--font-fun);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  color: var(--blue-5); margin-bottom: 8px;
}
.mc-stats { font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; }
.mc-rating { font-size: 0.95rem; font-weight: 700; color: var(--mint-4); margin-bottom: 16px; }


/* ══════════════════════════════════════════
   PAGE 5 — CELEBRATION (3D Cake)
══════════════════════════════════════════ */
.celebration-content {
  text-align: center;
  max-width: 420px; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}

/* ── 3D Cake canvas ── */
.cake-scene-wrap {
  position: relative;
  width: clamp(220px, 60vw, 300px);
  height: clamp(200px, 56vw, 275px);
  margin: 0 auto;
}
.cake-canvas {
  width: 100%; height: 100%;
  display: block;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.blow-hint {
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  animation: blinkHint 1.6s ease-in-out infinite;
  margin-top: 6px;
  pointer-events: none;
}
@keyframes blinkHint {
  0%,100%{opacity:1} 50%{opacity:0.3}
}

/* ── Wish Card ── */
.wish-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-soft);
  animation: wishPop 0.65s cubic-bezier(.34,1.56,.64,1) forwards;
  max-width: 360px; width: 100%;
  border-top: 4px solid var(--mint-3);
}
@keyframes wishPop {
  from { transform: scale(0.5) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.wish-emoji { font-size: 2rem; margin-bottom: 6px; }
.wish-title {
  font-family: var(--font-fun);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: var(--blue-5); margin-bottom: 10px;
}
.wish-text {
  font-size: 0.88rem; line-height: 1.85;
  color: var(--text); margin-bottom: 10px;
}
.wish-from {
  font-size: 0.84rem; font-weight: 700;
  color: var(--mint-4); font-style: italic;
}


/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--blue-2); border-radius: 4px; }


/* ═══════════ RESPONSIVE SMALL PHONE ═══════════ */
@media (max-height: 640px) {
  .page { align-items: flex-start; padding: 10px 14px; }
  .frog-scene-wrap { width: 160px; height: 160px; }
  .section-title { font-size: 1.2rem; }
  .hero-title { font-size: 1.8rem; }
  #game-canvas { height: 220px; }
  .cake-scene-wrap { height: 190px; }
  .mem-hud { margin-bottom: 6px; }
  .nav-btns { margin-top: 8px; }
}

/* ═══════════ RESPONSIVE MOBILE BUTTONS & FROG ═══════════ */
@media (max-width: 480px) {
  .nav-btns {
    gap: 8px;
  }
  .btn-main, .btn-ghost {
    height: 44px;
    font-size: 0.88rem;
    padding: 0 16px;
    gap: 6px;
  }
  /* 3 tombol di game page dibuat kompak & rapi */
  .game-nav-btns {
    gap: 6px;
  }
  .game-nav-btns .btn-main,
  .game-nav-btns .btn-ghost {
    height: 42px;
    font-size: 0.82rem;
    padding: 0 10px;
    gap: 4px;
  }
  .frog-drag-hint {
    font-size: 0.68rem;
    padding: 3px 10px;
  }
}

@media (max-width: 375px) {
  .nav-btns {
    gap: 6px;
  }
  .btn-main, .btn-ghost {
    height: 40px;
    font-size: 0.82rem;
    padding: 0 12px;
  }
  .game-nav-btns .btn-main,
  .game-nav-btns .btn-ghost {
    height: 38px;
    font-size: 0.76rem;
    padding: 0 7px;
  }
  .frog-scene-wrap {
    width: 220px;
    height: 210px;
  }
}

/* ═══════════ COUNTDOWN LOCK & TOAST STYLES ═══════════ */
.btn-locked {
  background: linear-gradient(135deg, #a4ccdf, #a8d5cc) !important;
  color: #1a4258 !important;
  box-shadow: 0 4px 14px rgba(160, 200, 220, 0.45) !important;
  cursor: pointer;
  opacity: 0.88;
}
.btn-locked:hover, .btn-locked:active {
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: 0 6px 18px rgba(160, 200, 220, 0.6) !important;
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake {
  animation: shakeAnim 0.4s ease-in-out !important;
}

/* Cute Locked Toast */
.locked-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 36, 52, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 0 1.5px rgba(91, 196, 245, 0.35);
  z-index: 99999;
  max-width: min(440px, 92vw);
  width: max-content;
  animation: toastPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
@keyframes toastPop {
  from { transform: translateX(-50%) translateY(24px) scale(0.9); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.lt-icon {
  font-size: 1.45rem;
  animation: lockWiggle 1.4s ease-in-out infinite;
  line-height: 1;
}
@keyframes lockWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}
.lt-content {
  text-align: left;
  line-height: 1.35;
}
.lt-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: #5bc4f5;
}
.lt-desc {
  font-size: 0.76rem;
  color: #d8edf8;
  margin-top: 2px;
}