/* Thank-you page after the party: thanks card, photo albums, full-screen viewer. */
.thanks { text-align: center; }
/* .box h2 sets a small flex heading for all cards; the thank-you title is the big wordart */
.box h2.thanks-title { display: block; font-size: clamp(48px, 15vw, 84px); margin: 4px 0 14px; color: var(--sun); }
.box h2.thanks-title small { font-size: .42em; margin-top: 4px; }
.thanks p { font-size: 17px; line-height: 1.45; margin: 0 0 10px; }
.thanks .sign { margin-top: 14px; font-weight: 900; color: var(--hot); font-size: 18px; }

.album-tabs { display: flex; gap: 8px; margin: 4px 0 8px; }
.album-tabs button {
  flex: 1; padding: 12px 8px; font: 900 16px var(--comic); background: #eee; border: 3px outset #ccc; cursor: pointer; color: #000;
}
.album-tabs button b { color: var(--hot); }
.album-tabs button.on { background: var(--sun); border-style: inset; }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.ptile { position: relative; padding: 0; border: 3px solid #000; background: #eee; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.ptile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptile.video::after {
  content: "\25B6"; position: absolute; right: 4px; bottom: 4px; background: #000; color: var(--lime);
  font-size: 12px; padding: 2px 6px; border: 2px solid var(--lime);
}
.album-empty { text-align: center; font-weight: 700; margin: 18px 0 6px; }

/* full-screen viewer */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 900; background: #000; display: flex; align-items: center; justify-content: center; }
.lb-stage { position: absolute; inset: 0 0 calc(env(safe-area-inset-bottom) + 64px); display: flex; align-items: center; justify-content: center; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: rgba(0, 0, 0, .55);
  color: #fff; font: 900 30px/1 var(--comic); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lb-close { top: calc(env(safe-area-inset-top) + 12px); right: 12px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font-weight: 700; font-size: 14px; background: #000;
}
.lb-bar .btn { width: auto; margin: 0; }

.danke-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 950; }