@font-face {
  font-family: 'ChoretBubble';
  src: url('https://raw.githubusercontent.com/kynahpics4-ship-it/tff/c2817acfdf63b0b1957b32fc89ebcaa162391091/ChoretFudyngBubbleRegular-3zYPG.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'VT323', monospace;
  color: #f4eeff;
  background: #120c2c;
}

#balloon-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse farthest-corner at 20% 80%, rgba(44, 26, 84, 0.92) 0%, rgba(24, 18, 52, 0.9) 52%, rgba(18, 12, 44, 0.96) 100%),
    radial-gradient(circle at 28% 24%, rgba(105, 224, 255, 0.16) 0%, transparent 32%),
    radial-gradient(circle at 74% 22%, rgba(139, 108, 255, 0.16) 0%, transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(209, 109, 255, 0.14) 0%, transparent 28%),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 22px,
      rgba(111, 88, 180, 0.26) 22px,
      rgba(111, 88, 180, 0.26) 24px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 22px,
      rgba(91, 205, 255, 0.2) 22px,
      rgba(91, 205, 255, 0.2) 24px
    ),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.18) 100%),
    #120c2c;
  backdrop-filter: blur(0.6px) saturate(1.08);
}

.doodle {
  position: absolute;
  font-family: 'Silkscreen', 'VT323', monospace;
  font-size: clamp(1rem, 2.8vw, 1.55rem);
  font-weight: 400;
  color: #9fdcff;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: clip;
  opacity: 0;
  border-right: 2px solid transparent;
  pointer-events: none;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(105, 224, 255, 0.22);
  animation: handwriting 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.doodle::before {
  content: attr(data-text);
  position: absolute;
  width: 0;
  overflow: hidden;
  border-right: 2px solid #69e0ff;
  animation: writeText 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes handwriting {
  0% { opacity: 0; transform: translateY(15px) translateX(10px) rotate(-2deg) scale(0.9); }
  12% { opacity: 1; transform: translateY(-2px) translateX(0) rotate(0deg) scale(1.02); }
  45%, 55% { transform: translateY(-1px) rotate(1deg) scale(1); }
  88% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) translateX(-5px) rotate(1deg) scale(0.95); }
}

@keyframes writeText {
  0% { width: 0; }
  70% { width: 100%; }
  100% { width: 100%; }
}

.doodle-1 { top: 12%; left: 5%; color: #c8b6ff; font-size: clamp(1rem, 2.8vw, 1.45rem); transform: rotate(-8deg); animation-delay: 0s; }
.doodle-2 { top: 28%; right: 6%; color: #69e0ff; font-size: clamp(1rem, 3vw, 1.55rem); transform: rotate(5deg); animation-delay: 2.5s; text-align: right; }
.doodle-3 { top: 32%; left: 22%; color: #d16dff; transform: rotate(-5deg); animation-delay: 5s; }
.doodle-4 { bottom: 22%; right: 10%; color: #8b6cff; transform: rotate(6deg); animation-delay: 1s; text-align: right; }
.doodle-5 { bottom: 12%; left: 4%; color: #ffe66d; font-size: clamp(1rem, 3vw, 1.6rem); transform: rotate(-7deg); animation-delay: 3.8s; }
.doodle-6 { top: 6%; right: 15%; color: #b8a9e6; transform: rotate(9deg); animation-delay: 7s; text-align: right; }

@media (max-width: 480px) {
  .doodle {
    font-size: clamp(0.78rem, 2.3vw, 1rem);
    max-width: 86vw;
  }

  .doodle-1 { left: 4%; top: 10%; }
  .doodle-2 { right: 4%; top: 26%; }
  .doodle-3 { left: 10%; top: 34%; }
  .doodle-4 { right: 8%; bottom: 1%; }
  .doodle-5 { left: 4%; bottom: 10%; }
  .doodle-6 { right: 10%; top: 4%; }
}

.pagedemo {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  animation: fadeInPage 0.9s;
  position: relative;
  z-index: 1;
  padding: 24px;
  box-sizing: border-box;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

.balloon-heading {
  font-family: 'Silkscreen', 'ChoretBubble', monospace;
  font-size: clamp(2rem, 8vw, 4.8rem);
  color: #c8b6ff;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 0.13em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  user-select: none;
  line-height: 1.15;
  max-width: 98vw;
  animation: breathe-bubble 2.9s infinite cubic-bezier(.75,0,.25,1);
  font-weight: 700;
  text-shadow:
    0 0 0 #000,
    0 0 12px rgba(139, 108, 255, 0.35),
    0 0 22px rgba(105, 224, 255, 0.18);
}

@keyframes breathe-bubble {
  0%,100% { transform: scale(1); }
  35% { transform: scale(1.09); }
  65% { transform: scale(1.04); }
}

.layout-page h1,
#layout-frames-page h1,
#layout-frames-page-4stacked h1,
#layout-frames-page-4grid h1,
#layout-frames-page-newspaper h1 {
  font-family: 'Silkscreen', monospace;
  color: #69e0ff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(105, 224, 255, 0.2);
  text-align: center;
}

.emoji-btn {
  background: #24164d;
  border: 2px solid #8b6cff;
  font-size: 2.1rem;
  cursor: pointer;
  padding: 6px 14px;
  color: #ffe66d;
  transition: transform 0.1s, color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  margin: 0 2px;
  border-radius: 12px;
  outline: none;
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(18, 12, 44, 0.7), 0 0 16px rgba(139, 108, 255, 0.16);
}

.emoji-btn:hover,
.emoji-btn:focus {
  color: #120c2c;
  background: #69e0ff;
  border-color: #c8b6ff;
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(105, 224, 255, 0.35);
}

.layout-selection {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.layout-option {
  border: 3px solid #8b6cff;
  border-radius: 14px;
  font-family: 'Silkscreen', monospace;
  font-size: 1rem;
  line-height: 1.8;
  padding: 12px 10px;
  background: #1d1444;
  color: #f4eeff;
  margin: 0 2px;
  transition: box-shadow 0.2s, border 0.2s, background 0.21s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(18, 12, 44, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 84px;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
}

.layout-option:focus,
.layout-option:hover {
  background: #2c1d61;
  box-shadow: 0 0 0 4px rgba(105, 224, 255, 0.22), 0 0 18px rgba(105, 224, 255, 0.16);
  outline: none;
  border-color: #69e0ff;
  transform: translateY(-2px);
}

.layout-option.selected {
  box-shadow: 0 0 0 4px rgba(139, 108, 255, 0.45), 0 0 18px rgba(139, 108, 255, 0.2);
}

.frame-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.frame,
.frame-4stacked,
.frame-4grid,
.frame-newspaper {
  cursor: pointer;
  border: 3px solid #8b6cff;
  border-radius: 16px;
  background: #1d1444;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  margin-right: 6px;
  box-shadow: 0 2px 8px rgba(18, 12, 44, 0.35);
  transition: box-shadow 0.18s, border 0.18s, background 0.18s, transform 0.15s;
  min-width: clamp(100px, 22vw, 180px);
  min-height: clamp(80px, 18vw, 168px);
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
}

.frame.selected,
.frame-4stacked.selected,
.frame-4grid.selected,
.frame-newspaper.selected {
  transform: scale(1.07);
  border: 3.5px solid #69e0ff;
  box-shadow: 0 4px 18px rgba(105, 224, 255, 0.3);
}

.frame img,
.frame-4stacked img,
.frame-4grid img,
.frame-newspaper img {
  width: clamp(110px, 21vw, 180px);
  height: auto;
  display: block;
  border-radius: 13px;
  max-width: 100%;
}

#layout-frames-page-4grid,
#layout-frames-page-4grid .frame-selection {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

#layout-frames-page-4grid .frame-4grid img {
  width: clamp(210px, 42vw, 320px);
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(105, 224, 255, 0.24), 0 0 0 rgba(0,0,0,0.18);
  max-width: 100%;
}

#layout-frames-page-4grid .frame-4grid {
  min-width: 210px;
  min-height: 128px;
  max-width: min(320px, calc(100vw - 48px));
  max-height: 240px;
  margin-bottom: 9px;
  margin-top: 0;
  background: #1d1444;
  margin-right: 0;
}

#layout-frames-page-4grid .frame-selection {
  gap: 24px !important;
}

.controls-single {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

.video-container {
  position: relative;
  display: block;
  width: min(95vw, 425px);
  max-width: 425px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 10px;
  overflow: hidden;
  border-radius: 13px;
  background: #140f31;
  box-shadow: 0 10px 30px rgba(10, 8, 24, 0.5), 0 0 0 2px rgba(139, 108, 255, 0.22);
}

video,
#video-4stacked,
#video-4grid,
#video-newspaper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live preview of the current photo slot's cutout from the actual frame image, cropped
   and scaled to fill the video area. Video is no longer mirrored, so this lines up
   directly with the final photo — the guest can see exactly where the celebrity/
   decoration graphic will land and move to avoid it in real time. */
.frame-slot-overlay {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

#countdown-overlay,
#countdown-overlay-4stacked,
#countdown-overlay-4grid,
#countdown-overlay-newspaper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Silkscreen', monospace;
  font-size: 62px;
  color: #ffe66d;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 230, 109, 0.45), 2px 2px 0 rgba(0,0,0,0.55);
  display: none;
  z-index: 9;
}

.flash-overlay {
  position: absolute;
  inset: 0;
  background: #f8f2ff;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity 0.2s ease-out;
}

.flash-overlay.active {
  opacity: 0.9;
}

.instructions {
  font-family: 'VT323', monospace;
  font-size: 1.65em;
  letter-spacing: 0.02em;
  text-align: center;
  color: #f4eeff;
  background: rgba(29, 20, 68, 0.92);
  border-radius: 12px;
  border: 2px solid rgba(139, 108, 255, 0.5);
  margin-bottom: 10px;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 14px;
  display: block;
  box-shadow: 0 0 14px rgba(105, 224, 255, 0.08);
  box-sizing: border-box;
}

.strip img,
.strip-4stacked img,
.strip-4grid img {
  width: 34vw;
  max-width: 195px;
  min-width: 82px;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 14px;
  background: #1d1444;
  box-shadow: 0 12px 22px rgba(8, 6, 20, 0.45), 0 0 0 2px rgba(200, 182, 255, 0.16);
}

@media (max-width: 500px) {
  .strip img,
  .strip-4stacked img {
    width: 70vw;
    max-width: 165px;
    min-width: 70px;
    margin: 5px auto;
  }
}

.strip-4grid img {
  width: 76vw;
  max-width: 680px;
  min-width: 220px;
  margin: 18px auto;
  border-radius: 13px;
}

@media (max-width: 700px) {
  .strip-4grid img {
    width: 99vw;
    max-width: 400px;
    min-width: 100px;
    margin: 7px auto;
  }
}

.strip-newspaper img {
  width: 55vw;
  max-width: 320px;
  min-width: 160px;
  height: auto;
  display: block;
  margin: 14px auto;
  border-radius: 13px;
  background: #1d1444;
  box-shadow: 0 12px 22px rgba(8, 6, 20, 0.45), 0 0 0 2px rgba(200, 182, 255, 0.16);
}

@media (max-width: 500px) {
  .strip-newspaper img {
    width: 78vw;
    max-width: 280px;
    min-width: 140px;
    margin: 8px auto;
  }
}

.controls {
  display: flex;
  gap: 13px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
  width: 100%;
}

#progress-bar,
#progress-bar-4,
#progress-bar-4grid {
  height: 19px;
  width: min(81%, 420px);
  background: #0f0a24;
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 13px;
  display: block;
  box-shadow: 0 0 0 2px rgba(139, 108, 255, 0.2), 0 0 8px rgba(8, 6, 20, 0.6);
}

#progress-fill,
#progress-fill-4,
#progress-fill-4grid {
  background: linear-gradient(90deg, #69e0ff, #8b6cff, #d16dff);
  width: 0;
  height: 100%;
  transition: width 0.4s;
  border-radius: 13px;
}

#qr-box,
#qr-box-4,
#qr-box-4grid,
#qr-box-newspaper {
  margin: 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130px;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  font-weight: 400;
  color: #c8b6ff;
  width: 100%;
  text-align: center;
}

.controls button,
.controls-single button {
  font-size: 1.9rem;
}

@media (max-width: 420px) {
  .layout-option {
    font-size: 0.9rem;
  }

  .balloon-heading {
    max-width: 92vw;
  }

  .instructions {
    max-width: 92vw;
  }

  #progress-bar,
  #progress-bar-4,
  #progress-bar-4grid {
    width: 92vw;
  }
}
/* --- Spotlight banner (layout page) --- */
.spotlight-banner {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 22px;
  padding: 12px;
  background: #1d1444;
  border: 2.5px solid #ffe66d;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 230, 109, 0.28), 0 0 0 2px rgba(139, 108, 255, 0.18);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: spotlightPulse 2.4s infinite ease-in-out;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
}

.spotlight-banner:hover,
.spotlight-banner:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 22px rgba(255, 230, 109, 0.4), 0 0 0 2px rgba(105, 224, 255, 0.3);
}

@keyframes spotlightPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 230, 109, 0.28), 0 0 0 2px rgba(139, 108, 255, 0.18); }
  50% { box-shadow: 0 0 24px rgba(255, 230, 109, 0.45), 0 0 0 2px rgba(139, 108, 255, 0.3); }
}

.spotlight-badge {
  position: absolute;
  top: -12px;
  left: -12px;
  font-family: 'Silkscreen', monospace;
  font-size: 0.8rem;
  color: #120c2c;
  background: #ffe66d;
  border-radius: 8px;
  padding: 4px 9px;
  letter-spacing: 0.03em;
  transform: rotate(-8deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

#spotlight-banner-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(58vw, 220px);
  max-height: min(50vh, 320px);
  border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(105, 224, 255, 0.25);
}

/* --- Admin login page --- */
.admin-code-input {
  font-family: 'Silkscreen', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2.5px solid #8b6cff;
  background: #1d1444;
  color: #f4eeff;
  width: min(80vw, 260px);
  outline: none;
  box-sizing: border-box;
}

.admin-code-input:focus {
  border-color: #69e0ff;
  box-shadow: 0 0 12px rgba(105, 224, 255, 0.3);
}

.admin-error {
  font-family: 'VT323', monospace;
  color: #ff6d8b;
  font-size: 1.2rem;
  text-align: center;
  margin: 10px 0 0;
}

/* --- Admin spotlight manager --- */
.admin-frame-list {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.admin-group-title {
  font-family: 'Silkscreen', monospace;
  color: #69e0ff;
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 14px 0 4px;
  text-align: center;
}

.admin-frame-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.admin-frame-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 3px solid #8b6cff;
  border-radius: 12px;
  background: #1d1444;
  padding: 6px;
  cursor: pointer;
  transition: border 0.18s, box-shadow 0.18s, transform 0.15s;
}

.admin-frame-btn img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}

.admin-frame-btn span {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: #f4eeff;
}

.admin-frame-btn.selected {
  border-color: #ffe66d;
  box-shadow: 0 0 14px rgba(255, 230, 109, 0.4);
  transform: scale(1.05);
}

/* --- Admin: add new frame form --- */
.admin-add-frame {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.admin-add-frame .admin-group-title {
  width: 100%;
  margin: 0 0 4px;
}

.admin-select,
.admin-text-input {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid #8b6cff;
  background: #140f31;
  color: #f4eeff;
  outline: none;
  box-sizing: border-box;
}

.admin-select:focus,
.admin-text-input:focus {
  border-color: #69e0ff;
}

.admin-text-input {
  flex: 1 1 160px;
  min-width: 140px;
}

.admin-empty-note {
  font-family: 'VT323', monospace;
  color: #9a8fc2;
  font-size: 1rem;
  margin: 4px 0 14px;
  text-align: center;
}

/* --- Admin: frame library rows --- */
.admin-frame-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 auto 8px;
  box-sizing: border-box;
  flex-wrap: wrap;
  transition: opacity 0.2s;
}

.admin-frame-item.disabled {
  opacity: 0.45;
}

.admin-frame-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.admin-frame-label {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #f4eeff;
  flex: 1 1 90px;
  min-width: 70px;
}

.admin-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: #c8b6ff;
  cursor: pointer;
}

.admin-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #69e0ff;
  cursor: pointer;
}

.admin-mini-btn {
  border: 2px solid #8b6cff;
  border-radius: 10px;
  background: #140f31;
  color: #f4eeff;
  font-size: 1.1rem;
  padding: 4px 9px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}

.admin-mini-btn:hover {
  transform: scale(1.08);
  border-color: #69e0ff;
}

.spotlight-toggle-btn.active {
  background: #ffe66d;
  border-color: #ffe66d;
  color: #120c2c;
}

.delete-btn:hover {
  border-color: #ff6d8b;
}

.edit-date-btn.active {
  background: #69e0ff;
  border-color: #69e0ff;
  color: #120c2c;
}

/* --- Admin: live date overlay editor --- */
.admin-date-editor {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 12px;
  padding: 14px;
  background: #140f31;
  border: 2px dashed #8b6cff;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.date-editor-preview-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.date-editor-canvas {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(105, 224, 255, 0.25);
  background: #cfcac0;
}

.date-editor-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.date-editor-controls .de-color {
  width: 44px;
  height: 38px;
  border-radius: 8px;
  border: 2px solid #8b6cff;
  background: #140f31;
  padding: 2px;
  cursor: pointer;
}

.date-editor-controls .de-save {
  width: 100%;
}

/* --- Blind Box event card: deliberately different vibe from the regular layout grid --- */
.blindbox-event-card {
  position: relative;
  width: min(92vw, 420px);
  margin: 0 auto 22px;
  border-radius: 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #2d1b4e 0%, #4a1f6b 35%, #7a2d8f 70%, #c2185b 100%);
  border: 2.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(255, 215, 100, 0.5), 0 8px 28px rgba(122, 45, 143, 0.5), 0 0 34px rgba(255, 105, 180, 0.25);
  animation: blindboxFloat 3.2s ease-in-out infinite, blindboxGlow 2.4s ease-in-out infinite;
  transition: transform 0.15s;
}

.blindbox-content {
  position: relative;
  padding: 20px 18px;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
}

.blindbox-event-card:hover,
.blindbox-event-card:focus {
  transform: scale(1.03);
}

@keyframes blindboxFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes blindboxGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 100, 0.5), 0 8px 28px rgba(122, 45, 143, 0.5), 0 0 34px rgba(255, 105, 180, 0.25); }
  50% { box-shadow: 0 0 0 2px rgba(255, 215, 100, 0.8), 0 8px 32px rgba(122, 45, 143, 0.65), 0 0 48px rgba(255, 105, 180, 0.4); }
}

.blindbox-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.22) 42%, rgba(255, 230, 150, 0.3) 48%, transparent 60%);
  background-size: 250% 250%;
  animation: blindboxShimmer 3.6s linear infinite;
  pointer-events: none;
}

@keyframes blindboxShimmer {
  0% { background-position: -120% -120%; }
  100% { background-position: 120% 120%; }
}

.blindbox-icon {
  font-size: 2.6rem;
  animation: blindboxWiggle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

@keyframes blindboxWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-8deg) scale(1.05); }
  20% { transform: rotate(8deg) scale(1.05); }
  30% { transform: rotate(-4deg) scale(1); }
  40% { transform: rotate(0deg) scale(1); }
}

.blindbox-title {
  font-family: 'Silkscreen', monospace;
  font-size: 1.15rem;
  color: #ffe66d;
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-shadow: 0 0 12px rgba(255, 230, 109, 0.4);
}

.blindbox-subtitle {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  color: #f4eeff;
  margin-top: 4px;
}

/* --- Admin: reorder buttons + move-to-layout dropdown --- */
.admin-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-reorder-btns .admin-mini-btn {
  padding: 2px 8px;
  font-size: 0.85rem;
}

.admin-reorder-btns .admin-mini-btn:disabled {
  opacity: 0.25;
  cursor: default;
  transform: none;
}

.move-layout-select {
  max-width: 150px;
  font-size: 0.85rem;
  padding: 6px 8px;
}

/* --- Admin: top-level accordion sections --- */
.admin-section {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 10px;
}

.admin-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Silkscreen', monospace;
  font-size: 0.95rem;
  color: #f4eeff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}

.admin-section-header:hover,
.admin-section-header:focus {
  border-color: #69e0ff;
  background: #241a52;
}

.admin-section-header.open {
  border-color: #69e0ff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.admin-section-header .accordion-chevron {
  font-size: 0.8rem;
  color: #69e0ff;
  transition: transform 0.2s;
}

.admin-section-header.open .accordion-chevron {
  transform: rotate(90deg);
}

.admin-section-body {
  background: #140f31;
  border: 2px solid #69e0ff;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- Admin: per-layout frame group accordion (inside Frame Library) --- */
.admin-group-header {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #241a52;
  border: 2px solid #8b6cff;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Silkscreen', monospace;
  font-size: 0.9rem;
  color: #69e0ff;
  cursor: pointer;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.admin-group-header:hover,
.admin-group-header:focus {
  border-color: #69e0ff;
}

.admin-group-header span:first-child {
  flex: 1;
  text-align: left;
}

.admin-group-count {
  background: #1d1444;
  color: #ffe66d;
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 8px;
  border: 1.5px solid #ffe66d;
}

.admin-group-header .accordion-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.admin-group-header.open .accordion-chevron {
  transform: rotate(90deg);
}

.admin-group-body {
  margin-bottom: 12px;
}

/* --- Admin: photo vault pagination --- */
.admin-vault-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
}

.admin-vault-pagination .admin-mini-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.admin-vault-page-label {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  color: #c8b6ff;
}

/* --- Live cam clip rows on result pages --- */
.video-clips-box {
  width: 100%;
  max-width: 420px;
  margin: 6px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-clip-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 12px;
  padding: 12px;
}

.video-clip-label {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  color: #f4eeff;
}

.video-clip-status {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: #9a8fc2;
}

.video-clip-qr {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-clip-download {
  font-family: 'Silkscreen', monospace;
  font-size: 0.8rem;
  text-decoration: none;
}

/* --- Live cam build/upload progress bar --- */
.livecam-progress-bar {
  width: 100%;
  max-width: 320px;
  height: 14px;
  margin: 0 auto;
  background: #0f0a24;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(139, 108, 255, 0.2), 0 0 8px rgba(8, 6, 20, 0.6);
}

.livecam-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #69e0ff, #8b6cff, #d16dff);
  border-radius: 9px;
  transition: width 0.1s linear;
}

.livecam-progress-fill.indeterminate {
  width: 40% !important;
  transition: none;
  animation: livecamIndeterminate 1.2s infinite ease-in-out;
}

@keyframes livecamIndeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ================= Wall of Frame ================= */

.wall-collection-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 20px;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 999px;
  font-family: 'Silkscreen', 'VT323', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: #c8b6ff;
  cursor: pointer;
  transition: transform 0.15s, color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 2px rgba(18, 12, 44, 0.7), 0 0 14px rgba(139, 108, 255, 0.14);
}

.wall-collection-btn:hover,
.wall-collection-btn:focus {
  color: #120c2c;
  background: #69e0ff;
  border-color: #c8b6ff;
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(105, 224, 255, 0.35);
  outline: none;
}

.wall-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  position: relative;
  margin-bottom: 14px;
}

.wall-header #wall-back-btn {
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 1.3rem;
}

/* Justified gallery: every card shares the same CSS custom-property height
   (--wall-row-h) regardless of layout; each card's own --wall-aspect (set inline
   per photo in JS) determines its width, so a tall 3-stacked strip, a wide 2x2
   grid, and a portrait newspaper frame all line up on the same row height without
   cropping or stretching any of them. */
.wall-board {
  --wall-row-h: 230px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 30px 40px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(105, 224, 255, 0.05) 0 24px, rgba(105, 224, 255, 0.015) 24px 48px),
    #1a1240;
  border: 2px solid #8b6cff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 200px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .wall-board { --wall-row-h: 160px; padding: 26px 18px 32px; }
}

.wall-loading {
  width: 100%;
  text-align: center;
}

.wall-pin-card {
  position: relative;
  height: var(--wall-row-h);
  width: calc(var(--wall-row-h) * var(--wall-aspect, 0.44));
  /* No overlap now — cards get real breathing room, and there's no white matting
     around the photo itself, just the shadow/rotation for the pinned-up feel. */
  margin: 22px 26px 30px;
  padding: 0;
  background: transparent;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--wall-rotate, 0deg)) translateY(var(--wall-lift, 0px));
  z-index: var(--wall-z, 1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0.2s;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .wall-pin-card { margin: 14px 16px 20px; }
}

.wall-pin-card:hover {
  transform: rotate(0deg) translateY(calc(var(--wall-lift, 0px) - 4px)) scale(1.04);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.wall-pin-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.wall-pin {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d16dff, #6b3fb8 70%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.wall-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 20, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  box-sizing: border-box;
}

.wall-lightbox.hidden {
  display: none;
}

.wall-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(480px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.wall-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #8b6cff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

.wall-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- Post-upload consent prompt, shown right under the QR code --- */
.consent-box {
  width: 100%;
  max-width: 320px;
  margin: 10px auto 0;
  text-align: center;
}

.consent-question {
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  color: #c8b6ff;
  margin: 0 0 8px;
}

.consent-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.consent-btn {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  border: 2px solid #8b6cff;
  border-radius: 10px;
  background: #140f31;
  color: #f4eeff;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s;
}

.consent-btn:hover {
  transform: scale(1.05);
  border-color: #69e0ff;
}

.consent-btn.consent-no {
  border-color: #ff6d8b;
}

.consent-result {
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  color: #9fe6a0;
  margin: 0;
}

/* --- Admin: consent badge + wall toggle inside the guest-photos gallery rows --- */
.consent-badge-row {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #8b6cff;
  white-space: nowrap;
}

.consent-badge-pending {
  color: #ffe66d;
  border-color: #ffe66d;
}

.consent-badge-approved {
  color: #9fe6a0;
  border-color: #9fe6a0;
}

.consent-badge-declined {
  color: #ff6d8b;
  border-color: #ff6d8b;
}

.admin-wall-toggle.on-wall {
  background: #2a5c34;
  border-color: #9fe6a0;
  color: #eafff0;
}

/* --- Admin: category grouping labels --- */
.admin-category-label {
  width: 100%;
  max-width: 560px;
  margin: 18px auto 8px;
  padding-left: 4px;
  font-family: 'Silkscreen', 'VT323', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #69e0ff;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(139, 108, 255, 0.4);
  padding-bottom: 4px;
}

.admin-category-label:first-of-type {
  margin-top: 6px;
}

/* ================= Wall subnote + welcome button spacing ================= */

.wall-subnote {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: #a99bd8;
  text-align: center;
  max-width: 420px;
  margin: 0 auto 6px;
}

.suggestion-entry-btn {
  margin-top: 10px;
}

/* ================= Suggestion Box ================= */

.suggestion-form-box {
  flex-direction: column;
  align-items: stretch;
}

.suggestion-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font-family: 'VT323', monospace;
}

.suggestion-contact-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-contact-row .admin-select {
  flex: 1 1 130px;
}

.suggestion-contact-row #suggestion-platform-other-input {
  flex: 1 1 130px;
}

.suggestion-contact-row #suggestion-contact-input {
  flex: 2 1 160px;
}

.suggestion-thanks-box {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 14px;
  text-align: center;
}

.suggestion-thanks-text {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  color: #f4eeff;
  margin: 0;
}

/* ================= Admin: suggestions list ================= */

.suggestion-admin-row {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 10px;
  padding: 12px 14px;
  background: #1d1444;
  border: 2px solid #8b6cff;
  border-radius: 12px;
  text-align: left;
}

.suggestion-admin-idea {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #f4eeff;
  margin: 0 0 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.suggestion-admin-meta {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: #69e0ff;
  margin: 0;
}