/* ========== Base & fonts ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, "Helvetica Neue", sans-serif;
  color:#0a0a0a;
  -webkit-tap-highlight-color: transparent;
  background:#10131b;
}

/* ===== Theme vars ===== */
:root{
  --gold-1:#e6c57a;
  --gold-2:#caa35a;

  --ink-1:#0f1422;
  --ink-2:#0b1120;

  --plate-bg:#ffffff;
  --plate-text:#16213d;

  --radius-card:28px;      /* радиус самой карточки */
  --radius-shadow:32px;    /* радиус серой подложки (чуть больше) */
  --under-offset:22px;     /* насколько снизу выглядывает серая подложка */
}

/* ===== Page layout ===== */
.page{
  min-height:100vh;
  display:grid;
  grid-auto-rows:min-content;
  justify-items:center;
  align-content:start;
  padding:24px;
}
.shell{ width:100%; max-width:640px; margin:0 auto 16px; padding:0 12px; }

/* ===================================================================== */
/* =========================  INDEX (языки)  ============================ */
/* ===================================================================== */

.page--lang{
  background:
    radial-gradient(680px 420px at 50% 26%,
      rgba(230,197,122,.22) 0%,
      rgba(230,197,122,.10) 35%,
      rgba(230,197,122,0) 70%),
    linear-gradient(180deg, var(--ink-1), var(--ink-2));
}

.lang{ text-align:center; width:100%; max-width:640px; }
.lang__title{
  color:#fff; font-weight:800;
  font-size:clamp(1.2rem, 2.6vw + 1rem, 2.2rem);
  margin:0 0 16px;
}
.lang__buttons{ display:grid; gap:16px; grid-template-columns:1fr; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:800; padding:0; border-radius:9999px;
  transition:transform .14s ease, filter .2s ease, box-shadow .2s ease;
}
.btn--full{ width:100%; }

.btn--lang{
  min-height:clamp(64px, 14vw, 88px);
  padding:0 clamp(14px, 4vw, 22px);
  color:#fff;
  border:1px solid rgba(230,197,122,.55);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  gap:clamp(10px,3.5vw,14px);
  justify-content:flex-start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25);
}
.btn--lang:hover{ transform:translateY(-1px); filter:brightness(1.06); }

.btn__icon{
  width:clamp(28px, 8vw, 36px);
  height:clamp(28px, 8vw, 36px);
  flex:0 0 clamp(28px, 8vw, 36px);
  border-radius:50%;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.25);
}
.btn__text{
  font-size:clamp(1.05rem, 2.8vw + .4rem, 1.5rem);
  line-height:1.1;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.flag--ru{ background-image:url("../assets/img/flags/ru.png"); }
.flag--en{ background-image:url("../assets/img/flags/gb.png"); }
.flag--hi{ background-image:url("../assets/img/flags/in.png"); }
.flag--br{ background-image:url("../assets/img/flags/br.png"); }
.flag--tr{ background-image:url("../assets/img/flags/tr.png"); }
.flag--kz{ background-image:url("../assets/img/flags/kz.png"); }

/* ===================================================================== */
/* =========================  RU GAMES page  ============================ */
/* ===================================================================== */

.page--ru{
  background:
    radial-gradient(680px 420px at 50% 26%,
      rgba(230,197,122,.20) 0%,
      rgba(230,197,122,.10) 35%,
      rgba(230,197,122,0) 70%),
    linear-gradient(180deg, var(--ink-1), var(--ink-2));
}

/* HERO */
.hero{ display:grid; justify-items:center; gap:10px; margin:4px 0 16px; }
.hero__logo{ height:144px; width:auto; display:block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.hero__bonus{
  margin:0; color:#fff; text-align:center; font-weight:800; letter-spacing:.2px;
  font-family:Poppins, Manrope, system-ui, sans-serif;
  font-size:clamp(1.05rem, 2.5vw + .6rem, 1.35rem);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Инфо-карточка (больше внутренние отступы, без серой подложки) */
.card-surface{
  position:relative;
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:24px;
  box-shadow:0 10px 26px rgba(2,6,23,.16);
  padding:26px 26px 22px;   /* больше воздуха по краям */
  margin-bottom:36px;
  z-index:1;
}
/* серую плашку под инфо-блоком убрали */
.card-surface::after{ content:none; }
.card-surface > *{ position:relative; z-index:1; }

.info{ padding:0; }
.info__instruction {
  background-color: #fff;
  border-radius: 16px;
  padding: 12px;
}
.info__title{
  padding-left:30px; 
  margin:0 0 12px; font-family:Poppins, Manrope, system-ui, sans-serif;
  font-weight:1000; color:#1b2440; letter-spacing:.4px;
  font-size:clamp(1.05rem,2.2vw + .6rem,1.25rem);
}
.info__list{
  margin:0;
  padding-left:50px;        /* чуть больше слева */
  padding-right:20px;        /* чтобы справа не упиралось */
  color:#1b2440; line-height:1.55; font-weight:700;
}
.info__list li{ margin:6px 0; }
/* тонкую черту в центре убрал */
.info__divider{ display:none; }

/* ПРОМО — держим в одну строку, логотип не прыгает наверх */
.promo{
  display:grid;
  grid-template-columns: auto 1fr auto; /* иконка — текст — действия */
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#f6f8fc;
  border:1px solid #e7ebf3;
}

/* ЛОГО В ПРОМО (x2), но с адаптивным сжатием */
.promo__icon{
  width:50px; height:50px;
  border-radius:10px;
  background: url("../assets/img/brand/1win.png") center/contain no-repeat;
}

/* текст и кнопки промо */
.promo__title{ margin:0; color:#1b2440; font-weight:800; font-size:1rem; }
.promo__benefit{ margin:2px 0 0; color:#1b2440; font-weight:700; }
.promo__actions{ display:inline-flex; align-items:center; gap:8px; }
.promo__code{
  background:#0b1a3a; color:#fff; padding:8px 12px; border-radius:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border:1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  white-space:nowrap;
}
.promo__copy{
  border:0; cursor:pointer; font-weight:800; padding:10px 14px; min-height:44px; border-radius:9999px;
  color:#0b132e; background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 12px 24px rgba(202,163,90,.35), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .14s ease, filter .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.promo__copy:hover{ transform:translateY(-1px); filter:brightness(1.05) saturate(1.02); }
.promo__copy:active{ transform:translateY(0); box-shadow:0 10px 18px rgba(202,163,90,.28), inset 0 6px 12px rgba(0,0,0,.18); }
.promo__status{ min-width:84px; font-size:.9rem; color:#059669; }

/* ===== Список карточек игр ===== */
/* расстояние между играми увеличено */
.cards{ list-style:none; padding:0; margin:18px 0 48px; display:grid; gap:56px; }

/* ============ GAME CARD ============ */
.card{
  position:relative;
  border-radius:var(--radius-card);
  overflow:visible;
}

/* СЕРАЯ «КАРТОЧКА»-подложка: не шире, только ниже */
.card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  border-radius:var(--radius-shadow);
  background:linear-gradient(180deg, #c7cdda, #9ea8bb);
  transform:translateY(var(--under-offset));
  box-shadow: 0 10px 16px rgba(2,6,23,.24);
  z-index:0;
}
.card:active::before{ transform:translateY(6px) scale(.985); opacity:.85; }

/* Кликабельная верхняя карточка */
.card__link{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius-card); overflow:hidden; background:#0d1b4a;
  transform: translateZ(0); z-index:1;
}

/* Изображение */
.card__img{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* ===== Белая «полоса» снизу карточки ===== */
.card__plate{
  position:absolute; left:0; right:0; bottom:0;
  min-height:9%;
  display:flex; align-items:center; justify-content:center; gap:2px;
  padding:7px 11px;
  background:var(--plate-bg);
  border-bottom-left-radius:var(--radius-card); border-bottom-right-radius:var(--radius-card);
  text-align:center;
}
.card__title{
  font-family:Poppins, Manrope, system-ui, sans-serif; color:var(--plate-text);
  font-weight:800; letter-spacing:.3px;
  font-size: clamp(1.05rem, 2.6vw + .5rem, 1.3rem);
}
.card__x{
  font-family:Poppins, Manrope, system-ui, sans-serif; color:#000; font-weight:800;
  font-size: clamp(1.05rem, 2.2vw + .45rem, 1.25rem);
}

/* Эффекты */
.card__link:hover .card__img{ transform:scale(1.02); transition:transform .18s ease; }
.card__link:active .card__plate{ transform:translateY(1px); transition:transform .12s ease; }

/* Focus */
.btn:focus-visible,
.promo__copy:focus-visible,
.card__link:focus-visible{
  outline:3px solid #60a5fa; outline-offset:2px;
}

/* ====== Adaptive tweaks: логотип не переносится наверх ====== */
/* удерживаем всё в одну строку, постепенно уменьшая элементы */
@media (max-width:640px){
  .promo{ grid-template-columns:minmax(44px,56px) 1fr auto; }
  .promo__icon{ width:56px; height:56px; }
}
@media (max-width:480px){
  .promo{ grid-template-columns:minmax(40px,48px) 1fr auto; }
  .promo__icon{ width:48px; height:48px; }
  .promo__code{ padding:6px 10px; font-size:.9rem; }
  .promo__copy{ padding:8px 12px; min-height:38px; font-size:.95rem; }
}
/* только на совсем узких экранах — допускаем перенос в две строки */
@media (max-width:360px){
  .promo{ grid-template-columns:1fr; text-align:center; }
  .promo__icon{ margin:0 auto 6px; }
  .promo__actions{ justify-content:center; }
}

/* Touch */
@media (hover:none){
  .card__link:hover .card__img{ transform:none; }
}

/* === iOS/Android выравнивание, safe-area и анти-оверфлоу === */
html, body { width: 100%; overflow-x: hidden; } /* убираем любой горизонтальный скролл */
.page { width: 100%; justify-items: center; }   /* гарант центрирования сетки */
.shell { margin-left: auto; margin-right: auto; }

/* безопасные отступы под вырез/скругления, остаётся ровно по центру */
@supports (padding: max(0px)) {
  .page{
    padding-left:  max(16px, calc(24px + env(safe-area-inset-left)));
    padding-right: max(16px, calc(24px + env(safe-area-inset-right)));
    padding-top:   calc(24px + env(safe-area-inset-top));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
}

/* чтобы контент в промо не «толкал» сетку и не переносил иконку наверх */
.promo, .promo__content { min-width: 0; }   /* grid фикс для узких экранов */
.promo__code, .promo__copy { white-space: nowrap; }

/* изображения/фоны не раздувают ширину на мобильных */
img, svg, video { max-width: 100%; height: auto; }
.card__img { background-size: cover; background-position: center; }

/* Чуть сглаживаем субпиксельные шевеления на iOS */
.card, .card__link { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* --- PATCH: promo без иконки, мобильное выравнивание, центровка --- */

/* если иконки нет, делаем 2 колонки (контент + кнопки) */
.promo:not(:has(.promo__icon)){
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* на очень узких — в столбик и по центру */
@media (max-width: 480px){
  .promo:not(:has(.promo__icon)){
    grid-template-columns: 1fr;
    text-align: center;
  }
  .promo:not(:has(.promo__icon)) .promo__actions{
    justify-content: center;
    margin-top: 6px;
  }
}

/* чтобы текст никогда не толкал сетку */
.promo, .promo__content { min-width: 0; }
.promo__code, .promo__copy { white-space: nowrap; }

/* общая страховка от горизонтального скролла на телефонах */
html, body { width:100%; overflow-x:hidden; }
.page { width:100%; justify-items:center; }
.shell { margin-left:auto; margin-right:auto; }

/* безопасные отступы под вырезы/скругления */
@supports(padding:max(0px)){
  .page{
    padding-left:  max(16px, calc(24px + env(safe-area-inset-left)));
    padding-right: max(16px, calc(24px + env(safe-area-inset-right)));
  }
}

/* моб. правки инфо-блока: текст не упирается в края */
@media (max-width: 480px){
  .info__title{ padding-left: 0; margin: 0 0 12px; text-align:center; }
  .info__list{ padding-left: 18px; padding-right: 14px; }
}


/* === PATCH: аккуратные отступы и переносы для текста инфо-блока (VPN) и заголовков === */

/* страховка от «распирания» контента в grid-ячейках */
.card-surface,
.info,
.info__title,
.info__list,
.promo,
.promo__content { min-width: 0; }

/* разрешаем корректные переносы, чтобы длинные слова не упирались в рамку */
.info__title,
.info__list,
.info__list li,
.hero__bonus,
.promo__title,
.promo__benefit {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* слегка увеличим «воздух» внутри белой инфо-карточки */
.card-surface { padding: 26px 24px 22px; }

/* мелкие правки списков, чтобы маркеры не давили текст */
.info__list {
  list-style-position: outside;
  padding-left: 22px;
  margin-left: 0;
}

/* мобилки: ещё чуть больше внутренние отступы белого блока,
   подушка по краям у заголовка/списка, чтобы точно не липло к рамке */
@media (max-width: 560px){
  .card-surface { padding: 22px 18px 18px; }
  .info__title,
  .info__list {  padding-right: 2px; }
  .hero__bonus { padding: 0 10px; } /* слоган под логотипом не утыкается в края */
}

/* На случай отсутствия иконки в промо — корректная сетка,
   чтобы текст не оказывался зажат */
.promo:not(:has(.promo__icon)){
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 560px){
  .promo:not(:has(.promo__icon)){
    grid-template-columns: 1fr; /* на телефоне всё в столбик */
    text-align: center;
  }
}

/* дополнительная страховка от горизонтального скролла */
html, body { width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }