* { box-sizing: border-box; margin: 0; padding: 0; }
html,body{
  overflow: hidden;
}
body {
  font-family: sans-serif;
  background-image: url(../images/bg.webp);
  background-size: cover;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2vh;
}

[id^="cursor-el"] {
  display: none !important;
  pointer-events: none !important;
}

#intro-video-screen {
  position: fixed;
  inset: 0;
  z-index: 4000000;
  background-color: transparent;
  background-image: url(../images/intro-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vh;
}

#intro-video-screen.intro-done {
  display: none;
  pointer-events: none;
}

#intro-video-screen .intro-welcome-panel {
  width: 42vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  gap: 2vh;
  padding: 7vh 2vh;
  font-family: 'Montserrat', sans-serif;
  background-image: url(../images/intro-welcome-panel.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 892 / 613;
  text-align: center;
}

#intro-video-screen .intro-welcome-title {
  color: #fff;
  text-transform: uppercase;
  font-size: 2.8vh;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0px .4vh 0px  #BF1818;

}
#intro-video-screen .h3 {

  text-transform: uppercase;
  font-size: 2.8vh;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;


}

#intro-video-screen .intro-welcome-text {
  position: relative;
  font-size: 6vh;
  margin: 0;
  font-weight: 900;

  background: linear-gradient(
    180deg,
    #FFFD34 0%,
    #FFE215 50%,
    #FEB311 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h3 {
  background: linear-gradient(
    180deg,
    #FFFD34 0%,
    #FFE215 50%,
    #FEB311 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h3::after {
  content: attr(data-text);

  position: absolute;
  left: 0;
  top: 6px;

  z-index: -1;

  color: #DD4007;
}
#intro-video-screen .intro-welcome-text::after {
  content: attr(data-text);

  position: absolute;
  left: 0;
  top: 6px;
  z-index: -1;

  color: #DD4007;
}

#intro-video-screen .intro-start-btn {
  padding: 0 5vh;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 578 / 256;
  background-image: url(../images/intro-start-btn.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  animation: 3s pulseS ease-in-out infinite;
  margin-top: 3vh;
}

#intro-video-screen .intro-start-label {
  display: inline-block;
  position: relative;
font-family: 'Inter';
  font-size: 5vh;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  -webkit-text-stroke: none;

  background: linear-gradient(
    263.21deg,
    #FB8600 0%,
    #FEE32F 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
}



#intro-video-screen .intro-start-btn:active {
  transform: scale(0.97);
}


#bonus-dialog-screen {
  position: fixed;
  inset: 0;
  z-index: 4500000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
}

#bonus-dialog-screen.bonus-dialog-visible {
  opacity: 1;
}

#bonus-dialog-screen .bonus-dialog-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#slot-root.slot-hidden {
  display: none !important;
}

#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: none;
  transition: background 0.7s ease;
}

#dark-overlay.active {
  background: rgba(0,0,0,0.75);
  pointer-events: all;
}

#bg-overlay {
  position: fixed;
  inset: 0;
  background-image: url(../images/bg-body.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  z-index: 1;
}

body.bonus-active {
  background-image: url(../images/bg-body.webp);
  background-size: cover;
  background-position: center;
  transition: background-image 0.8s ease;
}

#slot-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  width: 100%;
  max-width: 60vh;
  min-width: 60vh;
  position: relative;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.7s ease;
}

#slot-root.bonus-intro-slot-hidden {
  opacity: 0;
  pointer-events: none;
}

#info-bar {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  width: 130%;
}

#info-bar > .stat-card-balance {
  width: 26vh;
  height: 6vh;
  align-self: center;
  position: relative;
  z-index: 6;
  background-image: url(../images/win-bg.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.62s cubic-bezier(0.34, 1.06, 0.64, 1);
}

#info-bar > .stat-card-balance.balance-win-lift {
  transform: translateY(-12vh) scale(1.068);
  z-index: 400;
}

#info-bar > .stat-card-balance.balance-win-lift.balance-payout-crediting {
  transform: translateY(-14vh) scale(1.098);
}

@keyframes balance-payout-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes balance-payout-burgundy-glow {
  0% {
    box-shadow:
      0 0 0 0 rgba(90, 15, 40, 0),
      0 0 0 0 rgba(110, 25, 50, 0);
  }
  45% {
    box-shadow:
      0 0 0.8vh 0.35vh rgba(120, 28, 55, 0.95),
      0 0 2vh 1vh rgba(75, 12, 35, 0.65),
      0 0.4vh 1.2vh rgba(50, 8, 25, 0.45);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(90, 15, 40, 0),
      0 0 0 0 rgba(110, 25, 50, 0);
  }
}

#info-bar > .stat-card-balance.balance-payout-tick {
  animation: balance-payout-burgundy-glow 0.78s ease-out;
}

#info-bar > .stat-card-balance.balance-payout-tick #balance {
  display: inline-block;
  animation: balance-payout-pulse 0.68s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes balance-credited-block-pulse {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.09);
  }
  44% {
    transform: scale(1);
  }
  68% {
    transform: scale(1.055);
  }
  100% {
    transform: scale(1);
  }
}

#info-bar > .stat-card-balance.balance-credited-pulse {
  animation: balance-credited-block-pulse 1.05s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

@keyframes last-spin-global-pulse-scale {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}

#slot-root #info-bar .stat-card.last-spin-pulse-active {
  animation: last-spin-global-pulse-scale 0.75s cubic-bezier(0.34, 1.45, 0.64, 1);
}

#slot-root #grid .cell.last-spin-pulse-active {
  animation: last-spin-global-pulse-scale 0.75s cubic-bezier(0.34, 1.45, 0.64, 1);
}

#slot-root .jp-panel-video.last-spin-pulse-active,
#slot-root .jp-panel-label.last-spin-pulse-active {
  animation: last-spin-global-pulse-scale 0.75s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.stat-card-balance .stat-value,
#balance {
  font-size: 3vh;
  font-weight: 700;
  background: linear-gradient(180deg, #F9D061 35.1%, #FCFAEE 50.96%, #F9D061 64.42%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.info-bar-row {
  display: flex;
  gap: 1vh;
  width: 100%;
}

.info-bar-row .stat-card {
  flex: 1;
}

.stat-card {
  border-radius: 1vh;
  padding: 0.8vh 1.2vh;
  text-align: center;
}

.stat-label {
  font-size: 2vh;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  font-size: 2.2vh;
  font-weight: 700;
  color: #fff;
}

.stat-card-bet .bet-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55vh;
  min-height: 2.6vh;
}

.stat-card-bet .bet-value {
  min-width: 5.5vh;
  text-align: center;
  font-size: 2.1vh;
  line-height: 1.1;
}

.bet-arrow {
  flex-shrink: 0;
  min-width: 2.2vh;
  height: 2.2vh;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2.2vh;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.bet-arrow:hover:not(:disabled) {
  opacity: 0.85;
}

.bet-arrow:active:not(:disabled) {
  transform: scale(0.9);
}

.bet-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

#grid-wrapper {
  position: relative;
  width: 100%;
}

.slot-fire-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 112;
  border-radius: 1.4vh;
  overflow: hidden;
}

.slot-fire-overlay-hidden {
  opacity: 0;
  visibility: hidden;
}

.slot-fire-overlay .fire-payout-geom {
  overflow: hidden;
  border-radius: inherit;
}

.fire-video-full-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.fire-video-full-inner.is-center-row {
  transform: scale(0.82);
}

.fire-video-full-inner.is-center-row.is-center-cell {
  transform: scale(0.82) translateX(calc((100% - 4vh) / 3));
}

.fire-video-full-inner.is-bottom-row {
  transform: scale(0.82);
}

.fire-video-full-inner.fire-video-wrap-mirror .slot-fire-full-video {
  transform: scaleX(-1);
}

.slot-fire-full-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.fire-video-full-inner.fire-clip-bottom .slot-fire-full-video {
  object-position: center top;
}


#slot-fire-style-preview-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 111;
}

.slot-fire-style-preview {
  pointer-events: none;
  border-radius: 1.4vh;
  overflow: hidden;
}

.fire-style-preview-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.right-panal{
    position: absolute;
    width: 6vh;
    height: 100%;
    right: -12vh;
    img{
        height: 100%;
    }
}
.right-panal .button-phone {
  display: none;
}
.right-panal .button {
  display: block;
}
.left-panel{
        position: absolute;
    width: 18vh;
    height: 100%;
    left: -20vh;
    display: flex;
    padding: 10vh 0;
    align-items: end;
    z-index: -1;
    img,
    video{
        width: 100%;
    }
}
@font-face {
  font-family: 'Inter';
  src: url(../fonts/inter.woff2);
}
.bonus-btn{
  width: 18vh;
    font-family: 'Inter';
  aspect-ratio: 387/142;
  background-image: url(../images/bonus-btn.webp);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vh;
  color: #fec72f;
  text-shadow:.1vh .4vh 0vh  #00000096;

  position: absolute;
  left: 50%;
  top: 50%;
    transform: translate(-62%, -1%);


-webkit-text-stroke: .1vh #000000;


}
.volcano {
  position: absolute;
  top: -22vh;
  left: 35%;
  transform: translate(-50%);
  width: 72vh !important;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
}
.jp-panels-row {
  position: absolute;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 28vh;
  pointer-events: none;
  z-index: 50;
}

.jp-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
}
.jp-panel:nth-child(1) {
  transform: translateX(calc(-50% - 21.5vh));
  z-index: 1;
}
.jp-panel:nth-child(2) {
  transform: translateX(calc(-50% - 5.1vh));
  z-index: 2;
}
.jp-panel:nth-child(3) {
  transform: translateX(calc(-50% + 9.8vh));
  z-index: 3;
}
.jp-panel:nth-child(4) {
  transform: translateX(calc(-50% + 23.2vh));
  z-index: 4;
}
.jp-panel-video {
  display: block;
  max-height: 25.7vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.jp-panel-label.jp-panel-label-sprite {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.26vh;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: drop-shadow(0 0.06vh 0.18vh rgba(0, 0, 0, 0.6));
}

.jp-panel-label-sprite .jp-panel-sprite-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.065vh;
}

.jp-panel-label-sprite .coin-digit {
  --coin-digit-slice: 0.9;
  height: 3.185vh;
  width: calc(3.185vh * 512 / 11 / 64 * var(--coin-digit-slice));
  flex-shrink: 0;
  overflow: hidden;
  background-image: url(../images/coin-digit.webp);
  background-repeat: no-repeat;
  background-size: 1100% 100%;
  image-rendering: crisp-edges;
}

.jp-panel-label-sprite .jp-sprite-comma {
  font-size: 2.6vh;
  font-weight: 700;
  line-height: 1;
  align-self: flex-end;
  margin: 0 0.026vh 0.195vh;
  padding: 0 0.052vh;
  background: linear-gradient(180deg, #F9D061 35.1%, #FCFAEE 50.96%, #F9D061 64.42%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.jp-panel-label {
  position: absolute;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.jp-panel:nth-child(1) .jp-panel-label {
  left: 50%;
top: 57%;
  transform: translateX(-50%);
}
.jp-panel:nth-child(2) .jp-panel-label {
  left: 50%;
    top: 58%;
  transform: translateX(-50%);
}
.jp-panel:nth-child(3) .jp-panel-label {
  left: 50%;
 top: 57%;
  transform: translateX(-50%);
}
.jp-panel:nth-child(4) .jp-panel-label {
  left: 50%;
top: 57%;
  transform: translateX(-50%);
}
.grid-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-image: url(../images/bg-slot.webp);
  background-size: 100% 100%;
  gap: 1vh;
  border-radius: 1.4vh;
  padding: 1vh;
}

.cell.cell-win-row-fire .sym-inner::after {
  content: '';
  position: absolute;
  left: -3%;
  right: 9%;
  top: 55%;
  transform: translateY(-50%);
  height: max(0.85vh, 4px);
  border-radius: 0.4vh;
  pointer-events: none;
  width: 110%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 100, 0, 0.85) 12%,
    #ff6a00 28%,
    #fff4a0 50%,
    #ff6a00 72%,
    rgba(255, 100, 0, 0.85) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 0.55vh #ffb020,
    0 0 1.1vh rgba(255, 130, 30, 0.9),
    0 0 1.85vh rgba(255, 70, 0, 0.5);
  animation: cell-win-row-fire-pulse 1.55s ease-in-out infinite;
}

.cell.cell-win-row-fire .coin-img-wrap {
  position: relative;
  z-index: 4;
}

.cell.cell-win-row-fire .sym-inner-land-video .cell-land-video {
  z-index: 1;
}

.cell.cell-win-row-fire .sym-inner.sym-inner-land-video::after {
  z-index: 2;
}

@keyframes cell-win-row-fire-pulse {
  0%,
  100% {
    opacity: 0.88;
    filter: brightness(0.95) saturate(1.08);
    box-shadow:
      0 0 0.48vh #ff8800,
      0 0 0.95vh rgba(255, 120, 0, 0.55),
      0 0 1.5vh rgba(255, 60, 0, 0.3);
    transform: translateY(-50%) scaleX(0.96);
  }
  50% {
    opacity: 1;
    filter: brightness(1.15) saturate(1.2);
    box-shadow:
      0 0 0.8vh #ffe08a,
      0 0 1.45vh rgba(255, 170, 50, 0.9),
      0 0 2.1vh rgba(255, 90, 0, 0.5);
    transform: translateY(-50%) scaleX(1);
  }
}
.border-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: url(../images/middle-border.webp);
  background-size: 100% 100%;
  width: 103%;
  height: 34%;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.8s ease;
}

.border-middle.hidden-bonus {
  opacity: 0;
  pointer-events: none;
}

#grid .cell:nth-child(4),
#grid .cell:nth-child(5),
#grid .cell:nth-child(6),
.cell.cell-center-frame {
  border: 0.15vh solid #f0a020;
  box-shadow: 0 0 0.5vh #f0a02055;
}

.sym-inner.sym-inner-center-promote {
  transition: background-image 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease;
}

.cell {
  aspect-ratio: 1.3/1;
  border-radius: 1vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.reel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 2;
}


.reel-stack {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.reel-strip {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  will-change: transform;
}

.sym {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sym-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../images/bg-icon.webp);
  background-size: 100% 100%;
  border: 0.15vh solid #3a2008;
  border-radius: 0.8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6vh;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.sym-inner.center-sym {
  background-image: url(../images/bg-icon-center.webp);
  background-size: 100% 100%;
  border-color: #f0a020;
  box-shadow: inset 0 0 0.8vh #f0a02033;
}

.sym-inner.sym-inner-land-video {
  overflow: hidden;
  padding: 0;
}

.sym-inner-land-video .cell-land-video {
  position: absolute;
  top: -78%;
  width: 250%;
  height: 250%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

.cell.cell-land-video-win {
  box-shadow: 0 0 1vh #f0c02088;
  border-radius: 1vh;
  z-index: 106;
}

#grid.bonus-mode .sym-inner {
  background-image: url(../images/bg-icon-center.webp) !important;
  background-size: 100% 100%;
  border-color: #f0a020;
  box-shadow: inset 0 0 0.8vh #f0a02033;
}

.sym-inner.bonus-outer {
  background-image: url(../images/bg-icon-center.webp);
  background-size: 100% 100%;
  border-color: #f0a020;
  box-shadow: inset 0 0 0.8vh #f0a02033;
}

#grid.bonus-mode .sym-inner.bonus-outer {
  background-image: url(../images/bg-icon-center.webp) !important;
  background: url(../images/bg-icon-center.webp);
  background-size: 100% 100%;
  border-color: #f0a020;
  box-shadow: inset 0 0 0.8vh #f0a02033;
}

@keyframes outer-darken {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 0.3; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.coin-img-wrap {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coin-img {
    width: 114%;
    height: 114%;
  object-fit: contain;
  display: block;
}

.coin-img.coin-img-lg {
  transform: scale(1.144);
  transform-origin: center center;
}

@keyframes sym-land-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.coin-img-wrap.sym-land-pop {
  animation: sym-land-pop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  transform-origin: center center;
}

.reel-stack .sym-inner.sym-land-pop {
  animation: sym-land-pop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  transform-origin: center center;
}

@keyframes sym-land-gold-pulse {
  0%, 100% {
    box-shadow:
      0 0 0.4vh rgba(249, 208, 97, 0.65),
      0 0 1vh rgba(240, 160, 32, 0.5),
      0 0 1.5vh rgba(200, 120, 20, 0.28);
  }
  50% {
    box-shadow:
      0 0 0.85vh rgba(252, 250, 238, 0.95),
      0 0 1.65vh rgba(249, 208, 97, 0.85),
      0 0 2.35vh rgba(240, 160, 32, 0.6),
      0 0 2.9vh rgba(200, 120, 20, 0.35);
  }
}

@keyframes sym-land-gold-pulse-center {
  0%, 100% {
    box-shadow:
      0 0 0.4vh rgba(249, 208, 97, 0.65),
      0 0 1vh rgba(240, 160, 32, 0.5),
      0 0 1.5vh rgba(200, 120, 20, 0.28),
      inset 0 0 0.8vh #f0a02033;
  }
  50% {
    box-shadow:
      0 0 0.85vh rgba(252, 250, 238, 0.95),
      0 0 1.65vh rgba(249, 208, 97, 0.85),
      0 0 2.35vh rgba(240, 160, 32, 0.6),
      0 0 2.9vh rgba(200, 120, 20, 0.35),
      inset 0 0 1.05vh rgba(240, 160, 32, 0.45);
  }
}

@keyframes coin-land-gold-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 0.22vh rgba(249, 208, 97, 0.95))
      drop-shadow(0 0 0.5vh rgba(240, 160, 32, 0.75))
      drop-shadow(0 0 0.85vh rgba(240, 160, 32, 0.42));
  }
  50% {
    filter:
      drop-shadow(0 0 0.48vh rgba(252, 250, 238, 0.98))
      drop-shadow(0 0 0.95vh rgba(249, 208, 97, 0.92))
      drop-shadow(0 0 1.5vh rgba(240, 160, 32, 0.78))
      drop-shadow(0 0 2vh rgba(200, 120, 20, 0.48));
  }
}

.cell.scatter .coin-img {
  animation: coin-land-gold-pulse 1.75s ease-in-out infinite;
}

.cell:not(.scatter) .sym-inner.center-sym,
.cell:not(.scatter) .sym-inner.bonus-outer {
  animation: sym-land-gold-pulse-center 1.75s ease-in-out infinite;
}

.cell:not(.scatter) .sym-inner:not(.center-sym):not(.bonus-outer):not(.sym-inner-deco-coin) {
  animation: sym-land-gold-pulse 1.75s ease-in-out infinite;
}

.cell:not(.scatter) .sym-inner.sym-inner-deco-coin {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .cell.scatter .coin-img,
  .cell:not(.scatter) .sym-inner {
    animation: none !important;
  }

  .coin-img-wrap.sym-land-pop,
  .reel-stack .sym-inner.sym-land-pop {
    animation: none !important;
  }
}


.cell.bonus-outer-anim .sym-inner {
  animation: outer-darken 0.5s ease forwards;
}

.coin-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: 3vh;
  font-weight: 700;
  background: linear-gradient(180deg, #F9D061 35.1%, #FCFAEE 50.96%, #F9D061 64.42%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.coin-label.coin-label-sprite {
  --coin-digit-slice: 0.9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.12vh;
  max-width: 88%;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: unset;
  font-size: 0;
  line-height: 0;
  filter: drop-shadow(0 0.08vh 0.2vh rgba(0, 0, 0, 0.75));
}

.coin-label.coin-label-sprite .coin-digit {
  height: 5.25vh;
  width: calc(5.25vh * 512 / 11 / 64 * var(--coin-digit-slice));
  flex-shrink: 0;
  overflow: hidden;
  background-image: url(../images/coin-digit.webp);
  background-repeat: no-repeat;
  background-size: 1100% 100%;
  image-rendering: crisp-edges;
}


.coin-label.coin-label-sprite .coin-d0,
.coin-fly-sprite .coin-d0,
.jp-panel-label-sprite .coin-d0 { background-position: -1% 0; }
.coin-label.coin-label-sprite .coin-d1,
.coin-fly-sprite .coin-d1,
.jp-panel-label-sprite .coin-d1 { background-position: 8.187% 0; }
.coin-label.coin-label-sprite .coin-d2,
.coin-fly-sprite .coin-d2,
.jp-panel-label-sprite .coin-d2 { background-position: 17% 0; }
.coin-label.coin-label-sprite .coin-d3,
.coin-fly-sprite .coin-d3,
.jp-panel-label-sprite .coin-d3 { background-position: 26.56% 0; }
.coin-label.coin-label-sprite .coin-d4,
.coin-fly-sprite .coin-d4,
.jp-panel-label-sprite .coin-d4 { background-position: 35.7% 0; }
.coin-label.coin-label-sprite .coin-d5,
.coin-fly-sprite .coin-d5,
.jp-panel-label-sprite .coin-d5 { background-position: 34.933% 0; }
.coin-label.coin-label-sprite .coin-d6,
.coin-fly-sprite .coin-d6,
.jp-panel-label-sprite .coin-d6 { background-position: 45.167% 0; }
.coin-label.coin-label-sprite .coin-d7,
.coin-fly-sprite .coin-d7,
.jp-panel-label-sprite .coin-d7 { background-position: 53.4% 0; }
.coin-label.coin-label-sprite .coin-d8,
.coin-fly-sprite .coin-d8,
.jp-panel-label-sprite .coin-d8 { background-position: 72.634% 0; }
.coin-label.coin-label-sprite .coin-d9,
.coin-fly-sprite .coin-d9,
.jp-panel-label-sprite .coin-d9 { background-position: 71.867% 0; }

.coin-fly-sprite {
  --coin-digit-slice: 0.9;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.12vh;
  filter: drop-shadow(0 0.06vh 0.18vh #000) drop-shadow(0 0 0.45vh #a05000);
}

.coin-fly-sprite .coin-digit {
  height: 2.35vh;
  width: calc(2.35vh * 512 / 11 / 64 * var(--coin-digit-slice));
  flex-shrink: 0;
  overflow: hidden;
  background-image: url(../images/coin-digit.webp);
  background-repeat: no-repeat;
  background-size: 1100% 100%;
  image-rendering: crisp-edges;
}

.coin-label.coin-label-bonus {
  margin-top: -0.4vh;
}

.cell.scatter {
  border-color: #f0c020;
  box-shadow: 0 0 1vh #f0c02088;
}

.cell.cell-win-vfx {
  z-index: 105;
}

.cell-win-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.05);
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
}

.cell.cell-win-vfx .cell-win-video {
  opacity: 1;
  visibility: visible;
}

@keyframes cell-suspense-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.18vh, 0.12vh); }
  50% { transform: translate(0.18vh, -0.12vh); }
  75% { transform: translate(-0.12vh, -0.1vh); }
}

.cell-suspense-shake {
  animation: cell-suspense-shake 0.13s ease-in-out infinite;
  z-index: 20;
}

.cell.bonus-coin .reel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell.bonus-coin.new-hit {
  animation: coin-land 0.4s ease;
}

@keyframes coin-land {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1);   opacity: 1; }
}

#bonus-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1vh;
  z-index: 110;
}
#bonus-overlay.hidden { display: none; }

.win {
  background-image: url(../images/win-bg.webp);
  background-size: 100% 100%;
  width: 26vh;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vh;
}

.win span {
  background: linear-gradient(180deg, #F9D061 35.1%, #FCFAEE 50.96%, #F9D061 64.42%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#lives-bar {

  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4vh;
  background-image: url(../images/life-bonus.webp);
  background-size: 100% 100%;
width: 28vh;
    height: 4vh;
}
#life-1{
    background-image: url(../images/life1.webp);
    background-size: 100% 100%;
  
}
#life-2{
    background-image: url(../images/life2.webp);
    background-size: 100% 100%;
  
}
#life-3{
    background-image: url(../images/life3.webp);
    background-size: 100% 100%;
  
}

.life {
  font-size: 3.5vh;
  color: #e03030;
  transition: opacity 0.3s, transform 0.3s;
    width: 8.6vh;
    height: 3.3vh;
}

.life.lost {
  opacity: 0;
  transform: scale(0.7);
}

#bg-overlay.bonus-intro-reveal {
  transition: opacity 0.7s ease;
}

#bg-overlay.active {
  opacity: 1;
}

#controls {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
}

#btn-spin {
    background-color: transparent;
    background-image: url(../images/btn-spin.webp);
    background-size: 100% 100%;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 12vh;
  height: 12vh;
  font-size: 2vh;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
  letter-spacing: 0.05em;
   animation: spin-rotate 2.5s ease-in-out infinite;
}
@keyframes spin-rotate {
  0%   { transform: rotate(-60deg); }
  50%  { transform: rotate(60deg); }
  100% { transform: rotate(-60deg); }
}

#btn-spin:active { transform: scale(0.95); }
#btn-spin:disabled { opacity: 0.4; cursor: not-allowed; }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1000;
    backdrop-filter: blur(2px);
    background: #181a39a9;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

#modal2 {
    z-index: 2000000;
    background-color: rgba(0, 0, 0, 0.685);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
      font-family: 'Inter';
    align-items: stretch;
}
#modal2 .modal-content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 3vh;
}
#modal3 {
    z-index: 2000000;
    background-image: url(../images/modal3-bg.webp);
    background-size:auto 100%;
    background-position:center;
    width: 100%;
    height: 100%;
    

}
#modal3 .modal-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 7vh;

}
.logo{
  width: 27vh;
}
.logo2{
    width: 40vh;
    margin-top: 10vh;
}
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat.woff2);
}
.bonus-final{

  aspect-ratio: 793 / 602;
  background-image: url(../images/intro-welcome-panel.webp);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat';
  padding: 7vh 0vh;
}
.title{
  color: white;
  text-shadow: 0px .4vh 0px  #BF1818;

  text-transform: uppercase;
  font-size: 3vh;
  margin-bottom: 1vh;
}
.big-text-container{
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;

}
.big-text{

    background: linear-gradient(180deg, #FFFD34 0%, #FFE215 50%, #FEB311 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px .2vh 0px #DD4007);
    font-size: 7vh;

}
.small-text{

  background: linear-gradient(180deg, #FFFD34 0%, #FFE215 50%, #FEB311 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px .2vh 0px #DD4007);
  font-size: 2.5vh;

}
.tt{
  margin-top: 1vh;
}
#modal3 .finish-install-btn {
  padding: 0 3vh;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 578 / 256;
  background-image: url(../images/intro-start-btn.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  animation: 3s pulseS ease-in-out infinite;
}

#modal3 .finish-install-btn:active {
  transform: scale(0.97);
}

#modal3 .finish-install-btn .finish-install-label {
  display: inline-block;
  position: relative;
  font-family: 'Inter';
  font-size: 3vh;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  -webkit-text-stroke: none;
  background: linear-gradient(
    263.21deg,
    #FB8600 0%,
    #FEE32F 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes pulseS {
  0%,100%{
    scale: 1;
  }
  50%{
        scale: 1.1;
  }
}

.bigwin-amount{
  position: relative;
  z-index: 2;

  padding: 2vh 5vh;
  background-image: url(../images/bigwin-bg.webp);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.label{
  font-size: 4.5vh;
}
.win-value{
  font-size: 5vh;
  font-weight: 700;
  background: linear-gradient(
    180deg,
    #F9D061 35.1%,
    #FCFAEE 50.96%,
    #F9D061 64.42%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bigwin-volcano-wrap {
  position: absolute;
  left: 50%;
  bottom: -10vh;

  transform: translateX(-50%);
  z-index: 0;
  width: 200vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.bigwin-volcano-frame {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.bigwin-volcano-wrap.visible .bigwin-volcano-frame {
  opacity: 1;
}
@media (max-aspect-ratio: 9/16) {
  .jp-panels-row {
    top: -26vh;
    height: 16vh;
  }
  .jp-panel:nth-child(1) {
    transform: translateX(calc(-50% - 21vh)) translateY(10.6vh);
  }
  .jp-panel:nth-child(2) {
    transform: translateX(calc(-50% - 21.75vh)) translateY(18vh);
  }
  .jp-panel-video {
    display: block;
    max-height: 28.7vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
  .jp-panel:nth-child(3) {
    transform: translateX(calc(-50% + 21.25vh)) translateY(11.65vh);
}
  .jp-panel:nth-child(4) {
    transform: translateX(calc(-50% + 21.5vh)) translateY(18.6vh);
}
  .volcano {
    width: 83vh !important;
    left: 49%;
  }
  #slot-root {
    transform: scale(0.7)!important;
    transform-origin: center center;

  }
  .right-panal .button {
    display: none;
  }
  .right-panal .button-phone {
    display: block;
  }
  .bigwin-volcano-wrap {
    position: absolute;
    left: 50%;
    bottom: -3vh;
    transform: translateX(-50%);
    z-index: 0;
    width: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}
.win-value{
  font-size: 4vh;
  font-weight: 700;
  background: linear-gradient(
    180deg,
    #F9D061 35.1%,
    #FCFAEE 50.96%,
    #F9D061 64.42%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
  .right-panal {
    img {
        height: auto;
        width: 100%;
    }
}
.left-panel {
    position: absolute;
    width: 18vh;
    height: 180%;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    display: flex;
    padding: 0vh 0;
    align-items: end;
    z-index: -1;
    padding-bottom: 5vh;
}
.right-panal {
    position: absolute;
    width: 6vh;
    height: auto;
    width: 100%;
    left: 50%;
        bottom: -35vh;
    transform: translate(-50%);

}
#info-bar {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 110%;
}
}
@media (max-aspect-ratio: 3852/3780) {
  #slot-root {
    transform: scale(0.8);
    transform-origin: center center;

  }
}
@media (max-aspect-ratio: 3088/3780) {
  #slot-root {
    transform: scale(0.6);
    transform-origin: center center;

  }
}
@media (max-aspect-ratio: 2312/3780) {
  #slot-root {
    transform: scale(0.5);
    transform-origin: center center;

  }
}
video,.slot-fire-full-video,.bonus-dialog-video,.jp-panel-video,.volcano,.cell-land-video,.cell-win-video{background:transparent!important;}