/* ============================================================
   MUFFINBERRY STUDIOS — components
   The sticker language: white outlines + soft dimensional
   shadows, borrowed straight from the logo art.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.1rem; line-height: 1;
  padding: 16px 30px 18px;
  border-radius: var(--r-pill);
  border: 4px solid #fff;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sticker);
  transition: transform var(--speed) var(--ease-bounce), box-shadow var(--speed) ease;
}
.btn:hover  { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-berry  { background: var(--pink-deep); color: #fff; }
.btn-berry:hover { color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-purple:hover { color: #fff; }
.btn-cream  { background: #fff; color: var(--purple-deep); }
.btn-cream:hover { color: var(--pink-deep); }
.btn .btn-ic { width: 22px; height: 22px; flex: none; }
.btn[aria-disabled="true"] {
  background: var(--ink-soft); cursor: not-allowed;
  transform: none; box-shadow: var(--shadow-soft);
}

/* ---------- Sticker card ---------- */
.sticker {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
}
.sticker-frame {
  border: var(--sticker-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
  background: #fff;
}
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.4deg); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--purple-deep);
  font-weight: 800; font-size: var(--fs-small);
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 3px solid var(--cream-2);
  text-decoration: none;
  transition: transform var(--speed) var(--ease-bounce), border-color var(--speed) ease;
}
a.chip:hover { transform: translateY(-2px); border-color: var(--sun); color: var(--purple-deep); }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent, var(--pink)); flex: none; }
.chip-solid { background: var(--accent, var(--sun)); border-color: #fff; color: var(--purple-ink); }

/* ---------- Section headers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink-deep);
}
.kicker::before {
  content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--sun);
}
.section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.section-head p.lede { color: var(--ink-soft); font-size: 1.08rem; margin-top: 10px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 249, 239, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--cream-2);
}
.nav-bar {
  max-width: var(--page-max); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 18px;
}
.brand { display: inline-flex; border-radius: var(--r-pill); }
.brand img { height: 54px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--purple-deep); text-decoration: none;
  padding: 9px 15px; border-radius: var(--r-pill);
  transition: background var(--speed) ease, color var(--speed) ease;
}
.nav-links a:hover { background: var(--cream-2); color: var(--pink-deep); }
.nav-links a[aria-current="page"], .nav-links a.active { background: var(--purple-deep); color: #fff; }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { padding: 11px 22px 13px; font-size: 0.98rem; border-width: 3px; }
.nav-toggle {
  display: none; margin-left: auto;
  background: var(--purple-deep); color: #fff; border: 3px solid #fff;
  border-radius: var(--r-md); padding: 10px 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  box-shadow: var(--shadow-soft); cursor: pointer; align-items: center; gap: 8px;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* Mobile full-screen menu (blueprint §5: big targets, no tiny dropdowns) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--purple-deep);
  display: none; flex-direction: column;
  padding: 20px var(--gutter) 40px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu .menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu .menu-top img { height: 60px; width: auto; }
.menu-close {
  background: #fff; color: var(--purple-deep); border: none;
  border-radius: 50%; width: 52px; height: 52px;
  font-size: 1.5rem; font-weight: 800; cursor: pointer;
  display: grid; place-items: center;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; margin-top: 34px; }
.mobile-menu nav a {
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
  padding: 14px 18px; border-radius: var(--r-md);
}
.mobile-menu nav a:hover, .mobile-menu nav a:focus-visible { background: rgba(255,255,255,0.14); color: var(--sun); }
.mobile-menu .menu-foot { margin-top: auto; padding-top: 34px; color: var(--sky-soft); font-weight: 700; }

/* ---------- Scalloped cloud divider ---------- */
.scallop { display: block; width: 100%; height: 44px; color: var(--cream); }
.scallop.flip { transform: scaleY(-1); }
.scallop.to-cream2 { color: var(--cream-2); }
.scallop.to-sky { color: var(--sky-soft); }
.scallop.to-white { color: #fff; }
.scallop svg { width: 100%; height: 100%; display: block; }

/* ---------- Character card ---------- */
.char-card {
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
  padding: 26px 20px 24px; text-align: center;
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform var(--speed) var(--ease-bounce), box-shadow var(--speed) ease;
  position: relative; overflow: hidden;
}
.char-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
  background: var(--accent, var(--pink));
}
.char-card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: var(--shadow-lift); }
.char-card img {
  width: 132px; height: 132px; border-radius: 50%;
  border: 5px solid #fff; object-fit: cover;
  box-shadow: 0 0 0 5px var(--accent, var(--pink)), 0 10px 20px rgba(91,46,145,0.16);
  margin-bottom: 10px;
}
.char-card .char-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--purple-deep); }
.char-card .char-tag { color: var(--ink-soft); font-weight: 700; font-size: var(--fs-small); line-height: 1.35; }

/* ---------- Video / song card ---------- */
.video-card {
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker); overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column;
  transition: transform var(--speed) var(--ease-bounce), box-shadow var(--speed) ease;
}
a.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky-soft); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb .duration {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--purple-ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  padding: 4px 12px; border-radius: var(--r-pill);
}
.video-thumb .play-badge {
  position: absolute; left: 12px; bottom: 12px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--pink-deep); border: 4px solid #fff;
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-soft);
}
.video-thumb .play-badge svg { width: 18px; height: 18px; margin-left: 2px; }
.ribbon {
  position: absolute; left: 12px; top: 12px;
  background: var(--sun); color: var(--purple-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 3px solid #fff; box-shadow: var(--shadow-soft);
}
.ribbon.soon { background: var(--sky-soft); color: var(--purple-deep); }
.video-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.video-body h3 { font-size: 1.25rem; }
.video-body .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.video-card.is-soon { opacity: 0.92; }
.video-card.is-soon .video-thumb img { filter: saturate(0.85); }

/* ---------- Category tile ---------- */
.cat-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sticker); text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 220px; border: var(--sticker-border);
  transition: transform var(--speed) var(--ease-bounce), box-shadow var(--speed) ease;
}
.cat-tile:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-lift); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile .cat-label {
  position: relative; margin: 14px; padding: 14px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 12px;
}
.cat-tile .cat-ic {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--accent, var(--sun));
  display: grid; place-items: center; color: #fff;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(91,46,145,0.2);
}
.cat-tile .cat-ic svg { width: 20px; height: 20px; }
.cat-tile .cat-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--purple-deep); line-height: 1.15; }
.cat-tile .cat-sub { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }

/* ---------- Town map + hotspots ---------- */
.map-wrap { position: relative; }
.map-wrap > img { width: 100%; height: auto; border-radius: calc(var(--r-lg) - 6px); }
.hotspot {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  text-decoration: none; z-index: 2;
}
.hotspot .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink); border: 4px solid #fff;
  box-shadow: 0 0 0 4px rgba(233, 64, 126, 0.35), 0 4px 10px rgba(91,46,145,0.35);
  transition: transform var(--speed) var(--ease-bounce);
}
.hotspot:nth-of-type(3n) .dot { background: var(--purple); box-shadow: 0 0 0 4px rgba(138,79,200,0.35), 0 4px 10px rgba(91,46,145,0.35); }
.hotspot:nth-of-type(3n+1) .dot { background: var(--tangerine); box-shadow: 0 0 0 4px rgba(255,143,60,0.4), 0 4px 10px rgba(91,46,145,0.35); }
.hotspot:hover .dot, .hotspot:focus-visible .dot { transform: scale(1.35); }
@media (prefers-reduced-motion: no-preference) {
  .hotspot .dot { animation: pulse 2.6s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(233,64,126,0.35), 0 4px 10px rgba(91,46,145,0.35); } 50% { box-shadow: 0 0 0 9px rgba(233,64,126,0.12), 0 4px 10px rgba(91,46,145,0.35); } }
}
.hotspot .tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: 12px 16px; width: max-content; max-width: 220px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--speed) ease, transform var(--speed) var(--ease-bounce);
  text-align: center; z-index: 3;
}
.hotspot .tip strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--purple-deep); line-height: 1.2; }
.hotspot .tip small { color: var(--ink-soft); font-weight: 700; font-size: 0.82rem; line-height: 1.3; display: block; margin-top: 2px; }
.hotspot:hover .tip, .hotspot:focus-visible .tip, .hotspot.tip-open .tip {
  opacity: 1; transform: translateX(-50%) scale(1);
}
.hotspot.tip-below .tip { bottom: auto; top: calc(100% + 12px); }
.hotspot.tip-edge-r .tip { left: auto; right: -8px; transform: scale(0.9); transform-origin: bottom right; }
.hotspot.tip-edge-r:hover .tip, .hotspot.tip-edge-r:focus-visible .tip, .hotspot.tip-edge-r.tip-open .tip { transform: scale(1); }
.hotspot.tip-edge-l .tip { left: -8px; right: auto; transform: scale(0.9); transform-origin: bottom left; }
.hotspot.tip-edge-l:hover .tip, .hotspot.tip-edge-l:focus-visible .tip, .hotspot.tip-edge-l.tip-open .tip { transform: scale(1); }

/* ---------- Location vignette card ---------- */
.loc-card {
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  border: var(--sticker-border); box-shadow: var(--shadow-sticker);
  text-decoration: none; display: block; aspect-ratio: 1;
  transition: transform var(--speed) var(--ease-bounce), box-shadow var(--speed) ease;
}
.loc-card:hover { transform: translateY(-5px) rotate(0.8deg); box-shadow: var(--shadow-lift); }
.loc-card img { width: 100%; height: 100%; object-fit: cover; }
.loc-card .loc-name {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(255,255,255,0.96); border-radius: var(--r-md);
  padding: 10px 14px; font-family: var(--font-display); font-weight: 800;
  color: var(--purple-deep); font-size: 1.05rem; text-align: center;
  box-shadow: var(--shadow-soft); line-height: 1.2;
}

/* ---------- Platform tiles (streaming) ---------- */
.platform {
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-sticker);
  padding: 18px 22px; display: flex; align-items: center; gap: 14px;
}
.platform .p-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent, var(--leaf)); flex: none; border: 3px solid var(--cream-2); }
.platform .p-name { font-family: var(--font-display); font-weight: 800; color: var(--purple-deep); font-size: 1.05rem; }
.platform .p-note { margin-left: auto; font-size: 0.82rem; font-weight: 800; color: var(--ink-soft); background: var(--cream-2); padding: 5px 12px; border-radius: var(--r-pill); }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-small); font-weight: 800; }
.crumbs a { color: var(--ink-soft); text-decoration: none; padding: 4px 8px; border-radius: var(--r-pill); }
.crumbs a:hover { color: var(--pink-deep); background: #fff; }
.crumbs .sep { color: var(--sun); }
.crumbs [aria-current] { color: var(--purple-deep); padding: 4px 8px; }

/* ---------- FAQ ---------- */
.faq details {
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); padding: 0;
  margin-bottom: 14px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--purple-deep); padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; width: 30px; height: 30px; flex: none;
  background: var(--sun); color: var(--purple-ink);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; transition: transform var(--speed) ease;
}
.faq details[open] summary::before { content: "–"; transform: rotate(180deg); }
.faq details > div { padding: 0 22px 20px 64px; color: var(--ink); }

/* ---------- Promise / info cards ---------- */
.promise {
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  padding: 22px 24px; border-top: 8px solid var(--accent, var(--sun));
}
.promise h3 { margin-bottom: 8px; }
.promise p { font-size: 0.98rem; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--purple-deep); color: #EFE6FB; }
.footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 64px var(--gutter) 30px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand img { width: 220px; margin-bottom: 16px; }
.footer-brand p { color: #CBB6EE; font-size: 0.98rem; }
.site-footer h4 { color: var(--sun); font-size: 1.02rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul li { margin-bottom: 9px; }
.site-footer ul a { color: #EFE6FB; text-decoration: none; font-weight: 700; }
.site-footer ul a:hover { color: var(--sun); }
.footer-bottom {
  border-top: 2px solid rgba(255,255,255,0.16);
  max-width: var(--page-max); margin: 0 auto;
  padding: 22px var(--gutter) 30px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 0.9rem; color: #CBB6EE; font-weight: 700;
}
.footer-bottom .brand-line { color: var(--sun); font-family: var(--font-display); }

/* ---------- Misc ---------- */
.note-box {
  background: var(--sky-soft); border-radius: var(--r-md);
  padding: 18px 22px; color: var(--purple-ink); font-weight: 700;
  border: 3px dashed #fff; box-shadow: var(--shadow-soft);
}
.big-note { font-size: 1.05rem; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; color: var(--purple-deep); }
.back-link:hover { color: var(--pink-deep); }