.fs-play-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(19, 28, 49, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--fs-radius);
  padding: 1.5rem;
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.08);
}

.fs-play-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.fs-play-stat {
  text-align: center;
}

.fs-play-stat label {
  display: block;
  font-size: 0.75rem;
  color: var(--fs-slate);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.fs-play-stat span {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fs-cyan);
}

.fs-slot-machine {
  background: linear-gradient(180deg, #0f172a 0%, #131c31 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid rgba(34, 211, 238, 0.3);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.15), inset 0 0 20px rgba(139, 92, 246, 0.05);
  position: relative;
  overflow: hidden;
}

.fs-slot-machine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fs-gradient);
}

.fs-slot-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.fs-slot-reel {
  background: rgba(11, 17, 32, 0.9);
  border-radius: 10px;
  height: 120px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.15);
  position: relative;
}

.fs-slot-reel-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.1s linear;
}

.fs-slot-reel.spinning .fs-slot-reel-inner {
  animation: fsReelSpin 0.15s linear infinite;
}

.fs-slot-symbol {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--fs-cyan);
}

.fs-slot-symbol i {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.fs-slot-symbol.glow {
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.8);
  animation: fsSymbolGlow 0.6s ease;
}

.fs-slot-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.fs-slot-controls button {
  min-width: 140px;
}

.fs-slot-message {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--fs-teal);
  min-height: 1.4em;
}

.fs-bj-table {
  background: linear-gradient(135deg, #0d4f4f 0%, #0a3d3d 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid rgba(20, 184, 166, 0.4);
  box-shadow: 0 0 30px rgba(20, 184, 166, 0.12);
}

.fs-bj-hand {
  margin-bottom: 1.5rem;
}

.fs-bj-hand label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fs-bj-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 90px;
}

.fs-bj-card {
  width: 60px;
  height: 84px;
  background: var(--fs-white);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: fsCardDeal 0.4s ease;
}

.fs-bj-card.red {
  color: #dc2626;
}

.fs-bj-card.black {
  color: #1e293b;
}

.fs-bj-card.hidden-card {
  background: linear-gradient(135deg, #1e3a5f, #0f172a);
  color: var(--fs-cyan);
  font-size: 1.5rem;
}

.fs-bj-card .rank {
  font-size: 1.1rem;
}

.fs-bj-card .suit {
  font-size: 1.25rem;
}

.fs-bj-score {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  color: var(--fs-gold);
  margin-top: 0.5rem;
}

.fs-bj-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.fs-bj-message {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--fs-cyan);
  min-height: 1.4em;
}

.fs-roulette-wrap {
  text-align: center;
}

.fs-roulette-wheel-outer {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
}

.fs-roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #dc2626 0deg 9.73deg, #1e293b 9.73deg 19.46deg,
    #dc2626 19.46deg 29.19deg, #1e293b 29.19deg 38.92deg,
    #dc2626 38.92deg 48.65deg, #1e293b 48.65deg 58.38deg,
    #dc2626 58.38deg 68.11deg, #1e293b 68.11deg 77.84deg,
    #dc2626 77.84deg 87.57deg, #1e293b 87.57deg 97.3deg,
    #dc2626 97.3deg 107.03deg, #1e293b 107.03deg 116.76deg,
    #dc2626 116.76deg 126.49deg, #1e293b 126.49deg 136.22deg,
    #dc2626 136.22deg 145.95deg, #1e293b 145.95deg 155.68deg,
    #dc2626 155.68deg 165.41deg, #1e293b 165.41deg 175.14deg,
    #dc2626 175.14deg 184.87deg, #1e293b 184.87deg 194.6deg,
    #dc2626 194.6deg 204.33deg, #1e293b 204.33deg 214.06deg,
    #dc2626 214.06deg 223.79deg, #1e293b 223.79deg 233.52deg,
    #dc2626 233.52deg 243.25deg, #1e293b 243.25deg 252.98deg,
    #dc2626 252.98deg 262.71deg, #1e293b 262.71deg 272.44deg,
    #dc2626 272.44deg 282.17deg, #1e293b 282.17deg 291.9deg,
    #dc2626 291.9deg 301.63deg, #1e293b 301.63deg 311.36deg,
    #dc2626 311.36deg 321.09deg, #1e293b 321.09deg 330.82deg,
    #dc2626 330.82deg 340.55deg, #14b8a6 340.55deg 360deg
  );
  border: 6px solid var(--fs-gold);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.4);
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  position: relative;
}

.fs-roulette-wheel::after {
  content: '';
  position: absolute;
  inset: 30%;
  background: var(--fs-navy);
  border-radius: 50%;
  border: 3px solid var(--fs-gold);
}

.fs-roulette-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid var(--fs-gold);
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.fs-roulette-bets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.fs-roulette-bet {
  padding: 0.6rem 1.1rem;
  border-radius: 50px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(19, 28, 49, 0.8);
  color: var(--fs-white);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fs-transition);
}

.fs-roulette-bet:hover,
.fs-roulette-bet.active {
  border-color: var(--fs-cyan);
  background: rgba(34, 211, 238, 0.15);
  color: var(--fs-cyan);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}

.fs-roulette-bet.red.active {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

.fs-roulette-bet.black.active {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.2);
  color: #cbd5e1;
}

.fs-roulette-bet.green.active {
  border-color: var(--fs-teal);
  background: rgba(20, 184, 166, 0.2);
  color: var(--fs-teal);
}

.fs-roulette-message {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--fs-cyan);
  min-height: 1.4em;
}

@keyframes fsReelSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-360px); }
}

@keyframes fsSymbolGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes fsCardDeal {
  0% { transform: translateY(-30px) rotate(-5deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

@media (max-width: 575.98px) {
  .fs-slot-reel {
    height: 90px;
  }

  .fs-slot-symbol {
    height: 90px;
    font-size: 1.75rem;
  }

  .fs-roulette-wheel-outer {
    width: 220px;
    height: 220px;
  }

  .fs-bj-card {
    width: 50px;
    height: 70px;
  }
}