:root {
  --border-radius: 8px;
  --image-height: 200px;
  --image-width: 200px;
  --outline: #6c5987;
  --winning: #ff0;
}

/* Reset and base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* override global */
.DOH--quakepark-chrome {
  margin: 0 auto;
  width: 1142px;

  a {
    color: #fff;
    text-decoration: none;

    &:hover {
      color: var(--outline);
    }
  }
}

body {
  background: var(--outline);
  background-color: #000;
  color: white;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  height: 100vh;
}

/* Displayed images & rotation offsets */
.displayed-images {
  color: #ccc;
  font-size: 18px;
  margin: 20px 0 10px 0;
}

footer {
  margin: 12px 0;
  text-align: center;
}

.hidden {
  display: none;
}

.jackpot {
  color: #f1c40f;
  font-size: 32px;
  text-shadow: 0 0 10px #f39c12;
}

/* Header */
.header {
  align-items: end;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  height: 128px;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* Main content wrapper */
.main-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.machine {
  align-items: center;
  background-image: url('background.png');
  display: flex;
  flex-direction: column;
  height: 775px;
  justify-content: center;
  position: relative;
  width: 1142px;
}

/* Footer */
.official-link {
  margin-top: 20px;
}

/* Official link (secondary, less prominent) */
.official-link a {
  background: transparent;
  border: 1px solid #ee1c25;
  border-radius: var(--border-radius);
  color: #ee1c25;
  display: inline-block;
  font-size: 1rem;
  font-weight: normal;
  opacity: 0.8;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.official-link a:active {
  opacity: 1;
}

.official-link a:hover {
  background: rgba(238, 28, 37, 0.1);
  color: #ff4040;
}

/* Rotation counters */
.rotation-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 5px;
}

.rotations {
  color: #aaa;
  font-size: 14px;
  margin-top: 5px;
  width: var(--image-width);
}

/* Slot machine */
.slot-machine {
  background-image: url(machine.png);
  height: 448px;
  width: 1125px;
}

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  position: relative;
  top: 48px;
}

.reel {
  background: linear-gradient(
    to bottom,
    rgba(180, 180, 180, 0.5) 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    rgba(180, 180, 180, 0.5) 100%
  );
  border-radius: var(--border-radius);
  height: var(--image-height);
  outline: 4px solid var(--outline);
  overflow: hidden;
  position: relative;
  width: var(--image-width);
}

.reel-inner {
  display: flex;
  flex-direction: column;
  transition: transform 1s ease-out;
}

.reel-inner img {
  display: block;
  height: var(--image-height);
  width: var(--image-width);
}

/* Status messages */
.status {
  align-items: center;
  background-color: rgb(78 55 78 / 25%);
  backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  display: flex;
  font-size: 24px;
  font-weight: bold;
  height: 52px;
  justify-content: center;
  margin: 12px 0 18px;
  min-height: 40px;
  min-width: 504px;
  outline: 4px solid var(--outline);
  padding: 4px;
  width: 940px;
}

.console {
  display: flex;
  gap: 48px;
  justify-content: center;
  position: absolute;
  top: 590px;
  transform: perspective(590px) rotateX(28deg);
  transform-origin: bottom center;
  width: 88%;

  .player-stats,
  .alltime-stats {
    position: relative;
    top: -46px;

    span {
      float: right;
      min-width: fit-content;
      text-align: right;
      width: 100px;
    }
  }
}

/* Spin button (primary action stays bold) */
.spin-button {
  background: #a3220b;
  border-radius: 12px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 900;
  padding: 0;
  outline: 8px solid #9e9e9e;
}

.text {
  background: #ba331b;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  color: white;
  display: block;
  padding: 32px 42px;
  transform: translateY(-14px);
}

.spin-button:active .text {
  transform: translateY(-2px);
}

.winner {
  color: var(--winning);
  font-size: 28px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-content {
    margin-bottom: 50px;
    margin-top: 200px;
    min-height: calc(100vh - 250px);
  }

  .reel {
    height: 216px;
    perspective: 1500px;
    width: 140px;
  }

  .reel img {
    border-radius: var(--border-radius);
    height: 216px;
    object-fit: cover;
    width: 140px;
  }

  .rotations {
    width: 140px;
  }

  .spin-button {
    font-size: 16px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .displayed-images {
    font-size: 16px;
  }

  .header {
    font-size: 2.5rem;
    height: 180px;
    padding-left: 10px;
  }

  .main-content {
    margin-bottom: 50px;
    margin-top: 180px;
    min-height: calc(100vh - 230px);
  }

  .reel {
    height: var(--image-width);
    perspective: 1000px;
    width: 100px;
  }

  .reel img {
    height: var(--image-width);
    object-fit: cover;
    width: 100px;
  }

  .rotations {
    font-size: 12px;
    width: 100px;
  }

  .spin-button {
    font-size: 14px;
    padding: 8px 16px;
  }
}