/* =========================================
   RESET E CONFIGURAÇÕES GERAIS
   ========================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  font-family: 'Varela Round', sans-serif;
}

/* =========================================
   CONTAINER DE MÍDIA (FOTO/VÍDEO)
   ========================================= */
#media-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* --- ESTILO POLAROID (Moldura) --- */
#polaroid-frame {
  transform: rotate(2deg);
  display: none;
  overflow: visible;
  max-width: 90vw;
  max-height: 85vh;
  box-sizing: border-box;
}

/* Imagens e video dentro da polaroid */
#slideshow-image-a, #slideshow-image-b {
  max-width: min(80vw, 1200px);
  max-height: min(65vh, 900px);
  width: auto;
  height: auto;
  display: none;
  opacity: 0;
}

#slideshow-video {
  max-width: min(80vw, 1200px);
  max-height: min(65vh, 900px);
  width: auto;
  height: auto;
  display: none;
  opacity: 0;
}

#slideshow-image-a, #slideshow-image-b, #slideshow-video {
  transition: opacity .18s ease;
}

/* Texto da Polaroid */
#polaroid-text {
  width: 100%;
  text-align: center;
  color: #333;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: clamp(0.9rem, 2.5vw, 2rem);
  background-color: transparent;
  padding: clamp(8px, 1.5vh, 15px) 5px clamp(12px, 2vh, 25px) 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#polaroid-sender {
  color: rgba(0,0,0,0.55);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  text-align: center;
}

/* Polaroid meta container */
.polaroid-meta {
  margin-top: clamp(4px, 1vh, 16px);
}

/* =========================================
   LETREIRO NEON VINTAGE 80s
   ========================================= */
#neon-sign-wrapper {
  position: absolute;
  top: clamp(8px, 3vh, 60px);
  left: clamp(8px, 3vw, 50px);
  transform: rotate(-2deg);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  max-width: 50vw;
}

.neon-acrylic-board {
  background-color: rgba(0, 0, 0, 0.7);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  border: clamp(2px, 0.4vw, 4px) solid #111;
  border-bottom: clamp(3px, 0.5vw, 6px) solid #333;
  border-radius: clamp(8px, 1.5vw, 15px);
  padding: clamp(10px, 2vw, 25px) clamp(15px, 3vw, 50px);
  box-shadow:
    0 clamp(8px, 2vw, 20px) clamp(20px, 4vw, 50px) rgba(0,0,0,0.8),
    inset 0 0 clamp(15px, 3vw, 40px) rgba(0,0,0,0.8);
}

.neon-text {
  font-family: 'Tilt Neon', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: clamp(1px, 0.2vw, 2px);
  margin-bottom: clamp(2px, 0.5vw, 5px);
  text-align: center;
}

.neon-text.orange {
  font-size: clamp(1rem, 3vw, 3rem);
  color: #ffe8cc;
  text-shadow:
    0 0 2px #fff,
    0 0 8px #ff7b00,
    0 0 20px #ff7b00,
    0 0 40px #ff0000;
  animation: flicker 4s infinite alternate;
}

.neon-text.yellow {
  font-size: clamp(1.2rem, 3.5vw, 4rem);
  margin-top: clamp(2px, 0.5vw, 5px);
  color: #ffffcc;
  text-shadow:
    0 0 2px #fff,
    0 0 8px #ffcc00,
    0 0 20px #ffcc00,
    0 0 40px #ffae00;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.8; }
}

/* Fios de sustentacao */
.wire-left, .wire-right {
  position: absolute;
  top: -100vh;
  bottom: 100%;
  width: clamp(2px, 0.3vw, 3px);
  background: #222;
  box-shadow: 1px 0 2px rgba(255,255,255,0.1);
  z-index: -1;
}

.wire-left { left: clamp(15px, 4vw, 40px); }
.wire-right { right: clamp(15px, 4vw, 40px); }

/* =========================================
   QR CODE / ONBOARDING
   ========================================= */
#initial-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  max-width: min(90vw, 600px);
  padding: clamp(1rem, 3vw, 2rem);
  z-index: 100;
}

#qr-code-image {
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  margin-bottom: clamp(10px, 2vh, 20px);
  width: clamp(160px, 30vmin, 300px);
  height: clamp(160px, 30vmin, 300px);
}

#instruction-text {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(0.85rem, 2vw, 1.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 30px);
  border-radius: 50px;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  margin-top: clamp(10px, 2vh, 20px);
}

/* =========================================
   LOGO
   ========================================= */
#logo {
  position: absolute;
  bottom: clamp(10px, 2vh, 20px);
  right: clamp(10px, 2vw, 20px);
  z-index: 1000;
  width: clamp(60px, 10vmin, 120px);
  opacity: 0.7;
}

#partner-logo {
  position: absolute;
  bottom: clamp(10px, 2vh, 20px);
  left: clamp(10px, 2vw, 20px);
  z-index: 1000;
  width: clamp(60px, 10vmin, 120px);
  max-height: clamp(40px, 8vmin, 80px);
  object-fit: contain;
  opacity: 0.85;
}

/* =========================================
   BADGE IA
   ========================================= */
#highlight-badge {
  position: absolute;
  top: clamp(4px, 1vw, 10px);
  left: clamp(-8px, -1vw, -10px);
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 8px);
  padding: clamp(4px, 0.6vw, 6px) clamp(6px, 1vw, 12px);
  border-radius: 4px;
  background: #facc15;
  color: #000;
  font-weight: 800;
  z-index: 50;
  transform: rotate(-15deg);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
  border: 2px solid #fff;
}

#highlight-badge .star {
  color: #000;
  font-size: clamp(12px, 1.5vw, 18px);
}

#highlight-score {
  font-size: clamp(11px, 1.3vw, 16px);
  font-family: 'Courier New', monospace;
}

#highlight-badge .label {
  text-transform: uppercase;
  font-size: clamp(8px, 1vw, 12px);
}

#highlight-badge.hidden { display: none; }

/* =========================================
   LAYOUT FULLSCREEN
   ========================================= */
#fullscreen-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fs-media {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: #000;
}

#fs-overlay {
  position: absolute;
  left: clamp(16px, 3vw, 48px);
  bottom: clamp(16px, 4vh, 64px);
  padding: clamp(12px, 2vw, 24px) clamp(16px, 2.2vw, 28px);
  max-width: min(72vw, 900px);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f6f6f6;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

#fs-text {
  font-size: clamp(1rem, 2.3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#fs-sender {
  margin-top: 8px;
  font-size: clamp(0.75rem, 1.2vw, 1.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* =========================================
   LAYOUT CINEMATIC
   ========================================= */
#cinematic-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#cinematic-backdrop {
  position: absolute;
  inset: -6%;
  background-position: center;
  background-size: cover;
  filter: blur(24px) brightness(0.45);
  transform: scale(1.1);
}

#cinematic-content {
  position: relative;
  width: min(88vw, 1600px);
  height: min(84vh, 900px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cin-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: #050505;
}

#cin-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(12px, 2vh, 22px) clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.76) 100%);
  color: #fff;
}

#cin-text {
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
}

#cin-sender {
  margin-top: 6px;
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* =========================================
   LAYOUT GRID
   ========================================= */
#grid-frame {
  width: min(94vw, 1800px);
  height: min(88vh, 980px);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
}

.grid-cell {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.grid-cell img,
.grid-cell video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.grid-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(8px, 1vh, 12px) clamp(10px, 1vw, 16px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  color: #fff;
}

.grid-text {
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-sender {
  font-size: clamp(0.68rem, 0.85vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.92;
}

.grid-cell-empty {
  background: rgba(255, 255, 255, 0.03);
}

/* =========================================
   LAYOUT KEN-BURNS (fullscreen + zoom/pan)
   ========================================= */
#kenburns-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

/* Vinheta cinematica nas bordas */
#kenburns-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.kb-media {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}

.kb-zoom-in {
  animation: kbZoomIn ease-in-out forwards;
}
.kb-zoom-out {
  animation: kbZoomOut ease-in-out forwards;
}
.kb-pan-left {
  animation: kbPanLeft ease-in-out forwards;
}
.kb-pan-right {
  animation: kbPanRight ease-in-out forwards;
}

/* Zoom suave para vídeos no ken-burns */
.kb-video-anim {
  animation: kbVideoZoom 20s ease-in-out infinite alternate;
}

@keyframes kbZoomIn {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.35) translate(-3%, -2%); }
}
@keyframes kbZoomOut {
  0%   { transform: scale(1.35) translate(-3%, 2%); }
  100% { transform: scale(1) translate(0, 0); }
}
@keyframes kbPanLeft {
  0%   { transform: scale(1.2) translate(5%, 0); }
  100% { transform: scale(1.2) translate(-5%, 0); }
}
@keyframes kbPanRight {
  0%   { transform: scale(1.2) translate(-5%, 0); }
  100% { transform: scale(1.2) translate(5%, 0); }
}
@keyframes kbVideoZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

#kb-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(32px, 6vh, 90px) clamp(32px, 5vw, 90px);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.85) 100%);
  color: #fff;
  z-index: 2;
}

#kb-text {
  font-size: clamp(1.4rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9), 0 4px 40px rgba(0,0,0,0.6);
  letter-spacing: -0.01em;
}

#kb-sender {
  margin-top: clamp(8px, 1.5vh, 16px);
  font-size: clamp(0.8rem, 1.3vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* =========================================
   LAYOUT SPLIT (foto + info lado a lado)
   ========================================= */
#split-frame {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #0a0a0a;
}

#split-photo-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.split-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: #0a0a0a;
}

#split-info-side {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 80px);
  background: linear-gradient(135deg, #111 0%, #1a1a2e 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

#split-text {
  font-size: clamp(1.4rem, 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  word-break: break-word;
}

#split-sender {
  margin-top: clamp(12px, 2vh, 24px);
  font-size: clamp(0.85rem, 1.5vw, 1.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

#split-accent {
  width: clamp(40px, 6vw, 80px);
  height: 4px;
  background: linear-gradient(90deg, #ff7b00, #ff0055);
  border-radius: 2px;
  margin-bottom: clamp(16px, 3vh, 32px);
}

/* =========================================
   LAYOUT MOSAIC (1 grande + 3 pequenas)
   ========================================= */
#mosaic-frame {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(4px, 0.5vw, 8px);
  padding: clamp(4px, 0.5vw, 8px);
  background: #0a0a0a;
}

.mosaic-cell {
  position: relative;
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 16px);
  background: rgba(255, 255, 255, 0.04);
}

.mosaic-cell-main {
  grid-row: 1 / 3;
}

.mosaic-cell img, .mosaic-cell video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

.mosaic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(8px, 1vh, 16px) clamp(10px, 1vw, 20px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  color: #fff;
}

.mosaic-text {
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mosaic-cell-main .mosaic-text {
  font-size: clamp(1rem, 1.8vw, 1.8rem);
}

.mosaic-sender {
  font-size: clamp(0.6rem, 0.8vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.85;
  margin-top: 2px;
}

/* =========================================
   LAYOUT SPOTLIGHT (glow dramático)
   ========================================= */
#spotlight-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 70%);
}

#spotlight-glow {
  position: absolute;
  width: min(70vw, 1000px);
  height: min(70vh, 800px);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  background: radial-gradient(circle, #ff7b00 0%, #ff0055 50%, transparent 70%);
  transition: opacity .6s ease;
  pointer-events: none;
}

.spot-media {
  position: relative;
  max-width: min(75vw, 1100px);
  max-height: min(70vh, 800px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: none;
  opacity: 0;
  transition: opacity .4s ease;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(255, 123, 0, 0.3), 0 20px 60px rgba(0, 0, 0, 0.8);
}

#spot-overlay {
  position: absolute;
  bottom: clamp(20px, 4vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(80vw, 800px);
  padding: clamp(12px, 2vw, 24px) clamp(20px, 3vw, 40px);
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}

#spot-text {
  font-size: clamp(1.1rem, 2.5vw, 2.4rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

#spot-sender {
  margin-top: 8px;
  font-size: clamp(0.75rem, 1.2vw, 1.1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* =========================================
   LAYOUT CAROUSEL (3D com 3 fotos)
   ========================================= */
#carousel-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050505;
  perspective: 1200px;
}

#carousel-track {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide {
  position: absolute;
  border-radius: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: #111;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
}

.carousel-slide img,
.carousel-slide video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

.carousel-slide-center {
  width: min(55vw, 900px);
  height: min(70vh, 750px);
  z-index: 10;
  transform: translateX(0) scale(1);
  filter: none;
}

.carousel-slide-left {
  width: min(40vw, 650px);
  height: min(55vh, 580px);
  z-index: 5;
  transform: translateX(calc(-42vw)) scale(0.85) rotateY(8deg);
  filter: brightness(0.5);
  opacity: 0.7;
}

.carousel-slide-right {
  width: min(40vw, 650px);
  height: min(55vh, 580px);
  z-index: 5;
  transform: translateX(calc(42vw)) scale(0.85) rotateY(-8deg);
  filter: brightness(0.5);
  opacity: 0.7;
}

#carousel-overlay {
  position: absolute;
  bottom: clamp(16px, 3vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  text-align: center;
  max-width: min(60vw, 700px);
  padding: clamp(10px, 1.5vw, 20px) clamp(16px, 2.5vw, 36px);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}

#carousel-text {
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#carousel-sender {
  margin-top: 6px;
  font-size: clamp(0.7rem, 1.1vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* =========================================
   LAYOUT GALLERY (moldura de galeria)
   ========================================= */
#gallery-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1a1a1a;
}

#gallery-wall {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 100px),
    linear-gradient(180deg, #222 0%, #1a1a1a 50%, #111 100%);
}

#gallery-mat {
  position: relative;
  background: #f5f5f0;
  padding: clamp(24px, 4vw, 60px);
  border-radius: 4px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 40px 80px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

#gallery-inner-frame {
  border: 2px solid #d4d0c8;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #e8e4dc;
}

.gal-media {
  max-width: min(65vw, 1000px);
  max-height: min(60vh, 700px);
  width: auto;
  height: auto;
  display: none;
  opacity: 0;
  transition: opacity .35s ease;
  object-fit: contain;
}

#gallery-label {
  position: relative;
  text-align: center;
  margin-top: clamp(12px, 2vh, 24px);
  color: #333;
}

#gal-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.8vw, 1.6rem);
  line-height: 1.3;
  color: #444;
}

#gal-sender {
  margin-top: 6px;
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #888;
}

/* =========================================
   MODAL
   ========================================= */
.modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2000;
}
.modal-overlay.active { display: flex; }

.modal-content {
  background-color: white;
  padding: clamp(15px, 3vw, 30px);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  max-width: min(90vw, 400px);
}

.modal-title { font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 600; color: #333; margin-bottom: 15px; }
.modal-message { font-size: clamp(0.85rem, 2vw, 1rem); color: #555; margin-bottom: 25px; }
.modal-button { background-color: #4A90E2; color: white; padding: 10px 20px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; }