@font-face {
  font-family: "Manrope";
  src: url("/slot/assets/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/slot/assets/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --petrol: #0a2a30;
  --petrol-deep: #05191d;
  --teal: #00a0af;
  --teal-deep: #005f6b;
  --gold: #f4c653;
  --gold-deep: #9a6a14;
  --red: #d8232a;
  --paper: #ffffff;
  /* One unit scales the whole machine to fit the projector or the phone. */
  --u: min(1vw, 1.72vh);
  --cell: calc(13 * var(--u));
  --window: calc(23 * var(--u));
  --arm: calc(15 * var(--u));
  --gold-trim: linear-gradient(180deg, #fff0b5 0%, var(--gold) 28%, var(--gold-deep) 62%, var(--gold) 100%);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 42%, #14505a 0%, var(--petrol) 48%, var(--petrol-deep) 100%);
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Machine */
.machine {
  position: relative;
  width: calc(76 * var(--u));
  padding: calc(0.8 * var(--u));
  border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  background: var(--gold-trim);
  box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.55);
}
.marquee {
  display: flex;
  flex-direction: column;
  gap: calc(0.9 * var(--u));
  padding: calc(1.4 * var(--u)) calc(3 * var(--u));
  border-radius: calc(5.4 * var(--u)) calc(5.4 * var(--u)) 0 0;
  background: linear-gradient(180deg, var(--red) 0%, #8f1117 100%);
}
.marquee h1 {
  margin: 0;
  font-size: calc(6.6 * var(--u));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 calc(0.3 * var(--u)) 0 #5c0a0e, 0 0 calc(2.4 * var(--u)) rgba(244, 198, 83, 0.55);
}
.bulbs {
  display: flex;
  justify-content: space-between;
}
.bulb {
  width: calc(1.25 * var(--u));
  height: calc(1.25 * var(--u));
  border-radius: 50%;
  background: #fff4c7;
  box-shadow: 0 0 calc(1 * var(--u)) var(--gold);
  animation: bulb 1.4s steps(1) infinite;
}
.bulb:nth-child(even) { animation-delay: 0.7s; }
body[data-state="spinning"] .bulb,
body[data-state="jackpot"] .bulb { animation-duration: 0.7s; }
body[data-state="spinning"] .bulb:nth-child(even),
body[data-state="jackpot"] .bulb:nth-child(even) { animation-delay: 0.35s; }
@keyframes bulb {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
}

.cabinet {
  position: relative;
  padding: calc(2.2 * var(--u)) calc(3 * var(--u));
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 58%, #03444d 100%);
}
.reel-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1 * var(--u));
  padding: calc(0.9 * var(--u));
  border-radius: calc(1.2 * var(--u));
  background: var(--petrol-deep);
  box-shadow: inset 0 0 0 calc(0.35 * var(--u)) var(--gold);
}

/* Reels */
.reel {
  position: relative;
  height: var(--window);
  overflow: hidden;
  border-radius: calc(0.5 * var(--u));
  background: var(--paper);
}
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 25, 29, 0.72) 0%, rgba(5, 25, 29, 0) 26%,
    rgba(5, 25, 29, 0) 74%, rgba(5, 25, 29, 0.72) 100%);
}
.reel-inner {
  position: absolute;
  inset: 0;
}
.strip {
  position: absolute;
  top: calc((var(--window) - var(--cell)) / 2);
  left: 0;
  right: 0;
  will-change: transform;
}
/* Blur the reel window, not the tall strip, so the browser filters a small area. */
.reel.is-fast .reel-inner {
  overflow: hidden;
  filter: blur(calc(0.42 * var(--u)));
}
.reel.is-landed .reel-inner { animation: land 0.26s ease-out; }
@keyframes land {
  0% { transform: translateY(calc(1.1 * var(--u))); }
  55% { transform: translateY(calc(-0.35 * var(--u))); }
  100% { transform: translateY(0); }
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cell);
  padding: 0 calc(1.3 * var(--u));
  border-bottom: 1px solid rgba(10, 42, 48, 0.14);
  color: var(--petrol);
  font-size: max(calc(2.35 * var(--u)), 9.5px);
  font-weight: 800;
  line-height: 1.14;
  text-align: center;
}
.cell img {
  display: block;
  width: 100%;
  height: auto;
}
body[data-state="jackpot"] .reel {
  animation: reel-win 0.5s steps(1) infinite;
}
@keyframes reel-win {
  0% { box-shadow: 0 0 0 calc(0.4 * var(--u)) var(--gold), 0 0 calc(3 * var(--u)) var(--gold); }
  50% { box-shadow: none; }
}

.pointer {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: calc(1.5 * var(--u)) solid transparent;
  transform: translateY(-50%);
}
.pointer-left { left: calc(0.7 * var(--u)); border-left: calc(2 * var(--u)) solid var(--gold); }
.pointer-right { right: calc(0.7 * var(--u)); border-right: calc(2 * var(--u)) solid var(--gold); }

.tray {
  margin: 0;
  padding: calc(1.1 * var(--u));
  border-radius: 0 0 calc(1.4 * var(--u)) calc(1.4 * var(--u));
  background: var(--petrol-deep);
  color: var(--gold);
  font-size: max(calc(3.1 * var(--u)), 13px);
  font-weight: 800;
  text-align: center;
}

/* Lever */
.lever {
  position: relative;
  flex: none;
  width: calc(10 * var(--u));
  height: calc(40 * var(--u));
  margin-left: calc(-0.4 * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(2 * var(--u));
  background: none;
}
.lever:disabled { cursor: default; }
.lever-hub {
  position: absolute;
  top: calc(50% - 2.6 * var(--u));
  left: 0;
  width: calc(5.4 * var(--u));
  height: calc(5.2 * var(--u));
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: var(--gold-trim);
  box-shadow: 0 calc(0.3 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.5);
}
.lever-arm {
  position: absolute;
  left: calc(1.9 * var(--u));
  bottom: 50%;
  width: calc(1.5 * var(--u));
  height: var(--arm);
  transform-origin: 50% 100%;
  border-radius: calc(0.8 * var(--u));
  background: linear-gradient(90deg, #7f8d91 0%, #ffffff 42%, #aab7ba 68%, #5e6b6f 100%);
}
.lever-ball {
  position: absolute;
  left: calc(-0.3 * var(--u));
  /* The ball sits on the arm tip: half of the hub height plus the arm length. */
  top: calc(50% - var(--arm) - 2.9 * var(--u));
  width: calc(5.9 * var(--u));
  height: calc(5.9 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff9c9c 0%, var(--red) 42%, #7d0d12 100%);
  box-shadow: 0 calc(0.6 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.5);
}
.lever:not(:disabled):hover .lever-ball { filter: brightness(1.15); }
body[data-state="idle"] .lever-ball { animation: ball-invite 1.8s ease-in-out infinite; }
@keyframes ball-invite {
  50% { box-shadow: 0 0 0 calc(0.8 * var(--u)) rgba(244, 198, 83, 0.65), 0 0 calc(2.6 * var(--u)) var(--gold); }
}
.lever.is-pulled .lever-arm { animation: arm-pull 0.72s cubic-bezier(0.3, 0.7, 0.3, 1); }
.lever.is-pulled .lever-ball { animation: ball-pull 0.72s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes arm-pull {
  28%, 42% { transform: scaleY(-0.86); }
  82% { transform: scaleY(1.05); }
  100% { transform: scaleY(1); }
}
@keyframes ball-pull {
  28%, 42% { transform: translateY(calc(var(--arm) * 1.86)); }
  82% { transform: translateY(calc(var(--arm) * -0.05)); }
  100% { transform: translateY(0); }
}

/* Sound */
.mute {
  position: fixed;
  top: max(calc(1.4 * var(--u)), 10px);
  right: max(calc(1.4 * var(--u)), 10px);
  z-index: 3;
  width: max(calc(4.6 * var(--u)), 44px);
  height: max(calc(4.6 * var(--u)), 44px);
  padding: max(calc(1 * var(--u)), 10px);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.mute svg { display: block; width: 100%; height: 100%; }
.mute .sound-off { display: none; }
.mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: inline; }
/* On a short landscape phone the button would cover the lever. */
@media (max-height: 480px) {
  .mute { top: auto; right: auto; bottom: 8px; left: 8px; }
}

/* Congratulations */
.win {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: radial-gradient(ellipse at 50% 45%, #0f6370 0%, var(--petrol) 55%, var(--petrol-deep) 100%);
}
.win[hidden] { display: none; }
.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.win-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3.4 * var(--u));
  width: min(90vw, calc(78 * var(--u)));
  text-align: center;
  animation: win-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.win h2 {
  margin: 0;
  max-width: 19em;
  font-size: max(calc(5.2 * var(--u)), 24px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px calc(1.2 * var(--u)) rgba(5, 25, 29, 0.9);
}
.win-logo {
  width: min(82vw, calc(60 * var(--u)));
  padding: calc(3.2 * var(--u)) calc(4.4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--paper);
  box-shadow: 0 0 0 calc(0.7 * var(--u)) var(--gold), 0 0 calc(7 * var(--u)) rgba(244, 198, 83, 0.6);
}
.win-logo img { display: block; width: 100%; height: auto; }
.replay {
  min-height: 44px;
  padding: calc(1.4 * var(--u)) calc(4 * var(--u));
  border: 0;
  border-radius: calc(1.4 * var(--u));
  background: var(--gold);
  color: var(--petrol-deep);
  font-size: max(calc(2.8 * var(--u)), 16px);
  font-weight: 800;
  box-shadow: 0 calc(0.6 * var(--u)) 0 var(--gold-deep);
}
.replay:hover { filter: brightness(1.08); }
.replay:active { transform: translateY(calc(0.4 * var(--u))); box-shadow: 0 calc(0.2 * var(--u)) 0 var(--gold-deep); }
@keyframes win-in {
  from { opacity: 0; transform: scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .bulb,
  body[data-state="idle"] .lever-ball,
  body[data-state="jackpot"] .reel,
  .reel.is-landed .reel-inner,
  .win-content { animation: none; }
  .reel.is-fast .reel-inner { filter: none; }
  .confetti { display: none; }
}