:root {
  --gold: #ffd36f;
  --hot: #ff2bd6;
  --red: #ff1948;
  --blue: #32d9ff;
  --dark: #110317;
  --glass: rgba(255,255,255,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  color: white;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,43,214,.35), transparent 26%),
    radial-gradient(circle at 80% 0%, rgba(50,217,255,.28), transparent 25%),
    linear-gradient(135deg, #08000c, #1b0522 45%, #07030d);
  overflow-x: hidden;
}

.casino-floor {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 14px;
  position: relative;
}

.casino-floor::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, black, transparent 75%);
  pointer-events: none;
}

.machine {
  width: min(470px, 96vw);
  border: 3px solid rgba(255,211,111,.8);
  border-radius: 34px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    radial-gradient(circle at 50% -5%, rgba(255,211,111,.25), transparent 38%),
    #190822;
  box-shadow:
    0 0 18px rgba(255,211,111,.9),
    0 0 42px rgba(255,43,214,.45),
    inset 0 0 26px rgba(255,255,255,.06);
  position: relative;
}

.machine::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  pointer-events: none;
}

.topper { text-align: center; padding: 6px 10px 14px; position: relative; }
.eyebrow {
  margin: 0 auto 8px;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  color: #100513;
  background: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 900;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  line-height: .82;
  font-size: clamp(46px, 14vw, 76px);
  letter-spacing: .04em;
  text-shadow: 0 0 10px var(--hot), 0 0 26px var(--hot), 0 3px 0 #5a102b;
}
h1 span { color: var(--gold); text-shadow: 0 0 12px var(--gold), 0 0 30px #ff8a00; }
.subtitle { color: #ffdff8; margin: 12px 0 0; }

.marquee {
  white-space: nowrap;
  overflow: hidden;
  border-radius: 12px;
  padding: 9px;
  background: #070009;
  border: 1px solid rgba(255,211,111,.45);
  color: var(--gold);
  letter-spacing: .12em;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 0 18px rgba(255,43,214,.25);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.stats div {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 10px;
  text-align: center;
}
.stats span { display: block; color: #ceb3d4; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.stats strong { display: block; font-size: 24px; color: white; }

.reel-window {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(#050106, #17061f);
  border: 2px solid rgba(255,211,111,.62);
  box-shadow: inset 0 0 26px rgba(0,0,0,.85), 0 0 18px rgba(255,211,111,.25);
}
.reel {
  height: 136px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff8df, #e9c265 48%, #fff6d5);
  color: #111;
  overflow: hidden;
  box-shadow: inset 0 -16px 26px rgba(0,0,0,.25), inset 0 13px 18px rgba(255,255,255,.55);
}
.symbol {
  font-size: clamp(52px, 16vw, 76px);
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.25));
}
.reel.spinning .symbol { animation: reelBlur .13s linear infinite; }
@keyframes reelBlur { from { transform: translateY(-46px) scale(1.04); opacity: .45; } to { transform: translateY(46px) scale(.96); opacity: .95; } }

.message {
  min-height: 30px;
  margin: 16px 0;
  text-align: center;
  color: #fff3be;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255,211,111,.5);
}

.controls { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 10px; }
button {
  border: 0;
  cursor: pointer;
  color: white;
  font-weight: 950;
  letter-spacing: .06em;
  transition: transform .12s ease, filter .12s ease;
}
button:active { transform: translateY(2px) scale(.98); }
button:disabled { cursor: not-allowed; filter: grayscale(.8) brightness(.6); }
.chrome, .maxbet {
  border-radius: 14px;
  padding: 15px 10px;
  background: linear-gradient(180deg, #543063, #210a28);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.spin {
  border-radius: 18px;
  padding: 18px 10px;
  color: #22000a;
  font-size: 22px;
  background: radial-gradient(circle at 50% 25%, #fff4b9, var(--gold) 45%, #ff8c00);
  box-shadow: 0 0 14px var(--gold), 0 0 34px rgba(255,43,214,.55);
}
.maxbet { width: 100%; margin-top: 10px; color: var(--gold); }

.paytable {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.1);
}
.paytable h2 { margin: 0 0 8px; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: .12em; }
.paytable div { display: flex; justify-content: space-between; padding: 6px 0; color: #f7e9ff; }
.legal { color: #b79fbd; text-align: center; font-size: 12px; margin-bottom: 0; }

#confetti { position: fixed; inset: 0; pointer-events: none; }

.winPulse { animation: winPulse .62s ease-in-out 3; }
@keyframes winPulse { 50% { transform: scale(1.025); box-shadow: 0 0 25px var(--gold), 0 0 70px var(--hot); } }

@media (max-width: 420px) {
  .reel { height: 112px; }
  .machine { padding: 16px; border-radius: 26px; }
}