/* ==========================================
   Khyati 6th Birthday - Ultra Animated Theme
   Mobile-first, accessible, and layered z-index system
   ========================================== */
:root {
  --brand: #C026D3; /* fuchsia-600 */
  --brand-700: #A21CAF; /* fuchsia-700 */
  --accent: #F472B6; /* pink-400 */
  --brand-50: #fdf4ff; /* fuchsia-50 */
  --brand-100: #fae8ff; /* fuchsia-100 */
  --ink: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --card: rgba(255,255,255,.85);
  --ring: rgba(192,38,211,.25);
  --soft: #f5d0fe; /* fuchsia-200 */

  /* z-index scale */
  --z-bg: 0;           /* background gradient */
  --z-particles: 1;    /* bg particle canvas */
  --z-confetti: 15;     /* confetti canvas above content but click-through */
  --z-base: 10;        /* content base */
  --z-overlay: 20;     /* sticky headers, pills */
  --z-modal: 50;       /* future modals */
}

html, body { height: 100%; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }
.font-paytone { font-family: 'Paytone One', cursive; }

/* Layered canvases fixed full-screen */
#bg-particles, #confetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#bg-particles { z-index: var(--z-particles); }
#confetti-canvas { z-index: var(--z-confetti); }

/* Header and hero */
.site-header { position: relative; z-index: var(--z-base); }
.logo-badge { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--accent));
  display:flex; align-items:center; justify-content:center; color: #fff; box-shadow: 0 10px 24px rgba(192,38,211,.35); }
.nav-link { padding:.5rem .75rem; border-radius: .75rem; color: var(--ink); font-weight:600; }
.nav-link:hover { background: var(--brand-100); }

.hero { position: relative; }
.hero-card { position: relative; height: 280px; border-radius: 20px; background: var(--card); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; }
.hero-blob { position: absolute; width: 180%; height: 180%; top:-40%; left:-40%; background: radial-gradient( circle at 30% 30%, rgba(240,171,252,.55), transparent 50%),
  radial-gradient(circle at 70% 70%, rgba(192,38,211,.35), transparent 50% ); filter: blur(20px); animation: floatBlob 14s ease-in-out infinite; }
.hero-emoji { width: 140px; height: 140px; transform: translateY(0); animation: floatY 4s ease-in-out infinite; }
.sparkles::before { content: "✨"; position: absolute; font-size: 28px; animation: sparkle 2.2s linear infinite; }
@keyframes floatBlob { 0%,100%{ transform: translate(0,0) rotate(0); } 50%{ transform: translate(6%, -4%) rotate(8deg); } }
@keyframes floatY { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes sparkle { 0%{ transform: translate(-40px, -10px) rotate(0); opacity:.4;} 50%{ transform: translate(20px, 10px) rotate(20deg); opacity:1;} 100%{ transform: translate(60px, -10px) rotate(0); opacity:.4;} }

/* Utility */
.text-brand { color: var(--brand); }
@keyframes pulseKF { 0%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.03); opacity:1;} 100%{ transform: scale(1); opacity:.8;} }
.pulse { animation: pulseKF .8s ease; }

/* Sections */
.section-card { position: relative; z-index: var(--z-base); margin: 2rem 0; }
.section-head { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; }

.card { background: var(--card); backdrop-filter: blur(8px); border: 1px solid var(--soft); border-radius: 1rem; padding: 1rem; box-shadow: 0 20px 60px rgba(192,38,211,.08); }
.form { position: relative; }
.form-field { display:flex; flex-direction:column; gap:.35rem; }
.form-field > span { font-size:.9rem; color: var(--muted); }
.input, textarea, input[type="text"], input[type="number"], select {
  width: 100%; padding: .65rem .8rem; border-radius: .75rem; border:1px solid var(--soft); outline:none; background:#fff;
}
.input.small, .btn-primary.small, .btn-secondary.small, .btn-ghost.small { padding:.4rem .6rem; font-size:.85rem; border-radius:.5rem; }

.form-feedback { font-size:.85rem; color: var(--muted); }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 0.75rem; background: var(--brand); color: #fff; padding: .6rem 1rem; box-shadow: 0 10px 20px rgba(240, 171, 252, .6); transition: background .2s ease, transform .05s ease, box-shadow .2s ease; }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 14px 28px rgba(240,171,252,.7); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { display:inline-flex; align-items:center; gap:.5rem; background: linear-gradient(180deg, #fff, #fdfcff); color: var(--brand); border:1px solid var(--soft); padding:.6rem 1rem; border-radius:.75rem; box-shadow: 0 6px 14px rgba(192,38,211,.08); }
.btn-secondary:hover { border-color: #e9d5ff; }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; color: var(--brand-700); background: transparent; border:1px dashed var(--soft); padding:.55rem .9rem; border-radius:.75rem; }

/* Pagination */
.pagination { display:flex; align-items:center; gap:.5rem; }
.page-info { font-size:.85rem; color: var(--muted); }

/* Wishes grid */
.wish-card { position:relative; background:#fff; border:1px solid var(--soft); border-radius: 1rem; padding: .9rem; box-shadow: 0 10px 28px rgba(2,6,23,.08); display:flex; gap:.75rem; animation: rise .4s ease; }
.wish-card .avatar { width: 44px; height: 44px; border-radius: .9rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
.wish-card .name { font-weight:600; }
.wish-card .msg { color:#334155; }
@keyframes rise { from { transform: translateY(8px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* Recorder */
.video-stage { position:relative; }
.sticker-layer { position:absolute; inset:0; pointer-events:auto; z-index: 2; }
.stage-overlay { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:.5rem; z-index:3; }
.stage-overlay.top { top:0; }
.stage-overlay.bottom { bottom:0; }
.pill { display:inline-flex; align-items:center; gap:.35rem; background: rgba(0,0,0,.55); color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.8rem; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.pill.small { font-size:.7rem; }
.live-pill i { color:#ef4444; }
.controls { display:flex; align-items:center; gap:.5rem; }
.btn-record { background:#ef4444; color:#fff; border-radius:.75rem; padding:.5rem .9rem; box-shadow:0 10px 24px rgba(239,68,68,.35); display:flex; align-items:center; gap:.5rem; }
.btn-stop { background:#111827; color:#fff; border-radius:.75rem; padding:.5rem .9rem; opacity:.8; }
.timer { color:#fff; font-weight:700; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.grid-overlay { position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, transparent 1px 20px), repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 1px, transparent 1px 20px); z-index:1; }

/* Stickers */
.sticker-palette { display:flex; flex-wrap:wrap; gap:.5rem; }
.sticker { font-size: 28px; line-height:1; background:#fff; border:1px solid var(--soft); border-radius:.75rem; padding:.4rem .55rem; transition: transform .15s ease; }
.sticker:active { transform: scale(.95); }
.draggable { position:absolute; cursor:grab; pointer-events:auto; }

/* Tabs */
.tabs { display:flex; gap:.5rem; background:#fff; border:1px solid var(--soft); padding:.35rem; border-radius:.75rem; }
.tab { flex:0 0 auto; padding:.45rem .8rem; border-radius:.6rem; font-weight:600; color:var(--muted); }
.tab.active { background: var(--brand-100); color: var(--brand-700); }
.tab-panels { margin-top:.75rem; }

/* Memory game */
.memory-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.5rem; }
.memory-card { position:relative; padding-top:100%; perspective: 800px; }
.memory-inner { position:absolute; inset:0; transform-style:preserve-3d; transition: transform .35s ease; }
.memory-inner.flipped { transform: rotateY(180deg); }
.memory-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:36px; background:#fff; border:1px solid var(--soft); border-radius:.75rem; backface-visibility:hidden; }
.memory-face.back { transform: rotateY(180deg); }
.score { color:var(--muted); font-weight:600; }

/* Balloon game */
#balloon-canvas { background: linear-gradient(180deg, #dbeafe, #e9d5ff); }
.game-overlay { position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:space-between; padding:.5rem; pointer-events:none; }
.game-overlay .pill, .game-overlay .btn-primary { pointer-events:auto; }

/* Responsive */
@media (max-width: 640px){
  .hero-card { height: 220px; }
  .memory-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px){
  .hero-card { height: 340px; }
}