/* =========================================
   [SHRINE: REFINADO CON TU PALETA]
   ========================================= */

.shrine-container {
  /* Usando tus variables originales */
  background-color: var(--white);
  border: 4px double var(--pink-dark);
  padding: 40px 15px;
  box-shadow: 10px 10px 0px var(--pink-soft);
  margin-top: 20px;
  background-image: radial-gradient(var(--pink-soft) 15%, transparent 15%);
  background-size: 15px 15px; /* Mini puntos de fondo */
}

/* Marquesina con tu rosa oscuro */
.pixel-marquee {
  background: var(--pink-dark);
  color: var(--white);
  padding: 8px 0;
  font-family: 'Silkscreen', cursive;
  border-bottom: 2px solid var(--text);
  font-size: 12px;
}

.shrine-title {
  text-align: center;
  color: var(--pink-dark);
  font-family: 'Silkscreen', cursive;
  font-size: clamp(20px, 5vw, 40px);
  margin: 30px 0;
  text-shadow: 3px 3px 0px var(--pink-soft);
}

/* --- Grilla --- */
.shrine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}

/* --- Tarjeta de Personaje --- */
.char-card {
  background: var(--white);
  border: 3px solid var(--text);
  padding: 15px;
  position: relative;
  transition: all 0.3s var(--ease-kawaii);
}

/* Rotación sutil estilo scrapbook */
.char-card:nth-child(odd) { transform: rotate(-1deg); }
.char-card:nth-child(even) { transform: rotate(1deg); }

.char-card:hover {
  transform: rotate(0deg) translateY(-5px);
  border-color: var(--pink-dark);
  box-shadow: 8px 8px 0px var(--pink-dark);
  z-index: 10;
}

/* La cinta adhesiva con tu rosa suave */
.pin-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 25px;
  background: var(--pink-soft);
  opacity: 0.8;
  border-left: 2px dashed var(--white);
  border-right: 2px dashed var(--white);
  z-index: 3;
}

.img-frame {
  width: 100%;
  height: 260px;
  border: 2px solid var(--text);
  overflow: hidden;
  background: var(--pink-soft);
}

.main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Decoraciones (PNGs) --- */
.deco-item {
  position: absolute;
  z-index: 5;
  filter: drop-shadow(2px 2px 0px var(--white));
  /* Animación de flotado suave */
  animation: float-shrine 3s ease-in-out infinite alternate;
}

@keyframes float-shrine {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* --- Texto e Info --- */
.char-info h2 {
  font-family: 'Silkscreen', cursive;
  font-size: 16px;
  color: var(--text);
  margin: 15px 0 5px;
}

.sub-tag {
  font-size: 10px;
  color: var(--white);
  background: var(--pink-dark);
  padding: 3px 8px;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

.stats-box {
  background: var(--pink-soft);
  border: 1px solid var(--pink-dark);
  padding: 10px;
  margin: 12px 0;
  font-size: 11px;
  color: var(--text);
}

.love-note {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  border-left: 3px solid var(--pink-dark);
  padding-left: 10px;
}

/* --- Extras: Adoptables y Fanclub --- */
.shrine-extras {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.extra-box {
  background: var(--white);
  border: 3px solid var(--pink-dark);
  padding: 20px;
  text-align: center;
}

.extra-box h3 {
  font-family: 'Silkscreen', cursive;
  font-size: 14px;
  color: var(--pink-dark);
}

/* Botón "Join Now" estilizado como tus otros botones */
.join-btn {
  background: var(--pink-dark);
  color: var(--white);
  font-family: 'Silkscreen', cursive;
  padding: 10px 20px;
  border: 2px solid var(--text);
  box-shadow: 4px 4px 0px var(--text);
  cursor: pointer;
  transition: 0.2s;
}

.join-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--text);
  background: var(--pink-bg);
}

/* Media Query para móvil */
@media (max-width: 768px) {
  .shrine-extras { grid-template-columns: 1fr; }
  .char-card { transform: rotate(0deg) !important; }
}

/* --- Contenedor de la foto principal --- */
.img-frame {
  width: 100%;
  height: 250px; /* Altura fija para que todas las tarjetas midan lo mismo */
  border: 2px solid var(--text);
  overflow: hidden;
  background: var(--pink-soft);
  position: relative;
  z-index: 1; /* Al fondo */
}

.main-photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen sin deformarla */
  display: block;
}

/* --- Sistema de Stickers (PNGs) --- */
.deco-item {
  position: absolute;
  z-index: 5; /* Por encima de la foto */
  pointer-events: none; /* Permite hacer clic "a través" de la imagen */
  image-rendering: pixelated; /* Si son pixel art, se verán nítidos */
  filter: drop-shadow(3px 3px 0px var(--white));
}

/* 1. Explosiones o brillos en las esquinas superiores */
.deco-top-right, .deco-top-left {
  width: 65px; /* Tamaño controlado */
  height: auto;
}
.deco-top-right { top: -10px; right: -15px; }
.deco-top-left { top: -10px; left: -15px; }

/* 2. Chibis o Renders grandes que sobresalen */
.deco-float-bottom {
  width: 100px; /* Un poco más grande para que destaque */
  height: auto;
  bottom: 60px; /* Sube para no tapar el texto de abajo */
  right: -25px;
  animation: float-shrine 3s ease-in-out infinite alternate;
}

.deco-float-side {
  width: 90px;
  height: auto;
  bottom: 100px;
  left: -30px;
  animation: float-shrine 3s ease-in-out infinite alternate-reverse;
}

/* --- Ajuste de la info para que no se pierda --- */
.char-info {
  position: relative;
  z-index: 2; /* Por debajo de los stickers pero sobre el fondo */
  background: var(--white);
  margin-top: 10px;
}

/* --- Animación de flotado suave --- */
@keyframes float-shrine {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-12px) rotate(3deg); }
}

/* --- REGLA PARA MÓVILES (Importante) --- */
@media (max-width: 600px) {
  .deco-item {
    width: 50px; /* Stickers más pequeños en celular */
  }
  .deco-float-bottom {
    width: 70px;
    right: -10px;
    bottom: 80px;
  }
  .img-frame {
    height: 200px; /* Foto un poco más pequeña en móvil */
  }
}