.hud-mount { margin-left: auto; }
:root { --sym: calc(var(--px) * 16); }

.slots-wrap { display: flex; gap: calc(var(--px) * 6); align-items: flex-start; justify-content: center; flex-wrap: wrap; }

.machine {
  background: linear-gradient(#7a1a2b, #4a0f1a);
  border: calc(var(--px) * 2) solid var(--gold);
  border-radius: calc(var(--px) * 4);
  box-shadow: 0 0 0 calc(var(--px) * 1.5) #2a1a0c, 0 calc(var(--px) * 3) 0 calc(var(--px) * 1.5) #0b0708;
  padding: calc(var(--px) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 3);
}
.marquee-top {
  color: var(--gold-bright);
  font-size: calc(var(--px) * 3);
  text-shadow: 0 0 calc(var(--px) * 2) #ffb300;
  letter-spacing: 2px;
}
.reels {
  position: relative;
  display: flex;
  gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 2);
  background: #0e0a0c;
  border: var(--px) solid #000;
  box-shadow: inset 0 0 0 var(--px) #2a2a2a;
}
.reel {
  width: var(--sym);
  height: calc(var(--sym) * 3);
  overflow: hidden;
  background: linear-gradient(#cfc7b4, #fdf8ec 30%, #fdf8ec 70%, #cfc7b4);
  border: 2px solid #000;
  position: relative;
}
.strip { display: flex; flex-direction: column; will-change: transform; }
.strip.spinning { filter: blur(.6px); }
.sym { width: var(--sym); height: var(--sym); display: grid; place-items: center; flex: 0 0 auto; }
.sym svg { width: 80%; height: 80%; image-rendering: pixelated; }
.payline {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: calc(var(--sym) + var(--px) * 2);
  transform: translateY(-50%);
  border-top: var(--px) solid rgba(255, 77, 109, .85);
  border-bottom: var(--px) solid rgba(255, 77, 109, .85);
  pointer-events: none;
}
.readout {
  min-width: calc(var(--sym) * 3 + var(--px) * 8);
  text-align: center;
  background: #0e0a0c;
  color: var(--neon-red);
  text-shadow: 0 0 calc(var(--px) * 1.5) var(--neon-red);
  border: var(--px) solid #000;
  padding: calc(var(--px) * 2);
  font-size: calc(var(--px) * 2.2);
  letter-spacing: 1px;
}
.readout.win { color: var(--neon-green); text-shadow: 0 0 calc(var(--px) * 1.5) var(--neon-green); }

.paytable { min-width: calc(var(--px) * 60); display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
.paytable small { font-size: calc(var(--px) * 2); color: #9fb3c8; }
.pay-row { display: flex; align-items: center; gap: calc(var(--px) * 2); font-size: calc(var(--px) * 2); }
.pay-row b { margin-left: auto; color: var(--gold-bright); font-weight: normal; }
.pay-syms { display: flex; gap: 2px; }
.pay-syms svg { width: calc(var(--px) * 6); height: calc(var(--px) * 6); }
.pay-row.jackpot.tease { animation: tease 500ms ease-in-out 4; }
@keyframes tease { 50% { color: var(--gold-bright); text-shadow: 0 0 calc(var(--px) * 2) #ffb300; } }
.pay-note { font-size: calc(var(--px) * 1.6); color: #9fb3c8; }

.bet-select { display: flex; gap: calc(var(--px) * 2); align-items: center; }
.bet-select .label { font-size: calc(var(--px) * 2); color: #9fb3c8; margin-right: calc(var(--px) * 2); }
.bet-select .btn.selected { background: var(--gold); color: var(--ink); box-shadow: 0 calc(var(--px) * 1.5) 0 var(--gold-dark); }
.broke-note { max-width: 60ch; text-align: center; font-size: calc(var(--px) * 2.5); }