* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-width: 320px; background: #050505; overflow-x: hidden; }
a, img { display: block; }
a { cursor: pointer; }
img { width: 100%; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid rgba(255,40,40,.9); outline-offset: 3px; border-radius: 8px; }

.desktop-page {
  width: 100%;
  max-width: 1402px;
  margin: 0 auto;
  background: #050505;
  overflow: hidden;
}

.desktop-header {
  position: relative;
  height: min(73px, calc(100vw * 73 / 1402));
  background: #030303;
}

.d-logo { position: absolute; left: 1.71%; top: 0; width: 13.7%; z-index: 2; }
.d-nav { position: absolute; left: 15.41%; top: 0; z-index: 3; width: 60.63%; height: 100%; }
.d-auth {
  position: absolute;
  right: 2.85%;
  top: 19.18%;
  display: flex;
  align-items: flex-start;
  gap: 3.85%;
  z-index: 4;
  width: 20.4%;
}
.d-auth a:first-child { width: 46.15%; }
.d-auth a:last-child { width: 50%; }
.d-auth a,
.d-hero > a,
.d-live-grid a,
.d-promo-grid a,
.d-game-grid a,
.m-header > a,
.m-hero > a,
.m-menu a,
.m-scroll a,
.m-bottom a {
  transition: transform .16s ease, filter .16s ease;
}
.d-auth a:hover,
.d-hero > a:hover,
.d-live-grid a:hover,
.d-promo-grid a:hover,
.d-game-grid a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.06);
}
.d-live-grid a:hover,
.d-promo-grid a:hover,
.d-game-grid a:hover {
  filter: brightness(1.08) saturate(1.06) drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.d-hero {
  position: relative;
  aspect-ratio: 1402 / 382;
  overflow: hidden;
}
.hero-base { width: 100%; height: 100%; object-fit: cover; }
.d-hero > a { position: absolute; z-index: 2; }
.d-hero-register { left: 15.26%; top: 83.25%; width: 15.34%; }
.d-hero-promo { left: 31.45%; top: 83.25%; width: 13.91%; }
.d-hero-line { left: 83.02%; top: 81.94%; width: 5.06%; }
.d-hero-telegram { left: 89.16%; top: 81.94%; width: 5.92%; }

.d-live { padding: 1.85% 3.28% 0; }
.d-title { width: auto; height: 24px; }
.d-live-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 7px;
}

.d-columns {
  display: grid;
  grid-template-columns: minmax(0, 646fr) minmax(0, 612fr);
  gap: 22px;
  padding: 2.14% 3.85% 0;
}

.d-promo-grid,
.d-game-grid {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}

.d-promo-grid { grid-template-columns: repeat(4, 1fr); }
.d-game-grid { grid-template-columns: repeat(5, 1fr); }
.d-stats { padding: 1.71% 2.71% 0; }
.d-footer { padding: 1% 2.71% 0; }

.mobile-page { display: none; }

@media (max-width: 1023px) {
  .desktop-page { display: none; }
  .mobile-page {
    display: block;
    width: 100%;
    max-width: 853px;
    margin: 0 auto;
    padding-bottom: 129px;
    background: #050505;
    overflow: hidden;
  }

  .m-header,
  .m-hero { position: relative; }
  .m-header-base,
  .m-hero-base { width: 100%; }
  .m-header > a,
  .m-hero > a { position: absolute; z-index: 2; }
  .m-menu-open { left: 2.35%; top: 29.2%; width: 3.75%; }
  .m-brand { left: 8.9%; top: 0; width: 31.2%; }
  .m-login { right: 2.58%; top: 27%; width: 13.95%; }
  .m-hero-register { left: 4.8%; top: 80.4%; width: 28.7%; }

  .m-menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 0 30px;
  }

  .m-section,
  .m-block { padding: 0 30px; }

  .m-section { margin-top: 24px; }
  .m-title { width: 100%; }

  .m-scroll {
    display: grid;
    grid-auto-flow: column;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  .m-scroll::-webkit-scrollbar { display: none; }
  .m-scroll a { scroll-snap-align: start; }
  .m-header > a:active,
  .m-hero > a:active,
  .m-menu a:active,
  .m-scroll a:active,
  .m-bottom a:active {
    transform: scale(.97);
    filter: brightness(1.12);
  }
  .m-live { grid-auto-columns: 243px; margin-top: 9px; }
  .m-promo { grid-auto-columns: 193px; gap: 10px; margin-top: 4px; }
  .m-games { grid-auto-columns: 150px; gap: 10px; margin-top: 6px; }
  .m-block { margin-top: 20px; }

  .m-bottom {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    max-width: 853px;
    transform: translateX(-50%);
    background: #050505;
    box-shadow: 0 -10px 28px rgba(0,0,0,.46);
  }
}