/* Shared engine chrome: mute, toast, extras tray, view-transition helpers. */
:root {
  --fun-bg: #fbf7f2;
  --fun-ink: #2b2622;
  --fun-accent: #9c4221;
  --fun-navy: #24324a;
  --fun-header-offset: 4.25rem;
}

/* Toasts: top, under the site header, with safe-area. Avoids covering
   bottom toy controls at 390. Host stays aria-live via .fun-toast. */
.fun-toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--fun-header-offset));
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 80;
  width: min(22rem, calc(100vw - 2rem));
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.fun-toast-host .fun-toast {
  pointer-events: auto;
}

.fun-toast {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: var(--fun-navy);
  color: #fbf7f2;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(36, 50, 74, 0.18);
}

.fun-toast-msg {
  margin: 0;
  flex: 1;
  font: 400 1rem/1.4 system-ui, sans-serif;
}

/* Mute: small fixed corner chip below the holiday banner.
   Deploys & Storage owns --pgg-banner-h; engine measures .strip if unset. */
[data-fun-sfx] {
  position: fixed;
  top: calc(var(--pgg-banner-h, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 0.65rem);
  z-index: 75;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  max-width: 5.5rem;
  padding: 0.35rem 0.45rem;
  border: 1.5px solid rgba(36, 50, 74, 0.55);
  background: rgba(255, 255, 255, 0.92);
  color: var(--fun-navy);
  font: 600 0.7rem/1.15 system-ui, sans-serif;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(36, 50, 74, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: normal;
  text-align: center;
}

[data-fun-sfx][aria-pressed="true"] {
  background: var(--fun-navy);
  color: #fbf7f2;
  border-color: var(--fun-navy);
}

.fun-toast-dismiss,
[data-fun-share-download],
[data-fun-share-native],
[data-fun-share-copy] {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--fun-navy);
  background: #fff;
  color: var(--fun-navy);
  font: 600 1rem/1.2 system-ui, sans-serif;
  border-radius: 0.4rem;
  cursor: pointer;
}

.fun-toast-dismiss {
  border-color: #fbf7f2;
  background: transparent;
  color: #fbf7f2;
}

.fun-toast-dismiss:focus-visible,
[data-fun-sfx]:focus-visible,
[data-fun-share-download]:focus-visible,
[data-fun-share-native]:focus-visible,
[data-fun-share-copy]:focus-visible,
.fun-engine-btn:focus-visible {
  outline: 3px solid var(--fun-accent);
  outline-offset: 2px;
}

.fun-extras-tray[hidden],
.fun-toast-host[hidden] {
  display: none;
}

.fun-extras-tray {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #d9cfc4;
  border-radius: 0.5rem;
}

.fun-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fun-share-preview {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  border: 1px solid #d9cfc4;
  background: var(--fun-bg);
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .fun-view-enter {
    animation: fun-enter both;
    animation-timeline: view();
    animation-range: entry;
  }
}

@keyframes fun-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fun-view-enter,
  .fun-parallax {
    animation: none;
    transform: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.15s;
    animation-timing-function: ease;
  }
}