/* Page-level structure: utility bar, header, mobile menu, page bodies, footer.
 * Numbers come from fig-spec on the home frame (4:5, 4:13, 58:2679) and the
 * mobile frame (79:5, 79:16, 99:2). Mobile layout applies at ≤1199px; fixes for
 * widths below the 390 frame live in their own query at the bottom. */

/* ── containers ───────────────────────────────────────────────────────── */
.page {                       /* content pages: 1440 − 2×80 */
  padding-inline: var(--page-pad-wide);
}
.dash {                       /* dashboard pages: feed + bet slip */
  display: flex; gap: var(--dash-gap); align-items: flex-start;
  padding: 24px var(--page-pad) 48px;
}
.dash__feed { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dash__aside { flex: 0 0 var(--betslip-w); width: var(--betslip-w); position: sticky; top: calc(var(--header-h) + 16px); }

/* ── utility bar ──────────────────────────────────────────────────────── */
.utility {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--utility-h); padding: 8px var(--page-pad);
  background: var(--color-bg-deep);
  box-shadow: inset 0 -1px 0 var(--color-border);
  font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted);
}
.utility__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.utility__row--2 { gap: 16px; }
.utility__q { white-space: nowrap; }
.utility__link { position: relative; color: var(--color-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.utility__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.utility__link:hover { color: var(--color-brand); }
.utility__link--mobile, .utility__short { display: none; }
.utility__register { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }

/* ── badges (18+, BetStop) ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs); white-space: nowrap; text-decoration: none;
}
a.badge { position: relative; }
a.badge::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.badge--age {
  padding: 2px 6px; background: var(--color-danger-tint);
  box-shadow: inset 0 0 0 1px var(--color-danger);
  color: var(--color-danger); font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-micro); line-height: 13px;
}
.badge--age-sm { padding: 2px 6px; }
.badge--betstop {
  padding: 2px 8px; background: var(--color-danger-tint);
  box-shadow: inset 0 0 0 1px var(--color-danger);
  color: var(--color-danger); font-weight: 800; font-size: var(--fs-tiny); line-height: 14.3px;
  transition: background-color var(--dur-fast) var(--ease);
}
.badge--betstop:hover { background: rgba(255, 77, 77, .18); }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 16px var(--page-pad);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text-strong); }
.logo__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-brand); color: var(--color-on-brand);
  font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 23px;
}
.logo__word { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25.2px; letter-spacing: -0.02em; }
.logo__accent { color: var(--color-brand); }

.nav__list { display: flex; gap: 24px; }
.nav__link {
  position: relative; display: block;
  font-weight: 600; font-size: var(--fs-body); line-height: 18.2px; color: var(--color-text);
  text-decoration: none; transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-current { color: var(--color-brand); }
.nav__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }
.site-header__user { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--color-text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header__user-icon { width: 16px; height: 16px; color: var(--color-brand); flex: none; }
.btn__short { display: none; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--color-text-strong); cursor: pointer;
  position: relative;
}
.burger::after { content: ""; position: absolute; inset: -12px; }   /* 44×44 tap zone */
.burger__icon { width: 20px; height: 20px; }
.burger__icon--close, .burger[aria-expanded="true"] .burger__icon--open { display: none; }
.burger[aria-expanded="true"] .burger__icon--close { display: block; }

/* ── mobile menu (drawn as a dropdown pushing the page down: 100:410) ─── */
.mobile-menu {
  display: none; background: var(--color-bg);
  box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
.mobile-menu__item + .mobile-menu__item { box-shadow: inset 0 1px 0 rgba(41, 52, 69, .4); }
.mobile-menu__link {
  display: flex; align-items: center; height: 50px; padding: 0 20px;
  font-weight: 500; font-size: 15px; line-height: 20px; color: var(--color-text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mobile-menu__link:hover { background: var(--color-surface); }
.mobile-menu__link.is-current { color: var(--color-brand); background: #080f0a; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-bg); color: var(--color-muted); }
.site-footer > * + * { box-shadow: inset 0 1px 0 var(--color-border); }

.site-footer__brand-links {
  display: flex; justify-content: space-between; gap: 48px;
  padding: 64px var(--page-pad) 48px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; width: 280px; flex: none; }
.logo--footer { gap: 10px; }
.logo--footer .logo__badge { width: 24px; height: 24px; font-size: 14px; line-height: 18px; border-radius: 5px; }
.logo--footer .logo__word { font-size: 16px; line-height: 20.16px; letter-spacing: 0; }
.site-footer__desc { font-size: var(--fs-ui); line-height: 20px; }

.site-footer__cols { display: flex; gap: 56px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-text-strong); text-transform: uppercase; }
.site-footer__list { display: flex; flex-direction: column; gap: 12px; }
.site-footer__link {
  position: relative; display: block; width: fit-content;
  font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__link:hover { color: var(--color-text); }
.site-footer__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }

.site-footer__disclosures { display: flex; flex-direction: column; gap: 32px; padding: 40px var(--page-pad); }
.disclosure { display: flex; flex-direction: column; gap: 16px; }
.disclosure__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-muted); text-transform: uppercase; }
.disclosure__note { font-size: var(--fs-ui); line-height: 17px; color: var(--color-dim); }
.disclosure__warning { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-small); line-height: 18px; color: var(--color-muted); }
.disclosure__warning .badge--age { flex: none; margin-top: 2px; }
.disclosure__warning a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.disclosure__warning a:hover { color: var(--color-brand); }

.rg-badges { display: flex; align-items: center; gap: 12px; }
.rg-badges__betstop { display: block; border-radius: 4px; }
.rg-badges__betstop img { width: 137px; height: 45px; }
.help-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--color-help); color: #fff; text-decoration: none;
  transition: filter var(--dur-fast) var(--ease);
}
.help-pill:hover { filter: brightness(1.12); }
.help-pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--color-help); }
.help-pill__icon .icon { width: 14px; height: 14px; }
.help-pill__text { display: flex; flex-direction: column; gap: 2px; }
.help-pill__label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-tiny); line-height: 14px; }
.help-pill__phone { font-weight: 700; font-size: var(--fs-small); line-height: 16px; color: var(--color-help-text); }
.payment-logos img { width: 267px; height: 42px; }

.site-footer__operator { display: flex; flex-direction: column; gap: 12px; padding: 32px var(--page-pad); }
.site-footer__operator .site-footer__title { text-transform: none; }
.site-footer__operator-text { font-size: var(--fs-ui); line-height: 20.8px; color: var(--color-dim); }

.site-footer__meta { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--page-pad); }
.site-footer__copy { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-dim); }

/* ── mobile & tablet (the 390 frame drives this block) ────────────────── */
@media (max-width: 1199px) {
  .page { padding-inline: var(--page-pad-m); }
  .dash { flex-direction: column; align-items: stretch; gap: 24px; padding: 16px var(--page-pad-m) 32px; }
  .dash__aside { display: none; }           /* the bet slip lives in the bottom sheet */

  .utility {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    height: var(--utility-h-m); padding: 8px var(--page-pad-m);
  }
  .utility__row--1 { gap: 8px; }
  .utility__row--1 .badge--age { font-size: 9px; line-height: 11.34px; }
  .utility__q { white-space: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utility__link--desktop { display: none; }
  .utility__link--mobile { display: inline; }
  .utility__row--2 { justify-content: space-between; gap: 8px; }
  .utility__register { gap: 4px; }
  .utility__register-label { font-size: var(--fs-micro); line-height: 13px; }
  .utility__long { display: none; }
  .utility__short { display: inline; }
  .badge--betstop { font-size: 9px; line-height: 12px; padding: 1px 6px; }
  :root { --color-on-brand: #06080c; }

  .site-header { height: var(--header-h-m); padding: 12px var(--page-pad-m); }
  .logo { gap: 8px; }
  .logo__badge { width: 28px; height: 28px; font-size: 16px; line-height: 20.16px; }
  .logo__word { font-size: 18px; line-height: 23px; }
  .nav { display: none; }
  .site-header__actions { gap: 8px; }
  .site-header__actions .btn--sm { padding-inline: 10px; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
  .burger { display: inline-flex; margin-left: 8px; }
  .mobile-menu { display: block; }

  .site-footer__brand-links { flex-direction: column; gap: 0; padding: 32px var(--page-pad-m) 0; }
  .site-footer__brand { width: auto; gap: 12px; padding-bottom: 24px; }
  .logo--footer { gap: 8px; }
  .site-footer__cols { flex-direction: column; gap: 0; }
  .site-footer__col { gap: 0; box-shadow: inset 0 1px 0 var(--color-border); }
  .site-footer__col:last-child { box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .site-footer__title { padding: 14px 0; }
  .site-footer__list { gap: 0; padding-bottom: 8px; }
  .site-footer__link { display: block; padding: 10px 0; }
  .site-footer__link::after { content: none; }
  .site-footer > * + * { box-shadow: none; }

  .site-footer__disclosures { gap: 0; padding: 0 var(--page-pad-m); }
  .disclosure { padding: 24px 0; }
  .disclosure + .disclosure { padding-top: 0; box-shadow: none; }
  .rg-badges { flex-direction: column; align-items: flex-start; }
  .help-pill { flex-direction: column; justify-content: center; gap: 0; width: 200px; padding: 6px 16px; }
  .help-pill__icon { width: auto; height: auto; background: none; color: #fff; }
  .help-pill__text { align-items: center; }
  .help-pill__label::before { content: "♥ "; }
  .help-pill__icon { display: none; }
  .disclosure__note { font-size: var(--fs-small); line-height: 18px; }

  .site-footer__operator { padding: 24px 0; margin-inline: var(--page-pad-m); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .site-footer__operator-text { line-height: 21px; }
  .site-footer__meta { padding: 20px 0; margin-inline: var(--page-pad-m); }
  .site-footer--bar .site-footer__meta { margin-bottom: 104px; }
}

/* Below the mobile frame there is no reference: only keep things from breaking. */
@media (max-width: 389px) {
  .utility__q { font-size: 10px; }
  .site-footer__meta { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 389px) {
  .disclosure__warning { flex-wrap: wrap; }
  .disclosure__warning-text { overflow-wrap: anywhere; }
}