/* Halloween product page and regular homepage shelf card. */
.home-page .app-library-grid > .app-card.app-card-halloween { background: #ffe0b5; }
.halloween-page .kids-product-hero { background: #ffe0b5; }
.halloween-page .kids-product-download { background: #d9c9fa; }
.halloween-trail { margin-bottom: 24px; }
.halloween-screenshots { padding-bottom: 64px; }
.halloween-screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.halloween-screenshot-grid figure { margin: 0; padding: 12px; background: white; border-radius: 24px; box-shadow: 0 5px 0 #51259d12; }
.halloween-screenshot-grid img { display: block; width: 100%; height: auto; border-radius: 14px; }
.halloween-screenshot-grid figcaption { padding: 14px 4px 4px; line-height: 1.5; color: #354b5c; font-weight: 700; }
@media (max-width: 900px) {
    .halloween-screenshot-grid { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
}

/* Retain the existing shelf colours alongside Halloween. */
.home-page .app-library-grid > .app-card:nth-child(1) { background: #d9c9fa; }
.home-page .app-library-grid > .app-card:nth-child(3) { background: #fff0ad; }
.home-page .app-library-grid > .app-card:nth-child(4) { background: #bdebf4; }
.home-page .app-library-grid > .app-card:nth-child(5) { background: #e1efb7; }
.halloween-page h1 { font-size: clamp(2.6rem, 4.5vw, 4rem); max-width: 17ch; }

/* Friendly hosts for the Halloween product page. */
.halloween-hero-visual { min-width: 0; }
.halloween-hero-friends { display: flex; align-items: end; justify-content: center; gap: 18px; margin-top: 26px; }
.halloween-hero-friends .kids-character-dancer { min-width: 0; padding: 8px; border-radius: 24px; }
.halloween-hero-friends .kids-character-dancer img { width: clamp(88px, 10vw, 132px); height: clamp(88px, 10vw, 132px); filter: drop-shadow(0 6px 3px #51259d18); }
.halloween-hero-friends .halloween-ghost { transform: rotate(7deg); }
.halloween-friends-hint { margin: 4px 0 0; text-align: center; font-family: "Baloo 2", sans-serif; font-weight: 700; color: #51259d; }
.halloween-friends-hint span { font-family: "Nunito", sans-serif; font-size: .85rem; font-weight: 600; }
.halloween-download-friends { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 16px; }
.halloween-download-friends img { display: block; width: 76px; height: 76px; object-fit: contain; }
.halloween-download-friends img:last-child { transform: rotate(10deg); }
@media (max-width: 900px) {
    .halloween-hero-visual { width: min(100%, 580px); margin: 0 auto; }
    .halloween-hero-friends { margin-top: 22px; }
}

/* Gentle Halloween atmosphere; character dances stay on the inner images. */
.halloween-page .halloween-trail { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.halloween-motion-toggle { border: 1px solid #6232b430; border-radius: 18px; padding: 9px 14px; background: #eee5f9; color: #51259d; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.halloween-motion-toggle:focus-visible { outline: 3px solid #6232b4; outline-offset: 4px; }
.halloween-page .kids-product-hero { position: relative; isolation: isolate; overflow: hidden; }
.halloween-sparkles { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: #8a58b3; }
.halloween-sparkles span { position: absolute; font-size: 30px; opacity: .35; animation: halloween-twinkle 5s ease-in-out infinite; }
.halloween-sparkles span:nth-child(1) { left: 3%; top: 4%; }
.halloween-sparkles span:nth-child(2) { right: 3%; top: 3%; animation-delay: -2s; font-size: 40px; }
.halloween-sparkles span:nth-child(3) { left: 46%; top: 5%; animation-delay: -3s; }
.halloween-sparkles span:nth-child(4) { left: 48%; bottom: 7%; animation-delay: -1s; font-size: 42px; }
.halloween-sparkles span:nth-child(5) { right: 4%; bottom: 8%; animation-delay: -4s; }
.halloween-sparkles span:nth-child(6) { left: 4%; bottom: 3%; animation-delay: -2.5s; font-size: 22px; }
.halloween-hero-friends .halloween-ghost,
.halloween-download-friends img:last-child { animation: halloween-ghost-float 5s ease-in-out infinite; }
.halloween-hero-friends .halloween-pumpkin,
.halloween-download-friends img:first-child { animation: halloween-pumpkin-bob 6s ease-in-out infinite; }
.halloween-download-friends img:last-child { animation-delay: -2s; }
.halloween-download-friends img:first-child { animation-delay: -3s; }
.halloween-page.spooky-paused .halloween-sparkles span,
.halloween-page.spooky-paused .halloween-hero-friends .kids-character-dancer,
.halloween-page.spooky-paused .halloween-download-friends img { animation-play-state: paused; }
@keyframes halloween-ghost-float {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes halloween-pumpkin-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}
@keyframes halloween-twinkle {
    0%, 100% { opacity: .2; transform: scale(.85) rotate(-8deg); }
    50% { opacity: .55; transform: scale(1.1) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .halloween-page .halloween-sparkles span,
    .halloween-page .halloween-hero-friends .kids-character-dancer,
    .halloween-page .halloween-download-friends img { animation: none; }
}