/* Pop-up panels, celebrations, toasts, confetti */

html.has-modal { overflow: hidden; }

.modal {
  padding: 0; border: 0; background: transparent; color: var(--text);
  max-width: min(520px, calc(100vw - 2 * var(--gutter)));
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: visible;
}
.modal::backdrop { background: rgb(18 19 22 / .55); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in var(--dur) var(--ease-bounce); }
.modal.is-closing { animation: modal-out 160ms ease-in forwards; }
.modal__sheet {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--border), var(--shadow-float);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.modal__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5);
  background: var(--surface);
}
.modal__head h2 { margin: 0; font-size: var(--step-2); }
.modal__body { padding: 0 var(--s-5) var(--s-5); }
.modal__close { flex: none; font-size: 1rem; font-weight: 800; }

@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }

/* On phones, panels rise from the bottom like an iOS sheet */
@media (max-width: 600px) {
  .modal:not(.modal--celebrate) { margin: auto 0 0; max-width: 100vw; }
  .modal:not(.modal--celebrate) .modal__sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-float); }
}

/* ---------- Celebration ---------- */
.modal--celebrate { max-width: min(400px, calc(100vw - 2 * var(--gutter))); }
.modal--celebrate .modal__body { padding: 0; }
.celebrate {
  display: grid; justify-items: center; text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.celebrate__art {
  position: relative;
  display: grid; place-items: center;
  width: 168px; height: 168px;
}
.celebrate__art::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c) 26%, var(--surface));
  animation: halo-in 420ms var(--ease-bounce) both;
}
.celebrate__art taco-gecko { position: relative; }
.celebrate__badge {
  position: absolute; right: -2px; top: 4px;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--c);
  box-shadow: 0 3px 0 color-mix(in oklab, var(--c) 60%, black);
  font-size: 1.7rem; line-height: 1;
  animation: pop-in 500ms var(--ease-bounce) 140ms both;
}
@keyframes halo-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.celebrate h2 { font-size: var(--step-4); margin: var(--s-3) 0 var(--s-2); }
.celebrate p { color: var(--text-2); margin: 0 0 var(--s-5); font-size: var(--step-1); }
@keyframes pop-in { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
  display: grid; gap: var(--s-2); justify-items: center;
  width: min(92vw, 440px);
  pointer-events: none;
}
@media (min-width: 960px) { .toasts { bottom: 28px; left: calc(50% + var(--rail-w) / 2); } }
.toasts[popover] { margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; top: auto; right: auto; height: auto; }
.toasts[popover]:not(:popover-open) { display: none; }
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--text); color: var(--bg);
  font-weight: 700; font-size: 0.95rem;
  box-shadow: var(--shadow-float);
  animation: toast-in 260ms var(--ease-bounce);
}
.toast.is-leaving { animation: toast-out 260ms ease-in forwards; }
.toast__emoji { font-size: 1.3rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483647; display: none; }
.confetti[popover] { margin: 0; padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: hidden; }
.confetti:popover-open { display: block; }

taco-gecko { flex: none; }