.slot-stage {
  position: relative;
  border-radius: 1rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, #1a2130, #10151f);
  border: 1px solid rgba(255, 90, 60, 0.25);
  box-shadow: inset 0 0 40px rgba(255, 90, 60, 0.08);
}

.slot-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.slot-meter {
  padding: 0.65rem 0.9rem;
  border-radius: 0.55rem;
  background: rgba(15, 18, 24, 0.75);
  border: 1px solid rgba(243, 246, 250, 0.12);
}

.slot-meter span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b95a7;
}

.slot-meter strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  color: #7cff9b;
  text-shadow: 0 0 18px rgba(124, 255, 155, 0.35);
}

.slot-window {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.9rem;
  background: #0b0f16;
  border: 1px solid rgba(124, 255, 155, 0.2);
  box-shadow: 0 0 30px rgba(124, 255, 155, 0.08);
}

.slot-reel {
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #232b3a, #151b26);
  border: 1px solid rgba(243, 246, 250, 0.12);
  overflow: hidden;
  position: relative;
}

.slot-reel.is-spinning {
  animation: reelPulse 0.12s linear infinite;
}

.slot-symbol {
  font-size: clamp(2rem, 6vw, 3.2rem);
  filter: drop-shadow(0 0 12px rgba(255, 90, 60, 0.45));
  transition: transform 0.25s ease;
}

.slot-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.slot-message {
  min-height: 1.5rem;
  margin-top: 0.9rem;
  color: #e8c878;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 16px rgba(232, 200, 120, 0.35);
}

.slot-stage.is-win {
  animation: winGlow 0.8s ease;
}

.bj-stage {
  display: grid;
  gap: 1rem;
}

.bj-table {
  border-radius: 1rem;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 255, 155, 0.12), transparent 45%),
    linear-gradient(160deg, #163528, #0f1c18 50%, #10151f);
  border: 1px solid rgba(124, 255, 155, 0.25);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.25);
}

.bj-row {
  margin-bottom: 1.1rem;
}

.bj-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9db0c7;
  margin-bottom: 0.55rem;
}

.bj-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 6.2rem;
}

.bj-card {
  width: 4.2rem;
  height: 5.8rem;
  border-radius: 0.55rem;
  background: linear-gradient(160deg, #f7f4ef, #dfe7f2);
  color: #171b24;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.35rem 0.4rem;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: cardIn 0.28s ease both;
}

.bj-card.red {
  color: #d62828;
}

.bj-card.back {
  background: linear-gradient(145deg, #ff5a3c, #9b1d1d);
  color: #fff;
  align-items: center;
  justify-content: center;
}

.bj-score {
  margin-top: 0.4rem;
  font-family: "Bricolage Grotesque", sans-serif;
  color: #7cff9b;
}

.bj-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.bj-status {
  margin-top: 0.85rem;
  font-weight: 700;
  color: #f3f6fa;
  text-shadow: 0 0 14px rgba(255, 90, 60, 0.35);
}

.roulette-stage {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 992px) {
  .roulette-stage {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.roulette-wheel-wrap {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  aspect-ratio: 1;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #ff5a3c;
  background: conic-gradient(
    #171b24 0deg 10deg,
    #ff5a3c 10deg 20deg,
    #171b24 20deg 30deg,
    #7cff9b 30deg 40deg,
    #171b24 40deg 50deg,
    #ff5a3c 50deg 60deg,
    #171b24 60deg 70deg,
    #7cff9b 70deg 80deg,
    #171b24 80deg 90deg,
    #ff5a3c 90deg 100deg,
    #171b24 100deg 110deg,
    #7cff9b 110deg 120deg,
    #171b24 120deg 130deg,
    #ff5a3c 130deg 140deg,
    #171b24 140deg 150deg,
    #7cff9b 150deg 160deg,
    #171b24 160deg 170deg,
    #ff5a3c 170deg 180deg,
    #171b24 180deg 190deg,
    #7cff9b 190deg 200deg,
    #171b24 200deg 210deg,
    #ff5a3c 210deg 220deg,
    #171b24 220deg 230deg,
    #7cff9b 230deg 240deg,
    #171b24 240deg 250deg,
    #ff5a3c 250deg 260deg,
    #171b24 260deg 270deg,
    #7cff9b 270deg 280deg,
    #171b24 280deg 290deg,
    #ff5a3c 290deg 300deg,
    #171b24 300deg 310deg,
    #7cff9b 310deg 320deg,
    #171b24 320deg 330deg,
    #ff5a3c 330deg 340deg,
    #171b24 340deg 350deg,
    #7cff9b 350deg 360deg
  );
  box-shadow:
    0 0 0 10px rgba(15, 18, 24, 0.9),
    0 0 40px rgba(255, 90, 60, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.45);
  transition: transform 4s cubic-bezier(0.12, 0.75, 0.12, 1);
}

.roulette-hub {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, #f3f6fa, #8b95a7);
  border: 3px solid #171b24;
  box-shadow: 0 0 20px rgba(124, 255, 155, 0.35);
  z-index: 2;
}

.roulette-pointer {
  position: absolute;
  top: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #7cff9b;
  filter: drop-shadow(0 0 8px rgba(124, 255, 155, 0.7));
  z-index: 3;
}

.roulette-panel {
  padding: 1rem;
  border-radius: 0.9rem;
  background: rgba(15, 18, 24, 0.7);
  border: 1px solid rgba(243, 246, 250, 0.12);
}

.roulette-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.85rem 0 1rem;
}

.roulette-num {
  appearance: none;
  border: 1px solid rgba(243, 246, 250, 0.14);
  background: #1b2230;
  color: #f3f6fa;
  border-radius: 0.4rem;
  min-height: 2.3rem;
  font-weight: 700;
  cursor: pointer;
}

.roulette-num.is-selected {
  background: #ff5a3c;
  color: #1a0d0a;
  box-shadow: 0 0 16px rgba(255, 90, 60, 0.45);
}

.roulette-result {
  margin-top: 0.85rem;
  font-weight: 700;
  color: #7cff9b;
  text-shadow: 0 0 14px rgba(124, 255, 155, 0.35);
}

@keyframes reelPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.25); }
}

@keyframes winGlow {
  0%, 100% { box-shadow: inset 0 0 40px rgba(255, 90, 60, 0.08); }
  50% { box-shadow: inset 0 0 60px rgba(124, 255, 155, 0.28), 0 0 30px rgba(255, 90, 60, 0.25); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .slot-reel.is-spinning,
  .slot-stage.is-win,
  .bj-card,
  .roulette-wheel {
    animation: none !important;
    transition: none !important;
  }
}

.game-cover-wrap {
  margin-bottom: 1.15rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(243, 246, 250, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.game-cover-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}