/* Reset básico */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #e6e6e6;
}

#pantallaInicio{
  background:
    radial-gradient(ellipse at 20% 20%, rgba(168,213,162,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(181,168,213,.3) 0%, transparent 50%),
    #eef3ee;

}

#pantallaEquipos{  
  background:
    radial-gradient(ellipse at 20% 20%, rgba(168,213,162,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(181,168,213,.3) 0%, transparent 50%),
    #eef3ee;
  
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Layout principal */
.main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 900px;
}

.main-content > div {
  flex: 1;
}

/* ---------------- LADO IZQUIERDO ---------------- */

.left-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.game-logo {
  width: clamp(320px, 50vw, 750px);
  margin-bottom: 40px;
}

.play-btn {
  padding: 12px 35px;
  font-size: 18px;
  background: #f36c8c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.play-btn:hover {
  transform: scale(1.05);
  background: #e25576;
}

/* ---------------- LADO DERECHO ---------------- */

/* Contenedor derecho */
.right-side {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Marco oscuro */
.door-frame {
  position: relative;
  width: clamp(180px, 25vw, 250px);
  aspect-ratio: 9 / 16;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Puerta encima */
.door {
  position: absolute;
  height: 135%;
  width: auto;
  left: 0;         
  z-index: 2;
}

/* Monstruo */
.monstruo {
  position: absolute;
  bottom: 10%;
  left: 80%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 160px;
}

/* ----- BOCA ----- */
.mouth {
  position: absolute;
  bottom: 35%;
  left: 82%;
  transform: translateX(-50%);
  width: 50px;
  height: 10px;
  background-color: #222222;
  border-radius: 0 0 50px 50px;
  overflow: hidden;
  transition: height 0.5s ease, border-radius 0.5s ease, width 0.5s ease, background-color 0.5s ease; /* 👈 */
  z-index: 3;
}

.mouth.smiling {
  height: 28px;
  width: 55px;
  border-radius: 0 0 60px 60px;
  background-color: #ffffff; /* 👈 cambia este color al que quieras */
}

.mouth-inner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 8px;
  background-color: #ff4444;  /* interior rojo */
  border-radius: 0 0 40px 40px;
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}

.mouth.smiling .mouth-inner {
  opacity: 1;
}

/* ---------------- OJO ---------------- */

.eye {
  position: absolute;
  top: 40%;
  left: 80%;
  transform: translate(-50%, -10%);
  width: 30%;
  aspect-ratio: 1 / 1;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pupil {
  width: 50%;
  height: 50%;
  background: #8000e2;
  border-radius: 50%;
  position: relative;
  transition: 0.05s;
}

.shine {
  position: absolute;
  width: 30%;
  height: 30%;
  background: white;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  opacity: 0.9;
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #d62828;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
}

#credito{
  /*font-size: 12px;
  opacity: 0.7;*/
  font-size: 15px;
  color: #888;
  text-align: center;
  margin-top: 20px;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 900px) {
  .main-content {
    flex-direction: column;
    text-align: center;
  }

  .left-side {
    align-items: center;
  }

  .right-side {
    margin-top: 40px;
  }
}

/*cambio de pantallas*/
.pantalla {
    display: none;
    width: 100%;
    height: 100vh;
}

.pantalla.activa {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;    
    height: 100vh;
}

.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}


/*===========Parte de seleccion de equipos=============*/

/* Fondo general */
#teamScreen {
  background: linear-gradient(135deg, #e2e2ea, #ededed);
  color: white;
  position: relative;
  overflow: hidden;
}

/* Contenedor */
.team-container {
  position: relative;
  text-align: center;
  padding: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 30px rgba(243, 108, 140, 0.3);
}

/* Título */
.team-title {
  font-size: 28px;
  margin-bottom: 30px;
  color: #f36c8c;
  letter-spacing: 1px;
}

/* Grid de botones */
.team-buttons {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

/* Botones numéricos */
.team-btn {
  height: 70px;
  font-size: 22px;
  font-weight: bold;
  background: #f36c8c;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(243, 108, 140, 0.4);
}

.team-btn:hover {
  transform: translateY(-5px) scale(1.08);
  background: #e25576;
  box-shadow: 0 10px 25px rgba(243, 108, 140, 0.6);
}

/* Botón volver */
.volver-btn {
  padding: 10px 25px;
  font-size: 16px;
  background: transparent;
  color: #f36c8c;
  border: 2px solid #f36c8c;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.volver-btn:hover {
  background: #f36c8c;
  color: white;
}

/* Monstruo SOBRE la tarjeta */
.team-monster1 {
  position: absolute;

  width: 80px;   /* tamaño fijo real */
  height: auto;

  top:-100px;  /* pisa el borde */
  left: 450px;

  z-index: 10;
  pointer-events: none;
  display: block;

  animation: walk 0.6s infinite ease-in-out;
}

.team-monster2 {
  position: absolute;

  width: 80px;   /* tamaño fijo real */
  height: auto;

  top:-100px;  /* pisa el borde */
  left: 60px;

  z-index: 10;
  pointer-events: none;
  display: block;

}

/* Animación de pasitos */
@keyframes walk {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* =============================================
   PANTALLA NOMBRES EQUIPOS
   ============================================= */
#pantallaNombres {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(168,213,162,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(181,168,213,.3) 0%, transparent 50%),
    #eef3ee;
  overflow-y: auto;
}

.nombres-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 20px;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

.nombres-titulo {
    font-family: 'Baloo 2', Arial, sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 900;
    color: #4a6b6b;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.nombres-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nombre-equipo-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255,255,255,.75);
    border: 2px solid rgba(255,255,255,.95);
    border-left: 4px solid var(--eq-color, #f36c8c);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Grid de emojis */
.eq-emoji-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eq-emoji-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    background: rgba(0,0,0,.05);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.eq-emoji-btn:hover {
    background: rgba(0,0,0,.1);
    transform: scale(1.1);
}

.eq-emoji-btn.selected {
    background: rgba(255,255,255,.9);
    border-color: var(--eq-color, #f36c8c);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transform: scale(1.15);
}

/* Input de nombre */
.eq-nombre-input {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Baloo 2', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #3a6060;
    background: rgba(255,255,255,.6);
    border: 2px solid rgba(0,0,0,.08);
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.eq-nombre-input:focus {
    border-color: var(--eq-color, #f36c8c);
    box-shadow: 0 0 0 3px rgba(243,108,140,.15);
    background: white;
}

/* Botones inferiores */
.nombres-btns {
    display: flex;
    gap: 14px;
    align-items: center;
}

.nombres-jugar-btn {
    padding: 12px 32px;
    font-size: 1rem;
    font-family: 'Baloo 2', Arial, sans-serif;
    font-weight: 900;
    background: #f36c8c;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 4px 14px rgba(243,108,140,.4);
    letter-spacing: .3px;
}

.nombres-jugar-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: #e25576;
    box-shadow: 0 6px 20px rgba(243,108,140,.5);
}

/*==========SECCION DE PUERTAS Y PUNTAJES===========================*/












:root {
  --rosa:       #f36c8c;
  --rosa-d:     #e25576;
  --rosa-claro: #fce4ec;
  --teal:       #1a6b6b;
  --teal-d:     #145555;
  --teal-claro: #e0f2f1;
  --gris-bg:    #e6e6e6;
  --gris-card:  #f0f0f0;
  --gris-borde: #d0d0d0;
  --texto:      #2a2a2a;
  --texto-s:    #707070;
  --blanco:     #ffffff;
  --verde-ok:   #2e7d32;
  --verde-bg:   #e8f5e9;
  --rojo-err:   #c62828;
  --rojo-bg:    #ffebee;
  --amarillo:   #f9a825;

  /* ── Monsters Inc. palette ── */
  --mi-bg:       #0d0d0f;          /* fondo del almacén, casi negro */
  --mi-dark:     #111114;
  --mi-frame:    #1c1c20;          /* marco de la puerta */
  --mi-frame-b:  #2a2a2f;          /* borde frame */
  --mi-warning:  #1d0034;          /* franja advertencia amarilla */ /*Mensaje que notifica de quien es el turno*/
  --mi-warning2: #1a1a1a;          /* franja advertencia negra */

  /* Colores de puertas — vibrantes y sólidos estilo película */
  --door-azul:    #3a4fc7;
  --door-azul-d:  #2a3aaa;
  --door-teal:    #1fb8a8;
  --door-teal-d:  #169188;
  --door-verde:   #426c18;
  --door-verde-d: #5a9e18;
  --door-morado:  #2b1f6e;
  --door-morado-d:#1e1550;
  --door-rosa:    #e88ab4;
  --door-rosa-d:  #d06a94;
  --door-navy:    #1e2a5a;
  --door-navy-d:  #141e42;
}

/* =============================================
   FONDO GLOBAL — almacén oscuro de Monsters Inc.
   ============================================= */
body {
  background: var(--mi-bg);
}

.pantalla {
  background:
    /* Grid sutil de líneas tipo almacén industrial */
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    var(--mi-bg);
  background-size: 40px 40px;
}

/* =============================================
   PANTALLA PUERTAS — sin scroll, pantalla completa
   ============================================= */
#seleccionPuertas {
  flex-direction: column;
  gap: 0;
  padding: 10px 12px 8px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  height: 100vh;
  box-sizing: border-box;
  /* Fondo pastel suave */
  background:
    radial-gradient(ellipse at 15% 15%, rgba(168,213,162,.35) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(181,168,213,.35) 0%, transparent 45%),
    radial-gradient(ellipse at 55% 5%,  rgba(125,213,213,.25) 0%, transparent 38%),
    #eef3ee !important;
}

.puertas-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  gap: 6px;
  justify-content: center;
}

/* ── Encabezado compacto ── */
.puertas-top {
  text-align: center;
  flex-shrink: 0;
}

.puertas-titulo {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: clamp(.95rem, 2vw, 1.35rem);
  font-weight: 900;
  color: #4a6b6b;
  margin: 0 0 1px;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.turno-instruccion {
  font-size: .75rem;
  font-weight: 700;
  color: #6a8080;
  margin: 0;
  font-family: Arial, sans-serif;
}

.puertas-status {
  font-size: .85rem;
  font-weight: 700;
  color: #6a8080;
  text-align: center;
  padding: 8px;
}

/* =============================================
   BARRA DE TURNOS — compacta
   ============================================= */
.turno-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

.turno-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.75);
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50px;
  padding: 4px 12px 4px 8px;
  font-size: .75rem;
  font-weight: 800;
  color: #4a5a6a;
  transition: border-color .3s, box-shadow .3s, background .3s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.turno-chip.activo {
  border-color: #7ab8a8;
  background: rgba(122,184,168,.2);
  box-shadow: 0 3px 14px rgba(122,184,168,.45);
}

.turno-avatar { font-size: 1.1rem; }
.turno-nombre { color: #3a6060; font-weight: 800; }

.turno-pts {
  margin-left: 3px;
  background: rgba(58,96,96,.12);
  color: #3a6060;
  border-radius: 50px;
  padding: 1px 8px;
  font-size: .68rem;
  font-family: 'Baloo 2', Arial, sans-serif;
  font-weight: 800;
}

.turno-chip.activo .turno-pts {
  background: #3a6060;
  color: white;
}

/* =============================================
   GRID DE PUERTAS — llena el espacio disponible
   ============================================= */

.doors-grid {
  display: grid;
  /* columnas que se adaptan al ancho */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Filas que se adaptan a la altura disponible */
  grid-auto-rows: 1fr;
  gap: clamp(5px, 1vw, 10px);
  width: 100%;
  /* Ocupa el espacio vertical restante */
  flex: 1;
  min-height: 0;
  align-items: stretch;
  overflow-y: auto;
}

/* ── Puerta individual ── */
.door-item {
  perspective: 600px;
  cursor: pointer;
  opacity: 0;
  animation: doorAppear .3s ease forwards;

  width: 100%;         /* ocupa todo el ancho de la celda */
  aspect-ratio: 3 / 4; /* ancho : alto = 3:4 */
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes doorAppear {
  from { opacity:0; transform: scale(.8) translateY(10px); }
  to   { opacity:1; transform: scale(1)  translateY(0); }
}

/* Truco para que el door-body sea cuadrado-alto: 
   usamos un wrapper con aspect-ratio relativo a la celda */
.door-body {
  position: relative;
  width: 100%;
  /* Altura determinada por el grid, no por padding-bottom */
  height: 100%;
  transition: transform .18s ease;
}

.door-item:hover:not(.opened):not(.bloqueada) .door-body {
  transform: translateY(-3px) scale(1.02);
}

/* Marco de la puerta */
.door-frame-door {
  position: absolute;
  inset: 0;
  border-radius: 8px 8px 5px 5px;
  background: rgba(255,255,255,.4);
  border: 3px solid rgba(255,255,255,.9);
  box-shadow:
    0 4px 14px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow: hidden;
}

/* Sin franja en estilo pastel */
.door-frame-door::after { display: none; }

/* Interior revelado — el monstruo vive aquí */
.door-inside {
  position: absolute; inset: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: rgba(255,255,255,.55);
  opacity: 0;
  transition: opacity .3s ease .55s;
  overflow: hidden;
}

.door-inside::before {
  content: '';
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Imagen del monstruo dentro de la puerta */
.di-monster {
  width: 100%; /*antes era 80%*/
  max-height: 100%; /*antes era 85%*/
  object-fit: cover; /*contain*/
  object-position: center top; /*bottom center*/
  position: absolute;/*relative*/
  bottom :0;/*Esto es nuevo*/
  left:0;/*Esto es nuevo*/
  z-index: 2;
  transform: translateY(25%);
  transition: transform .5s cubic-bezier(.34,1.4,.64,1) .6s;
  filter: drop-shadow(0 -3px 8px rgba(0,0,0,.15));
}

.door-item.opened .di-monster:not(.agujero-spin) {
  transform: translateY(0);
}

/* Agujero negro: imagen circular que gira */
.door-item.opened .di-monster.agujero-spin {
  width: 100%;
  max-height: 100%;
  border-radius: 0;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transform: rotate(0deg);
  animation: bhDoorSpin 7s linear infinite, bhDoorPulse 3.5s ease-in-out infinite;
  transition: none;
}
/*@keyframes bhDoorSpin  { to { transform: rotate(360deg); } }*/
@keyframes bhDoorPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(156,39,176,.8))  drop-shadow(0 0 14px rgba(58,79,199,.5)); }
  50%     { filter: drop-shadow(0 0 14px rgba(156,39,176,1))  drop-shadow(0 0 28px rgba(58,79,199,.8)); }
}

.di-label {
  position: absolute; top: 4px;
  font-size: .38rem; font-weight: 800;
  color: rgba(0,0,0,.25); text-transform: uppercase;
  letter-spacing: .3px; text-align: center;
  z-index: 3;
}

/* ── Panel rotatorio ── */
.door-panel {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.34,1.05,.64,1);
  border-radius: 8px 8px 5px 5px;
  will-change: transform;
}

/* Cara frontal */
.door-front {
  position: absolute; inset: 0;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6% 8% 10%;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Número — círculo blanco centrado */
.door-num {
  font-family: 'Baloo 2', Arial, cursive;
  font-size: clamp(.55rem, 1.6vw, .95rem);
  font-weight: 900;
  color: rgba(255,255,255,.95);
  width: clamp(20px, 3.5vw, 32px);
  height: clamp(20px, 3.5vw, 32px);
  background: rgba(255,255,255,.38);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  position: relative; z-index: 2;
  flex-shrink: 0;
}

/* Paneles decorativos */
.door-front::before {
  content: '';
  position: absolute;
  top: 24%; left: 10%; right: 10%; bottom: 12%;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.door-front::after {
  content: '';
  position: absolute;
  top: 33%; left: 18%; right: 18%; bottom: 20%;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

/* Manija */
.door-knob {
  position: absolute;
  right: 13%;
  top: 52%;
  width: clamp(6px, 1.1vw, 10px);
  height: clamp(6px, 1.1vw, 10px);
  background: radial-gradient(circle at 35% 35%, #fff8e1, #ffd54f 50%, #8d6e00);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.25);
  z-index: 3;
}

.door-window { display: none; }
.door-stripe { display: none; }

/* ── 20 COLORES PASTEL ÚNICOS — uno por puerta ── */
.door-front.pastel-0  { background: linear-gradient(168deg, #a8d896 0%, #88c474 100%); }  /* verde */
.door-front.pastel-1  { background: linear-gradient(168deg, #b8a8e0 0%, #9a88cc 100%); }  /* lila */
.door-front.pastel-2  { background: linear-gradient(168deg, #f5d060 0%, #e8b830 100%); }  /* amarillo */
.door-front.pastel-3  { background: linear-gradient(168deg, #7ed4cc 0%, #5cbcb4 100%); }  /* teal */
.door-front.pastel-4  { background: linear-gradient(168deg, #84b8ec 0%, #60a0d8 100%); }  /* azul */
.door-front.pastel-5  { background: linear-gradient(168deg, #f4a0bc 0%, #e07898 100%); }  /* rosa */
.door-front.pastel-6  { background: linear-gradient(168deg, #d06898 0%, #b84880 100%); }  /* frambuesa */
.door-front.pastel-7  { background: linear-gradient(168deg, #a0cce4 0%, #78b0d0 100%); }  /* azul pálido */
.door-front.pastel-8  { background: linear-gradient(168deg, #f4a870 0%, #e08848 100%); }  /* naranja */
.door-front.pastel-9  { background: linear-gradient(168deg, #b8e890 0%, #94d468 100%); }  /* verde lima */
.door-front.pastel-10 { background: linear-gradient(168deg, #e8a0d0 0%, #d080b8 100%); }  /* malva */
.door-front.pastel-11 { background: linear-gradient(168deg, #80d8c0 0%, #58c0a4 100%); }  /* menta */
.door-front.pastel-12 { background: linear-gradient(168deg, #f8b060 0%, #ec9030 100%); }  /* durazno */
.door-front.pastel-13 { background: linear-gradient(168deg, #a0b8f0 0%, #7898e0 100%); }  /* lavanda azul */
.door-front.pastel-14 { background: linear-gradient(168deg, #d8e880 0%, #c0d458 100%); }  /* lima */
.door-front.pastel-15 { background: linear-gradient(168deg, #f0a0a0 0%, #e07878 100%); }  /* coral */
.door-front.pastel-16 { background: linear-gradient(168deg, #90d0f0 0%, #60bce0 100%); }  /* cielo */
.door-front.pastel-17 { background: linear-gradient(168deg, #c8a8e8 0%, #ac84d4 100%); }  /* violeta */
.door-front.pastel-18 { background: linear-gradient(168deg, #a8e8c8 0%, #80d4aa 100%); }  /* agua */
.door-front.pastel-19 { background: linear-gradient(168deg, #f8c8a0 0%, #ecaa78 100%); }  /* melocotón */

/* Hover */
.door-item:not(.opened):not(.bloqueada):hover .door-front::before {
  border-color: rgba(255,255,255,.85);
}
.door-item:not(.opened):not(.bloqueada):hover .door-frame-door {
  box-shadow: 0 6px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.95);
}

/* Estados */
.door-item.opened .door-panel  { transform: rotateY(-112deg); }
.door-item.opened .door-inside { opacity: 1; }
.door-item.opened              { cursor: default; }
.door-item.bloqueada           { cursor: not-allowed; opacity: .3; filter: grayscale(.8); }
/* =============================================
   OVERLAY TÚNEL — fondo oscuro
   ============================================= */
#walkOverlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
}

#walkOverlay.active {
  pointer-events: all;
  opacity: 1;
}

#walkTunnel {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  width: 120px;
  height: 120px;
}

/* Clon que vuela — se crea dinámicamente por JS */
.door-flying-clone {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  /* Las transitions se aplican desde JS */
}

#walkOverlay.flash {
    background: white;
    transition: background 0.15s ease;
}

@keyframes tunnelIn {
  0%   { opacity:1; transform:scale(1);  border-radius:4px; }
  65%  { opacity:1; transform:scale(7);  border-radius:4px; }
  100% { opacity:1; transform:scale(32); border-radius:0; }
}

#walkFlash {
  position: absolute; inset: 0;
  background: var(--mi-dark); opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#walkOverlay.flash #walkFlash { opacity: 1; }

/* =============================================
   MODALES — base compartida — tema oscuro
   ============================================= */
.modal-screen {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  overflow-y: auto;
}

.modal-screen.visible { opacity: 1; pointer-events: all; }

.modal-card {
  margin: 0 auto;
  background: linear-gradient(135deg, #89a8d0, #c084fc);
  border-radius: 16px;
  padding: 14px 20px 18px;
  width: 100%;
  max-width: 400px;      /* tamaño máximo fijo y seguro */
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;    /* evita scroll horizontal interno */
  position: relative;
  text-align: center;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.3,.64,1), opacity .35s ease;
  font-family: Arial, sans-serif;
  border: 2px solid rgba(255,255,255,.08);
  border-top: 4px solid var(--door-azul);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.7),
    0 4px 12px rgba(0,0,0,.4);
}

.modal-screen.visible .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition-delay: .08s;
}

/* Botón volver */
.modal-back-btn {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: .78rem; font-weight: 800;
  color: rgba(255,255,255,.5); cursor: pointer;
  transition: all .2s;
  font-family: Arial, sans-serif;
}
.modal-back-btn:hover {
  background: rgba(255,255,255,.12);
  color: white;
  border-color: rgba(255,255,255,.25);
}

/* Badge de puerta */
.door-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 50px;
  padding: 3px 11px;
  font-size: .65rem; font-weight: 800;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .8px;
  border: 1.5px solid rgba(255,255,255,.1);
}

.modal-doorframe {
  width: 120px;
  height: 160px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-monster-inframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/*ESTILOS PARA EL FANTASMA, PERSONA Y VICTORIA*/

/* ── FANTASMA ── */
.fantasma-card       { background: linear-gradient(160deg,#1a0533,#3b0a6b); }
.fantasma-badge      { background: #6b21a8; color:#fff; }
.fantasma-titulo     { font-size:1.6rem; font-weight:800; color:#d8b4fe; text-align:center; margin:.5rem 0; }
.fantasma-desc       { color:#e9d5ff; text-align:center; }
.fantasma-puntos     { font-size:2rem; font-weight:900; text-align:center; margin:.8rem 0; }

/* ── PERSONA ── */
.persona-card        { background: linear-gradient(160deg,#052e16,#166534); }
.persona-badge       { background: #16a34a; color:#fff; }
.persona-titulo      { font-size:1.6rem; font-weight:800; color:#bbf7d0; text-align:center; margin:.5rem 0; }
.persona-desc        { color:#dcfce7; text-align:center; }
.persona-puntos      { font-size:2rem; font-weight:900; text-align:center; margin:.8rem 0; }

/* ── VICTORIA ── */
.victoria-container  { display:flex; flex-direction:column; align-items:center; padding:2rem; gap:1rem; min-height:100vh; background:linear-gradient(160deg,#0f172a,#1e1b4b); }
.victoria-logo       { max-width:260px; }
.victoria-titulo     { font-size:2rem; color:#fbbf24; font-weight:900; }
.victoria-ranking    { display:flex; flex-direction:column; gap:.6rem; width:100%; max-width:420px; }
.victoria-equipo     { display:flex; align-items:center; gap:.8rem; background:#ffffff18; border-radius:12px; padding:.7rem 1rem; }
.victoria-equipo.ganador { background:#fbbf2430; border:2px solid #fbbf24; }
.victoria-pos        { font-size:1.4rem; }
.victoria-nombre     { flex:1; font-weight:700; color:#f1f5f9; }
.victoria-pts        { font-weight:800; color:#fbbf24; font-size:1.1rem; }
.victoria-mons-titulo{ color:#c4b5fd; font-size:1.1rem; margin-top:.5rem; }
.victoria-monstruos-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; max-width:480px; }
.victoria-mons-item  { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.victoria-mons-item img { width:56px; height:56px; object-fit:contain; }
.victoria-mons-item span{ font-size:.6rem; color:#94a3b8; }
.victoria-replay     { margin-top:1rem; }

/* Puntos suma/resta compartidos */
.suma  { color:#4ade80; }
.resta { color:#f87171; }


/* =============================================
   ANIMACIÓN MONSTRUO SALTO
   ============================================= */

/* Monstruo saltando en la puerta del grid */
@keyframes monsterJump {
  0%   { transform: translateY(25%);               }   /* posición inicial enterrado */
  15%  { transform: translateY(-2%);               }   /* sube suavemente */
  30%  { transform: translateY(-35%) scaleY(1.08); }   /* salto 1 — arriba */
  42%  { transform: translateY(0%)   scaleY(0.92); }   /* aterriza — aplastado */
  52%  { transform: translateY(-22%) scaleY(1.05); }   /* salto 2 — más bajo */
  62%  { transform: translateY(0%)   scaleY(0.95); }   /* aterriza de nuevo */
  75%  { transform: translateY(-8%); }                  /* pequeño rebote */
  88%  { transform: translateY(0%);  }                  /* quieto */
  100% { transform: translateY(0%);  }
}

@keyframes monsterGlow {
  0%,100% { filter: drop-shadow(0 -3px 8px rgba(0,0,0,.15)); }
  30%     { filter: drop-shadow(0 -8px 20px rgba(255,220,50,.7)) drop-shadow(0 0 30px rgba(255,150,0,.4)); }
  52%     { filter: drop-shadow(0 -5px 14px rgba(255,220,50,.5)); }
}

/* Sombra en el suelo que se achica cuando salta */
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scaleX(1);   opacity: .35; }
  30%     { transform: translateX(-50%) scaleX(.45); opacity: .15; }
  52%     { transform: translateX(-50%) scaleX(.6);  opacity: .2;  }
}

/* La puerta parpadea/brilla cuando se abre */
@keyframes doorFlash {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,.13); }
  40%  { box-shadow: 0 0 28px rgba(255,220,50,.5), 0 4px 14px rgba(0,0,0,.13); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.13); }
}

/* Estado activo cuando está saltando */
.door-item.jumping .door-frame-door {
  animation: doorFlash 2.6s ease forwards;
}

.door-item.jumping .di-monster:not(.agujero-spin) {
  animation:
    monsterJump 1.8s cubic-bezier(.34,1.2,.64,1) 0.55s both,
    monsterGlow 1.8s ease 0.55s both;
}

/* Sombra bajo el monstruo */
.door-item .di-shadow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 6px;
  background: rgba(0,0,0,.25);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease .55s;
  pointer-events: none;
  z-index: 1;
}

.door-item.jumping .di-shadow {
  opacity: .35;
  animation: shadowPulse 1.8s ease 0.55s both;
}

/* El interior visible cuando está jumping */
.door-item.jumping .door-inside {
  opacity: 1;
  transition: opacity .25s ease;
}

/* =============================================
   MODAL PREGUNTA
   ============================================= */
#monsterScreen .modal-card { border-top-color: var(--door-azul); }

/* Mini puerta conteniendo al monstruo */

.monster-img-wrap {
  width: 20%;           /* relativo al contenedor */
  max-width: 120px;     /* no demasiado grande */
  aspect-ratio: 90 / 118; /* mantiene proporción */
  margin: 0 auto 10px;
  background: var(--_door-color, #84b8ec);
  border-radius: 6px 6px 4px 4px;
  border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
}

.question-pts {
    text-align: center;
    font-size: .95rem;
    color: #3a3a3a;
    font-weight: 700;
    margin: .3rem 0 .8rem;
    background: #fbbf2420;
    border-radius: 8px;
    padding: .3rem .8rem;
    display: inline-block;
    align-self: center;
}

/* Paneles de la mini puerta */
.monster-img-wrap::before {
  content: '';
  position: absolute;
  top: 20%; left: 10%; right: 10%; bottom: 10%;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}

/* Monstruo parado dentro de la mini puerta */
.monster-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-height: 95%;
  object-fit: contain;
  object-position: bottom center;
  animation: monsterPeek .5s cubic-bezier(.34,1.4,.64,1) .2s both;
  filter: drop-shadow(0 -3px 6px rgba(0,0,0,.25));
  z-index: 2;
  object-fit: contain;/*Agregado para imagenes dle mismo tamaño*/
}

@keyframes monsterPeek {
  from { transform: translateX(-50%) translateY(60%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.modal-doorframe {
  width: 120px;
  height: 190px;
  margin: 25px auto;
  position: relative;

  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(to bottom, #6d4224, #3b2412);
  padding: 10px;

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.6),
    0 12px 25px rgba(0,0,0,.6);
}

.modal-doorframe-inner {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1a1a1a 30%, #000 90%);
  border-radius: 6px;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-doorframe::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -15px;

  width: 40px;

  background: linear-gradient(to right, #5e3a1e, #2a170c);
  border-radius: 6px;

  transform: perspective(400px) rotateY(35deg);
  transform-origin: right;

  box-shadow: 4px 0 15px rgba(0,0,0,.5);
}

.modal-monster-inframe {
  width: 115px;
  position: relative;
  z-index: 2;

  transform: translateY(12px); /* parado en la base */
}

.modal-doorframe-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center bottom,
    rgba(255, 255, 255, 0.484),
    transparent 70%);
  pointer-events: none;
}

/* Burbuja de habla */
.monster-speech {
  position: absolute;
  top: 60px; right: -10px;
  background: #fffde7;
  border: 2px solid var(--mi-warning);
  border-radius: 9px 9px 9px 0;
  padding: 4px 9px;
  font-size: .62rem; font-weight: 800;
  color: #1a1a00; white-space: nowrap;
  animation: sPop .45s cubic-bezier(.34,1.6,.64,1) .5s both;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 9999;
}

@keyframes sPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* Texto de pregunta */
.question-text {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: clamp(.90rem, 2.8vw, 1rem);
  font-weight: 800;
  color: rgba(0, 0, 0, 0.9);
  line-height: 1.4;
  margin-bottom: 12px;
  padding: 0 2px;
}

/* Grid de opciones */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.opt-btn {
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 12px 12px;
  font-size: .9rem; font-weight: 800;
  color: rgba(0, 0, 0, 0.8); cursor: pointer;
  transition: all .2s; line-height: 1.25;
  font-family: Arial, sans-serif;
}

.opt-btn:hover:not(.answered) {
  border-color: var(--door-azul);
  background: rgba(58,79,199,.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(58,79,199,.3);
}

.opt-btn.correct {
  background: rgba(46,125,50,.2);
  border-color: #4caf50;
  color: #005004;
  animation: cPop .35s ease;
}

.opt-btn.wrong {
  background: rgba(198,40,40,.2);
  border-color: #ef5350;
  color: #9d0000;
  animation: wShake .35s ease;
}

.opt-btn.reveal-correct {
  background: rgba(46,125,50,.2);
  border-color: #4caf50;
  color: #005404;
}

@keyframes cPop   { 0%{transform:scale(1)} 45%{transform:scale(1.07)} 100%{transform:scale(1)} }
@keyframes wShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Mensaje resultado */
.result-msg {
  padding: 7px 12px; border-radius: 9px;
  font-weight: 800; font-size: .8rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  margin-top: 8px;
  font-family: Arial, sans-serif;
}
.result-msg.show        { opacity:1; transform:translateY(0); }
.result-msg.correct-msg {
  background: rgba(46,125,50,.15);
  color: #006d05;
  border: 1.5px solid rgba(76,175,80,.25);
}
.result-msg.wrong-msg {
  background: rgba(198,40,40,.15);
  color: #890000;
  border: 1.5px solid rgba(239,83,80,.25);
}

/* =============================================
   MODAL REGALO — borde verde lima
   ============================================= */
#regaloScreen .modal-card {
  border-top-color: var(--door-verde);
}

#regaloScreen .door-badge {
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(116,194,40,.2);
}

/* Mini puerta para regalo */
.regalo-img-wrap {
  width: 80px; height: 106px;
  margin: 4px auto 10px;
  background: linear-gradient(168deg, #5d8040 0%, #476a30 100%);
  border-radius: 6px 6px 4px 4px;
  border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6);
  position: relative;
  overflow: hidden;
}

.regalo-img-wrap::before {
  content: '';
  position: absolute;
  top: 20%; left: 10%; right: 10%; bottom: 10%;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 3px;
  z-index: 1;
}

.regalo-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 88%; max-height: 95%;
  object-fit: contain; object-position: bottom center;
  animation: monsterPeek .5s cubic-bezier(.34,1.4,.64,1) .2s both;
  z-index: 2;
}

.regalo-titulo {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: 1.2rem; font-weight: 900;
  color: var(--door-verde);
  margin-bottom: 4px;
}

.regalo-desc {
  color: rgba(255,255,255,.5);
  font-size: .8rem; font-weight: 700;
  line-height: 1.4; margin-bottom: 6px;
  font-family: Arial, sans-serif;
}

.regalo-puntos {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: 2rem; font-weight: 900;
  animation: pPop .55s cubic-bezier(.34,1.5,.64,1) .55s both;
  margin-bottom: 2px;
}
.regalo-puntos.suma  { color: #006305; }
.regalo-puntos.resta { color: #ff2121; }

@keyframes pPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/*Seccion donde se pregunta si quieres abrir el regalo o no*/
/* Botones decisión regalo */
.regalo-decision-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.regalo-btn-si {
    padding: 11px 28px;
    font-family: 'Baloo 2', Arial, sans-serif;
    font-size: .95rem;
    font-weight: 900;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 4px 14px rgba(22,163,74,.4);
}

.regalo-btn-si:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(22,163,74,.5);
}

.regalo-btn-no {
    padding: 11px 28px;
    font-family: 'Baloo 2', Arial, sans-serif;
    font-size: .95rem;
    font-weight: 900;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
}

.regalo-btn-no:hover {
    background: rgba(255,255,255,.15);
    color: white;
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
}

/* ── ANIMACIÓN TAPA REGALO ── */
#regaloImgContenedor {
    position: relative;
    overflow: visible !important; /* permite que la tapa salga hacia arriba */
}

.regalo-caja {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    z-index: 1;
}

.regalo-tapa {
    position: absolute;
    bottom: 30%;        /* arranca desde la mitad superior de la caja */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.regalo-tapa-abriendo {
   animation: tapaAlzarse 0.6s cubic-bezier(.34,1.4,.64,1) forwards;
}

@keyframes tapaAlzarse {
    0%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
    60%  { transform: translateX(-50%) translateY(-120px); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-160px); opacity: 0; }
}

.regalo-img-aparecer {
    animation: regaloAparecer 0.35s ease forwards;
}

@keyframes regaloAparecer {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1);   }
}

/* =============================================
   MODAL AGUJERO NEGRO — borde morado
   ============================================= */
#agujeroScreen .modal-card {
  background: #0e0a1a;
  border-top-color: #9c27b0;
  border-color: rgba(156,39,176,.2);
  box-shadow:
    0 0 50px rgba(156,39,176,.2),
    0 20px 60px rgba(0,0,0,.7);
}

#agujeroScreen .modal-back-btn {
  background: rgba(156,39,176,.1);
  border-color: rgba(156,39,176,.2);
  color: rgba(255,255,255,.4);
}
#agujeroScreen .modal-back-btn:hover {
  background: #9c27b0;
  color: white;
  border-color: #9c27b0;
}

#agujeroScreen .door-badge {
  color: #ce93d8;
  border-color: rgba(156,39,176,.25);
}

.agujero-img-wrap {
  width: 90px; height: 90px;
  margin: 4px auto 10px;
  position: relative;
  overflow: hidden;
}

@keyframes ringSpin { to { transform: rotate(360deg); } }

.agujero-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  position: absolute;
  inset: 0;
  animation: bhModalSpin 8s linear infinite, bhModalPulse 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(156,39,176,.9));
  z-index: 1;
}

@keyframes bhModalSpin  { to { transform: rotate(360deg); } }
@keyframes bhModalPulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(156,39,176,.8))  drop-shadow(0 0 16px rgba(58,79,199,.5)); }
  50%     { filter: drop-shadow(0 0 16px rgba(156,39,176,1))  drop-shadow(0 0 30px rgba(58,79,199,.8)); }
}

.agujero-titulo {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: 1.15rem; font-weight: 900;
  background: linear-gradient(135deg, var(--door-azul), #9c27b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 5px;
}

.agujero-desc {
  color: rgba(255,255,255,.5);
  font-size: .78rem; font-weight: 700;
  line-height: 1.4; margin-bottom: 10px;
  font-family: Arial, sans-serif;
}

.agujero-skip-badge {
  display: inline-block;
  background: rgba(58,79,199,.15);
  border: 1.5px solid rgba(58,79,199,.35);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: .78rem; font-weight: 800;
  color: #90a4ea;
  margin-bottom: 2px;
  font-family: Arial, sans-serif;
}

/* =============================================
   AGUJERO NEGRO — puerta del grid llena
   ============================================= */

/* El interior de la puerta no centra ni empuja hacia abajo */
.door-inside.agujero-bg {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: #000 !important;
}

/* La imagen ocupa todo el espacio y gira */
.door-inside.agujero-bg .di-monster.agujero-spin {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  position: absolute !important;
  inset: 0 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  /* SIN transform aquí — lo maneja la animación */
  animation: bhDoorSpin 7s linear infinite !important;
  transform-origin: center center !important;
}
@keyframes bhDoorSpin {
  from { transform: scale(3) rotate(0deg);   }
  to   { transform: scale(3) rotate(360deg); }
}

/* =============================================
   AGUJERO NEGRO — modal lleno
   ============================================= */

/* El marco del modal para agujero ocupa más espacio */
.modal-doorframe--agujero {
  width: 140px;
  height: 185px;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}

/* El inner no centra al fondo, se estira */
.modal-doorframe--agujero .modal-doorframe-inner {
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #000 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* La imagen llena todo el inner y gira */
.modal-doorframe--agujero .modal-monster-inframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  animation: bhModalSpin 8s linear infinite, bhModalPulse 4s ease-in-out infinite !important;
  transform-origin: center center !important;
}

/* Quitar el brillo blanco del inner que tapa la imagen */
.modal-doorframe--agujero .modal-doorframe-inner::before {
  display: none !important;
}

/* =============================================
   BOTÓN SIGUIENTE — todos los modales
   ============================================= */
.btn-next-door {
  display: block;
  margin: 10px auto 0;
  background: linear-gradient(135deg, var(--door-azul), var(--door-azul-d));
  color: white; border: none; border-radius: 8px;
  padding: 9px 28px;
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: .85rem; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(58,79,199,.35);
  transform: scale(0); opacity: 0;
  transition: transform .4s cubic-bezier(.34,1.5,.64,1), opacity .3s ease;
}

.btn-next-door.show  { transform:scale(1); opacity:1; }
.btn-next-door:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(58,79,199,.5);
}

#agujeroScreen .btn-next-door {
  background: linear-gradient(135deg, var(--door-azul), #9c27b0);
  box-shadow: 0 4px 20px rgba(156,39,176,.35);
}

#regaloScreen .btn-next-door {
  background: linear-gradient(135deg, var(--door-verde), var(--door-verde-d));
  box-shadow: 0 4px 20px rgba(116,194,40,.35);
}

/* =============================================
   NOTIFICACIÓN DE TURNO
   ============================================= */
#turnoNotif {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-90px);
  background: #f6d7ff;
  border: 2px solid var(--mi-warning);
  border-radius: 8px;
  padding: 10px 28px;
  box-shadow:
    0 0 20px rgba(249,201,35,.2),
    0 6px 20px rgba(0,0,0,.5);
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: .95rem; font-weight: 800;
  color: var(--mi-warning);
  z-index: 2000;
  transition: transform .45s cubic-bezier(.34,1.4,.64,1);
  white-space: nowrap;
  pointer-events: none;
}
#turnoNotif.show { transform: translateX(-50%) translateY(0); }

/* =============================================
   PANTALLA PUNTAJES
   ============================================= */
#puntajes {
  flex-direction: column;
  gap: 24px;
  padding: 40px 20px;
}

#puntajes h2 {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  color: var(--mi-warning);
  text-align: center;
  margin: 0;
  text-shadow:
    0 0 30px rgba(249,201,35,.3),
    2px 2px 0 rgba(0,0,0,.5);
}

.marcadores {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 680px;
}

.marcador {
  background: #16161c;
  border-radius: 10px;
  padding: 20px 28px;
  min-width: 150px;
  text-align: center;
  border: 2px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.marcador::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 0;
}

.marcador:nth-child(1)::before { background: var(--door-azul); }
.marcador:nth-child(2)::before { background: var(--door-teal); }
.marcador:nth-child(3)::before { background: #9c27b0; }
.marcador:nth-child(4)::before { background: var(--door-verde); }

.marcador:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}

.marcador h3 {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: rgba(255,255,255,.6);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.marcador p {
  font-family: 'Baloo 2', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--mi-warning);
  margin: 0;
  line-height: 1;
}

/* =============================================
   CONFETTI
   ============================================= */
.confetti-star {
  position: absolute; pointer-events: none;
  font-size: 1.1rem;
  animation: sFly .9s ease forwards; z-index: 10;
}

@keyframes sFly {
  0%   { opacity:1; transform:translate(0,0)                     rotate(0)    scale(1); }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) rotate(360deg) scale(.2); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 600px) {
  .doors-grid   { gap: 9px; }
  .modal-card   { padding: 26px 16px 20px; border-radius: 10px; }
  .options-grid { gap: 8px; }
  .turno-chip   { padding: 6px 12px 6px 8px; font-size: .78rem; }
  .marcadores   { gap: 12px; }
  .marcador     { min-width: 130px; padding: 16px 20px; }
}

/* Forzar giro agujero — debe ir AL FINAL del CSS */
.door-inside.agujero-bg .di-monster.agujero-spin {
  animation: bhDoorSpin 7s linear infinite !important;
  transform-origin: center center !important;
}

/* =============================================
   TODOS LOS MODALES — layout desktop 2 columnas
   ============================================= */
@media (min-width: 768px) {

    /* ── PREGUNTA ── */
    #monsterScreen .modal-card {
        max-width: 780px;
        padding: 24px 28px;
        display: grid;
        grid-template-columns: 220px 1fr;
        column-gap: 28px;
        align-items: start;
        text-align: left;
    }
    #monsterScreen .modal-back-btn   { grid-column: 1 / -1; justify-self: start; }
    #monsterScreen .door-badge       { grid-column: 2; justify-self: center; }
    #monsterScreen .modal-doorframe  { grid-column: 1; grid-row: 3 / 7; margin: 0 auto; width: 140px; height: 210px; }
    #monsterScreen .question-pts     { grid-column: 2; grid-row: 2; text-align: left; margin: 0 0 6px; }
    #monsterScreen .question-text    { grid-column: 2; grid-row: 3; font-size: clamp(.95rem, 1.8vw, 1.15rem); margin-bottom: 14px; }
    #monsterScreen .options-grid     { grid-column: 2; grid-row: 4; }
    #monsterScreen .result-msg       { grid-column: 2; grid-row: 5; text-align: left; }
    #monsterScreen .btn-next-door    { grid-column: 2; grid-row: 6; justify-self: start; margin: 8px 0 0; }
    #monsterScreen .monster-img-wrap { display: none; }
    #monsterScreen .monster-speech   { top: 10px; right: -14px; font-size: .7rem; }

    /* ── BASE COMPARTIDA: regalo, agujero, fantasma, persona ── */
    #regaloScreen .modal-card,
    #agujeroScreen .modal-card,
    #fantasmaScreen .modal-card,
    #personaScreen .modal-card {
        max-width: 680px;
        padding: 24px 28px;
        display: grid;
        grid-template-columns: 180px 1fr;
        column-gap: 28px;
        align-items: center;
        text-align: left;
    }

    /* Botón volver — fila 1 completa */
    #regaloScreen .modal-back-btn,
    #agujeroScreen .modal-back-btn,
    #fantasmaScreen .modal-back-btn,
    #personaScreen .modal-back-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }

    /* Badge — fila 2 col 1 */
    #regaloScreen .door-badge,
    #agujeroScreen .door-badge,
    #fantasmaScreen .door-badge,
    #personaScreen .door-badge {
        grid-column: 2;
        justify-self: center;
        margin-bottom: 4px;
    }

    /* Imagen — col 1, filas 3 a 7 */
    #regaloScreen .modal-doorframe,
    #agujeroScreen .modal-doorframe,
    #fantasmaScreen .modal-doorframe,
    #personaScreen .modal-doorframe {
        grid-column: 1;
        grid-row: 3 / 7;
        margin: 0 auto;
        width: 160px;
        height: 200px;
    }

    /* ── REGALO — columna derecha ── */
    #regaloScreen #regaloFaseDecision,
    #regaloScreen #regaloFaseResultado {
        grid-column: 2;
        grid-row: 3 / 7;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }
    #regaloScreen .regalo-titulo     { text-align: left; margin: 0; }
    #regaloScreen .regalo-desc       { text-align: left; margin: 0; }
    #regaloScreen .regalo-puntos     { text-align: left; }
    #regaloScreen .regalo-decision-btns { justify-content: flex-start; }
    #regaloScreen .btn-next-door     { align-self: flex-start; margin: 4px 0 0; }

    /* ── AGUJERO — columna derecha ── */
    #agujeroScreen .agujero-titulo   { grid-column: 2; grid-row: 3; text-align: left; margin: 0; }
    #agujeroScreen .agujero-desc     { grid-column: 2; grid-row: 4; text-align: left; margin: 0; }
    #agujeroScreen .agujero-skip-badge { grid-column: 2; grid-row: 5; justify-self: start; }
    #agujeroScreen .btn-next-door    { grid-column: 2; grid-row: 6; justify-self: start; margin: 4px 0 0; }

    /* Quitar anillos en desktop para que no interfieran */
    #agujeroScreen .agujero-ring,
    #agujeroScreen .agujero-ring2    { display: none; }

    /* ── FANTASMA — columna derecha ── */
    #fantasmaScreen .fantasma-titulo { grid-column: 2; grid-row: 3; text-align: left; margin: 0; }
    #fantasmaScreen .fantasma-desc   { grid-column: 2; grid-row: 4; text-align: left; margin: 0; }
    #fantasmaScreen .fantasma-puntos { grid-column: 2; grid-row: 5; text-align: left; }
    #fantasmaScreen .btn-next-door   { grid-column: 2; grid-row: 6; justify-self: start; margin: 4px 0 0; }

    /* ── PERSONA — columna derecha ── */
    #personaScreen .persona-titulo   { grid-column: 2; grid-row: 3; text-align: left; margin: 0; }
    #personaScreen .persona-desc     { grid-column: 2; grid-row: 4; text-align: left; margin: 0; }
    #personaScreen .persona-puntos   { grid-column: 2; grid-row: 5; text-align: left; }
    #personaScreen .btn-next-door    { grid-column: 2; grid-row: 6; justify-self: start; margin: 4px 0 0; }
}

.fullscreen-btn {
    position: absolute;
    top: 10px;
    left: 12px;
    background: rgba(255,255,255,.7);
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    color: #4a6b6b;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.fullscreen-btn:hover {
    background: white;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}