* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #efe3c6; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  overflow-x: hidden;
}
a { display: block; text-decoration: none; }
img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.page {
  position: relative;
  width: 100%;
  max-width: 750px;
  aspect-ratio: 750 / 2321;
  margin: 0 auto;
  overflow: hidden;
  background: url("../bg.jpg") center top / 100% 100% no-repeat;
  box-shadow: 0 0 28px rgba(108, 68, 22, .12);
}

.abs { position: absolute; z-index: 2; }

.logo {
  position: fixed;
  left: 21.6vw;
  top: var(--safe-top);
  width: 56.8vw;
  max-width: 426px;
  z-index: 1002;
  pointer-events: none;
}

.title-main { left: 3.8%; top: 4.35%; width: 92.4%; }

.slider {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: 18px;
  touch-action: pan-y;
}
.top-slider { left: 2.65%; top: 13.35%; width: 94.67%; aspect-ratio: 710 / 391; }
.bottom-slider { left: 1.85%; top: 67.85%; width: 96.27%; aspect-ratio: 722 / 402; border-radius: 18px; }

.slider-track {
  height: 100%;
  display: flex;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.slide { flex: 0 0 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.dots {
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.top-dots { top: 30.95%; }
.bottom-dots { top: 86.15%; gap: 13px; }
.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #9b6120;
  opacity: .95;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(90, 40, 0, .18);
}
.dot.is-active { background: #f2c877; }

.title-hot { left: 0; top: 34.0%; width: 100%; }

.hot-games { left: 2.1%; top: 37.70%; width: 95.3%; }
.title-electronic { left: 0; top: 64.95%; width: 100%; }

.promo-deposit {
  position: fixed;
  left: 3.35vw;
  top: auto;
  bottom: calc(var(--safe-bottom) + 18.2vw);
  width: 45.07vw;
  max-width: 338px;
  z-index: 1001;
}
.promo-app {
  position: fixed;
  right: 3.35vw;
  top: auto;
  bottom: calc(var(--safe-bottom) + 18.2vw);
  width: 45.07vw;
  max-width: 338px;
  z-index: 1001;
}

.btn-play {
  position: fixed;
  left: 3.85vw;
  top: auto;
  bottom: calc(var(--safe-bottom) + 2.6vw);
  width: 44.27vw;
  max-width: 332px;
  z-index: 1001;
}
.btn-download {
  position: fixed;
  right: 3.85vw;
  top: auto;
  bottom: calc(var(--safe-bottom) + 2.6vw);
  width: 44.27vw;
  max-width: 332px;
  z-index: 1001;
}

.clickable { transition: transform .16s ease, filter .16s ease; transform-origin: center center; }
.clickable:active { transform: scale(.96); filter: brightness(1.05); }

@keyframes pulseTop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes pulseBottom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.pulse-top { animation: pulseTop 1.65s ease-in-out infinite; }
.pulse-top-alt { animation: pulseTop 1.65s ease-in-out .45s infinite; }
.pulse-bottom { animation: pulseBottom 1.18s ease-in-out .15s infinite; }
.pulse-bottom-alt { animation: pulseBottom 1.18s ease-in-out .65s infinite; }

@media (min-width: 751px) {
  body { padding: 0 0 36px; }

  .logo { left: calc(50% - 213px); width: 426px; }
  .promo-deposit { left: calc(50% - 350px); bottom: calc(var(--safe-bottom) + 136px); width: 338px; }
  .promo-app { right: calc(50% - 350px); bottom: calc(var(--safe-bottom) + 136px); width: 338px; }
  .btn-play { left: calc(50% - 346px); bottom: calc(var(--safe-bottom) + 20px); width: 332px; }
  .btn-download { right: calc(50% - 346px); bottom: calc(var(--safe-bottom) + 20px); width: 332px; }
}