/* Colour themes, picked with the 🎨 button (theme.js) and saved on this device only.
   No data-theme attribute = "Sunny Day", the original look, so nothing here applies by default.
   Every rule is prefixed with :root[data-theme=...] so it outranks the page and game styles without editing them.
   Cards stay white in every theme (sticker look); a theme recolours the page, bands, accents, buttons and bars. */

/* ---------- tokens ---------- */
:root[data-theme="ocean"] {
  --purple: #0a7cc2; --purple-dark: #0b3a66; --cream: #eaf7ff; --lilac: #d4eeff; --text: #12324f;
  --btn-a: #1592d6; --btn-b: #0a6fc2; --page: #eaf7ff; --bar: rgba(234,247,255,.94); --fade: 234,247,255;
  --band-tint: #d4eeff; --band-sun: #fff4d6; --band-mint: #d8f5ef; --sky-top: #9fdcff; --sky-mid: #d9f2ff;
}
:root[data-theme="bubblegum"] {
  --purple: #d1307f; --purple-dark: #6b1446; --cream: #fff0f7; --lilac: #ffdeef; --text: #4d1f3a;
  --btn-a: #e9529f; --btn-b: #d1307f; --page: #fff0f7; --bar: rgba(255,240,247,.94); --fade: 255,240,247;
  --band-tint: #ffdeef; --band-sun: #fff1d6; --band-mint: #f3e4ff; --sky-top: #ffc7e4; --sky-mid: #ffe6f3;
}
:root[data-theme="jungle"] {
  --purple: #2a8f3d; --purple-dark: #1b4a22; --cream: #f1faea; --lilac: #dcf2cf; --text: #213d27;
  --btn-a: #34a046; --btn-b: #2a8f3d; --page: #f1faea; --bar: rgba(241,250,234,.94); --fade: 241,250,234;
  --band-tint: #dcf2cf; --band-sun: #fff2c9; --band-mint: #d3f1e4; --sky-top: #b5e8a8; --sky-mid: #e2f6d8;
}
:root[data-theme="night"] {
  --purple: #9d6ff2; --cream: #17133a; --lilac: #221c52; --text: #f1eaff;
  --btn-a: #9b5cf0; --btn-b: #6a2fc0; --page: #17133a; --bar: rgba(23,19,58,.94); --fade: 23,19,58;
  --band-tint: #221c52; --band-sun: #2a2160; --band-mint: #1c2a55; --sky-top: #0d0b2b; --sky-mid: #231c5c;
}

/* seasonal themes (chosen automatically by month and time of day, see theme.js) */
:root[data-theme="halloween-day"] {
  --purple: #7b3fc4; --purple-dark: #3d1a6e; --cream: #fff4e6; --lilac: #f1e4ff; --text: #3d2a5c;
  --btn-a: #e8650a; --btn-b: #b84500; --page: #fff4e6; --bar: rgba(255,244,230,.94); --fade: 255,244,230;
  --band-tint: #f1e4ff; --band-sun: #ffe7cc; --band-mint: #e8f5df; --sky-top: #ffd29a; --sky-mid: #fff0dc;
}
:root[data-theme="halloween-night"] {
  --purple: #e8650a; --purple-dark: #3a1458; --cream: #1f1033; --lilac: #2b1747; --text: #fff1e0;
  --btn-a: #e8650a; --btn-b: #b84500; --page: #1f1033; --bar: rgba(31,16,51,.94); --fade: 31,16,51;
  --band-tint: #2b1747; --band-sun: #3a1f1a; --band-mint: #1d2a2a; --sky-top: #12081f; --sky-mid: #4a1f55; --cloud: #45235f;
  --dot: #ffb15c;
}
:root[data-theme="thanksgiving-day"] {
  --purple: #b4501a; --purple-dark: #5a2a0c; --cream: #fff6e8; --lilac: #fbe6cf; --text: #4a2c17;
  --btn-a: #d96d22; --btn-b: #a8460f; --page: #fff6e8; --bar: rgba(255,246,232,.94); --fade: 255,246,232;
  --band-tint: #fbe6cf; --band-sun: #fff0c2; --band-mint: #eef3dc; --sky-top: #ffd8a0; --sky-mid: #fff1dc;
}
:root[data-theme="thanksgiving-night"] {
  --purple: #e0702a; --purple-dark: #3a1d0a; --cream: #2a1a10; --lilac: #3a2416; --text: #fff3e6;
  --btn-a: #d96d22; --btn-b: #a8460f; --page: #2a1a10; --bar: rgba(42,26,16,.94); --fade: 42,26,16;
  --band-tint: #3a2416; --band-sun: #4a2e14; --band-mint: #23301c; --sky-top: #1a0f08; --sky-mid: #5a2f12; --cloud: #4d3020;
  --dot: #ffd27a;
}
:root[data-theme="christmas-day"] {
  --purple: #c8102e; --purple-dark: #0f4d2c; --cream: #f2f8ff; --lilac: #e3eefc; --text: #1d3326;
  --btn-a: #e0313f; --btn-b: #b0101f; --page: #f2f8ff; --bar: rgba(242,248,255,.94); --fade: 242,248,255;
  --band-tint: #e3eefc; --band-sun: #fff3d6; --band-mint: #def3e6; --sky-top: #cfe6ff; --sky-mid: #eef6ff;
}
:root[data-theme="christmas-night"] {
  --purple: #e8455a; --purple-dark: #0b2a1c; --cream: #0d2233; --lilac: #12304a; --text: #eef6ff;
  --btn-a: #e0313f; --btn-b: #b0101f; --page: #0d2233; --bar: rgba(13,34,51,.94); --fade: 13,34,51;
  --band-tint: #12304a; --band-sun: #1d2f2a; --band-mint: #0f3326; --sky-top: #061624; --sky-mid: #12385a; --cloud: #1e4566;
  --dot: #ffffff;
}

/* ---------- page, bars, buttons (all non-default themes) ---------- */
:root[data-theme] body.home { background: var(--page); }
:root[data-theme] .nav,
:root[data-theme] .game-top,
:root[data-theme] .topbar { background: var(--bar); }
@media (max-width: 860px) { :root[data-theme] .topbar { background: var(--page); } }
@media (max-width: 720px) { :root[data-theme] .links { background: var(--page); } }
:root[data-theme] .btn,
:root[data-theme] .round-btn,
:root[data-theme] .ppk-mute,
:root[data-theme] .thumb.memo i,
:root[data-theme] .card-btn .back,
:root[data-theme] .start-btns .self { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); }
:root[data-theme] .btn.alt,
:root[data-theme] .round-btn.alt { background: linear-gradient(180deg, #ffd84a, #ff9f1c); }
:root[data-theme] .ppk-mute { box-shadow: 0 5px 0 var(--purple-dark), 0 8px 18px rgba(0,0,0,.2); }
:root[data-theme] .hero::after { background: linear-gradient(180deg, rgba(var(--fade),.85) 0%, rgba(var(--fade),.55) 35%, rgba(var(--fade),0) 60%); }

/* home page */
:root[data-theme] .band.tint { background: var(--band-tint); }
:root[data-theme] .band.sun { background: var(--band-sun); }
:root[data-theme] .band.mint { background: var(--band-mint); }
:root[data-theme] .hero2 { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--page) 100%); }
:root[data-theme] .wave path { fill: var(--page); }

/* story pages have their own backgrounds */
:root[data-theme] body:has(.sb-book) { background: linear-gradient(180deg, var(--lilac) 0, var(--page) 520px) var(--page); }
:root[data-theme] body:has(.start-card) { background: var(--lilac); }

/* ---------- dark themes (Night Sky and every seasonal night): light text on the dark page,
   dark text inside the white cards. [data-theme$="night"] matches all of them. ---------- */
:root[data-theme$="night"] { --stars: radial-gradient(1.5px 1.5px at 20% 30%, var(--dot, #fff) 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 15%, var(--dot, #fff) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 60%, #fff6c2 50%, transparent 51%),
  radial-gradient(1px 1px at 40% 80%, var(--dot, #fff) 50%, transparent 51%), radial-gradient(1px 1px at 55% 45%, #fff6c2 50%, transparent 51%); }
:root[data-theme$="night"] body:not(:has(.thing)) { background: var(--stars), var(--page); background-size: 320px 320px, auto; }
:root[data-theme$="night"] .hero2 { background: var(--stars), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--page) 100%);
  background-size: 260px 260px, auto; }
:root[data-theme$="night"] .hero2 .cloud, :root[data-theme$="night"] .hero2 .cloud::before, :root[data-theme$="night"] .hero2 .cloud::after { background: var(--cloud, #3a3180); }
:root[data-theme$="night"] .iconnav a,
:root[data-theme$="night"] .portal { color: var(--text); }
:root[data-theme$="night"] .iconnav a:hover { background: rgba(255,255,255,.12); }
@media (max-width: 860px) { :root[data-theme$="night"] .iconnav { background: var(--page); } }
:root[data-theme$="night"] .grownups { border-color: transparent; }
:root[data-theme$="night"] .menu-btn { color: var(--text); }
:root[data-theme$="night"] .credits,
:root[data-theme$="night"] .note { color: #e2d6f0; }
:root[data-theme$="night"] .meta span { background: #efe4ff; }
:root[data-theme$="night"] .book-title { color: var(--text); }

/* white "sticker" surfaces keep the original dark ink. :where() keeps this at zero specificity,
   so any colour a page sets explicitly on these elements still wins. */
:where(:root[data-theme$="night"]) :where(.friend, .book, .colors a, .game-card, .card, .tile, .pal, .moves li, .book-open, .bubble-say,
  .stars, .prompt, .party-card, .jump a, .ob, .rhyme, .track, .soon, .vid, .face, .stars-pill, .g, .bin, .sb-book, .grownups, .text,
  .start-card, .modes, .count, .end-say, .hero p, .filters button, .tab, .hint, .row, .tray) {
  --text: #3d2a5c; --purple: #7b3fc4; color: var(--text);
}
:root[data-theme$="night"] .tab.on { background: #7b3fc4; color: #fff; }

/* ---------- seasonal decorations ---------- */
/* floating emoji behind the page content (theme.js adds .ppk-decor for seasonal themes) */
.ppk-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ppk-decor span { position: absolute; font-size: clamp(1.4rem, 3vw, 2.2rem); opacity: .55; }
.ppk-decor .snow { font-size: clamp(.8rem, 1.6vw, 1.2rem); opacity: .8; top: -5%; }
@media (prefers-reduced-motion: no-preference) {
  .ppk-decor .bob { animation: ppk-bob 6s ease-in-out infinite; }
  .ppk-decor .snow { animation: ppk-snow linear infinite; }
  @keyframes ppk-bob { 50% { transform: translateY(-14px) rotate(8deg); } }
  @keyframes ppk-snow { to { transform: translateY(110vh) translateX(30px); } }
}
@media (prefers-reduced-motion: reduce) { .ppk-decor .snow { top: auto; } }

/* ---------- ambient light (theme.js adds .ppk-glow on every page, .ppk-bulbs for seasonal themes) ---------- */
/* three big soft colour glows that drift slowly behind the page, like coloured room lighting. They sit BEHIND all
   content and buttons (z-index -1); on the home page a second copy lives inside the sky, behind the title and buttons. */
:root { --glow1: #ffd84a; --glow2: #c9a0ff; --glow3: #ff9fd2; --glow-mode: soft-light; --glow-o: .7; }
:root[data-theme="ocean"] { --glow1: #6fd3ff; --glow2: #7ef0d0; --glow3: #b6e3ff; }
:root[data-theme="bubblegum"] { --glow1: #ff9fd2; --glow2: #ffd1a6; --glow3: #e3b3ff; }
:root[data-theme="jungle"] { --glow1: #b8f07a; --glow2: #ffe27a; --glow3: #7fe0b0; }
:root[data-theme="halloween-day"] { --glow1: #ffb15c; --glow2: #c9a0ff; --glow3: #ffd27a; }
:root[data-theme="thanksgiving-day"] { --glow1: #ffc46b; --glow2: #ff9a5c; --glow3: #ffe2a0; }
:root[data-theme="christmas-day"] { --glow1: #ff8a96; --glow2: #8fe8b0; --glow3: #ffe08a; }
:root[data-theme$="night"] { --glow-mode: screen; --glow-o: .36; }
:root[data-theme="night"] { --glow1: #7b5cff; --glow2: #ff9fd2; --glow3: #5cc8ff; }
:root[data-theme="halloween-night"] { --glow1: #ff7a1a; --glow2: #9b3cf0; --glow3: #ffb15c; }
:root[data-theme="thanksgiving-night"] { --glow1: #ff9a3c; --glow2: #ffcf6b; --glow3: #ff6b3c; }
:root[data-theme="christmas-night"] { --glow1: #ff3b4f; --glow2: #3ddc84; --glow3: #ffd84a; }
.ppk-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: var(--glow-mode); opacity: var(--glow-o); }
.ppk-glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.ppk-glow .g1 { left: -25vmax; top: -30vmax; background: radial-gradient(circle, var(--glow1) 0%, transparent 62%); }
.ppk-glow .g2 { right: -30vmax; top: 15vh; background: radial-gradient(circle, var(--glow2) 0%, transparent 62%); }
.ppk-glow .g3 { left: 15vw; bottom: -40vmax; background: radial-gradient(circle, var(--glow3) 0%, transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .ppk-glow .g1 { animation: ppk-drift1 26s ease-in-out infinite; }
  .ppk-glow .g2 { animation: ppk-drift2 32s ease-in-out infinite; }
  .ppk-glow .g3 { animation: ppk-drift3 38s ease-in-out infinite; }
  @keyframes ppk-drift1 { 50% { transform: translate(18vw, 14vh) scale(1.15); opacity: .7; } }
  @keyframes ppk-drift2 { 50% { transform: translate(-20vw, 10vh) scale(.9); opacity: .75; } }
  @keyframes ppk-drift3 { 50% { transform: translate(12vw, -16vh) scale(1.1); opacity: .7; } }
}
@media print { .ppk-glow, .ppk-bulbs, .ppk-decor, .ppk-theme-btn { display: none; } }

/* a string of twinkling party bulbs along the top bar (seasonal themes); theme.js puts it inside the bar,
   where z-index -1 keeps it above the bar's background but behind the bar's buttons */
.ppk-glow.in-hero { position: absolute; z-index: auto; }
.ppk-bulbs { position: absolute; left: 0; right: 0; top: 0; height: 32px; z-index: -1; pointer-events: none; display: flex; justify-content: space-around;
  background: radial-gradient(ellipse 50% 14px at 50% -6px, transparent 92%, rgba(40,30,30,.55) 94%, transparent 98%) 0 0 / 64px 26px repeat-x; }
.ppk-bulbs b { width: 11px; height: 16px; margin-top: 7px; border-radius: 50% 50% 45% 45%; background: var(--c); box-shadow: 0 0 6px 2px #fff8, 0 0 12px 4px var(--c), 0 0 26px 8px var(--c);
  opacity: .95; }
.ppk-bulbs b::before { content: ""; display: block; width: 5px; height: 4px; margin: -4px auto 0; background: #3b3b3b; border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .ppk-bulbs b { animation: ppk-twinkle 2.4s ease-in-out infinite; }
  .ppk-bulbs b:nth-child(2n) { animation-delay: -.8s; } .ppk-bulbs b:nth-child(3n) { animation-delay: -1.6s; }
  @keyframes ppk-twinkle { 50% { opacity: .65; box-shadow: 0 0 5px 2px var(--c), 0 0 12px 3px var(--c); } }
}
@media (max-width: 860px) { .ppk-bulbs b:nth-child(n+13) { display: none; } }
/* Halloween: the bulbs are little pumpkins, ghosts and bats, each hanging at its own tilt */
.ppk-bulbs b.fig { width: auto; height: auto; margin-top: 4px; background: none; box-shadow: none; font-size: 23px; line-height: 1;
  transform-origin: 50% 0; rotate: var(--tilt); filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px var(--c)) drop-shadow(0 0 16px var(--c)); }
.ppk-bulbs b.fig::before { margin: 0 auto 1px; }
@media (prefers-reduced-motion: no-preference) {
  .ppk-bulbs b.fig { animation: ppk-fig-glow 2.6s ease-in-out infinite; }
  @keyframes ppk-fig-glow { 50% { filter: brightness(1.05) drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 8px var(--c)); opacity: .9; } }
}

/* ---------- the monthly pet (pet.js moves it; only the pet's body takes taps) ---------- */
.ppk-pet { position: fixed; left: 0; top: 0; z-index: 9000; width: 78px; height: 54px; pointer-events: none; will-change: transform; }
.ppk-pet .body { width: 100%; height: 100%; pointer-events: auto; cursor: grab; touch-action: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); animation: ppk-pet-bob 2s ease-in-out infinite; }
.ppk-pet svg { width: 100%; height: 100%; overflow: visible; }
.ppk-pet .w { transform-origin: 32px 20px; animation: ppk-flap .22s ease-in-out infinite alternate; }
.ppk-pet.flapx .w { animation-name: ppk-flapx; animation-duration: .32s; }
.ppk-pet.flapfast .w { animation-duration: .06s; }
.ppk-pet .body.mine img { width: 100%; height: 100%; object-fit: contain; animation: ppk-mine .3s ease-in-out infinite alternate; }
/* faces: open eyes normally; happy closed eyes when you point at it, pet it, or it does a trick; cross brows and a frown when mad */
.ppk-pet .ec, .ppk-pet .em, .ppk-pet .fr, .ppk-pet .oo { display: none; }
.ppk-pet .body:hover .eo, .ppk-pet.happy .eo, .ppk-pet.trick .eo, .ppk-pet.asleep .eo { display: none; }
.ppk-pet .body:hover .ec, .ppk-pet.happy .ec, .ppk-pet.trick .ec, .ppk-pet.asleep .ec { display: inline; }
.ppk-pet.mad .body .eo, .ppk-pet.scared .body .eo { display: inline; }
.ppk-pet.mad .body .ec, .ppk-pet.scared .body .ec, .ppk-pet.mad .sm, .ppk-pet.scared .sm { display: none; }
.ppk-pet.mad .em, .ppk-pet.mad .fr, .ppk-pet.scared .oo { display: inline; }
.ppk-pet.mad .body { filter: drop-shadow(0 0 6px #ff5a5a) drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ppk-pet.scared .body svg { transform: scale(1.12); }
.ppk-pet-say { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); background: #fff; color: #3d1a6e; font: 700 15px/1 'Fredoka', system-ui, sans-serif;
  padding: .3em .6em; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: ppk-say .3s ease-out; }
/* what it chases */
.ppk-firefly, .ppk-target { position: fixed; left: 0; top: 0; z-index: 8999; width: 24px; height: 24px; pointer-events: none; will-change: transform; }
.ppk-firefly i { position: absolute; inset: 7px; border-radius: 50%; background: #f4ff8a; box-shadow: 0 0 8px 3px #e8ff5c, 0 0 18px 8px rgba(232,255,92,.45);
  animation: ppk-glowfly .9s ease-in-out infinite alternate; }
.ppk-target { font-size: 20px; line-height: 24px; text-align: center; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ffe27a); animation: ppk-twink .9s ease-in-out infinite alternate; }
/* treats, hearts, puffs, the rare accident, sleepy z's */
.ppk-treat { position: fixed; z-index: 9001; pointer-events: none; font-size: 26px; line-height: 1; animation: ppk-treat-fall 1.3s ease-in forwards; }
.ppk-heart, .ppk-puff { position: fixed; z-index: 9002; pointer-events: none; font-size: 20px; line-height: 1; animation: ppk-heart 1.4s ease-out forwards; }
.ppk-puff { font-size: 34px; animation-name: ppk-puff; }
.ppk-poop { position: fixed; z-index: 9001; pointer-events: none; font-size: 22px; line-height: 1; animation: ppk-poop 1.3s cubic-bezier(.5,0,1,1) forwards; }
.ppk-zzz { position: fixed; z-index: 46; pointer-events: none; font: 700 18px/1 'Fredoka', system-ui, sans-serif; color: #7b3fc4;
  text-shadow: 0 0 4px #fff, 0 0 10px #fff; animation: ppk-zzz 1.6s ease-out forwards; }
/* bedtime: the bat hangs upside down under the top bar, the others perch there, swaying gently; tap to wake */
.ppk-pet.asleep { z-index: 45; }
.ppk-pet.asleep .body { cursor: pointer; animation: ppk-sway 3s ease-in-out infinite; transform-origin: 50% 0; }
.ppk-pet.asleep .w { animation: none; transform: scaleY(.45); }
.ppk-pet.hang .body svg { rotate: 180deg; }
.ppk-pet.waking { transition: opacity .8s, translate .8s; opacity: 0; translate: 0 -30px; }
/* friendly ghost (Halloween looks); tap it and it giggles away */
.ppk-ghost { position: fixed; left: 0; top: 0; z-index: 8998; width: 60px; height: 70px; cursor: pointer; opacity: .9; will-change: transform;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.55)); }
.ppk-ghost svg { width: 100%; height: 100%; animation: ppk-pet-bob 2.4s ease-in-out infinite; }
/* bedtime button (above the 🎨 button) */
.ppk-bed-btn { position: fixed; left: 19px; bottom: 80px; z-index: 9998; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; padding: 0;
  background: linear-gradient(180deg, #4b3aa8, #1d1650); font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 #160f3a, 0 6px 14px rgba(0,0,0,.25); }
.ppk-bed-btn:focus-visible { outline: 4px solid #3f8ef0; outline-offset: 3px; }
@media (max-width: 860px) { body.home .ppk-bed-btn { bottom: 152px; } }
/* "Pet & music" switches inside the 🎨 panel */
.ppk-pet-opts { margin-top: .7rem; padding-top: .6rem; border-top: 2px dashed #eee3fb; display: grid; gap: .4rem; }
.ppk-pet-opts h2 { margin-bottom: .2rem; }
.ppk-pet-opts button { min-height: 48px; border: 3px solid #eee3fb; border-radius: 14px; background: #fff; font: inherit; font-weight: 700; font-size: .95rem;
  color: #3d2a5c; cursor: pointer; text-align: left; padding: .3rem .7rem; }
.ppk-pet-opts button[aria-checked="true"] { border-color: #7b3fc4; background: #f6efff; }
.ppk-pet-opts button[hidden] { display: none; }
.ppk-theme-pick { max-height: calc(100vh - 110px); overflow: auto; }
@keyframes ppk-pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ppk-flap { to { transform: scaleY(.35); } }
@keyframes ppk-flapx { to { transform: scaleX(.35); } }
@keyframes ppk-mine { to { transform: scale(1.06, .9) translateY(2px); } }
@keyframes ppk-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ppk-say { from { transform: translate(-50%, 6px) scale(.6); opacity: 0; } }
@keyframes ppk-glowfly { to { opacity: .55; transform: scale(.8); } }
@keyframes ppk-twink { to { opacity: .65; } }
@keyframes ppk-treat-fall { from { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1.1); opacity: 0; } }
@keyframes ppk-heart { from { transform: translate(-50%, -50%) scale(.5); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), -90px) scale(1.25); opacity: 0; } }
@keyframes ppk-puff { from { transform: translate(-50%, -50%) scale(.4); opacity: .95; } to { transform: translate(-50%, -70%) scale(2.2); opacity: 0; } }
@keyframes ppk-poop { 0% { transform: translate(-50%, 0) scale(.6); } 15% { transform: translate(-50%, 6px) scale(1); } 100% { transform: translate(-50%, var(--fall)) rotate(30deg); } }
@keyframes ppk-zzz { from { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } to { opacity: 0; transform: translate(18px, -42px) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .ppk-pet, .ppk-firefly, .ppk-target, .ppk-treat, .ppk-heart, .ppk-puff, .ppk-poop, .ppk-ghost, .ppk-bed-btn { display: none; } }

/* the round logo in the top bars gets a white ring */
.brand img { border: 3px solid #fff; box-shadow: 0 2px 8px rgba(61,26,110,.25); box-sizing: border-box; }

/* ---------- the picker (theme.js) ---------- */
.ppk-theme-btn { position: fixed; left: 14px; bottom: 14px; z-index: 9998; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(180deg, #ffd84a, #ff9f1c); font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 5px 0 var(--purple-dark), 0 8px 18px rgba(0,0,0,.2); font-family: inherit; }
.ppk-theme-btn:focus-visible, .ppk-theme-pick button:focus-visible { outline: 4px solid #3f8ef0; outline-offset: 3px; }
.ppk-theme-pick { position: fixed; left: 14px; bottom: 80px; z-index: 9999; background: #fff; color: #3d2a5c; border-radius: 24px; padding: .8rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25); border-top: 8px solid #ffc21f; width: min(300px, calc(100vw - 28px)); font-family: 'Fredoka', system-ui, sans-serif; }
.ppk-theme-pick[hidden] { display: none; }
.ppk-theme-pick h2 { font-size: 1.1rem; margin: 0 0 .6rem; text-align: center; color: #3d1a6e; }
.ppk-theme-pick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ppk-theme-pick button { width: 100%; min-height: 64px; border: 3px solid #eee3fb; border-radius: 18px; background: #fff; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .95rem; color: #3d2a5c; display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; text-align: left; }
.ppk-theme-pick button[aria-checked="true"] { border-color: #7b3fc4; box-shadow: 0 0 0 3px #ffc21f inset; }
.ppk-theme-pick .sw { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ppk-theme-pick li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* home on phones: the bottom tab bar is 76px tall (the sound button is lifted the same way in home.css) */
@media (max-width: 860px) { body.home .ppk-theme-btn { bottom: 86px; } body.home .ppk-theme-pick { bottom: 152px; } }
@media (prefers-reduced-motion: no-preference) {
  .ppk-theme-btn { transition: transform .15s; } .ppk-theme-btn:hover { transform: translateY(-3px) rotate(-8deg); }
  .ppk-theme-pick:not([hidden]) { animation: ppk-theme-in .2s ease-out; }
  @keyframes ppk-theme-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
}