/* ============================================
   AGE GATE 18+ (Chocolatería) + Underage (Lado B)
   ============================================ */

/* Age gate usa gate-card (mismo estilo que gender gate) */
.age-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.age-gate-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.age-gate-overlay.gate-style .gate-card {
  position: relative;
}

.gate-step-text {
  letter-spacing: 2px;
  font-size: 12px;
  margin-bottom: 20px;
  color: #888;
}

.gate-step-text-underage {
  font-size: 14px;
  margin: 0;
}

.underage-btn-spaced {
  margin-top: 20px;
}

.underage-secondary-btn {
  margin-top: 10px;
}

/* Underage overlay (Lado B - mensaje simple) */
.underage-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.underage-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.underage-overlay .gate-card {
  position: relative;
}

/* Police Arrest Overlay - animación mejorada */
.police-arrest-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.98);
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.police-arrest-overlay.active {
  display: flex;
}

.police-arrest-overlay.sirens-active {
  animation: screenFlash 0.4s ease-in-out 3;
}

@keyframes screenFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

.police-arrest-overlay.sirens-active .police-light {
  animation: policeFlash 0.12s ease-in-out infinite alternate;
}

.police-arrest-overlay.sirens-active .police-light.blue {
  animation-delay: 0.06s;
}

@keyframes policeFlash {
  0% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 60px currentColor, 0 0 120px currentColor; }
  100% { opacity: 0.4; transform: scale(0.95); box-shadow: 0 0 15px currentColor; }
}

.police-lights {
  display: flex;
  gap: 50px;
  margin-bottom: 35px;
}

.police-arrest-overlay.sirens-active .police-lights {
  animation: lightsShake 0.08s ease-in-out infinite alternate;
}

@keyframes lightsShake {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

.police-light {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 0 0 50px currentColor;
  transition: transform 0.1s;
}

.police-light.red {
  background: #e53935;
  color: #ff5252;
  box-shadow: 0 0 40px #ff5252, 0 0 80px rgba(229, 57, 53, 0.5);
}

.police-light.blue {
  background: #1e88e5;
  color: #42a5f5;
  box-shadow: 0 0 40px #42a5f5, 0 0 80px rgba(30, 136, 229, 0.5);
}

.arrest-text {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
  animation: textPulse 0.5s ease-in-out infinite alternate;
}

.police-arrest-overlay.sirens-active .arrest-text {
  animation: textPulse 0.3s ease-in-out infinite alternate;
}

@keyframes textPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.9; transform: scale(1.02); }
}

.arrest-subtext {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.arrest-dismiss {
  margin-top: 32px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  letter-spacing: 1px;
  cursor: pointer;
  animation: dismissPulse 2s ease-in-out infinite;
}

@keyframes dismissPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.police-arrest-overlay {
  cursor: pointer;
}

@media (max-width: 768px) {
  .police-lights {
    gap: 28px;
  }

  .police-light {
    width: 62px;
    height: 62px;
  }

  .arrest-text {
    font-size: clamp(24px, 6vw, 36px);
    letter-spacing: 2px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .police-arrest-overlay.sirens-active,
  .police-arrest-overlay.sirens-active .police-light,
  .police-lights,
  .arrest-text {
    animation: none !important;
  }
}

/* ============================================
   CLOSET OVERLAY - Para Anthonny
   ============================================ */
.closet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
}

.closet-overlay.active {
  display: flex;
}

.closet-content {
  text-align: center;
  position: relative;
  animation: closetAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes closetAppear {
  from { transform: scale(0.8) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Wardrobe structure ── */
.closet-wardrobe {
  width: 240px;
  margin: 0 auto 28px;
  perspective: 800px;
}

.closet-top {
  height: 12px;
  background: linear-gradient(180deg, #7a5030, #5c3a1e);
  border-radius: 6px 6px 0 0;
  border: 2px solid #3d2210;
  border-bottom: none;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.closet-body {
  position: relative;
  height: 260px;
  background: #1a0e06;
  border-left: 4px solid #5c3a1e;
  border-right: 4px solid #5c3a1e;
  overflow: hidden;
  display: flex;
}

.closet-base {
  height: 16px;
  background: linear-gradient(180deg, #5c3a1e, #3d2210);
  border-radius: 0 0 4px 4px;
  border: 2px solid #3d2210;
  border-top: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* ── Inside (dark background) ── */
.closet-inside {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 1;
}

.closet-peek {
  font-size: 48px;
  animation: peekBlink 2s ease-in-out infinite;
}

@keyframes peekBlink {
  0%, 85%, 100% { opacity: 1; }
  90% { opacity: 0; }
}

.closet-hanger {
  font-size: 32px;
  opacity: 0.3;
  position: absolute;
  top: 10px;
  right: 20px;
}

/* ── Doors ── */
.closet-door-left,
.closet-door-right {
  position: relative;
  width: 50%;
  height: 100%;
  z-index: 2;
  border: 2px solid #3d2210;
}

.closet-door-left {
  background: linear-gradient(135deg, #8b5e3c 0%, #7a4e2c 40%, #6b4020 100%);
  transform-origin: left center;
  transform: rotateY(40deg);
  box-shadow: inset -8px 0 20px rgba(0, 0, 0, 0.3);
}

.closet-door-right {
  background: linear-gradient(225deg, #8b5e3c 0%, #7a4e2c 40%, #6b4020 100%);
  transform-origin: right center;
  transform: rotateY(-40deg);
  box-shadow: inset 8px 0 20px rgba(0, 0, 0, 0.3);
}

/* ── Slats on doors ── */
.closet-slat {
  width: 75%;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  margin: 0 auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.closet-slat:nth-child(1) { margin-top: 30%; }
.closet-slat:nth-child(2) { margin-top: 25%; }
.closet-slat:nth-child(3) { margin-top: 25%; }

/* ── Knobs ── */
.closet-knob {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #c8a04a, #8b6914);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.closet-door-left .closet-knob { right: 10px; }
.closet-door-right .closet-knob { left: 10px; }

/* ── Text ── */
.closet-text {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  color: #c8a06b;
  text-shadow: 0 2px 8px rgba(200, 160, 107, 0.4);
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-family: var(--mono);
}

.closet-subtext {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 320px;
  margin: 0 auto 24px;
  line-height: 1.5;
  font-family: var(--font-sans);
}

.closet-dismiss {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-family: var(--mono);
  animation: dismissFade 2s ease-in-out infinite;
}

@keyframes dismissFade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ── Mobile ── */
@media (max-width: 500px) {
  .closet-wardrobe {
    width: 200px;
  }

  .closet-body {
    height: 220px;
  }

  .closet-peek {
    font-size: 36px;
  }
}