@keyframes buttonSlide {
  0% {
    opacity: 1;
    transform: translateX(-80px);
  }
  85% {
    opacity: 1;
    transform: translateX(100vw);
  }
  85.01% {
    opacity: 0;
  }
}

/* Post-install push prompt (#notification-allow-show .bd). The card is
   centered via translate(-50%, -50%), so every keyframe must carry that
   translate — a bare translateY() here would override the centering for
   the whole animation (and, with fill-mode, after it). */
@keyframes notificationPopIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes notificationPopOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes instructionSlideDown {
  0%,
  30% {
    transform: translateY(0);
  }

  30%,
  50% {
    transform: translateY(4px);
  }
  75%,
  100% {
    transform: translateY(0);
  }
}
@keyframes instructionArrowSlideDown {
  0%,
  30% {
    transform: translateY(0);
  }

  30%,
  50% {
    transform: translateY(8px);
  }
  75%,
  100% {
    transform: translateY(0);
  }
}

@keyframes scaleCircle {
  0%,
  45% {
    opacity: 1;
    transform: scale(1);
  }

  45%,
  65% {
    opacity: 0;
    transform: scale(3);
  }
  66%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

:root {
  --main-color: #01875f;
  --main-hover-color: #01533b;
}

:root[data-type='google'] {
  --main-color: #01875f;
  --main-hover-color: #01533b;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #242424;
}

html,
body,
div,
iframe,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
a {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
}

a {
  text-decoration: none;
}

button {
  background: none;
  border: none;
}

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* -------------------- */

.preloader {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: #000;
}

.fade-slider {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}

.fade-slider.active {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

.fade-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.slides-1 .slide {
  opacity: 1;
}

.slides-2 .slide {
  animation: fade2 8s infinite;
}
.slides-2 .slide:nth-child(1) {
  animation-delay: 0s;
}
.slides-2 .slide:nth-child(2) {
  animation-delay: 4s;
}
@keyframes fade2 {
  0%,
  45% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}

.slides-3 .slide {
  animation: fade3 12s infinite;
}
.slides-3 .slide:nth-child(1) {
  animation-delay: 0s;
}
.slides-3 .slide:nth-child(2) {
  animation-delay: 4s;
}
.slides-3 .slide:nth-child(3) {
  animation-delay: 8s;
}
@keyframes fade3 {
  0%,
  30% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}

.slides-4 .slide {
  animation: fade4 16s infinite;
}
.slides-4 .slide:nth-child(1) {
  animation-delay: 0s;
}
.slides-4 .slide:nth-child(2) {
  animation-delay: 4s;
}
.slides-4 .slide:nth-child(3) {
  animation-delay: 8s;
}
.slides-4 .slide:nth-child(4) {
  animation-delay: 12s;
}
@keyframes fade4 {
  0%,
  22% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0;
  }
}

.slides-5 .slide {
  animation: fade5 20s infinite;
}
.slides-5 .slide:nth-child(1) {
  animation-delay: 0s;
}
.slides-5 .slide:nth-child(2) {
  animation-delay: 4s;
}
.slides-5 .slide:nth-child(3) {
  animation-delay: 8s;
}
.slides-5 .slide:nth-child(4) {
  animation-delay: 12s;
}
.slides-5 .slide:nth-child(5) {
  animation-delay: 16s;
}
@keyframes fade5 {
  0%,
  18% {
    opacity: 1;
  }
  28%,
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main-body {
  overflow: hidden;
  background: no-repeat center;
  background-size: cover;
}

#iframe-main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #242424;
}

.iframe-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  border: none;
}

/* -------------------- */
.main-up,
.information-list,
.btn-box,
.banner-imgs-box,
.introduce,
.rating {
  margin: 24px 24px 0;
}

/* */
.main-up {
  display: flex;
  align-items: center;
}

.main-up .logo {
  position: relative;
  width: 72px;
  height: 72px;
  margin-right: 24px;
  border-radius: 20%;
}

.main-up .logo.ami {
  overflow: hidden;
}

.main-up .logo img {
  display: block;
  width: 100%;
}

.main-up .logo .box,
.loading-ci .box {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-left: 2px solid var(--main-color);
  border-right: 2px solid var(--main-color);
  border-radius: 50%;
  animation: turn 1s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes turn {
  100% {
    transform: rotateZ(-1turn);
  }
}

.main-up .logo.ami img {
  width: 50%;
  margin: 18px auto;
  animation: all 0.3;
}

.main-up .logo.ami .box {
  display: block;
}

/* Centered preloader styles */
.preloader-centered {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
  z-index: 999;
}

.preloader-centered__box {
  width: 320px;
  height: 320px;
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  background: linear-gradient(180deg,#0f0f0f,#1b1b1b);
}

.preloader-centered__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.preloader-centered.fade-in {
  animation: fadeIn 0.45s ease-in forwards;
}

.main-up .info h1 {
  color: #202124;
  font-size: 24px;
}

.main-up .info h2 {
  margin-top: 5px;
  color: var(--main-color);
  font-size: 16px;
}

.main-up .info p {
  font-size: 12px;
}

/* */
.information-list {
  display: flex;
  align-items: center;
}

.information-list li {
  position: relative;
  flex: 1;
  text-align: center;
}

.information-list li img {
  width: 12px;
}

.information-list li img.large {
  width: 28px;
}

.information-list li strong {
  display: block;
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  color: #202124;
}

.information-list li p {
  font-size: 12px;
}

.information-list li:before {
  background-color: rgb(232, 234, 237);
  content: '';
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: calc(50% - 12px);
  width: 1px;
}

.information-list li:first-child:before {
  display: none;
}

/* */
.btn-box {
  position: relative;
  overflow: hidden;
}

.shiny:after {
  animation: shiny-btn-anim 4s ease-in-out infinite;
  background-color: #fff;
  content: '';
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: -180px;
  width: 30px;
}

@keyframes shiny-btn-anim {
  0% {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }

  80% {
    opacity: 0.5;
    transform: scale(0) rotate(45deg);
  }

  81% {
    opacity: 1;
    transform: scale(4) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(50) rotate(45deg);
  }
}

.btn {
  display: block;
  width: 100%;
  padding: 10px 8px;
  background: var(--main-color);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  gap: 8px;
}

.btn.btn-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-img img {
  width: 20px;
}

.btn.big {
  padding: 15px 8px;
  font-size: 18px;
}

.btn:hover {
  background: var(--main-hover-color);
}

.btn.btn-border {
  color: var(--main-color);
  border: var(--main-color) 1px solid;
  background: transparent;
}

.btn.btn-border:hover {
  border-color: var(--main-hover-color);
  color: var(--main-hover-color);
  background: transparent;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--main-color);
}

.btn:active {
  background: var(--main-color);
}

.btn .con {
  display: flex;
  flex-direction: column;
}

.btn .con p {
  display: flex;
  justify-content: center;
  margin-bottom: 3px;
  gap: 5px;
  font-size: 15px;
  color: #ffe336;
}

.btn .con img {
  width: 12px;
}

.btn + .btn {
  margin-top: 8px;
}

.btn-notification {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  width: 100%;
  border-radius: 80px;
  background: #1677ff;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: 0.2s opacity linear;
}

.btn-notification:hover {
  opacity: 0.8;
}

.btn-later {
  padding: 12px 24px;
  width: 100%;
  border-radius: 80px;
  background: #ffffff0a;
  border: 1px solid #ffffff0a;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: 0.2s opacity linear;
}

.btn-later:hover {
  opacity: 0.8;
}

.btn-notification.decline {
  background: #ffffff0a;
}

.btn-notification.allow {
  position: relative;
  overflow: hidden;
  flex: 0 0 55%;
  &::after {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 29.14%,
      rgba(255, 255, 255, 0.25) 52.48%,
      rgba(255, 255, 255, 0) 76.01%
    );
    transform: translateX(-80px);
    opacity: 0.5;
    width: 67px;
    height: 100%;
    top: 0;
    left: 27px;
    opacity: 0;
    animation: buttonSlide 3.5s ease-in-out infinite;
  }
}

#installing {
  position: relative;
  width: 100%;
  background: none;
  border: var(--main-color) 1px solid;
  box-sizing: border-box;
  color: #ffe336;
  text-align: center;
  overflow: hidden;
}

#installing #proess {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--main-color);
}

#installing > * {
  z-index: 1;
  position: relative;
}

/* */
.banner-imgs-box {
  overflow-x: auto;
  overflow-y: hidden;
}

.banner-imgs {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  height: 224px;
}

.banner-imgs li {
  border-radius: 8px;
  height: 224px;
  margin-right: 11px;
  overflow: hidden;
}

.banner-imgs li img {
  display: block;
  height: 100%;
}

.banner-imgs-box.landscape .banner-imgs,
.banner-imgs-box.landscape .banner-imgs li {
  height: 168px;
  transition: all 0.5s;
}

/* */
.introduce {
  position: relative;
  padding-bottom: 16px;
}

.introduce h2 {
  margin-bottom: 20px;
  color: #202124;
}

.introduce > div {
  white-space: pre-wrap;
}

/* */
#loading,
#reInstall,
#play,
#installing {
  display: none;
}

body[data-type='BEFORE_LOADING'] #loading {
  display: block;
}

body[data-type='BEFORE_LOADING'] #reInstall,
body[data-type='BEFORE_LOADING'] #play,
body[data-type='BEFORE_LOADING'] #installing {
  display: none;
}

body[data-type='LOADING'] #reInstall,
body[data-type='INSTALL'] #reInstall {
  display: block;
}

body[data-type='LOADING'] #play,
body[data-type='LOADING'] #installing,
body[data-type='LOADING'] #loading,
body[data-type='INSTALL'] #play,
body[data-type='INSTALL'] #installing,
body[data-type='INSTALL'] #loading {
  display: none;
}

body[data-type='PLAY'] #play {
  display: block;
}

body[data-type='PLAY'] #reInstall,
body[data-type='PLAY'] #installing,
body[data-type='PLAY'] #loading {
  display: none;
}

body[data-type='INSTALLING'] #installing {
  display: block;
}

body[data-type='INSTALLING'] #reInstall,
body[data-type='INSTALLING'] #play,
body[data-type='INSTALLING'] #loading {
  display: none;
}

/* */
.show-logo,
.sold-out {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.show-logo img,
.sold-out img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.show-logo p,
.sold-out p {
  margin-top: 15px;
  font-weight: 600;
}

.show-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* */
#user-choose-show,
.show-btn,
#pop-show,
#notification-allow-show,
#notification-instruction-show,
#loading-box,
#deferredprompt-loading-box,
#open-chrome {
  display: none;
}

#pop-show,
#loading-box,
#deferredprompt-loading-box,
#open-chrome,
#user-choose-show,
#notification-instruction-show,
#notification-allow-show {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

#pop-show .bd,
#loading-box .bd,
#deferredprompt-loading-box .bd,
#open-chrome .bd,
#user-choose-show .bd,
#notification-allow-show .bd {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 15px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}

#notification-instruction-show {
  &::after {
    content: '';
    position: absolute;
    z-index: 100;
    border-radius: 50%;
    right: 8px;
    top: -40px;
    width: 34px;
    height: 34px;
    background: #ffffff40;
    border: 1px solid #ffffff40;
    box-shadow: 0px 4px 16px 0px #ffffff1a inset;
    animation: scaleCircle 3s ease-out infinite;
  }
}

#notification-instruction-show .bd {
  position: fixed;
  margin: 16px;
  z-index: 10;
  top: 8px;
  right: -10px;
  animation: instructionSlideDown 3s ease-out infinite;

  &::after {
    content: '';
    position: absolute;
    z-index: 2;
    right: 4px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #383b42;
    pointer-events: none;
    animation: instructionArrowSlideDown 3s ease-out infinite;
  }
  .content-container {
    position: relative;
    z-index: 12;
    border-radius: 20px 4px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    max-width: 100%;
    padding: 20px;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(
      86.69% 100% at 50% 0%,
      rgba(30, 51, 90, 0.75) 0%,
      rgba(45, 45, 45, 0.75) 100%
    );
    backdrop-filter: blur(25px);
    box-shadow: 0px 4px 4px 0px #00000040;
    .title {
      text-align: center;
      max-width: 248px;
      font-size: 18px;
      line-height: 24px;
      font-weight: 700;
      color: #fff;
    }

    .instruction-content-wrapper {
      width: 264px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .content-item {
        width: 100%;
        display: flex;
        align-items: start;
        gap: 8px;

        .count-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          div {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            background: #ffffff1a;
            border-radius: 50%;
            font-size: 16px;
            line-height: 28px;
            color: #fff;
          }

          .divider {
            width: 1px;
            background: #ffffff1a;
          }
        }

        p {
          font-size: 16px;
          line-height: 22px;
          letter-spacing: -2%;
          color: #ffffffbf;
          padding: 0 0 16px;
          span {
            color: #fff;
          }
        }

        .icon-wrapper {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          vertical-align: middle;
        }

        .icon-wrapper svg {
          width: 20px;
          height: 20px;
        }
      }
    }
    @media (max-width: 550px) {
      width: auto;
    }
  }
}
#notification-allow-show .bd {
  min-width: 300px;
  /* dvh so mobile Chrome's dynamic address bar can't push the popup above
     the visible area; body is locked (overflow: hidden) while the banner is
     shown, so long text scrolls inside .bd */
  max-height: calc(100dvh - 32px);
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  padding: 16px 24px 24px;
  border-radius: 28px;
  background: #e1e3ebe5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(
    52.43% 100% at 50% 0%,
    rgba(30, 51, 90, 0.75) 0%,
    rgba(45, 45, 45, 0.75) 100%
  );
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12.5px);

  .heading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    img {
      width: 162px;
    }

    p {
      color: #fff;
      text-align: center;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.4;
    }
  }

  @media (max-width: 750px) {
    /* Centered on mobile too (client ticket: Fitts's law — the bottom
       sheet was hard to reach). Centering itself comes from the shared
       .bd rule (top/left 50% + translate); this block only widens the
       card and adds the entry animation. */
    padding: 16px 24px 32px;
    width: calc(100vw - 32px);
    animation: notificationPopIn 0.25s ease-out;
  }
}

/* Exit animation, mobile only (class name is historical — it used to slide
   the bottom sheet down). allow-notifications.js adds .hide-down and hides
   the banner after a hard-coded 400ms, so the animation must finish within
   that window; `forwards` keeps the card invisible for the remainder. */
#notification-allow-show .hide-down {
  @media (max-width: 750px) {
    animation: notificationPopOut 0.25s ease-out forwards;
  }
}

#notification-allow-show .bd p {
  color: #343434;
  font-size: 20px;
  line-height: 28px;
}

#loading-box .bd,
#deferredprompt-loading-box .bd {
  padding: 30px 50px;
  text-align: center;
}

#loading-box .bd p,
#deferredprompt-loading-box .bd p {
  margin: 15px 0 0;
}

#pop-show .bd,
#user-choose-show .bd {
  width: 70vw;
}

#pop-show .bd strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 20px;
  font-weight: 600;
}

#pop-show .bd p {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0 10px;
  font-size: 14px;
  color: #666;
  border: #666 1px solid;
  border-radius: 3px;
}

#pop-show .bd .active-box {
  margin: 20px 0;
}

#pop-show .bd .active-box span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 20px;
  background: rgba(119, 250, 73, 0.3);
  color: #01875f;
  font-weight: 600;
  font-size: 16px;
}

#user-choose-show .user-btn-box {
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

#notification-allow-show .notification-btn-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

#user-choose-show .bd p {
  font-weight: 600;
  color: #000;
}

#user-choose-show .user-btn-box .btn + .btn {
  margin: 0;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

.loading-ci {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 72px;
  height: 72px;
  margin: 15px auto 0;
  color: #01875f;
}

.loading-ci .box {
  display: block;
}

.rotate {
  animation: loadingCircle 1s infinite linear;
}

@keyframes loadingCircle {
  100% {
    transform: rotate(-360deg);
  }
}

/* -------------template---------------------- */
.template-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  background-color: #fff;
  transition: box-shadow 0.2s ease-in-out;
}

.template-head.scroll {
  box-shadow:
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.template-head .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  box-sizing: border-box;
}

.template-head .box .l a {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: rgb(95, 99, 104);
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  gap: 8px;
  white-space: nowrap;
}

.template-head .box .l a svg {
  width: 40px;
  height: 40px;
}

.template-head .box .l img {
  width: 40px;
  height: 40px;
}

.template-head .box .r {
  display: flex;
  align-items: center;
}

.template-head .box .r a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 100%;
  transition: background 0.2s ease-in-out;
}

.template-head .box .r a:hover {
  background: #eee;
}

.template-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 56px;
  background-color: #fff;
  border-top: 1px solid rgb(218, 220, 224);
}

.template-footer ul {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
}

.template-footer ul li {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

.template-footer ul span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-footer ul li p {
  width: 24px;
  height: 24px;
  margin: 0 auto 2px;
  overflow: hidden;
}

.template-footer ul li a {
  color: rgb(95, 99, 104);
}

.template-footer ul li a:hover,
.template-footer ul li.active a {
  color: var(--main-color);
}

.template-footer ul li a:hover img,
.template-footer ul li.active a img {
  filter: drop-shadow(var(--main-color) 80px 0);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transform: translateX(-80px);
}

.template-bd {
  padding: 56px 0;
  background-color: #fff;
}

.google-share-btns {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  gap: 20px;
}

.google-share-btns li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-share-btns svg {
  fill: var(--main-color);
}

:root[data-type='google'] .introduce h2 {
  font-size: 18px;
  font-weight: bold;
}

:root[data-type='google'] .main-up .logo img {
  border-radius: 20%;
  box-shadow:
    0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.update-box {
  margin: 24px 24px 0;
}

.update-box h3 {
  font-weight: bold;
  color: rgb(32, 33, 36);
}

.update-box p {
  margin-top: 4px;
}

.data-safety-list {
  margin: 20px 24px;
  border: rgb(218, 220, 224) 1px solid;
  border-radius: 8px;
  padding: 20px;
}

.data-safety-list li {
  display: flex;
  align-items: flex-start;
}

.data-safety-list li + li {
  margin-top: 20px;
}

.data-safety-list li img {
  margin-right: 20px;
}

.data-safety-list li p {
  font-size: 12px;
}

.data-safety-list li p span {
  text-decoration: underline;
}

.data-safety-list > p {
  margin-top: 20px;
  color: var(--main-color);
}

/* */
.pop-box {
  display: flex;
  flex-direction: column;
  z-index: 4;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
}

.pop-box .pop-top {
  padding: 1px 0 10px;
  background: #fff;
}

.pop-box .pop-top .template-head {
  position: static;
}

.pop-box .pop-top .main-up,
.pop-box .pop-top .information-list,
.pop-box .pop-top .btn-box {
  margin-top: 10px;
}

.pop-box .pop-bd {
  position: relative;
  flex: auto;
  overflow-y: auto;
}

.pop-box .pop-bd .inbd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}

.pop-box .pop-bd .closed-btn {
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 5px;
  width: 30px;
}

.pop-box .pop-bd .app-items {
  display: flex;
  margin-top: 20px;
  align-items: center;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
}

.pop-box .pop-bd .app-items img {
  width: 25px;
  margin-left: 5px;
}

.pop-box .pop-bd .intro {
  margin-top: 20px;
  width: 85%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #ababab;
}

.turntable-container {
  padding-top: 80px;
  text-align: center;
  width: 100%;
  /* overflow: hidden; */
}

.turntable-container .turntable-title {
  width: 624px;
  max-width: 83%;
  height: auto;
}

.turntable-container .turntable-content,
.turntable-container .turntable-content .turntable-main {
  position: relative;
  z-index: 1;
  width: 572px;
  overflow: visible;
  margin: 20px auto;
}

.turntable-container .turntable-bg {
  position: absolute;
  left: -5%;
  bottom: 0;
  z-index: 0;
  width: 650px;
  /*max-width: calc(624 * (1vw / 7.5));*/
  height: auto;
}

.turntable-container .turntable-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 650px;
  /*max-width: calc(624 * (1vw / 7.5));*/
  height: auto;
}

.turntable-container .turntable-coin {
  position: absolute;
  right: 14%;
  bottom: -1%;
  z-index: 2;
  width: 117px;
  /*max-width: calc(624 * (1vw / 7.5));*/
  height: auto;
}

.turntable-container .turntable-content .turntable-main .turntable-bottom {
  position: relative;
  z-index: 0;
  width: 572px;
  height: auto;
  transition: all 4s cubic-bezier(0.5, 0.93, 0.43, 1);
  /*max-width: calc(572 * (1vw / 7.5));*/
}

.turntable-container .turntable-content .turntable-main .turntable-light {
  position: absolute;
  left: 1%;
  top: 1%;
  z-index: 1;
  width: 562px;
  height: auto;
  animation: light-rotate 3s steps(2) infinite forwards;
  /*max-width: calc(562 * (1vw / 7.5));*/
}

.turntable-container .turntable-content .turntable-main .turntable-pointer {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 1;
  transform: translate(-50%, 4%);
  width: 250px;
  height: auto;
  /*max-width: calc(562 * (1vw / 7.5));*/
}

.turntable-container .turntable-content .turntable-main .turntable-button {
  position: absolute;
  left: 36%;
  top: 36%;
  z-index: 2;
  /*transform: translate(-50%, -50%);*/
  width: 160px;
  height: auto;
  transition: all linear 0.2s;
  /*max-width: calc(160 * (1vw / 7.5));*/
}

.turntable-container
  .turntable-content
  .turntable-main
  .turntable-button:active {
  transform: scale(0.9);
}

.turntable-container .turntable-content .turntable-main .turntable-button img {
  width: 100%;
  height: auto;
}

.turntable-container .turntable-content .turntable-main .turntable-button span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #ffffff;
  font-weight: bold;
  text-shadow:
    -2px -2px 0 #a40106,
    2px -2px 0 #a40106,
    -2px 2px 0 #a40106,
    2px 2px 0 #a40106;
}

@keyframes light-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(30deg);
  }
}

@media (max-width: 750px) {
  .turntable-container {
    padding-top: calc(80 * (1vw / 7.5));
  }

  .turntable-container .turntable-content,
  .turntable-container .turntable-content .turntable-main {
    width: calc(572 * (1vw / 7.5));
  }

  .turntable-container .turntable-bg,
  .turntable-container .turntable-halo {
    width: calc(650 * (1vw / 7.5));
  }

  .turntable-container .turntable-coin {
    width: calc(117 * (1vw / 7.5));
  }

  .turntable-container .turntable-content .turntable-main .turntable-bottom {
    width: calc(572 * (1vw / 7.5));
  }

  .turntable-container .turntable-content .turntable-main .turntable-light {
    width: calc(562 * (1vw / 7.5));
  }

  .turntable-container .turntable-content .turntable-main .turntable-pointer {
    width: calc(250 * (1vw / 7.5));
  }

  .turntable-container .turntable-content .turntable-main .turntable-button {
    width: calc(160 * (1vw / 7.5));
  }

  .turntable-container
    .turntable-content
    .turntable-main
    .turntable-button
    span {
    font-size: calc(48 * (1vw / 7.5));
  }
}

/* */
.statement {
  /* display: flex; justify-content: space-between; align-items: center; */
  padding: 7px;
  background: #fafbfc;
  font-size: 12px;
  color: #333;
  text-align: center;
}

.statement a {
  color: #333;
  height: 24px;
}

.statement span {
  margin: 0 5px;
}

/* */
.game-bd {
  padding: 40px 15px 20px;
  height: 100%;
  overflow-y: auto;
}

.game-bd h2,
.game-bd h4,
.game-bd p {
  text-align: center;
}

.game-bd h2,
.game-bd h4 {
  color: #fff;
  font-weight: bold;
}

.game-bd h2 {
  font-size: 25px;
}

.game-bd h4 {
  margin: 20px 0 10px;
  font-size: 21px;
}

.game-bd p {
  line-height: 1.5;
  font-size: 16px;
  color: #d1d1d1;
}

.game-bd .img-list {
  max-width: 750px;
  display: flex;
  flex-flow: row wrap;
  row-gap: 30px;
  padding-left: -8px;
  padding-right: -8px;
  margin: 20px auto 0;
  box-sizing: border-box;
}

.game-bd .img-list li {
  position: relative;
  flex: 0 0 50%;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}

.game-bd .img-list img {
  display: block;
  width: 100%;
}

.game-bd .img-list .in-box {
  position: relative;
}

.game-progress-box {
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 14px;
  line-height: 14px;
  background: #cecece;
  font-size: 10px;
  color: #000;
  font-weight: bold;
}

.game-progress-box div {
  position: absolute;
  left: -2px;
  top: -2px;
  bottom: -2px;
  background: #ff2e2e;
}

.game-progress-box div:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 100%;
  border-style: solid;
  border-color: transparent transparent #891f1d transparent;
  border-width: 2px 0 2px 2px;
}

.game-progress-box div:after {
  position: absolute;
  content: '';
  left: 100%;
  top: 0;
  border-style: solid;
  border-color: transparent transparent transparent #ff2e2e;
  border-width: 10px 0 9px 9px;
}

.game-progress-box span {
  z-index: 4;
  position: absolute;
  left: 15px;
}

.game-progress-box.green div {
  background: #11cd30;
}

.game-progress-box.green div:before {
  border-color: transparent transparent #0c6b39 transparent;
}

.game-progress-box.green div:after {
  border-color: transparent transparent transparent #11cd30;
}

#open-chrome .bd {
  width: 90%;
  padding: 35px 35px 35px 50px;
  text-align: left;
  word-wrap: break-word;
}

#open-chrome .bd .closed-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  transform: translateY(-35px);
  cursor: pointer;
}

#open-chrome .bd strong {
  font-weight: bold;
}

#open-chrome .bd p {
  color: #1f2024;
  text-indent: -1.5em;
}

#open-chrome .bd p:nth-of-type(2) {
  margin: 30px 0 12px;
}

#open-chrome .bd #open-chrome .bd .btn {
  text-align: center;
}

#open-chrome .bd .btn {
  margin-top: 12px;
  text-align: center;
}

#open-chrome .bd .url-show {
  display: block;
  width: 100%;
  padding: 10px 8px;
  border: #e0e0e0 1px solid;
  border-radius: 8px;
  color: #5f6268;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

#succeed-con {
  display: none;
  padding: 5px 20px;
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background: #318269;
  color: #fff;
  border-radius: 20px;
}

/* */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 24px;
}

.tags span {
  padding: 6px 12px;
  border: #e0e0e0 1px solid;
  color: #5f6268;
  border-radius: 22px;
  font-size: 14px;
  line-height: 100%;
}

.score-box {
  margin: 24px 24px 0;
}

.score-box .tit {
  position: relative;
}

.score-box .tit:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background-image: url('../imgs/arrow.svg');
  background-size: 100% 100%;
}

.score-box .tit h3 {
  color: #1f2024;
  font-weight: bold;
}

.score-box .tit p {
  color: #5f6268;
  font-size: 10px;
}

.score-main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.score-main .l em {
  display: block;
  line-height: 1.2;
  font-size: 35px;
  color: #1f2024;
  font-weight: bold;
}

.score-main .l .star {
  margin: 5px 0;
}

.score-main .l > span {
  color: #5f6268;
  font-size: 10px;
}

.star {
  position: relative;
  width: 65px;
  height: 12px;
  background-image: url('../imgs/star.svg');
  background-size: 100% 100%;
}

.star span {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('../imgs/star_full.svg');
  background-size: auto 100%;
}

.score-main .r {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 235px;
  gap: 8px;
}

.score-main .r .item {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.score-main .r .item span {
  color: #5f6268;
  font-size: 10px;
}

.score-main .r .item div {
  position: relative;
  flex: 1;
  height: 5px;
  background: #e0e0e0;
  border-radius: 3px;
}

.score-main .r .item div em {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: #008a60;
  border-radius: 3px;
}

.score-list li {
  margin-top: 24px;
  color: #5f6268;
}

.score-list li .top {
  display: flex;
  align-items: center;
}

.score-list li .top .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  overflow: hidden;
}

.score-list li .top .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.score-list li .top > img {
  width: 2px;
  height: 10px;
}

.score-list li .top em {
  flex: 1;
  margin: 0 10px;
  font-weight: bold;
}

.score-list li .time {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 10px;
}

.score-list li .time .star {
  width: 43px;
  height: 8px;
  margin-right: 8px;
}

.score-list li .detail {
  font-size: 12px;
  word-wrap: break-word;
  overflow: hidden;
}

.show-more {
  display: block;
  margin-top: 24px;
  font-size: 12px;
  color: #008a60;
}

.block-img {
  max-width: 750px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

/* PC-Game */
.pc-game-hd {
  background: #212123;
}

.pc-game-hd .contain {
  position: relative;
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  overflow: hidden;
}

.pc-game-hd-banner {
  max-width: 1125px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.pc-game-hd-banner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.pc-game-hd .contain .box {
  padding-top: 50%;
  padding-bottom: 10%;
  z-index: 1;
  position: relative;
  color: #fff;
}

.pc-game-hd .app-info {
  display: none;
}

.pc-game-hd .app-info h1 {
  color: #fff;
  font-size: 54px;
  line-height: 1.5;
  font-weight: 900;
}

.pc-game-hd .app-info h2 {
  margin-top: 5px;
  color: #6df378;
  font-size: 16px;
}

.pc-game-hd .app-info p {
  font-size: 16px;
  color: #c8c8c8;
}

.pc-game-hd .app-logo {
  margin: 30px 0;
  display: block;
  align-items: center;
}

.pc-game-hd .app-logo .main-up {
  margin: 0 0 20px;
}

.pc-game-hd .app-logo .main-up .info h1 {
  color: #fff;
}

.pc-game-hd .app-logo .main-up .info h2 {
  color: #6df378;
}

.pc-game-hd .app-logo .main-up .info p {
  font-size: 12px;
  color: #c8c8c8;
}

.pc-game-hd .information-list {
  display: inline-flex;
  margin: 0;
}

.pc-game-hd .information-list li {
  padding: 0 25px;
}

.pc-game-hd .information-list li:first-child {
  padding-left: 0;
}

.pc-game-hd .information-list li:before {
  background-color: #3c4043;
}

.pc-game-hd .information-list li strong {
  color: #fff;
}

.pc-game-hd .information-list li p {
  color: #c8c8c8;
  white-space: nowrap;
}

.app-tool {
  display: block;
  align-items: center;
  gap: 35px;
}

.app-tool .btn-box,
.app-tool .btn-box .btn {
  margin: 0;
}

.app-tool .btn {
  padding: 10px;
  min-width: 250px;
  background: #6df378;
  color: #000;
  font-size: 14px;
}

.app-tool .google-share-btns {
  margin-top: 25px;
  font-size: 14px;
  color: #6df378;
}

.app-tool .google-share-btns svg {
  fill: #6df378;
}

.pc-game-hd-banner::after {
  content: ' ';
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background:
    linear-gradient(to right, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%),
    linear-gradient(to top, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%),
    linear-gradient(to left, rgb(33, 33, 35) 0, rgba(0, 0, 0, 0) 56%);
}

.pc-game-bd {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}

.pc-game-bd .introduce h2 {
  font-size: 24px;
  font-weight: bold;
}

.pc-game-bd .main-up,
.pc-game-bd .information-list,
.pc-game-bd .btn-box,
.pc-game-bd .banner-imgs-box,
.pc-game-bd .introduce {
  margin: 40px 0 0 !important;
}

.pc-game-bd .update-box,
.pc-game-bd .data-safety-list {
  margin-inline: 0;
}

.pc-game-bd .introduce > div {
  /* white-space: normal; */
}

@media screen and (min-width: 750px) {
  .pc-game-bd .banner-imgs-box.landscape .banner-imgs,
  .pc-game-bd .banner-imgs-box.landscape .banner-imgs li {
    height: 300px;
  }

  .app-tool,
  .pc-game-hd .app-logo {
    display: flex;
  }

  .app-tool .google-share-btns {
    font-size: 16px;
    margin: 0;
  }

  .pc-game-hd .contain .box {
    padding-top: 20%;
    padding-bottom: 5%;
  }

  .app-tool .btn {
    font-size: 16px;
    padding: 15px;
  }

  .pc-game-hd .app-logo .main-up,
  .pc-game-hd .app-logo .main-up .logo {
    margin: 0;
  }

  .pc-game-hd .app-logo .main-up .info {
    display: none;
  }

  .pc-game-hd .app-info {
    display: block;
  }

  .pc-game-hd .information-list li:first-child {
    padding-left: 25px;
  }
}

/* Rating block */
.rating {
  padding-bottom: 16px;
}

.rating-header h2 {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #202124;
}

.introduce h2:after,
.rating-header h2:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-image: url('../imgs/arrow-back.svg');
  background-size: 100% 100%;
}

.rating-content {
  display: flex;
  gap: 30px;
}

/* Left summary */
.rating-value {
  line-height: 100%;
  font-size: 3.5rem;
  letter-spacing: 0;
  font-weight: 400;
}

.rating-stars {
  display: flex;
  gap: 2px;
  margin: 6px 0;
}

.rating-count {
  font-size: 12px;
  color: #666666;
}

.rating-bars {
  flex: 1;
  padding-top: 10px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-label {
  font-size: 10px;
  color: #000000CC;
  line-height: 1rem;
}

.rating-bar {
  flex: 1;
  height: 8px;
  background: #DBDBDB;
  border-radius: 4px;
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background: #01875F;
  border-radius: 4px;
}

:root[data-template='google-lucky-wheel'] body:not(.promo-modal-closed),
:root[data-template='google-private-access'] body:not(.promo-modal-closed),
:root[data-template='google-magic-chest'] body:not(.promo-modal-closed),
:root[data-template='google-win-rate-default'] body:not(.promo-modal-closed),
:root[data-template='google-win-rate-animation'] body:not(.promo-modal-closed),
:root[data-template='google-win-rate-ai-animation'] body:not(.promo-modal-closed) {
  overflow: hidden;
}

/* Wheel modal */
.wheel-modal,
.magic-chest-modal,
.win-rate-default-modal,
.win-rate-animation-modal,
.win-rate-ai-animation-modal {
  position: fixed;
  top: 304px;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 24px;
  background: #17191AF2;
  z-index: 4;
  text-align: center;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.6);
}

.win-rate-ai-animation-modal {
  background: rgba(0, 0, 0, 0.95);
}

.wheel-modal,
.win-rate-default-modal,
.win-rate-animation-modal,
.win-rate-ai-animation-modal,
.magic-chest-modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.wheel-modal__wrapper {
  position: relative;
  width: 364px;
  height: 346px;
  overflow: hidden;
}

.wheel-modal__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #FFD749;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.wheel-modal__line {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, rgba(255, 215, 73, 0.00) 0%, #FFD749 100%);
}

.wheel-modal__line_right {
  background: linear-gradient(90deg, #FFD749 0%, rgba(255, 215, 73, 0.00) 100%);
}

.wheel-modal__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.wheel-modal__subtitle:before {
  content: '';
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url('../imgs/wheel/pinwheel.svg');
  background-size: 100% 100%;
}

.wheel-modal__description {
  font-size: 14px;
  color: #8C8D8F;
}

.wheel {
  position: relative;
  width: 364px;
  height: 346px;
  margin: 0 auto;
}

.wheel__frame {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.wheel__rotating {
  position: absolute;
  transform: rotate(0);
  transform-origin: 50% 50%;
  z-index: 2;
  inset: 0;
  margin-top: 16px;
  margin-left: 27px;
}

@keyframes spin-bounce {
  0% {
    transform: rotate(0deg);
  }

  85% {
    transform: rotate(1048deg);
  }

  100% {
    transform: rotate(1044deg);
  }
}

.wheel-modal.spin .wheel__rotating {
  animation: spin-bounce 5s forwards;
}

.wheel__start-button,
.wheel__finish-button,
.private-access-wheel-modal__start-button,
.private-access-wheel-modal__finish-button{
  position: absolute;
  z-index: 2;
  padding: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition: opacity 0.35s ease;
}

.wheel__finish-button,
.private-access-wheel-modal__finish-button {
  opacity: 0;
  pointer-events: none;
}

.wheel__coin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wheel__bonus-ribbon {
  padding-top: 32px;

}

.wheel__button-img {
  animation: pulse-cycle 2.2s infinite;
}

.wheel-modal.spin .wheel__button-img:not(.wheel__button-img_finish),
.private-access-wheel-modal.spin .wheel__button-img_finish,
.private-access-wheel-modal.spin .wheel__button-img:not(.wheel__button-img_finish) {
  animation: none;
}

/* Wheel button pulse + pause */
@keyframes pulse-cycle {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* Wheel button vertical shine */
.wheel__start-button::before,
.wheel__finish-button::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 14px;
  width: 24%;
  height: 76px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-6deg);
  z-index: 1;
  animation: shine-cycle 2.2s infinite;
}

.wheel-modal.spin .wheel__start-button::before,
.private-access-wheel-modal.spin .private-access-wheel-modal__start-button::before {
  display: none;
}

@keyframes shine-cycle {
  0%, 50% {
    left: 14px;
    opacity: 0;
  }
  55% {
    left: 14px;
    opacity: 1;
  }
  65% {
    left: 50%;
    opacity: 0;
  }
  100% {
    left: 14px;
    opacity: 0;
  }
}

.wheel-modal.spin-finished .wheel__start-button,
.private-access-wheel-modal.spin-finished .private-access-wheel-modal__start-button {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.wheel-modal.spin-finished .wheel__finish-button,
.private-access-wheel-modal.spin-finished .private-access-wheel-modal__finish-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.wheel-modal__start-header,
.wheel-modal__lucky-banner,
.private-access-wheel-modal__start-header,
.private-access-wheel-modal__lucky-banner,
.magic-chest-modal__start-header {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}

.wheel-modal__lucky-banner,
.private-access-wheel-modal__lucky-banner {
  opacity: 0;
}

.wheel-modal.spin-finished .wheel-modal__start-header,
.private-access-wheel-modal.spin-finished .private-access-wheel-modal__start-header {
  opacity: 0;
}

.wheel-modal.spin-finished .wheel-modal__lucky-banner,
.private-access-wheel-modal.spin-finished .private-access-wheel-modal__lucky-banner {
  opacity: 1;
}

.wheel-modal__lucky-banner {
  position: relative;
  width: 100%;
  padding: 20px 0;
  margin: 30px 0;
}

.wheel-modal__lucky-banner-title {
  padding-bottom: 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  background: linear-gradient(176deg, #FFD749 3.17%, #EEBA00 84.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wheel-modal__lucky-banner-subtitle {
  font-size: 14px;
  color: #fff;
  line-height: 140%;
}

.wheel-modal__lucky-banner-content {
  position: relative;
}

.wheel-modal__lucky-banner-content::before,
.wheel-modal__lucky-banner-content::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 276px;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 215, 120, 0) 0%, #FFE194 50%, rgba(255, 215, 120, 0) 100%);
  clip-path: polygon(0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%);
}


.wheel-modal__lucky-banner-content::before {
  top: -20px;
}

.wheel-modal__lucky-banner-content::after {
  bottom: -20px;
}

.wheel-modal__lucky-banner-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: radial-gradient(
          ellipse at center,
          rgba(255, 220, 140, 0.55) 0%,
          rgba(255, 241, 185, 0.45) 30%,
          rgba(255, 200, 90, 0.35) 55%,
          rgba(255, 180, 60, 0.15) 70%,
          rgba(255, 225, 148, 0.2) 85%,
          rgba(255, 180, 60, 0) 100%
  );
  filter: blur(14px);
  opacity: 0.82;
}

.wheel-modal__header {
  position: relative;
  min-height: 162px;
  display: flex;
  justify-content: center;
}

.wheel__cursor {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  transform: translate(-5px, -5px);
  animation: cursor-move 3s infinite linear;
  opacity: 1;
  transition: 0.2s opacity linear;
}

@keyframes cursor-move {
  0%   { transform: translate(-5px, -5px); }
  50%  { transform: translate(0, 0); }
  100% { transform: translate(-5px, -5px); }
}

/* Private-beta-access */
.private-beta-access {
  padding: 16px 12px 12px;
  margin: -4px 24px 0 24px;
  background: rgba(1, 135, 95, 0.1);
  border-radius: 0 0 6px 6px;
}

.private-beta-access__primary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.private-beta-access__title {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #000000CC;
  line-height: 1;
}

.private-beta-access__count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  color: #EF4107;
  line-height: 1;
}

.private-beta-access__total {
  color: #000000CC;
}

.private-beta-access__description {
  margin: 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
}

/* Define a custom CSS property '--animated-num' that can be animated as an integer */
@property --animated-num {
  syntax: "<integer>";
  initial-value: 4920;
  inherits: false;
}

.private-beta-access__number-animation {
  --animated-num: 4920;
  counter-reset: num var(--animated-num);
  animation: counter--4999 120s cubic-bezier(0.2, 0, 0.1, 1) forwards;
}

/* Use the ::after pseudo-element to display the current value of the counter */
.private-beta-access__number-animation::after {
  content: counter(num);
}

/* Keyframe animations to animate --num from 4920 up to the 4999*/
@keyframes counter--4999 {
  from {
    --animated-num: 4920;
  }
  to {
    --animated-num: 4999;
  }
}

/* Private access modal */
.private-access-wheel-modal {
  position: fixed;
  bottom: -10px;
  right: 0;
  left: 0;
  min-height: 482px;
  transform: translateY(300px);
  opacity: 0;
  animation: wheel-slide-up 1.8s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  animation-delay: 2s;
  padding-top: 24px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(230, 203, 165, 0.90) 100%);
  z-index: 4;
  text-align: center;
}

.private-access-wheel-modal .close-promo-modal-button {
  top: 16px;
}

@keyframes wheel-slide-up {
  0% {
    transform: translateY(300px);
    opacity: 0;
  }

  50% {
    transform: translateY(-10px); /* overshoot */
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.private-access-wheel-modal__backdrop {
  position: fixed;
  inset: 0;
  min-height: 482px;
  background: #000000B2;
  z-index: 4;
  opacity: 0;
  animation: backdrop-fade-in 1.8s ease forwards;
  animation-delay: 2s;
}

@keyframes backdrop-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.private-access-wheel-modal__header {
  position: relative;
  min-height: 98px;
  display: flex;
  justify-content: center;
}

.private-access-wheel-modal__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.54px;
  color: #333;
}

.private-access-wheel-modal__description {
  color: #666;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.42px;
  max-width: 334px;
  margin-top: 16px;
}

.private-access-wheel-modal__lucky-banner {
  position: relative;
  width: 100%;
}

.private-access-wheel-modal__lucky-banner-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.private-access-wheel-modal__lucky-banner-subtitle {
  color: #2A2A2A;
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
}

.private-access-wheel-modal .wheel__button-img {
  animation: slow-cycle-pulse 3.4s ease-in-out 4s infinite;  /* 4s after the modal appearance animation */
}

.private-access-wheel-modal .wheel__rotating {
  transform-origin: 50% 50%;
  transform: rotate(14deg);
  animation: sway-wheel 3.4s ease-in-out 4s infinite;  /* 4s after the modal appearance animation */
}

@keyframes slow-cycle-pulse {
  0% { transform: scale(1); }            /* start */
  40% { transform: scale(1.15); }        /* smoothly scale up to the peak */
  55% { transform: scale(1.15); }        /* pause at the peak */
  65% { transform: scale(1); }           /* quickly return to start */
  100% { transform: scale(1); }          /* pause at the start */
}

/* Keyframes for the wheel */
@keyframes sway-wheel {
  0% { transform: rotate(14deg); }       /* start rotation */
  40% { transform: rotate(0deg); }       /* rotate smoothly to left */
  55% { transform: rotate(0deg); }       /* pause at the left position */
  65% { transform: rotate(14deg); }      /* quickly rotate back to start */
  100% { transform: rotate(14deg); }     /* pause at the start */
}

@keyframes private-access-wheel-spin-bounce {
  0% {
    transform: rotate(0deg);
  }

  85% {
    transform: rotate(1012deg);
  }

  100% {
    transform: rotate(1008deg);
  }
}

.private-access-wheel-modal.spin .wheel__rotating {
  animation: private-access-wheel-spin-bounce 5s forwards;
}

:root[data-template='google-private-access'] .btn-box .btn img {
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.magic-chest-modal__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  background: linear-gradient(180deg, #FFF9C4 19.11%, #DC911D 71.43%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.magic-chest-modal__header {
  min-height: 180px;
  display: flex;
  justify-content: center;
  position: relative;
}

.magic-chest-modal__description {
  position: absolute;
  max-width: 316px;
  margin: 0 auto;
  top: 18px;
  font-size: 14px;
  color: #8C8D8F;
  transition: opacity 0.5s ease-in-out;
}

.magic-chest-modal__start-button,
.magic-chest-modal__finish-button {
  width: 264px;
  top: 0;
  padding: 8px 16px;
  color: #673C00;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  border-radius: 8px;
  border: 1px solid #FFF9C4;
  background: radial-gradient(77.03% 165% at 49.44% -65%, #FFF9C4 0%, #DC911D 100%);
}

.magic-chest-modal__start-button {
  z-index: 1;
}

.magic-chest-modal__chest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
}

.magic-chest-modal__chest-img {
  display: block;
  animation: chest-bounce 1.6s infinite alternate linear;
  transform-origin: center bottom;
}

.magic-chest-modal__glow-img {
  display: block;
  position: absolute;
  top: -62px;
  animation: chest-glow-bounce 1.6s infinite alternate linear;
}

@keyframes chest-bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes chest-glow-bounce {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.magic-chest-modal__loader {
  width: 248px;
  height: 8px;
  position: relative;
}

.magic-chest-modal__loader-track {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.magic-chest-modal__loader-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #4B3825, #FBD100);
  border-radius: 4px;
  position: relative;
}

.magic-chest-modal__loader-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #FFDC95 0%, rgba(255,220,149,0) 100%);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  box-shadow: 0 0 6px rgba(255,220,149,0.5);
}

@keyframes chest-fill-loader {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.magic-chest-modal__footer {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 214px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.magic-chest-modal__start-button,
.magic-chest-modal__finish-button,
.magic-chest-modal__loader {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}

.magic-chest-modal__loader {
  opacity: 0;
  top: 8px
}

.magic-chest-modal.processing .magic-chest-modal__start-button {
  opacity: 0;
}

.magic-chest-modal.processing .magic-chest-modal__loader {
  opacity: 1;
}

.magic-chest-modal.processing .magic-chest-modal__loader-fill {
  animation: chest-fill-loader 2s linear 0.5s forwards;
}

.magic-chest-modal__description_processing {
  opacity: 0;
}

.magic-chest-modal.processing .magic-chest-modal__description_processing {
  opacity: 1;
}

.magic-chest-modal.processing .magic-chest-modal__description_initial {
  opacity: 0;
}

.magic-chest-modal__description_process-finished {
  opacity: 0;
  top: 44px;
}

.magic-chest-modal.process-finished .magic-chest-modal__description_processing {
  opacity: 0;
}

.magic-chest-modal.process-finished .magic-chest-modal__description_process-finished {
  opacity: 1;
}

.magic-chest-modal__subtitle {
  position: absolute;
  top: 14px;
  opacity: 0;
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  transition: opacity 0.5s ease-in-out;
}

.magic-chest-modal.process-finished .magic-chest-modal__subtitle {
  opacity: 1;
}

.magic-chest-modal__finish-button {
  opacity: 0;
}

.magic-chest-modal.process-finished .magic-chest-modal__finish-button {
  opacity: 1;
}

.magic-chest-modal.process-finished .magic-chest-modal__start-button {
  opacity: 0;
  z-index: 0;
}

.magic-chest-modal.process-finished .magic-chest-modal__loader {
  opacity: 0;
}

.magic-chest-modal__chest-img,
.magic-chest-modal__chest-opened-img {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}

.magic-chest-modal__chest-opened-img {
  top: -82px;
  opacity: 0;
}

.magic-chest-modal.process-finished .magic-chest-modal__chest-img {
  opacity: 0;
}

.magic-chest-modal.process-finished .magic-chest-modal__chest-opened-img {
  opacity: 1;
}

.magic-chest-modal.process-finished .magic-chest-modal__glow-img {
  opacity: 0;
}

.magic-chest-modal__glow-opened-img {
  display: block;
  position: absolute;
  top: -238px;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.5s ease-in-out;
}

.magic-chest-modal.process-finished .magic-chest-modal__glow-opened-img {
  opacity: 1;
  animation: rotate-clockwise-glow-opened 8s linear infinite;
}

@keyframes rotate-clockwise-glow-opened {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Win rate default modal */
.win-rate-default-modal__title {
  color: #FFF;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.72px;
}

.win-rate-default-modal__subtitle {
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.54px;
  padding: 16px 0;
}

.win-rate-default-modal__list {
  margin: 0;
  padding: 0;
  color: #8C8D8F;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.42px;
}

.win-rate-default-modal__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 354px;
  margin: 12px auto 0;
  padding: 12px;
}

.win-rate-default-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #008B2E;
  background: #17191A;
  padding: 4px;
}

.win-rate-default-card::before,
.win-rate-default-card::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: #008B2E;
}

.win-rate-default-card::before {
  width: 13px;
  border-radius: 0 0 2px 2px;
  top: 0;
}

.win-rate-default-card::after {
  bottom: 0;
  width: 80px;
  border-radius: 8px 8px 0 0;
}

.win-rate-default-card__game-img {
  width: 100%;
  border-radius: 8px;
}

.win-rate-default-card__play {
  position: absolute;
  top: 0;
  right: 14px;
}

.win-rate-default-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 68px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.01%, #000 73.36%);
}

.win-rate-default-card__body {
  padding: 0 12px 12px;
  margin-top: -20px;
}

.win-rate-default-card__label {
  font-size: 14px;
  color: #FFFFFFA6;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 2px;
  position: relative;
}

.win-rate-default-card__progress {
  position: relative;
  height: 6px;
  padding: 4px;
  border-radius: 8px;
  background: #2E2E2E;
}

.win-rate-default-card__progress-bar {
  height: 100%;
  border-radius: 8px;
  background: #5AF53E;
}

.win-rate-default-card__progress.red .win-rate-default-card__progress-bar {
  background: #FF1F1F;
}

.win-rate-default-card__progress-value {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 14px;
  font-weight: 700;
  color: #5AF53E;
  line-height: 1.4;
}

.win-rate-default-card__progress.red .win-rate-default-card__progress-value {
  color: #FF1F1F;
}

/* Win rate animation modal */
.win-rate-animation-modal__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #5FFF00;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.win-rate-animation-modal__title-line {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, rgba(95, 255, 0, 0.00) 0%, #5FFF00 100%);
}

.win-rate-animation-modal__title-line_right {
  background: linear-gradient(90deg, #5FFF00 0%, rgba(95, 255, 0, 0.00) 100%);
}

.win-rate-animation-modal__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.win-rate-animation-modal__subtitle:before {
  content: '';
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url('../imgs/slots/win-rate.svg');
  background-size: 100% 100%;
}

.win-rate-animation-modal__description  {
  max-width: 302px;
  margin: 0 auto;
  font-size: 14px;
  color: #8C8D8F;
}

.win-rate-animation-modal__description span,
.win-rate-animation-modal__install-info span {
  color: #5FFF00;
}

.win-rate-animation-modal__install-info {
  margin-top: 24px;
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.54px;
}

.win-rate-animation-modal__install-info:after {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 32px;
  height: 39px;
  margin-left: 8px;
  background-image: url('../imgs/slots/install.svg');
  background-size: 100% 100%;
}

.win-rate-animation-modal__cards,
.win-rate-ai-animation-modal__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 502px;
  margin: 12px auto 0;
  padding: 12px;
}

.win-rate-ai-animation-modal__cards {
  margin: 0;
  padding: 0 12px;
}

.win-rate-animation-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 139, 46, 0.25);
  background: #031310;
}

.win-rate-animation-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid transparent;
}

.win-rate-animation-card__image {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  opacity: 1;
  transition: 0.25s opacity ease-in-out;
}

.win-rate-animation-card:nth-child(1) .win-rate-animation-card__image {
  background: url("../imgs/slots/zeus.webp") center/cover;
}

.win-rate-animation-card:nth-child(2) .win-rate-animation-card__image {
  background: url("../imgs/slots/robinson.webp") center/cover;
}

.win-rate-animation-card:nth-child(3) .win-rate-animation-card__image {
  background: url("../imgs/slots/emperors-tomb.webp") center/cover;
}

.win-rate-animation-card:nth-child(4) .win-rate-animation-card__image {
  background: url("../imgs/slots/basketball.webp") center/cover;
}

.win-rate-animation-card:nth-child(5) .win-rate-animation-card__image {
  background: url("../imgs/slots/baccarat.webp") center/cover;
}

.win-rate-animation-card:nth-child(6) .win-rate-animation-card__image {
  background: url("../imgs/slots/aztec.webp") center/cover;
}

.win-rate-animation-card:nth-child(7) .win-rate-animation-card__image {
  background: url("../imgs/slots/thimbles.webp") center/cover;
}

.win-rate-animation-card:nth-child(8) .win-rate-animation-card__image {
  background: url("../imgs/slots/monster-lab.webp") center/cover;
}

.win-rate-animation-card:nth-child(9) .win-rate-animation-card__image {
  background: url("../imgs/slots/reign-of-dragons.webp") center/cover;
}

.win-rate-animation-card:nth-child(10) .win-rate-animation-card__image {
  background: url("../imgs/slots/sinbad.webp") center/cover;
}

.win-rate-animation-card:nth-child(11) .win-rate-animation-card__image {
  background: url("../imgs/slots/totem-island.webp") center/cover;
}

.win-rate-animation-card:nth-child(12) .win-rate-animation-card__image {
  background: url("../imgs/slots/e-t-races.webp") center/cover;
}

.win-rate-animation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid #5FFF00;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 18px 18px;
  mask-position: left top, right top, left bottom, right bottom;
  mask-repeat: no-repeat;
}

.win-rate-animation-card img {
  width: 100%;
  border-radius: 8px;
}

.win-rate-animation-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 46px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 24.01%, #000 73.36%);
}

.win-rate-animation-card__body {
  padding: 8px 12px 16px;
  background: #031310;
}

.win-rate-animation-card__progress {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: #1A3916;
}

.win-rate-animation-card__progress-bar {
  height: 100%;
  border-radius: 8px 0 0 8px;
  border-right: 1px solid #5FFF00;
  background:
          repeating-linear-gradient(135deg, rgba(95, 255, 0, 0.2), rgba(95, 255, 0, 0.2) 1px, rgba(95, 255, 0, 0) 2px, rgba(95, 255, 0, 0) 4px),
          linear-gradient(180deg, rgba(0, 255, 166, 0.80) -5.93%, rgba(0, 255, 166, 0.05) 79.65%, rgba(0, 255, 166, 0.00) 96.05%) no-repeat;
}

.win-rate-animation-card__progress.red {
  background: #391616;
}

.win-rate-animation-card__progress.red .win-rate-animation-card__progress-bar {
  background:
          repeating-linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 4px),
          linear-gradient(180deg, rgba(255, 0, 0, 0.80) -5.93%, rgba(255, 0, 0, 0.05) 79.65%, rgba(255, 0, 0, 0.00) 96.05%) no-repeat;
  border-right: 1px solid #FF0000;
}

.win-rate-animation-card__progress-value {
  position: absolute;
  right: 0;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg) scale(1);
  font-size: 14px;
  font-weight: 700;
  color: #5FFF00;
  line-height: 1.4;
  animation: win-rate-animation-card-number-bounce 3s ease-in-out infinite;
  transform-origin: center bottom;
}

.win-rate-animation-card__progress.red .win-rate-animation-card__progress-value {
  color: #FF0000;
}

.win-rate-animation-card__progress.yellow {
  background: #363916;
}

.win-rate-animation-card__progress.yellow .win-rate-animation-card__progress-bar {
  background:
          repeating-linear-gradient(135deg, rgba(246, 210, 65, 0.2), rgba(246, 210, 65, 0.2) 1px, rgba(246, 210, 65, 0) 2px, rgba(246, 210, 65, 0) 4px),
          linear-gradient(180deg, rgba(246, 210, 65, 0.80) -5.93%, rgba(246, 210, 65, 0.05) 79.65%, rgba(246, 210, 65, 0.00) 96.05%) no-repeat;
  border-right: 1px solid #F6D241;
}

.win-rate-animation-card__progress.yellow .win-rate-animation-card__progress-value {
  color: #F6D241;
}

@keyframes win-rate-animation-card-number-bounce {
  0% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  20% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  35% {
    transform: translateX(-50%) scale(1.2) rotate(3deg);
  }
  40% {
    transform: translateX(-50%) scale(1.24) rotate(4deg);
  }
  60% {
    transform: translateX(-50%) scale(1.2) rotate(3deg);
  }
  75% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  80% {
    transform: translateX(-50%) scale(1.02) rotate(-1deg);
  }
  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

/* Win rate ai animation modal */
.win-rate-ai-animation-modal__header {
  width: 100%;
  height: 214px;
  position: relative;
  background-image: url('../imgs/slots/ai-prediction-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -10px;
}

.win-rate-ai-animation-modal__container {
  max-width: 502px;
  margin: 0 auto;
  padding-bottom: 12px;
}

.win-rate-ai-animation-modal__logo {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 100%;
}

.win-rate-ai-animation-modal__info-img {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 100%;
}

@property --percent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@property --temp {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@property --v1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --v2 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes shine {
  0%,
  35% {
    opacity: 1;
  }
  60% {
    opacity: 0.2;
  }
  80%,
  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rotateReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes imageBorderAnimation {
  0%, 30%  { border: 1px solid transparent; }
  35%, 55% { border: 1px solid #00fb38; }
  60%, 100% { border: 1px solid transparent; }
}

@keyframes imageCardScanAnimation {
  0%, 30%   { opacity: 0; transform: translateY(-105%); }
  35%       { opacity: 1; transform: translateY(-100%); }
  55%       { opacity: 1; transform: translateY(100%);  }
  60%, 100% { opacity: 0; transform: translateY(105%);  }
}

@keyframes starScale {
  0%, 44%   { transform: scale(0.2); opacity: 0; }
  50%       { opacity: 1; }
  65%, 80%  { opacity: 1; transform: scale(1) rotate(-60deg); }
  90%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
}

@keyframes imageScale {
  30%  { transform: scale(1) rotate(0deg); }
  36%  { transform: scale(1.19) rotate(5deg); }
  41%  { transform: scale(1.14) rotate(5deg); }
  46%  { transform: scale(1.195) rotate(5deg); }
  50%, 80% { transform: scale(1.19) rotate(5deg); }
  86%  { transform: scale(1) rotate(0deg); }
  91%  { transform: scale(1.05) rotate(0deg); }
  96%  { transform: scale(0.99) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes winrateScale {
  27% { transform: translateY(-50%) scale(1) rotate(0deg); }
  33% { transform: translateY(-50%) scale(1.15) rotate(5deg); }
  38% { transform: translateY(-50%) scale(1.12) rotate(5deg); }
  42%, 77% { transform: translateY(-50%) scale(1.15) rotate(5deg); }
  83% { transform: translateY(-50%) scale(1) rotate(0deg); }
  88% { transform: translateY(-50%) scale(1.05) rotate(0deg); }
  92%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}

@keyframes winrateStarRotate {
  15% { transform: rotate(20deg); opacity: 0; }
  25% { opacity: 1; }
  35%, 45% { opacity: 1; transform: rotate(70deg); }
  60% { opacity: 0; }
  100% { opacity: 0; transform: rotate(5deg); }
}

@keyframes progressBounceWidth {
  0%,
  20% {
    width: var(--winrate-width);
  }

  50% {
    width: calc(var(--winrate-width) * var(--bounce-multiplier));
  }
  70% {
    width: var(--winrate-width);
  }

  100% {
    width: var(--winrate-width);
  }
}

.win-rate-ai-animation-modal__card-wrapper {
  position: relative;
  max-width: 158px;
}

.top-icon {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 8;
  transition: 0.5s opacity ease-in-out;
}

.top-icon-right {
  left: auto;
  top: -10px;
  right: -20px;
  width: 43px;
  height: 43px;
  opacity: 0;
}

.top-icon-bottom {
  opacity: 0;
  top: auto;
  bottom: -24px;
  left: -18px;
  width: 43px;
  height: 49px;
}

.win-rate-ai-animation-modal__card-top-wrapper-bg {
  position: absolute;
  overflow: hidden;
  top: -6px;
  left: -8px;
  right: -8px;
  bottom: -6px;
  border-radius: 8px;
  padding: 1.75px;
}

.win-rate-ai-animation-modal__card-top-wrapper-bg::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -45px;
  right: -45px;
  bottom: -50px;
  border-radius: 8px;
  z-index: 2;
  background: conic-gradient(from 270deg at 50% 50%, #00fb38 0deg, rgba(0, 251, 56, 0) 360deg);
  opacity: 0;
  transition: 0.25s opacity ease-in-out;
}

.win-rate-ai-animation-modal__card-top-bg-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.win-rate-ai-animation-modal__card-top-bg-container::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -80px;
  right: -80px;
  bottom: -40px;
  border-radius: 8px;
  z-index: 4;
  background: url("../imgs/slots/ai-prediction-circle.webp") 50% 50% / cover no-repeat, #041719;
  opacity: 0;
  transition: 0.5s opacity ease-in-out;
}

.win-rate-ai-animation-modal__card-top-bg-container::after {
  content: "";
  position: absolute;
  top: -66px;
  left: -53px;
  right: -53px;
  bottom: -66px;
  border-radius: 8px;
  z-index: 12;
  opacity: 0;
  transition: 0.5s opacity ease-in-out;
}

.win-rate-ai-animation-modal__card-wrapper.max-winrate .win-rate-ai-animation-modal__card-top-bg-container::before {
  opacity: 1;
  animation: rotate 14s linear infinite;
}

.win-rate-ai-animation-modal__card-wrapper.max-winrate .win-rate-ai-animation-modal__card-top-bg-container::after {
  opacity: 1;
  animation: shine 5s linear infinite;
}

.win-rate-ai-animation-modal__card-wrapper.max-winrate .win-rate-ai-animation-modal__card-top-wrapper-bg::before {
  opacity: 1;
  animation: rotateReverse 7.5s linear infinite;
}

.win-rate-ai-animation-modal__card-wrapper.max-winrate .top-icon-right,
.win-rate-ai-animation-modal__card-wrapper.max-winrate .top-icon-bottom {
  opacity: 1;
  animation: starScale 11s linear infinite;
}

.win-rate-ai-animation-modal__card {
  position: relative;
  z-index: 7;
  border-radius: 8px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(14, 181, 54, 0.25);
  transition: 0.25s border-color ease-in-out;
  background: radial-gradient(50% 33.82% at 50% 100%, rgba(0, 251, 56, 0.3) 0%, rgba(0, 251, 56, 0) 100%), #041719;
  opacity: 1;
}

.win-rate-ai-animation-modal__card::before,
.win-rate-ai-animation-modal__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 0;
}

.win-rate-ai-animation-modal__card::before {
  background: radial-gradient(50% 33.82% at 50% 100%, rgba(229, 69, 35, 0.3) 0%, rgba(229, 69, 35, 0) 100%), #041719;
}

.win-rate-ai-animation-modal__card::after {
  background: radial-gradient(50% 33.82% at 50% 100%, rgba(229, 197, 35, 0.3) 0%, rgba(229, 197, 35, 0) 100%), #041719;
}

.win-rate-ai-animation-modal__card.low {
  border: 1px solid rgba(255, 128, 73, 0.25);
}

.win-rate-ai-animation-modal__card.low::before {
  opacity: 1;
}

.win-rate-ai-animation-modal__card.medium {
  border: 1px solid rgba(181, 153, 14, 0.25);
}

.win-rate-ai-animation-modal__card.medium::after {
  opacity: 1;
}

.win-rate-ai-animation-modal__card-top-wrapper::before {
  content: "TOP1";
  position: absolute;
  top: -5px;
  left: -3px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(4, 23, 25, 0.9);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  z-index: 22;
  opacity: 0;
  transition: 0.1s opacity ease-in-out;
}

.win-rate-ai-animation-modal__card.top .win-rate-ai-animation-modal__card-top-wrapper::before {
  opacity: 1;
}

.win-rate-ai-animation-modal__card-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  border: 1px solid transparent;
}

.win-rate-ai-animation-modal__card-image {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  opacity: 1;
  transition: 0.25s opacity ease-in-out;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(1) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/zeus.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(2) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/robinson.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(2) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "44.0%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(3) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/emperors-tomb.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(3) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "15.5%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(4) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/basketball.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(4) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "48.5%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(5) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/baccarat.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(5) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "13.8%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(6) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/aztec.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(6) .win-rate-ai-animation-modal__card-top-wrapper::before,
.win-rate-ai-animation-modal__card-wrapper:nth-child(7) .win-rate-ai-animation-modal__card-top-wrapper::before {
  content: "TOP2";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(6) .win-rate-ai-animation-modal__card-winrate-inner::before,
.win-rate-ai-animation-modal__card-wrapper:nth-child(7) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "100.0%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(7) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/thimbles.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(8) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/monster-lab.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(8) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "48.5%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(9) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/reign-of-dragons.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(9) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "13.8%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(10) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/sinbad.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(10) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "18.37%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(11) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/totem-island.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(11) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "38.56%";
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(12) .win-rate-ai-animation-modal__card-image {
  background: url("../imgs/slots/e-t-races.webp") center/cover;
}

.win-rate-ai-animation-modal__card-wrapper:nth-child(12) .win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "47.54%";
}

.win-rate-ai-animation-modal__card.low .win-rate-ai-animation-modal__card-image {
  opacity: 0.25;
}

.win-rate-ai-animation-modal__card.medium .win-rate-ai-animation-modal__card-image {
  opacity: 0.5;
}

.scan-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,251,56,0.4), transparent);
  transform: translateY(-105%);
  z-index: 5;
  opacity: 0;
  animation: imageCardScanAnimation 16s ease-out infinite;
}

.scan-animate::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1.3px;
  bottom: 0;
  left: 0;
  background: #00fb38;
  box-shadow: 0 0 10px #00fb38;
}

.win-rate-ai-animation-modal__card-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 2;
}

.win-rate-ai-animation-modal__card-winrate {
  position: absolute;
  z-index: 7;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(0, 251, 56, 0.8);
  background: radial-gradient(44.02% 97.73% at 49.14% 100%, rgba(32, 188, 67, 0.4) 3.31%, rgba(32, 188, 67, 0.1) 100%), #0c130d;
  color: #00fb38;
  font-size: 14px;
  transform: translateY(-50%);
  transition: 0.25s border ease-in-out, 0.25s color ease-in-out;
}

.win-rate-ai-animation-modal__card-wrapper.max-winrate .win-rate-ai-animation-modal__card.animation .win-rate-ai-animation-modal__card-winrate {
  animation: winrateScale 8s linear infinite;
}

.win-rate-ai-animation-modal__card-winrate::before,
.win-rate-ai-animation-modal__card-winrate::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 0;
}

.win-rate-ai-animation-modal__card-winrate::before {
  background: radial-gradient(44.02% 97.73% at 49.14% 100%, rgba(185, 81, 28, 0.4) 3.31%, rgba(146, 77, 43, 0.1) 100%), #090503;
}

.win-rate-ai-animation-modal__card-winrate::after {
  background: radial-gradient(44.02% 97.73% at 49.14% 100%, rgba(188, 162, 32, 0.4) 3.31%, rgba(188, 162, 32, 0.1) 100%), #151006;
}

.win-rate-ai-animation-modal__card.low .win-rate-ai-animation-modal__card-winrate {
  border: 1px solid rgba(251, 84, 0, 0.8);
  color: #ff461d;
}

.win-rate-ai-animation-modal__card.low .win-rate-ai-animation-modal__card-winrate::before {
  opacity: 1;
}

.card.medium .winrate {
  border: 1px solid rgba(251, 209, 0, 0.8);
  color: #f6d241;
}

.win-rate-ai-animation-modal__card.medium .win-rate-ai-animation-modal__card-winrate::after {
  opacity: 1;
}

.win-rate-ai-animation-modal__card-winrate-inner {
  position: relative;
  z-index: 2;
}

.win-rate-ai-animation-modal__card-winrate-inner::before {
  content: "100.0%";
  font-weight: 700;
}

.win-rate-ai-animation-modal__card-star-icon-winrate {
  position: absolute;
  z-index: 25;
  top: -36px;
  left: 10px;
  opacity: 0;
  transform: rotate(5deg);
  animation: winrateStarRotate 9s linear 1s infinite;
  width: 61px;
  height: 61px;
}

.win-rate-ai-animation-modal__card-progress-box {
  width: 100%;
  padding: 20px 8px 8px;
}

.win-rate-ai-animation-modal__card-progress-wrapper {
  height: 8px;
  margin: 0 8px;
  border-radius: 4px;
  background: #000;
  display: flex;
  justify-content: start;
}

.win-rate-ai-animation-modal__card-progress {
  --bounce-multiplier: 1.1;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8px;
  min-width: 8px;
  border-radius: 4px;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 0 12px #00fb3855;
  width: var(--winrate-width);
  background: linear-gradient(90deg, #00fb38, #32ff6a);
  animation: progressBounceWidth 6s ease-in-out infinite;
}

.win-rate-ai-animation-modal__card-progress::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  right: -3px;
  top: -2px;
  background: radial-gradient(50% 50% at 50% 50%, #a1ffb6 0%, rgba(161, 255, 182, 0) 100%);
}

.win-rate-ai-animation-modal__card.low .win-rate-ai-animation-modal__card-progress {
  background: linear-gradient(90deg, #ff461d, #ff7676);
  box-shadow: var(0 0 12px #ff461d55);
}

.win-rate-ai-animation-modal__card.low .win-rate-ai-animation-modal__card-progress::after {
  background: radial-gradient(50% 50% at 50% 50%, #ff7676 0%, rgba(255, 118, 118, 0) 100%);
}

.win-rate-ai-animation-modal__card.medium .win-rate-ai-animation-modal__card-progress {
  background: linear-gradient(90deg, #f6d241, #ffdc95);
  box-shadow: 0 0 12px #f6d24155;
}

.win-rate-ai-animation-modal__card.medium .win-rate-ai-animation-modal__card-progress::after {
  background: radial-gradient(50% 50% at 50% 50%, #ffdc95 0%, rgba(255, 220, 149, 0) 100%);
}

.win-rate-ai-animation-modal__card-progress.reverse {
  --bounce-multiplier: 0.8;
}

.with-border .win-rate-ai-animation-modal__card-image-wrapper {
  animation: imageBorderAnimation 16s ease-out infinite;
}

.with-scan .scan-animate {
  animation: imageCardScanAnimation 16s ease-out infinite;
}

.with-image-scale .win-rate-ai-animation-modal__card-image {
  animation: imageScale 8s linear infinite;
}

.with-winrate-star .win-rate-ai-animation-modal__card-star-icon-winrate {
  opacity: 1;
}

.close-promo-modal-button {
  position: fixed;
  top: 320px;
  right: 16px;
  width: 24px;
  height: 24px;
  background-image: url('../imgs/close.svg');
  background-size: 100% 100%;
  z-index: 8;
}

body.promo-modal-closed #promo-modal {
  opacity: 0;
  z-index: -1;
}

body.promo-modal-closed .private-access-wheel-modal__backdrop {
  opacity: 0;
  z-index: -1;
}

.win-rate-install-card-modal {
  display: none;
  position: fixed;
  width: 100%;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.80);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  height: 64px;
  box-sizing: border-box;
  max-width: 502px;
  color: #fff;
}

.win-rate-install-card-modal__content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.win-rate-install-card-modal__img {
  width: 61px;
  height: 63px;
  border-radius: 8px;
}

.win-rate-install-card-modal__loader {
  margin-left: auto;
  margin-right: 12px;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  animation: spinner 1.5s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body[data-type='INSTALLING'] #win-rate-install-card-modal {
  display: block;
}

.wheel-modal__install-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  animation: spinner-wheel-install-loader 1.5s linear infinite;
  z-index: 0;
  background: #2A2A2A;
  border-radius: 50%;
  opacity: 0;
  padding: 10px;
  transition: 0.2s opacity linear;
}

.wheel-neon-modal .wheel-modal__install-loader {
  background: radial-gradient(50% 50% at 50% 50%, #EE0906 0%, #9C130D 100%);
}

.wheel-red-modal .wheel-modal__install-loader {
  background: #5D0702;
}

@keyframes spinner-wheel-install-loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

body[data-type='INSTALLING'] .wheel-modal__install-loader {
  opacity: 1;
  z-index: 2;
}

body[data-type='INSTALLING'] .wheel__cursor {
  opacity: 0;
}

body[data-type='INSTALLING'] .magic-chest-modal.process-finished .magic-chest-modal__finish-button {
  opacity: 0.24;
}

/* ============================================================
   Screenshot viewer — fullscreen gallery overlay on /download
   (all play-market templates). The DOM is built lazily by
   /js/screenshot-viewer.js on the first tap of a .banner-imgs
   thumbnail. z-index 2000: above every page UI layer (max 1000)
   and the install modals, below the browser-support blocker
   (2147483647), which must stay on top on unsupported browsers.
   ============================================================ */

.banner-imgs li img {
  cursor: pointer;
}

.screenshot-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  overflow: hidden; /* clip off-screen slides: bounds the painted layer */
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
  /* Gesture root: the browser must never start a native pan, a
     pull-to-refresh or a scroll chain from inside the overlay. */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.screenshot-viewer.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 150ms ease;
}

.screenshot-viewer-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  /* Fully opaque (Play parity): the page must not shimmer through.
     Keep in sync with BACKDROP_OPACITY in screenshot-viewer.js. */
  opacity: 1;
}

.screenshot-viewer-backdrop.is-animating {
  transition: opacity 260ms ease;
}

.screenshot-viewer-track {
  position: relative;
  display: flex;
  /* Play-style breathing room between slides, visible only mid-swipe.
     Keep in sync with SLIDE_GAP_PX in screenshot-viewer.js. */
  gap: 16px;
  width: 100%;
  height: 100%;
}

.screenshot-viewer-track.is-animating {
  /* keep the duration in sync with ANIM_MS in screenshot-viewer.js */
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.screenshot-viewer-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clip the zoomed img to its own slide. The slide box equals the
     viewport for the current slide (same clip as the root), and an
     outgoing zoomed image must not paint over the incoming slide
     during desktop arrow/button navigation. */
  overflow: hidden;
}

.screenshot-viewer-slide img {
  /* Fill the slide and contain-fit the picture inside: small screenshots
     UPSCALE to the viewport like in the Play viewer (natural-size caps
     would leave them floating with margins). The visible rect is derived
     from naturalWidth/Height in screenshot-viewer.js (fittedSize). */
  width: 100%;
  height: 100%;
  object-fit: contain; /* aspect preserved, letterboxed */
  pointer-events: none; /* taps resolve on the slide; the root owns all gestures */
  -webkit-user-drag: none;
}

.screenshot-viewer-slide img.is-zooming {
  /* Programmatic zoom jumps only (double-tap, release settle) — live
     pinch/pan writes transforms without this class. Keep the duration
     in sync with ANIM_MS in screenshot-viewer.js. */
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.screenshot-viewer-close,
.screenshot-viewer-prev,
.screenshot-viewer-next {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 33, 36, 0.6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.screenshot-viewer-prev:not([disabled]):hover,
.screenshot-viewer-next:not([disabled]):hover {
  background: rgba(32, 33, 36, 0.85);
}

.screenshot-viewer-close {
  top: 12px;
  left: 12px;
  /* Play-style bare back arrow: no chip — contrast over full-bleed
     screenshots comes from the shadow. */
  background: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.screenshot-viewer-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.screenshot-viewer-prev,
.screenshot-viewer-next {
  display: none; /* touch devices: swipe is the navigation */
  top: 50%;
  margin-top: -24px;
}

.screenshot-viewer-prev {
  left: 16px;
}

.screenshot-viewer-next {
  right: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .screenshot-viewer-prev,
  .screenshot-viewer-next {
    display: flex; /* desktop (mouse) only */
  }
}

.screenshot-viewer-prev[disabled],
.screenshot-viewer-next[disabled] {
  opacity: 0.3;
  cursor: default;
}

.screenshot-viewer.is-single .screenshot-viewer-prev,
.screenshot-viewer.is-single .screenshot-viewer-next {
  display: none;
}

/* Reviews and comments (docs/app-reviews-spec.md §4).
   Every size and colour below was measured on play.google.com at 375px, so
   change them against that page rather than by eye. */

/* The "verified" caption Play prints between the <h2> and the score. Play's
   device tabs next to it are not rendered — see docs/app-reviews-spec.md D14.
   The negative top margin pulls it under the heading, whose own 20px bottom
   margin was sized for the score block following it directly. */
.rating-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -12px 0 16px;
  font-size: 12px;
  color: #5F6368;
}

.rating-note svg {
  flex: none;
  fill: #5F6368;
}

/* Cards */
.reviews {
  /* .rating already contributes 16px of padding-bottom; +8 matches the ~24px
     Play leaves between the histogram and the first card. */
  margin: 8px 24px 0;
}

/* Hidden, not display:none — a display:none control is skipped by some
   browsers when its <label> is activated. */
.reviews-toggle {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Measured: 44px between one card's last line and the next card's avatar. */
.review + .review {
  margin-top: 44px;
}

/* Collapsed to the first three cards, which is what Play shows. */
.reviews-toggle:not(:checked) ~ .reviews-list .review:nth-child(n + 4) {
  display: none;
}

.review-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.review-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* No default-avatar asset ships: /imgs/* is served immutable for a year and
   could never be replaced in place, and /imgs/avatar.png is already the fake
   Google account bubble in the page header. */
.review-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DBDBDB;
  color: #202124;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.review-author {
  font-size: 14px;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Measured: 24px below the author row, 8px above the body. The row is 20px
   tall and the star box matches it, so both edges line up with Play's. */
.review-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  margin: 24px 0 8px;
}

.review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}

/* Integer ratings only, so solid fills — no <linearGradient> and therefore no
   duplicate "grad0..grad4" ids fighting the aggregate block above. */
.review-star {
  fill: #01875F;
}

.review-star.is-off {
  fill: #DBDBDB;
}

.review-date {
  font-size: 12px;
  color: #5F6368;
}

/* Never clamped: Play renders review bodies in full. */
.review-body {
  font-size: 14px;
  line-height: 20px;
  color: #5F6368;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.review-helpful {
  margin-top: 16px;
  font-size: 12px;
  color: #5F6368;
}

.review-vote {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  color: #5F6368;
}

/* 12px of its own on top of the row's 12px gap: Play leaves 24px between the
   question and the first pill, and 12px between the pills. The 24px
   line-height makes the text box fill the row, so its top edge lines up with
   the pills' — a shorter line-height centres it 2px lower than Play's. */
.review-vote-q {
  margin-right: 12px;
  line-height: 24px;
}

.review-vote-btn {
  box-sizing: border-box;
  height: 24px;
  padding: 0 16px;
  border: 1px solid #DADCE0;
  border-radius: 9999px;
  background: #FFFFFF;
  line-height: 22px;
}

/* Measured: inset 24px on BOTH sides of the card, not just the left. */
.review-reply {
  margin: 24px 24px 0;
  padding: 12px 16px 16px;
  background: #F8F9FA;
}

/* Play puts the developer name and the reply date on one line, the date
   pushed to the right edge and sitting on the same baseline. */
.review-reply-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.review-reply-name {
  font-size: 14px;
  color: #202124;
}

.review-reply-date {
  flex: none;
  font-size: 12px;
  color: #5F6368;
}

.review-reply-body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: #5F6368;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.reviews-all {
  display: block;
  height: 40px;
  padding: 0 8px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  color: #01875F;
}

.reviews-toggle:checked ~ .reviews-all {
  display: none;
}

/* No scrollbars anywhere on this page.
   The page impersonates a Play listing on Android Chrome, where the browser
   draws an overlay bar that fades on its own — so a real visitor never sees
   one. A desktop browser draws a classic bar instead, which both gives the
   disguise away and, while the fullscreen screenshot viewer is open, leaves an
   empty light gutter over the dark backdrop. Neither is visible on a phone;
   both show up in the admin's preview iframe, which is a desktop browser.
   Scrolling itself is untouched — wheel, touch, keys and trackpad all still
   work, this only stops the bar from being painted.
   Universal on purpose: besides the document, .iframe-box, .game-bd,
   .pop-box .pop-bd and #notification-allow-show .bd scroll too, and a future
   scrollable block would otherwise reintroduce the artefact.
   Side effect, wanted: a hidden bar takes no width, so
   `window.innerWidth - documentElement.clientWidth` is now always 0. That is
   what screenshot-viewer.js gates its gutter compensation on (lockScroll,
   `if (scrollbarComp > 0)`), so the compensation stops firing by itself and
   the page can no longer shift horizontally when the viewer opens or closes. */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* App support (docs/app-reviews-spec.md §12c). Measured on live Play listings
   (Spotify, Candy Crush, 375px, 08.09): 14px/500 labels on #202124, 14px/400
   lh20 values on #5F6368, 18px icons and a 20px chevron on #5F6368, 24px page
   margins. The section header stays 16px/bold to match `.rating-header h2` —
   Play uses 18px/500 for every section title, and this page is off by that
   everywhere, not just here. */
.app-support {
  margin: 24px 24px 0;
}

/* Hidden, not display:none — a display:none control is skipped by some
   browsers when its <label> is activated. */
.app-support-toggle {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.app-support-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-support-head h2 {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  color: #202124;
}

.app-support-head svg {
  flex: none;
  fill: #5f6368;
  /* Points up while the list is open, and the label is what flips it. */
  transition: transform 0.15s ease;
}

.app-support-toggle:not(:checked) ~ .app-support-head svg {
  transform: rotate(180deg);
}

.app-support-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.app-support-toggle:not(:checked) ~ .app-support-list {
  display: none;
}

.app-support-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.app-support-list li + li {
  margin-top: 20px;
}

.app-support-icon {
  flex: none;
  margin-top: 2px;
  fill: #5f6368;
}

.app-support-label {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.app-support-value {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #5f6368;
  overflow-wrap: anywhere;
}