/* mostbet-cz.net — слой редизайна.
   Метод: замена стилей на неизменной разметке. Подключается ПОСЛЕ /css/style.css.
   Структурные оси: диагональный ритм полос + карточка, выходящая за свой контейнер. */

:root{
  /* посев дал 121°, но у royals-tiger-de.com в этой же партии 153° — обе читаются
     зелёными. Уходим на 200°, ближайшую свободную дугу; это НЕ утверждение о
     фирменном цвете бренда, а разведение партии. Было #ff7b00 (29°). */
  --mostb-primary:#3aa0c4;
  --mostb-primary-light:#6cc3e0;
  --mostb-primary-dark:#1f6c8a;
  --mostb-primary-alpha-20:rgba(58,160,196,.20);
  --mostb-accent:#e0b23a;
  --mostb-gradient-primary:linear-gradient(112deg,#3aa0c4,#1f6c8a);

  /* mid-tone подложка из посева: светлее обычного тёмного, но не светлая */
  --mostb-bg-dark:#1b2027;
  --mostb-bg-light:#232a33;
  --mostb-bg-card:#212832;
  --mostb-bg-card-hover:#2b3541;

  --mostb-text-primary:#eef2f5;
  --mostb-text-secondary:rgba(238,242,245,.74);
  --mostb-text-muted:rgba(238,242,245,.48);

  --mostb-font-heading:'Chakra Petch',-apple-system,'Segoe UI',sans-serif;
  --mostb-font-body:'Onest',-apple-system,'Segoe UI',sans-serif;

  /* асимметричные скругления: один угол срезан */
  --mostb-radius-sm:10px 10px 10px 0;
  --mostb-radius:14px 14px 14px 0;
  --mostb-radius-lg:20px 20px 20px 0;

  /* шкала 1.414 augmented fourth */
  --rd-s0:1rem; --rd-s1:1.414rem; --rd-s2:2rem;
  --rd-s3:2.828rem; --rd-s4:4rem; --rd-s5:5.657rem;
  --rd-line:rgba(238,242,245,.13);
}

body{
  background-color:var(--mostb-bg-dark);
  background-image:radial-gradient(1000px 560px at 6% 0%,rgba(58,160,196,.11),transparent 60%);
  background-attachment:fixed;
  color:var(--mostb-text-primary);
  font-family:var(--mostb-font-body);
  font-size:1.0625rem;line-height:1.7;
}

h1,h2,h3,[class*="-lead-head"],[class*="-block-head"]{
  font-family:var(--mostb-font-heading);
  font-weight:700;letter-spacing:-.012em;line-height:1.06;
  color:var(--mostb-text-primary);
}
h1{font-size:clamp(2.1rem,5vw,var(--rd-s4));}
h2{font-size:var(--rd-s2);}
h3{font-family:var(--mostb-font-body);font-size:.8rem;font-weight:600;
   text-transform:uppercase;letter-spacing:.16em;color:var(--mostb-primary-light);}
p{max-width:68ch;}
a{color:var(--mostb-primary-light);}

/* ── СТРУКТУРА 1: диагональный ритм полос ───────────────────────────────── */
[class*="-mostb-body-block"]{
  position:relative;
  padding-block:clamp(2.6rem,6vw,var(--rd-s3));
  border:0;
}
/* каждая вторая полоса получает срезанный по диагонали фон — ритм строится
   формой полосы, а не только её фоном */
[class*="-mostb-body-block"]:nth-of-type(even)::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178.4deg,rgba(238,242,245,.05),rgba(238,242,245,.012));
  clip-path:polygon(0 2.2rem,100% 0,100% calc(100% - 2.2rem),0 100%);
}
[class*="-mostb-body-block"]:nth-of-type(even){padding-block:clamp(3.6rem,8vw,var(--rd-s4));}

/* ── СТРУКТУРА 2 + signature: карточка, выходящая за свой контейнер ──────── */
.ffe-mostb-wrap{max-width:1180px;}
[class*="-mostb-live-winners"] .ffe-mostb-wrap,
[class*="-mostb-games-block"] .ffe-mostb-wrap{
  max-width:1340px;                     /* шире соседних полос — карточка вылезает */
}
[class*="-mostb-live-winners"]{
  border-block:1px solid var(--mostb-primary-dark);
  background:linear-gradient(96deg,rgba(58,160,196,.13),transparent 62%);
}

/* ── таблицы ────────────────────────────────────────────────────────────── */
.table-wrapper table{border-collapse:collapse;width:100%;}
.table-wrapper th{
  font-family:var(--mostb-font-heading);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;
  color:var(--mostb-primary-light);
  background:none;border:0;border-bottom:2px solid var(--mostb-primary-dark);
  padding:.7rem .9rem;text-align:left;
}
.table-wrapper td{
  border:0;border-bottom:1px solid var(--rd-line);padding:.9rem;
  background:none;font-variant-numeric:tabular-nums;
}
.table-wrapper td:first-child{color:var(--mostb-text-muted);width:40%;}
.table-wrapper td:last-child{font-family:var(--mostb-font-heading);font-weight:600;font-size:1.1rem;}

/* ── плитки и контролы: срезанный угол везде ────────────────────────────── */
[class*="-slot-tile"],[class*="-mostb-card"]{border-radius:var(--mostb-radius);overflow:hidden;}
[class*="padx-go"],[class*="-act-"],button,.btn{
  border-radius:var(--mostb-radius-sm);
  font-family:var(--mostb-font-heading);font-weight:600;letter-spacing:.02em;
}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.fce-mostb-top{background:rgba(27,32,39,.88);backdrop-filter:blur(9px);border-bottom:1px solid var(--rd-line);}
[class*="-menu-pill"]{border-radius:var(--mostb-radius-sm);font-family:var(--mostb-font-heading);
  text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;}

/* ── движение: оркестрованная последовательность на загрузке ────────────── */
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* ══ ИТЕРАЦИЯ 2 по замечаниям владельца ═══════════════════════════════════ */

/* ── ЛОГОТИП. Он у сайта ЕСТЬ: /images/logo.{png,webp,avif}, 359x62.
   В шапке вместо него стоит глиф ✦ и НЕвыполненный плейсхолдер пайплайна:
     <!-- REPLACE WITH: url('/images/logo.png') no-repeat center / contain -->
   Плейсхолдер лежит на всех 15 страницах и точно так же на старом домене, то
   есть шаг не был выполнен ещё до переезда. Делаем ровно то, что он предписывает. */
.bca-mark-glyph{
  background:url('/images/logo.png') no-repeat center / contain;
  width:150px;height:34px;
  display:block;
}
@supports (background-image:image-set(url('/images/logo.webp') type('image/webp'))){
  .bca-mark-glyph{
    background:image-set(
      url('/images/logo.avif') type('image/avif'),
      url('/images/logo.webp') type('image/webp'),
      url('/images/logo.png')  type('image/png')
    ) no-repeat center / contain;
  }
}
.bca-mark-glyph .dfa-mark-star{display:none;}

/* ── КАРТИНКА ВМЕСТО ГРАДИЕНТА в полосе .dcd-mostb-lead-gradient-strip.
   Готового hero/banner в /images нет (проверено: ноль файлов с banner|hero|promo
   в имени), поэтому взят самый широкий подходящий кадр — скриншот раздела ставок
   2285x1116. Градиент оставлен поверх, иначе текст на картинке нечитаем.
   Кадр «3» отпал: у него только avif и png, без webp — взят «2» с полной тройкой.
   Кадр меняется одной строкой — скажите, какой поставить. */
.dcd-mostb-lead-gradient-strip{
  position:relative;
  background-image:
    linear-gradient(96deg,rgba(27,32,39,.94) 0 42%,rgba(27,32,39,.62) 68%,rgba(27,32,39,.42)),
    url('/images/mostbet_sport%202.webp');
  background-size:cover,cover;
  background-position:center,center 22%;
  background-repeat:no-repeat,no-repeat;
  border:1px solid var(--mostb-primary-dark);
  border-radius:var(--mostb-radius-lg);
  overflow:hidden;
}
.dce-mostb-strip-body{position:relative;z-index:1;}
.eff-mostb-strip-head{
  font-family:var(--mostb-font-heading);
  font-size:clamp(1.9rem,4.2vw,var(--rd-s3));
  letter-spacing:-.02em;line-height:1.04;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.ddc-mostb-strip-cap{
  font-family:var(--mostb-font-body);
  text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;font-weight:600;
  color:var(--mostb-primary-light);
}
.bfa-mostb-strip-text{color:var(--mostb-text-secondary);text-shadow:0 1px 8px rgba(0,0,0,.5);}

/* ── сузить область действия меры набора (в подвале <p> нет, но правило
   всё равно не должно быть глобальным) ─────────────────────────────────── */
p{max-width:none;}
main p{max-width:68ch;}
footer p{max-width:none;}

/* ── ЛОГОТИП СЛЕВА.
   Замер: <header class="fce-mostb-top"> сам является flex-рядом
   (display:flex !important; justify-content:space-between !important; height:80px),
   а .bfa-mostb-menu-main — его flex-ЭЛЕМЕНТ. Элемент сжимается по содержимому,
   поэтому его собственный space-between не работает, и логотип прижимается к
   кнопкам справа. Порядок в разметке при этом верный: .cbf-mark-ref идёт ПЕРЕД
   .eba-top-actions, и на старом домене ровно то же — просто там вместо логотипа
   стоял глиф, и это не бросалось в глаза.

   Лечим не порядком в разметке, а раскладкой: контейнер раскрываем через
   display:contents, его дети становятся элементами шапки, и логотипу задаём
   order:-1 — он уходит в начало ряда, кнопки остаются в конце. */
.fce-mostb-top>.bfa-mostb-menu-main{display:contents;}
.fce-mostb-top>.bfa-mostb-menu-main>.cbf-mark-ref{order:-1;margin-right:auto;}
.fce-mostb-top>.bfa-mostb-menu-main>.eba-top-actions{order:2;}
.cbf-mark-ref{display:flex;align-items:center;}

/* запасной путь для браузеров без display:contents — тот же результат */
@supports not (display:contents){
  .fce-mostb-top>.bfa-mostb-menu-main{flex:1 1 auto;width:100%;max-width:none;}
}