* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; padding: 0; font-family: sans-serif; background: #ffe5ec; overflow: hidden; user-select: none; }

.escenario-kinder { position: relative; width: 100vw; height: 100vh; perspective: 1200px; }
.capa { position: absolute; width: 100%; height: 100%; transition: all 0.5s ease; }
.suelo { bottom: 0; height: 48%; transform: rotateX(45deg); transform-origin: bottom center; z-index: 2; }

/* ==========================================================================
   ESTRUCTURA ANATÓMICA DE LOS BEBÉS ADORABLES
   ========================================================================== */
.pet-contenedor {
  position: absolute; width: 160px; height: 180px;
  transform: rotateX(-45deg); transform-origin: bottom center;
  transition: left 0.8s ease, bottom 0.8s ease, transform 0.2s;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer; z-index: 5;
}

.sombra-suelo { width: 90px; height: 16px; background: rgba(0,0,0,0.15); border-radius: 50%; position: absolute; bottom: -5px; z-index: -1; }

/* 🔥 NUEVO RESALTADO TÁCTIL EXTREMO */
.pet-contenedor.seleccionado {
  filter: drop-shadow(0 0 25px #ff1493) drop-shadow(0 0 5px #fff);
  transform: rotateX(-45deg) scale(1.12);
}

/* 🦖 ANATOMÍA RENDERIZADA: BEBÉ T-REX */
.dino-render { position: relative; width: 110px; height: 140px; }
.dino-cabeza { 
  position: absolute; width: 85px; height: 75px; background: #4ad66d; 
  border-radius: 50% 50% 40% 40%; top: 5px; left: 12px; border: 3px solid #2bb44f; z-index: 4;
  box-shadow: inset 6px 6px 0 rgba(255,255,255,0.2);
}
.dino-cuerpo { 
  position: absolute; width: 70px; height: 65px; background: #4ad66d; 
  border-radius: 40%; bottom: 15px; left: 20px; border: 3px solid #2bb44f; z-index: 2;
}
.dino-panza { position: absolute; width: 40px; height: 40px; background: #fff3b0; border-radius: 50%; bottom: 2px; left: 12px; }
.dino-cola { 
  position: absolute; width: 45px; height: 30px; background: #4ad66d; 
  border-radius: 50% 20% 20% 50%; bottom: 25px; left: -15px; border: 3px solid #2bb44f;
  transform: rotate(-15deg); z-index: 1;
}
.dino-ojo { 
  position: absolute; width: 26px; height: 28px; background: #111; border-radius: 50%; top: 18px; border: 2px solid #fff; 
}
.dino-ojo.izq { left: 10px; } .dino-ojo.der { right: 10px; }
.dino-brillo { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; top: 3px; left: 4px; }
.dino-hocico { position: absolute; width: 45px; height: 20px; background: #3cb85a; border-radius: 40%; bottom: 6px; left: 20px; opacity: 0.4; }
.dino-pata { position: absolute; width: 24px; height: 26px; background: #3cb85a; border-radius: 50%; bottom: 0; z-index: 3; border: 2px solid #2bb44f;}
.dino-pata.izq { left: 18px; } .dino-pata.der { right: 18px; }

/* 🐉 ANATOMÍA RENDERIZADA: FURIA LUMINOSA BLANCA */
.furia-render { position: relative; width: 110px; height: 130px; }
.furia-cabeza {
  position: absolute; width: 75px; height: 65px; background: #f8f9fa; 
  border-radius: 50%; top: 10px; left: 17px; border: 3px solid #cbd5e1; z-index: 4;
}
.furia-cuerpo {
  position: absolute; width: 65px; height: 60px; background: #f8f9fa; 
  border-radius: 50% 50% 40% 40%; bottom: 15px; left: 22px; border: 3px solid #cbd5e1; z-index: 2;
}
.furia-oreja {
  position: absolute; width: 16px; height: 30px; background: #f8f9fa; border-radius: 50% 50% 0 0; border: 3px solid #cbd5e1; top: -15px;
}
.furia-oreja.izq { left: 8px; transform: rotate(-25deg); }
.furia-oreja.der { right: 8px; transform: rotate(25deg); }
.furia-ojo { position: absolute; width: 24px; height: 24px; background: #4ea8de; border-radius: 50%; top: 18px; border: 2px solid #fff; }
.furia-ojo.izq { left: 8px; } .furia-ojo.der { right: 8px; }
.furia-ala {
  position: absolute; width: 45px; height: 30px; background: #eef2f7; border-radius: 50%; border: 2px solid #cbd5e1; top: 45px; z-index: 1;
  transform-origin: center; animation: aleteo 2s infinite alternate;
}
.furia-ala.izq { left: -20px; } .furia-ala.der { right: -20px; }
.furia-cola { position: absolute; width: 60px; height: 16px; background: #f8f9fa; border-radius: 40%; bottom: 20px; right: -30px; border: 3px solid #cbd5e1; transform: rotate(15deg); z-index: 1;}
.furia-pata { position: absolute; width: 22px; height: 24px; background: #eef2f7; border-radius: 50%; bottom: 2px; z-index: 3; border: 2px solid #cbd5e1; }
.furia-pata.izq { left: 24px; } .furia-pata.der { right: 24px; }

@keyframes aleteo { 0% { transform: scaleY(0.8); } 100% { transform: scaleY(1.1); } }

/* 💬 Globos de humor */
.globo-humor {
  background: #fff; padding: 6px 12px; border-radius: 20px; font-size: 24px; font-weight: bold;
  position: absolute; top: -30px; box-shadow: 0 6px 0px rgba(0,0,0,0.08);
  border: 3px solid #333; z-index: 10; pointer-events: none;
}

/* ==========================================================================
   INTERFAZ LATERAL DERECHA (Botonera vertical y submenús)
   ========================================================================== */
.panel-lateral-derecho {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 15; display: flex; flex-direction: column; gap: 15px;
}

.contenedor-accion-vertical { position: relative; display: flex; align-items: center; justify-content: flex-end; }

.btn-circular-vertical {
  font-size: 32px; width: 72px; height: 72px; border-radius: 50%; border: none;
  cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,0.12); transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.btn-circular-vertical:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,0.12); }

/* submenús dinámicos desplegables (Vuelan a la izquierda) */
.submenu-desplegable {
  position: absolute; right: 88px; background: rgba(0,0,0,0.85);
  padding: 8px 15px; border-radius: 40px; display: flex; gap: 12px;
  animation: slideLeft 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 20; border: 2px solid #fff;
}
.btn-sub-item { font-size: 32px; background: transparent; border: none; cursor: pointer; transition: transform 0.2s; }
.btn-sub-item:hover { transform: scale(1.3); }

@keyframes slideLeft { 0% { transform: translateX(30px) scale(0); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
.hidden { display: none !important; }

/* Colores */
.amarillo { background: #ffd166; } .azul { background: #118ab2; } .verde { background: #06d6a0; }
.rosa { background: #ff85a1; } .morado { background: #b5179e; } .naranja { background: #f77f00; }

/* HUD Superior */
.hud-infantil { position: absolute; top: 15px; width: 100%; padding: 0 20px; z-index: 10; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.medidores-visuales { display: flex; gap: 20px; background: #fff; padding: 6px 20px; border-radius: 50px; box-shadow: 0 6px 0 #e2e8f0; }
.medidor { display: flex; align-items: center; gap: 6px; }
.icono-medidor { font-size: 24px; }
.barra-externa { width: 95px; height: 18px; background: #edf2f7; border-radius: 10px; overflow: hidden; border: 2px solid #cbd5e1; }
.barra-interna { height: 100%; width: 100%; transition: width 0.3s ease; }
.barra-interna.hambre { background: #ff4d6d; } .barra-interna.energia { background: #ffb703; }

.mapa-mundos { display: flex; gap: 8px; background: rgba(255,255,255,0.9); padding: 6px; border-radius: 30px; box-shadow: 0 5px 0 #cbd5e1; }
.btn-mundo { font-size: 24px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #fff; cursor: pointer; box-shadow: 0 3px 0 #e2e8f0; }
.btn-mundo.activo { background: #ffea75; transform: scale(1.12); box-shadow: 0 3px 0 #ccbb5c; }

/* Animaciones de estado de los muñecos */
.pet-eating { animation: masticar 0.2s infinite alternate; }
.pet-tapped { animation: salto 0.4s ease 1; }
@keyframes masticar { 0% { transform: rotateX(-45deg) scale(1); } 100% { transform: rotateX(-45deg) scale(1.15) translateY(-5px); } }
@keyframes salto { 0%, 100% { transform: rotateX(-45deg) translateY(0); } 50% { transform: rotateX(-45deg) translateY(-30px); } }

/* Entornos */
.la-guarderia { background: radial-gradient(circle, #ffccd5, #ffb3c1); } .la-guarderia + .suelo { background: #e2eafc; }
.la-cocina { background: linear-gradient(#ffaa00, #ffc300); } .la-cocina + .suelo { background: #cbd5e1; }
.el-parque { background: linear-gradient(#b7e4c7, #d8f3dc); } .el-parque + .suelo { background: #52b788; }
.la-selva { background: linear-gradient(#74c69d, #52b788); } .la-selva + .suelo { background: #2d6a4f; }
.el-espacio { background: radial-gradient(#2b2d42, #14151f); } .el-espacio + .suelo { background: #4a4e69; }
.modo-noche { filter: brightness(0.35) saturate(1.2); }