/* ==========================================================================
   Terrybet — core stylesheet
   Design source: Figma "balirbet 11" (1440 desktop / 390 mobile)
   ========================================================================== */

:root {
  --bg: #0c0d0e;
  --bg-2: #141618;
  --bg-3: #1b1d20;
  --line: #202326;
  --line-2: #24272c;
  --red: #e5322d;
  --red-13: rgba(229, 50, 45, .13);
  --red-10: rgba(229, 50, 45, .10);
  --white: #ffffff;
  --cream: #f5f4f0;
  --cream-line: #e1e0db;
  --paper: #fdfdfb;
  --paper-2: #faf8f5;
  --ink: #0c0d0e;
  --ink-2: #111315;
  --gray: #888e96;
  --gray-2: #525860;
  --green: #10b981;
  --input-line: #d2d6d9;

  --f-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-narrow: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;

  --wrap: 1440px;
  --gutter: 80px;
  --z-header: 40;
  --z-sheet: 80;
  --z-modal: 90;
  --z-cookie: 95;
  --z-agegate: 100;
  --z-toast: 110;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ico { flex: none; display: inline-block; vertical-align: middle; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--red); color: #fff; padding: 8px 12px; font: 700 12px var(--f-sans); }
.skip-link:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.only-m { display: none !important; }
@media (max-width: 1180px) { :root { --gutter: 40px; } }
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .only-d { display: none !important; }
  .only-m { display: block !important; }
}

/* ---------- typography helpers ---------- */
.h-narrow { font-family: var(--f-narrow); font-weight: 700; }
.mono { font-family: var(--f-mono); }
.arrow-link { font: 700 13px var(--f-sans); color: var(--red); white-space: nowrap; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.arrow-link--12 { font-size: 12px; }
.arrow-link--white { color: var(--white); }

/* section index eyebrow: "02 / MARKETS  POPULAR MATCHUPS" */
.sindex { display: flex; align-items: center; gap: 8px; }
.sindex__num { font: 700 12px var(--f-mono); color: var(--red); white-space: nowrap; }
.sindex__label { font: 700 11px var(--f-sans); letter-spacing: 1px; color: var(--gray); text-transform: uppercase; white-space: nowrap; }
.sindex--lg { gap: 12px; }
.sindex--lg .sindex__num { font-size: 14px; }
.sindex--lg .sindex__label { font-size: 12px; letter-spacing: 1.2px; }
.sindex--sm .sindex__num { font-size: 11px; }
.sindex--sm .sindex__label { font-size: 10px; }
.sindex__split { width: 24px; height: 1px; background: var(--line); }
@media (max-width: 767px) { .sindex { flex-wrap: wrap; row-gap: 4px; } .sindex__label { white-space: normal; } }

/* ---------- badges ---------- */
.badge-18 { display: inline-flex; align-items: center; padding: 2px 5px; background: var(--ink); border-radius: 2px; font: 700 10px var(--f-mono); color: #fff; white-space: nowrap; }
.badge-18--sm { padding: 2px 4px; font-size: 9px; border-radius: 1px; }
.badge-18--dark { height: 24px; padding: 0 8px; background: var(--bg-2); border: 1px solid var(--line); font: 800 12px var(--f-mono); }
.badge-18--white { background: #fff; color: var(--ink); padding: 2px 6px; border-radius: 1px; }
.betstop-badge { display: inline-flex; padding: 4px 8px; background: var(--red); border-radius: 1px; font: 700 11px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.debit-badge { display: inline-flex; padding: 3px 8px; background: var(--red-13); border: 1px solid var(--red); font: 800 10px var(--f-mono); color: var(--red); white-space: nowrap; }
.tag { display: inline-flex; padding: 2px 6px; background: var(--red-13); font: 700 10px var(--f-sans); color: var(--red); white-space: nowrap; }
.tag--r1 { border-radius: 1px; }
.tag--mono { font: 700 10px var(--f-mono); }
.tag--dark { background: var(--bg-3); color: var(--gray); font: 700 9px var(--f-mono); }
.counter-badge { display: inline-flex; padding: 2px 6px; background: var(--red); border-radius: 1px; font: 700 10px var(--f-mono); color: #fff; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px; background: var(--red-13); border: 1px solid var(--red); border-radius: 100px; font: 700 10px var(--f-mono); color: var(--red); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; font: 700 13px var(--f-sans); white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn--red { background: var(--red); color: #fff; height: 41px; padding: 0 20px; }
.btn--red:hover { background: #d42c28; }
.btn--outline { border: 1px solid var(--line); color: var(--cream); height: 41px; padding: 0 20px; }
.btn--outline:hover { border-color: var(--gray-2); }
.btn--outline-light { border: 1px solid var(--cream); color: var(--cream); height: 45px; padding: 0 24px; }
.btn--join { height: 32px; padding: 0 16px; font-size: 12px; letter-spacing: .5px; }
.btn--block { width: 100%; }
.btn--lg { height: 46px; padding: 0 24px; font-size: 14px; letter-spacing: .5px; }

/* ---------- odds buttons ---------- */
.odd { display: flex; align-items: center; background: var(--ink); border: 1px solid var(--line); border-radius: 2px; color: var(--gray); transition: border-color .12s, background-color .12s, transform .08s; }
.odd:hover { border-color: var(--gray-2); }
.odd:active { transform: scale(.985); }
.odd__label { font: 700 11px var(--f-sans); color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odd__price { display: inline-flex; align-items: center; gap: 4px; }
.odd__num { font: 800 13px var(--f-mono); color: var(--red); }
.odd__tick { display: none; font: 400 10px var(--f-mono); color: #fff; }
.odd.is-selected { background: var(--red); border-color: var(--red); }
.odd.is-selected .odd__label, .odd.is-selected .odd__num { color: #fff; }
.odd.is-selected .odd__tick { display: inline; }
.odd--notick.is-selected .odd__tick { display: none; }
.odd--row { justify-content: space-between; height: 37px; padding: 0 10px; flex: 1 1 0; min-width: 0; }
.odd--stack { flex-direction: column; justify-content: center; gap: 2px; padding: 0 8px; flex: 1 1 0; min-width: 0; height: 36px; }
.odd--stack .odd__label { flex: none; font-size: 11px; line-height: 14px; text-align: center; width: 100%; }
.odd--stack .odd__price { flex: none; line-height: 16px; }
.odd--stack .odd__num { font-size: 12px; line-height: 16px; }
.odd--flash .odd__num { animation: oddflash .6s; }
@keyframes oddflash { 0% { background: rgba(255,255,255,.25); } 100% { background: transparent; } }

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field__labels label { font: 700 11px var(--f-sans); color: var(--gray-2); }
.field__labels { display: flex; justify-content: space-between; align-items: flex-start; }
.field__link { font: 700 10px var(--f-sans); color: var(--red); }
.field__hint { font: 400 11px var(--f-sans); color: var(--gray); }
.field__err { display: none; font: 400 11px var(--f-sans); color: var(--red); }
.field.is-invalid .field__err, .field__err.is-visible { display: block; }
.field.is-invalid .input { border-color: var(--red); }
.input { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; background: #fff; border: 1px solid var(--input-line); border-radius: 2px; transition: border-color .15s; }
.input:focus-within { border-color: var(--ink); }
.input input, .input select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; font: 400 13px var(--f-sans); color: var(--ink); }
.input input::placeholder { color: var(--gray); }
.input select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 20px; }
.input select:invalid, .input select.is-placeholder { color: var(--gray); }
.input--select { position: relative; }
.input--select .ico { position: absolute; right: 16px; color: var(--gray-2); pointer-events: none; }
.input__prefix { font: 400 13px var(--f-sans); color: var(--ink); }
.input__show { font: 700 10px var(--f-mono); color: var(--ink); }
.input__show--red { font-size: 11px; color: var(--red); }
.input--stake { background: var(--cream); }
.input--stake > span { font: 700 14px var(--f-mono); color: var(--ink); margin-right: 8px; }
.input--stake input::placeholder { color: var(--gray-2); }
.form__error { padding: 10px 12px; background: var(--red-13); border: 1px solid var(--red); border-radius: 2px; font: 400 12px var(--f-sans); color: var(--red); }

/* checkbox */
.check { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; font: 400 13px/18px var(--f-sans); color: var(--ink); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #fff; border: 2px solid var(--input-line); border-radius: 2px; color: #fff; transition: background-color .12s, border-color .12s; }
.check__box .ico { opacity: 0; }
.check input:checked + .check__box { background: var(--red); border-color: var(--red); }
.check input:checked + .check__box .ico { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--red); outline-offset: 2px; }
.check em { font-style: normal; color: var(--red); }
.check a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.check.is-invalid .check__box { border-color: var(--red); }

/* toggle */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--line); border: 1px solid var(--gray-2); transition: background-color .15s, border-color .15s; }
.toggle__thumb { position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); transition: transform .15s; }
.toggle input:checked ~ .toggle__track { background: var(--red); border-color: var(--red); }
.toggle input:checked ~ .toggle__track .toggle__thumb { transform: translateX(20px); }
.toggle__state { font: 700 11px var(--f-mono); color: var(--gray); min-width: 20px; }
.toggle input:checked ~ .toggle__state { color: var(--red); }
.toggle input:focus-visible ~ .toggle__track { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.logo__word { font: 700 24px var(--f-narrow); letter-spacing: -.5px; color: #fff; }
.logo__badge { display: inline-flex; padding: 2px 4px; background: var(--red); border-radius: 1px; font: 700 14px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.logo--lg .logo__word { font-size: 26px; }
.logo--sm .logo__word { font-size: 22px; color: var(--cream); }
.logo--sm .logo__badge { font-size: 13px; }
.logo--xs { gap: 4px; }
.logo--xs .logo__word { font-size: 20px; }
.logo--xs .logo__badge { padding: 1px 4px; font-size: 12px; }

/* ==========================================================================
   RG utility bar
   ========================================================================== */
.rg-bar { background: var(--cream); box-shadow: inset 0 -1px 0 var(--cream-line); color: var(--ink); }
.rg-bar__in { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.rg-bar__left { display: flex; align-items: center; gap: 12px; }
.rg-bar__right { display: flex; align-items: center; gap: 20px; }
.rg-bar__strong { font: 700 11px var(--f-sans); letter-spacing: .5px; }
.rg-bar__muted { font: 400 11px var(--f-sans); color: var(--gray-2); }
.rg-bar__link { font: 700 11px var(--f-sans); color: var(--red); }
.rg-bar__plain { font: 400 11px var(--f-sans); }
.rg-bar__m-left, .rg-bar__m-notice, .rg-bar__m-help { display: none; }
@media (max-width: 1023px) {
  .rg-bar__muted, .rg-bar__plain:first-of-type { display: none; }
}
@media (max-width: 767px) {
  .rg-bar__in { height: 32px; }
  .rg-bar__left, .rg-bar__right { display: none; }
  .rg-bar__m-left { display: flex; align-items: center; gap: 8px; }
  .rg-bar__m-link { font: 700 10px var(--f-sans); color: var(--ink); white-space: nowrap; }
  .rg-bar__m-notice { display: block; font: 700 8px var(--f-narrow); color: var(--red); white-space: nowrap; }
  .rg-bar__m-help { display: block; font: 400 10px var(--f-sans); color: var(--gray-2); white-space: nowrap; }
  .rg-bar__m-help b { color: var(--ink); }
}
@media (max-width: 374px) { .rg-bar__m-notice { display: none; } }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.hdr__left { display: flex; align-items: center; gap: 48px; }
.hdr__nav { display: flex; align-items: center; gap: 28px; }
.hdr__navlink { display: block; padding: 8px 0; font: 700 13px var(--f-narrow); letter-spacing: 1px; color: var(--cream); transition: color .15s; }
.hdr__navlink:hover, .hdr__navlink.is-active { color: var(--red); }
.hdr__right { display: flex; align-items: center; gap: 32px; }
.hdr__sub { display: flex; align-items: center; gap: 20px; }
.hdr__sub a { font: 400 12px var(--f-sans); color: var(--gray); }
.hdr__sub a:hover { color: var(--cream); }
.hdr__account { display: flex; align-items: center; gap: 16px; }
.hdr__login { font: 700 13px var(--f-sans); color: #fff; }
.hdr__login:hover { color: var(--red); }
.hdr__burger { display: none; color: #fff; }
/* logged-in */
.hdr__balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; gap: 3px; }
.hdr__balance-label { font: 700 9px var(--f-mono); letter-spacing: 1px; color: var(--gray); }
.hdr__balance-val { font: 800 13px var(--f-mono); color: var(--green); }
.acct { position: relative; }
.acct__btn { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 2px; color: #fff; font: 700 12px var(--f-sans); background: var(--bg-2); }
.acct__btn:hover { border-color: var(--gray-2); }
.acct__avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--red); border-radius: 2px; font: 700 12px var(--f-narrow); }
.acct__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 5; }
.acct__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font: 400 11px var(--f-sans); color: var(--gray); }
.acct__meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__verified { flex: none; padding: 2px 6px; border-radius: 1px; background: rgba(16,185,129,.15); font: 700 9px var(--f-mono); color: var(--green); }
.acct__verified.is-pending { background: var(--red-13); color: var(--red); }
.acct__menu a, .acct__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 2px; font: 400 13px var(--f-sans); color: var(--cream); }
.acct__menu a:hover, .acct__menu button:hover { background: var(--bg-3); }
.acct__menu button { color: var(--gray); }
@media (max-width: 1180px) {
  .hdr__left { gap: 28px; }
  .hdr__right { gap: 20px; }
  .hdr__sub { display: none; }
}
@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
}
@media (max-width: 767px) {
  .hdr__in { height: 52px; }
  .hdr .logo { gap: 4px; }
  .hdr .logo__word { font-size: 20px; }
  .hdr .logo__badge { padding: 1px 3px; font-size: 11px; }
  .hdr__account { gap: 16px; }
  .hdr__login { font-size: 12px; }
  .hdr .btn--join { padding: 6px 12px; letter-spacing: 0; }
  .hdr__balance { display: none; }
  .acct__name { display: none; }
  .acct__btn { padding: 0 6px 0 3px; height: 28px; }
  .acct__avatar { width: 20px; height: 20px; font-size: 11px; }
  .acct__menu { position: fixed; left: 16px; right: 16px; top: 92px; width: auto; }
}

/* ==========================================================================
   Responsible gambling section (cream)
   ========================================================================== */
.rg-sec { background: var(--cream); border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line); color: var(--ink); padding: 64px 0; }
.rg-sec__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.rg-sec__title { font: 700 36px var(--f-narrow); color: var(--ink); }
.rg-sec__lead { font: 400 14px var(--f-sans); color: var(--gray-2); }
.rg-sec__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rg-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--cream-line); border-radius: 1px; }
.rg-card__head { display: flex; justify-content: space-between; align-items: center; }
.rg-card__head h3 { font: 700 14px var(--f-narrow); color: var(--ink); }
.rg-card__head span { font: 400 11px var(--f-mono); color: var(--gray-2); }
.rg-card p { font: 400 12px/18px var(--f-sans); color: var(--gray-2); }
.rg-card a { font: 700 12px var(--f-sans); color: var(--red); }
.rg-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rg-pill { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 4px 8px; background: var(--red-10); border: 1px solid var(--red); border-radius: 1px; font: 700 10px var(--f-mono); color: var(--red); }
@media (max-width: 1023px) { .rg-sec__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .rg-sec { padding: 32px 0; }
  .rg-sec__head { margin-bottom: 24px; }
  .rg-sec__title { font-size: 26px; }
  .rg-sec__lead { font-size: 13px; line-height: 18px; }
  .rg-sec__grid { grid-template-columns: 1fr; gap: 12px; }
  .rg-card { padding: 16px; gap: 12px; border-radius: 2px; }
  .rg-card__head h3 { font-size: 13px; }
  .rg-card p { line-height: 16px; }
}

/* ==========================================================================
   Strips (support / betstop / payments)
   ========================================================================== */
.strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.strip--betstop { background: var(--bg-2); }
.strip__in { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding-top: 24px; padding-bottom: 24px; gap: 24px; }
.strip--betstop .strip__in { min-height: 71px; }
.strip--payments .strip__in { min-height: 88px; }
.strip__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.strip--betstop .strip__left { gap: 16px; }
.strip__title { font: 700 14px var(--f-narrow); letter-spacing: 1px; color: #fff; }
.strip__phone { font: 700 14px var(--f-narrow); letter-spacing: 1px; color: var(--red); }
.strip__muted { font: 400 12px var(--f-sans); color: var(--gray); }
.strip__bold { font: 700 13px var(--f-sans); color: #fff; }
.strip__cta { font: 700 13px var(--f-sans); color: var(--red); white-space: nowrap; }
.strip__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.strip__label { font: 700 12px var(--f-narrow); letter-spacing: 1px; color: var(--gray); white-space: nowrap; }
.strip__logos img { width: 300px; height: 40px; object-fit: cover; }
.strip__right { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1023px) {
  .strip__in { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 767px) {
  .strip__in { display: block; padding: 16px 0; min-height: 0; }
  .strip__left { display: grid; gap: 12px; }
  .strip--support .strip__left { grid-template-columns: 1fr; }
  .strip--support .strip__left .badge-18 { display: none; }
  .strip--support .strip__title { order: 1; }
  .strip--support .strip__title::before { content: '18+'; display: inline-flex; margin-right: 12px; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; font: 800 12px var(--f-mono); color: #fff; vertical-align: middle; }
  .strip--support .strip__phone { order: 2; font-size: 20px; letter-spacing: 0; }
  .strip--support .strip__muted { order: 3; }
  .strip--betstop .strip__left { grid-template-columns: 1fr; gap: 12px; }
  .strip--betstop .betstop-badge { justify-self: start; }
  .strip--betstop .strip__bold { margin-top: -33px; margin-left: 67px; min-height: 23px; display: flex; align-items: center; }
  .strip--betstop .strip__muted { line-height: 16px; }
  .strip--betstop .strip__cta { display: inline-block; margin-top: 12px; font-size: 12px; }
  .strip--payments .strip__label { display: block; font-size: 12px; }
  .strip--payments .strip__in { position: relative; }
  .strip--payments .strip__right { position: absolute; right: var(--gutter); top: 16px; }
  .strip--payments .strip__right .strip__muted { display: none; }
  .strip--payments .debit-badge { padding: 2px 6px; font-size: 9px; }
  .strip__logos { margin: 12px 0; }
  .strip__logos img { width: 200px; height: 26px; object-fit: contain; object-position: left; }
  .strip--payments::after { content: 'Credit cards are not accepted for online betting in Australia.'; display: block; padding: 0 var(--gutter) 16px; margin-top: -4px; font: 400 11px var(--f-sans); color: var(--gray); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--bg); padding: 64px 0 40px; }
.ftr__top { display: grid; grid-template-columns: 320px repeat(4, 1fr); gap: 48px; }
.ftr__brand { display: flex; flex-direction: column; gap: 16px; }
.ftr__region { font: 700 11px var(--f-sans); letter-spacing: .5px; color: var(--gray-2); text-transform: uppercase; }
.ftr__brand p { font: 400 12px/18px var(--f-sans); color: var(--gray); }
.ftr__col-head { display: block; width: 100%; font: 700 12px var(--f-narrow); letter-spacing: 1px; color: #fff; cursor: default; pointer-events: none; }
.ftr__plus { display: none; }
.ftr__links { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ftr__links a { font: 400 13px var(--f-sans); color: var(--gray); }
.ftr__links a:hover { color: var(--cream); }
.ftr__rule { margin: 48px 0; }
.ftr__bottom { display: flex; flex-direction: column; gap: 12px; }
.ftr__legal { font: 400 11px/16px var(--f-sans); color: var(--gray-2); }
.ftr__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 400 11px var(--f-sans); color: var(--gray-2); }
.ftr__red { font-weight: 700; color: var(--red); }
@media (max-width: 1023px) {
  .ftr__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ftr { padding: 32px 0 90px; }
  .ftr__top { display: block; }
  .ftr__brand { gap: 12px; margin-bottom: 32px; }
  .ftr .logo--lg .logo__word { font-size: 24px; }
  .ftr .logo--lg .logo__badge { padding: 1px 3px; }
  .ftr__region { font-size: 10px; margin-top: 0; }
  .ftr__col { background: var(--bg); border-bottom: 1px solid var(--line); }
  .ftr__col:first-of-type { border-top: 1px solid var(--line); }
  .ftr__col-head { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 14px 12px; font-size: 13px; cursor: pointer; pointer-events: auto; }
  .ftr__plus { display: inline; font: 400 14px var(--f-sans); color: var(--gray); transition: transform .2s; }
  .ftr__col-head[aria-expanded="true"] .ftr__plus { transform: rotate(45deg); }
  .ftr__links { display: none; margin: 0; padding: 0 12px 14px; gap: 10px; }
  .ftr__col.is-open .ftr__links { display: flex; }
  .ftr__rule { display: none; }
  .ftr__bottom { margin-top: 32px; gap: 16px; }
  .ftr__legal { font-size: 10px; line-height: 14px; }
  .ftr__row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   Bet slip (shared component; desktop sidebar + mobile sheet)
   ========================================================================== */
.betslip { display: flex; flex-direction: column; gap: 20px; padding: 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.betslip__head { display: flex; justify-content: space-between; align-items: center; }
.betslip__head h3 { font: 700 20px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.slip { display: flex; flex-direction: column; gap: 20px; }
.slip__empty { display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; border: 1px dashed var(--line); border-radius: 2px; }
.slip__empty b { font: 700 13px var(--f-sans); color: var(--cream); }
.slip__empty p { font: 400 12px/18px var(--f-sans); color: var(--gray); }
.sel { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--ink); border: 1px solid var(--line); border-radius: 2px; }
.sel__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sel__meta .tag { font-size: 9px; }
.sel__event { flex: 1; font: 400 11px var(--f-sans); color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__remove { font: 400 11px var(--f-sans); color: var(--gray-2); white-space: nowrap; }
.sel__remove:hover { color: var(--red); }
.sel__odds { display: flex; flex-direction: column; gap: 2px; }
.sel__market { font: 400 12px var(--f-sans); color: var(--gray); }
.sel__line { display: flex; justify-content: space-between; align-items: center; }
.sel__runner { font: 700 14px var(--f-sans); color: #fff; }
.sel__price { font: 800 15px var(--f-mono); color: var(--red); }
.slip__multi { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 2px; font: 400 11px var(--f-sans); color: var(--gray); }
.slip__multi b { font: 800 13px var(--f-mono); color: var(--cream); }
.stake { display: flex; flex-direction: column; gap: 8px; }
.stake label { font: 700 11px var(--f-sans); letter-spacing: 1px; color: var(--gray); }
.stake__input { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 2px; }
.stake__input:focus-within { border-color: var(--gray-2); }
.stake__input > span { font: 700 14px var(--f-sans); color: #fff; }
.stake__input input { width: 100%; text-align: right; border: 0; background: transparent; outline: 0; font: 700 14px var(--f-mono); color: #fff; }
.stake__quick { display: flex; gap: 6px; }
.stake__quick button { flex: 1; height: 26px; border: 1px solid var(--line); border-radius: 2px; font: 700 11px var(--f-mono); color: var(--gray); }
.stake__quick button:hover { color: #fff; border-color: var(--gray-2); }
.slip__rule { border-top: 1px solid var(--line); }
.slip__return { display: flex; justify-content: space-between; align-items: center; }
.slip__return span { font: 400 12px var(--f-sans); color: var(--gray); }
.slip__return b { font: 800 18px var(--f-mono); color: var(--green); }
.slip__place { display: flex; align-items: center; justify-content: center; height: 46px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-sans); letter-spacing: .5px; color: #fff; }
.slip__place:hover { background: #d42c28; }
.slip__place:disabled { opacity: .45; }
.slip__helper { display: flex; flex-direction: column; gap: 4px; }
.slip__helper span { font: 400 10px var(--f-sans); color: var(--gray); }
.slip__helper a { font: 700 11px var(--f-sans); color: var(--red); }
.slip__msg { padding: 10px 12px; border-radius: 2px; font: 400 12px/16px var(--f-sans); }
.slip__msg--warn { background: var(--red-13); border: 1px solid var(--red); color: var(--red); }
.slip__msg--ok { background: rgba(16,185,129,.12); border: 1px solid var(--green); color: var(--green); }

/* mobile sticky slip bar + sheet */
.slipbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); display: none; align-items: center; justify-content: space-between; height: 54px; padding: 14px 16px 20px; background: var(--bg-2); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.slipbar__left { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-narrow); color: #fff; }
.slipbar__left .counter-badge { font-size: 9px; }
.slipbar__right { font: 800 13px var(--f-mono); color: var(--red); }
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet__dim { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; animation: sheetup .25s ease-out; }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__handle { display: flex; justify-content: center; padding: 8px 0; }
.sheet__handle i { width: 36px; height: 4px; border-radius: 2px; background: var(--line); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet__title { display: flex; align-items: center; gap: 8px; font: 700 20px var(--f-narrow); color: #fff; }
.sheet__title .counter-badge { font-size: 9px; }
.sheet__close { color: var(--gray); padding: 6px; }
.sheet__body { overflow: auto; padding: 16px 16px 24px; }
@media (max-width: 1023px) {
  body.has-slip .slipbar { display: flex; }
  body.has-slip { padding-bottom: 54px; }
}

/* ==========================================================================
   Age gate
   ========================================================================== */
.agegate { position: fixed; inset: 0; z-index: var(--z-agegate); display: flex; align-items: center; justify-content: center; background: #060708; overflow: auto; }
.agegate__modal { display: flex; width: 680px; height: 480px; background: #121417; border: 1px solid var(--line-2); overflow: hidden; }
.agegate__accent { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 238px; padding: 24px; background: var(--red); }
.agegate__big { font: 700 100px/1 var(--f-narrow); letter-spacing: -2px; color: #fff; }
.agegate__restricted { font: 700 11px var(--f-mono); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.agegate__body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.agegate__rule { border-color: var(--line-2); }
.agegate__prompt { display: flex; flex-direction: column; gap: 8px; }
.agegate__prompt h2 { font: 700 24px var(--f-narrow); letter-spacing: .5px; color: var(--cream); }
.agegate__prompt p { font: 400 13px/18px var(--f-sans); color: var(--gray); }
.agegate__small { font-size: 12px !important; color: var(--gray-2) !important; }
.agegate__actions { display: flex; flex-direction: column; gap: 10px; }
.agegate__yes { height: 45px; background: var(--cream); border-radius: 2px; font: 700 13px var(--f-sans); letter-spacing: .5px; color: #060708; text-align: center; }
.agegate__yes:hover { background: #fff; }
.agegate__no { height: 45px; border: 1px solid var(--line-2); border-radius: 2px; font: 600 13px var(--f-sans); letter-spacing: .5px; color: var(--gray); text-align: center; }
.agegate__no:hover { color: var(--cream); border-color: var(--gray-2); }
.agegate__denied { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--red-13); border: 1px solid var(--red); border-radius: 2px; }
.agegate__denied strong { font: 700 13px var(--f-narrow); letter-spacing: 1px; color: var(--red); }
.agegate__denied p { font: 400 12px/17px var(--f-sans); color: var(--cream); }
.agegate__helpline { font: 700 12px var(--f-sans); color: var(--red); }
.agegate__spacer { flex: 1; }
.agegate__foot { display: flex; flex-direction: column; gap: 4px; }
.agegate__foot p { font: 400 11px/14px var(--f-sans); color: var(--gray-2); }
.agegate__foot a { font: 700 11px var(--f-sans); color: var(--red); }
@media (max-width: 767px) {
  .agegate { align-items: stretch; }
  .agegate__modal { flex-direction: column; width: 100%; height: auto; min-height: 100%; border: 0; }
  .agegate__accent { width: 100%; height: 210px; }
  .agegate__big { font-size: 80px; }
  .agegate__body { padding: 24px; }
  .agegate__prompt h2 { font-size: 26px; }
  .agegate__prompt p { font-size: 14px; line-height: 20px; }
  .agegate__small { font-size: 13px !important; line-height: 18px !important; }
  .agegate__yes { height: 47px; border-radius: 4px; }
  .agegate__no { border-radius: 4px; }
}

/* ==========================================================================
   Cookie consent drawer
   ========================================================================== */
.cookie { position: fixed; inset: 0; z-index: var(--z-cookie); }
.cookie__overlay { position: absolute; inset: 0; background: rgba(6,7,8,.25); }
.cookie__drawer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid #2d3035; border-bottom: 0; border-radius: 8px 8px 0 0; animation: sheetup .3s ease-out; max-height: 100%; overflow: auto; }
.cookie__bar { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.cookie__brand { display: flex; align-items: center; gap: 8px; }
.cookie__brand span:first-child { font: 700 12px var(--f-narrow); letter-spacing: 1.5px; color: var(--cream); }
.cookie__brand i { width: 1px; height: 12px; background: var(--gray-2); }
.cookie__brand span:last-child { font: 500 11px var(--f-sans); letter-spacing: 1px; color: var(--gray); }
.cookie__rev { font: 400 10px var(--f-mono); color: var(--gray); }
.cookie__grid { display: flex; gap: 64px; padding: 32px var(--gutter) 40px; }
.cookie__left { flex: none; width: 480px; display: flex; flex-direction: column; gap: 24px; }
.cookie__headblock { display: flex; flex-direction: column; gap: 8px; }
.cookie__tag { display: flex; align-items: center; gap: 4px; font: 400 10px var(--f-mono); color: var(--gray); }
.cookie__tag b { font-weight: 700; letter-spacing: 1.5px; color: var(--red); }
.cookie__tag span:first-of-type { color: var(--gray-2); }
.cookie__headblock h2 { font: 700 36px/36px var(--f-narrow); color: var(--cream); }
.cookie__statement { display: flex; flex-direction: column; gap: 16px; }
.cookie__statement p { font: 400 13px/20px var(--f-sans); color: var(--gray); }
.cookie__links { display: flex; gap: 20px; }
.cookie__links a { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--f-narrow); letter-spacing: 1px; color: var(--red); }
.cookie__status { display: flex; align-items: center; gap: 6px; padding-top: 12px; font: 400 10px var(--f-mono); letter-spacing: 1px; color: var(--gray-2); }
.cookie__status b { color: var(--red); }
.cookie__right { flex: 1; display: flex; flex-direction: column; }
.cookie__row { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cookie__row:first-child { border-top: 0; }
.cookie__rowleft { display: flex; align-items: center; gap: 20px; }
.cookie__num { font: 700 24px var(--f-narrow); letter-spacing: .5px; color: var(--red); }
.cookie__rowleft b { display: block; font: 700 14px var(--f-narrow); letter-spacing: 1px; color: var(--cream); }
.cookie__rowleft p { margin-top: 4px; font: 400 12px var(--f-sans); color: var(--gray); }
.cookie__always { padding: 4px 8px; background: var(--line); border: 1px solid var(--gray-2); border-radius: 2px; font: 700 10px var(--f-mono); letter-spacing: .5px; color: var(--cream); }
.cookie__actions { display: flex; justify-content: flex-end; gap: 16px; padding-top: 24px; }
.cookie__reject { height: 42px; padding: 0 20px; border: 1px solid var(--gray-2); border-radius: 2px; font: 700 13px var(--f-narrow); letter-spacing: 1px; color: var(--cream); }
.cookie__reject:hover { border-color: var(--cream); }
.cookie__save { height: 42px; padding: 0 24px; background: var(--red); border-radius: 2px; font: 700 13px var(--f-narrow); letter-spacing: 1px; color: var(--cream); }
.cookie__save:hover { background: #d42c28; }
@media (max-width: 1023px) {
  .cookie__grid { flex-direction: column; gap: 24px; }
  .cookie__left { width: auto; }
}
@media (max-width: 767px) {
  .cookie__overlay { background: var(--bg); }
  .cookie__drawer { top: 0; border: 0; border-radius: 0; }
  .cookie__bar { height: 56px; padding: 0 20px; background: #1c1e22; }
  .cookie__brand span:last-child { font-size: 10px; }
  .cookie__grid { flex: 1; padding: 24px 20px 20px; gap: 20px; }
  .cookie__left { gap: 20px; }
  .cookie__headblock h2 { font-size: 32px; line-height: 34px; }
  .cookie__statement p { font-size: 13px; line-height: 18px; }
  .cookie__links { flex-direction: column; gap: 6px; }
  .cookie__links a { height: 44px; align-items: center; }
  .cookie__status { padding-top: 0; }
  .cookie__right { border-top: 1px solid var(--line); padding-top: 4px; }
  .cookie__row { height: auto; flex-wrap: wrap; padding: 16px 0; }
  .cookie__rowleft { align-items: flex-start; gap: 12px; width: 100%; }
  .cookie__rowleft p { margin-top: 8px; }
  .cookie__num { font-size: 20px; }
  .cookie__row .toggle, .cookie__row .cookie__always { position: absolute; right: 0; top: 16px; }
  .cookie__row { position: relative; }
  .cookie__actions { flex-direction: column; gap: 12px; margin: 0 -20px -20px; padding: 16px 20px 24px; background: #1c1e22; border-top: 1px solid var(--line); }
  .cookie__reject, .cookie__save { height: 46px; width: 100%; }
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.mmenu { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--bg); display: flex; flex-direction: column; overflow: auto; }
.mmenu__head { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 16px; border-bottom: 1px solid var(--line); }
.mmenu__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; }
.mmenu__primary { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.mmenu__primary a { display: block; padding: 18px 24px; font: 700 18px var(--f-narrow); letter-spacing: 1px; color: var(--cream); }
.mmenu__primary a.is-active { color: var(--red); }
.mmenu__secondary { display: flex; flex-direction: column; padding: 12px 0; }
.mmenu__secondary a { display: block; padding: 12px 24px; font: 400 14px var(--f-sans); color: var(--gray); }
.mmenu__actions { margin-top: auto; padding: 20px; }
.mmenu__actions > div { display: flex; flex-direction: column; gap: 12px; }
.mmenu__login { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--line); border-radius: 2px; font: 700 14px var(--f-sans); color: #fff; }
.mmenu__join { display: flex; align-items: center; justify-content: center; height: 46px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-sans); color: #fff; }
.mmenu__userbox { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; font: 700 13px var(--f-sans); color: #fff; }
.mmenu__userbox span:last-child { font: 800 13px var(--f-mono); color: var(--green); }
.mmenu__foot { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--bg-2); border-top: 1px solid var(--line); }
.mmenu__foot p { font: 400 11px var(--f-sans); color: var(--gray); }
.mmenu__foot div { display: flex; align-items: center; gap: 8px; }
.mmenu__foot a { font: 700 11px var(--f-sans); color: var(--red); }
.mmenu__foot span { font: 400 11px var(--f-sans); color: var(--gray-2); }

/* ==========================================================================
   Modals (login / register / verify)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.modal__dim { position: absolute; inset: 0; background: rgba(12,13,14,.8); }
.modal__dim--photo { background: rgba(5,6,7,.85) url('../img/verify-bg.jpg') center/cover no-repeat; background-blend-mode: multiply; }
.modal__x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--ink); }
.modal__x:hover { color: var(--red); }

/* ---- login ---- */
.login { position: relative; display: flex; width: 720px; height: 540px; border-radius: 2px; overflow: hidden; animation: modalin .2s ease-out; }
@keyframes modalin { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.login__left { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 252px; padding: 24px; background: var(--bg-2); border-right: 1px solid var(--line); }
.login__lefttop { display: flex; flex-direction: column; gap: 20px; }
.login__lefttop .logo { gap: 4px; }
.login__lefttop .logo__word { font-size: 20px; color: #fff; }
.login__lefttop .logo__badge { padding: 1px 4px; font-size: 12px; }
.login__index { display: flex; align-items: center; gap: 8px; }
.login__index span:first-child { font: 700 11px var(--f-mono); color: var(--red); }
.login__index span:last-child { font: 700 10px var(--f-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
.login__leftmid h2 { font: 700 72px/64px var(--f-narrow); color: #fff; }
.login__leftmid p { margin-top: 0; font: 400 12px var(--f-sans); color: var(--gray); }
.login__leftbot { display: flex; flex-direction: column; gap: 8px; }
.login__leftbot p { font: 400 10px/14px var(--f-sans); color: var(--gray-2); }
.login__right { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: var(--cream); color: var(--ink); }
.login__head { position: relative; display: flex; flex-direction: column; gap: 6px; }
.login__head .modal__x { position: absolute; right: 0; top: 0; }
.login__eyebrow { font: 700 9px var(--f-mono); letter-spacing: 1.5px; color: var(--red); }
.login__head h3 { font: 700 24px var(--f-narrow); color: var(--ink); }
.login__head p { font: 400 12px var(--f-sans); color: var(--gray-2); }
.login__fields { display: flex; flex-direction: column; gap: 16px; }
.login__fields .field label, .login__fields .field__labels label { font: 700 10px var(--f-sans); letter-spacing: .5px; color: var(--ink); }
.login__fields .input { height: 44px; padding: 0 14px; }
.login__cta { display: flex; flex-direction: column; gap: 12px; }
.login__cta hr { border-color: var(--input-line); }
.login__submit { height: 45px; padding: 0; font-size: 13px; }
.login__signup { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.login__signup div { display: flex; flex-direction: column; gap: 2px; }
.login__signup b { font: 700 13px var(--f-narrow); color: var(--ink); }
.login__signup span { font: 400 11px var(--f-sans); color: var(--gray-2); }
.login__create { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--f-sans); color: var(--red); white-space: nowrap; }
@media (max-width: 767px) {
  .modal { padding: 0; align-items: stretch; }
  .login { flex-direction: column; width: 100%; height: auto; min-height: 100%; border-radius: 0; }
  .login__left { width: auto; height: auto; gap: 20px; padding: 24px 20px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .login__lefttop { gap: 12px; }
  .login__leftmid h2 { font-size: 44px; line-height: 44px; white-space: nowrap; }
  .login__leftmid h2 br { display: none; }
  .login__leftmid p { margin-top: 4px; }
  .login__leftbot { flex-direction: row; align-items: center; gap: 12px; }
  .login__leftbot hr { display: none; }
  .login__leftbot .badge-18 { font-size: 9px; }
  .login__leftbot p { font-size: 10px; line-height: 13px; }
  .login__right { flex: 1; gap: 24px; padding: 24px 20px; }
  .login__head h3 { font-size: 26px; }
  .login__fields .input { height: 50px; }
  .login__submit { height: 52px; }
  .login__signup { flex-wrap: wrap; }
}

/* ---- registration ---- */
.modal--reg { align-items: flex-start; }
.reg { position: relative; display: flex; width: 980px; max-height: calc(100vh - 40px); border-radius: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.25); overflow: hidden; animation: modalin .2s ease-out; }
.reg__rail { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 274px; padding: 28px; background: var(--ink); border: 1px solid var(--line); border-right: 0; }
.reg__railtop { display: flex; flex-direction: column; gap: 16px; }
.reg__setup { display: flex; flex-direction: column; gap: 8px; }
.reg__setup span { font: 700 11px var(--f-sans); letter-spacing: 1.5px; color: var(--red); }
.reg__steps { display: flex; flex-direction: column; gap: 24px; }
.reg__steps li { display: flex; align-items: center; gap: 12px; }
.reg__steps li i { width: 3px; height: 24px; background: transparent; border-radius: 1px; }
.reg__steps li.is-active i { background: var(--red); }
.reg__steps li div { display: flex; flex-direction: column; gap: 2px; }
.reg__steps li span { font: 700 10px var(--f-mono); color: var(--gray); }
.reg__steps li b { font: 700 14px var(--f-narrow); letter-spacing: .5px; color: var(--gray); }
.reg__steps li.is-active span { color: var(--red); }
.reg__steps li.is-active b { color: #fff; }
.reg__steps li.is-done b { color: var(--cream); }
.reg__railbot { display: flex; flex-direction: column; gap: 14px; }
.reg__rgrow { display: flex; align-items: center; gap: 8px; }
.reg__rgrow .badge-18 { border-radius: 2px; padding: 2px 5px; }
.reg__rgrow b { font: 700 11px var(--f-sans); color: #fff; }
.reg__railbot p { font: 400 11px var(--f-sans); color: var(--gray); }
.reg__railbot a { font: 700 11px var(--f-sans); color: var(--red); }
.reg__railbot small { font: 400 9px var(--f-sans); color: var(--gray-2); }
.reg__panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--cream); color: var(--ink); overflow: hidden; }
.reg__mhead { display: none; }
.reg__head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px 40px 20px; border-bottom: 1px solid var(--input-line); }
.reg__titles { display: flex; flex-direction: column; gap: 6px; }
.reg__meta { display: flex; align-items: center; gap: 8px; font: 400 10px var(--f-mono); color: var(--gray); }
.reg__meta b { font-weight: 700; color: var(--red); }
.reg__titles h2 { font: 700 32px var(--f-narrow); color: var(--ink); }
.reg__titles p { font: 400 13px var(--f-sans); color: var(--gray-2); }
.reg__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #fff; border: 1px solid var(--input-line); border-radius: 2px; color: var(--ink); }
.reg__close:hover { border-color: var(--red); color: var(--red); }
.reg__body { flex: 1; overflow: hidden auto; min-width: 0; padding: 24px 40px 40px; display: flex; flex-direction: column; gap: 28px; }
.reg__section { display: flex; flex-direction: column; gap: 20px; }
.reg__section > hr { border-color: var(--input-line); }
.reg__stitle { display: flex; align-items: center; gap: 8px; font: 700 18px var(--f-narrow); color: var(--ink); }
.reg__stitle span { font: 700 13px var(--f-mono); color: var(--red); }
.reg__row { display: flex; gap: 16px; }
.reg__row > .field { flex: 1; min-width: 0; }
.reg__row--title .field--title { flex: 0 0 180px; }
.reg__row--addr { gap: 12px; }
.reg__row--addr .field--state { flex: 0 0 150px; }
.reg__row--addr .field--post { flex: 0 0 120px; }
.reg__dob { display: flex; gap: 12px; }
.reg__dob .input { flex: 1 1 0; min-width: 0; }
.reg__dob .input input { min-width: 0; width: 100%; }
.reg__limit { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--input-line); border-radius: 4px; }
.reg__limit-title { display: flex; align-items: center; gap: 8px; color: var(--red); }
.reg__limit-title b { font: 700 14px var(--f-narrow); color: var(--ink); }
.reg__limit p { font: 400 12px/16px var(--f-sans); color: var(--gray-2); }
.reg__footer { display: flex; flex-direction: column; gap: 20px; }
.reg__footer hr { border-color: var(--input-line); }
.reg__submit { display: flex; align-items: center; justify-content: center; height: 51px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.reg__submit:hover { background: #d42c28; }
.reg__login { display: flex; justify-content: center; gap: 6px; font: 400 13px var(--f-sans); color: var(--gray-2); }
.reg__login button { font: 700 13px var(--f-sans); color: var(--red); }
.reg .field label { font: 700 11px var(--f-sans); color: var(--gray-2); }
@media (max-width: 1023px) {
  .reg { width: 100%; }
  .reg__rail { display: none; }
  .reg__mhead { display: block; background: var(--ink); color: #fff; padding: 28px 20px 20px; border-bottom: 1px solid var(--line); }
  .reg__mtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .reg__mclose { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255,255,255,.1); border-radius: 2px; color: #fff; }
  .reg__progress { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  .reg__msteps { display: flex; gap: 16px; overflow: auto; scrollbar-width: none; }
  .reg__msteps::-webkit-scrollbar { display: none; }
  .reg__msteps span { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--f-narrow); letter-spacing: .5px; color: var(--gray); white-space: nowrap; }
  .reg__msteps span i { font: 400 10px var(--f-mono); font-style: normal; }
  .reg__msteps span.is-active { color: #fff; }
  .reg__msteps span.is-active i { font-weight: 700; color: var(--red); }
  .reg__bar { height: 3px; background: var(--line); }
  .reg__bar i { display: block; height: 100%; background: var(--red); transition: width .3s; }
  .reg__mrg { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 4px; }
  .reg__mrg p { font: 400 11px var(--f-sans); color: var(--gray); }
  .reg__mrg a { font: 700 11px var(--f-sans); color: var(--red); }
  .reg__mrg hr { border-color: var(--line); }
  .reg__mrg small { font: 400 9px var(--f-sans); color: var(--gray-2); }
  .reg__head { padding: 24px 20px 0; border-bottom: 0; }
  .reg__close { display: none; }
  .reg__titles h2 { font-size: 28px; }
  .reg__body { padding: 24px 20px 40px; }
}
@media (max-width: 767px) {
  .modal--reg { padding: 0; }
  .reg { max-height: none; border-radius: 0; box-shadow: none; min-height: 100vh; }
  .reg__panel { overflow: visible; }
  .reg__body { overflow: visible; }
  .reg__row, .reg__row--title { flex-direction: column; gap: 20px; }
  .reg__row--title .field--title { flex: 1; }
  .reg__row--addr { flex-direction: row; flex-wrap: wrap; }
  .reg__row--addr .field--suburb { flex: 1 1 100%; }
  .reg__row--addr .field--state { flex: 1; }
  .reg__row--addr .field--post { flex: 0 0 130px; }
  .reg__dob { gap: 8px; }
  .reg__dob .input:last-child { flex: 1.5; }
  .reg .input { height: 50px; }
}

/* ---- verify ---- */
.verify { position: relative; display: flex; width: 720px; height: 540px; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,.5); animation: modalin .2s ease-out; }
.verify__left { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 252px; padding: 32px; background: var(--bg-2); border-right: 1px solid var(--line); }
.verify__lefttop { display: flex; flex-direction: column; gap: 16px; }
.verify__lefttop .logo { gap: 4px; }
.verify__lefttop .logo__word { font-size: 18px; color: #fff; }
.verify__lefttop .logo__badge { font-size: 11px; }
.verify__meta { display: flex; flex-direction: column; gap: 4px; }
.verify__meta span { font: 700 11px var(--f-mono); letter-spacing: 1px; color: var(--red); }
.verify__meta i { width: 40px; height: 2px; background: var(--red); }
.verify__leftmid { display: flex; flex-direction: column; gap: 8px; }
.verify__leftmid h2 { font: 700 54px/48px var(--f-narrow); letter-spacing: -1px; color: var(--cream); }
.verify__leftmid p { font: 400 13px/18px var(--f-sans); color: var(--gray); }
.verify__leftbot { display: flex; flex-direction: column; gap: 6px; }
.verify__leftbot b { font: 700 14px var(--f-narrow); letter-spacing: 1px; color: #fff; }
.verify__leftbot p { font: 400 10px/14px var(--f-sans); color: var(--gray-2); }
.verify__right { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: var(--cream); color: var(--ink); }
.verify__head { display: flex; flex-direction: column; gap: 16px; }
.verify__chrome { display: flex; justify-content: space-between; align-items: center; font: 700 11px var(--f-mono); letter-spacing: 1px; color: var(--gray-2); }
.verify__title { display: flex; flex-direction: column; gap: 8px; }
.verify__title h3 { font: 700 32px var(--f-narrow); letter-spacing: -.5px; color: var(--ink); }
.verify__title p { font: 400 14px var(--f-sans); color: var(--gray-2); }
.verify__email { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; background: #fff; border: 1px solid var(--cream-line); border-radius: 2px; }
.verify__email span { padding: 2px 6px; background: var(--cream-line); font: 700 9px var(--f-mono); color: var(--gray-2); }
.verify__email b { font: 600 14px var(--f-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verify__body { display: flex; flex-direction: column; gap: 16px; }
.verify__body > p { font: 400 13px/18px var(--f-sans); color: var(--gray-2); }
.verify__code { display: flex; flex-direction: column; gap: 8px; }
.verify__code label { font: 700 11px var(--f-narrow); letter-spacing: 1px; color: var(--ink); }
.verify__cells { display: flex; gap: 8px; }
.verify__cells input { width: 72px; height: 64px; text-align: center; background: #fff; border: 1px solid var(--cream-line); border-radius: 2px; outline: 0; font: 700 24px var(--f-mono); color: var(--ink); }
.verify__cells input:focus { border-color: var(--ink); }
.verify__cells.is-error input { border-color: var(--red); }
.verify__hint { font: 400 11px var(--f-sans); color: var(--gray-2); }
.verify__actions { display: flex; flex-direction: column; gap: 16px; }
.verify__submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-narrow); letter-spacing: 1px; color: var(--cream); }
.verify__submit:hover { background: #d42c28; }
.verify__actions hr { border-color: var(--cream-line); }
.verify__resend { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.verify__resend span { font: 700 11px var(--f-narrow); letter-spacing: .5px; color: var(--gray-2); }
.verify__resend button { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--f-narrow); color: var(--red); }
.verify__spam { font: 400 11px var(--f-sans); color: var(--gray-2); }
@media (max-width: 767px) {
  .verify { flex-direction: column; width: 100%; height: auto; min-height: 100%; border-radius: 0; box-shadow: none; }
  .verify__left { width: auto; height: 220px; padding: 28px 20px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .verify__lefttop { gap: 12px; }
  .verify__leftmid { gap: 6px; }
  .verify__leftmid h2 { font-size: 40px; line-height: 36px; }
  .verify__leftbot { flex-direction: row; justify-content: space-between; align-items: center; }
  .verify__leftbot b { padding: 2px 6px; border: 1px solid #fff; border-radius: 1px; font-size: 10px; }
  .verify__leftbot p { font-size: 10px; color: var(--gray); }
  .verify__right { flex: 1; gap: 36px; padding: 24px 20px; }
  .verify__title h3 { font-size: 28px; }
  .verify__cells { justify-content: center; gap: 10px; }
  .verify__cells input { width: 100px; border-radius: 4px; }
  .verify__resend { flex-direction: column; align-items: flex-start; gap: 6px; }
  .verify__resend button { height: 44px; }
}

/* ---- demo inbox ---- */
.inbox { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); width: 320px; background: var(--paper); color: var(--ink); border: 1px solid var(--cream-line); border-radius: 2px; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: modalin .25s ease-out; }
.inbox__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--ink); color: #fff; font: 700 10px var(--f-mono); letter-spacing: 1.5px; }
.inbox__head button { color: #fff; display: inline-flex; }
.inbox__mail { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.inbox__from { font: 400 11px var(--f-sans); color: var(--gray-2); }
.inbox__subject { font: 700 14px var(--f-narrow); color: var(--ink); }
.inbox__mail p { font: 400 12px/17px var(--f-sans); color: var(--gray-2); }
.inbox__code { align-self: flex-start; padding: 6px 14px; margin: 4px 0; background: var(--cream); border: 1px dashed var(--red); font: 800 28px var(--f-mono); letter-spacing: 6px; color: var(--red); }
.inbox__note { font-size: 10px !important; color: var(--gray) !important; }
@media (max-width: 767px) { .inbox { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toasts { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 360px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 2px; box-shadow: 0 12px 32px rgba(0,0,0,.4); font: 400 12px/16px var(--f-sans); color: var(--cream); animation: toastin .25s ease-out; }
.toast--ok { border-left-color: var(--green); }
.toast--info { border-left-color: var(--gray); }
.toast b { display: block; font: 700 12px var(--f-narrow); letter-spacing: .5px; color: #fff; margin-bottom: 2px; }
.toast button { margin-left: auto; color: var(--gray); }
@keyframes toastin { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 767px) { .toasts { left: 12px; right: 12px; top: 12px; } .toast { max-width: none; } }

/* ==========================================================================
   Generic page pieces
   ========================================================================== */
.crumbs { display: flex; align-items: center; gap: 8px; font: 400 11px var(--f-sans); color: var(--gray); }
.crumbs b { font-weight: 700; color: var(--red); }
.crumbs .is-current { color: var(--cream); }
.hero-title { font: 700 48px var(--f-narrow); color: #fff; }
.lead { font: 400 14px/22px var(--f-sans); color: var(--gray); }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.block-head { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.block-head__left { display: flex; align-items: center; gap: 8px; }
.block-head__sport { font: 700 16px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.block-head__league { font: 400 12px var(--f-sans); color: var(--gray); }
.tabs { display: flex; gap: 8px; }
.tabs button { padding: 6px 14px; border: 1px solid var(--line); font: 700 12px var(--f-sans); color: var(--gray); background: transparent; }
.tabs button.is-active { background: var(--bg-2); color: #fff; }
.tabs button:hover { color: #fff; }
.filters { display: flex; gap: 4px; }
.filters button { padding: 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); font: 700 11px var(--f-sans); color: var(--gray); }
.filters button.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.hidden-by-filter { display: none !important; }
.empty-note { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 2px; font: 400 13px/18px var(--f-sans); color: var(--gray); }
/* line breaks that only exist on one breakpoint */
br.only-d, br.only-m { display: none; }
@media (min-width: 768px) { br.only-d { display: inline; } }
@media (max-width: 767px) { br.only-m { display: inline; } }