:root {
  --bg: #f7f7f7;
  --white: #ffffff;
  --title: #111827;
  --black: #000000;
  --border-light: #eaeaea;
  --footer-border: #d8d8d8;
  --card-border: #cccccc;
  --line-menu: #ebebeb;
  --line-footer: #ededed;
  --line-footer-top: #b3b3b3;
  --badge: #ffc100;
  --purple-a: #6100c2;
  --purple-b: #2e005c;
  --purple-border: #7f00ff;

  --btn-gradient: linear-gradient(180deg, var(--purple-a) 0%, var(--purple-b) 74.519%, var(--purple-a) 100%);

  --font-mont: "Montserrat", sans-serif;
  --font-albert: "Albert Sans", sans-serif;

  --page-w: 1280px;
  --content-w: 600px;
  --article-w: 535px;
  --hero-w: 334.078px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  font-family: var(--font-albert);
  background: var(--bg);
  color: var(--black);
  min-height: 100%;
  overflow-x: hidden;
  zoom: var(--page-zoom, 1);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.site-header {
  position: relative;
  z-index: 30;
  background: var(--bg);
  width: 100%;
}
.site-header__inner {
  width: 100%;
  padding: 20px calc(50% - 300px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo { display: block; width: 75px; height: 27px; }
.site-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity .15s ease;
}
.site-header__logo:hover { opacity: .8; }
.site-header__nav {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.site-header__nav a {
  font-family: var(--font-mont);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--black);
  white-space: nowrap;
  transition: opacity .15s ease;
}
.site-header__nav a:hover { opacity: .6; }
.site-header__nav a.is-active { text-decoration: underline; }

.content-page .site-header__inner,
.error-page .site-header__inner,
.game-page .site-header__inner { padding: 24px calc(50% - 290px); }
.content-page .site-header__nav a,
.error-page .site-header__nav a,
.game-page .site-header__nav a { font-size: 10px; line-height: 14px; }

.site-header__burger {
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.site-header__burger svg { display: block; width: 24px; height: 24px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  flex-shrink: 0;
}
.mobile-menu__close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mobile-menu__close svg { display: block; width: 24px; height: 24px; }
.mobile-menu__panel {
  flex: 1;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 24.36px 40px 24px;
  overflow-y: auto;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  max-width: 313px;
}
.mobile-menu__list a {
  display: block;
  font-family: var(--font-mont);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--black);
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-menu);
}
.mobile-menu__list a.is-active { font-weight: 700; }

.site-footer {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-top: 1px solid var(--footer-border);
  padding: 36px 10px;
  width: 100%;
}
.site-footer__inner {
  width: 532px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-align: justify;
}
.content-page .site-footer__inner { width: 581px; }
.game-page .site-footer__inner { width: 711px; }
.site-footer__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity .15s ease;
}
.site-footer__logo:hover { opacity: .8; }
.site-footer__logo .site-logo { width: 89px; height: 32px; }
.site-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.site-footer__nav {
  display: flex;
  gap: 16px;
}
.site-footer__nav a {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.site-footer__nav a:hover { opacity: .6; }

.site-footer__legal {
  width: min-content;
  min-width: 100%;
  font-family: var(--font-mont);
  font-weight: 500;
  font-size: 10px;
  line-height: 18px;
  white-space: pre-wrap;
}
.site-footer__legal p { margin: 0; }
.site-footer__legal p.spacer { min-height: 18px; }

.stage { position: relative; }

.hero {
  position: absolute;
  top: 2px;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}
.hero-left  { left: calc(50% - 640px); }
.hero-right { right: calc(50% - 640px); }
.hero__sticky {
  position: sticky;
  top: 0;
  width: var(--hero-w);
  height: min(957.004px, var(--viewport-h, 957.004px));
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero-left  img { object-position: 100% 0; }
.hero-right img { object-position: 13.5% 0; }

.title-strip {
  position: relative;
  z-index: 10;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  width: 613.626px;
  max-width: 100%;
  min-height: 99.154px;
  margin: 0 auto;
  padding: 34.58px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-strip h1 {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--title);
  text-align: center;
}

.cards-section {
  position: relative;
  z-index: 10;
  padding: 29.3px 16px 0;
}
.column {
  width: var(--content-w);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
}
.card__img {
  display: block;
  width: 100%;
  aspect-ratio: 550 / 309;
  object-fit: cover;
  border: 3px solid var(--white);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .35);
}
.card__img.pos-mc  { object-position: 50% 46%; }
.card__img.pos-sol { object-position: 50% 30%; }
.card__text {
  display: flex;
  flex-direction: column;
  gap: 8.424px;
  width: 100%;
}
.card__title-group { display: flex; flex-direction: column; gap: 4px; }
.card__title {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--black);
  white-space: nowrap;
}
.card__desc {
  font-family: var(--font-albert);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--black);
  text-align: justify;
}
.card__bullets { display: flex; flex-direction: column; gap: 8.424px; width: 100%; }
.card__bullet {
  display: flex;
  gap: 8.424px;
  align-items: flex-start;
}
.card__bullet img { width: 14.741px; height: 14.741px; flex-shrink: 0; }
.card__bullet span {
  flex: 1;
  font-family: var(--font-albert);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--black);
  text-align: justify;
}
.rating {
  display: flex;
  align-items: center;
  gap: 6.318px;
}
.rating__score {
  font-family: var(--font-albert);
  font-weight: 700;
  font-size: 20px;
  line-height: 21.059px;
  color: var(--black);
  white-space: nowrap;
}
.rating__stars { height: 14.931px; width: auto; }
.card__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17.735px;
  width: 100%;
}
.more-info {
  font-family: var(--font-albert);
  font-weight: 500;
  font-size: 12.632px;
  line-height: 17.735px;
  color: var(--black);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}
.btn-play {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10.53px 25.271px;
  border: 1.053px solid var(--purple-border);
  border-radius: 8px;
  background: var(--btn-gradient);
  color: var(--white);
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn-play:hover { filter: brightness(1.15); }

.badge {
  position: absolute;
  top: -8.3px;
  left: 0;
  z-index: 1;
  background: var(--badge);
  color: var(--black);
  font-family: var(--font-mont);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  padding: 4px 26.602px;
  border-radius: 16px 16px 16px 0;
  white-space: nowrap;
}

.card--featured {
  padding: 26.602px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17.735px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1));
}
.card--featured .card__img {
  border-width: 3.325px;
  box-shadow: 0 0 8.867px rgba(0, 0, 0, .35);
}
.card--featured .card__row {
  width: 528px;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.card--featured .card__text {
  width: 295px;
  flex-shrink: 0;
  gap: 8.867px;
}
.card--featured .card__title { font-size: 14.737px; line-height: 17.735px; }
.card--featured .card__desc  { font-size: 12.632px; line-height: 17.735px; }

.card--featured .card__side {
  width: 216px;
  min-height: 103px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card--featured .rating { gap: 6.65px; }
.card--featured .rating__score { font-size: 21.053px; line-height: 22.168px; }
.card--featured .rating__stars { height: 15.717px; }
.card--featured .card__bullet { gap: 8px; }
.card--featured .btn-play {
  padding: 11.084px 26.602px;
  border-width: 1.108px;
  font-size: 12.632px;
  line-height: 17.735px;
}

.card--compact {
  padding: 25.271px;
  display: flex;
  gap: 16.847px;
  justify-content: center;
  align-items: flex-start;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .5));
}
.card--compact .badge { top: -6.49px; }
.card--compact .card__media {
  width: 295px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.card--compact .card__body {
  width: 223px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 146.431px);
  justify-content: space-between;
  row-gap: 8.247px;
}
.thumb {
  background: var(--white);
  border: 0.595px solid var(--card-border);
  border-radius: 8.394px;
  filter: drop-shadow(0 0 2.099px rgba(0, 0, 0, .25));
  padding: 8.04px 8.183px;
  display: flex;
  flex-direction: column;
  gap: 8.04px;
  min-width: 0;
}
.thumb__pic {
  display: block;
  width: 100%;
  height: 73.747px;
  border-radius: 4.197px;
  overflow: hidden;
  transform: translateZ(0);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.thumb img.pos-mc { object-position: 50% 46%; }
.thumb span {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 10.05px;
  line-height: 14.07px;
  color: var(--black);
  transition: color .2s ease;
}

.thumb { transition: filter .2s ease; }
.thumb:hover,
.thumb:focus-visible { filter: drop-shadow(0 0 2.099px rgba(0, 0, 0, .5)); }
.thumb:hover img,
.thumb:focus-visible img { transform: scale(1.052); }
.thumb:hover span,
.thumb:focus-visible span { color: var(--purple-a); }

.white-band {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-top: 18.7px;
  margin-bottom: -1px;
  padding: 29.3px 16px;
}
.articles {
  width: var(--article-w);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--black);
}
.article__block { display: flex; flex-direction: column; gap: 8px; }
.article__block h3 {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}
.article__block p {
  font-family: var(--font-albert);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: justify;
  margin: 0;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.cookie-bar {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 190;
  width: 514.5px;
  max-width: calc(100% - 48px);
  background: var(--white);
  border: 1px solid #012766;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--black);
  font-family: var(--font-mont);
  text-align: justify;
  animation: slide-up .4s cubic-bezier(.2, .8, .3, 1) both;
}
.cookie-bar__intro { display: flex; flex-direction: column; gap: 8px; }
.cookie-bar__title {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.cookie-bar__text {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.cookie-bar.is-expanded .cookie-bar__text { font-size: 10px; }

.cookie-bar__options { display: none; flex-direction: column; gap: 16px; }
.cookie-bar.is-expanded .cookie-bar__options { display: flex; }
.cookie-bar__option { display: flex; flex-direction: column; gap: 12px; }
.cookie-bar__option-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cookie-bar__option-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.cookie-bar__option-desc {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.cookie-bar__switch {
  position: relative;
  flex-shrink: 0;
  width: 33.641px;
  height: 17.67px;
  border: 0;
  border-radius: 8.835px;
  background: #696969;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}
.cookie-bar__switch::after {
  content: "";
  position: absolute;
  top: 1.55px;
  left: 1.877px;
  width: 14.57px;
  height: 14.57px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .2s ease;
}
.cookie-bar__switch[aria-checked="true"] { background: #50009f; }
.cookie-bar__switch[aria-checked="true"]::after { transform: translateX(15.34px); }
.cookie-bar__switch[disabled] { cursor: default; }

.cookie-bar__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cookie-bar__group { display: flex; gap: 8px; }
.cookie-bar__btn {
  width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9.387px 16.42px;
  border: 0.684px solid var(--purple-border);
  border-radius: 8px;
  background: var(--btn-gradient);
  color: var(--white);
  font-family: var(--font-mont);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease;
}
.cookie-bar__btn:hover { filter: brightness(1.15); }
.cookie-bar__btn--outline {
  width: 103px;
  padding: 8px;
  background: var(--bg);
  color: var(--black);
  border: 1px solid var(--black);
}
.cookie-bar__btn--outline:hover { filter: none; background: #ececec; }
.cookie-bar__back { display: none; }
.cookie-bar.is-expanded .cookie-bar__customize { display: none; }
.cookie-bar.is-expanded .cookie-bar__back { display: inline-flex; }

@media (min-width: 641px) {
  .cookie-bar {
    left: 20px;
    bottom: 20px;
    width: 400px;
    padding: 18px;
    gap: 16px;
  }
  .cookie-bar__title { font-size: 13px; line-height: 17px; }
  .cookie-bar__text { font-size: 11px; line-height: 15px; }
  .cookie-bar.is-expanded .cookie-bar__text { font-size: 10px; line-height: 14px; }
  .cookie-bar__options { gap: 12px; }
  .cookie-bar__option { gap: 8px; }
  .cookie-bar__option-name { font-size: 11px; line-height: 15px; }
  .cookie-bar__option-desc { font-size: 10.5px; line-height: 14px; }
  .cookie-bar__switch { width: 28.6px; height: 15.02px; border-radius: 7.51px; }
  .cookie-bar__switch::after { top: 1.32px; left: 1.6px; width: 12.38px; height: 12.38px; }
  .cookie-bar__switch[aria-checked="true"]::after { transform: translateX(13.04px); }
  .cookie-bar__actions { gap: 6px; }
  .cookie-bar__group { gap: 6px; }
  .cookie-bar__btn {
    width: 112px;
    padding: 7.5px 12px;
    font-size: 11px;
    line-height: 15px;
  }
  .cookie-bar__btn--outline { width: 84px; padding: 6.5px; }
}

[data-href] { cursor: pointer; }
a.thumb { color: inherit; }

.content-page { background: var(--white); }
.content-page .site-header,
.content-page .site-footer { background: var(--bg); }
.doc {
  width: 580px;
  max-width: 100%;
  margin: 0 auto;
  padding: 44.57px 16px 90px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--black);
  text-align: justify;
}
.doc h1 {
  font-family: var(--font-albert);
  font-weight: 900;
  font-size: 32px;
  line-height: 36px;
  text-align: left;
}
.doc h1.doc__title--sm { font-size: 24px; }
.doc h2 {
  font-family: var(--font-albert);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
}
.doc p {
  font-family: var(--font-albert);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.doc p.doc__lead-sm { font-size: 10px; }

.error-page {
  background: var(--bg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.error-page main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.error-box {
  width: 398px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.error-box .err-code {
  width: 100%;
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 193px;
  line-height: 148px;
  color: var(--title);
  text-align: center;
}
.error-box .err-msg {
  width: 100%;
  font-family: var(--font-mont);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  color: var(--title);
  text-align: center;
}
.error-box .err-btn {
  width: 100%;
  border: 2px solid var(--black);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-family: var(--font-albert);
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  color: var(--black);
  transition: background .15s ease, color .15s ease;
}
.error-box .err-btn:hover { background: var(--black); color: var(--white); }

.game-page { background: var(--white); }
.game-page .site-header,
.game-page .site-footer { background: var(--bg); }

.game {
  width: 721.741px;
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 16px 76px;
  display: flex;
  align-items: flex-start;
  gap: 41.584px;
}

.game__main {
  width: 453.954px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 13.861px;
}
.game__back {
  display: flex;
  align-items: center;
  gap: 3.465px;
  font-family: var(--font-mont);
  font-weight: 500;
  font-size: 12.129px;
  line-height: 15.594px;
  color: var(--black);
  white-space: nowrap;
  transition: opacity .15s ease;
}
.game__back:hover { opacity: .6; }
.game__back svg { width: 10.396px; height: 15.594px; flex-shrink: 0; }
.game__title {
  font-family: var(--font-mont);
  font-weight: 800;
  font-size: 17.326px;
  line-height: 20.792px;
  color: var(--black);
}

.game__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 453.9536 / 559.3794;
  border-radius: 16.167px;
  overflow: hidden;
  background: var(--purple-a);
}
.game__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.game__aside {
  width: 226.204px;
  flex-shrink: 0;
  padding-top: 64.108px;
  display: flex;
  flex-direction: column;
  gap: 13.8px;
}
.game__aside-title {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  color: var(--black);
}
.offer {
  position: relative;
  background: var(--white);
  border-radius: 11.04px;
  filter: drop-shadow(0 0 2.76px rgba(0, 0, 0, .5));
  padding: 22.079px 13.8px 13.8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.931px;
}
.offer__badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2.76px 8px;
  background: var(--badge);
  border-radius: 11.04px 11.04px 0 0;
  font-family: var(--font-mont);
  font-weight: 600;
  font-size: 10px;
  line-height: 12.129px;
  color: var(--black);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offer__row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13.8px;
}
.offer__rank {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 11.04px;
  line-height: 14.53px;
  color: var(--black);
}
.offer__img {
  width: 126.25px;
  height: 70.93px;
  flex-shrink: 0;
  object-fit: cover;
  border: 0.69px solid var(--white);
  border-radius: 5.52px;
  box-shadow: 0 0 5.796px rgba(0, 0, 0, .35);
}
.offer__rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.359px;
}
.offer__score {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 13.8px;
  line-height: 14.53px;
  color: var(--black);
  text-align: center;
}
.offer__stars { width: 31.755px; height: 5.641px; }
.offer__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11.04px;
}
.offer__name {
  font-family: var(--font-mont);
  font-weight: 700;
  font-size: 10.396px;
  line-height: 13.861px;
  color: var(--black);
}
.offer .btn-play {
  padding: 7.265px 17.436px;
  border-width: 0.727px;
  border-radius: 5.52px;
  font-size: 10.396px;
  line-height: 13.861px;
}

@media (max-width: 1023px) {
  .hero { display: none; }

  .game {
    width: 100%;
    max-width: 560px;
    flex-direction: column;
    gap: 32px;
    padding: 32px 16px 56px;
  }
  .game__main { width: 100%; }
  .game__aside { width: 100%; padding-top: 0; }
  .offer__img { width: auto; flex: 1 1 0; min-width: 0; }
}

@media (max-width: 640px) {
  .site-header__inner,
  .content-page .site-header__inner,
  .error-page .site-header__inner { padding: 20px 40px; }
  .site-header__nav { display: none; }
  .site-header__burger { display: block; }

  .title-strip { width: 100%; padding: 20.6px 16px; }
  .title-strip h1 { font-size: 20px; line-height: 28px; max-width: 279.523px; }

  .cards-section { padding: 21.8px 16.9px 0; }
  .column { width: 100%; }

  .card,
  .card--featured,
  .card--compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px 16.42px;
    border-radius: 8px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 1));
  }
  .card .card__media,
  .card .card__body { display: contents; }
  .card .card__img {
    order: 1;
    width: 100%;
    margin-bottom: 5.02px;
    border-width: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .35);
  }
  .card .card__text { order: 2; align-self: auto; gap: 6px; }
  .card .card__title-group { gap: 6px; }
  .card .card__title { font-size: 14px; line-height: 18px; }
  .card .card__desc  { font-size: 12px; line-height: 16px; }
  .card .card__bullets { gap: 5.632px; }
  .card .card__bullet { gap: 6px; align-items: center; }
  .card .card__bullet img { width: 11.48px; height: 11.48px; }
  .card .rating {
    order: 3;
    justify-content: center;
    padding: 4px 0;
    gap: 8px;
  }
  .card .rating__score { font-size: 18px; line-height: 22px; }
  .card .rating__stars { height: 16.097px; }
  .card .card__cta { order: 4; gap: 0; }
  .card .more-info { display: none; }
  .card--featured .card__row,
  .card--featured .card__side { display: contents; }
  .card--featured .card__text { width: auto; }
  .card--featured .card__bullets { order: 2; }
  .card--featured .btn-play { order: 4; }
  .card .btn-play {
    padding: 9.387px 16.42px;
    border-width: 0.684px;
    font-size: 14px;
    line-height: 18px;
  }
  .badge,
  .card--compact .badge { top: -10.75px; }

  .thumb-grid { display: none; }

  .white-band { padding: 29.3px 16.9px; }
  .articles { width: 100%; gap: 15.81px; }
  .article__block h3 { font-size: 14px; line-height: 18px; }
  .article__block p  { font-size: 12px; line-height: 17px; }

  .site-footer {
    border-top: 1px solid var(--line-footer-top);
    padding: 24px 32px 36px;
  }
  .site-footer__inner,
  .content-page .site-footer__inner {
    width: 310px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    text-align: justify;
  }
  .site-footer__logo {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-footer);
  }
  .site-footer__logo .site-logo { width: 75px; height: 27px; }
  .site-footer__right { width: 100%; align-items: stretch; }
  .site-footer__nav {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-footer);
  }
  .site-footer__nav a { font-weight: 500; font-size: 14px; line-height: 18px; }
  .site-footer__legal { width: auto; min-width: 0; font-size: 12px; line-height: 16px; }
  .site-footer__legal p.spacer { min-height: 16px; }
  .content-page .site-footer { border-top: 0; padding: 36px 32px; }
  .content-page .site-footer__nav a { font-weight: 700; }
  .content-page .site-footer__legal { line-height: 18px; }
  .content-page .site-footer__legal p.spacer { min-height: 18px; }

  .content-page { background: var(--bg); }
  .doc {
    width: 100%;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 43.9px 41.5px 44px;
    gap: 14px;
  }
  .doc h1,
  .doc h1.doc__title--sm { font-size: 30px; line-height: 34px; margin-bottom: 18px; }
  .doc h2 { line-height: 20px; }
  .doc p.doc__lead-sm { font-size: 12px; }

  .error-box { width: 265.721px; gap: 12px; }
  .error-box .err-code { font-size: 128px; line-height: 128px; color: var(--black); }
  .error-box .err-msg {
    font-weight: 500;
    font-size: 34.565px;
    line-height: 36.726px;
    color: var(--black);
    white-space: nowrap;
  }
  .error-box .err-msg::first-letter { text-transform: uppercase; }
  .error-box .err-btn {
    border-width: 1px;
    padding: 8px 0;
    font-family: var(--font-mont);
    font-size: 16px;
    line-height: 20px;
  }

  .game { padding: 20px 16px 40px; gap: 24px; }
  .game__title { font-size: 20px; line-height: 24px; }
  .game__stage { aspect-ratio: 9 / 14; }

  .cookie-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 8px 8px 0 0;
  }
  .cookie-bar.is-expanded .cookie-bar__text { font-size: 12px; }
  .cookie-bar__option-name { font-weight: 600; }
  .cookie-bar__actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie-bar__group { flex-direction: column-reverse; }
  .cookie-bar__btn,
  .cookie-bar__btn--outline { width: 100%; }
}