/* Slot machine arcade game — cabinet styling. Rarity colors mirror the
   site's rarity palette so symbols read instantly. */
.slot-machine { text-align: center; margin-top: 18px; }
.slot-balance { margin: 2px 0 12px; font-size: 15px; }
.slot-reels {
  display: flex; gap: 12px; justify-content: center;
  margin: 14px 0;
}
.slot-reel {
  width: 118px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: #14161c; border: 2px solid #2c2f3a; border-radius: 14px;
  transition: border-color .15s; overflow: hidden;
}
.slot-reel.spinning { border-color: #6b7280; }
.slot-sym {
  font-weight: 700; font-size: 11px; letter-spacing: 0;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  border: 2px solid transparent; flex-shrink: 0;
}
.slot-sym-common    { color: #c8ccd4; border-color: #6b7280; background: #1d2027; }
.slot-sym-uncommon  { color: #7ee787; border-color: #2ea043; background: #12241a; }
.slot-sym-rare      { color: #79c0ff; border-color: #1f6feb; background: #0e1c33; }
.slot-sym-epic      { color: #d2a8ff; border-color: #8957e5; background: #1e1433; }
.slot-sym-legendary { color: #ffdf5d; border-color: #d4a017; background: #2b2111; }
.slot-sym-chase     { color: #ff9ecd; border-color: #ec4899; background: #2c1220; }
.slot-controls { margin: 6px 0 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.slot-controls .btn { font-size: 15px; padding: 10px 18px; }
.slot-result { min-height: 40px; margin-bottom: 8px; }
.slot-summary { margin-top: 8px; }
.slot-win {
  display: inline-block; font-weight: 800; font-size: 17px;
  color: #ffdf5d; background: #2b2111; border: 2px solid #d4a017;
  border-radius: 12px; padding: 10px 18px;
  animation: slotWinPop .35s ease-out;
}
@keyframes slotWinPop {
  0% { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.slot-paytable { text-align: left; max-width: 460px; margin: 0 auto; }
.slot-paytable summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.slot-paytable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.slot-paytable td { padding: 5px 8px; border-top: 1px solid #2c2f3a; }
.slot-paytable td:first-child { white-space: nowrap; width: 42%; }
@media (max-width: 480px) {
  .slot-reel { width: 96px; height: 88px; }
  .slot-sym { font-size: 10px; padding: 5px 8px; }
}