/* BET NOVA — mobile-first sportsbook UI (dark theme, blue brand, green odds) */
:root {
  --brand: #0a5cff;
  --brand-2: #1e90ff;
  --brand-grad: linear-gradient(90deg, #0a5cff, #1e90ff);
  --brand-head: linear-gradient(180deg, #0a5cff, #0b52e6);
  --bg: #1c1d21;
  --bg-2: #141518;
  --surface: #25262b;
  --surface-2: #2c2d33;
  --border: #33343a;
  --text: #f4f5f7;
  --muted: #9a9ca4;
  --green: #3ec46d;
  --green-2: #2fb35d;
  --odd-bg: #1e3627;
  --odd-text: #45d27a;
  --gold: #f5c518;
  --red: #ff3b4e;
  --radius: 14px;
  --nav-h: 49.5px;
  --max: 560px;
  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg-2); color: var(--text); }
body { font-size: 12px; line-height: 1.35; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: var(--text); }
h1, h2, h3, h4, h5 { margin: 0; }
.ic { width: 17.5px; height: 17.5px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 10.5px; }
.center { text-align: center; }
.green { color: var(--odd-text) !important; }
.pad { padding: 11px; }
.pad-x { padding: 0 11px; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scroll-x { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.scroll-x::-webkit-scrollbar { display: none; }
.flag { font-size: 1.05em; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- app frame ---------- */
.app { max-width: var(--max); margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); }
.app.chrome-none { padding-bottom: 0; background: var(--bg); }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9.5px 11px; padding-top: max(9.5px, env(safe-area-inset-top)); background: var(--brand-head); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.wordmark { font-family: 'Russo One', Roboto, sans-serif; font-size: 21.5px; letter-spacing: .5px; color: #fff; line-height: 1; white-space: nowrap; }
/* "NOVA" in deep metallic gold with a shine that sweeps across the letters only (no outer glow) */
.wordmark span {
  color: #f5c518;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 220, .95) 45%, transparent 60%) -120% 0 / 250% 100% no-repeat,
              linear-gradient(180deg, #ffe9a3 0%, #f5c518 35%, #b8860b 60%, #f7d36b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: nova-shine 4.3s ease-in-out infinite;
}
@keyframes nova-shine {
  0% { background-position: -120% 0, 0 0; }
  35%, 100% { background-position: 220% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .wordmark span { animation: none; } }
.wordmark.brand-blue { color: #e9eef7; font-size: 19px; }
.wordmark.lg { font-size: 27px; color: #e9eef7; }
.top-actions { display: flex; align-items: center; gap: 6.5px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30.5px; height: 30.5px; border-radius: 50%; color: var(--muted); }
.icon-btn.white { color: #fff; }
.icon-btn.tiny { width: 19px; height: 19px; }
.icon-btn.tiny .ic { width: 13px; height: 13px; }
.bal-chip { display: inline-flex; align-items: center; gap: 6.5px; padding: 4px 9.5px 4px 4px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 9.5px; font-weight: 700; font-size: 13px; color: #fff; }
.avatar { width: 27px; height: 27px; border-radius: 50%; overflow: hidden; display: inline-flex; background: #0a2a6b; flex: none; }
.avatar svg { width: 100%; height: 100%; }

.bottomnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max); z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: #000; border-top: 1px solid #1d1e22; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 7px; font-size: 10px; color: #aaa; }
.bottomnav a .ic { width: 21px; height: 21px; }
.bottomnav a.on { color: #fff; }
.bottomnav a.on::before { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-2); }
.bottomnav a.games .ic { color: #a855f7; }
.nav-dot { position: absolute; top: 6.5px; left: calc(50% + 6.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

.subhead { display: flex; align-items: center; gap: 4px; padding: 6.5px 6.5px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 49.5px; z-index: 20; }
.chrome-plain .subhead { top: 0; }
.subhead h2 { font-size: 14.5px; font-weight: 600; }
.page-h1 { font-size: 27px; font-weight: 700; margin-top: 6.5px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6.5px; height: 37px; padding: 0 16px; border-radius: 799px; font-weight: 600; font-size: 13px; transition: transform .1s, filter .15s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; pointer-events: none; }
.btn.lg { height: 46.5px; font-size: 14.5px; }
.btn.sm { height: 27px; padding: 0 11px; font-size: 11px; }
.btn.block { display: flex; width: 100%; }
.btn-sm { height: 25.5px; padding: 0 11px; font-size: 10.5px; }
.btn-green { background: var(--green); color: #0d1410; box-shadow: 0 8px 20px -8px rgba(62, 196, 109, .55); }
.btn-brand { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(30, 144, 255, .6); }
.btn-dark { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-gold { background: var(--gold); color: #1a1400; }
.btn-white { background: #fff; color: var(--brand); }
.btn-ghost-white { border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; }
.topbar .btn.sm { border-radius: 8px; height: 29px; font-size: 12px; }
.btn-outline-green { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
.btn.lg.btn-outline-green, .me-btns .btn { border-radius: 9.5px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.link-btn .ic { width: 13px; height: 13px; }
.link-btn.white { color: #fff; font-size: 13.5px; }
.link-btn.white .ic { width: 17.5px; height: 17.5px; }
.link-green { color: var(--green); font-weight: 600; }
.center-block { display: block; margin: 14.5px auto 8px; font-size: 13.5px; }
.sq-btn { display: inline-flex; align-items: center; justify-content: center; width: 30.5px; height: 30.5px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); flex: none; }
.chip { flex: none; padding: 6.5px 11px; border-radius: 799px; background: var(--surface-2); border: 1px solid var(--border); color: #c9cbd1; font-size: 11px; white-space: nowrap; }
.chip.on { background: rgba(30, 144, 255, .14); border-color: var(--brand-2); color: #fff; }
.chips { gap: 6.5px; padding: 8px 0; }

/* ---------- auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 13px 24px; }
.auth-card { position: relative; width: 100%; background: #24252a; border: 1px solid #34353b; border-radius: 24px; padding: 21px 24px 22.5px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.auth-card.with-tab { padding-top: 35px; }
.auth-tab { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: #24252a; border: 1px solid #34353b; border-bottom: 0; border-radius: 14.5px 14.5px 0 0; padding: 11px 14.5px 5px; box-shadow: 0 -6px 14px rgba(0, 0, 0, .25); }
.auth-logo { display: block; width: 152px; max-width: 70%; margin: 0 auto 8px; }
.auth-title { font-size: 22.5px; font-weight: 500; text-align: center; margin: 5px 0 19px; }
.auth-alt { text-align: center; color: var(--muted); font-size: 13.5px; margin: 5px 0 0; }
.auth-alt a { color: var(--green); font-weight: 600; }
.ofield { display: block; position: relative; margin: 0 0 14.5px; }
.ofield-label { position: absolute; top: -9px; left: 21px; padding: 0 6.5px; background: #24252a; font-size: 11px; color: #c3c5cb; z-index: 1; }
.app:not(.chrome-none) .ofield-label { background: var(--surface); }
.pad > form > .ofield .ofield-label, #money-form .ofield-label { background: var(--bg); }
.ofield-box { display: flex; align-items: center; gap: 9.5px; height: 51px; padding: 0 14.5px; border: 1.5px solid #3a3b42; border-radius: 17.5px; color: var(--muted); transition: border-color .15s; }
.ofield-box:focus-within { border-color: var(--brand-2); }
.ofield-box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 14.5px; }
.ofield-box input::placeholder, .phone-box input::placeholder { color: #80828a; }
.ofield-box .cur { color: var(--text); }
.eye { margin-right: -8px; }
.plain-label { font-size: 13px; color: #c3c5cb; margin: 4px 0 8px; }
.country-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 9.5px; }
.country-pick button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46.5px; border-radius: 11px; background: #2a2b31; border: 1.5px solid #3a3b42; font-size: 14.5px; }
.country-pick button small { color: var(--muted); font-size: 11px; }
.country-pick button.on { background: var(--brand-grad); border-color: #5aa9ff; box-shadow: 0 6px 20px -6px rgba(30, 144, 255, .6); }
.country-pick button.on small { color: #e6f0ff; }
.hint { color: #b4b6bd; font-size: 11px; margin: 8px 0 14.5px; }
.phone-box { display: flex; align-items: center; gap: 9.5px; height: 51px; padding: 0 14.5px; border-radius: 14.5px; background: #2a2b31; border: 1.5px solid #34353b; color: var(--muted); margin-bottom: 17.5px; }
.phone-box b { color: #c9cbd1; font-size: 14.5px; }
.phone-box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 14.5px; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6.5px; margin: -6px 14.5px 0; }
.strength i { height: 6.5px; border-radius: 4px; background: #34353b; }
.strength i.s1 { background: #ef4444; } .strength i.s2 { background: #f59e0b; } .strength i.s3 { background: #84cc16; } .strength i.s4 { background: var(--green); }
.strength-label { margin: 8px 14.5px 14.5px; }
.check { display: flex; align-items: center; gap: 8px; color: #b4b6bd; font-size: 11px; margin: 0 4px 9.5px; }
.check input { width: 14.5px; height: 14.5px; accent-color: var(--green); }
.form-err { color: #ff6b7a; min-height: 14.5px; font-size: 11px; margin: 0 4px 8px; }

/* ---------- home ---------- */
.banners { gap: 7px; padding: 9.5px 9.5px 5px; }
.banner { position: relative; flex: none; width: 92px; height: 74px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: flex-end; padding: 5px 6px; font-weight: 600; font-size: 10.5px; line-height: 1.15; scroll-snap-align: start; text-shadow: 0 1px 3px #000; background: #0b1a3a; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.banner span { position: relative; z-index: 1; }
.quick { display: grid; grid-template-columns: repeat(6, 1fr); padding: 6.5px 4px 9.5px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: #c9cbd1; text-align: center; }
.quick .ic { width: 22.5px; height: 22.5px; color: #d8dae0; }

.featured { margin: 0 9.5px 13px; padding: 0 9.5px 9.5px; overflow: hidden; background: linear-gradient(180deg, #232842, var(--surface) 70px); }
.feat-head { display: flex; align-items: center; gap: 8px; padding: 9.5px 0 2px; }
.feat-ic { width: 29px; height: 29px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(30, 144, 255, .18); color: var(--brand-2); }
.feat-head h3 { white-space: nowrap; font-size: 14.5px; font-weight: 700; flex: 1; letter-spacing: .2px; }
.feat-nav { display: flex; gap: 5px; }
.feat-best { font-size: 9.5px; letter-spacing: .5px; white-space: nowrap; }
@media (max-width: 420px) { .feat-best { display: none; } }
.fcards { gap: 9.5px; }
.fcard { flex: none; width: 88%; max-width: 440px; border: 1px solid var(--border); border-radius: 11px; background: #1f2024; overflow: hidden; scroll-snap-align: start; }
.fcard-tags { display: flex; align-items: center; gap: 0; }
.fcard-league { color: var(--odd-text); text-decoration: underline; font-size: 11px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 9.5px 8px 8px; }
.fteam { display: flex; flex-direction: column; align-items: center; gap: 6.5px; text-align: center; font-size: 12px; color: #c9cbd1; }
.fmid { display: flex; flex-direction: column; align-items: center; gap: 9.5px; font-size: 12px; }
.fmid i { color: var(--muted); font-style: normal; }
.fmid b { color: var(--odd-text); }
.fodds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.5px; padding: 0 8px 9.5px; }

.tag { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px; font-size: 10px; font-weight: 800; font-style: italic; border-radius: 5px 9.5px 9.5px 5px; white-space: nowrap; flex: none; }
.tag-best { background: var(--green); color: #0d1410; }
.tag-hot { background: var(--brand-2); color: #fff; }
.tag-sim { background: #7c3aed; color: #fff; font-style: normal; border-radius: 5px; height: 16px; }
.tag.sq { border-radius: 0; height: 22.5px; }

/* section headers */
.live-sec, .sports-sec { border-left: 4px solid var(--brand-2); margin-bottom: 11px; }
.sec-tabs { display: flex; align-items: center; gap: 11px; padding: 11px 11px 8px 14.5px; }
.sec-title { font-size: 17.5px; font-weight: 600; flex: none; }
.vsep { width: 1.5px; height: 19px; background: #4a4b52; flex: none; }
.stabs { gap: 17.5px; flex: 1; }
.stabs button { font-size: 16px; color: #c9cbd1; white-space: nowrap; }
.stabs button.on { color: var(--odd-text); }
.utabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--border); }
.utabs button { padding: 11px 0; color: #c9cbd1; font-size: 13.5px; position: relative; }
.utabs button.on { color: #fff; font-weight: 700; }
.utabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); }
.mtabs { gap: 24px; padding: 0 14.5px; border-bottom: 1px solid var(--border); }
.mtabs button { padding: 11px 0 9.5px; font-size: 15px; color: #c9cbd1; white-space: nowrap; position: relative; }
.mtabs button.on { color: #fff; font-weight: 500; }
.mtabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--green); }
.col-head { display: flex; align-items: center; justify-content: space-between; background: #26272c; padding: 9.5px 9.5px; color: #c9cbd1; font-size: 12px; }
.col-line { color: var(--muted); font-size: 10.5px; }
.cols { display: grid; gap: 6.5px; width: 206.5px; text-align: center; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c2 { grid-template-columns: repeat(2, 1fr); width: 137.5px; }
.day-head { padding: 11px 9.5px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); background: var(--bg); }
.live-head { display: flex; align-items: center; gap: 6.5px; color: #ff6b7a; }
.all-live { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 11px; color: var(--odd-text); font-size: 13px; }
.all-live .ic { width: 14.5px; height: 14.5px; }

/* match rows */
.mrow { padding: 8px 9.5px 9.5px; border-bottom: 1px solid var(--border); }
.mrow-meta { display: flex; align-items: center; gap: 5.5px; font-size: 11px; color: #e4e5e9; margin-bottom: 5px; min-width: 0; }
.mrow-meta > span:not(.ell) { white-space: nowrap; flex: none; }
.mrow-meta .tag { height: 17.5px; font-size: 9px; padding: 0 5.5px; }
.stat-ic { margin-left: auto; color: var(--muted); }
.mrow-body { display: flex; align-items: center; gap: 8px; }
.mrow-teams { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.6; }
.mrow-teams > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-teams .more { display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.mrow-teams .more .ic { width: 13px; height: 13px; }
.mrow-teams.scores > div { display: flex; justify-content: space-between; gap: 6.5px; }
.mrow-teams.scores b { color: var(--odd-text); }
.mrow-teams.scores span { overflow: hidden; text-overflow: ellipsis; }
.odds { display: grid; gap: 6.5px; width: 206.5px; flex: none; }
.odds.c3 { grid-template-columns: repeat(3, 1fr); }
.odds.c2 { grid-template-columns: repeat(2, 1fr); width: 137.5px; }
.inplay { display: inline-flex; align-items: center; gap: 5px; color: #ff4d5e; flex: none; }
.live-dot { display: inline-block; width: 6.5px; height: 6.5px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 0 rgba(255, 59, 78, .6); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 59, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 78, 0); } }

.odd { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; height: 45px; border-radius: 8px; background: var(--odd-bg); color: var(--odd-text); font-size: 17px; font-weight: 500; transition: background .15s, color .15s, transform .1s; }
.odd:active { transform: scale(.96); }
.odd.dark { background: #2a2b31; }
.odd b { font-weight: 500; }
.odd em { font-style: normal; color: #b9e9c9; font-size: 12px; }
.odd.wide { justify-content: space-between; padding: 0 9.5px; height: 41.5px; font-size: 15px; }
.odd .arrow { font-style: normal; font-size: 10.5px; width: 0; }
.odd.up .arrow::after { content: '↑'; color: var(--odd-text); margin-left: -2px; }
.odd.down .arrow::after { content: '↓'; color: #ff4d5e; margin-left: -2px; }
.odd.sel { background: var(--green); color: #0d1410; }
.odd.sel em, .odd.sel .arrow::after { color: #0d1410; }
.odd.flash { animation: flash .9s; }
@keyframes flash { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.odd.lock { color: var(--muted); background: #232428; }
.odd.lock .ic { width: 14.5px; height: 14.5px; }

/* countries */
.country { border-bottom: 1px solid var(--border); }
.country-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px; font-size: 13px; }
.country-head .muted { display: inline-flex; align-items: center; gap: 5px; }
.country-league { display: flex; justify-content: space-between; align-items: center; padding: 9.5px 11px 9.5px 22.5px; color: #c9cbd1; background: #202126; }

/* winners */
.winners { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 11px 0 14.5px; }
.winners h3 { font-size: 17.5px; padding: 0 14.5px 8px; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.winner { display: flex; gap: 8px; width: 208px; padding: 5px 14.5px; font-size: 12px; }
.winner .cup { font-size: 38.5px; opacity: .22; filter: grayscale(1); }
.winner b { display: block; color: var(--odd-text); font-size: 17.5px; font-style: italic; margin: 2px 0; }
.winner small { display: block; color: var(--muted); margin-top: 8px; }

/* footer */
.site-footer { padding: 21px 17.5px 24px; }
.f-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 17.5px; }
.f-partner { font-size: 14.5px; line-height: 1.3; }
.f-title { text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 9.5px; }
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22.5px; }
.pay-grid span { display: flex; align-items: center; justify-content: center; height: 37px; border-radius: 8px; background: #2a2b31; color: #a3a5ad; font-size: 13px; }
.site-footer h5 { font-size: 17.5px; font-weight: 600; margin: 6.5px 0 11px; letter-spacing: .3px; }
.f-links { display: flex; flex-direction: column; gap: 17.5px; margin-bottom: 21px; color: #a3a5ad; font-size: 15px; }
.f-links.icons { margin-top: 21px; }
.f-links.icons a { display: flex; align-items: center; gap: 11px; }
.f-links.icons .ic { color: var(--green); }
.site-footer .btn-brand { height: 48px; border-radius: 13px; font-size: 16px; }
.f-legal { color: #6f7179; font-size: 10px; text-align: center; line-height: 1.6; }

/* ---------- AZ ---------- */
.pill-tabs { display: flex; gap: 8px; padding: 11px 11px 9.5px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.pill-tabs button { flex: none; padding: 8px 13px; border-radius: 799px; background: var(--surface-2); color: #c9cbd1; font-weight: 500; font-size: 12px; }
.pill-tabs button.on { background: var(--brand-grad); color: #fff; }
.az-filters { padding: 0 11px 11px; }
.search-field { display: flex; align-items: center; gap: 8px; height: 45px; padding: 0 13px; border-radius: 11px; background: #26272c; border: 1.5px solid #3a3b42; color: var(--muted); margin-bottom: 9.5px; }
.search-field:focus-within { border-color: var(--brand-2); }
.search-field input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 13.5px; }
.filter-row { display: grid; grid-template-columns: 1fr 96px; gap: 9.5px; }
.filter-row select, .filter-row input { height: 45px; border-radius: 11px; background: #26272c; border: 1.5px solid #3a3b42; padding: 0 9.5px; font-size: 13px; outline: 0; min-width: 0; }
.list-title { display: flex; justify-content: space-between; align-items: center; gap: 6.5px; font-size: 13px; margin: 14.5px 2px 8px; }
.list-title .ic { width: 14.5px; height: 14.5px; color: var(--green); }

/* match details */
.match-hero { padding: 14.5px 11px; background: radial-gradient(circle at 50% 0, rgba(30, 144, 255, .25), transparent 70%); text-align: center; }
.mh-league { color: var(--muted); font-size: 11px; margin-bottom: 11px; }
.mh-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6.5px; }
.mh-time { font-size: 21px; font-weight: 700; }
.mh-score { font-size: 27px; font-weight: 800; color: var(--odd-text); margin-bottom: 5px; }
.mkts { padding: 4px 9.5px 11px; display: flex; flex-direction: column; gap: 9.5px; }
.mkt { padding: 9.5px; }
.mkt-head { font-weight: 600; margin-bottom: 8px; }
.mkt-grid { display: grid; gap: 6.5px; }
.mkt-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.mkt-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.mkt-grid .odd.wide { font-size: 13.5px; padding: 0 8px; }
.pbar { display: grid; grid-template-columns: 88px 1fr 35px; align-items: center; gap: 8px; margin: 6.5px 0; font-size: 11px; }
.pbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar div { height: 6.5px; border-radius: 4px; background: #34353b; overflow: hidden; }
.pbar i { display: block; height: 100%; }
.pbar i.g { background: var(--green); } .pbar i.n { background: #8b8d95; } .pbar i.b { background: var(--brand-2); }
.form-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 11px; gap: 8px; }
.form-row div { display: flex; gap: 5px; }
.form-row i { width: 19px; height: 19px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 9.5px; }
.fW { background: var(--green); color: #0d1410; } .fD { background: #6b6d75; } .fL { background: #ef4444; }

/* ---------- games ---------- */
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 17.5px; }
.game-card { position: relative; aspect-ratio: 3 / 4.6; border-radius: 17.5px; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, .14); text-align: left; display: flex; flex-direction: column; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.game-art { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 8px 0; }
.ga-title { font-family: 'Russo One', sans-serif; font-size: 24px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.ga-title em { font-style: italic; color: var(--brand-2); font-size: 27px; }
.ga-title.sm { font-size: 19px; }
.ga-sub { font-weight: 800; font-size: 9.5px; letter-spacing: .5px; margin: 5px 0; }
.ga-big { font-size: 51px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.ga-word { font-family: 'Russo One', sans-serif; font-size: 29px; color: #fbbf24; text-shadow: 0 3px 0 #92400e; }
.ga-word.sm { font-size: 16px; color: #fde68a; }
.ga-mult { font-weight: 800; color: #fde68a; font-size: 10.5px; }
.game-foot { padding: 0 11px 11px; background: linear-gradient(transparent, rgba(0, 0, 0, .65) 40%); }
.game-foot b { display: block; font-size: 19px; font-weight: 600; }
.players { display: inline-flex; align-items: center; gap: 5px; color: var(--odd-text); font-size: 12px; }
.players .ic { width: 13.5px; height: 13.5px; }
.game-tag { position: absolute; top: 11px; left: 11px; z-index: 1; padding: 4px 9.5px; border-radius: 8px; font-weight: 700; font-size: 10.5px; }
.game-tag.gold { background: #fbbf24; color: #3a2a00; }
.game-tag.outline { left: 50%; transform: translateX(-50%); border: 1.5px solid #fff; background: rgba(0, 0, 0, .25); font-style: italic; }
.aviator-root { min-height: 60vh; }

/* ---------- open bets ---------- */
.ob-top { display: flex; align-items: center; justify-content: space-between; padding: 14.5px 13px 11px; padding-top: max(14.5px, env(safe-area-inset-top)); }
.ob-bal { display: flex; align-items: center; gap: 8px; text-align: right; }
.ob-bal small { display: block; color: #c9cbd1; font-size: 10.5px; }
.ob-bal b { color: var(--gold); font-size: 15px; font-weight: 500; }
.seg { display: grid; grid-template-columns: 1fr 1fr; margin: 0 13px; }
.seg button { padding: 13px 0; font-size: 14.5px; color: var(--muted); border-radius: 11px 11px 0 0; }
.seg button.on { background: var(--surface); color: #fff; font-weight: 500; }
#ob-list { min-height: 52vh; padding-bottom: 72px; }
.rec-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); width: 100%; max-width: var(--max); display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #1f2024; border-top: 1px solid var(--border); text-align: left; z-index: 25; }
.rec-bar > .ic { margin-left: auto; color: var(--muted); }
.rec-ic { width: 37px; height: 37px; border-radius: 8px; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rec-bar > div { min-width: 0; }
.rec-title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-sub { color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet { padding: 11px; margin-bottom: 9.5px; }
.bet-head { display: flex; align-items: center; gap: 6.5px; }
.bet-head .status { margin-left: auto; }
.status { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 799px; }
.s-open { background: rgba(30, 144, 255, .16); color: #7cc0ff; }
.s-won { background: rgba(62, 196, 109, .18); color: var(--odd-text); }
.s-lost { background: rgba(239, 68, 68, .16); color: #ff8a8a; }
.s-cashed_out { background: rgba(245, 197, 24, .16); color: var(--gold); }
.bet-sub { margin: 4px 0 6.5px; }
.bet-sel { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--border); }
.bet-pick { font-weight: 600; }
.bet-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.5px; padding: 9.5px 0; border-top: 1px solid var(--border); }
.bet-foot span { display: block; }
.howto { padding-left: 16px; line-height: 1.7; }

/* empty */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 19px 32px; }
.empty-ball { font-size: 51px; margin-bottom: 13px; }
.empty h4 { font-size: 16px; font-weight: 500; }
.empty p { color: var(--muted); font-size: 14.5px; margin: 6.5px 0 14.5px; }

/* ---------- me ---------- */
.me-head { display: flex; align-items: center; gap: 11px; padding: 17.5px 14.5px 8px; }
.me-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #3a3b42; flex: none; }
.me-avatar svg { width: 100%; height: 100%; }
.me-id { flex: 1; min-width: 0; }
.me-name { display: inline-flex; align-items: center; gap: 4px; font-size: 17.5px; font-weight: 700; }
.me-name .ic { width: 14.5px; height: 14.5px; color: var(--muted); }
.me-id .muted { margin-top: 5px; font-size: 13px; }
.me-bal { display: flex; align-items: center; gap: 8px; padding: 14.5px 14.5px 11px; }
.me-bal span { flex: 1; font-size: 13.5px; }
.me-bal b { font-size: 22.5px; font-weight: 700; }
.me-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 0 14.5px 13px; }
.pad .me-btns { padding: 11px 0; }
.me-short { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 14.5px 8px; padding: 11px 0; }
.me-short a { display: flex; flex-direction: column; align-items: center; gap: 6.5px; font-size: 11px; color: #d6d7dc; text-align: center; }
.me-short a + a { border-left: 1px solid var(--border); }
.menu-list { display: flex; flex-direction: column; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 13px; padding: 16px 14.5px; border-bottom: 1px solid var(--border); font-size: 15px; text-align: left; }
.menu-list .ic { width: 21px; height: 21px; }
.menu-list span { flex: 1; }
.menu-list small { color: var(--muted); font-size: 13px; }
.menu-list .chev { width: 16px; height: 16px; color: var(--muted); }
.demo-note { margin: 14.5px; padding: 8px 9.5px; border-radius: 8px; background: rgba(30, 144, 255, .1); color: #9cc8ff; font-size: 10.5px; text-align: center; }
.wallet-card { padding: 16px; border-radius: 14.5px; background: linear-gradient(135deg, #0a5cff, #0b2a6b); box-shadow: 0 12px 30px -12px rgba(10, 92, 255, .6); }
.wallet-card small { display: block; color: #cfe2ff; }
.wallet-card b { display: block; font-size: 25.5px; margin: 5px 0; }
.wallet-card.slim { padding: 11px 14.5px; margin-bottom: 14.5px; }
.wallet-card.slim b { font-size: 19px; margin: 2px 0 0; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-bottom: 17.5px; }
.method { height: 40px; border-radius: 9.5px; background: var(--surface-2); border: 1.5px solid var(--border); font-weight: 500; }
.method.on { border-color: var(--green); background: rgba(62, 196, 109, .1); color: #fff; }
#money-form .quick-stakes { margin: -6px 0 14.5px; }
.tx { display: flex; align-items: center; gap: 9.5px; padding: 11px; border-bottom: 1px solid var(--border); }
.tx:last-child { border-bottom: 0; }
.tx-ic { width: 32px; height: 32px; border-radius: 9.5px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tx-ic.in { background: rgba(62, 196, 109, .15); color: var(--green); }
.tx-ic.out { background: rgba(30, 144, 255, .15); color: var(--brand-2); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tx-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.st { text-transform: capitalize; font-size: 9.5px; }
.st-pending { color: var(--gold); } .st-success { color: var(--odd-text); } .st-failed { color: #ff8a8a; }
.kv-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: 0; }
.card.pad > .ofield .ofield-label { background: var(--surface); }
.faq { border-bottom: 1px solid var(--border); padding: 0 11px; }
.faq:last-child { border-bottom: 0; }
.faq summary { padding: 13px 0; cursor: pointer; font-weight: 500; }
.faq p { margin: 0 0 13px; color: #c3c5cb; }
.big-emoji { font-size: 35px; }
.promo-list { display: flex; flex-direction: column; gap: 11px; }
.promo { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 14.5px; }
.promo h3 { font-size: 15px; }
.promo p { margin: 4px 0 0; color: #e0ebff; }

/* ---------- betslip ---------- */
.slip-fab { position: fixed; z-index: 35; right: max(14px, calc(50% - var(--max) / 2 + 14px)); bottom: calc(var(--nav-h) + 90px + env(safe-area-inset-bottom)); width: 82px; height: 86px; border-radius: 18px; background: rgba(205, 207, 212, .92); color: #1b1c20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.slip-fab[hidden] { display: none; }
.slip-fab-count { width: 33.5px; height: 33.5px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.slip-fab.has .slip-fab-count { background: var(--green); color: #0d1410; }
.slip-fab-chev { width: 13px; height: 13px; color: #6b6d75; margin: -2px 0 -3px; }
.slip-fab-label { font-size: 9px; font-weight: 600; letter-spacing: .3px; }
.slip-fab.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.1); } }

.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 13px; opacity: 0; transition: opacity .18s; }
.overlay.open { opacity: 1; }
.overlay-sheet { align-items: flex-end; padding: 0; }
.dialog { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 5px 14.5px 14.5px; max-height: 90vh; overflow: auto; }
.sheet { width: 100%; max-width: var(--max); background: var(--surface); border-radius: 26px 26px 0 0; border: 1px solid var(--border); border-bottom: 0; padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; transform: translateY(30px); transition: transform .2s; }
.overlay.open .sheet { transform: none; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 6.5px 0; }
.dialog-head h3 { font-size: 15px; }
.dialog-body { padding: 5px 0 9.5px; }
.dialog-body .ofield-label { background: var(--surface) !important; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn { flex: 1; }
.success-box { text-align: center; }
.success-box p { margin: 6.5px 0; }
.big-check { width: 43px; height: 43px; padding: 9.5px; border-radius: 50%; background: var(--green); color: #0d1410; margin: 5px auto 6.5px; display: block; }
.kv { display: flex; justify-content: center; align-items: center; gap: 6.5px; margin: 5px 0; }
.kv span { color: var(--muted); }
.big-code { font-family: 'Russo One', monospace; font-size: 27px; letter-spacing: 4px; color: var(--odd-text); margin: 8px 0; }
.search-res { min-height: 160px; }
.search-item { display: block; padding: 9.5px 4px; border-bottom: 1px solid var(--border); }
.verify-ok { display: flex; gap: 8px; padding: 9.5px; border-radius: 9.5px; background: rgba(62, 196, 109, .12); }
.verify-ok > .ic { color: var(--green); }

.slip { padding: 0 0 calc(8px + env(safe-area-inset-bottom)); background: #1f2024; }
.slip-top { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9.5px; padding: 11px 14.5px; background: #1f2024; }
.slip-count { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.mode-toggle { display: inline-flex; padding: 3px; border-radius: 799px; background: var(--surface-2); border: 1px solid var(--border); }
.mode-toggle button { position: relative; padding: 6.5px 14.5px; border-radius: 799px; font-size: 13px; color: #c9cbd1; }
.mode-toggle button.on { background: var(--green); color: #fff; }
.mode-toggle .dot { position: absolute; top: 2px; right: 5px; width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--red); }
.slip-close { justify-self: center; color: #fff; }
.slip-bal { color: var(--gold); font-size: 16px; font-weight: 500; }
.slip-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #2a2b31; }
.slip-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 4px; font-size: 11.5px; white-space: nowrap; color: #e4e5e9; position: relative; }
.slip-tabs button + button::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: #44454c; }
.slip-tabs button.on { color: var(--odd-text); }
.slip-tabs .ic { width: 16px; height: 16px; }
.slip-scroll { padding: 0 0 5px; }
.slip-panel { padding: 11px 16px; border-bottom: 1px solid var(--border); background: #24252a; }
.slip-panel h4 { margin-bottom: 5px; }
.slip-empty-small { color: var(--muted); font-size: 11px; padding: 8px 0; }
.code-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.code-row.card { padding: 9.5px 11px; margin-bottom: 8px; }
.code-row:last-child { border-bottom: 0; }
.code-info { flex: 1; min-width: 0; }
.code-title { font-weight: 500; }
.code-sub { color: var(--muted); font-size: 10.5px; }
.code-sub b { color: var(--odd-text); letter-spacing: 1px; }
.icon-btn.pinned { color: var(--gold); }
.rec-head { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.rec-head .ic { color: var(--muted); }
.rec-list { padding: 4px 16px 8px; border-bottom: 1px solid var(--border); }
.code-box { padding: 13px 16px 16px; border-bottom: 1px solid var(--border); }
.code-box.big { padding: 4px 0 8px; border: 0; }
.code-label { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 500; margin-bottom: 9.5px; }
.code-box.big .code-label { font-size: 12px; color: #c3c5cb; font-weight: 400; }
.code-input { display: flex; height: 45px; border-radius: 8px; border: 1px solid #3a3b42; overflow: hidden; }
.code-input input { flex: 1; min-width: 0; padding: 0 14.5px; background: #18191c; border: 0; outline: 0; font-size: 14.5px; text-transform: uppercase; }
.code-input input::placeholder { text-transform: none; color: #80828a; }
.code-input button { padding: 0 19px; background: #2a2b31; color: #c9cbd1; font-size: 14.5px; border-left: 1px solid #3a3b42; }
.slip-empty { text-align: center; padding: 40px 16px 32px; }
.slip-empty h4 { font-size: 17px; font-weight: 600; }
.slip-empty p { color: var(--muted); font-size: 13.5px; margin: 8px 0 17.5px; }
.slip-empty .btn { height: 41.5px; font-size: 14.5px; padding: 0 24px; }
.slip-sel-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px 5px; font-weight: 600; }
.slip-sels { padding: 0 11px; }
.slip-sel { display: flex; gap: 5px; padding: 9.5px 5px; border-bottom: 1px solid var(--border); }
.slip-x { width: 24px; height: 24px; margin-top: -3px; }
.slip-x .ic { width: 14.5px; height: 14.5px; }
.slip-sel-main { flex: 1; min-width: 0; }
.slip-sel-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; }
.slip-odd { color: var(--odd-text); }
.slip-odd.down { color: #ff6b7a; }
.slip-market, .slip-teams, .slip-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.slip-teams { color: #d6d7dc; }
.slip-meta { display: flex; align-items: center; gap: 5px; }
.slip-summary { padding: 11px 16px 5px; }
.slip-summary .row { display: flex; justify-content: space-between; align-items: center; padding: 6.5px 0; font-size: 13px; }
.stake-field { display: flex; justify-content: space-between; align-items: center; gap: 11px; padding: 6.5px 0; }
.stake-input { display: flex; align-items: center; gap: 6.5px; height: 40px; width: 152px; padding: 0 11px; border-radius: 9.5px; background: #18191c; border: 1.5px solid #3a3b42; }
.stake-input:focus-within { border-color: var(--green); }
.stake-input em { font-style: normal; color: var(--muted); }
.stake-input input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 15px; text-align: right; }
.quick-stakes { display: flex; gap: 6.5px; justify-content: flex-end; flex-wrap: wrap; padding: 4px 0 5px; }
.accept-odds { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c3c5cb; padding: 4px 0; }
.accept-odds input { width: 16px; height: 16px; accent-color: var(--green); }
.slip-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 9.5px 0 4px; }
.slip-actions .btn { height: 43px; border-radius: 11px; }
.sim-note { margin: 8px 16px; font-size: 10.5px; color: #c4b5fd; text-align: center; }
.sim-note .link-btn { color: #c4b5fd; text-decoration: underline; font-size: 10.5px; }

.show-more { margin: 14px auto; width: calc(100% - 24px); }

.crest { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; margin-right: 7px; }
.tlogo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tlogo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.tlogo .team-badge { display: none; }
.tlogo.nf img { display: none; }
.tlogo.nf .team-badge { display: block; }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; font-size: 14.5px; line-height: 1.6; color: #d6d7dc; }
.legal h2 { font-size: 16.5px; color: #fff; margin: 22px 0 8px; scroll-margin-top: 110px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a, .check a { color: var(--green); }
.legal-meta { color: var(--muted); font-size: 13px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; }
.legal-toc a { color: #c9cbd1 !important; }

/* splash */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; text-align: center; }
.splash img { width: 160px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(30, 144, 255, .25); border-top-color: var(--brand-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-void { background: rgba(154, 156, 164, .16); color: #c9cbd1; }
.leg { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; margin-right: 6px; vertical-align: 1px; }
.leg-won { background: var(--green); color: #0d1410; } .leg-lost { background: #ef4444; color: #fff; } .leg-void { background: #6b6d75; color: #fff; }

/* toast */
.toast { position: fixed; left: 50%; top: 51px; z-index: 100; transform: translate(-50%, -12px); opacity: 0; visibility: hidden; pointer-events: none; max-width: min(92vw, 480px); padding: 9.5px 14.5px; border-radius: 9.5px; background: #2c2d33; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12px; transition: transform .25s, opacity .25s, visibility .25s; text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.success { border-color: var(--green); }
.toast.error { border-color: #ef4444; }

/* small phones */
@media (max-width: 400px) {
  .odds.c3, .cols.c3 { width: 177.5px; }
  .odd { height: 40px; font-size: 14.5px; }
  .mrow-teams { font-size: 13px; }
  .stabs button { font-size: 14.5px; }
  .mtabs { gap: 17.5px; }
  .mtabs button { font-size: 13.5px; }
  .wordmark { font-size: 18.5px; }
  .bal-chip { font-size: 11px; }
  .auth-card { padding-left: 16px; padding-right: 16px; }
  .auth-title { font-size: 19px; }
  .quick a { font-size: 9px; }
  .slip-top { gap: 6.5px; padding: 9.5px 11px; }
  .mode-toggle button { padding: 5.5px 10.5px; }
  .slip-bal { font-size: 13.5px; }
}
@media (min-width: 561px) and (max-width: 899px) {
  body { background: radial-gradient(circle at 50% -20%, #0b2a6b, var(--bg-2) 60%); }
  .app { box-shadow: 0 0 60px rgba(0, 0, 0, .6); }
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  :root { --max: 1280px; }
  body { background: var(--bg-2); }
  .app { display: flex; flex-direction: column; padding-bottom: 0; box-shadow: 0 0 60px rgba(0, 0, 0, .5); }
  .topbar { order: 0; padding: 12px 28px; }
  .wordmark { font-size: 28px; }
  /* bottom nav becomes a top tab bar */
  .bottomnav { order: 1; position: sticky; top: 60px; left: auto; transform: none; display: flex; justify-content: center; gap: 8px; width: auto; max-width: none; background: #111216; border-top: 0; border-bottom: 1px solid var(--border); padding: 0 20px; z-index: 29; }
  .bottomnav a { flex-direction: row; gap: 8px; padding: 13px 22px; font-size: 15px; }
  .bottomnav a .ic { width: 20px; height: 20px; }
  .bottomnav a.on::before { top: auto; bottom: 0; left: 14px; right: 14px; border-radius: 3px 3px 0 0; }
  .nav-dot { top: 10px; left: 34px; }
  #view { order: 2; flex: 1; padding-bottom: 40px; }
  .subhead { top: 106px; padding: 10px 24px; }

  .banners { gap: 14px; padding: 18px 24px 8px; }
  .banner { flex: 1 1 0; width: auto; min-width: 200px; height: 150px; font-size: 16px; padding: 12px 14px; border-radius: 14px; }
  .mrow-teams.scores { flex: 0 1 380px; margin-right: auto; }
  .topbar .btn.sm { height: 40px; padding: 0 20px; font-size: 16px; }
  .bal-chip { font-size: 17px; }
  .quick { max-width: 760px; margin: 0 auto; padding: 14px 0 18px; }
  .quick a { font-size: 14px; }
  .quick .ic { width: 28px; height: 28px; }
  .featured { margin: 0 24px 20px; }
  .fcard { width: 340px; }
  .mrow { padding: 12px 24px 14px; }
  .mrow-teams { font-size: 16px; }
  .odds, .cols { width: 360px; }
  .odds.c2, .cols.c2 { width: 240px; }
  .odd { height: 46px; }
  .col-head, .day-head { padding-left: 24px; padding-right: 24px; }
  .mtabs { padding: 0 24px; }
  .sec-tabs { padding-left: 24px; }
  .live-sec, .sports-sec { margin: 0 24px 20px; border: 1px solid var(--border); border-left: 4px solid var(--brand-2); border-radius: 12px; overflow: hidden; background: var(--bg); }
  .winners, .site-footer { padding-left: 24px; padding-right: 24px; }
  .site-footer { max-width: 820px; margin: 0 auto; }

  /* forms / account pages stay a readable width */
  .route-me #view, .route-wallet #view, .route-deposit #view, .route-withdraw #view, .route-transactions #view,
  .route-account #view, .route-support #view, .route-promotions #view, .route-gifts #view, .route-open-bets #view, .route-match #view { width: 100%; max-width: 820px; margin: 0 auto; }
  .games-grid { grid-template-columns: repeat(4, 1fr); }
  .route-games .pad { padding: 20px 24px; }
  .az-filters { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; padding: 0 24px 14px; }
  .az-filters .chips { grid-column: 1 / -1; }
  .pill-tabs { padding: 14px 24px 12px; }

  .slip-fab { bottom: 30px; right: 30px; }
  .rec-bar { bottom: 0; max-width: 820px; border-radius: 14px 14px 0 0; border: 1px solid var(--border); }
  /* betslip opens as a right-hand panel */
  #slip-sheet.overlay-sheet { justify-content: flex-end; align-items: stretch; }
  #slip-sheet .sheet { max-width: 420px; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; border-left: 1px solid var(--border); transform: translateX(30px); }
  #slip-sheet.open .sheet { transform: none; }
  .overlay-sheet:not(#slip-sheet) { align-items: center; }
  .overlay-sheet:not(#slip-sheet) .sheet { max-width: 520px; border-radius: 20px; border-bottom: 1px solid var(--border); }
  .toast { top: 72px; }
}