/* ========================================
   MONSTRES - Monsters
   ======================================== */

.monster-shop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.monster-btn {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  border: 2px solid #5a3a7f;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
  text-align: center;
  min-height: 100px;
}

.monster-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.6);
  border-color: #764ba2;
  background: linear-gradient(135deg, #875bb7 0%, #7889ef 100%);
}

.monster-btn:active {
  transform: translateY(0px);
}

.monster-icon {
  font-size: 32px;
  min-width: auto;
  text-align: center;
}

.monster-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.monster-name {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 2px;
}

.monster-stats {
  font-size: 10px;
  color: #ddd;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

/* Panel de monstres */
.monsters-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.monsters-panel h3 {
  color: #ffd700;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #0f3460;
}

.send-monster-info {
  background: rgba(234, 102, 102, 0.1);
  border: 1px solid #ea6666;
  border-radius: 8px;
  padding: 10px;
  color: white;
  font-size: 12px;
  margin-bottom: 10px;
}

.send-monster-info strong {
  color: #ea6666;
}