/* ===========================================================================
   TAX VEGAS STUDIO — the three games
   All sizes scale with --u so each game re-proportions per format.
   =========================================================================== */

/* ============================ WHEEL ============================ */
.wheel-stack {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(900px * var(--u));
  height: calc(900px * var(--u));
  max-width: 100%;
}

.wheel-ring {
  position: relative;
  width: calc(900px * var(--u));
  height: calc(900px * var(--u));
  display: grid;
  place-items: center;
  filter: drop-shadow(0 calc(26px * var(--u)) calc(60px * var(--u)) rgba(0, 0, 0, .6));
}
/* The canvas is authored at 900 CSS px; scaling it here keeps the drawing
   code resolution-independent while the stage handles format sizing. */
.wheel-ring canvas {
  width: calc(900px * var(--u)) !important;
  height: calc(900px * var(--u)) !important;
  display: block;
}

.wheel-pointer {
  position: absolute;
  top: calc(-18px * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: calc(62px * var(--u));
  height: calc(86px * var(--u));
  background: linear-gradient(180deg, #fff6d0, var(--c-gold) 40%, var(--c-gold-deep));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 calc(8px * var(--u)) calc(16px * var(--u)) rgba(0, 0, 0, .65));
}
.wheel-pointer::after {
  content: "";
  position: absolute;
  top: calc(-12px * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(34px * var(--u));
  height: calc(34px * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--c-gold-deep));
  box-shadow: 0 0 calc(22px * var(--u)) var(--c-gold);
}

.wheel-hub {
  position: absolute;
  width: calc(206px * var(--u));
  height: calc(206px * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 32%, #1b2545, var(--c-hub) 70%);
  border: calc(5px * var(--u)) solid var(--c-gold);
  box-shadow: 0 0 calc(40px * var(--u)) rgba(255, 215, 0, .35),
              inset 0 0 calc(30px * var(--u)) rgba(0, 0, 0, .7);
  z-index: 3;
}
.wheel-hub-inner {
  display: grid;
  justify-items: center;
  gap: calc(2px * var(--u));
  font-family: var(--font-display);
  line-height: .95;
}
.hub-tax { font-size: calc(32px * var(--u)); color: #fff; letter-spacing: .06em; }
.hub-vegas {
  font-size: calc(34px * var(--u));
  background: linear-gradient(180deg, #fff8d2, var(--c-gold) 50%, var(--c-gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================ SLOTS ============================ */
.machine {
  --reel-cell: calc(132px * var(--u));
  width: calc(880px * var(--u));
  max-width: 100%;
  border-radius: calc(32px * var(--u));
  background: linear-gradient(180deg, var(--c-navy), #0a1330);
  border: calc(5px * var(--u)) solid var(--c-gold);
  box-shadow: 0 calc(30px * var(--u)) calc(80px * var(--u)) rgba(0, 0, 0, .65),
              inset 0 0 calc(60px * var(--u)) rgba(0, 0, 0, .55);
  overflow: hidden;
}

.machine-top {
  padding: calc(16px * var(--u));
  text-align: center;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep));
  border-bottom: calc(4px * var(--u)) solid rgba(0, 0, 0, .35);
}
.machine-top-text {
  font-family: var(--font-display);
  font-size: calc(38px * var(--u));
  color: #15182a;
  letter-spacing: .18em;
}

.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12px * var(--u));
  padding: calc(18px * var(--u));
  background: #05070f;
}

.reel {
  position: relative;
  height: calc(var(--reel-cell) * 3);
  overflow: hidden;
  border-radius: calc(14px * var(--u));
  background: linear-gradient(180deg, #11182f, #080c18);
  border: calc(3px * var(--u)) solid rgba(255, 215, 0, .35);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* top and bottom shading so the strip reads as a drum, not a list */
.reel::before,
.reel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: calc(var(--reel-cell) * .9);
  z-index: 3;
  pointer-events: none;
}
.reel::before { top: 0; background: linear-gradient(180deg, #05070f, transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, #05070f, transparent); }

.reel.is-locked {
  border-color: var(--c-gold);
  box-shadow: 0 0 calc(30px * var(--u)) rgba(255, 215, 0, .45),
              inset 0 0 calc(24px * var(--u)) rgba(255, 215, 0, .18);
}

.reel-strip { will-change: transform; }
.reel-strip.is-spinning { filter: blur(calc(1.6px * var(--u))); }

.cell {
  height: var(--reel-cell);
  display: grid;
  place-items: center;
  padding: 0 calc(10px * var(--u));
  text-align: center;
}
.cell span {
  font-family: var(--font-display);
  font-size: calc(30px * var(--u));
  line-height: 1.08;
  color: #fff;
  word-break: break-word;
  /* long names clamp to two lines rather than pushing the reel out of step */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell.is-win span {
  background: linear-gradient(180deg, #fff, #ffe9a8 55%, var(--c-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.payline {
  position: absolute;
  left: calc(6px * var(--u));
  right: calc(6px * var(--u));
  top: 50%;
  height: calc(4px * var(--u));
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 calc(18px * var(--u)) var(--c-gold);
}
.payline::before, .payline::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: calc(11px * var(--u)) solid transparent;
  border-bottom: calc(11px * var(--u)) solid transparent;
}
.payline::before { left: calc(-14px * var(--u)); border-left: calc(16px * var(--u)) solid var(--c-gold); }
.payline::after { right: calc(-14px * var(--u)); border-right: calc(16px * var(--u)) solid var(--c-gold); }

.machine-foot {
  padding: calc(14px * var(--u));
  background: linear-gradient(180deg, #0a1330, var(--c-navy));
  border-top: calc(3px * var(--u)) solid rgba(255, 215, 0, .35);
}
.machine-lamps { display: flex; justify-content: center; gap: calc(16px * var(--u)); }
.machine-lamps i {
  width: calc(18px * var(--u));
  height: calc(18px * var(--u));
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 calc(16px * var(--u)) var(--c-gold);
  animation: lamp 1.3s ease-in-out infinite;
}
.machine-lamps i:nth-child(2) { animation-delay: .18s; }
.machine-lamps i:nth-child(3) { animation-delay: .36s; }
.machine-lamps i:nth-child(4) { animation-delay: .54s; }
.machine-lamps i:nth-child(5) { animation-delay: .72s; }
@keyframes lamp { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }

/* ============================ ROULETTE ============================ */
.roulette-stack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(20px * var(--u));
  width: 100%;
}

.roulette-ring {
  position: relative;
  width: calc(820px * var(--u));
  height: calc(820px * var(--u));
  max-width: 100%;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 calc(26px * var(--u)) calc(60px * var(--u)) rgba(0, 0, 0, .6));
}
.roulette-ring canvas {
  width: calc(820px * var(--u)) !important;
  height: calc(820px * var(--u)) !important;
  display: block;
}

.roulette-marker {
  position: absolute;
  top: calc(-10px * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: calc(28px * var(--u));
  height: calc(44px * var(--u));
  background: linear-gradient(180deg, #fff, var(--c-gold));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 calc(6px * var(--u)) calc(12px * var(--u)) rgba(0, 0, 0, .7));
}

.roulette-center {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: calc(2px * var(--u));
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-display);
  line-height: 1;
}
.rc-top { font-size: calc(30px * var(--u)); color: #fff; letter-spacing: .1em; }
.rc-bot {
  font-size: calc(19px * var(--u));
  letter-spacing: .2em;
  background: linear-gradient(180deg, #fff8d2, var(--c-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the felt "table" beside the wheel */
.felt-board {
  width: calc(880px * var(--u));
  max-width: 100%;
  padding: calc(16px * var(--u));
  border-radius: calc(18px * var(--u));
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #0d5338, #07361f);
  border: calc(4px * var(--u)) solid var(--c-gold-deep);
  box-shadow: inset 0 0 calc(40px * var(--u)) rgba(0, 0, 0, .55);
}
.felt-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(6px * var(--u));
}
.felt-cell {
  padding: calc(8px * var(--u)) calc(5px * var(--u));
  border-radius: calc(7px * var(--u));
  background: rgba(0, 0, 0, .3);
  border: calc(1.5px * var(--u)) solid rgba(255, 255, 255, .2);
  text-align: center;
  min-height: calc(42px * var(--u));
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.felt-cell span {
  font-size: calc(15px * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
  line-height: 1.15;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.felt-cell.is-win {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep));
  border-color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 calc(26px * var(--u)) rgba(255, 215, 0, .8);
}
.felt-cell.is-win span { color: #11131f; font-weight: 900; }

.felt-more, .felt-empty {
  margin: calc(10px * var(--u)) 0 0;
  text-align: center;
  font-size: calc(16px * var(--u));
  color: rgba(255, 255, 255, .7);
}
.felt-empty { margin: calc(18px * var(--u)) 0; }

/* In 16:9 the wheel and table sit side by side, which is the only way both
   stay legible in a short, wide frame. minmax(0,1fr) stops the table from
   forcing the row wider than the stage and shoving the wheel off-frame. */
.stage[data-format="16x9"] .roulette-stack {
  width: auto;
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: calc(34px * var(--u));
}
.stage[data-format="16x9"] .felt-board { width: 100%; }
.stage[data-format="16x9"] .felt-grid { grid-template-columns: repeat(3, 1fr); }
.stage[data-format="16x9"] .felt-cell { min-height: calc(54px * var(--u)); }
.stage[data-format="16x9"] .felt-cell span { font-size: calc(19px * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .machine-lamps i { animation: none !important; opacity: .8; }
  .reel-strip.is-spinning { filter: none; }
}
:root[data-motion="reduce"] .machine-lamps i { animation: none !important; opacity: .8; }
:root[data-motion="reduce"] .reel-strip.is-spinning { filter: none; }