:root {
  --canvas-width: 500px;
  --canvas-height: 900px;
  --gold: #ffae15;
  --pale-gold: #ffe997;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #04080d;
}

body {
  overflow: hidden;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
}

button,
a {
  font: inherit;
}

.site-canvas {
  position: relative;
  width: min(100vw, var(--canvas-width));
  height: min(100svh, var(--canvas-height));
  min-height: min(100vh, var(--canvas-height));
  margin-inline: auto;
  overflow: hidden;
  background-color: #5e0f0b;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

.header {
  margin-top: 30px;
  text-align: center;
}

.heading {
  margin: 0 0 10px;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.jackpot-box {
  width: min(350px, calc(100% - 40px));
  margin: 17px auto 0;
  padding: 7px 10px;
  border: 1px solid #ccc;
  color: #fff;
  text-align: center;
}

.jackpot-label,
.jackpot-value {
  display: block;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.header-spacer {
  height: 0;
  margin-top: 20px;
}

.slot-wrapper {
  position: relative;
  width: 496px;
  max-width: calc(100% - 16px);
  height: 500px;
  margin-inline: auto;
}

.slot-machine {
  position: relative;
  width: 100%;
  height: 0;
}

.reel {
  position: absolute;
  width: 123px;
  height: 501px;
  overflow: hidden;
}

.reel-one {
  left: 0;
}

.reel-two {
  left: 50%;
  transform: translateX(-50%);
}

.reel-three {
  right: 0;
}

.reel-strip {
  width: 100%;
  height: 14400px;
  margin-top: -57.5px;
  background-image: url("assets/reel-mahjong.svg");
  background-repeat: repeat-y;
  background-size: 123px 861px;
  transition-property: margin-top;
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.12, 0.68, 0.18, 1);
  will-change: margin-top;
}

.reel-two .reel-strip {
  margin-top: -303.5px;
  transition-duration: 4s;
}

.reel-three .reel-strip {
  margin-top: -180.5px;
  transition-duration: 5s;
}

.reel-one.is-spinning .reel-strip {
  margin-top: -12603.5px;
}

.reel-two.is-spinning .reel-strip {
  margin-top: -12603.5px;
}

.reel-three.is-spinning .reel-strip {
  margin-top: -12603.5px;
}

.win-line {
  position: absolute;
  top: 250px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 7px;
  background: #f20e1e;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.72);
  animation: blink-line 600ms linear infinite;
}

.spin-action {
  position: relative;
  text-align: center;
}

.spin-button {
  width: min(300px, calc(100% - 32px));
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255, 184, 47, 0.55);
  border-radius: 6px;
  background: var(--pale-gold);
  color: #000;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms;
}

.spin-button:hover {
  transform: scale(1.05);
}

.spin-button.active {
  animation: button-glow 1500ms infinite;
}

.music-toggle {
  position: absolute;
  top: 7px;
  left: calc(50% + 158px);
  z-index: 10;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 233, 151, 0.85);
  border-radius: 50%;
  background: rgba(4, 8, 13, 0.84);
  box-shadow: 0 0 14px rgba(255, 174, 21, 0.38);
  color: var(--pale-gold);
  font-family: Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.music-toggle[aria-pressed="true"] {
  background: var(--pale-gold);
  color: #000;
}

.music-toggle:hover {
  box-shadow: 0 0 22px rgba(255, 174, 21, 0.72);
}

.spin-button:focus-visible,
.music-toggle:focus-visible,
.cta-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.reward-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.7);
}

.reward-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 21;
  width: min(500px, calc(100% - 56px));
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  background: #000;
  color: #fff;
  transform: translate(-50%, -50%);
  animation: modal-enter 1s ease both, modal-glow 1500ms 1s infinite;
}

.modal-title {
  margin: 0;
  padding: 10px 20px;
  background: var(--gold);
  color: #000;
  font-size: 28px;
  line-height: 38px;
  text-align: center;
}

.modal-content {
  padding: 30px 25px 26px;
  font-size: 16px;
  line-height: 26px;
  text-align: left;
}

.modal-content p {
  margin: 0 0 26px;
}

.success-line {
  font-weight: 700;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 28px 0 18px;
  text-align: center;
}

.time-part {
  display: grid;
  min-width: 46px;
  justify-items: center;
}

.time-part span {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.time-part small {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.cta-button {
  display: block;
  width: min(300px, 100%);
  height: 52px;
  margin: 20px auto 0;
  border: 1px solid rgba(255, 184, 47, 0.8);
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  animation: cta-pump 1800ms infinite;
}

.cta-button:hover {
  box-shadow: 0 0 30px rgba(255, 184, 47, 0.55);
}

.cta-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  animation: none;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes button-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 184, 47, 0.55); }
  50% { box-shadow: 0 0 50px 10px rgba(255, 184, 47, 0.55); }
}

@keyframes blink-line {
  50% { opacity: 0; }
}

@keyframes modal-enter {
  from { transform: translate(-50%, -65%); }
  to { transform: translate(-50%, -50%); }
}

@keyframes modal-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 184, 47, 0.55); }
  50% { box-shadow: 0 0 80px 8px rgba(255, 184, 47, 0.5); }
}

@keyframes cta-pump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (max-width: 650px) {
  .heading {
    font-size: 20px;
  }

  .jackpot-label,
  .jackpot-value {
    font-size: 24px;
  }
}

@media (max-width: 530px) {
  .slot-wrapper {
    margin-top: -68px;
    margin-bottom: 38px;
  }

  .reel {
    transform: scale(0.6);
  }

  .reel-two {
    transform: translateX(-50%) scale(0.6);
  }

  .music-toggle {
    top: -44px;
    right: max(8px, calc((100% - 300px) / 2));
    left: auto;
  }
}

@media (max-width: 340px) {
  .cta-button {
    font-size: 11px;
  }
}

@media (max-width: 530px) and (max-height: 700px) {
  .slot-wrapper {
    height: min(500px, calc(100svh - 195px));
  }
}

@media (max-height: 620px) {
  .reward-modal {
    max-height: calc(100svh - 16px);
  }

  .modal-content {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .modal-content p {
    margin-bottom: 18px;
  }

  .countdown {
    margin-top: 18px;
  }
}