/* CAPA DE ESTRELLAS */
body {
  background-image: url("../img/logos_backgroun/planet_background.png");
  background-repeat: no-repeat;
  background-position: center center;
  
  /* Esto es lo que falta */
  background-size: cover; 
  background-attachment: fixed; /* Opcional: para que el fondo no se mueva al hacer scroll */
  
  /* Asegura que el body tenga el alto de la pantalla */
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}





/* 🪐 Sistema */
.sistema {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ☀️ Sol */
.sol {
  position: absolute;
  width: 300px;
  height: 300px;
  left: -150px;
  top: 55%;
  transform: translateY(-50%);
  
  background: radial-gradient(circle, #ffd700, #ff8c00);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(255, 200, 0, 0.9);
}

/* 🪐 Planetas base */
.planeta {
  position: absolute;
  top: 55%;
  /* ❌ quitamos transform */
}

/* 👇 contenedor que usa JS */
.tilt-js {
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

/* imagen */
.planeta img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* profundidad */
.tilt-js img {
  transform: translateZ(25px);
  transition: transform 0.1s;
}

/* ✨ hover extra */
.planeta:hover {
  z-index: 10;
}


/* 📏 Tamaños */
.mercurio { width: 40px; height: 60px; }
.venus    { width: 60px; height: 90px; }
.tierra   { width: 65px; height: 95px; }
.marte    { width: 50px; height: 75px; }

.ceres    { width: 30px; height: 45px; }

.jupiter  { width: 160px; height: 240px; }
.saturno  { width: 150px; height: 220px; }
.urano    { width: 110px; height: 160px; }
.neptuno  { width: 100px; height: 150px; }

.pluton   { width: 35px; height: 50px; }
.eris     { width: 38px; height: 55px; }

.planeta-x {
  width: 80px;
  height: 120px;
  opacity: 0.7;
}

/* 📍 Posiciones */
.mercurio { left: 18%; }
.venus    { left: 22%; }
.tierra   { left: 26%; }
.marte    { left: 30%; }

.ceres    { left: 34%; }

.jupiter  { left: 40%; }
.saturno  { left: 52%; }
.urano    { left: 62%; }
.neptuno  { left: 70%; }

.pluton   { left: 76%; }
.eris     { left: 80%; }

.planeta-x {
  left: 86%;
}

@font-face {
  font-family: "balatro";
  src: url("../tipografia/balatro.otf") format("truetype");
}

.title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 30px;
  font-family: "balatro", fantasy;
  color: #9375ff;
}







/* 🌌 MODAL */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  animation: fadeIn 0.3s ease;
  z-index: 999;
  font-family: "balatro", fantasy;
}

/* 🧱 CONTENEDOR PRINCIPAL */
.modal-contenido {
  background: #2f3b46;
  border: 4px solid #9aa0a6;
  border-radius: 8px;
  width: 260px;
  padding: 15px;
  margin: 8% auto;
  text-align: center;
  position: relative;
  box-shadow: 4px 4px 0 #000;
}

/* 🏷️ TÍTULO */
.card-title {
  font-size: 22px;
  font-weight: bold;
  color: white;
  margin-bottom: 8px;
}

/* 📦 CAJA BLANCA INTERNA */
.card-box {
  background: #e6e6e6;
  color: black;
  border: 3px solid #9aa0a6;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  text-align: center;
}

/* ✍️ TEXTO ORDENADO */
.nivel {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.tipo {
  display: block;
  color: #f98f0a;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 10px;
}

.bonus {
  font-size: 15px;
  margin-bottom: 6px;
}

/* 🎨 COLORES */
.multi {
  color: #eb2d32;
  font-weight: bold;
}

.fichas {
  color:#0082d3;
  font-weight: bold;
}

/* 📝 DESCRIPCIÓN */
#texto-planeta {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 5px;
  color: #2421a1;
}

/* 🪐 IMAGEN */
#img-planeta {
  width: 100px;
  margin: 10px 0;
  image-rendering: pixelated;
}

/* 🔘 BOTÓN */
.btn-planeta {
  order: 2;
  margin-bottom: 10px;
  background: #00aaff;
  border: 2px solid #0077aa;
  padding: 6px 14px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

/* 📐 ORDEN FLEX */
.card-game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#img-planeta {
  order: 3;
}

/* ❌ botón cerrar */
#cerrar {
  position: absolute;
  top: 5px;
  right: 8px;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* 🎬 ANIMACIONES */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ===== PLANETAS VIVOS (ALINEADOS) ===== */
.planeta {
  animation: flotar 6s ease-in-out infinite;
  transform-origin: center;
}

/* variaciones */
.planeta:nth-child(2n) { animation-duration: 7s; }
.planeta:nth-child(3n) { animation-duration: 5.5s; }
.planeta:nth-child(4n) { animation-duration: 6.5s; }

.planeta:nth-child(2n) { animation-delay: 0.8s; }
.planeta:nth-child(3n) { animation-delay: 1.6s; }
.planeta:nth-child(5n) { animation-delay: 1.2s; }

/* 🚫 SIN translateY */
@keyframes flotar {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(1deg) scale(0.98); }
  50%  { transform: rotate(-1deg) scale(0.99); }
  75%  { transform: rotate(0.8deg) scale(0.985); }
  100% { transform: rotate(0deg) scale(1); }
}