/* ---------------------------------------------------------------------------
   Zappy & Lilly — cats page overrides (load after style.css).
   Zappy: a butter-yellow wall above his grey sofa.
   Lilly: a soft peach wall above her teal blanket.
   --------------------------------------------------------------------------- */
body.theme-zappy,
body.theme-lilly {
  --caption-font: 'Chewy', 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  --caption-name-size: 30px;
  --ui-font: 'Baloo 2', 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --px-ui-font: 'Baloo 2', 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --px-card: rgba(255, 255, 255, 0.08);
  --px-card-hover: rgba(255, 255, 255, 0.16);
}

body.theme-zappy {
  --bg-deep: #6f6b74;
  --ink: #fff7e8;
  --accent: #ff9a3c;
  --accent-soft: #ffd08a;
  --chip-bg: rgba(96, 54, 22, 0.72);
  --chip-bg-hover: rgba(255, 154, 60, 0.85);
  --chip-border: rgba(255, 222, 170, 0.5);
  --chip-border-hover: rgba(255, 230, 190, 0.95);
  --px-glass: rgba(84, 48, 22, 0.82);
  --px-glass-strong: rgba(70, 38, 16, 0.95);
  --px-line: rgba(255, 214, 160, 0.4);
  --px-accent: #ff9a3c;
  --px-accent-ink: #3a1a05;
  background:
    radial-gradient(80% 50% at 50% 18%, rgba(255, 250, 215, 0.55) 0%, rgba(255, 250, 215, 0) 70%),
    linear-gradient(180deg, #f6e19b 0%, #efd27e 46%, #d9bf73 62%, #85808a 66%, #6e6a74 84%, #5c5862 100%);
}

body.theme-lilly {
  --bg-deep: #2f5b5f;
  --ink: #fffaf4;
  --accent: #f39a8b;
  --accent-soft: #ffd3c2;
  --chip-bg: rgba(62, 74, 92, 0.72);
  --chip-bg-hover: rgba(133, 147, 168, 0.9);
  --chip-border: rgba(255, 226, 210, 0.55);
  --chip-border-hover: rgba(255, 236, 226, 0.95);
  --px-glass: rgba(47, 70, 82, 0.84);
  --px-glass-strong: rgba(36, 56, 66, 0.95);
  --px-line: rgba(255, 214, 196, 0.42);
  --px-accent: #f6a98e;
  --px-accent-ink: #3a1f16;
  background:
    radial-gradient(80% 50% at 50% 18%, rgba(255, 240, 225, 0.6) 0%, rgba(255, 240, 225, 0) 70%),
    linear-gradient(180deg, #fbd9bd 0%, #f6c7a4 46%, #eab690 60%, #4f7f82 65%, #3a6a6e 82%, #2c5559 100%);
}

/* Wallpaper of faint paw prints and a trim line above the sofa / blanket. */
body.theme-zappy::before,
body.theme-lilly::before,
body.theme-zappy::after,
body.theme-lilly::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

body.theme-zappy::before,
body.theme-lilly::before {
  top: 0;
  height: 63%;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='30' cy='38' rx='9' ry='7'/%3E%3Ccircle cx='21' cy='28' r='3.4'/%3E%3Ccircle cx='27' cy='23' r='3.4'/%3E%3Ccircle cx='34' cy='23' r='3.4'/%3E%3Ccircle cx='40' cy='28' r='3.4'/%3E%3C/g%3E%3Cg fill='%23ffffff' transform='rotate(18 88 90)'%3E%3Cellipse cx='88' cy='96' rx='9' ry='7'/%3E%3Ccircle cx='79' cy='86' r='3.4'/%3E%3Ccircle cx='85' cy='81' r='3.4'/%3E%3Ccircle cx='92' cy='81' r='3.4'/%3E%3Ccircle cx='98' cy='86' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

body.theme-zappy::after,
body.theme-lilly::after {
  bottom: 0;
  height: 36%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 3px, rgba(0, 0, 0, 0.12) 3px, rgba(0, 0, 0, 0) 18px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46px, rgba(0, 0, 0, 0.05) 46px, rgba(0, 0, 0, 0.05) 50px);
}

/* Lilly's blanket gets a soft knit texture instead of sofa seams. */
body.theme-lilly::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0.25) 3px, rgba(0, 0, 0, 0.12) 3px, rgba(0, 0, 0, 0) 18px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 12px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 12px);
}

/* Readable chrome over the light walls. */
body.theme-zappy .modes,
body.theme-lilly .modes,
body.theme-zappy .page-nav,
body.theme-lilly .page-nav {
  box-shadow: 0 4px 16px rgba(60, 30, 10, 0.18);
}

body.theme-zappy .mode,
body.theme-lilly .mode {
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.88;
}

body.theme-zappy .mode.active { background: #ff9a3c; color: #3a1a05; }
body.theme-lilly .mode.active { background: #8593a8; color: #ffffff; }

body.theme-zappy .caption,
body.theme-lilly .caption {
  letter-spacing: 0.3em;
  opacity: 0.95;
  text-shadow: 0 2px 6px rgba(30, 20, 20, 0.45);
}

body.theme-zappy .caption .name,
body.theme-lilly .caption .name {
  vertical-align: -4px;
  text-shadow: 0 2px 0 rgba(90, 40, 10, 0.35), 0 4px 12px rgba(30, 20, 20, 0.35);
}
body.theme-zappy .caption .name { color: #ffc27a; }
body.theme-lilly .caption .name { color: #ffd6c4; }
body.theme-zappy .caption .emoji,
body.theme-lilly .caption .emoji { animation: cats-tail 1.6s ease-in-out infinite; transform-origin: 50% 90%; }

@keyframes cats-tail {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

body.theme-zappy .next,
body.theme-lilly .next {
  font-weight: 600;
  letter-spacing: 0.16em;
}

body.theme-zappy .hint,
body.theme-lilly .hint {
  font-style: normal;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(20, 20, 30, 0.55);
}

body.theme-zappy .hint.faded,
body.theme-lilly .hint.faded { opacity: 0; }

/* Page link back to the home page. */
body.theme-zappy .page-nav,
body.theme-lilly .page-nav { font-weight: 600; }
.page-nav-back { font-size: 18px; line-height: 1; }

/* Nap time: the room lights dim (a DOM layer under the characters). */
.cats-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 30%, rgba(20, 24, 60, 0.55) 0%, rgba(8, 10, 30, 0.82) 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cats-dim.is-on { opacity: 1; }

/* Keyboard focus ring for the back link, which sits on the light wall. */
body.theme-zappy .page-nav:focus-visible { outline: 3px solid #5a2a08; outline-offset: 2px; }
body.theme-lilly .page-nav:focus-visible { outline: 3px solid #2f3b4f; outline-offset: 2px; }

/* Keep the hint clear of the round Play button at the bottom left, which
   activities.css places beside the hint on phones and short screens. */
body.theme-zappy .hint,
body.theme-lilly .hint {
  max-width: calc(100vw - 2 * (126px + env(safe-area-inset-left, 0px)));
}

@media (max-width: 480px) {
  body.theme-zappy, body.theme-lilly { --caption-name-size: 25px; }
  body.theme-zappy .hint,
  body.theme-lilly .hint { max-width: calc(100vw - 2 * (68px + env(safe-area-inset-left, 0px))); }
}


@media (prefers-reduced-motion: reduce) {
  body.theme-zappy .caption .emoji,
  body.theme-lilly .caption .emoji { animation: none; }
  .cats-dim { transition: none; }
}