.vwc-game {
  padding: var(--space-lg) 0 var(--space-2xl);
  font-family: var(--font-body);
}

.vwc-game__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.vwc-game__header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-flame-amber);
  margin: 0;
}

.vwc-game__balance {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-flame-amber);
  font-weight: 700;
}

.vwc-game__canvas {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid rgba(255, 102, 0, 0.35);
  background: var(--color-volcanic-dark);
  min-height: 200px;
}

.vwc-game__canvas canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.vwc-game__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  margin-bottom: var(--space-md);
}

.vwc-game__controls label {
  font-weight: 600;
  font-size: 0.9rem;
}

.vwc-game__controls input[type="number"] {
  width: 120px;
  padding: 0.5rem;
  background: var(--color-volcanic-dark);
  border: 2px solid var(--color-eruption-orange);
  border-radius: var(--radius-sm);
  color: var(--color-flame-amber);
  font-family: var(--font-mono);
}

.vwc-game__message {
  min-height: 1.5rem;
  font-weight: 600;
  color: var(--color-crater-green);
}

.vwc-emoji,
.vwc-slot-symbol {
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.iggy-toast {
  position: fixed;
  bottom: calc(var(--disclaimer-height) + 1rem);
  right: 1rem;
  max-width: 280px;
  padding: var(--space-lg);
  background: var(--color-lava-surface);
  border: 2px solid var(--color-flame-amber);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lava);
  z-index: 850;
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.iggy-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.iggy-toast p {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  color: var(--color-eruption-orange);
}

/* Poker */
.poker-table {
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-lava-surface);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-stone-gray);
}

.poker-hand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  min-height: 100px;
  margin: var(--space-md) 0;
}

.poker-card {
  width: 64px;
  height: 92px;
  background: var(--color-ash-cream);
  color: #1a0800;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid var(--color-stone-gray);
  animation: deal-card 0.4s ease-out;
}

.poker-card.is-held {
  border-color: var(--color-flame-amber);
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.6);
}

.poker-card.is-red {
  color: #cc2200;
}

@keyframes deal-card {
  from {
    opacity: 0;
    transform: translateY(-24px) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poker-card {
    animation: none;
  }
}

/* Roulette */
.roulette-wrap {
  display: grid;
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.roulette-wheel-outer {
  position: relative;
  width: min(280px, 80vw);
  aspect-ratio: 1;
  margin: 0 auto;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid var(--color-flame-amber);
  background: conic-gradient(
    #cc2200 0deg 9.73deg,
    #0f0600 9.73deg 19.46deg,
    #cc2200 19.46deg 29.19deg,
    #0f0600 29.19deg 38.92deg,
    #cc2200 38.92deg 48.65deg,
    #0f0600 48.65deg 58.38deg,
    #cc2200 58.38deg 68.11deg,
    #0f0600 68.11deg 77.84deg,
    #cc2200 77.84deg 87.57deg,
    #0f0600 87.57deg 97.3deg,
    #cc2200 97.3deg 107.03deg,
    #0f0600 107.03deg 116.76deg,
    #cc2200 116.76deg 126.49deg,
    #0f0600 126.49deg 136.22deg,
    #cc2200 136.22deg 145.95deg,
    #0f0600 145.95deg 155.68deg,
    #cc2200 155.68deg 165.41deg,
    #0f0600 165.41deg 175.14deg,
    #cc2200 175.14deg 184.87deg,
    #0f0600 184.87deg 194.6deg,
    #008833 194.6deg 204.33deg,
    #0f0600 204.33deg 214.06deg,
    #cc2200 214.06deg 223.79deg,
    #0f0600 223.79deg 233.52deg,
    #cc2200 233.52deg 243.25deg,
    #0f0600 243.25deg 252.98deg,
    #cc2200 252.98deg 262.71deg,
    #0f0600 262.71deg 272.44deg,
    #cc2200 272.44deg 282.17deg,
    #0f0600 282.17deg 291.9deg,
    #cc2200 291.9deg 301.63deg,
    #0f0600 301.63deg 311.36deg,
    #cc2200 311.36deg 321.09deg,
    #0f0600 321.09deg 330.82deg,
    #cc2200 330.82deg 340.55deg,
    #0f0600 340.55deg 350.28deg,
    #cc2200 350.28deg 360deg
  );
  transition: transform 4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.roulette-wheel.is-spinning {
  pointer-events: none;
}

.roulette-ball {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.roulette-bets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.roulette-bets .btn.is-selected {
  outline: 3px solid var(--color-flame-amber);
}

.roulette-result {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
}

/* Daily draw */
.draw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--space-sm);
  max-width: 480px;
  margin: var(--space-lg) auto;
}

.draw-num {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  border: 2px solid var(--color-eruption-orange);
  background: var(--color-volcanic-dark);
  color: var(--color-ash-cream);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
}

.draw-num.is-picked {
  background: var(--color-crater-green);
  border-color: var(--color-flame-amber);
}

.draw-num:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.draw-history {
  margin-top: var(--space-xl);
  font-size: 0.9rem;
}

.draw-history li {
  margin-bottom: var(--space-sm);
}

.roulette-numbers-label {
  text-align: center;
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-flame-amber);
}

.roulette-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  max-width: 520px;
  margin: 0 auto var(--space-lg);
}

.roulette-num-btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.roulette-num-red {
  color: #ff6b6b;
}

/* Slot stage + win line overlay */
.vwc-slot-stage {
  position: relative;
  max-width: 380px;
  margin: 0 auto var(--space-md);
}

.vwc-slot-win-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.vwc-slot-win-path {
  fill: none;
  stroke: #ff6600;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
  animation: lava-flow-line 1.5s ease-in-out infinite alternate;
}

.vwc-slot-win-path-glow {
  fill: none;
  stroke: #ffaa00;
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.45;
  filter: drop-shadow(0 0 12px #ff6600) drop-shadow(0 0 24px #ffaa00);
  animation: lava-flow-line 1.5s ease-in-out infinite alternate-reverse;
}

@keyframes lava-flow-line {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
  100% {
    stroke-dashoffset: 28;
    opacity: 1;
  }
}

.slot-bet-panel {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  max-width: 420px;
  margin: 0 auto;
}

.slot-bet-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: end;
  justify-content: center;
}

.slot-bet-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-weight: 600;
  min-width: 120px;
}

.slot-bet-label input {
  min-height: var(--touch-min);
}

#auto-spin-select {
  min-height: var(--touch-min);
  padding: 0 var(--space-sm);
  background: var(--color-volcanic-dark);
  color: var(--color-ash-cream);
  border: 2px solid var(--color-eruption-orange);
  border-radius: var(--radius-sm);
}

.poker-hand-result {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-flame-amber);
  margin: var(--space-sm) 0 var(--space-md);
  min-height: 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vwc-slot-win-path,
  .vwc-slot-win-path-glow {
    animation: none;
  }
}