/*! ck-play.css: "Playful" theme test for Coloring Kids. Loads after ck.css and only applies under <html class="play">.
   Principles: pressable 3D edges instead of offset shadows, rounded friendly type, one generous radius, flat colour,
   and small springy motions that reward a tap. Everything is CSS or tiny inline SVG; no libraries.
   All motion is switched off for people who ask for reduced motion. */

html.play {
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --r: 20px;
  --edge: 6px;                       /* thickness of the pressable bottom edge */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft-line: #E4D9EF;
  --shade-tang: #C94A0C; --shade-lemon: #C9A300; --shade-pink: #D9669B; --shade-sky: #3B98CF; --shade-mint: #2FA86C; --shade-lilac: #7E5FD6;
}
html.play body { font-weight: 500; letter-spacing: .01em; }
html.play h1, html.play h2, html.play h3 { font-weight: 700; letter-spacing: -.01em; }
html.play h1 { letter-spacing: -.02em; }
html.play .logo b { font-weight: 700; }

/* ---------- Pressable buttons: depth from a solid bottom edge, never a blurred shadow ---------- */
html.play .btn {
  box-shadow: none; border-bottom-width: var(--edge); border-radius: 16px;
  transition: transform .18s var(--spring), border-bottom-width .12s, filter .15s;
}
html.play .btn:hover { transform: translateY(-2px); box-shadow: none; filter: saturate(1.08); }
html.play .btn:active { transform: translateY(3px); border-bottom-width: 2.5px; box-shadow: none; }
html.play .btn.sm { border-bottom-width: 4.5px; box-shadow: none; }
html.play .btn.sm:active { border-bottom-width: 2.5px; }
html.play .btn:not(.alt) { background: var(--tang); }

/* ---------- Cards: a thick bottom edge; they rise and tilt a little, then settle with a spring ---------- */
html.play .sticker { box-shadow: none; border-bottom-width: 7px; border-radius: var(--r); }
html.play .lift { transition: transform .35s var(--spring), border-bottom-width .2s; }
html.play .lift:hover { transform: translateY(-5px) rotate(-.8deg); box-shadow: none; }
html.play .lift:active { transform: translateY(2px); border-bottom-width: 3px; }
html.play .world:nth-child(odd), html.play .world:nth-child(even) { transform: none; }
html.play .world:hover svg, html.play .role:hover h3, html.play .lcard:hover .lbig { animation: ck-bounce .6s var(--spring); }

/* Pills, chips, tabs, search: same edge language */
html.play .pill { border-bottom-width: 4.5px; animation: ck-sway 5s ease-in-out infinite; }
html.play .chip, html.play .tab { border-bottom-width: 4px; transition: transform .2s var(--spring), background .15s; }
html.play .chip:hover, html.play .tab:hover { transform: translateY(-2px); }
html.play .chip:active, html.play .tab:active { transform: translateY(2px); border-bottom-width: 2px; }
html.play .tab[aria-pressed="true"], html.play .tab[aria-selected="true"] { animation: ck-jelly .45s var(--spring); }
html.play .bigsearch { box-shadow: none; border-bottom-width: 6px; }
html.play .bigsearch:focus-within { border-color: var(--tang); }

/* Highlighted words: the marker swipes in once, then stays */
html.play .hl::before { transform-origin: left center; animation: ck-swipe .7s .25s var(--spring) both; }

/* Section headings get a hand-drawn squiggle that draws itself (the SVG animates itself, no JS) */
html.play .sec-head h2::after, html.play .theme-head h2::after {
  content: ""; display: block; width: 132px; height: 14px; margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cstyle%3Epath%7Bstroke-dasharray:160;stroke-dashoffset:160;animation:d 1s .2s ease-out forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D@media (prefers-reduced-motion:reduce)%7Bpath%7Banimation:none;stroke-dashoffset:0%7D%7D%3C/style%3E%3Cpath d='M3 8c10-7 18 5 28 0s18-7 28 0 18 5 28 0 18-7 28 0 10 4 14 1' fill='none' stroke='%23FF6A1F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
html.play .spot h2::after, html.play .season h2::after { display: none; }

/* ---------- Gallery sheets: a friendly wobble on hover; tags wiggle ---------- */
html.play .page .sheet img { transition: transform .4s var(--spring); }
html.play .page:hover .sheet img { transform: scale(1.03) rotate(-1.2deg); }
html.play .page:hover .tag { animation: ck-wiggle .5s ease-in-out; }
html.play .page .acts .btn { border-bottom-width: 4px; }

/* Book covers open a little on hover */
html.play .bookcard img { transition: transform .45s var(--spring); transform-origin: left center; }
html.play .bookcard:hover img { transform: perspective(700px) rotateY(-14deg) translateY(-4px); }

/* Print pack: the main button gives a gentle "pick me" nudge every few seconds */
html.play .packbtn { border-bottom-width: 6px; transition: transform .2s var(--spring), border-bottom-width .12s; }
html.play .packbtn:active { transform: translateY(3px); border-bottom-width: 2.5px; }
html.play .packbtn.main { box-shadow: none; animation: ck-nudge 6s 2s ease-in-out infinite; }

/* Sub-menus spring open */
html.play .subpanel { box-shadow: none; border-bottom-width: 6px; transform-origin: 20px -8px; }
html.play .navitem:hover .subpanel, html.play .navitem.open .subpanel { animation: ck-pop .28s var(--spring); }
html.play .menubtn { border-bottom-width: 5px; }

/* Logo pencil wiggles on hover */
html.play .logo:hover svg { animation: ck-wiggle .6s ease-in-out; }

/* Seasonal banner: a few shapes drift in the background */
html.play .season, html.play .spot { position: relative; overflow: hidden; box-shadow: none; border-bottom: 8px solid var(--tang); }
html.play .season::before, html.play .season::after {
  content: ""; position: absolute; width: 46px; height: 46px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4.7 10.6 11.3 1.1-8.5 7.6 2.5 11.2L20 27.7 10 33.5l2.5-11.2L4 14.7l11.3-1.1Z' fill='%23FFD84D' stroke='%23FFF8EE' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: ck-drift 9s ease-in-out infinite;
}
html.play .season::before { top: 18px; right: 38%; }
html.play .season::after { bottom: 22px; left: 46%; width: 30px; height: 30px; animation-delay: -4s; animation-duration: 11s; }
html.play .season > * { position: relative; z-index: 1; }

/* ---------- Mascot: an original crayon character (see partials/mascot.njk) ---------- */
.ck-mascot { display: none; }
html.play .ck-mascot { display: block; width: 120px; height: auto; pointer-events: none; }
html.play .ck-mascot .m-body { animation: ck-bob 3.2s ease-in-out infinite; transform-origin: 60px 120px; }
html.play .ck-mascot .m-eyes { animation: ck-blink 4.5s infinite; transform-origin: 60px 58px; }
html.play .ck-mascot .m-arm { animation: ck-wave 2.4s ease-in-out infinite; transform-origin: 92px 78px; }
html.play .ck-mascot.cheer .m-body { animation: ck-hop .6s var(--spring) 2; }
html.play .mascot-slot { position: relative; }
html.play .mascot-pack { position: absolute; right: 24px; top: -116px; width: 92px; }
  html.play .mascot-print-link { color: var(--ink); cursor: pointer; }
  html.play .mascot-print-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; border-radius: 14px; }
html.play .mascot-colorer { position: absolute; right: 8px; top: -86px; width: 96px; }
html.play .bubble { position: absolute; white-space: nowrap; background: var(--card); border: 2.5px solid var(--ink); border-bottom-width: 4.5px; border-radius: 14px; padding: 6px 12px; font: 700 14px var(--body); animation: ck-pop .5s 1s var(--spring) both; }
html.play .mascot-pack .bubble { right: 84px; top: 8px; }
html.play .mascot-colorer .bubble { right: 90px; top: 14px; }
@media (max-width: 640px) { html.play .mascot-pack, html.play .mascot-colorer { display: none; } }

/* Scroll-in: cards pop in once as they arrive (JS marks only cards below the fold; everything is visible without JS) */
html.play .pop-wait { opacity: 0; transform: translateY(16px) scale(.97); }
html.play .pop-in { animation: ck-rise .55s var(--spring) backwards; }

/* Confetti and sparkles (created by ck-play.js, removed after they finish) */
.ck-burst { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
.ck-burst i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid #2B1840; animation: ck-fly .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.ck-burst i.round { border-radius: 50%; }
.btn .done-label { display: inline-flex; align-items: center; gap: 6px; }

/* Theme switch (test only) */
.ck-theme-switch { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 4px; padding: 4px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; font: 700 13px var(--body); }
.ck-theme-switch button { border: 0; background: transparent; padding: 7px 12px; border-radius: 999px; font: inherit; color: var(--ink); cursor: pointer; }
.ck-theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ck-theme-switch span { align-self: center; padding: 0 6px 0 8px; color: var(--ink-soft); }
@media (max-width: 640px) { .ck-theme-switch { font-size: 12px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .ck-theme-switch span { display: none; } .ck-theme-switch button { padding: 6px 10px; } }

/* ---------- Keyframes ---------- */
@keyframes ck-bounce { 0% { transform: translateY(0) } 35% { transform: translateY(-8px) rotate(-4deg) } 65% { transform: translateY(2px) rotate(2deg) } 100% { transform: none } }
@keyframes ck-jelly { 0% { transform: scale(1) } 30% { transform: scale(1.12, .9) } 55% { transform: scale(.94, 1.06) } 100% { transform: scale(1) } }
@keyframes ck-wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-7deg) } 75% { transform: rotate(6deg) } }
@keyframes ck-sway { 0%, 100% { transform: rotate(-2deg) } 50% { transform: rotate(1.5deg) } }
@keyframes ck-swipe { from { transform: rotate(-2.5deg) scaleX(0) } to { transform: rotate(-2.5deg) scaleX(1) } }
@keyframes ck-pop { from { opacity: 0; transform: scale(.9) translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes ck-nudge { 0%, 88%, 100% { transform: none } 91% { transform: translateY(-4px) rotate(-1deg) } 94% { transform: translateY(0) rotate(.8deg) } 97% { transform: translateY(-2px) } }
@keyframes ck-drift { 0%, 100% { transform: translate(0, 0) rotate(0) } 50% { transform: translate(14px, -18px) rotate(40deg) } }
@keyframes ck-bob { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-7px) rotate(2deg) } }
@keyframes ck-hop { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-22px) rotate(-6deg) } 70% { transform: translateY(3px) } }
@keyframes ck-blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes ck-wave { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-22deg) } 50% { transform: rotate(6deg) } 75% { transform: rotate(-16deg) } }
@keyframes ck-rise { from { opacity: 0; transform: translateY(16px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes ck-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  html.play *, html.play *::before, html.play *::after { animation: none !important; transition: none !important; }
  html.play .pop-wait { opacity: 1; transform: none; }
  .ck-burst { display: none; }
}