/* melbet-official-lk.com - каркас: токены, ресет, шапка (desktop 88 = 44 + 44, mobile 62 + ящик меню), крошки,
   колонки с рейлом "On this page", футер, кнопки/CTA. Контентные секции - site.css. Префикс ml-. Мобайл-фёрст. */

@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/roboto-400.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/roboto-500.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/roboto-700.woff2) format("woff2"); }

:root {
  --ml-bg: #1A1A1A;
  --ml-top: #212121;
  --ml-card: linear-gradient(#292929, #1C1C1C);
  --ml-raise: #2B2B2B;
  --ml-grey: #3B3B3B;
  --ml-grey-hi: #6E6E6E;
  --ml-line: rgba(255, 255, 255, .08);
  --ml-accent: #FFB805;
  --ml-accent-hi: #FFC93D;
  --ml-on-accent: #1A1A1A;
  --ml-on-accent-2: #3B3B3B;
  --ml-text: #FFFFFF;
  --ml-text-2: #E8E8E8;
  --ml-muted: #B3B3B3;
  --ml-link: #FFB805;
  --ml-warn-bg: #FFF3C4;
  --ml-warn-ink: #1A1A1A;
  --ml-warn-sub: #5C4300;
  --ml-red: #E5484D;
  --ml-mono: ui-monospace, Consolas, "Courier New", monospace;
  --ml-font: Roboto, system-ui, "Segoe UI", Arial, sans-serif;
  --ml-r: 8px;
  --ml-gap: 32px;
  --ml-pad: 16px;
  --ml-head: 62px;
  --ml-skew: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 1200px) { :root { --ml-gap: 48px; --ml-pad: 24px; --ml-head: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ml-head) + 16px); }
body { margin: 0; background: var(--ml-bg); color: var(--ml-text); font: 400 16px/1.6 var(--ml-font); overflow-x: hidden; }
body:has(.ml-nav-cb:checked) { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 14px; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--ml-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ml-text); }
:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }
button { font: inherit; }
address { font-style: normal; }

.ml-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ml-skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ml-accent); color: var(--ml-on-accent); font-weight: 700; border-radius: var(--ml-r); text-decoration: none; }
.ml-skip:focus { top: 8px; }
.ml-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--ml-pad); }
.ml-ico { width: 18px; height: 18px; flex: none; }
.ml-nw { white-space: nowrap; }

/* ---------- кнопки, чипы, бейджи ---------- */
.ml-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--ml-r);
  font: 400 15px/1 var(--ml-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.ml-btn--accent { background: var(--ml-accent); color: var(--ml-on-accent); }
.ml-btn--accent:hover { background: var(--ml-accent-hi); color: var(--ml-on-accent); }
.ml-btn--accent:focus-visible { outline-color: var(--ml-on-accent); outline-offset: -4px; }
.ml-btn--grey { background: var(--ml-grey); color: var(--ml-text); }
.ml-btn--grey:hover { background: var(--ml-grey-hi); color: var(--ml-text); }
.ml-btn--l { min-height: 44px; padding: 0 22px; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.ml-btn--xl { min-height: 52px; padding: 0 24px; font-size: 18px; font-weight: 700; }
.ml-btn .ml-ico { width: 16px; height: 16px; }
.ml-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--ml-r); font-size: 13px; text-decoration: none; white-space: nowrap; }
.ml-chip .ml-ico { width: 16px; height: 16px; }
.ml-chip--accent { background: var(--ml-accent); color: var(--ml-on-accent-2); }
.ml-chip--accent:hover { background: var(--ml-accent-hi); color: var(--ml-on-accent); }
.ml-chip--grey { background: var(--ml-grey); color: var(--ml-text); }
.ml-chip--grey .ml-ico { color: var(--ml-accent); }
.ml-chip--grey:hover { background: var(--ml-grey-hi); color: var(--ml-text); }
.ml-age { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 2px solid var(--ml-red); border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--ml-text); }
.ml-age--s { width: 28px; height: 28px; font-size: 10px; border-width: 1.5px; }

/* ---------- шапка: mobile (< 1200) ---------- */
.ml-head { position: sticky; top: 0; z-index: 50; background: var(--ml-top); }
.ml-head__in { display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 var(--ml-pad); }
.ml-burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; margin-left: -8px; border-radius: var(--ml-r); color: var(--ml-text); cursor: pointer; }
.ml-burger .ml-ico { width: 24px; height: 24px; }
.ml-nav-cb:focus-visible ~ .ml-burger { outline: 2px solid var(--ml-accent); outline-offset: 0; }
.ml-logo { display: flex; align-items: center; gap: 6px; flex: none; text-decoration: none; }
.ml-logo__img { width: 100px; height: 18px; }
.ml-logo__flag { width: 24px; height: 16px; }
.ml-head__top { display: none; }
.ml-head__mob { display: flex; gap: 6px; margin-left: auto; }
.ml-head__mob .ml-btn { padding: 0 12px; }
@media (max-width: 380px) {
  .ml-head__in { gap: 6px; }
  .ml-head__mob .ml-btn { padding: 0 8px; font-size: 14px; }
}
@media (max-width: 359px) { .ml-logo__flag { display: none; } }

/* ящик меню (чекбокс + label; JS только закрывает) */
.ml-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(86vw, 340px); padding: 12px 16px 24px; overflow-y: auto; background: var(--ml-bg);
  transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
.ml-nav-cb:checked ~ .ml-menu { transform: none; visibility: visible; }
.ml-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .2s; cursor: pointer; }
.ml-nav-cb:checked ~ .ml-scrim { opacity: 1; visibility: visible; }
.ml-menu__top { position: relative; padding: 4px 0 16px; border-bottom: 1px solid var(--ml-line); }
.ml-menu__close { position: absolute; right: -6px; top: -2px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ml-text); cursor: pointer; border-radius: var(--ml-r); }
.ml-menu__close .ml-ico { width: 22px; height: 22px; }
.ml-menu__dl { margin: 8px 0 10px; font-size: 13px; color: var(--ml-muted); }
.ml-menu__apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-menu__apps .ml-btn { min-height: 40px; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.ml-menu ul { list-style: none; }
.ml-menu__ours { padding: 8px 0; }
.ml-menu__ours :is(a, span[aria-current]) { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--ml-line); color: var(--ml-text); font-size: 16px; font-weight: 500; text-decoration: none; }
.ml-menu__ours .ml-ico { width: 20px; height: 20px; color: var(--ml-accent); }
.ml-menu__ours a:hover { background: var(--ml-raise); color: var(--ml-text); }
.ml-menu__ours [aria-current="page"] { background: var(--ml-grey); color: var(--ml-accent); border-radius: 6px; border-bottom-color: transparent; }
.ml-menu__label { margin: 16px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ml-muted); }
.ml-menu__brand--desk { display: none; }
.ml-menu__brand--mob a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--ml-text-2); font-size: 15px; text-decoration: none; }
.ml-menu__brand--mob a:hover { color: var(--ml-accent); }
.ml-ico--ext { width: 10px; height: 10px; opacity: .7; }

/* ---------- шапка: desktop (>= 1200) ---------- */
@media (min-width: 1200px) {
  .ml-head__in { display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: 44px 44px; gap: 0; height: 88px; padding: 0 0 0 var(--ml-pad); }
  .ml-burger, .ml-head__mob, .ml-scrim, .ml-menu__top, .ml-menu__label, .ml-menu__brand--mob, .ml-menu__home { display: none; }
  .ml-logo { grid-row: 1 / 3; grid-column: 1; gap: 8px; }
  .ml-logo__img { width: 130px; height: 23px; }
  .ml-head__top { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; padding-right: var(--ml-pad); }
  .ml-head__top .ml-btn { height: 32px; min-height: 32px; font-size: 14px; text-transform: uppercase; }
  .ml-head__reg { margin-left: auto; }
  /* скос левого края жёлтой полосы - слоем ::before, чтобы выпадашка MORE не обрезалась clip-path */
  .ml-menu { position: relative; grid-row: 2; grid-column: 2; z-index: 1; display: flex; align-items: center; width: auto; padding: 0 var(--ml-pad) 0 28px; overflow: visible;
    background: none; transform: none; visibility: visible; transition: none; }
  .ml-menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ml-accent); clip-path: var(--ml-skew); }
  .ml-menu__ours { display: flex; align-items: center; padding: 0; }
  .ml-menu__ours :is(a, span[aria-current]), .ml-menu__brand--desk a, .ml-more__btn { display: flex; align-items: center; gap: 6px; height: 32px; min-height: 0; padding: 0 9px; border: 0; border-radius: 6px;
    color: var(--ml-on-accent-2); background: none; font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
  .ml-menu__ours .ml-ico { display: none; width: 16px; height: 16px; color: currentColor; }
  .ml-menu__item--ico .ml-ico { display: block; }
  .ml-menu__ours a:hover, .ml-menu__brand--desk a:hover, .ml-more__btn:hover { background: rgba(0, 0, 0, .08); color: var(--ml-on-accent); }
  .ml-menu__ours [aria-current="page"] { background: var(--ml-grey); color: var(--ml-accent); }
  .ml-menu a:focus-visible, .ml-more__btn:focus-visible { outline: 2px solid var(--ml-on-accent); outline-offset: 0; }
  .ml-menu__brand--desk { display: flex; align-items: center; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(59, 59, 59, .4); }
  .ml-menu__brand--desk a { font-weight: 500; }
  .ml-menu__wide { display: none; }
  .ml-more { position: relative; }
  .ml-more__btn { cursor: pointer; font-weight: 500; }
  .ml-ico--chev { width: 14px; height: 14px; transition: transform .15s; }
  .ml-more__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px; padding: 8px; background: var(--ml-top); border-radius: var(--ml-r);
    border: 1px solid var(--ml-line); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
  .ml-more::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
  .ml-more:hover .ml-more__list, .ml-more:focus-within .ml-more__list, .ml-more__btn[aria-expanded="true"] + .ml-more__list { opacity: 1; visibility: visible; transform: none; }
  .ml-more:hover .ml-ico--chev, .ml-more:focus-within .ml-ico--chev { transform: rotate(180deg); }
  .ml-more__list a { height: 40px; color: var(--ml-text); font-size: 14px; font-weight: 400; }
  .ml-more__list a:hover { background: var(--ml-raise); color: var(--ml-accent); }
  .ml-more__list a:focus-visible { outline-color: var(--ml-accent); }
}
@media (min-width: 1440px) {
  .ml-menu__wide { display: block; }
  .ml-more__narrow { display: none; }
}

/* ---------- крошки ---------- */
.ml-crumbs { display: flex; align-items: center; min-height: 40px; font-size: 13px; color: var(--ml-muted); }
.ml-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; }
.ml-crumbs li + li::before { content: "/"; margin: 0 8px; }
.ml-crumbs a { color: var(--ml-muted); text-decoration: none; }
.ml-crumbs a:hover { color: var(--ml-accent); text-decoration: underline; }
.ml-crumbs [aria-current="page"] { color: var(--ml-text); }

/* ---------- колонки main + рейл "On this page" ---------- */
.ml-cols { padding-bottom: var(--ml-gap); }
.ml-main { min-width: 0; }
.ml-rail { display: none; }
@media (min-width: 1200px) {
  .ml-cols--rail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .ml-rail { display: block; position: sticky; top: 104px; max-height: calc(100vh - 120px); overflow-y: auto; padding-top: 8px; }
  .ml-rail__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ml-muted); }
  .ml-rail ol { list-style: none; border-left: 1px solid var(--ml-line); }
  .ml-rail a { display: block; padding: 6px 12px; margin-left: -1px; border-left: 3px solid transparent; color: var(--ml-muted); font-size: 14px; line-height: 1.35; text-decoration: none; }
  .ml-rail a:hover { color: var(--ml-text); }
  .ml-rail a.is-active, .ml-rail a[aria-current="true"] { color: var(--ml-text); border-left-color: var(--ml-accent); }
  .ml-rail__alert::after { content: " !"; color: var(--ml-accent); font-weight: 700; }
}

/* ---------- футер ---------- */
.ml-foot { border-top: 4px solid var(--ml-accent); background: var(--ml-bg); padding: 32px 0 24px; font-size: 14px; }
.ml-foot ul { list-style: none; }
.ml-foot__cols { display: grid; gap: 24px; }
@media (min-width: 640px) { .ml-foot__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ml-foot__cols { grid-template-columns: repeat(3, 1fr) 300px; } }
.ml-foot__title { margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ml-text); }
.ml-foot__col li + li { margin-top: 10px; }
.ml-foot a { color: var(--ml-text-2); text-decoration: none; }
.ml-foot a:hover { color: var(--ml-accent); text-decoration: underline; }
.ml-foot [aria-current="page"] { color: var(--ml-accent); }
.ml-foot__apps { margin-top: 14px; padding: 14px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-foot__mini { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ml-muted); }
.ml-foot__appbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-foot .ml-btn--accent, .ml-foot .ml-btn--accent:hover { color: var(--ml-on-accent); text-decoration: none; }
.ml-foot .ml-btn--grey, .ml-foot .ml-btn--grey:hover { color: var(--ml-text); text-decoration: none; }
.ml-foot__reg { width: 100%; margin-top: 8px; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.ml-foot__support { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; padding: 14px 16px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-foot__support .ml-ico { width: 22px; height: 22px; color: var(--ml-accent); }
.ml-foot__support .ml-foot__mini { margin: 0; }
.ml-foot__support a { color: var(--ml-text); font-weight: 500; }
.ml-foot__legalnav { font-size: 13px; }
.ml-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ml-line); }
.ml-foot__bottom .ml-foot__copy { margin: 0; }
.ml-foot__legalnav ul { display: flex; flex-wrap: wrap; gap: 6px 0; }
.ml-foot__legalnav li:not(:last-child)::after { content: "|"; margin: 0 10px; color: var(--ml-grey-hi); }
.ml-help { margin-top: 20px; padding: 16px; border: 1px solid var(--ml-line); border-left: 4px solid var(--ml-accent); border-radius: var(--ml-r); }
.ml-help__lead { margin: 0 0 12px; font-size: 15px; }
.ml-help__list { display: grid; gap: 8px; }
.ml-help__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 12px; background: var(--ml-top); border-radius: var(--ml-r); }
@media (min-width: 640px) { .ml-help__list { grid-template-columns: 1fr 1fr; } .ml-help__list li { flex-direction: column; align-items: flex-start; } }
@media (min-width: 1024px) { .ml-help__list { grid-template-columns: repeat(4, 1fr); } }
.ml-help__list a { font-size: 18px; font-weight: 700; color: var(--ml-accent); text-decoration: none; white-space: nowrap; }
.ml-help__list a:hover, .ml-help__list a:focus-visible { text-decoration: underline; }
.ml-help__list span { font-size: 13px; line-height: 1.4; color: var(--ml-muted); }
.ml-foot__note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ml-muted); max-width: 900px; }
.ml-foot__copy { margin: 12px 0 0; color: var(--ml-muted); font-size: 13px; }
.ml-foot__copy small { font-size: inherit; }