/* SureOdds — deep navy screens, light yellow-green primary actions. Light cards hold codes and payments;
   dark-blue cards hold navigation (platform lists, wallet tiles, admin tiles). */
:root {
  --bg: #081833;          /* page ground */
  --bg-glow: #17408f;     /* top glow */
  --navy: #0b1f44;
  --card: #10285a;        /* dark cards */
  --card-2: #163371;
  --line: #24448a;        /* outlines on navy */
  --accent: #d4f04c;      /* light yellow-green: primary action, active state */
  --accent-2: #e4f88a;    /* lighter tint for text on navy */
  --accent-ink: #0b1f44;  /* text on accent */
  --blue: #1f5bff;        /* secondary action (withdraw, odds pills) */
  --gold: #ffcc00;        /* crown, brand mark */
  --white: #ffffff;
  --text-dim: #a8b6d6;    /* secondary text on navy */
  --sheet: #f3f5f9;       /* light cards */
  --sheet-2: #e7ebf3;
  --ink: #111827;         /* text on light cards */
  --muted: #6b7280;
  --green: #16a34a; --green-bg: #dcf5e6;
  --orange: #f59e0b; --orange-ink: #a16207; --orange-bg: #fff4dd;
  --rose-bg: #fff1d6; --rose-ink: #92400e;   /* errors use amber, not red */
  --blue-bg: #e3ebff;
  --radius: 12px;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--white); font-family: var(--body); font-size: 14px; line-height: 1.45; min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(120% 60% at 50% -12%, var(--bg-glow) 0%, var(--navy) 45%, var(--bg) 100%) var(--bg);
  background-attachment: fixed;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--navy); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: 720px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hidden { display: none !important; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

/* ── header ── */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(8,24,51,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.topbar .wrap { display: flex; align-items: center; gap: 4px; height: 58px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand svg { flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--white); white-space: nowrap; }
.brand-name { display: inline-flex; align-items: baseline; gap: 5px; font-style: italic; letter-spacing: .02em; font-size: clamp(22px, 7vw, 28px); }
.bm-bet { color: var(--white); }
.bm-master { color: var(--accent); position: relative; }
.bm-master::after { content: ""; position: absolute; left: 2px; right: 0; bottom: -3px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.brand-sub { font-style: normal; }
.brand-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.hdr-title { font-family: var(--display); font-size: 22px; font-weight: 700; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--white);
  display: grid; place-items: center; cursor: pointer; text-decoration: none; flex: 0 0 auto; padding: 0;
}
.icon-btn.back { margin-left: -8px; }
.dot { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.preview-banner { background: var(--gold); color: #2b2300; font-size: 12px; padding: 5px 0; text-align: center; }
.preview-banner button { background: none; border: 0; text-decoration: underline; cursor: pointer; font-weight: 700; color: inherit; padding: 0 0 0 6px; }
.searchbar { padding-bottom: 8px; }

main.wrap { padding-top: 8px; padding-bottom: 16px; }
.section { margin-top: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.section-head h2 { font-family: var(--display); font-size: 19px; font-weight: 700; }
.section-head a { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.page-sub { color: var(--text-dim); margin: 2px 0 10px; font-size: 13px; }
.scroller { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 2px max(16px, env(safe-area-inset-left, 0px)) 4px; }
.scroller::-webkit-scrollbar { display: none; }

/* ── promo pictures: two short cards side by side ── */
.promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.promo { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1.6 / 1; max-height: 130px; width: 100%; text-decoration: none; background: var(--card); }
.promo svg.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.promo-txt { position: absolute; left: 9px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; max-width: 62%; line-height: 1; }
.promo-txt .p0 { font-size: clamp(9px, 2.6vw, 12px); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.promo-txt .p1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 6.6vw, 32px); color: var(--accent); line-height: .95; }
.promo-txt .p1.gold { color: var(--gold); font-size: clamp(17px, 5.4vw, 27px); }
.promo-txt .p2 { margin-top: 4px; font-size: clamp(9px, 2.6vw, 12px); font-weight: 600; color: #fff; }

/* ── category row ── */
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.cat svg { width: 19px; height: 19px; }
.cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 5px 2px;
  border-radius: 10px; text-decoration: none; background: var(--card); border: 1.5px solid var(--line); color: var(--white);
  font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.15;
}
.cat[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-2); }
.cat[aria-current="true"] .ic { color: var(--accent); }

/* ── platform tiles ── */
.plats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.plat { text-decoration: none; display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-width: 0; }
.plat-tile { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; padding: 4px; position: relative; overflow: hidden; }
.plat-tile img { max-width: 90%; max-height: 90%; object-fit: contain; }
.plat-name { font-size: 11.5px; font-weight: 600; text-align: center; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wordmark { font-family: var(--display); font-weight: 700; color: var(--white); text-align: center; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wordmark .big { font-size: 30px; font-style: italic; }
.wordmark .sm { font-size: 11px; }
.wm-bet9ja { font-style: italic; font-size: 19px; }
.wm-1xbet { font-style: italic; font-size: 18px; letter-spacing: -.02em; }
.wm-betking { font-size: 14px; }
.crown { color: var(--gold); }

/* ── light code card (featured, platform pages) ── */
.codes { display: grid; gap: 7px; }
.code-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 6px 9px;
}
.logo-chip { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; }
.logo-chip img { width: 100%; height: 100%; object-fit: cover; }
.code-info { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.code-id { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.code-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.odds-pill { display: inline-block; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; }
.price { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.buy-stack { display: flex; align-items: center; gap: 10px; }
@media (max-width: 379px) { .buy-stack { flex-direction: column; align-items: flex-end; gap: 5px; } }

/* ── dark list rows (platforms on odds page, inbox-like lists on navy) ── */
.dlist { display: grid; gap: 8px; }
.drow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 6px 10px 6px 6px; text-decoration: none; color: var(--white); }
.drow .logo-chip { width: 48px !important; height: 44px !important; border-radius: 8px; }
.drow .t { font-weight: 700; font-size: 15px; }
.drow .s { color: var(--text-dim); font-size: 12px; }

/* ── platform hero ── */
.phero { position: relative; border-radius: 12px; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 78px; color: var(--white); }
.phero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.phero .mark { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: rgba(0,0,0,.18); flex: 0 0 auto; }
.phero h1 { font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1; }
.phero p { margin: 4px 0 0; font-weight: 600; font-size: 13.5px; line-height: 1.25; }

/* ── tabs ── */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0; }
.tabs button, .tabs a {
  border: 1px solid var(--line); background: var(--card); color: var(--white); border-radius: 9px; padding: 8px 4px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none; line-height: 1.2; min-width: 0; padding-top: 6px; padding-bottom: 6px;
}
.tabs [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── buttons & forms ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; border-radius: 9px;
  padding: 9px 14px; font-weight: 700; font-size: 14px; text-decoration: none; background: var(--accent); color: var(--accent-ink); min-height: 42px; white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.sm { padding: 5px 11px; min-height: 32px; font-size: 12.5px; border-radius: 7px; }
.btn.xs { padding: 3px 9px; min-height: 26px; font-size: 11.5px; border-radius: 6px; }
.btn.block { width: 100%; }
.btn.blue { background: var(--blue); color: var(--white); }
.btn.green { background: var(--green); color: var(--white); }
.btn.light { background: var(--white); color: var(--ink); border: 1px solid #d5dbe6; }
.btn.outline { background: transparent; color: var(--white); border: 1px solid var(--line); }
.btn.gold { background: var(--gold); color: #2b2300; }
.btn.ghost { background: transparent; color: var(--blue); padding-left: 4px; padding-right: 4px; min-height: 0; }
.btn.big { min-height: 44px; font-size: 15px; border-radius: 10px; }
.btn.confirm { width: 100%; min-height: 48px; font-size: 15px; letter-spacing: .04em; border-radius: 9px; }
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; border: 1px solid #d5dbe6; background: var(--white); color: var(--ink); border-radius: 9px; padding: 9px 11px; min-height: 44px; }
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(31,91,255,.18); }
.dark-input { background: var(--card); border-color: var(--line); color: var(--white); }
.dark-input::placeholder { color: var(--text-dim); }
.amount-input { font-family: var(--display); font-size: 24px; font-weight: 700; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 130px; }
.err { background: var(--rose-bg); color: var(--rose-ink); border-radius: 8px; padding: 8px 11px; font-size: 13px; margin-bottom: 10px; }
.ok { background: var(--green-bg); color: #166534; border-radius: 8px; padding: 8px 11px; font-size: 13px; margin-bottom: 10px; }

/* ── light panels ── */
.sheet-card, .panel, .list, .card, .match { background: var(--sheet); color: var(--ink); border-radius: var(--radius); }
.panel { padding: 12px; }
.panel + .panel { margin-top: 10px; }
.panel h2 { font-family: var(--display); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.dim { color: var(--text-dim); }

/* booking-code page */
.bc-head { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 11px; align-items: center; padding: 10px; }
.bc-head .logo-chip { width: 54px !important; height: 54px !important; border-radius: 11px; }
.bc-head .pname { font-weight: 700; font-size: 16px; }
.bc-head .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 3px 0; }
.bc-head .codelbl { font-size: 12.5px; color: var(--muted); background: var(--sheet-2); border-radius: 5px; padding: 1px 7px; }
.bc-head .price { font-size: 22px; }
.pd { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 10px; }
.pd > h2 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 2px 2px 10px; color: var(--white); }
.pd-inner { background: var(--sheet); color: var(--ink); border-radius: 10px; padding: 10px; }
.bank-grid { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 12px; }
.bank-ic { width: 46px; height: 46px; border-radius: 12px; background: #19a463; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 22px; grid-row: span 3; align-self: start; }
.kv-l { font-size: 11.5px; color: var(--muted); }
.kv-v { font-weight: 700; font-size: 16px; }
.acct-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acct-line .kv-v { font-family: var(--display); font-size: 22px; letter-spacing: .03em; }
.bank-grid > div + div { border-top: 1px solid var(--sheet-2); padding-top: 6px; }
.notice { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; background: var(--blue-bg); border-radius: 9px; padding: 10px; margin: 12px 0; font-size: 12.5px; color: #374151; }
.notice b { color: var(--ink); font-size: 14px; display: block; margin-bottom: 2px; }
.notice .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: Georgia, serif; font-size: 14px; }
.footnote { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ── wallet ── */
.bal-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; background: linear-gradient(135deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.bal-card .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.bal-card .lbl { color: var(--text-dim); font-size: 13px; }
.bal-card .v { font-family: var(--display); font-size: 29px; font-weight: 700; line-height: 1.05; }
.bal-card .sub { color: var(--text-dim); font-size: 11.5px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 8px; }
.tile .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.tile .k { font-size: 11.5px; color: var(--text-dim); }
.tile .v { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.1; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

.txlist { display: grid; gap: 7px; }
.tx { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: start; background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 8px 9px; }
.tx .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.tx .t { font-weight: 700; font-size: 13.5px; }
.tx .t .st { font-weight: 600; font-size: 12px; }
.tx .s { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tx .r { text-align: right; display: grid; gap: 4px; justify-items: end; }
.tx .amt { font-family: var(--display); font-size: 17px; font-weight: 700; white-space: nowrap; }
.ref { font-family: var(--display); letter-spacing: .02em; font-size: 13px; }

.badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.badge.pending, .badge.awaiting_payment, .badge.reserved { background: var(--orange-bg); color: var(--orange-ink); }
.badge.approved { background: var(--blue-bg); color: var(--blue); }
.badge.paid, .badge.completed, .badge.available { background: var(--green); color: #fff; }
.badge.rejected, .badge.cancelled { background: var(--rose-bg); color: var(--rose-ink); }
.badge.sold { background: #e4e7ee; color: var(--ink); }
.badge.live { background: var(--accent); color: var(--accent-ink); }
.odds-pill.casino { background: #7c3aed; }
.badge.upcoming { background: var(--blue); color: #fff; }
.badge.ft { background: #374151; color: #fff; }

.empty { text-align: center; padding: 22px 14px; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.list { overflow: hidden; }
.item { padding: 10px 12px; border-bottom: 1px solid var(--sheet-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; }
.item:last-child { border-bottom: 0; }
.item .t { font-weight: 600; }
.item .s { color: var(--muted); font-size: 12.5px; grid-column: 1 / -1; }
.item .amt { font-family: var(--display); font-size: 18px; font-weight: 700; text-align: right; white-space: nowrap; }

.code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 2px dashed var(--navy); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.code-box .code { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: .06em; word-break: break-all; color: var(--ink); min-width: 0; }

/* ── matches ── */
.datebar { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; width: 100%; color: var(--white); cursor: pointer; text-align: left; }
.datebar span { margin-right: auto; font-weight: 600; font-size: 13px; }
.match { padding: 8px 10px; }
.match-top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.match-top img { width: 16px; height: 16px; object-fit: contain; }
.match-top .lg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; min-width: 0; font-weight: 600; color: #374151; }
.mrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.mrow img, .mrow .ph { width: 34px; height: 34px; object-fit: contain; }
.mrow .ph { border-radius: 50%; background: var(--sheet-2); display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.mrow .home { font-weight: 700; font-size: 12.5px; line-height: 1.2; min-width: 0; }
.mrow .home small, .mrow .away small { display: block; color: var(--muted); font-weight: 500; font-size: 10.5px; }
.mrow .away { font-weight: 700; font-size: 12.5px; text-align: right; line-height: 1.2; min-width: 0; }
.mrow .mid { font-family: var(--display); font-weight: 700; font-size: 18px; text-align: center; min-width: 56px; }
.mrow .mid small { display: block; font-family: var(--body); font-size: 10.5px; color: var(--muted); font-weight: 600; }
.odds3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 16px; gap: 6px; margin-top: 9px; align-items: center; }
.odds3 .o { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--white); border: 1px solid var(--sheet-2); border-radius: 7px; padding: 4px 8px; font-size: 12px; color: var(--muted); }
.odds3 .o b { color: var(--ink); font-family: var(--display); font-size: 15px; }

/* ── sheet / dialog ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(4,10,24,.62); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--sheet); color: var(--ink); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; border-radius: 18px 18px 0 0;
  padding: 8px max(16px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)); animation: up .22s ease-out; }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: #b9c0cf; margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-head h2 { font-family: var(--display); font-size: 21px; }
.sheet .panel { background: var(--white); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet, .drawer { animation: none; } .promo-slide { transition: none; } }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--white); color: var(--ink); font-weight: 600; border-radius: 10px; padding: 9px 14px; font-size: 13px; max-width: 90vw; box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* ── account menu ── */
.menu { display: grid; gap: 8px; }
.menu a, .menu button { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; text-decoration: none; color: var(--white); font-weight: 600; text-align: left; cursor: pointer; width: 100%; }
.menu .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--card-2); }
.menu .s { display: block; font-weight: 400; font-size: 12px; color: var(--text-dim); }

/* ── admin ── */
.admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: grid; gap: 2px; align-content: start; }
.side a, .side button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--white); text-decoration: none; font-size: 13px; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.side a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.side .c { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 0 6px; font-size: 11px; }
.side a[aria-current="page"] .c { background: rgba(0,0,0,.25); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(4,10,24,.6); z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(270px, 80vw); z-index: 41; padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 12px max(10px, env(safe-area-inset-left, 0px)); background: var(--navy); border-right: 1px solid var(--line); overflow-y: auto; animation: slide .2s ease-out; }
.drawer .side { border: 0; background: transparent; padding: 0; }
.drawer h2 { font-family: var(--display); font-size: 20px; margin: 4px 8px 12px; }
@keyframes slide { from { transform: translateX(-30px); opacity: .5; } to { transform: none; opacity: 1; } }
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stile { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 8px; text-decoration: none; color: var(--white); }
.stile .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.stile .k { font-size: 11.5px; color: var(--text-dim); }
.stile .v { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.05; }
.tbl-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid rgba(36,68,138,.5); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

.inbox { display: grid; gap: 7px; }
.irow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: start; background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 8px 9px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.irow .n { font-weight: 700; font-size: 13.5px; }
.irow .u { font-size: 11.5px; color: var(--muted); }
.irow .mid { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.irow .mid b { color: var(--ink); font-family: var(--display); font-size: 16px; }
.irow .acts { display: grid; gap: 5px; justify-items: end; }
.irow .acts .two { display: flex; gap: 5px; }
.sent-flag { font-weight: 600; font-size: 11.5px; padding: 2px 7px; border-radius: 5px; }
.sent-flag.no { background: var(--orange-bg); color: var(--orange-ink); }
.sent-flag.yes { background: var(--green-bg); color: #166534; }
.cards { display: grid; gap: 8px; }
.card { padding: 10px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 13px; margin: 8px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.card-actions .btn { flex: 1 1 110px; }

@media (min-width: 700px) {
  .admin { grid-template-columns: 210px minmax(0, 1fr); }
  .admin .menu-btn { display: none; }
  .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards.grid2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) { .admin > .side { display: none; } }

/* ── bottom bar: Home · Matches · LIVE (centre) · My Bets · Wallet ── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--navy); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar .wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; height: 58px; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; text-decoration: none; color: var(--text-dim); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--accent); }
.tab.live { justify-content: flex-end; padding-bottom: 6px; color: var(--white); position: relative; }
.tab.live .bubble { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 70%); border: 4px solid var(--navy); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(212,240,76,.35); }
.tab.live .live-txt { display: inline-flex; align-items: center; gap: 2px; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; color: var(--accent-ink); }
.tab.live .live-txt i { width: 6px; height: 6px; border-radius: 50%; background: #c2410c; animation: pulse 1.4s infinite; }
.tab.live[aria-current="page"] { color: var(--accent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tab.live .live-txt i { animation: none; } }
.code-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }

/* reject buttons: neutral, never red */
.btn.reject { background: var(--white); color: var(--ink); border: 1px solid #c9cfda; }
/* notifications: each message is a link to its page */
.notes { display: grid; gap: 7px; }
.note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 9px 11px; text-decoration: none; border-left: 4px solid transparent; }
.note.unread { border-left-color: var(--accent); background: #fbfde9; }
.note .t { font-weight: 700; font-size: 13.5px; }
.note .w { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.note .b { grid-column: 1 / -1; font-size: 12.5px; color: #374151; }
.note .go { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--blue); }

/* ── booking-code cards: larger, dark navy, code locked until purchase ── */
.code-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: linear-gradient(135deg, #0f2a5e, #0b1f44); color: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.code-card .logo-chip { border-radius: 11px; }
.cc-main { min-width: 0; display: grid; gap: 5px; }
.cc-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14.5px; }
.cc-lock { display: inline-flex; align-items: center; gap: 7px; justify-self: start; background: rgba(255,255,255,.07); border: 1px dashed rgba(212,240,76,.55); border-radius: 7px; padding: 3px 9px; color: var(--accent); }
.cc-lock svg { width: 14px; height: 14px; }
.cc-lock .dots { color: var(--white); letter-spacing: .1em; font-weight: 700; font-size: 13px; }
.cc-sub { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.cc-buy .price { color: var(--white); font-size: 21px; }
.codes { gap: 9px; }

/* ── promotions ── */
.carousel { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.car-track { display: flex; transition: transform .45s ease; }
.car-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card); }
.slide-link { position: absolute; inset: 0; display: block; }
.art.full { object-fit: contain; object-position: center; background: #0b1f44; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pr-txt { position: absolute; left: 12px; top: 0; bottom: 0; max-width: 58%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; z-index: 1; }
.pr1 { font-weight: 800; text-transform: uppercase; color: #fff; font-size: clamp(11px, 3.4vw, 15px); letter-spacing: .03em; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pr2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; color: var(--gold); font-size: clamp(22px, 7.6vw, 36px); line-height: .95; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pr3 { font-size: clamp(9.5px, 2.8vw, 12px); color: #dbe4f7; font-weight: 600; }
.pr-btn { margin-top: 7px; min-height: 30px; padding: 4px 11px; font-size: 12px; }
.pr-txt.sm .pr1 { font-size: clamp(10px, 3vw, 13px); } .pr-txt.sm .pr2 { font-size: clamp(16px, 5.4vw, 26px); }
.car-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.car-dots button { width: 7px; height: 7px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s; }
.car-dots button[aria-current="true"] { width: 18px; background: var(--white); }
.strip-banner { position: relative; display: block; aspect-ratio: 3.2 / 1; max-height: 140px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 9px; text-decoration: none; }
.strip-banner .pr-txt { max-width: 64%; }
.strip-btn { position: absolute; right: 10px; bottom: 9px; z-index: 1; }
.refer-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--white); background: linear-gradient(110deg, #1f5bff, #7c3aed); }
.refer-card .rc-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.refer-card b { display: block; font-size: 14px; } .rc-s { font-size: 12px; opacity: .9; }
.promo-hero { position: relative; aspect-ratio: 2.35 / 1; max-height: 200px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.promo-thumb { position: relative; aspect-ratio: 2.35 / 1; border-radius: 10px; overflow: hidden; background: var(--card); }
.reward-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.rcard { border-radius: 11px; padding: 9px 8px; color: #fff; display: grid; gap: 3px; }
.rcard b { font-family: var(--display); font-size: 19px; line-height: 1.05; } .rcard span { font-size: 11px; opacity: .92; line-height: 1.25; }

/* ── AI assistant ── */
.ai-fab { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 24; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 190px); }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.msg.bot { align-self: flex-start; background: var(--sheet); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg.typing { color: var(--muted); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-q { border: 1px solid var(--line); background: var(--card); color: var(--white); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; position: sticky; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); background: var(--bg); padding-top: 6px; }
.ai-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.ai-pill svg { width: 16px; height: 16px; }
@media (max-width: 399px) { .ai-pill span { display: none; } .ai-pill { padding: 8px; } .ai-pill svg { width: 18px; height: 18px; } }
.strip-banner.full { aspect-ratio: 16 / 9; max-height: none; }
/* Featured Booking Codes picture: full width of the section, short in height (wide version of the picture). */
.strip-banner.full { width: 100%; aspect-ratio: 1307 / 560; margin-bottom: 10px; }
.pr-txt { max-width: 56%; }

/* ── Refer & Earn ── */
.promo-hero.full { aspect-ratio: 1536 / 772; max-height: none; }
.hero-tap { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.hero-tap:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.ref-link { margin-top: 10px; background: linear-gradient(135deg, #0f2a5e, #0b1f44); border: 1px solid #c79a1e; border-radius: 14px; padding: 12px; display: grid; gap: 9px; }
.rl-head { display: flex; align-items: center; gap: 8px; color: var(--gold); } .rl-head b { color: #fff; font-size: 15px; }
.rl-box { display: grid; grid-template-columns: minmax(0, 1fr) 44px; border: 1.5px solid var(--gold); border-radius: 999px; overflow: hidden; background: #08183a; }
.rl-url { padding: 9px 12px; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; -webkit-user-select: all; }
.rl-copy { border: 0; background: var(--gold); color: #2b2300; display: grid; place-items: center; cursor: pointer; }
.rl-code { font-size: 12.5px; color: var(--text-dim); } .rl-code b { color: #fff; letter-spacing: .06em; font-size: 15px; }
.ref-link .btn.gold { background: linear-gradient(180deg, #ffe066, #f5b400); color: #0b1f44; font-family: var(--display); font-size: 19px; letter-spacing: .04em; border-radius: 999px; }
.rl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: st; }
.rl-steps li { display: grid; justify-items: center; text-align: center; gap: 4px; color: var(--gold); font-size: 10.5px; counter-increment: st; }
.rl-steps li span { color: #fff; line-height: 1.25; } .rl-steps li span::before { content: counter(st) ". "; }
.rcard { position: relative; text-align: center; justify-items: center; border: 1px solid rgba(255,255,255,.18); }
.rcard b { background: linear-gradient(180deg, #ffe066, #f5b400); color: #0b1f44; border-radius: 8px; padding: 3px 6px; font-size: clamp(15px, 4.6vw, 20px); width: 100%; }
.rcard.done { box-shadow: inset 0 0 0 2px var(--gold); }
.rcard em { position: absolute; top: -7px; right: -4px; background: var(--gold); color: #0b1f44; font-style: normal; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.ref-progress { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 7px; }
.rp-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .rp-top b { color: var(--gold); }
.rp-bar { position: relative; height: 9px; border-radius: 5px; background: #08183a; overflow: visible; }
.rp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--accent)); }
.rp-bar s { position: absolute; top: -3px; width: 3px; height: 15px; margin-left: -1.5px; background: #fff; border-radius: 2px; opacity: .7; }
.rp-sub { font-size: 12px; color: var(--text-dim); } .rp-sub b { color: #fff; }
.ref-slogan { text-align: center; font-family: var(--display); font-style: italic; font-size: 19px; color: var(--gold); margin: 12px 0 0; }
.ref-slogan b { color: #fff; }

/* ── compact top carousel: narrower and shorter, centred; text scales with the panel ── */
/* One small banner at a time, centred; the pictures slide in one after another. Same small size on phones and big screens. */
.carousel { width: min(78%, 300px); margin-inline: auto; border-radius: 12px; container-type: inline-size; }
.carousel .pr-txt { left: 7%; max-width: 58%; gap: 1px; }
.carousel .pr1 { font-size: 4.3cqi; }
.carousel .pr2 { font-size: 8.6cqi; }
.carousel .pr3 { font-size: 3.4cqi; }
.carousel .pr-btn { margin-top: 2.2cqi; min-height: 0; padding: 1.4cqi 3.4cqi; font-size: 3.6cqi; border-radius: 6px; }
.carousel .car-dots { bottom: 4px; gap: 4px; }
.carousel .car-dots button { width: 5px; height: 5px; }
.carousel .car-dots button[aria-current="true"] { width: 12px; }

/* ── homepage banners: every picture visible at once, small tiles in one section ── */
/* All top pictures in one straight line (no rotation), big enough to read. On phones the line scrolls sideways;
   on big screens all four fit. */
.promo-grid { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 1px; }
.promo-grid::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .promo-grid { justify-content: center; } }
.pg-tile { position: relative; flex: 0 0 clamp(140px, 44%, 172px); scroll-snap-align: start; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--card); container-type: inline-size; text-decoration: none; }
.pg-tile .pr-txt { left: 6%; max-width: 60%; gap: 0; }
.pg-tile .pr1 { font-size: 5.4cqi; }
.pg-tile .pr2 { font-size: 10.5cqi; }
.pg-tile .pr3 { font-size: 4.2cqi; }
.pg-tile .pr-btn { margin-top: 2.5cqi; min-height: 0; padding: 1.6cqi 4cqi; font-size: 5cqi; border-radius: 5px; pointer-events: none; }

/* Floating Telegram / WhatsApp / Refer & Earn buttons on the homepage (right side) */
.fab-stack { position: fixed; z-index: 30; right: max(0px, calc((100vw - 720px) / 2)); bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fab-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.fab { width: 34px; height: 34px; border-radius: 10px 0 0 10px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.9); }
.fab.tg { background: #229ed9; }
.fab.wa { background: #25d366; }
.fab.rf { background: var(--accent); color: #0b1530; animation: fabPulse 2.4s ease-in-out infinite; }
.fab-l { display: none; font-size: 9.5px; font-weight: 800; color: #fff; background: rgba(7,14,38,.82); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.fab-item:active .fab { transform: scale(.94); }
@keyframes fabPulse { 0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.9); } 50% { box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.9), 0 0 0 8px rgba(212,240,76,.25); } }
@media (prefers-reduced-motion: reduce) { .fab.rf { animation: none; } }

/* Email approvals */
.ok-box { background: rgba(22,163,74,.14); border: 1px solid rgba(22,163,74,.5); border-radius: 10px; padding: 9px 11px; }
.done-panel h2 { color: var(--accent); }
.mail-pv p { margin: 8px 0; font-size: 13.5px; }

/* "More" page: every part of the app as small tiles */
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.more-grid .cat { min-height: 66px; font-size: 10.5px; }
.more-grid .cat svg { width: 21px; height: 21px; }
@media (min-width: 560px) { .more-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Featured Booking Codes header row: links divided by equal straight lines; scrolls sideways if it doesn't fit */
.sec-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 2px 0; }
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav a { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none; line-height: 1.2; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; text-shadow: 0 1px 2px rgba(0,0,0,.35); padding: 4px 0; }
.sec-nav a:hover, .sec-nav a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.sec-nav a.main { font-family: var(--display); font-size: 17px; color: #fff; }
.sec-nav .sl { flex: 0 0 2px; width: 2px; height: 18px; border-radius: 1px; background: #fff; }
@media (min-width: 640px) { .sec-nav { gap: 6px; } .sec-nav a { font-size: 13px; } .sec-nav a.main { font-size: 15px; } }

/* Real vs virtual football */
.odds-pill.vf { background: #0e7490; }
.kind-note { font-size: 12px; color: var(--muted); margin: 8px 0 10px; line-height: 1.4; }
.kind-note a { color: var(--accent); font-weight: 700; text-decoration: none; }
.kind-note.vf { color: #e6fbff; background: rgba(14,116,144,.25); border: 1px solid rgba(14,116,144,.6); border-radius: 10px; padding: 8px 10px; }

/* Customer service button in the header */
.cs-btn { color: #fff; }
/* Casino games list */
.glist { display: grid; gap: 8px; }
.gcard { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.gart { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #7c3aed; display: grid; place-items: center; color: #fff; }
.gart img { width: 100%; height: 100%; object-fit: cover; }
.gart svg { width: 28px; height: 28px; }
.gbody b { display: block; font-size: 14.5px; color: #fff; }
.gbody p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.gplat { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--accent); }

/* Booking codes: four in a row, swipe right for the rest */
.code-strip { display: flex; width: 100%; min-width: 0; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.code-strip::-webkit-scrollbar { display: none; }
.code-tile { flex: 0 0 calc((100% - 18px) / 4); scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 6px; border-radius: 10px;
  background: linear-gradient(160deg, #0f2a5e, #0b1f44); border: 1px solid var(--line); color: #fff; container-type: inline-size; }
.ct-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ct-top .logo-chip { flex: 0 0 auto; border-radius: 7px; font-size: 13px; }
.ct-top b { font-size: 10.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.code-tile .odds-pill { align-self: flex-start; font-size: 9.5px; padding: 1px 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-lock { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px dashed rgba(212,240,76,.6); border-radius: 6px; padding: 3px 2px;
  color: var(--accent); font-size: 10px; font-weight: 700; background: rgba(255,255,255,.06); }
.ct-lock svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ct-price { font-weight: 800; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-buy { min-height: 0; padding: 5px 2px; font-size: 10.5px; border-radius: 7px; text-align: center; white-space: nowrap; }
@container (max-width: 99px) { .ct-top { justify-content: center; } .ct-top b { display: none; } .code-tile .odds-pill { align-self: center; } }
@container (min-width: 130px) { .ct-top b { font-size: 12.5px; } .ct-lock { font-size: 11.5px; } .ct-price { font-size: 16px; } .ct-buy { font-size: 12.5px; padding: 7px 4px; } .code-tile .odds-pill { font-size: 11px; } }

/* Sports strip under the booking codes: lines above and below, straight lines between names, all capitals */
.sport-strip { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; padding: 10px 2px; border-top: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.sport-strip::-webkit-scrollbar { display: none; }
.sport-strip a { flex: 0 0 auto; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-decoration: none; line-height: 1.2; }
.sport-strip a:hover, .sport-strip a:focus-visible { color: var(--accent); }
.sport-strip .sl { flex: 0 0 2px; width: 2px; height: 16px; background: #fff; border-radius: 1px; }

/* Booking codes: the usual cards, four in each group, stacked; swipe to the side for the next four */
.code-pages { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: 100%; gap: 9px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.code-pages::-webkit-scrollbar { display: none; }
.code-pages.multi { grid-auto-columns: 92%; }          /* the edge of the next group shows, so people know to swipe */
.code-pages .code-card { scroll-snap-align: start; min-width: 0; }

/* Featured Booking Codes picture: long and short (full width, small height) */
.strip-banner.full { width: 100%; max-width: none; aspect-ratio: 1360 / 420; }
/* Booking code cards: slightly smaller price and Buy Now button */
.cc-buy { gap: 6px; }
.cc-buy .price { font-size: 17px; }
.cc-buy .btn { min-height: 0; padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* Upcoming Matches | Football | Basketball | V Football | DLS Football row under the category buttons */
.match-nav { margin: 12px 0 0; justify-content: space-between; }
.match-nav a { font-size: 13.5px; }


/* Homepage match sections under the Upcoming Matches | Football | ... row */
.match-sec { margin-top: 18px; }
.match-nav { margin: 0 0 10px; }
.match-nav a[aria-selected="true"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mt-panel { min-height: 40px; }
.mt-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.mt-more svg { width: 14px; height: 14px; }
.mt-empty { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.mt-empty b { font-size: 13.5px; color: #fff; } .mt-empty span { font-size: 12px; color: var(--muted); }

/* Bottom match row: bigger, bolder words with a line across the top. Swipes sideways if it doesn't fit. */
.match-sec .match-nav { border-top: 2px solid rgba(255,255,255,.9); padding-top: 12px; gap: 12px; justify-content: flex-start; }
.match-sec .match-nav a { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
.match-sec .match-nav .sl { height: 20px; }
/* A little smaller: bottom row words and the message under them */
.match-sec .match-nav a { font-size: 14px; }
.match-sec .match-nav .sl { height: 18px; }
.mt-empty { padding: 9px 10px; gap: 2px; }
.mt-empty b { font-size: 12.5px; } .mt-empty span { font-size: 11px; }
.sec-nav a[data-ft][aria-pressed="true"]:not(.main) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sec-nav a.main[aria-pressed="false"] { opacity: .85; }

/* Uploaded platform logos fill their tile (no extra padding or background showing) */
.plat-tile.has-logo, .logo-chip.has-logo { padding: 0; background: transparent !important; box-shadow: none !important; }
.plat-tile.has-logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.phero .mark img.full-logo { width: 56px; height: 56px; border-radius: 12px; display: block; }
/* Platform names under the tiles shrink slightly on small phones so "Football.com" fits in full */
.plat-name { font-size: clamp(10px, 2.95vw, 11.5px); letter-spacing: -.01em; text-overflow: clip; }
.plat-name.long { font-size: clamp(9px, 2.6vw, 11.5px); overflow: visible; }
/* Featured "Purchase your booking code now" strip: full width, low height */
.strip-banner.full { width: 100%; max-width: none; margin-left: auto; margin-right: auto; aspect-ratio: 1671 / 941; border-color: rgba(255,196,0,.45); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.strip-banner.full img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) { .strip-banner.full { max-width: 640px; margin-left: auto; margin-right: auto; } }

/* Bottom bar: six plain tabs (no raised LIVE bubble); labels shrink a touch on small phones */
@media (max-width: 380px) { .tab { font-size: 9.8px; } .tabbar .wrap { padding-left: 8px; padding-right: 8px; } }

/* Bottom bar: a little more room — space at the sides, between buttons, and above/below */
.tabbar .wrap { height: 64px; column-gap: 6px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); align-items: center; }
.tabbar { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.tab { gap: 4px; padding: 6px 0; border-radius: 10px; }
.tab svg { width: 21px; height: 21px; }
@media (max-width: 380px) { .tabbar .wrap { column-gap: 3px; padding-left: 10px; padding-right: 10px; } .tab { font-size: 9.6px; } }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
/* A non-wide picture keeps its own shape, at the same height as the other top pictures */
.pg-tile.natural { flex: 0 0 calc(clamp(140px, 44%, 172px) * 0.5625 * var(--r)); aspect-ratio: var(--r); }
.pg-tile.natural img.art.full { object-fit: contain; background: transparent; }

/* Homepage booking codes: one compact card at a time, swipe left/right */
.code-swipe { width: 100%; min-width: 0; }
.cs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.cs-track::-webkit-scrollbar { display: none; }
.cs-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.code-swipe .code-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 11px; border-radius: 12px; }
.code-swipe .code-card .logo-chip { width: 40px !important; height: 40px !important; border-radius: 9px; }
.code-swipe .cc-main { gap: 4px; }
.code-swipe .cc-top { font-size: 13.5px; }
.code-swipe .cc-lock { padding: 2px 8px; } .code-swipe .cc-lock .dots { font-size: 12px; }
.code-swipe .cc-sub { font-size: 11px; }
.code-swipe .cc-buy .price { font-size: 16px; }
.code-swipe .cc-buy .btn { padding: 5px 10px; font-size: 12px; }
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.cs-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cs-btn svg { width: 16px; height: 16px; }
.cs-count { font-size: 12.5px; color: var(--muted); min-width: 52px; text-align: center; } .cs-count b { color: #fff; }

/* Homepage booking code cards: narrower (four stacked per group, swipe for the next four) */
#ftCodes .code-pages, #ftCodes .code-pages.multi { grid-auto-columns: min(250px, 74%); gap: 7px 8px; }
#ftCodes .code-card { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 8px 9px; border-radius: 11px; }
#ftCodes .code-card .logo-chip { width: 34px !important; height: 34px !important; border-radius: 8px; }
#ftCodes .cc-main { gap: 3px; }
#ftCodes .cc-top { font-size: 12.5px; gap: 5px; }
#ftCodes .cc-top .odds-pill { font-size: 10px; padding: 1px 5px; }
#ftCodes .cc-lock { padding: 1px 6px; gap: 5px; } #ftCodes .cc-lock svg { width: 12px; height: 12px; } #ftCodes .cc-lock .dots { font-size: 11px; }
#ftCodes .cc-sub { font-size: 10px; }
#ftCodes .cc-buy { gap: 5px; } #ftCodes .cc-buy .price { font-size: 14px; }
#ftCodes .cc-buy .btn { padding: 4px 8px; font-size: 11px; border-radius: 7px; }

/* Booking code payment page: same dark navy look as the homepage, and a little more compact */
.pay-page { max-width: 460px; margin: 0 auto; }
.pay-page .bc-head { width: 88%; margin: 2px auto 0; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 9px 11px;
  background: linear-gradient(135deg, #0f2a5e, #0b1f44); color: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pay-page .bc-head .logo-chip { width: 44px !important; height: 44px !important; border-radius: 10px; }
.pay-page .bc-head .pname { font-size: 14px; }
.pay-page .bc-head .line { gap: 6px; margin: 2px 0; }
.pay-page .bc-head .odds-pill { font-size: 10.5px; padding: 1px 6px; }
.pay-page .bc-head .codelbl { font-size: 11px; padding: 1px 6px; background: rgba(255,255,255,.08); color: var(--text-dim); }
.pay-page .bc-head .price { font-size: 17px; color: #fff; }
.pay-page .bc-head .code-sub { font-size: 11px; }
.pay-page .pd { padding: 8px; margin-top: 10px; background: linear-gradient(160deg, #0f2a5e, #0b1f44); }
.pay-page .pd > h2 { font-size: 16px; margin: 2px 2px 8px; }
.pay-page .pd-inner { background: rgba(255,255,255,.05); color: #fff; border: 1px solid var(--line); padding: 9px; }
.pay-page .bank-grid { gap: 6px 10px; }
.pay-page .bank-grid > div + div { border-top-color: rgba(255,255,255,.1); }
.pay-page .bank-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 9px; }
.pay-page .kv-l { font-size: 10.5px; color: var(--text-dim); }
.pay-page .kv-v { font-size: 14px; color: #fff; }
.pay-page .acct-line .kv-v { font-size: 18px; }
.pay-page .acct-line .btn { min-height: 0; padding: 4px 10px; font-size: 12px; }
.pay-page .notice { background: rgba(212,240,76,.1); border: 1px solid rgba(212,240,76,.35); color: #fff; font-size: 12px; padding: 8px 9px; margin-top: 9px; }
.pay-page .notice b { color: var(--accent); }
.pay-page .notice .ic { width: 20px; height: 20px; font-size: 12px; }
.pay-page .btn.confirm { min-height: 40px; font-size: 13.5px; margin-top: 9px; }
.pay-page .footnote { color: var(--text-dim); font-size: 11px; margin-top: 7px; }
.pay-page .panel { background: linear-gradient(160deg, #0f2a5e, #0b1f44); color: #fff; border: 1px solid var(--line); }
.pay-page .bank-grid { grid-template-columns: 38px minmax(0, 1fr); }
.pay-page .notice { grid-template-columns: 20px minmax(0, 1fr); gap: 7px; margin: 9px 0 0; }
.pay-page .pd { width: 94%; margin-inline: auto; }
/* OPay logo next to the bank name */
.bank-ic.bank-logo { background: #fff; padding: 0; object-fit: contain; display: block; }
.pay-page .bc-head .codelbl { display: inline-flex; align-items: center; gap: 4px; }
.pay-page .bc-head .codelbl svg { width: 11px; height: 11px; }

/* ───────── Virtual Football & eFootball ───────── */
.crest { flex: 0 0 auto; display: block; }
.vkinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.vkinds::-webkit-scrollbar { display: none; }
.vkinds a { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700; }
.vkinds a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vtabs button small { opacity: .7; font-weight: 600; }
.v-round { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin: 12px 2px 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.vlist { display: grid; gap: 7px; }
@media (min-width: 640px) { .vlist { grid-template-columns: 1fr 1fr; } }
.vcard { background: linear-gradient(135deg, #0f2a5e, #0b1f44); border: 1px solid var(--line); border-radius: 12px; padding: 8px 9px; color: #fff; display: grid; gap: 7px; }
.vc-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.vc-teams { display: grid; gap: 4px; min-width: 0; }
.vc-teams > div { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; }
.vc-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-score { display: grid; gap: 4px; text-align: center; font-weight: 800; font-size: 15px; min-width: 22px; }
.vc-st { display: grid; gap: 3px; justify-items: end; font-size: 11px; }
.vc-more { color: var(--text-dim); font-weight: 700; }
.vs-live { color: #ff5252; font-weight: 800; font-size: 12px; } .vs-ft { color: var(--text-dim); font-weight: 800; font-size: 12px; } .vs-time { font-weight: 800; font-size: 13px; }
.vc-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.odd { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 32px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 12px; cursor: pointer; min-width: 0; }
.odd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); text-align: left; }
.odd b { font-weight: 800; color: #fff; }
.odd.on { background: var(--accent); border-color: var(--accent); } .odd.on span, .odd.on b { color: var(--accent-ink); }
.odd:disabled { opacity: .45; cursor: not-allowed; }
.odd.chg { box-shadow: 0 0 0 2px #ffd600 inset; }
.slip-btn { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 800; font-size: 13.5px; box-shadow: 0 8px 22px rgba(0,0,0,.45); cursor: pointer; }
.slip-btn .sb-n { background: #0b1f44; color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; }
.slip-btn .sb-o { background: rgba(11,31,68,.15); border-radius: 6px; padding: 1px 6px; }
.slip-list { display: grid; gap: 6px; margin-bottom: 10px; }
.slip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; border: 1px solid var(--sheet-2); border-radius: 10px; }
.slip-r { display: flex; align-items: center; gap: 6px; }
.slip-sum { display: flex; justify-content: space-between; margin: 0 2px 10px; font-size: 13.5px; }
.slip-win { display: flex; justify-content: space-between; background: var(--sheet-2); border-radius: 9px; padding: 9px 11px; font-size: 13.5px; }
.notice-warn { background: #fff4dd; color: #92400e; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; }
/* match centre */
.vm { display: grid; gap: 10px; }
.vm-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #0b1f44, #12306e); border: 1px solid var(--line); }
.vm-team { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.vm-team b { font-size: 13px; line-height: 1.15; } .vm-team span { font-size: 9.5px; letter-spacing: .1em; color: var(--text-dim); font-weight: 800; }
.vm-mid { text-align: center; } .vm-score { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.vm-clock { font-weight: 800; font-size: 14px; margin-top: 4px; } .vm-phase { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 800; background: #1f5bff; border-radius: 5px; padding: 1px 7px; }
.vm-stage { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #030b1f; }
.vm-stage canvas { display: block; width: 100%; }
.vm-tag { position: absolute; left: 8px; top: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(3,12,35,.7); padding: 2px 7px; border-radius: 5px; }
.vm-tag b { color: #ffd600; }
.vm-sound { position: absolute; left: 8px; bottom: 7px; font: inherit; font-size: 11px; font-weight: 700; color: #fff; background: rgba(3,12,35,.75); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.vm-goal { background: rgba(255,214,0,.12); border: 1px solid rgba(255,214,0,.5); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.vm-panel { background: linear-gradient(160deg, #0f2a5e, #0b1f44); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.vm-panel h3 { margin: 0 0 8px; font-size: 14px; } .vm-panel h3 small { font-weight: 600; color: var(--text-dim); font-size: 11px; }
.vm-stat { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.vm-stat > span:last-child { text-align: right; } .vm-stat small { display: block; text-align: center; color: var(--text-dim); font-weight: 600; font-size: 10.5px; margin-bottom: 2px; }
.vm-stat i { display: block; height: 5px; border-radius: 3px; background: #ff7043; overflow: hidden; } .vm-stat em { display: block; height: 100%; background: #42a5f5; }
.vm-ev { display: grid; grid-template-columns: 30px 20px minmax(0, 1fr); gap: 4px; align-items: center; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.vm-ev .m { font-weight: 800; color: var(--accent); }
.mk { border-top: 1px solid rgba(255,255,255,.08); } .mk:first-child { border-top: 0; }
.mk summary { cursor: pointer; padding: 9px 2px; font-weight: 700; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 6px; }
.mk summary::after { content: "▾"; margin-left: auto; color: var(--text-dim); } .mk[open] summary::after { content: "▴"; }
.mk summary::-webkit-details-marker { display: none; }
.mk-closed { font-size: 10px; background: rgba(255,255,255,.12); color: var(--text-dim); border-radius: 5px; padding: 1px 6px; }
.mk-sel { display: grid; gap: 5px; padding-bottom: 10px; } .mk-sel.g2 { grid-template-columns: 1fr 1fr; } .mk-sel.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* my virtual bets */
.vb-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(135deg, #0f2a5e, #0b1f44); border: 1px solid var(--line); color: #fff; text-decoration: none; }
.vb-link b { display: block; font-size: 14px; } .vb-link small { color: var(--text-dim); font-size: 11.5px; }
.vb-leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--sheet-2); font-size: 13px; }
.vb-r { display: grid; justify-items: end; gap: 2px; } .vb-res { font-size: 10.5px; font-weight: 800; text-transform: uppercase; border-radius: 5px; padding: 0 6px; }
.vb-res.won { background: #dcf5e6; color: #16a34a; } .vb-res.lost { background: #fde2e2; color: #b91c1c; } .vb-res.void { background: #e7e9ef; color: #4b5563; }
.vb-foot { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--sheet-2); padding-top: 8px; font-size: 12px; color: var(--muted); }
.vb-foot b { color: var(--ink); }
/* markets shown open, with filter chips */
.mk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 6px; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chips button { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.mk-chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mk-h { padding: 9px 2px 6px; font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.mk .odd { min-height: 40px; }
.mk .odd span { white-space: normal; line-height: 1.2; font-size: 11.5px; color: #e6ecf8; }
.slip-mode { margin-bottom: 8px; } .slip-mode button:disabled { opacity: .45; }
.vm > *, .vm-panel { min-width: 0; }
.mk .odd { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 3px; padding: 7px 9px; text-align: left; }
.mk .odd b { font-size: 14px; }
/* Live page: real and virtual groups */
.live-tabs button { font-weight: 800; }
.live-tabs small { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; line-height: 16px; }
.live-note { margin: 2px 2px 10px; }
.live-sub { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 8px; }
.live-sub h3 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.live-sub h3 small { font-size: 12px; font-weight: 600; color: var(--muted, #9fb0d0); }
.live-sub a { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255,59,59,.6); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Connected Accounts */
.ca-jump { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; margin: -6px 0 4px; background: var(--bg, #0b1a3a); }
.ca-jump::-webkit-scrollbar { display: none; }
.ca-jump button { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.ca-p { margin: -2px 2px 10px; }
.ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ca-plat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #fff; font: inherit; cursor: pointer; }
.ca-plat b { font-size: 12.5px; white-space: nowrap; }
.ca-add { font-size: 12px; font-weight: 800; color: var(--accent); }
.ca-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 11px; overflow: hidden; color: #fff; }
.ca-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-logo .wordmark { transform: scale(.8); }
.ca-secure { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); font-size: 12.5px; line-height: 1.45; color: #dcfce7; }
.ca-secure svg { flex: 0 0 auto; margin-top: 2px; color: #4ade80; }
.ca-list { display: grid; gap: 8px; }
.ca-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); }
.ca-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ca-main b { font-size: 14px; } .ca-main b small { font-weight: 600; color: var(--muted, #9fb0d0); }
.ca-ref { font-family: ui-monospace, Menlo, monospace; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-chip { font-size: 11px; color: var(--muted, #9fb0d0); }
.ca-acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ca-acts .btn { min-width: 70px; }
.ca-del { color: #ff8a80; }
.ca-card { display: grid; gap: 10px; }
.ca-method { display: flex; gap: 10px; align-items: flex-start; }
.ca-method b { display: block; font-size: 14px; } .ca-method small { display: block; color: var(--muted, #9fb0d0); line-height: 1.45; margin-top: 2px; }
.ca-pay { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); object-fit: cover; }
.ca-tlist { display: grid; gap: 6px; }
.ca-trow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.ca-trow span:nth-child(2) { flex: 1; }
.ca-na { font-size: 11.5px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); padding: 2px 8px; border-radius: 999px; }
.ca-sheet-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.ca-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 4px 0 2px; }
.ca-link { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(124,58,237,.14); color: #fff; text-decoration: none; }
.ca-link > svg:first-child { color: #c4b5fd; flex: 0 0 auto; }
.ca-link span { flex: 1; min-width: 0; } .ca-link b { display: block; font-size: 14px; } .ca-link small { display: block; font-size: 12px; color: var(--muted, #9fb0d0); }
/* homepage V Football / eFootball tab: long list of upcoming matches in its own scroll box */
.mt-vhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin: 2px 2px 8px; }
.mt-vhead b { font-size: 14px; } .mt-vhead span { font-size: 12px; color: var(--muted, #9fb0d0); }
.mt-vscroll { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; border-radius: 12px; }
.mt-vscroll .v-round:first-child { margin-top: 0; }
.ca-hero { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; margin-bottom: 4px; background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(31,91,255,.25)); border: 1px solid rgba(255,255,255,.12); }
.ca-hero > svg { flex: 0 0 auto; width: 34px; height: 34px; color: #e9d5ff; }
.ca-hero b { display: block; font-size: 16px; } .ca-hero span { display: block; font-size: 12.5px; color: #dbe3f7; margin-top: 2px; line-height: 1.4; }
/* Nigeria time label under kick-off times */
.vs-time { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; text-align: center; }
.vs-time small, .mrow .mid small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted, #9fb0d0); }
/* Nigeria time inside the pitch, under the VIRTUAL FOOTBALL tag */
.vm-now { position: absolute; left: 8px; top: 30px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(3,12,35,.7); padding: 2px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.vm-now:empty { display: none; }
/* "Confirming Payment" white page with a turning circle */
.paywait { position: fixed; inset: 0; z-index: 1000; background: #fff; color: #0b1f44; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.pw-open { overflow: hidden; }
.pw-spin { width: 64px; height: 64px; border-radius: 50%; border: 6px solid #e6ebf5; border-top-color: #1f5bff; animation: pwSpin .9s linear infinite; }
@keyframes pwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-spin { animation-duration: 2.4s; } }
.pw-t { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.pw-s { font-size: 14px; color: #5b6b8c; max-width: 300px; line-height: 1.45; min-height: 1em; }
.pw-act .btn { min-width: 180px; }
.pw-link { font-size: 14px; font-weight: 700; color: #1f5bff; }
.paywait.done .pw-spin { animation: none; border-color: #16a34a; position: relative; }
.paywait.done .pw-spin::after { content: ""; position: absolute; left: 17px; top: 9px; width: 14px; height: 26px; border: solid #16a34a; border-width: 0 6px 6px 0; transform: rotate(45deg); }
.paywait.failed .pw-spin { animation: none; border-color: #e53935; }
/* "or" divider and Continue with Google button on login / register */
.or-line { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted, #9fb0d0); font-size: 12px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { background: #fff !important; color: #1f1f1f !important; border: 1px solid #dadce0 !important; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; }

/* Phone notifications card (Notifications page and homepage prompt) */
.push-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.push-card .pc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.push-card .pc-ic svg { width: 20px; height: 20px; }
.push-card .pc-txt { display: grid; gap: 2px; min-width: 0; }
.push-card .pc-txt b { font-size: 14px; color: #fff; }
.push-card .pc-txt span { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.push-card .pc-btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.push-card .btn.ghost { color: var(--text-dim); }
.push-card.on .pc-ic { background: var(--green); color: #fff; }
.push-card.blocked .pc-ic, .push-card.unsupported .pc-ic { background: var(--card-2); color: var(--text-dim); }
@media (max-width: 379px) { .push-card { grid-template-columns: 36px minmax(0, 1fr); } .push-card > .btn, .push-card .pc-btns { grid-column: 1 / -1; flex-direction: row; } .push-card .pc-btns .btn { flex: 1; } }

/* Real match page (#fx-<id>) and clickable match cards */
a.match { display: block; text-decoration: none; color: var(--ink); }
a.match:active { transform: scale(.995); }
.fx-head { background: var(--sheet); color: var(--ink); border-radius: var(--radius); padding: 10px 12px; }
.fx-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 6px 0 4px; }
.fx-score .tm { display: grid; justify-items: center; gap: 5px; text-align: center; min-width: 0; }
.fx-score .tm img, .fx-score .tm .ph { width: 46px; height: 46px; object-fit: contain; }
.fx-score .tm .ph { border-radius: 50%; background: var(--sheet-2); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px; }
.fx-score .tm b { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.fx-score .sc { display: grid; justify-items: center; gap: 2px; min-width: 84px; }
.fx-score .sc .n { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; }
.fx-score .sc .s { font-size: 12px; font-weight: 700; color: var(--muted); }
.fx-score .sc .s.live { color: #c2410c; }
.fx-meta { margin: 6px 0 0; text-align: center; }
.fx-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-ev li { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr); align-items: center; gap: 6px; background: var(--sheet); color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; }
.fx-ev li.a { grid-template-columns: minmax(0, 1fr) 36px 44px; }
.fx-ev li.a .m { order: 3; text-align: right; } .fx-ev li.a .i { order: 2; } .fx-ev li.a .t { order: 1; text-align: right; }
.fx-ev .m { font-family: var(--display); font-weight: 700; color: var(--muted); }
.fx-ev .i { text-align: center; font-size: 15px; white-space: nowrap; }
.fx-ev .t { min-width: 0; overflow-wrap: anywhere; }
.fx-lu { display: grid; gap: 8px; }
@media (min-width: 640px) { .fx-lu { grid-template-columns: 1fr 1fr; } }
.fx-lu h3 { font-family: var(--display); font-size: 17px; margin: 0; }
.fx-pl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.fx-pl b { display: inline-block; min-width: 22px; color: var(--muted); font-family: var(--display); }
.fx-pl.subs { font-size: 12.5px; color: #374151; }
.fx-st .r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--sheet-2); font-size: 13px; }
.fx-st .r:last-child { border-bottom: 0; }
.fx-st .r b { text-align: center; font-weight: 600; font-size: 12.5px; }
.fx-st .r span:last-of-type { text-align: right; }
.fx-st .bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 6px; }
.fx-st .bar i { display: block; border-radius: 3px; background: var(--blue); min-width: 2px; }
.fx-st .bar i + i { background: var(--orange); }