:root{
  /* Палитра, подобранная по скриншоту */
  --color-bg: #0f1013;           /* общий фон */
  --color-elev: #1a1b20;         /* карточки/панели */
  --color-border: #2a2c33;       /* бордеры/разделители */
  --color-text: #e9edf4;         /* основной текст */
  --color-muted: #9aa3b2;        /* вторичный текст */
  --color-accent: #f5a623;       /* акцент (оранжевый) */
  --color-link: #2f6fff;         /* синие CTA/линки */

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --container-w: 1360px; /* по требованию */
  --shadow-sm: 0 6px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Хедер */
.site-header{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; gap:12px;
  height: 64px;
  padding: 0 16px;
  background: rgba(15,16,19,.75);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand__icon{ font-size: 22px; color: var(--color-accent); }
.brand__name{ font-weight:700; letter-spacing:.3px; }
.top-actions{ margin-left:auto; display:flex; gap:8px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid transparent; border-radius: 32px; cursor:pointer; text-decoration:none; color:var(--color-text); }
.btn-ghost{ background:transparent; border-color: #fd8701; }
.btn-accent{ background: linear-gradient(90deg, #fea744 0%, #ffd29e 100%);
    transition: background .3s; color:#111; font-weight:700; box-shadow: var(--shadow-sm); }
.btn-icon{ width:40px; height:40px; border-radius:12px; background: var(--color-elev); border:1px solid var(--color-border); color:var(--color-text); }

/* Лейаут */
.sidebar{
  position: fixed; inset: 64px auto 0 0; /* под хедером */
  width: var(--sidebar-w);
  background: #131419;
  border-right:1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: width .25s ease;
  z-index: 40;
}
.sidebar--collapsed{ width: var(--sidebar-w-collapsed); }
.sidebar__scroll{ height:100%; overflow:auto; padding:12px; }
.sidebar__section--brand{ display:flex; align-items:center; justify-content:space-between; padding:6px; margin-bottom:8px; }
.brand--compact .brand__name{ font-weight:700; }

.menu{ display:flex; flex-direction:column; gap:4px; }
.menu__title{ margin:10px 8px; font-size:12px; color:var(--color-muted); text-transform:uppercase; letter-spacing:.08em; }
.menu__item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:inherit; text-decoration:none; border:1px solid transparent; color: #9a9a9a; }
.menu__item:hover{ background: var(--color-elev); border-color: var(--color-border); }
.menu__item i{ width:20px; text-align:center; }
.menu__divider{ height:1px; background: var(--color-border); margin:8px 0; }

.content{
  padding-left: var(--sidebar-w);
}
.sidebar--collapsed + .overlay + .content{ /* не применяется: overlay между ними. Решение ниже через body класс */ }

/* Контентная область */
.container{ max-width: var(--container-w); margin: 24px auto; padding: 0 16px; }

/* .hero{ display:grid; grid-template-columns: 1fr; gap:20px; background: linear-gradient(135deg,#0f5a52 0%,#0d6b5e 60%, #0a2a25 100%); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-sm); min-height: 260px; } */
.hero__title{ font-size: clamp(28px, 3.4vw, 56px); line-height:1; margin:0 0 10px; }
.hero__subtitle{ margin: 0 0 18px; color: var(--color-muted); }
.hero__art{ border-radius: 16px; background: url('img/guest_banner.webp') center/cover no-repeat; min-height: 200px; }

.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin: 24px 0 80px; }
.card{ background: var(--color-elev); border:1px solid var(--color-border); border-radius: 16px; padding: 20px; min-height: 140px; }

/* Оверлей для мобильного меню */
.overlay{ position: fixed; inset:0; background: rgba(0,0,0,.5); z-index:35; }

/* Нижний бар для мобильных */
.bottom-bar{ position: fixed; left:0; right:0; bottom:0; height:64px; background:#131419; border-top:1px solid var(--color-border); display:none; z-index:45; }
.bottom-bar__item{ flex:1 1 20%; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; color:var(--color-text); text-decoration:none; border:none; background:none; font: inherit; }
.bottom-bar__item i{ font-size:18px; }
.bottom-bar__item span{ font-size:11px; color: var(--color-muted); }

/* Состояния body */
body.sidebar-collapsed .content{ padding-left: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar{ width: var(--sidebar-w-collapsed); }

/* Адаптивность */
@media (max-width: 1440px){
  .container{ max-width: 1200px; }
}
@media (max-width: 1024px){
  .hero{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .content{ padding-left: 0; }
  .sidebar{ transform: translateX(-100%); width: var(--sidebar-w); transition: transform .25s ease; }
  body.mobile-menu-open .sidebar{ transform: translateX(0); }
  .overlay[hidden]{ display:none; }
  body.mobile-menu-open #overlay{ display:block; }
  .bottom-bar{ display:flex; padding: 12px; justify-content: space-between;}
  .container{ max-width: 100%; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .cards{ grid-template-columns: 1fr; }
}
.brand__name img{
  height: 40px;
}

/* HERO / PROMO */
.promo-hero{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 400px;
  box-shadow: var(--shadow-sm);
  background: url(img/guest_banner.webp) center/cover no-repeat;
}

/* Фон-картинка баннера (замени на свою) */
.promo-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 520px at 70% 40%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%),
    url("img/hero-banner.jpg") center/cover no-repeat;
  /* transform: scale(1.02); */
}

/* Размытая тёмная левая часть (как на скрине) */
.promo-hero__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 32%, rgba(0,0,0,0) 62%);
  /* backdrop-filter: blur(6px); */
  -webkit-backdrop-filter: blur(6px);
}

.promo-hero__inner{
  position:relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 34px 42px 78px;
  min-height: 310px;
}

.promo-hero__title{
  margin:0 0 12px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
}

.promo-hero__subtitle{
  margin: 0 0 18px;
  color: rgba(233,237,244,.85);
  font-weight: 500;
}

.promo-hero__btn{
  display:inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  width: 240px;
  text-align: center;
  border-radius: 14px;
  background: #ffb65c;
  color: #141414;
  text-decoration: none;
  font-weight: 800;
  text-transform: lowercase;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  text-transform: uppercase;
}
.promo-hero__btn span{ line-height: 1.05; }
.promo-hero__btn:hover{ filter: brightness(1.03); }

/* pills row */
.promo-hero__pills{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(var(--container-w), calc(100% - 40px));
  z-index: 3;
  display:flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.pill{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  color: #fff;
  min-width: 230px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.pill__icon{
  width: 36px; height: 36px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.18);
}
.pill__text{ font-weight: 700; white-space: nowrap; }
.pill__arrow{ margin-left: auto; opacity: .9; }

.pill--blue{ background: linear-gradient(90deg, #2f6fff 0%, #2b60d7 100%);overflow: hidden; }
.pill--orange{ background: linear-gradient(90deg, #f29b2a 0%, #e67f1a 100%); }
.pill--green{ background: linear-gradient(90deg, #11a36a 0%, #0b8b59 100%); }

/* Responsive */
@media (max-width: 1024px){
  .promo-hero__inner{ grid-template-columns: 1fr; padding: 0 }
  .promo-hero__pills{ justify-content: flex-start; }
}
@media (max-width: 768px){
  .promo-hero{ border-radius: 18px; min-height: 250px; padding: 16px; }
  .pill{ min-width: unset; width: 100%; }
  .promo-hero__pills{ width: calc(100% - 28px); bottom: 12px; }
}

@media (max-width: 768px){
  .promo-hero__pills{
    left: 0;
    transform: none;
    width: 100%;
    padding: 0 14px;
    bottom: 12px;

    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* прячем скроллбар */
    scrollbar-width: none;
  }
  .promo-hero__pills::-webkit-scrollbar{ display:none; }

  .pill{
    width: auto;
    min-width: 260px;        /* можно 240–280 под вкус */
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
@media (max-width: 767px) {
    .btn-icon {
        display: none;
}}

.chips{
  display: flex;
  gap: 10px;
  margin: 30px 0;
  justify-content: space-between;
}



.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #141518;
  border: 1px solid #2a2c33;
  color: #e9edf4;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.chip--hot{
  border-color: #ff7a00;
  box-shadow: inset 0 0 0 1px rgba(255,122,0,.35);
}

/* ===== MOBILE SCROLL ===== */
@media (max-width: 768px){
  .chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    margin: 10px 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    scrollbar-width: none; /* Firefox */
  }
  .chips::-webkit-scrollbar{ display:none; }

  .chip{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 12px;
  }
}

.games{ margin-top: 22px; }
.games__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; margin-bottom: 14px;
}
.games__title{
  margin:0; font-size: 22px; font-weight: 800; display:flex; gap:10px; align-items:center;
}
.games__actions{ display:flex; align-items:center; gap:10px; }
.games__all{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  text-decoration:none;
}
.games__count{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
}
.games__nav{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  cursor:pointer;
}

/* DESKTOP GRID (как на скрине) */
.games__track{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  grid-auto-rows: 230px;
  gap: 14px;
}
.game{
  position: relative;
  border-radius: 18px;
  overflow:hidden;
  background: var(--color-elev);
  border: 1px solid rgba(255,255,255,.08);
}
.game--big{ grid-row: span 2; }
.game img{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: scale(1.01);
}

/* MOBILE: горизонтальная прокрутка */
@media (max-width: 768px){
  .games__nav{ display:none; } /* стрелки убираем */
  .games__track{
    display:flex;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    padding: 0 14px 10px;
    margin: 0 -14px;

    scrollbar-width: none;
  }
  .games__track::-webkit-scrollbar{ display:none; }

  .game{
    flex: 0 0 auto;
    width: 180px;          /* размер карточки в свайпе */
    height: 240px;
    scroll-snap-align: start;
    border-radius: 16px;
  }
  .game--big{
    width: 220px;          /* “главная” чуть шире */
    height: 240px;
  }
}

.live{ margin-top: 22px; }

.live__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px;
}
.live__title{
  margin:0; font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px;
}
.live__title i{ color:#ff3b3b; font-size:12px; }

.live__actions{ display:flex; align-items:center; gap:10px; }
.live__all{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  text-decoration:none;
}
.live__count{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
}
.live__nav{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  cursor:pointer;
}

/* ПК: ряд карточек */
.live__track{
  display:flex;
  gap: 14px;
  justify-content: space-between;
}
.live-card{
  flex: 0 0 auto;
  width: 250px;
  height: 230px;
  border-radius: 18px;
  overflow:hidden;
  background: var(--color-elev);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.live-card img{ width:100%; height:100%; object-fit: cover; display:block; }

/* МОБИЛА: горизонтальная прокрутка */
@media (max-width: 768px){
  .live__nav{ display:none; }

  .live__track{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    padding: 0 14px 10px;
    margin: 0 -14px;

    scrollbar-width: none;
  }
  .live__track::-webkit-scrollbar{ display:none; }

  .live-card{
    width: 220px;      /* можно 200–240 */
    height: 155px;
    scroll-snap-align: start;
    border-radius: 16px;
  }
}

.tournaments{ margin-top: 22px; }

.tournaments__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px;
}
.tournaments__title{
  margin:0; font-size:22px; font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.tournaments__title i{ color: var(--color-accent); }

.tournaments__all{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  text-decoration:none;
}
.tournaments__all span{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
}

/* карточка */
.t-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #101217;
  box-shadow: var(--shadow-sm);
  min-height: 240px;
}

/* фон баннера (замени картинку) */
.t-card__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 70% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.6) 100%),
    url("img/tournament-banner.jpg") right center/cover no-repeat;
  transform: scale(1.02);
}

/* затемнение слева */
.t-card__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 36%, rgba(0,0,0,0) 70%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.t-card__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  /* padding: 26px 28px; */
  min-height: 240px;
  align-items: center;
  background: url(img/1766053803077_Tournament_img285-29.webp) center/cover no-repeat;
}

.t-card__prize{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: .2px;
  color: #18b07a; /* зелёный как на скрине */
  margin-bottom: 6px;
}
.t-card__name{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}

/* таймер */
.t-timer{
  display:flex;
  gap: 10px;
  margin-bottom: 16px;
}
.t-timer__cell{
  width: 64px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  text-align:center;
}
.t-timer__cell b{ display:block; font-size: 18px; }
.t-timer__cell span{ display:block; font-size: 11px; color: var(--color-muted); margin-top: 2px; }

.t-card__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  background: #ffb65c;
  color: #141414;
  text-decoration:none;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* правую часть оставляем “картинкой”, чтобы текст не наезжал */
.t-card__right{ min-height: 200px; }
.t-card__left {
  padding: 32px;
}
@media (max-width: 1024px){
  .t-card__inner{ grid-template-columns: 1fr; padding-bottom: 28px; }
  .t-card__shade{ background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); }
  .t-card__bg{ background-position: center right; }
}

@media (max-width: 768px){
  .t-card{ border-radius: 18px; min-height: 200px;}
  .t-card__inner{ padding: 18px 16px; }
  .t-timer__cell{ width: 60px; }
  .t-card__left{ padding: 0px;}
}

.hall{ margin-top: 22px; }

.hall__title{
  margin:0 0 14px;
  font-size: 22px;
  font-weight: 800;
  display:flex; align-items:center; gap:10px;
}
.hall__title i{ color: var(--color-accent); }

.hall__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  border-radius: 18px;
}

.hall__sub{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(233,237,244,.95);
}

/* LEFT wins */
.wins{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.win{
  position: relative;
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  text-decoration:none;
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,.08);
  background: #17181d;
  overflow:hidden;
}
.win--big{
  grid-column: 1 / -1;
  padding: 14px;
  background: linear-gradient(90deg, #f39a17 0%, #f39a17 60%, rgba(0,0,0,.0) 100%);
}
.win--dark{
  background: #1a1b20;
}
.win__img{
  width: 92px; height: 92px;
  border-radius: 16px;
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.10);
}
.win--big .win__img{ width: 126px; height: 126px; border-radius: 18px; }
.win__img img{ width:100%; height:100%; object-fit: cover; display:block; }

.win__body{ min-width: 0; }
.win__amount{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 44px;
  line-height: 1;
  color: #fff;
}
.win__amount--sm{ font-size: 22px; }
.win__game{
  margin-top: 8px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.win__game--sm{ margin-top: 6px; font-size: 13px; }
.win__vendor{
  margin-top: 10px;
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 700;
  font-size: 12px;
}
.win__rank{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
}
.win__rank--sm{
  top: 14px; transform:none;
  width: 34px; height: 34px;
}

/* RIGHT coeff list */
.coeff{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #17181d;
}
.coeff__row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 15px 14px;
  text-decoration:none;
  color: var(--color-text);
  border-top: 1px solid rgba(255,255,255,.06);
}
.coeff__row:first-child{ border-top: none; }
.coeff__icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.coeff__icon img{ width:100%; height:100%; object-fit: cover; display:block; }

.coeff__meta{ min-width:0; }
.coeff__name{ font-weight: 800; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.coeff__user{ color: var(--color-muted); font-weight: 600; font-size: 13px; margin-top: 2px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.coeff__nums{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap: 6px; }
.coeff__sum{ font-weight: 900; color: #18b07a; }
.coeff__pill{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  font-size: 12px;
  color: rgba(233,237,244,.9);
}
.coeff__pill span{
  padding: 2px 6px;
  border-radius: 999px;
  background: #18b07a;
  color: #07130f;
  font-weight: 900;
}

/* Responsive */
@media (max-width: 1024px){
  .hall__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .wins{ grid-template-columns: 1fr; }
  .win--big .win__amount{ font-size: 34px; }
  .win__rank{ right: 10px; }
}

/* ===== FIX: ЗАЛ СЛАВЫ (MOBILE) ===== */
@media (max-width: 768px){

  /* 1 колонка и нормальные отступы */
  .hall__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* wins = вертикальный список */
  .wins{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* карточки: меньше радиус/паддинги */
  .win{
    padding: 10px;
    border-radius: 16px;
  }

  /* BIG: делаем компактнее и читаемо */
  .win--big{
    padding: 12px;
  }

  /* картинки меньше */
  .win__img{
    width: 74px;
    height: 74px;
    border-radius: 14px;
  }
  .win--big .win__img{
    width: 88px;
    height: 88px;
    border-radius: 16px;
  }

  /* суммы не должны “вылезать” */
  .win__amount{
    font-size: clamp(20px, 6.2vw, 34px);
    line-height: 1.05;
    word-break: break-word;
  }
  .win__amount--sm{
    font-size: 18px;
    line-height: 1.1;
  }

  .win__game{
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.25;
  }

  .win__vendor{
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 11px;
  }

  /* бейдж ранга на мобиле — в правый верх, а не по центру */
  .win__rank{
    top: 10px;
    right: 10px;
    transform: none;
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .win__rank--sm{
    width: 30px;
    height: 30px;
  }

  /* правая колонка (коэффы) компактнее */
  .coeff__row{
    padding: 12px;
    gap: 10px;
  }
  .coeff__icon{
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .coeff__name{
    font-size: 13px;
  }
  .coeff__user{
    font-size: 12px;
  }
  .coeff__sum{
    font-size: 13px;
  }
  .coeff__pill{
    font-size: 11px;
    padding: 3px 7px;
  }
}
/* ===== COEFF (mobile adapt, no clipping) ===== */
@media (max-width: 520px){

  .coeff__row{
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "icon meta"
      "icon nums";
    align-items: center;
    gap: 10px 12px;
  }

  .coeff__icon{ grid-area: icon; }

  .coeff__meta{
    grid-area: meta;
    min-width: 0;
  }

  .coeff__nums{
    grid-area: nums;
    margin-left: 0;
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .coeff__sum{
    white-space: nowrap;
    font-size: 13px;
  }

  .coeff__pill{
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ===== SEO / TEXT BLOCK ===== */
.seo{
  margin: 22px 0 90px;
}

.seo__inner{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 22px 22px;
}

.seo h2{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
}

.seo h3{
  margin: 18px 0 8px;
  font-size: 18px;
  font-weight: 800;
}

.seo p{
  margin: 0 0 10px;
  color: rgba(233,237,244,.85);
  line-height: 1.55;
  font-size: 13.5px;
}

.seo__note{
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,.10);
  color: rgba(233,237,244,.78);
}

.seo ul, .seo ol{
  margin: 10px 0 14px 18px;
  padding: 0;
  color: rgba(233,237,244,.82);
  line-height: 1.55;
  font-size: 13.5px;
}

.seo li{ margin: 6px 0; }

@media (max-width: 768px){
  .seo__inner{ padding: 16px; border-radius: 16px; }
  .seo h2{ font-size: 18px; }
  .seo h3{ font-size: 16px; }
  .seo p, .seo ul, .seo ol{ font-size: 13px; }
}

/* ===== FOOTER CARD ===== */
.site-footer{
  margin: 22px 0 110px; /* запас под bottom-bar */
}

.footer-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}

.footer-badges{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}

.badge18{
  width: 44px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-weight: 900;
  font-size: 12px;
}

.badge-flag{
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 16px;
}

.footer-text{
  margin: 0 0 10px;
  color: rgba(233,237,244,.72);
  font-size: 12.5px;
  line-height: 1.55;
}

.footer-card__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: start;
}

.footer-col__title{
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(233,237,244,.92);
}

.footer-link{
  display:block;
  padding: 7px 0;
  color: rgba(233,237,244,.75);
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
}
.footer-link:hover{ color: rgba(233,237,244,.95); }

.footer-link--accent{
  color: #2f6fff;
}

/* Responsive */
@media (max-width: 1024px){
  .footer-card{ grid-template-columns: 1fr; }
  .footer-card__cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-card{ padding: 16px; }
  .footer-card__cols{ grid-template-columns: 1fr; }
}


/* ===== MOBILE GUTTERS FIX ===== */
@media (max-width: 768px){

  /* 1) чтобы ничего не вылезало по X */
  html, body{ overflow-x: hidden; }

  /* 2) нормальные боковые отступы у всего контента */
  .container{ padding-left: 14px; padding-right: 14px; }

  /* 3) убираем отрицательные маржины, которые убивают отступы */
  .games__track,
  .live__track{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;   /* отступы уже даёт .container */
    padding-right: 0;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
  }
}
/* ===== MOBILE GLOBAL SPACING + TYPO FIX (put at very end) ===== */
@media (max-width: 768px){

  /* Нормальные "гаттеры" по всему сайту */
  .container{
    margin: 14px auto;          /* вместо 24px */
    padding-left: 14px;
    padding-right: 14px;
  }

  /* HERO: вернуть отступы (у тебя их убило padding:0 на 1024px) */
  .promo-hero{
    border-radius: 18px;
    min-height: 260px;
    padding: 0;                 /* отступы даём inner */
  }

  .promo-hero__inner{
    grid-template-columns: 1fr;
    padding: 18px 16px 86px;    /* сверху/по бокам/место под pills */
    gap: 10px;
    min-height: 260px;
  }

  /* HERO typography: меньше и аккуратнее */
  .promo-hero__title{
    font-size: clamp(26px, 8vw, 40px);
    line-height: 1.05;
    margin: 0 0 8px;
  }
  .promo-hero__subtitle{
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 12px;
  }

  .promo-hero__btn{
    width: 100%;
    max-width: 320px;
    padding: 14px 16px;
  }

  /* Pills: чтобы были в одну строку со свайпом и не "прилипали" */
  .promo-hero__pills{
    left: 0;
    transform: none;
    width: 100%;
    padding: 0 14px;
    bottom: 12px;
  }

  /* Заголовки секций — чтобы не казались огромными */
  .games__title,
  .live__title,
  .tournaments__title,
  .hall__title{
    font-size: 18px;
  }

  /* Chips (категории) — чуть меньше и с нормальными отступами */
  .chips{
    padding: 0 14px;
    margin: 10px -14px 14px; /* чтобы скролл был на всю ширину, но контент с отступом */
  }
  .chip{
    font-size: 12px;
    padding: 10px 14px;
  }

  /* ВАЖНО: не ломаем отступы треков (у тебя были -14px) */
  .games__track,
  .live__track{
    margin: 0;
    padding: 0;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;
  }
}

.bottom-bar__item img {
    width: 20px;
    height: 20px;
}
/* ===== Winners Gallery (new tones) ===== */
#kush-winners-gallery .winners-table{
  width: 100%;
  border-collapse: separate;     /* важно для border-spacing */
  border-spacing: 0 10px;        /* строки как карточки */
  background: transparent;

  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.6;

  color: rgba(236, 229, 214, .82); /* тёплый бежевый текст */
  padding: 12px;
  border-radius: 18px;

  border: 1px solid rgba(200, 166, 120, .22); /* бронзовый кант */
  background:
    radial-gradient(240px 160px at 12% 14%, rgba(47, 74, 116, .22), transparent 60%),
    radial-gradient(260px 180px at 88% 86%, rgba(200, 166, 120, .14), transparent 62%),
    rgba(10, 14, 22, .62);

  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* шапка: сапфир + бронза */
#kush-winners-gallery .winners-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;

  text-align: left;
  padding: 14px 14px;

  color: rgba(248, 244, 234, .93);
  background:
    linear-gradient(180deg, rgba(24, 40, 66, .92), rgba(12, 20, 36, .90));
  border-bottom: 1px solid rgba(200, 166, 120, .22);

  font-weight: 900;
  letter-spacing: .25px;
}

/* строки-карточки */
#kush-winners-gallery .winners-table tbody tr{
  background: rgba(14, 20, 34, .62);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#kush-winners-gallery .winners-table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.60);
}

/* ячейки */
#kush-winners-gallery .winners-table td{
  padding: 14px 14px;
  vertical-align: top;
}

/* скругления строки */
#kush-winners-gallery .winners-table tbody tr td:first-child{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  font-weight: 900;
  color: rgba(245, 238, 221, .92);
  width: 13%;
  min-width: 140px;
}
#kush-winners-gallery .winners-table tbody tr td:last-child{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* тонкие разделители внутри */
#kush-winners-gallery .winners-table tbody tr td + td{
  border-left: 1px solid rgba(255,255,255,.06);
}

/* “Выигрыш” — бронза + метка слева */
#kush-winners-gallery .winners-table tbody td:nth-child(3){
  position: relative;
  padding-left: 18px;
  white-space: nowrap;
  font-weight: 950;
  color: rgba(200, 166, 120, .95);
}

#kush-winners-gallery .winners-table tbody td:nth-child(3)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200, 166, 120, .95), rgba(200, 166, 120, .10));
  opacity: .95;
}

/* дата — чуть холоднее, как “паспортная строка” */
#kush-winners-gallery .winners-table tbody td:nth-child(4){
  white-space: nowrap;
  color: rgba(205, 218, 240, .78);
}

/* цитаты — мягче */
#kush-winners-gallery .winners-table tbody td:nth-child(5),
#kush-winners-gallery .winners-table tbody td:nth-child(6){
  color: rgba(236, 229, 214, .76);
}

/* strong внутри таблицы */
#kush-winners-gallery .winners-table strong{
  color: inherit;
  font-weight: 950;
}

/* мобилка: горизонтальный скролл */
@media (max-width: 960px){
  #kush-winners-gallery .winners-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #kush-winners-gallery .winners-table thead,
  #kush-winners-gallery .winners-table tbody{
    width: max-content;
  }
  #kush-winners-gallery .winners-table th,
  #kush-winners-gallery .winners-table td{
    min-width: 220px;
  }
}
/* ==========================
   KUSH TEXT THEME (sapphire + bronze)
   Applies to all content inside .seo#seo
   ========================== */

.seo#seo{
  /* общий фон страницы (без белого) */
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(200,166,120,.10), transparent 55%),
    radial-gradient(820px 520px at 88% 22%, rgba(47,74,116,.18), transparent 58%),
    radial-gradient(900px 620px at 52% 100%, rgba(0,0,0,.45), transparent 55%),
    #0a0e16;
  color-scheme: dark;
}

.seo#seo .seo__inner{
  /* базовый “дорогой” текст */
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color: rgba(236, 229, 214, .82);
  letter-spacing: .15px;
}

/* убираем влияние чужих стилей/инлайна: всё наследует тон */
.seo#seo .seo__inner :where(p, li, span, a, em, i, b, strong, small, mark, code){
  color: inherit;
  font-family: inherit;
}

/* strong — чуть ярче/плотнее */
.seo#seo .seo__inner strong{
  color: rgba(248, 244, 234, .93);
  font-weight: 950;
}

/* ссылки — бронза */
.seo#seo .seo__inner a{
  color: rgba(200, 166, 120, .95);
  text-decoration-color: rgba(200, 166, 120, .45);
  text-underline-offset: 3px;
}
.seo#seo .seo__inner a:hover{
  text-decoration-color: rgba(200, 166, 120, .80);
}

/* ритм текста */
.seo#seo .seo__inner p{ margin: 0 0 12px; line-height: 1.75; }
.seo#seo .seo__inner ul,
.seo#seo .seo__inner ol{ margin: 10px 0 14px; padding-left: 18px; }
.seo#seo .seo__inner li{ margin: 7px 0; line-height: 1.7; }

/* разделители (hr) в тему */
.seo#seo .seo__inner hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,166,120,.35), transparent);
  opacity: .9;
}

/* “карточки” для секций, чтобы всё было цельно как у таблицы */
.seo#seo .seo__inner section{
  margin: 18px 0;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(220px 160px at 14% 18%, rgba(200,166,120,.07), transparent 62%),
    radial-gradient(260px 180px at 86% 86%, rgba(47,74,116,.12), transparent 62%),
    rgba(10, 14, 22, .55);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* H1 — статусная панель */
.seo#seo .seo__inner h1{
  margin: 0 0 14px;
  padding: 16px 18px 16px 20px;

  border-radius: 22px;
  border: 1px solid rgba(200,166,120,.24);
  background: linear-gradient(180deg, rgba(24,40,66,.85), rgba(12,20,36,.78));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  color: rgba(248, 244, 234, .96);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: .35px;
  font-size: clamp(28px, 4vw, 44px);
  position: relative;
}
.seo#seo .seo__inner h1::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200,166,120,.95), rgba(47,74,116,.30));
}

/* H2 — как заголовок “плашка” */
.seo#seo .seo__inner h2{
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px 14px 18px;

  border-radius: 18px;
  border: 1px solid rgba(200,166,120,.20);
  background: linear-gradient(180deg, rgba(24,40,66,.78), rgba(12,20,36,.70));
  color: rgba(248, 244, 234, .93);

  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .25px;
  box-shadow: 0 14px 40px rgba(0,0,0,.50);
}
.seo#seo .seo__inner h2::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200,166,120,.95), rgba(200,166,120,.10));
}

/* H3/H4 — спокойные подзаголовки */
.seo#seo .seo__inner h3{
  margin: 16px 0 8px;
  color: rgba(232, 238, 250, .86);
  font-weight: 900;
  letter-spacing: .18px;
}
.seo#seo .seo__inner h4{
  margin: 14px 0 6px;
  color: rgba(236, 229, 214, .88);
  font-weight: 900;
}

/* quotes/курсив — чуть светлее */
.seo#seo .seo__inner em{
  color: rgba(232, 238, 250, .82);
  font-style: italic;
}

/* если встречаются инлайн-стили типа font-size:20px; — пусть будет, но приводим к теме */
.seo#seo .seo__inner [style*="font-weight: bold"]{
  color: rgba(248, 244, 234, .93);
}

/* мобильная читаемость */
@media (max-width: 860px){
  .seo#seo .seo__inner{ font-size: 15px; }
  .seo#seo .seo__inner section{ padding: 14px; }
}