/* Amaya's Dollhouse — calm pastel-goth (Kuromi-friendly), autism-first.
   Commandments: calm by default (4), stable layout (1), 64px+ touch targets,
   honour prefers-reduced-motion. ui-rounded = SF Pro Rounded on iPad. */

:root {
  --bg: #faf6f1;            /* warm cream */
  --bg-soft: #f3ecf5;       /* whisper lilac */
  --ink: #4a3b5c;           /* deep plum — text */
  --ink-soft: #6b5e7d;      /* ≥5.1:1 on every app background (WCAG AA small text) */
  --lavender: #c9bce4;
  --pink: #f2c6d4;
  --mint: #c7e3d4;
  --butter: #f7e3b5;
  --card: #ffffff;
  --shadow: 0 4px 14px rgba(74, 59, 92, 0.10);
  --radius: 24px;
  --tap: 64px;              /* minimum touch target */
  --font: ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-scale: 1;
  --es: #9a5274;            /* spanish tint — consistent everywhere; ≥4.7:1 AA */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }   /* beat any class display rule */
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
body {
  font-family: var(--font);
  font-size: calc(18px * var(--font-scale));
  background: var(--bg);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

/* ── screens ───────────────────────────── */
.screen { display: none; min-height: 100dvh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.screen.is-active { display: flex; flex-direction: column; }

.screen-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; min-height: var(--tap);
}
.screen-header h2 { margin: 0; font-size: 1.35em; flex: 1; }
.es-tint { color: var(--es); }

.back-btn {
  width: var(--tap); height: var(--tap);
  font-size: 28px; border: none; border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
}

/* ── home ──────────────────────────────── */
.home-header { text-align: center; padding: 18px 0 6px; }
.wordmark { margin: 0; font-size: 1.7em; letter-spacing: 0.5px; }
.wordmark-heart { color: var(--es); }

.schedule-strip {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px; margin: 10px auto; max-width: 680px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sched-step {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px; padding: 10px 8px; border-radius: 18px;
  font-size: 0.78em; color: var(--ink-soft);
  border: 3px solid transparent;
}
.sched-step .sched-icon { font-size: 30px; }
.sched-step.is-now { border-color: var(--lavender); background: var(--bg-soft); color: var(--ink); }
.sched-step.is-done { opacity: 0.45; }
.sched-step.is-done .sched-icon::after { content: " ✓"; color: #6aa882; font-size: 0.8em; }
.sched-here { font-size: 0.72em; color: var(--es); font-weight: 700; height: 1.2em; }
.sched-arrow { color: var(--lavender); font-size: 22px; }

.dollhouse {
  flex: 1; display: grid; gap: 16px; align-content: center;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 1020px; width: 100%; margin: 0 auto; padding: 10px 0 20px;
}
@media (max-width: 640px) { .dollhouse { grid-template-columns: 1fr 1fr; } }
.room {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 180px; border: none; cursor: pointer;
  border-radius: 28px 28px var(--radius) var(--radius);
  box-shadow: var(--shadow); font-family: inherit; color: var(--ink);
  padding: 24px 12px;
}
.room--watch { background: linear-gradient(180deg, var(--pink), #fbe9ef); }
.room--songs { background: linear-gradient(180deg, #f7d8b5, #fcefe0); }
.room--words { background: linear-gradient(180deg, var(--lavender), #ece6f7); }
.room--salon { background: linear-gradient(180deg, #f5c1da, #fce8f2); }
.room--draw  { background: linear-gradient(180deg, var(--mint), #e9f5ee); }
.room-icon { font-size: 64px; }
.room-name { font-size: 1.25em; font-weight: 700; display: flex; flex-direction: column; align-items: center; }
.room-name small { font-weight: 600; color: var(--es); font-size: 0.72em; }

.home-footer { display: flex; justify-content: center; padding: 8px 0 18px; }
.pill-btn {
  min-height: var(--tap); padding: 10px 24px; border: none; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); color: var(--ink);
  font-family: inherit; font-size: 1em; font-weight: 700; cursor: pointer;
}

/* ── big buttons (shared) ─────────────── */
.big-btn {
  min-height: var(--tap); padding: 12px 22px; border: none; border-radius: 22px;
  font-family: inherit; font-size: 1.05em; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; background: var(--card);
}
.again-btn { background: var(--butter); }
.done-btn  { background: var(--mint); }
.hear-btn  { background: var(--pink); }
.lang-btn, .lang-chip {
  background: var(--bg-soft); border: 3px solid var(--lavender);
  min-height: var(--tap); border-radius: 22px; padding: 10px 18px;
  font-family: inherit; font-size: 1em; font-weight: 800; color: var(--ink); cursor: pointer;
}

/* ── watch ────────────────────────────── */
.video-grid {
  display: grid; gap: 16px; padding: 10px 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.video-card {
  border: none; padding: 0; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; cursor: pointer; font-family: inherit;
  text-align: left; color: var(--ink);
}
.video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--bg-soft); }
.video-card .vc-meta { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.vc-franchise { font-size: 22px; }
.vc-title { font-size: 0.92em; font-weight: 700; line-height: 1.25; }
.vc-langs { margin-left: auto; font-size: 0.7em; font-weight: 800; color: var(--es); white-space: nowrap; }

.player-stage { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.player-frame {
  position: relative; width: 100%; max-width: 960px; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
  background: #1d1726; box-shadow: var(--shadow);
}
.player-frame iframe, .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #1d1726; }
.family-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16/9; font-size: 56px;
  background: linear-gradient(180deg, var(--lavender), var(--pink));
}
.player-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── words ────────────────────────────── */
.word-packs {
  display: grid; gap: 16px; padding: 10px 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.pack-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 150px; justify-content: center; border: none; cursor: pointer;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  font-family: inherit; color: var(--ink);
}
.pack-card .pack-icon { font-size: 46px; }
.pack-card .pack-title { font-weight: 800; }
.pack-card .pack-title-es { color: var(--es); font-size: 0.85em; font-weight: 700; }
.pack-card .pack-ping { font-size: 0.75em; color: var(--ink-soft); }

.word-game { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 24px; }
.word-target { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.word-emoji { font-size: 84px; }
.word-slots { display: flex; gap: 10px; }
.slot {
  width: 64px; height: 76px; border-radius: 16px;
  border: 3px dashed var(--lavender); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: transparent;
}
.slot .ghost { color: #d9d2e6; }
.slot.is-filled { border-style: solid; background: var(--card); color: var(--ink); }
.slot.is-lit { background: var(--butter); }   /* karaoke highlight */
.word-caption { font-size: 1.2em; font-weight: 700; min-height: 1.4em; }
.word-caption .cap-es { color: var(--es); }

.letter-pool { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; min-height: 90px; }
.letter {
  width: 72px; height: 80px; border-radius: 18px; border: none;
  background: var(--card); box-shadow: var(--shadow);
  font-family: inherit; font-size: 42px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.letter.is-dragging { opacity: 0.85; transform: scale(1.15); position: fixed; z-index: 50; pointer-events: none; }
.letter.is-used { visibility: hidden; }

.word-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.catch-progress { display: flex; gap: 8px; font-size: 26px; min-height: 34px; }
.catch-progress .got { opacity: 1; } .catch-progress .not { opacity: 0.25; }

/* ── salon ────────────────────────────── */
.salon-picker {
  display: grid; gap: 16px; padding: 10px 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.salon-card .salon-mini { display: flex; align-items: center; justify-content: center; height: 110px; }
.mini-art { max-height: 110px; max-width: 100%; object-fit: contain; }
.salon-stage { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.salon-steps {
  display: flex; justify-content: center; gap: 6px; padding: 10px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.salon-steps .sched-step { min-width: 64px; padding: 6px; }
.salon-floor { flex: 1; display: flex; gap: 14px; min-height: 0; align-items: stretch; }
.salon-char {
  flex: 1.2; position: relative; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; padding: 10px;
  touch-action: none;
}
.brush-cursor {
  position: absolute; font-size: 40px; pointer-events: none; display: none; z-index: 5;
}
.portrait-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
.portrait-art { max-height: 48vh; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(74,59,92,0.18)); }
.sticker-layer { position: absolute; top: 2%; right: 14%; width: 26%; pointer-events: none; }
.bow-sticker { width: 100%; filter: drop-shadow(0 2px 4px rgba(74,59,92,0.3)); }
.wardrobe-rail { display: flex; gap: 14px; justify-content: center; min-height: 64px; padding-top: 6px; }
.rail-item { height: 62px; animation: pop 0.6s ease; }
.closeup { position: relative; width: 100%; background: var(--card); border-radius: 18px; padding: 8px; touch-action: none; }
.closeup-svg { width: 100%; max-height: 30vh; display: block; }
.tray-tools { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; width: 100%; padding-top: 10px; }
.swatch-glyph { font-size: 26px; margin-right: 4px; }
.swatch-sm { width: 18px; height: 18px; }
#salon-char { flex-direction: column; }
.salon-side { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.salon-instruction { font-size: 1.25em; font-weight: 800; margin: 0; text-align: center; }
.salon-tray {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
  background: var(--bg-soft); border-radius: var(--radius); padding: 16px; min-height: 100px;
}
.tray-hint { width: 100%; text-align: center; margin: 0; color: var(--ink-soft); font-weight: 700; }
.salon-swatch { background: var(--card); }
.salon-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) { .salon-floor { flex-direction: column; } .salon-char svg { max-height: 42vh; } }

/* ── sticker book ─────────────────────── */
.sticker-book {
  display: grid; gap: 16px; padding: 10px 0 24px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.sticker {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 10px; text-align: center;
}
.sticker .st-emoji { font-size: 52px; }
.sticker.is-locked .st-emoji { filter: grayscale(1); opacity: 0.3; }
.sticker .st-name { font-weight: 800; font-size: 0.9em; }
.sticker .st-emotion { font-size: 0.78em; color: var(--ink-soft); }
.sticker .st-emotion b { color: var(--es); }

/* my friends: the collect-them-all book */
.book-heading { width: 100%; margin: 18px 0 4px; font-size: 1.1em; grid-column: 1 / -1; }
.book-heading small { color: var(--ink-soft); font-weight: 700; }
.friends-grid {
  grid-column: 1 / -1;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.friend-card { padding: 12px 6px; }
.friend-card .st-art { height: 70px; }

/* ── draw ─────────────────────────────── */
.screen--draw { background: #2a2433; color: #f0eaf6; }
.screen--draw .screen-header h2 { color: #f0eaf6; }
.draw-wrap { flex: 1; display: flex; gap: 12px; min-height: 0; padding-bottom: 14px; }
.draw-tools {
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: rgba(255,255,255,0.07); border-radius: var(--radius);
  align-self: flex-start;
}
.brush-row { display: flex; flex-direction: column; gap: 8px; }
.brush-row--special { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 8px; }
@media (min-width: 700px) { .brush-row { flex-direction: column; } }
.tool-btn {
  width: var(--tap); height: var(--tap); border-radius: 18px; border: 3px solid transparent;
  background: rgba(255,255,255,0.10); font-size: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tool-btn.is-on { border-color: var(--butter); background: rgba(255,255,255,0.18); }
.swatch { width: 34px; height: 34px; border-radius: 50%; display: block; }
.dot { background: #f0eaf6; border-radius: 50%; display: block; }
.dot-s { width: 8px; height: 8px; } .dot-m { width: 16px; height: 16px; } .dot-l { width: 28px; height: 28px; }
.canvas-stack {
  flex: 1; min-width: 0; position: relative; border-radius: var(--radius);
  background: #221c2e; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.07);
}
.canvas-stack.paper { background: #fdf9f2; box-shadow: inset 0 0 0 2px rgba(74,59,92,0.08); }
#draw-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none;
}
.draw-underlay {
  position: absolute; inset: 0; margin: auto;
  max-width: 86%; max-height: 86%; object-fit: contain;
  opacity: 0.3; pointer-events: none;
}
.draw-overlay {
  /* colouring-book lines sit ABOVE her strokes — she colours "inside" them */
  position: absolute; inset: 0; margin: auto;
  max-width: 86%; max-height: 86%; object-fit: contain;
  pointer-events: none; z-index: 2;
}
.ref-panel {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 10px; background: rgba(255,255,255,0.07); border-radius: var(--radius);
  align-self: flex-start; max-width: 200px;
}
.canvas-stack.paper ~ .ref-panel, .screen--draw .ref-panel { color: #f0eaf6; }
.ref-panel img { width: 170px; max-height: 220px; object-fit: contain; background: #fff; border-radius: 14px; padding: 6px; }
.ref-panel .big-btn { width: 100%; }
.ref-panel .big-btn.is-on { outline: 3px solid var(--butter); }
.friend-picker {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.friend-picker .pack-card { background: #fff; min-height: 170px; padding: 10px; }
.friend-picker .mini-art { max-height: 100px; max-width: 100%; object-fit: contain; }
.gallery {
  position: fixed; inset: 0; background: #2a2433ee; z-index: 60;
  display: grid; gap: 14px; padding: 70px 20px 20px; overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start;
}
.gallery img { width: 100%; border-radius: 16px; background: #221c2e; }
.gallery .gallery-close {
  position: fixed; top: 12px; right: 16px; z-index: 61;
}

/* ── goodbye ──────────────────────────── */
.screen--goodbye { align-items: center; justify-content: center; background: var(--bg-soft); }
.goodbye-card {
  text-align: center; background: var(--card); border-radius: 32px;
  box-shadow: var(--shadow); padding: 40px 50px; max-width: 520px;
}
.goodbye-emoji { font-size: 72px; }
.goodbye-photo { max-width: 240px; max-height: 180px; object-fit: cover; border-radius: 18px; margin: 8px auto; display: block; box-shadow: var(--shadow); }
.stamp-photo { border-radius: 14px; object-fit: cover; width: 100px; height: 100px; }
.goodbye-next { font-size: 1.1em; color: var(--ink-soft); }
.goodbye-wave { color: var(--es); letter-spacing: 8px; margin-top: 10px; }

/* ── transition veil ──────────────────── */
.transition-veil {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(74, 59, 92, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.veil-card {
  background: var(--card); border-radius: 32px; box-shadow: var(--shadow);
  padding: 34px 44px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 420px; text-align: center;
}
.count-disc { width: 120px; height: 120px; transform: rotate(-90deg); }
.disc-bg { fill: none; stroke: var(--bg-soft); stroke-width: 12; }
.disc-fill {
  fill: none; stroke: var(--lavender); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 326.7; /* 2πr, r=52 */
}
.veil-text { margin: 0; font-size: 1.15em; font-weight: 700; }

/* ── celebration: the ONE celebration ─── */
.celebration {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.celebrate-burst { display: flex; gap: 14px; font-size: 44px; }
.celebrate-burst span { animation: pop 1.6s ease both; }
.celebrate-burst span:nth-child(2) { animation-delay: 0.08s; }
.celebrate-burst span:nth-child(3) { animation-delay: 0.16s; }
.celebrate-burst span:nth-child(4) { animation-delay: 0.24s; }
.celebrate-burst span:nth-child(5) { animation-delay: 0.32s; }
.celebrate-text {
  font-size: 1.4em; font-weight: 800; color: var(--ink);
  background: var(--card); padding: 10px 26px; border-radius: 999px; box-shadow: var(--shadow);
  animation: pop 1.6s ease both;
}
@keyframes pop {
  0% { transform: scale(0.3); opacity: 0; }
  25% { transform: scale(1.15); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── alive layer: every touch answers (Toca rule: no dead taps) ──
   Identical response per control class, every time. All of it dies under
   data-anim="off" / prefers-reduced-motion via the rules at the bottom. */
.room, .big-btn, .pill-btn, .back-btn, .pack-card, .video-card,
.lang-chip, .lang-btn, .sticker, .salon-swatch {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.room:active, .big-btn:active, .pill-btn:active, .back-btn:active,
.pack-card:active, .video-card:active, .lang-chip:active, .lang-btn:active,
.salon-swatch:active { transform: scale(0.95); }
.tool-btn { transition: transform 0.14s ease, border-color 0.14s ease; }
.tool-btn:active { transform: scale(0.9); }

/* gentle screen entry — rooms breathe in, never snap (still announced) */
.screen.is-active { animation: screenIn 0.28s ease; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* idle life: a tiny hop every few seconds — full animation level only.
   The loop is fixed and staggered, so the room always breathes the same way. */
body[data-anim="full"] .room-icon { animation: idleBob 7s ease-in-out infinite; }
body[data-anim="full"] .room:nth-child(2) .room-icon { animation-delay: 1.4s; }
body[data-anim="full"] .room:nth-child(3) .room-icon { animation-delay: 2.8s; }
body[data-anim="full"] .room:nth-child(4) .room-icon { animation-delay: 4.2s; }
body[data-anim="full"] .room:nth-child(5) .room-icon { animation-delay: 5.6s; }
body[data-anim="full"] .sticker:not(.is-locked) .st-emoji,
body[data-anim="full"] .pack-ping { display: inline-block; animation: idleBob 6s ease-in-out infinite; }
@keyframes idleBob {
  0%, 90%, 100% { transform: none; }
  93% { transform: translateY(-7px) rotate(-2deg); }
  97% { transform: translateY(0) rotate(2deg); }
}

/* words: the letters are alive */
.letter { transition: box-shadow 0.14s ease; }
.letter.is-dragging { box-shadow: 0 10px 24px rgba(74, 59, 92, 0.28); }
.slot.is-filled { animation: seatPop 0.35s ease; }
@keyframes seatPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
/* the finished word does its little wave (same wave for every word) */
.slot.jump { animation: letterJump 0.45s ease; }
@keyframes letterJump {
  0%, 100% { transform: none; }
  40% { transform: translateY(-14px) rotate(-3deg); }
  70% { transform: translateY(2px); }
}
.word-emoji { display: inline-block; }
.word-emoji.happy { animation: emojiHappy 0.9s ease; }
@keyframes emojiHappy {
  0%, 100% { transform: none; }
  25% { transform: translateY(-12px) scale(1.12) rotate(-4deg); }
  55% { transform: translateY(0) scale(1.04) rotate(3deg); }
  80% { transform: scale(1); }
}

/* salon: the friend reacts to every finished step, dances at the end */
.portrait-wrap.react { animation: reactBounce 0.6s ease; }
@keyframes reactBounce {
  0%, 100% { transform: none; }
  30% { transform: translateY(-12px) scale(1.03); }
  65% { transform: translateY(0) scale(0.99); }
}
.portrait-wrap.dance { animation: danceSway 1.1s ease 2; }
@keyframes danceSway {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg) translateY(-7px); }
  75% { transform: rotate(3deg) translateY(-7px); }
}
.spark-burst { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.spark-burst span {
  position: absolute; font-size: 30px; left: 50%; top: 42%;
  animation: sparkFly 0.9s ease both;
}
.spark-burst span:nth-child(2) { animation-delay: 0.08s; --sx: -70px; --sy: -40px; }
.spark-burst span:nth-child(3) { animation-delay: 0.16s; --sx: 70px;  --sy: -40px; }
.spark-burst span:nth-child(1) { --sx: 0px; --sy: -80px; }
@keyframes sparkFly {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.15); opacity: 0; }
}

/* sticker caught: the reveal moment (then the ONE celebration, as ever) */
.catch-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(74, 59, 92, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.catch-card {
  background: var(--card); border-radius: 32px; box-shadow: var(--shadow);
  padding: 34px 48px; text-align: center; animation: stickerIn 0.9s ease both;
}
.catch-card .catch-emoji { font-size: 96px; display: block; }
.catch-card .catch-name { font-size: 1.3em; font-weight: 800; }
.catch-card .catch-emotion { color: var(--es); font-weight: 700; }
.catch-card .catch-hint { font-size: 0.8em; color: var(--ink-soft); font-weight: 700; margin: 10px 0 0; }
@keyframes stickerIn {
  0% { transform: scale(0.2) rotate(-10deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  80% { transform: scale(0.98) rotate(0); }
  100% { transform: scale(1); }
}
.sticker.is-new { animation: stickerIn 0.9s ease both; }

/* ── today's delivery (the dollhouse box ritual) ── */
.delivery-btn { background: var(--butter); }
.delivery-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(74, 59, 92, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.delivery-card {
  background: var(--card); border-radius: 32px; box-shadow: var(--shadow);
  padding: 30px 40px; text-align: center; max-width: 440px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.delivery-box-emoji { font-size: 110px; line-height: 1; cursor: pointer; border: none; background: none; padding: 10px; }
.delivery-box-emoji.is-opening { animation: boxWiggle 0.8s ease both; }
@keyframes boxWiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-6deg) scale(1.05); }
  40% { transform: rotate(6deg) scale(1.05); }
  60% { transform: rotate(-4deg) scale(1.1); }
  80% { transform: rotate(3deg) scale(1.12); }
}
.delivery-friend { animation: stickerIn 0.9s ease both; }
.delivery-friend img { max-height: 200px; max-width: 100%; object-fit: contain; }
.delivery-title { margin: 0; font-size: 1.25em; font-weight: 800; }
.delivery-sub { margin: 0; color: var(--es); font-weight: 700; }
.delivery-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── the live face: she works, the friend answers ── */
.lf-eye, .live-face, .hair-sway, .paw { transform-box: fill-box; transform-origin: center; }
body[data-anim="full"] .lf-eye { animation: lfBlink 5s ease-in-out infinite; }
body[data-anim="full"] .lf-eye:last-of-type { animation-delay: 0.05s; }
@keyframes lfBlink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
}
.lf-happy .lf-eye { transform: scaleY(0.35); animation: none !important; }
.lf-smile { transition: d 0.3s ease; }
body[data-anim="full"] .hair-sway { animation: hairSway 6s ease-in-out infinite; transform-origin: top center; }
@keyframes hairSway {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(1.6deg); }
  70% { transform: rotate(-1.6deg); }
}
.paw.paw-hop { animation: pawHop 0.45s ease; }
@keyframes pawHop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px) rotate(-1deg); }
  75% { transform: translateY(2px); }
}

/* sticker book + catch card: real character art */
.st-art { height: 86px; max-width: 100%; object-fit: contain; }
.sticker.is-locked .st-art { filter: grayscale(1); opacity: 0.3; }
body[data-anim="full"] .sticker:not(.is-locked) .st-art { animation: idleBob 6s ease-in-out infinite; }
.catch-art { height: 150px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }

/* drawing reference zoom: tap the picture to see it BIG while copying */
.ref-zoom {
  position: fixed; inset: 0; z-index: 75; background: rgba(34, 28, 46, 0.93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  cursor: pointer;
}
.ref-zoom img { max-width: 88vw; max-height: 78vh; object-fit: contain; background: #fff; border-radius: 20px; padding: 14px; }
.ref-zoom p { color: #f0eaf6; font-weight: 800; font-size: 1.1em; margin: 0; }
.ref-name { margin: 0; font-size: 0.85em; font-weight: 700; text-align: center; color: #f0eaf6; }

/* nail toppers */
.topper-divider { width: 100%; border-top: 2px dashed var(--lavender); margin: 4px 0 0; }
.topper-label { width: 100%; text-align: center; margin: 0; font-size: 0.78em; color: var(--ink-soft); font-weight: 700; }

/* home greeting — fixed line, same every day */
.home-greeting { margin: 4px 0 0; color: var(--es); font-weight: 700; font-size: 1.05em; }

/* parent voice recorder */
.rec-on { background: #f5d3cf !important; }

/* ── sensory settings (commandments 4/15) ─ */
body[data-anim="off"] * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
body[data-palette="soft"] { filter: saturate(0.8); }