.play-stage {
  background: linear-gradient(160deg, #14332e 0%, #1e4a42 45%, #102621 100%);
  border: 2px solid var(--ink);
  padding: 24px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.play-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(224, 176, 138, 0.18), transparent 40%), radial-gradient(circle at 80% 90%, rgba(220, 232, 234, 0.12), transparent 35%);
  pointer-events: none;
}

.play-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.play-head h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
}

.play-score {
  display: flex;
  gap: 16px;
}

.play-score span {
  background: rgba(255, 250, 243, 0.08);
  border: 1px solid rgba(255, 250, 243, 0.16);
  padding: 8px 14px;
  font-size: 0.88rem;
}

.play-score b {
  color: #e0b08a;
  margin-right: 6px;
}

.slot-machine {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.slot-window {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(7, 11, 10, 0.45);
  border: 2px solid rgba(224, 176, 138, 0.35);
  padding: 16px;
  box-shadow: 0 0 40px rgba(224, 176, 138, 0.12);
}

.slot-reel {
  height: 120px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf3 0%, #ebe4d6 100%);
  border-radius: 8px;
  position: relative;
}

.slot-reel::before,
.slot-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 2;
  pointer-events: none;
}

.slot-reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(30, 74, 66, 0.35), transparent);
}

.slot-reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(30, 74, 66, 0.35), transparent);
}

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

.slot-strip.spinning {
  transition: transform 2s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.slot-symbol {
  height: 120px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
}

.slot-symbol.sun { color: #c46a3a; text-shadow: 0 0 16px rgba(196, 106, 58, 0.5); }
.slot-symbol.moon { color: #7aa2ff; text-shadow: 0 0 16px rgba(122, 162, 255, 0.45); }
.slot-symbol.star { color: #e0b08a; text-shadow: 0 0 16px rgba(224, 176, 138, 0.5); }
.slot-symbol.cloud { color: #dce8ea; }
.slot-symbol.mountain { color: #1e4a42; }

.slot-controls {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.slot-msg {
  text-align: center;
  min-height: 24px;
  margin-top: 14px;
  color: #e0b08a;
  font-weight: 600;
}

.bj-table {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.bj-zones {
  display: grid;
  gap: 20px;
}

.bj-hand {
  background: rgba(255, 250, 243, 0.06);
  border: 1px solid rgba(255, 250, 243, 0.14);
  padding: 16px;
  min-height: 120px;
}

.bj-hand h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: #e0b08a;
}

.bj-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 80px;
}

.bj-card {
  width: 52px;
  height: 72px;
  background: #fffaf3;
  color: var(--ink);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: dealCard 0.35s ease;
}

.bj-card.red { color: #9b3b2e; }
.bj-card.hidden { background: var(--spruce); color: transparent; border: 1px dashed rgba(255, 250, 243, 0.3); }

@keyframes dealCard {
  from { transform: translateY(-20px) rotate(-5deg); opacity: 0; }
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

.bj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.bj-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.roulette-stage {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.roulette-wheel-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 20px;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #e0b08a;
  background: conic-gradient(
    #9b3b2e 0deg 10deg, #1e4a42 10deg 20deg, #9b3b2e 20deg 30deg, #1e4a42 30deg 40deg,
    #9b3b2e 40deg 50deg, #1e4a42 50deg 60deg, #9b3b2e 60deg 70deg, #1e4a42 70deg 80deg,
    #9b3b2e 80deg 90deg, #1e4a42 90deg 100deg, #9b3b2e 100deg 110deg, #1e4a42 110deg 120deg,
    #9b3b2e 120deg 130deg, #1e4a42 130deg 140deg, #9b3b2e 140deg 150deg, #1e4a42 150deg 160deg,
    #9b3b2e 160deg 170deg, #1e4a42 170deg 180deg, #9b3b2e 180deg 190deg, #1e4a42 190deg 200deg,
    #9b3b2e 200deg 210deg, #1e4a42 210deg 220deg, #9b3b2e 220deg 230deg, #1e4a42 230deg 240deg,
    #9b3b2e 240deg 250deg, #1e4a42 250deg 260deg, #9b3b2e 260deg 270deg, #1e4a42 270deg 280deg,
    #9b3b2e 280deg 290deg, #1e4a42 290deg 300deg, #9b3b2e 300deg 310deg, #1e4a42 310deg 320deg,
    #c46a3a 320deg 360deg
  );
  box-shadow: 0 0 50px rgba(224, 176, 138, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.3);
  transition: transform 4s cubic-bezier(0.1, 0.8, 0.15, 1);
}

.roulette-wheel.spinning {
  filter: brightness(1.08);
}

.roulette-marker {
  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: 18px solid #e0b08a;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  z-index: 2;
}

.roulette-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf3, #e0b08a);
  border: 3px solid var(--ink);
  z-index: 1;
}

.roulette-bets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.bet-chip {
  padding: 10px 16px;
  border: 2px solid rgba(255, 250, 243, 0.3);
  background: transparent;
  color: var(--cream);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.bet-chip.active,
.bet-chip:hover {
  background: rgba(224, 176, 138, 0.2);
  border-color: #e0b08a;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(90deg, #e0b08a, #c46a3a);
  color: var(--ink);
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.play-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(224, 176, 138, 0.35);
}

.play-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.play-btn.ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 250, 243, 0.4);
  color: var(--cream);
}

.roulette-result {
  min-height: 24px;
  margin-top: 12px;
  color: #e0b08a;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .slot-symbol {
    font-size: 1.8rem;
  }

  .slot-reel {
    height: 90px;
  }

  .slot-symbol {
    height: 90px;
  }

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