/* The cabinet.
   Built at a fixed design size (520 × 1240) and scaled into world space, so every
   proportion holds regardless of viewport. */

.cabinet {
  --scale: 0.5645; /* 700 world units tall */
  --lacquer: linear-gradient(172deg, #8e130c 0%, #5e0a06 34%, #3d0604 68%, #240302 100%);

  position: absolute;
  left: 50%; top: 50%;
  width: var(--cab-w);
  height: var(--cab-h);
  margin-left: calc(var(--cab-w) / -2);
  margin-top: calc(var(--cab-h) / -2);
  transform: scale(var(--scale));
  transform-style: preserve-3d;
  font-family: var(--font-sans);
}

/* Bloom the machine throws into the room. */
.cab__glow {
  position: absolute;
  left: 50%; top: 42%;
  width: 1500px; height: 1500px;
  translate: -50% -50%;
  background: radial-gradient(closest-side,
    rgba(255, 168, 60, 0.24) 0%, rgba(214, 44, 22, 0.15) 34%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(30px);
  pointer-events: none;
  animation: cab-breathe 5.5s ease-in-out infinite;
}
@keyframes cab-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
.cabinet--win .cab__glow { animation: cab-flash 0.9s ease-out; }
@keyframes cab-flash {
  0% { opacity: 1.6; filter: blur(24px); }
  100% { opacity: 0.85; filter: blur(30px); }
}

/* -- topper --------------------------------------------------------------- */
.cab__topper {
  position: absolute;
  left: 6px; right: 6px; top: 0;
  height: 116px;
  border-radius: 26px 26px 4px 4px;
  background:
    linear-gradient(180deg, #b81c12 0%, #7d130c 46%, #4a0806 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 160, 0.5),
    inset 0 -14px 26px rgba(30, 2, 1, 0.75),
    0 10px 34px rgba(0, 0, 0, 0.7);
  display: grid;
  place-items: center;
  padding-top: 14px;
  overflow: hidden;
}
.cab__topper::after {
  /* Specular sweep across the moulded plastic. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    transparent 32%, rgba(255, 230, 200, 0.16) 46%, transparent 58%);
}
.cab__candle {
  position: absolute;
  top: -34px; left: 50%;
  translate: -50% 0;
  width: 26px; height: 40px;
  display: grid;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  background: #14151b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.cab__candle i { display: block; }
.cab__candle i:first-child {
  background: #ffdf6b;
  box-shadow: 0 0 14px rgba(255, 214, 90, 0.85);
  animation: candle 1.9s steps(1) infinite;
}
.cab__candle i:last-child { background: #7c1a12; }
@keyframes candle { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.28; } }

.cab__topper-sign { width: 340px; }
.brand__mark { display: block; width: 100%; height: auto; }
.cab__topper-sub {
  position: absolute;
  bottom: 8px;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(255, 226, 180, 0.62);
}

/* -- screens -------------------------------------------------------------- */
.cab__screen {
  position: absolute;
  left: 18px; right: 18px;
  background: #08060a;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 3px #1b0b08,
    inset 0 0 0 6px #46110c,
    0 6px 20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.screen__glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0 24%, transparent 42%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%);
}
.screen__glass::after {
  /* Fine LCD grid, only just perceptible. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}

/* Vertical stack, in design px: topper 0–116, jackpot screen 122–392, period buttons
   400–444, game screen 452–862, button deck 872–986, belly glass 992–1186, base 1188.
   The game screen carries header, reels (260 fixed), meters, the session ledger and the
   status line, which needs 410 to sit without clipping. */
.cab__screen--top { top: 122px; height: 270px; }
.cab__screen--main { top: 452px; height: 410px; }

/* -- jackpot ladder ------------------------------------------------------- */
.ladder {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1.42fr 1fr 1fr 1fr;
  gap: 4px;
  height: calc(100% - 34px);
  padding: 10px 12px 0;
  background:
    radial-gradient(120% 100% at 50% -10%, #4c0a07 0%, #250403 60%, #120202 100%);
}

.ladder__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 190, 90, 0.08), rgba(0, 0, 0, 0.36));
  box-shadow: inset 0 0 0 1px rgba(255, 196, 100, 0.18);
}

.ladder__plate {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffeeb0 0%, #e8b53c 38%, #a8720f 72%, #f3d377 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(90, 52, 4, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
.ladder__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #4a2703;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7);
}

.ladder__value { min-width: 0; }
.ladder__amount {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffd45e;
  text-shadow: 0 0 12px rgba(255, 176, 40, 0.75), 0 0 32px rgba(255, 120, 20, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ladder__role {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 214, 170, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The Grand tier is the whole point of the page, so it gets the room. */
.ladder__row--grand { grid-template-columns: 96px 1fr; }
.ladder__row--grand .ladder__amount { font-size: 38px; color: #fff0b8; }
.ladder__row--grand .ladder__plate {
  background: linear-gradient(180deg, #fff8d8 0%, #ffd964 34%, #c98a12 70%, #ffe388 100%);
}
.ladder__row--grand .ladder__label { font-size: 14px; }
.ladder__row--major .ladder__amount { font-size: 21px; }
.ladder__row--minor .ladder__amount { font-size: 19px; color: #ffc94e; }
.ladder__row--mini .ladder__amount { font-size: 19px; color: #ffbe3d; }

.ladder__row--rolling { animation: ladder-roll 0.85s var(--ease); }
@keyframes ladder-roll {
  0% { box-shadow: inset 0 0 0 1px rgba(255, 240, 190, 0.9), 0 0 26px rgba(255, 190, 60, 0.55); }
  100% { box-shadow: inset 0 0 0 1px rgba(255, 196, 100, 0.18); }
}

/* Two lines, not two columns: the period line runs long when the projection is live and
   would collide with the source credit if they shared a row. */
.ladder__caption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 4px 14px 0;
  font-size: 7.5px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 226, 180, 0.68);
}
.ladder__caption-src { color: rgba(255, 220, 170, 0.42); }

/* -- period buttons on the cabinet ---------------------------------------- */
.cab__yearbar {
  position: absolute;
  left: 18px; right: 18px; top: 398px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2c34 0%, #171920 55%, #0d0e13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.7);
}
.yearbar__buttons { display: flex; gap: 5px; flex: 1; }

.yearbtn {
  flex: 1;
  min-height: 32px;
  padding: 6px 2px 7px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #3b3f4c 0%, #23262f 60%, #171a21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: translate 0.09s var(--ease), box-shadow 0.16s var(--ease);
}
.yearbtn__y {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-200);
}
.yearbtn:hover { translate: 0 -1px; }
.yearbtn:active { translate: 0 1px; }
.yearbtn--on {
  background: linear-gradient(180deg, #ffd964 0%, #e0a521 55%, #b07806 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 14px rgba(255, 186, 50, 0.5);
}
.yearbtn--on .yearbtn__y { color: #3a2103; }

/* -- game screen ---------------------------------------------------------- */
.game {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  height: 100%;
  padding: 13px 12px 9px;
  background:
    radial-gradient(120% 130% at 50% 0%, #3a0806 0%, #1c0303 55%, #0d0202 100%);
}

.game__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 2px;
}
.game__title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-300);
  text-shadow: 0 0 8px rgba(255, 190, 60, 0.5);
}
.game__rtp {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: rgba(255, 214, 170, 0.55);
}

.game__reels {
  position: relative;
  display: grid;
  place-items: center;
}

.reels {
  position: relative;
  display: flex;
  gap: 4px;
  border-radius: 4px;
  background: #05060a;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.95);
}
.reels__frame {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--reel-w) + 12px);
  height: calc(var(--reel-h) + 12px);
  translate: -50% -50%;
  border-radius: 6px;
  box-shadow:
    0 0 0 2px #7d130c,
    0 0 0 4px #f3d377,
    0 0 0 6px #5c0d08,
    0 0 22px rgba(255, 176, 40, 0.28);
  pointer-events: none;
}

.reel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #12060a 0%, #1c0709 50%, #12060a 100%);
}
.reel::before,
.reel::after {
  /* The drum curving away at the top and bottom of the window. */
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  z-index: 3;
  pointer-events: none;
}
.reel::before { top: 0; background: linear-gradient(180deg, rgba(3, 2, 4, 0.95), transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, rgba(3, 2, 4, 0.95), transparent); }

.reel__strip { will-change: transform, filter; }

.reel__tile {
  position: relative;
  display: grid;
  place-items: center;
  height: 84px;
  margin-bottom: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 236, 200, 0.05), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 200, 130, 0.07);
}
.reel__tile .sym {
  width: 72px; height: 72px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.reel__tile--win {
  animation: tile-win 0.45s var(--ease) 2 alternate;
  z-index: 2;
}
@keyframes tile-win {
  from { box-shadow: inset 0 0 0 1px rgba(255, 200, 130, 0.07); }
  to {
    box-shadow: inset 0 0 0 2px var(--gold-200), 0 0 20px rgba(255, 200, 90, 0.7);
    background: linear-gradient(180deg, rgba(255, 216, 120, 0.24), rgba(160, 40, 10, 0.3));
  }
}

.reel__tile--locked {
  z-index: 3;
  background: radial-gradient(70% 70% at 50% 40%, #3a1c02, #1a0c01);
  box-shadow: inset 0 0 0 2px var(--gold-300), 0 0 20px rgba(255, 190, 60, 0.6);
  animation: tile-lock 0.3s var(--ease);
}
.reel__tile--locked::after {
  content: attr(data-value);
  position: absolute;
  bottom: 4px; left: 50%;
  translate: -50% 0;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(10, 4, 0, 0.85);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-200);
  white-space: nowrap;
}
@keyframes tile-lock { from { scale: 1.3; } to { scale: 1; } }

/* -- Hold & Spin banner --------------------------------------------------- */
/* Sits above the reel window rather than across it — the held orbs are the thing worth
   looking at during the feature, so the banner must not cover them. */
.feature {
  position: absolute;
  left: 50%; top: -2px;
  translate: -50% 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px 5px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(150, 20, 10, 0.95), rgba(60, 6, 3, 0.95));
  box-shadow: 0 0 0 2px var(--gold-300), 0 0 34px rgba(255, 180, 40, 0.6);
  animation: feature-in 0.4s var(--ease);
  pointer-events: none;
}
.feature__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-100);
  text-shadow: 0 0 12px rgba(255, 190, 60, 0.9);
}
.feature__respins {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.feature__respins::after {
  content: ' respins';
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 220, 180, 0.75);
}
@keyframes feature-in { from { translate: 0 -12px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* -- meters --------------------------------------------------------------- */
.game__meters {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 5px;
}
.meter {
  display: grid;
  gap: 1px;
  padding: 4px 8px 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0a10, #050508);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 130, 0.13);
}
.meter__label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 214, 170, 0.5);
}
.meter__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #7dffb2;
  text-shadow: 0 0 10px rgba(80, 255, 160, 0.5);
}
.meter--win .meter__value { color: var(--gold-300); text-shadow: 0 0 10px rgba(255, 190, 60, 0.55); }
.meter--bet .meter__value { color: var(--ink-100); text-shadow: none; }

.game__status {
  display: grid;
  place-items: center;
  min-height: 26px;
  padding: 3px 8px;
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: rgba(255, 226, 190, 0.72);
  text-align: center;
}

/* -- button deck ---------------------------------------------------------- */
.cab__deck {
  position: absolute;
  left: 6px; right: 6px; top: 872px;
  height: 114px;
  padding: 9px 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #34373f 0%, #22252c 40%, #14161b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.8);
  transform: rotateX(22deg);
  transform-origin: top center;
}


.deck__row--main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
}
.deck__slot {
  display: grid;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1b1d23, #0e1014);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.deck__slot-label {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-300);
}
.deck__slot-mouth {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: #040406;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07);
}

.deck__spin {
  width: 78px; height: 78px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: linear-gradient(180deg, #43474f, #1c1f25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.deck__spin-inner {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 40% 26%, #ff8a70 0%, #d4241a 48%, #7d130c 100%);
  box-shadow:
    inset 0 2px 8px rgba(255, 210, 190, 0.5),
    inset 0 -6px 14px rgba(50, 3, 1, 0.8),
    0 0 26px rgba(212, 36, 26, 0.45);
  transition: scale 0.1s var(--ease);
}
.deck__spin:active .deck__spin-inner { scale: 0.94; }
.deck__spin-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff2ea;
  text-shadow: 0 1px 3px rgba(60, 4, 2, 0.9);
}
.cabinet--playing .deck__spin-inner { animation: spin-btn 2.4s ease-in-out infinite; }
@keyframes spin-btn {
  0%, 100% { box-shadow: inset 0 2px 8px rgba(255, 210, 190, 0.5), inset 0 -6px 14px rgba(50, 3, 1, 0.8), 0 0 26px rgba(212, 36, 26, 0.45); }
  50% { box-shadow: inset 0 2px 8px rgba(255, 210, 190, 0.5), inset 0 -6px 14px rgba(50, 3, 1, 0.8), 0 0 44px rgba(255, 80, 50, 0.7); }
}

/* -- belly glass ---------------------------------------------------------- */
.cab__belly {
  position: absolute;
  left: 14px; right: 14px; top: 992px;
  height: 196px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--lacquer);
  box-shadow:
    inset 0 0 0 3px #f3d377,
    inset 0 0 0 6px #5c0d08,
    0 6px 20px rgba(0, 0, 0, 0.75);
}
.belly__art { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.cab__belly::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0.12) 0 22%, transparent 40%,
    transparent 70%, rgba(255, 255, 255, 0.05) 88%);
  pointer-events: none;
}
.belly__plate {
  position: absolute;
  right: 14px; bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(8, 3, 2, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.3);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 220, 170, 0.7);
}
.belly__plate b {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--gold-300);
}

/* -- base ----------------------------------------------------------------- */
.cab__base {
  position: absolute;
  left: 10px; right: 10px; top: 1188px;
  height: 52px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #1d1f25 0%, #0f1014 60%, #07080a 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
}
.cab__vent {
  position: absolute;
  left: 50%; top: 10px;
  width: 220px; height: 20px;
  translate: -50% 0;
  background: repeating-linear-gradient(90deg, #040406 0 3px, transparent 3px 9px);
  opacity: 0.85;
}
.cab__foot {
  position: absolute;
  bottom: -6px;
  width: 44px; height: 8px;
  border-radius: 2px;
  background: #0a0a0c;
}
.cab__foot--l { left: 22px; }
.cab__foot--r { right: 22px; }

/* -- LED chase down the edges --------------------------------------------- */
.cab__led {
  position: absolute;
  top: 118px; bottom: 60px;
  width: 10px;
  display: grid;
  gap: 2px;
  border-radius: 5px;
  overflow: hidden;
  background: #14060a;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.16);
}
.cab__led--left { left: 2px; }
.cab__led--right { right: 2px; }
.cab__led i {
  display: block;
  border-radius: 2px;
  background: #ffb63c;
  opacity: 0.2;
  animation: led-chase 2.1s linear infinite;
  animation-delay: calc(var(--i) * -0.08s);
  box-shadow: 0 0 8px rgba(255, 170, 50, 0.9);
}
.cab__led--right i { animation-direction: reverse; }
@keyframes led-chase {
  0%, 78% { opacity: 0.16; }
  86% { opacity: 1; }
  100% { opacity: 0.16; }
}
.cabinet--feature .cab__led i { animation-duration: 0.55s; background: #fff0b0; }
.cabinet--empty .cab__led i { animation-duration: 5s; opacity: 0.1; }

/* -- states --------------------------------------------------------------- */
.cabinet--empty .game__status { color: #ff9d8c; }
.cabinet--feature .reels__frame {
  box-shadow:
    0 0 0 2px #7d130c,
    0 0 0 4px #fff0b0,
    0 0 0 6px #5c0d08,
    0 0 44px rgba(255, 200, 60, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .cab__glow, .cab__candle i, .cab__led i, .deck__spin-inner,
  .ladder__row--rolling, .feature {
    animation: none !important;
  }
}