.slot-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
}

.slot-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #091c1b;
}

.ranking-type {
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.ranking-type.active {
  background: var(--surface2);
  color: var(--mint);
}

.enhance-effect.neutral {
  color: #b8cbc6;
  background: radial-gradient(circle, rgba(150, 175, 169, .3), rgba(58, 76, 72, .18) 32%, rgba(2, 10, 9, .92) 66%);
}

.enhance-effect.neutral span {
  filter: grayscale(1) drop-shadow(0 0 18px #a9bdb8);
  animation: neutralPulse .85s ease both;
}

.enhance-effect.neutral strong {
  animation: neutralWobble .7s ease both;
}

.enhance-effect.great-success {
  color: #fff1a6;
  background: radial-gradient(circle, rgba(255, 226, 92, .48), rgba(109, 74, 13, .3) 30%, rgba(2, 10, 9, .94) 65%);
}

.enhance-effect.great-success span {
  filter: drop-shadow(0 0 24px #ffd84f);
  animation: greatSuccessBurst .85s cubic-bezier(.12, .9, .2, 1.3);
}

.enhance-effect.great-failure {
  color: #ffaaa2;
  background: radial-gradient(circle, rgba(151, 18, 18, .52), rgba(29, 3, 3, .95) 65%);
  animation: greatFailureShake .65s ease both;
}

.enhance-effect.great-failure span {
  filter: drop-shadow(0 0 22px #ff3128);
  animation: greatFailureDrop .75s ease both;
}

@keyframes greatSuccessBurst {
  0% { opacity: 0; transform: scale(.15) rotate(-30deg); }
  55% { opacity: 1; transform: scale(1.55) rotate(12deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes greatFailureDrop {
  0% { opacity: 0; transform: translateY(-70px) scale(1.8); }
  55% { opacity: 1; transform: translateY(12px) scale(.9); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes greatFailureShake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}

@keyframes neutralPulse {
  0% { opacity: 0; transform: scale(.65); }
  45% { opacity: 1; transform: scale(1.15); }
  70% { transform: scale(.95); }
  100% { transform: scale(1); }
}

@keyframes neutralWobble {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}