/* === RESET BÁSICO === */
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: radial-gradient(circle at top, #001a33 0%, #000c1a 100%);
  color: #e3e9f1;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* === MENÚ Y JUEGO === */
#menu, #game {
  max-width: 600px;
  width: 100%;
  text-align: center;
  background: #0a1a33;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px #0055aa88;
}

#menu.hidden, #game.hidden { display: none; }

#menu h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #66ccff;
  text-shadow: 0 0 8px rgba(102, 204, 255, 0.3);
}

/* === BOTONES GENERALES === */
button {
  background: linear-gradient(135deg, #33aaff, #007acc);
  padding: 16px 32px;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 6px 14px #3399ffaa, inset 0 0 10px #66bbffcc;
  cursor: pointer;
  color: #f0faff;
  font-weight: 700;
  margin: 10px 5px;
  transition: all 0.3s ease;
  user-select: none;
}
button:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #66ccff, #3399ff);
}

/* === SCORE Y BALÓN === */
#scoreDisplay {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #aaddff;
  font-weight: 600;
}

#bigBall {
  background: white;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto 30px;
  box-shadow: 0 0 30px 10px #bbddffcc;
  cursor: pointer;
  transition: transform 0.1s ease;
  user-select: none;
}
#bigBall:active {
  transform: scale(0.95);
}

/* === UPGRADES === */
.upgrades {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.upgrade-card {
  background: #002a66;
  border: 2px solid #0066cc;
  border-radius: 12px;
  padding: 15px 20px;
  width: 260px;
  color: #cce5ff;
  font-weight: 600;
  user-select: none;
}
.upgrade-card h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #99ccff;
}
.upgrade-card button {
  margin-top: 10px;
  width: 100%;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 10px 0;
}
.upgrade-info {
  font-size: 0.9rem;
  margin-top: 5px;
  color: #a0c4ff;
}

/* === HEADER FIJO === */
#mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 26, 51, 0.9);
  backdrop-filter: blur(4px);
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  z-index: 100;
  box-shadow: 0 2px 6px #00000050;
}
#mainHeader button {
  font-size: 0.9rem;
  padding: 8px 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #33aaff, #007acc);
  color: white;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px #3399ffaa;
  cursor: pointer;
}
#mainHeader button:hover {
  background: linear-gradient(135deg, #66ccff, #3399ff);
  transform: translateY(-2px);
}

/* === FOOTER Y DEBUG === */
#footer-info {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: #a0b4d4;
  background: rgba(10, 26, 51, 0.8);
  padding: 8px 14px;
  border-radius: 12px;
  z-index: 1000;
}
#footer-info button {
  background: none;
  border: none;
  color: #66ccff;
  cursor: pointer;
  font-size: 1.2rem;
}
#debug-menu {
  position: fixed;
  bottom: 110px;
  right: 20px;
  width: 250px;
  background-color: #222;
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  font-size: 14px;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}
#debug-menu.hidden { display: none; }
#debug-menu h3 { margin: 0 0 10px; color: #4fc3f7; font-size: 16px; }
#debug-menu ul { padding-left: 18px; margin: 0; }

/* === LOGROS === */
#achievementsMenu {
  z-index: 1000;
}
.achievements-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  max-height: 300px;
  padding-right: 4px;
}
.achievements-list::-webkit-scrollbar { width: 8px; }
.achievements-list::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px; }
.achievements-list::-webkit-scrollbar-thumb { background: #4fc3f7; border-radius: 10px; }
.achievements-list::-webkit-scrollbar-thumb:hover { background: #38bdf8; }
.achievement {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 10px;
  background-color: #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.achievement.unlocked {
  background-color: #66cc00;
  box-shadow: 0 0 10px rgba(102, 204, 0, 0.5);
}
.achievement.unlocked h3 { color: #fff; }
.achievement.unlocked p { color: #ccc; }

/* === TOASTS === */
#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.toast {
  background: linear-gradient(to right, #22c55e, #16a34a);
  color: white;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  animation: fadeInUp 0.3s ease, fadeOut 0.5s ease 4.5s;
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 220px;
  text-align: left;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* === PERMANENTES Y STATS === */
#permanent-list .perm-card {
  background: #1f2937;
  border: 1px solid #6b21a8;
  border-radius: 8px;
  padding: 10px;
  color: #e0d9ff;
  display: flex;
  flex-direction: column;
}
#permanent-list .perm-card h3 { font-size: 1rem; margin-bottom: 4px; color: #d8b4fe; }
#permanent-list .perm-card p { font-size: 0.85rem; margin-bottom: 6px; }
#permanent-list .perm-card button {
  align-self: flex-end;
  background: linear-gradient(135deg,#a855f7,#7e22ce);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
}
#permanent-list .perm-card button:disabled { opacity: 0.5; cursor: not-allowed; }

.stats-card {
  background: #002a66;
  border: 2px solid #0066cc;
  border-radius: 12px;
  padding: 15px 20px;
  margin: 20px auto 0;
  width: 220px;
  color: #cce5ff;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(0, 102, 204, 0.4);
  text-align: center;
}
.stats-card h3 { margin-bottom: 10px; font-size: 1.2rem; color: #99ccff; }

/* === CHEST ANIMATIONS === */
#chestImgModal.opening {
  animation: chestOpenAnim 0.8s ease forwards;
}
@keyframes chestOpenAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* === Tienda de Bolas === */
#storeBtn {
  margin-top: 15px;
  background: linear-gradient(135deg,#33aaff,#007acc);
  padding: 12px 24px;
  border-radius: 9999px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 14px #3399ffaa, inset 0 0 10px #66bbffcc;
  transition: all 0.3s ease;
}
#storeBtn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,#66ccff,#3399ff);
}

#colorStoreMenu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1f2937; 
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 0 20px #0055aa88;
  z-index: 2000;
}

#colorStoreList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* === Cards de bolas === */
.color-card {
  background: #1f2937; 
  border: 1px solid #6b21a8;
  border-radius: 8px;
  padding: 10px;
  color: #e0d9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-card h3 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: #d8b4fe;
}

.color-card p {
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.color-card .ballPreview {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 15px #3399ffaa;
}

.color-card.equipped .ballPreview {
  box-shadow: 0 0 20px #a855f7, 0 0 30px #7e22ce55;
}

.color-card button {
  align-self: center;
  background: linear-gradient(135deg,#a855f7,#7e22ce);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
.color-card button:hover {
  transform: translateY(-2px);
}
.color-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#closeStoreBtn {
  align-self: center;
  background: linear-gradient(135deg,#33aaff,#007acc);
  padding: 10px 18px;
  border-radius: 9999px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 14px #3399ffaa, inset 0 0 10px #66bbffcc;
  transition: all 0.3s ease;
  margin-top: 10px;
}
#closeStoreBtn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,#66ccff,#3399ff);
}
.hidden {
  display: none !important;
}