:root {
  color-scheme: dark;
  --red: #f20d17;
  --gold: #ffd45a;
  --cyan: #2fe8ff;
  --purple: #8925c9;
  --black: #050505;
  --glass: rgba(3, 3, 8, 0.88);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(125, 41, 201, 0.44), transparent 30rem),
    linear-gradient(135deg, #0b0712 0%, #17101c 42%, #08080b 100%);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 0;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100dvh;
  padding: 10px;
}

.machine {
  position: relative;
  width: min(96vw, calc(96dvh * 768 / 1360), 768px);
  aspect-ratio: 768 / 1360;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  user-select: none;
}

.cabinet-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.free-bg {
  opacity: 0;
}

.machine.free .base-bg {
  opacity: 0;
}

.machine.free .free-bg {
  opacity: 1;
}

.jackpot-board {
  position: absolute;
  z-index: 3;
  left: 11.849%;
  top: 15.441%;
  width: 76.563%;
  height: 44.191%;
  background: url("assets/progressive/panel-progressive.png") center / 100% 100% no-repeat;
  opacity: 1;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.machine.free .jackpot-board {
  opacity: 0;
}

.jackpot-meter {
  position: absolute;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
}

.grand-meter {
  left: 6.293%;
  top: 0;
  width: 87.075%;
  height: 16.639%;
}

.hit9-meter,
.hit8-meter,
.hit7-meter,
.hit6-meter,
.hit5-meter {
  left: 44.218%;
  width: 51.361%;
  height: 9.983%;
  padding-right: 17px;
  justify-items: end;
}

.hit9-meter {
  top: 30.782%;
}

.hit8-meter {
  top: 44.759%;
}

.hit7-meter {
  top: 58.569%;
}

.hit6-meter {
  top: 72.379%;
}

.hit5-meter {
  top: 86.189%;
}

.jackpot-board span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jackpot-board strong {
  display: block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 41px;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  text-shadow:
    2px 2px 0 #210000,
    -1px -1px 0 rgba(255, 225, 180, 0.35),
    0 0 4px rgba(255, 56, 0, 0.62);
  white-space: nowrap;
  transform: scaleX(0.9);
  transform-origin: right center;
}

.hit9-meter strong,
.hit8-meter strong,
.hit7-meter strong {
  color: #ff7340;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow:
    2px 2px 0 #280000,
    -1px -1px 0 rgba(255, 205, 171, 0.5),
    0 0 4px rgba(255, 68, 20, 0.78);
}

.hit6-meter strong,
.hit5-meter strong {
  color: #fff176;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow:
    2px 2px 0 #151200,
    -1px -1px 0 rgba(255, 255, 218, 0.52),
    0 0 4px rgba(255, 241, 89, 0.72);
}

.grand-meter span {
  display: none;
}

.grand-meter strong {
  color: #f6ffff;
  width: 100%;
  font-size: 58px;
  text-align: center;
  transform: scaleX(0.92);
  transform-origin: center;
  text-shadow:
    0 3px 0 #000,
    -2px -2px 0 rgba(220, 255, 255, 0.68),
    2px 2px 0 rgba(53, 75, 94, 0.85),
    0 0 16px rgba(170, 233, 255, 0.76);
  -webkit-text-fill-color: currentColor;
}

.free-readout {
  position: absolute;
  z-index: 5;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.machine.free .free-readout {
  display: block;
}

.free-readout strong {
  position: absolute;
  display: grid;
  place-items: center;
  color: #fbfbff;
  font-family: "Arial Black", Impact, sans-serif;
  line-height: 1;
  text-shadow:
    0 2px 0 #000,
    0 0 12px rgba(170, 44, 255, 0.9);
  transform: translateY(-8%);
}

#freeRemain {
  left: 36.4%;
  top: 45.9%;
  width: 19.5%;
  height: 3.9%;
  font-size: 34px;
}

#freeMult {
  left: 61.1%;
  top: 45.9%;
  width: 12.5%;
  height: 3.9%;
  font-size: 27px;
}

#bonusWin {
  left: 36.3%;
  top: 52.5%;
  width: 41.8%;
  height: 3.8%;
  font-size: 31px;
}

.reel-window {
  position: absolute;
  z-index: 10;
  left: 6.901%;
  top: 67.279%;
  width: 86.459%;
  height: 25.588%;
  overflow: hidden;
  background: #fff;
}

.reels {
  display: flex;
  gap: 0.904%;
  width: 100%;
  height: 100%;
}

.reel {
  position: relative;
  width: 19.277%;
  height: 100%;
  overflow: hidden;
  background: #f9f9f9;
}

.reel-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--track-height, 100%);
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  z-index: 1;
}

.cell {
  position: relative;
  flex: 0 0 var(--cell-height, 33.333333%);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f9f9f9;
}

.cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.cell .symbol-anim {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    drop-shadow(0 0 7px rgba(255, 241, 108, 0.85))
    drop-shadow(0 0 14px rgba(247, 18, 28, 0.45));
}

.reel-spin-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.reel-spin-canvas.active {
  opacity: 1;
}

.cell.win::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 4px solid rgba(255, 226, 77, 0.95);
  box-shadow:
    inset 0 0 18px rgba(255, 30, 30, 0.75),
    0 0 18px rgba(255, 226, 77, 0.9);
  pointer-events: none;
  animation: winPulse 620ms ease-in-out infinite alternate;
}

@keyframes winPulse {
  from { opacity: 0.58; }
  to { opacity: 1; }
}

.line-overlay {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
}

.line-overlay img {
  position: absolute;
  display: block;
  opacity: 0;
  filter: drop-shadow(0 0 5px #fffb8a);
  animation: lineFlash 900ms ease-in-out infinite;
}

.feature-animation {
  position: absolute;
  inset: 0;
  z-index: 23;
  display: none;
  pointer-events: none;
}

.feature-animation.active {
  display: block;
}

.feature-animation img {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 18px rgba(255, 242, 118, 0.55));
}

.feature-animation.full img {
  left: 6%;
  top: 12%;
  width: 88%;
  height: 66.3%;
}

.feature-animation.quick-hit img {
  left: 2.7%;
  top: 57.1%;
  width: 94.6%;
  height: 16.7%;
}

.feature-animation.quick-hit-small img {
  left: 13.2%;
  top: 59.2%;
  width: 73.6%;
  height: 7%;
}

.feature-animation.free-add img {
  left: 43.5%;
  top: 47.2%;
  width: 13%;
  height: 6.4%;
}

@keyframes lineFlash {
  0%, 100% { opacity: 0.15; }
  40%, 70% { opacity: 1; }
}

.win-ribbon {
  position: absolute;
  z-index: 20;
  left: 12%;
  top: 58.9%;
  width: 76%;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 4px 18px;
  color: #fffbe8;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 #000,
    0 0 12px rgba(255, 36, 36, 0.9);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75), transparent);
  opacity: 0.92;
  pointer-events: none;
}

.win-ribbon.big-win {
  color: #fff170;
  animation: ribbonPop 520ms ease-in-out 5 alternate;
}

@keyframes ribbonPop {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.panel-controls {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.panel-btn,
.icon-btn {
  position: absolute;
  border: 0;
  color: #fff;
  text-shadow: 0 2px 0 #000;
  cursor: pointer;
  pointer-events: auto;
}

.panel-btn {
  border: 2px solid var(--red);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 54, 54, 0.24), rgba(0, 0, 0, 0.28)),
    #050505;
  box-shadow:
    inset 0 0 0 1px #550006,
    0 0 10px rgba(245, 13, 23, 0.44);
  font-size: 16px;
  line-height: 1;
}

.panel-btn:active {
  transform: translateY(1px);
  filter: brightness(1.25);
}

.lines-btn {
  left: 1.2%;
  top: 95.15%;
  width: 15.2%;
  height: 2.35%;
}

.bet-btn {
  left: 17.2%;
  top: 95.15%;
  width: 12.9%;
  height: 2.35%;
}

.max-btn {
  left: 59.7%;
  top: 95.15%;
  width: 15.2%;
  height: 2.35%;
}

.spin-btn {
  left: 76.1%;
  top: 94.85%;
  width: 21.8%;
  height: 2.75%;
  color: #fff9c7;
  font-size: 20px;
  background:
    linear-gradient(180deg, #ff3846, #7a0008 48%, #070707 52%, #230003),
    #0a0002;
}

.spin-btn[disabled] {
  cursor: wait;
  filter: grayscale(0.35) brightness(0.8);
}

.icon-btn {
  top: 95.15%;
  width: 7.8%;
  height: 2.35%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.pays-btn {
  left: 31.1%;
  background-image: url("assets/ui/pays-button-base.png");
  filter: none;
  box-shadow: none;
}

.pays-btn:hover,
.pays-btn:focus-visible {
  filter: brightness(1.12);
}

.machine.free .pays-btn {
  background-image: url("assets/ui/pays-button-free.png");
}

.volume-btn {
  left: 39.1%;
  background-image: url("assets/ui/volume-button-base.png");
}

.volume-btn.muted {
  filter: grayscale(1) brightness(0.72);
}

.status-line {
  position: absolute;
  left: 2%;
  top: 98.0%;
  width: 96%;
  height: 1.36%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #fff8d6;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 14px;
  text-shadow: 0 1px 0 #000;
  pointer-events: none;
  white-space: nowrap;
}

.status-line strong {
  color: var(--cyan);
}

.pay-dialog {
  width: min(92%, 660px);
  max-height: 78%;
  padding: 0;
  border: 2px solid #f40d18;
  border-radius: 8px;
  background: rgba(2, 2, 7, 0.94);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.72),
    0 0 40px rgba(242, 13, 23, 0.4);
}

.pay-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

.dialog-chrome {
  max-height: 78dvh;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(113, 28, 151, 0.42), transparent 180px),
    var(--glass);
}

.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab,
.close-btn,
.line-picker button {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  color: #fff;
  background: #09090c;
  cursor: pointer;
  text-shadow: 0 1px 0 #000;
}

.tab {
  min-width: 78px;
  padding: 8px 12px;
  font-size: 15px;
}

.tab.active,
.line-picker button.active {
  border-color: #fff18d;
  color: #fff4a8;
  box-shadow: inset 0 0 18px rgba(242, 13, 23, 0.45);
}

.close-btn {
  width: 34px;
  height: 34px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.tab-panel {
  display: none;
  max-height: calc(78dvh - 56px);
  overflow: auto;
  padding: 14px;
}

.tab-panel.active {
  display: block;
}

.pay-grid {
  display: grid;
  gap: 8px;
}

.pay-row {
  display: grid;
  grid-template-columns: 84px 1fr repeat(3, 74px);
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.35));
}

.pay-row img {
  width: 70px;
  height: 62px;
  object-fit: cover;
}

.pay-name {
  color: #fffce8;
  font-size: 17px;
  text-transform: uppercase;
}

.pay-cell {
  color: var(--cyan);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 17px;
  text-align: right;
  white-space: nowrap;
}

.lines-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
}

.line-stage {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: #fff;
}

.line-stage-grid {
  position: absolute;
  left: 5%;
  top: 11%;
  width: 90%;
  height: 78%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}

.line-stage-grid span {
  border: 1px solid rgba(0, 0, 0, 0.32);
  background:
    radial-gradient(circle, rgba(169, 169, 169, 0.35) 0 22%, transparent 23%),
    linear-gradient(90deg, transparent 48%, rgba(190, 190, 190, 0.55) 48% 52%, transparent 52%),
    #f7f7f7;
}

.line-preview-art {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #ffe96c);
}

.line-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.line-picker button {
  min-height: 31px;
  font-size: 14px;
}

.bonus-panel {
  display: grid;
  gap: 10px;
  color: #fffce8;
  font-family: Arial, sans-serif;
  line-height: 1.38;
}

.bonus-panel img {
  width: min(100%, 601px);
  margin: 0 auto 6px;
}

.bonus-panel h2 {
  margin: 0;
  color: #fff4a4;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 36px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}

.bonus-panel p {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 560px) {
  .app-shell {
    padding: 0;
  }

  .machine {
    width: min(100vw, calc(100dvh * 768 / 1360));
  }

  .jackpot-meter {
    padding: 0;
  }

  .hit9-meter,
  .hit8-meter,
  .hit7-meter,
  .hit6-meter,
  .hit5-meter {
    padding-right: 10px;
  }

  .jackpot-board strong {
    font-size: 27px;
  }

  .grand-meter strong {
    font-size: 36px;
  }

  .win-ribbon {
    min-height: 34px;
    font-size: 18px;
  }

  .panel-btn {
    font-size: 12px;
  }

  .spin-btn {
    font-size: 15px;
  }

  .status-line {
    gap: 7px;
    font-size: 10px;
  }

  .pay-dialog {
    width: 96%;
  }

  .pay-row {
    grid-template-columns: 64px 1fr repeat(3, 58px);
  }

  .pay-row img {
    width: 58px;
    height: 52px;
  }

  .pay-name,
  .pay-cell {
    font-size: 13px;
  }

  .lines-layout {
    grid-template-columns: 1fr;
  }

  .line-picker {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}