.celebration-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.celebration-controls button { background: var(--surface); color: var(--muted); border: 1px solid var(--line); font-size: 12px; padding: 6px 10px; min-height: 36px; }
.celebration-controls button[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); }
.celebration { position: fixed; z-index: 200; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84vw; height: 80vh; background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; pointer-events: none; text-shadow: 0 3px 7px #000, 0 0 22px #000; }
.celebration-symbol { display: block; font-size: 38vmin; line-height: 1.1; transform-origin: 50% 15%; filter: drop-shadow(0 8px 16px #000); }
.celebration h2 { font-family: Anton, sans-serif; font-size: 7vmin; line-height: 1.2; color: #f5c62e; text-transform: uppercase; font-weight: 400; max-width: 100%; }
.celebration p { font-size: 5vmin; line-height: 1.2; margin-top: 12px; overflow-wrap: anywhere; color: #fff; max-width: 100%; }
#confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 201; }
@media (prefers-reduced-motion: no-preference) {
  .celebration.bell.moving .celebration-symbol { animation: bell-ring .45s ease-in-out infinite; }
  @keyframes bell-ring { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 600px) {
  .celebration-controls button { min-height: 28px; padding: 2px 8px; font-size: 11px; }
}