/* Fusion Builder base styles */
.fusion-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fusion-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.fusion-slot {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a0f2e 100%);
  border: 2px solid #4a2a7f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.1), inset 0 0 8px rgba(138, 43, 226, 0.05);
}

.fusion-slot:hover {
  border-color: #7a5aaf;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}

.fusion-slot.locked {
  background: linear-gradient(135deg, #0a0a0f 0%, #15080f 100%);
  border: 2px dashed #4a2a7f;
  color: #888;
  opacity: 0.6;
}

/* Locked overlay inside the slot */
.fusion-slot-locked {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  height:100%;
  padding:6px;
  text-align:center;
}

/* New: Visual treatment for fusion slots that are currently unusable due to insufficient Mana Essence */
.fusion-slot.inactive-slot {
  filter: grayscale(70%) contrast(0.85) brightness(0.85);
  opacity: 0.7;
  border-color: rgba(120, 120, 120, 0.35);
  box-shadow: none;
  transform: none;
  pointer-events: auto; /* still allow interactions like attempting to unlock or seeing tooltip */
}

/* Keep unlock CTA visible but muted when slot is inactive */
.fusion-slot.inactive-slot .fusion-slot-unlock,
.fusion-slot.inactive-slot .fusion-slot-placeholder {
  opacity: 0.9;
  filter: none;
  color: rgba(200,200,200,0.9);
}

/* Slightly dim remove button when inactive (if present for UX consistency) */
.fusion-slot.inactive-slot .fusion-slot-remove {
  opacity: 0.6;
}

.fusion-slot-lock-icon {
  font-size:20px;
  opacity:0.9;
}

.fusion-slot-unlock {
  padding:6px 8px;
  font-size:12px;
  border:1px solid #4a2a7f;
  background: rgba(74, 42, 127, 0.1);
  color: #b0d4ff;
  cursor:pointer;
  border-radius:4px;
  transition:all 0.2s ease;
}

.fusion-slot-unlock:hover {
  border-color:#7a5aaf;
  background:rgba(138, 43, 226, 0.15);
  box-shadow:0 0 10px rgba(138, 43, 226, 0.2);
}

.fusion-slot-locked-hint {
  font-size:11px;
  color:#aaa;
  margin-top:4px;
}

.fusion-slot-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: 10px;
  text-align: center;
}

.fusion-slot-content span {
  font-size: 12px;
  font-weight: 500;
}

.fusion-slot-content .fusion-slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.fusion-slot-remove:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* Placeholder (empty) slot styling previously inline */
.fusion-slot-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(200,200,200,0.6);
  font-weight: 500;
  font-size: 16px; /* fallback main size */
}

/* Icon inside placeholder: faded / desaturated look */
.fusion-slot-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  filter: grayscale(60%);
  line-height: 0;
}

/* Numeric cost styling */
.fusion-slot-placeholder-cost {
  font-size: 14px;
  color: rgba(220,220,220,0.65);
  display: inline-block;
  vertical-align: middle;
}

/* Maintain previous large placeholder fallback (legacy) */
.fusion-slot-placeholder.legacy {
  font-size: 28px;
  color: #222;
  font-weight: 300;
}

/* Mobile fallback: slightly smaller placeholder text */
@media (max-width: 768px) {
  .fusion-slot-placeholder {
    font-size: 14px;
    gap: 4px;
  }
}

/* Mobile fallback: keep grid behavior manageable */
@media (max-width: 768px) {
  .fusion-slots {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .fusion-slot {
    border-width: 1px;
  }
}

/* Small mobile layout adjustment (<= 480px) */
@media (max-width: 480px) {
  .fusion-slots {
    /* Change to 2x2 layout */
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}