/* ---------- PHOTOBOOTH ---------- */

.pb-back-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  background: var(--white);
  color: var(--brown);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.photobooth-hero {
  min-height: 0;
  padding-top: 4rem;
  padding-bottom: 1rem;
}

#pb-capture-area {
  position: relative;
  z-index: 2;
  padding-top: 2rem;
}

.arch-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--brown);
}

#pb-result-preview {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 0.5rem;
}

.pb-hint {
  position: relative;
  z-index: 2;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green);
  margin: 0.75rem 0 1.25rem;
}

.pb-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.pb-btn-icon,
.pb-btn-icon-spacer {
  width: 48px;
  height: 48px;
}

.pb-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.pb-btn-icon:hover {
  transform: translateY(-2px);
}

.pb-btn-capture {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--white);
  border: 5px solid var(--gold);
  cursor: pointer;
  box-shadow: var(--shadow);
  position: relative;
}

.pb-btn-capture::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.pb-btn-capture:hover {
  transform: translateY(-2px);
}

.pb-btn-capture:active::after {
  background: var(--blue-dark);
}

.pb-result-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

#pb-controls[hidden],
#pb-result-actions[hidden],
.pb-result-actions .btn[hidden],
#pb-result-preview[hidden],
.pb-caption[hidden],
.arch-photo video[hidden],
#pb-pattern-source[hidden],
#pb-grass-source[hidden] {
  display: none;
}

.pb-result-actions .btn {
  margin: 0;
  width: min(80vw, 260px);
}

.pb-caption {
  margin: -0.3rem 0 0.3rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--blue-dark);
  text-align: center;
  max-width: 260px;
}

.pb-status {
  position: relative;
  z-index: 2;
  min-height: 1.4em;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blue-dark);
  margin: 0 0 1rem;
  max-width: 300px;
}

.pb-status.err {
  color: var(--error);
}

.pb-status.ok {
  color: var(--green);
}

/* Photobooth's capture area ends right after the name (no blurb/badges/
   countdown/CTA below it like the main hero), so the dinos need to sit
   much lower to clear "ALBARRU" -- they're allowed to overlap the camera
   controls row since that row isn't part of the captured photo. Line the
   small egg dino up with the same bottom edge as the two big dinos. */
.photobooth-hero .dino-bl,
.photobooth-hero .dino-br,
.photobooth-hero .dino-egg {
  bottom: -260px;
}

/* Balloon cluster and title position were tuned for index.html's taller
   hero-stage; photobooth's shorter capture-area (plus its extra top
   padding) shifts the proportions, so the balloon needs to sit lower to
   clear the title text. */
.photobooth-hero .theme-balloon-cluster {
  top: 22%;
}

/* Center the small egg dino between the two big dinos instead of the
   index.html position (which intentionally hugs dino-bl there). */
.photobooth-hero .dino-egg {
  left: 50%;
  transform: translateX(-50%);
}