/* 9wicket exchange. Mobile first: sizes in rem on a viewport-scaled root (100vw / 375 x 16px, like the reference).
   Desktop (html.is-desktop, >= 1024px wide): fixed px, Tahoma 12px, three panes (menu | content | bet slip). */

:root {
  --font: Tahoma, Helvetica, sans-serif; /* the reference's font on phone and desktop */
  --font-desk: Tahoma, Helvetica, sans-serif;
  --text: #1e1e1e;
  --page: #eee;
  --link: #2789ce;
  --muted: #787878;
  --line: #e0e6e6;
  --slate: #7e97a7;
  --back: #72bbef;
  --back-2: #b7d5eb;
  --back-3: #d7e8f4;
  --lay: #faa9ba;
  --lay-2: #efd3d9;
  --lay-3: #f6e6ea;
  --live: #6bbd11;
  --live-text: #508d0e;
  --idle-dot: #c5d0d8;
  --title-bg: linear-gradient(180deg, #2c485a, #243a48);
  --title-bg-2: linear-gradient(180deg, #2c485a, #263d4c);
  --theme: #ffa10c;
  --yellow: linear-gradient(180deg, #ffb80c 0%, #ffa10c 100%);
  --header-bg: linear-gradient(180deg, #ffca2c 0%, #ffba10 100%);
  --footer-bg: linear-gradient(180deg, #243a48 20%, #172732 91%);
  --footer-on: linear-gradient(180deg, #32617f 20%, #1f4258);
  --login-bg: linear-gradient(56deg, #3a5870 4%, #1d2c38 42%);
  --red-btn: linear-gradient(180deg, #f72424 0%, #bb1c00 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: min(calc(100vw / 23.4375), 20px); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text); font: 400 1rem/1.5 var(--font); }
button, input, select { font: inherit; color: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid #ffb80c; outline-offset: 1px; }
.i { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }
.i.flip { transform: rotate(180deg); }
.desk-only { display: none !important; }
.red { color: #d0021b; }
.green { color: var(--live-text); }

/* ---------- header (mobile: main header; desktop: header + nav) ---------- */
.header-wrap { position: sticky; top: env(safe-area-inset-top); z-index: 20; }
.header-container { display: flex; align-items: center; gap: 0.3125rem; height: 2.75rem; padding: 0 0.375rem; background: var(--header-bg); color: #1e1e1e; }
.header-logo { display: flex; align-items: center; height: 2.063rem; margin-right: auto; }
.header-logo img { height: 100%; }
.logo-text { font: italic 900 1.375rem/1 var(--font); letter-spacing: -0.02em; color: #1e1e1e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.header-login { display: flex; align-items: center; gap: 0.25rem; height: 1.875rem; padding: 0 0.625rem; border: 1px solid #710b0b; border-radius: 0.25rem; background: var(--red-btn); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.header-bets { display: flex; align-items: center; gap: 0.25rem; height: 2.125rem; padding: 0 0.5rem; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.25rem; background: #ffc421; font-size: 0.8125rem; font-weight: 700; }
.header-bets .i { font-size: 1.125rem; }
.header-balance { position: relative; flex: 1; display: flex; align-items: center; height: 2.125rem; margin-right: auto; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.25rem; background: #ffc421; overflow: hidden; }
.hb-lines { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 0 0.375rem; font-size: 0.6875rem; line-height: 1.2; color: rgba(30, 30, 30, 0.7); white-space: nowrap; }
.hb-lines b { color: #000; }
.hb-lines b.neg { color: #d0021b; }
.hb-plus { padding: 0.0625rem 0.3125rem; margin-right: 0.3125rem; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.1875rem; font-size: 0.6875rem; font-weight: 700; }
.hb-refresh { align-self: stretch; padding: 0 0.5rem; border-left: 1px solid rgba(0, 0, 0, 0.3); font-size: 1.125rem; }
.header-balance.loading .hb-refresh .i { animation: spin 0.6s linear infinite; }
.header-setting { width: 2.125rem; height: 2.125rem; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.25rem; background: #ffc421; font-size: 1.25rem; }
/* ---------- phone header like the reference: back bar, Bets / balance / refresh / setting, News marquee ---------- */
.header-back-bar { display: flex; align-items: center; height: 2rem; padding: 0 0.4375rem; background: #555; }
.header-back { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; color: #2b2b2b; font-size: 0.9375rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.is-mobile .header-container { height: 3.4375rem; gap: 0.3125rem; padding: 0 0.375rem; }
.is-mobile .header-bets { justify-content: center; gap: 0.375rem; width: 6.625rem; height: 2.125rem; padding: 0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.25); font-size: 0.9375rem; }
.is-mobile .header-bets .i { font-size: 1.375rem; }
.is-mobile .header-balance { justify-content: flex-end; gap: 0.3125rem; height: 2.125rem; margin-right: 0; border: 0; background: transparent; overflow: visible; }
.is-mobile .hb-lines { flex: none; align-items: flex-end; padding: 0 0.125rem 0 0; font-size: 0.75rem; line-height: 1.25; color: rgba(30, 30, 30, 0.7); }
.is-mobile .hb-lines b { color: #1e1e1e; }
.is-mobile .hb-plus { margin: 0; }
.is-mobile .hb-refresh { display: flex; align-items: center; justify-content: center; align-self: auto; width: 2.625rem; height: 2.125rem; padding: 0; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.25rem; background: #ffc421; box-shadow: inset 0 1px rgba(255, 255, 255, 0.25); font-size: 1.25rem; }
.is-mobile .header-setting { box-shadow: inset 0 1px rgba(255, 255, 255, 0.25); }
.marquee { display: flex; border-bottom: 1px solid #fff; background-image: linear-gradient(180deg, #2b3d47, #1c292e); overflow: hidden; }
.marquee-left { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 4.6875rem; padding: 0.25rem 0.375rem; background-image: linear-gradient(180deg, #2b3d47, #1c292e); color: #fff; }
.marquee-left::before, .marquee-left::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - 0.0625rem); width: 0.5625rem; height: 100%; }
.marquee-left::after { background-image: linear-gradient(180deg, #2b3d47, #1c292e); clip-path: polygon(0 0, 75% 50%, 0 100%); }
.marquee-left::before { background-color: #5e7381; clip-path: polygon(0 0, 25% 0, 100% 50%, 25% 100%, 0 100%, 75% 50%); }
.marquee-left .i { margin-right: 0.1875rem; font-size: 1.0625rem; }
.marquee-left-content { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.marquee-right { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.marquee-items { display: flex; flex-wrap: nowrap; width: max-content; transform: translateX(80vw); animation: nw-marquee var(--dur, 20s) linear infinite; }
.marquee-item { display: flex; align-items: center; margin-right: 5rem; padding: 0.3125rem 0; }
.marquee-item-date { margin-right: 0.125rem; padding: 0.125rem 0.25rem; border-radius: 0.1875rem; background: #6ac2ff; color: #27363e; font-size: 0.6875rem; font-style: italic; letter-spacing: -0.55px; line-height: 1.2; white-space: nowrap; }
.marquee-item-content { color: #6ac2ff; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
@keyframes nw-marquee { from { transform: translateX(80vw); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-items { animation-duration: calc(var(--dur, 20s) * 2); } }
.is-desktop .header-back-bar, .is-desktop .marquee-slot { display: none; }
/* TV button joined to the left of Bets (phone), like the reference: red while Live TV is open, blue while closed */
.is-mobile #header .tv-btn { width: 2.625rem; height: 2.125rem; margin: 0 -0.3125rem 0 0; padding: 0; border: 1px solid rgba(0, 0, 0, 0.3); border-right-color: rgba(0, 0, 0, 0.45); border-radius: 0.25rem 0 0 0.25rem; box-shadow: inset 0 1px rgba(255, 255, 255, 0.25); }
.is-mobile #header .tv-btn.open-tv { background: #1e5f89; }
.is-mobile #header .tv-btn.close-tv { background: #ce441d; }
.is-mobile #header .tv-btn + .header-bets { width: 4rem; border-left: 0; border-radius: 0 0.25rem 0.25rem 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- layout ---------- */
#layout { min-height: calc(100vh - 2.75rem); }
.menu-container, .right-group { display: none; }
.default-layout { position: relative; min-height: calc(100vh - 2.75rem); padding-bottom: 4.125rem; background: var(--page); }
body[data-page="login"] .header-wrap, body[data-page="login"] .footer-wrap { display: none; }
/* Phone, not logged in: no header, like the reference (login through Account in the footer) */
.is-mobile body.is-guest .header-wrap { display: none; }
.is-mobile body.is-guest #layout, .is-mobile body.is-guest .default-layout { min-height: 100vh; }
body[data-page="login"] .default-layout { padding: 0; }

/* ---------- highlight filter bar ---------- */
.filter-wrapper { position: relative; display: flex; align-items: center; border-bottom: 0.1875rem solid var(--theme); background: #000; }
.filter-wrapper::after { content: ""; position: absolute; top: 0; right: 3rem; width: 2.3125rem; height: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 7.81%, rgba(0, 0, 0, 0.45) 43.23%, transparent 76.56%); pointer-events: none; }
.filter-container { display: flex; flex: 1; padding: 0 2.3125rem 0 0.3125rem; overflow-x: auto; scrollbar-width: none; color: #fff; }
.filter-container::-webkit-scrollbar { display: none; }
.filter-item { position: relative; display: flex; align-items: center; flex: none; margin: 0.625rem 0.25rem 0 0; padding: 0.4375rem 0.5rem; border-radius: 0.375rem 0.375rem 0 0; color: #fff; }
.filter-item .i { font-size: 1.4375rem; margin-right: 0.1875rem; }
.filter-item.selected { background: var(--yellow); color: #1e1e1e; }
.filter-item-content { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.filter-item-live-tag-wrap { position: absolute; top: -0.5rem; right: 0.1875rem; display: flex; align-items: center; border-radius: 0.1875rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.tag-live { position: relative; margin-left: 1.125rem; padding: 0 0.1875rem; border-radius: 0 0.1875rem 0.1875rem 0; background: linear-gradient(180deg, #f82d2d, #ea0a0a); color: #fff; font-size: 0.625rem; font-weight: 700; line-height: 1.2; }
.tag-live::before { content: ""; position: absolute; top: 0; right: 100%; width: 1.125rem; height: 100%; border-radius: 0.1875rem 0 0 0.1875rem; background: #fff; }
.tag-live .i { position: absolute; top: 0; right: calc(100% + 0.125rem); height: 100%; font-size: 0.8125rem; color: red; }
.animate-fade { animation: fade 1s ease-in-out infinite alternate; }
@keyframes fade { from { opacity: 1; } to { opacity: 0.3; } }
.filter-search, .in-play-search, .search-icon { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 0.8125rem; border-left: 1px solid #757575; background: linear-gradient(180deg, #4d4d4d, #303030); box-shadow: inset -9px 0 10px rgba(0, 0, 0, 0.2); color: #fff; font-size: 1.3125rem; }

.hl-title, .ip-title { display: flex; align-items: center; justify-content: center; height: 1.875rem; background: var(--title-bg); color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.ip-title { background: var(--title-bg-2); }
.hl-tabs { display: flex; align-items: center; justify-content: center; width: 18.75rem; margin: 0.3125rem auto; padding: 0.0625rem; border-radius: 0.3125rem; background: #e3e3e3; }
.hl-tab { flex: 1; margin: 0.0625rem; padding: 0.5rem 0; font-size: 0.75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hl-tab:first-child { margin-right: 0.125rem; }
.hl-tab.selected { border-radius: 0.25rem; background: #fff; color: var(--link); }
.hl-block, .ip-wrap { border-bottom: 0.1875rem solid var(--theme); margin-bottom: 1.25rem; }
.comp-title { padding: 0.375rem 0.625rem; background: #dde6ec; color: #243a48; font-size: 0.8125rem; font-weight: 700; }

/* ---------- mobile event row ---------- */
.ev-row { position: relative; display: flex; align-items: center; background: #fff; }
.ev-row + .ev-row, .comp-title + .ev-row { margin-top: 0.0625rem; } /* reference: 1px gap between rows, no border */
.ev-item { display: block; flex: 1; min-width: 0; padding: 0.375rem 0 0.375rem 0.375rem; }
.ev-type { position: relative; padding: 0 0.375rem 0 1.0625rem; }
.ev-type::before { content: ""; position: absolute; left: 0; bottom: 9%; width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: var(--idle-dot); box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.25); }
.ev-type.isPlay::before { background: var(--live); }
.ev-icons { display: flex; align-items: center; gap: 0.1875rem; min-height: 0.9375rem; margin-bottom: 0.3125rem; line-height: 1.2; }
.ev-time { color: var(--muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.ev-name { margin-left: 0.0625rem; color: var(--link); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 1.5625rem; height: 1.5625rem; margin: 0 0.375rem; border: 1px solid var(--slate); border-radius: 50%; color: var(--slate); font-size: 1.125rem; flex: none; }
.pin-btn.is-pinned { border-color: #6bbd11; background: #6bbd11; color: #fff; }

/* feature badges (own artwork, same sizes/colours as the reference) */
.bdg { display: inline-block; flex: none; height: 0.9375rem; background: center / contain no-repeat; }
.bdg-sb { width: 0.9375rem; background-image: url("../assets/icons/p-icon.svg"); }
.bdg-fancy { width: 0.9375rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%230A92A5' rx='4'/%3E%3Cpath fill='%23C5F6EE' d='m6.26 12.5.907-4.377h2.849l.255-1.246H7.422l.652-3.116h3.67L12 2.5H6.6q-.68 0-1.19.428-.51.427-.667 1.137L3 12.5z'/%3E%3C/svg%3E"); }
.bdg-fancy.in-play { width: 1.875rem; background-image: url("../assets/icons/f-icon.svg"); }
.bdg-book { width: 0.9375rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%23226BC3' rx='4'/%3E%3Cpath fill='%23CAFCFF' d='M9.29 12q.657 0 1.15-.385.492-.384.643-1.023l.493-2.244a.65.65 0 0 0-.061-.496.86.86 0 0 0-.35-.352q.275-.104.5-.339.226-.234.294-.496l.493-2.256q.15-.639-.17-1.024Q11.958 3 11.288 3h-6.79L2.5 12zM8.742 6.94H6.771l.63-2.804h1.971zm-.876 3.94H5.895l.63-2.818h1.971z'/%3E%3C/svg%3E"); }
.bdg-book.in-play { width: 1.875rem; background-image: url("../assets/icons/b-icon.svg"); }
.bdg-tv { width: 0.9375rem; background-image: url("../assets/icons/play-icon.svg"); }
.bdg-low { width: 1.5625rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' fill='none'%3E%3Crect width='25' height='15' x='.501' fill='%23D0021B' rx='3'/%3E%3Cpath fill='%23fff' d='M8.106 11H3.253V3.73h1.826v5.883h3.027zm6.036-2.74q0 1.353-.743 2.135-.737.776-2.09.776-1.342 0-2.09-.776-.741-.782-.741-2.134 0-1.368.742-2.139.746-.777 2.09-.776 1.347 0 2.09.78.741.778.742 2.135m-1.753.01a3.3 3.3 0 0 0-.083-.81 1.5 1.5 0 0 0-.22-.522.8.8 0 0 0-.342-.284 1.1 1.1 0 0 0-.434-.083q-.23 0-.415.074a.8.8 0 0 0-.342.268 1.5 1.5 0 0 0-.235.523 3.3 3.3 0 0 0-.088.835q0 .503.083.815.083.308.215.493.136.19.342.278.205.088.454.088.205 0 .415-.088a.77.77 0 0 0 .342-.263q.152-.21.23-.503.078-.298.078-.82m10.83-2.753L21.617 11h-1.816l-.962-3.545L17.872 11h-1.816l-1.587-5.483h1.797l.84 3.628 1.04-3.628h1.508l.982 3.628.825-3.628z'/%3E%3C/svg%3E"); }
.bdg-h2h { width: 2.5rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='15' fill='none'%3E%3Crect width='39.909' height='15' fill='url(%23a)' rx='3'/%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='%23FFCE3B' fill-rule='evenodd' d='M11.042 3c.364.007.73-.002 1.095.006.075 0 .149.03.207.084.848.901 1.692 1.809 2.537 2.715.012.012.019.03.028.046l-1.477 1.846-1.078-1.412-.06.05v5.896H6.68V6.258L5.51 7.646 4.507 6.469 4 5.874l.196-.213q1.193-1.282 2.39-2.558a.3.3 0 0 1 .202-.096c.376-.009.752 0 1.128-.006.095-.002.14.044.184.145.426.955 1.252 1.31 2.036.878.329-.182.574-.477.723-.877.039-.106.085-.148.183-.147m-.329 2.77H8.196v.87h1.48l-.51.948a5 5 0 0 0-.223.47c-.117.29-.196.597-.233.912a4 4 0 0 0-.027.492h.951c.004-.392.078-.779.217-1.14q.107-.29.27-.638l.592-1.24z' clip-rule='evenodd'/%3E%3C/g%3E%3Cpath fill='%23FFCE3B' d='M22.11 11h-1.644V8.1H18.23V11h-1.644V4.457h1.644v2.395h2.236V4.457h1.644zm6.152 0h-4.807V9.932q.61-.483 1.094-.914.487-.431.857-.817.479-.505.694-.888.215-.382.215-.787 0-.456-.272-.698-.273-.246-.76-.246-.251 0-.475.061a4 4 0 0 0-.448.158q-.224.101-.383.207l-.237.158h-.127V4.738q.276-.132.866-.268.588-.14 1.133-.14 1.165 0 1.763.518.601.518.602 1.459 0 .58-.273 1.138-.272.554-.905 1.19-.396.391-.77.7-.372.303-.54.43h2.773zm6.46 0H33.08V8.1h-2.237V11h-1.644V4.457h1.644v2.395h2.237V4.457h1.643z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='19.954' x2='19.954' y1='0' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23545454'/%3E%3Cstop offset='1' stop-color='%23161616'/%3E%3C/linearGradient%3E%3CclipPath id='b'%3E%3Cpath fill='%23fff' d='M4 1.5h10.909v12H4z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); }
/* E + sport tag for virtual games (reference electronic-book) */
.e-tag { display: inline-flex; align-items: center; flex: none; height: 0.9375rem; overflow: hidden; border: 1px solid #1f5172; border-radius: 0.1875rem; background: #fff; color: #1f5172; font-size: 0.5625rem; font-weight: 700; line-height: 1.2; padding-right: 0.125rem; }
.e-tag b { display: flex; align-items: center; justify-content: center; align-self: stretch; width: 1.25rem; margin-right: 0.125rem; padding-right: 0.1875rem; background: #1f5172; clip-path: polygon(0 0, 100% 0, 79% 100%, 0 100%); color: #fff; font-family: Georgia, serif; font-size: 0.5rem; font-style: italic; font-weight: 900; }

/* ---------- In-Play (mobile) ---------- */
.ip-top { display: flex; background: #172832; }
.ip-search-container { flex: 1; padding: 0.375rem 0.5rem; }
.tabs-container { display: flex; border: 1px solid #fff; border-radius: 0.3125rem; overflow: hidden; }
.tabs-container li { flex: 1; }
.tab { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.0625rem; border-right: 1px solid #fff; color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.tabs-container li:last-child .tab { border-right: 0; }
.tab.selected { background: #fff; color: #1e1e1e; }
.in-play-search { background: #2b4557; border-left-color: #909090; box-shadow: inset 0 -15px 15px rgba(0, 0, 0, 0.4); padding: 0.625rem; font-size: 1.625rem; }
.in-play-search .i { margin: 0 0.0625rem; }


/* Virtual Cricket advert (728 x 90, full width, 20px below; reference Advertise) */
.vc-ad { margin-bottom: 1.25rem; }
.vc-banner { display: block; background: #1d1f4f; }
.vc-banner img { display: block; width: 100%; height: auto; aspect-ratio: 728 / 90; }

/* ---------- Sports (leagues) ---------- */
.link-title { padding: 0.4375rem 0; background: var(--title-bg-2); color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; text-align: center; }
.link-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.0625rem; background: #4b4b4b; }
.lg-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 4.875rem; padding: 0.625rem 0.3125rem; background: #1e1e1e; color: #fff; font-size: 0.75rem; line-height: 1.05; text-align: center; }
.lg-item .i { font-size: 1.875rem; }
.search { display: flex; min-height: 3.625rem; }
.search-title { display: flex; flex: 1; align-items: center; justify-content: center; background: var(--title-bg-2); color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.search-icon { background: linear-gradient(180deg, #2d4a5c, #172832); }
.back-btn { display: flex; align-items: center; padding: 0 0.875rem; background: linear-gradient(180deg, #2d4a5c, #172832); color: #fff; font-size: 1rem; border-right: 1px solid #757575; }
.link-list { border-bottom: 1px solid var(--slate); }
.link-item { display: flex; align-items: center; min-height: 2.5625rem; padding: 0 0.4375rem; background: #fff; border-bottom: 1px solid var(--line); }
.link-item__label { flex: 1; min-width: 0; overflow: hidden; color: var(--link); font-size: 0.875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.link-item__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; margin: 0.5rem 0 0.5rem 0.375rem; border: 1px solid #dcdcdc; border-radius: 0.1875rem; color: #1e1e1e; font-size: 1rem; }
.breadcrumb { display: flex; align-items: center; height: 2.5rem; background: #1e1e1e; }
.breadcrumb-back { display: flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 0.8125rem; }
.breadcrumb-label { display: flex; align-items: center; min-width: 0; padding: 0 0.5rem; overflow: hidden; white-space: nowrap; }
.breadcrumb-label a, .breadcrumb-label span { display: flex; align-items: center; flex: none; color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.breadcrumb-label span { flex: 0 1 auto; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-label .i { margin: 0 0.1875rem; color: #8f8f8f; font-size: 0.75rem; }
.lg-category { padding: 0.5rem 0.4375rem; background: #eff3f5; border-bottom: 1px solid #cad5d9; color: #1e1e1e; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }

/* ---------- Multi Markets ---------- */
.no-markets { display: flex; justify-content: center; padding: 0 1rem; }
.no-markets-wrapper { width: 100%; max-width: 21.4375rem; margin: 1.25rem 0; padding: 0.625rem; border: 1px solid var(--slate); border-radius: 0.5rem; background: #fff; color: var(--slate); font-weight: 700; }
.no-markets-section { display: flex; align-items: center; gap: 1rem; font-size: 1.25rem; line-height: 1.2; }
.no-markets-section .i { font-size: 1.5rem; flex: none; }
.no-markets-wrapper hr { margin: 0.625rem 0; border: 0; height: 1px; background: #cad5d9; }
.no-markets-wrapper p { font-size: 0.75rem; text-align: center; }
.mm-block { margin-bottom: 0.625rem; background: #fff; }
.mm-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 2.1875rem; padding: 0 0.375rem; background: var(--title-bg-2); color: #fff; }
.mm-name { flex: 1; font-size: 0.8125rem; font-weight: 700; }
.mm-status { font-size: 0.75rem; color: #cfe; }
.pin-btn.on-dark { margin: 0; border: 0; background: #223039; color: #c5d0d7; }
.pin-btn.on-dark.is-pinned { background: #6bbd11; color: #fff; }
.mm-head { display: grid; grid-template-columns: 1fr 4.875rem 4.875rem; padding: 0.25rem 0 0.25rem 0.625rem; border-bottom: 1px solid var(--slate); font-size: 0.8125rem; }
.mm-head b { text-align: center; }
.mm-runner { position: relative; display: grid; grid-template-columns: 1fr 4.875rem 4.875rem; gap: 1px; align-items: stretch; border-bottom: 1px solid var(--slate); }
.mm-runner-name { align-self: center; padding: 0 0.625rem; font-size: 0.875rem; font-weight: 700; }
.mm-runner .mask-t { left: auto; right: 0; width: 9.8125rem; }
.mm-wait, .mm-empty, .list-empty { padding: 1rem; color: var(--muted); font-size: 0.8125rem; text-align: center; }

/* ---------- odds buttons ---------- */
.xb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.125rem; padding: 0.375rem 0; background: var(--back); color: #1e1e1e; line-height: 1.2; }
.xb b { font-size: 0.9375rem; font-weight: 700; }
.xb small { font-size: 0.6875rem; }
.xb.lay-1 { background: var(--lay); }
.xb.back-2 { background: var(--back-2); } .xb.back-3 { background: var(--back-3); }
.xb.lay-2 { background: var(--lay-2); } .xb.lay-3 { background: var(--lay-3); }
.xb.picked, .best-odds.picked, .no.picked, .yes.picked, .pm-opt.picked { box-shadow: inset 0 0 0 2px #1e1e1e; }
.xb:disabled { cursor: default; }
.mask-t { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.8125rem; font-weight: 700; text-shadow: 0 0 5px #000; pointer-events: none; }
.pos { display: block; font-size: 0.75rem; font-weight: 700; }
.pos.posi { color: var(--live-text); }
.pos.neg { color: #d0021b; }

/* ---------- full market (mobile) ---------- */
.fm-status { display: flex; align-items: center; height: 2.1875rem; background: var(--title-bg-2); color: #fff; font-size: 0.8125rem; }
.fm-pin { display: flex; align-items: center; justify-content: center; flex: none; width: 1.625rem; height: 1.625rem; margin: 0 0.375rem; border-radius: 50%; background: #223039; color: #c5d0d7; font-size: 1.125rem; }
.fm-pin.is-pinned { background: #6bbd11; color: #fff; }
.fm-pin.ring { background: none; border: 1px solid var(--slate); color: var(--slate); }
.fm-divider { align-self: stretch; border-right: 1px solid #5b7382; }
.fm-status-in { display: flex; flex: 1; align-items: center; padding: 0 0.625rem; }
.fm-status-in b { flex: 1; font-size: 0.8125rem; }
.fm-inplay { display: flex; align-items: center; gap: 0.25rem; color: #fff; font-size: 0.8125rem; }
.fm-inplay .i { padding: 0.125rem; border-radius: 0.1875rem; background: #6bbd11; font-size: 0.875rem; }
.fm-time { color: #ddd; font-size: 0.75rem; }
.sb { padding: 0.625rem 0.625rem 0.5rem; background: #f1f1f1; }
.sb-team { display: grid; grid-template-columns: 2.125rem 1fr auto; align-items: center; gap: 0.5rem; min-height: 2.5rem; font-size: 0.875rem; }
.sb-team b { font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-shirt { width: 2rem; height: 2rem; }
.sb-score { font-weight: 700; font-size: 0.9375rem; }
.sb-bat { display: inline-block; width: 0.625rem; height: 0.625rem; margin-left: 0.25rem; border-radius: 50%; background: #ed6d1f; }
.sb-team { grid-template-columns: 2.125rem auto auto 1fr; }
.sb-team .sb-score { justify-self: end; }
.sb-status { margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; }
.sb-note { margin-top: 0.25rem; font-size: 0.8125rem; color: #333; }
.sb-attr { margin-top: 0.25rem; font-size: 0.6875rem; color: #555; }
.sb-attr a { color: inherit; text-decoration: underline; }
.fm-tabs { display: flex; gap: 0.375rem; padding: 0.375rem; overflow-x: auto; background: #e0e6e6; }
.fm-tab { display: flex; align-items: center; justify-content: center; flex: none; height: 2.375rem; padding: 0 1.25rem; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 1.25rem; background: #243a48; color: #fff; font-size: 0.8125rem; font-weight: 700; }
.fm-tab.selected { background: var(--yellow); color: #1e1e1e; }
.mi-wrap { display: flex; min-height: 2.25rem; border-bottom: 1px solid var(--slate); background: #fff; }
.mi-limit { display: flex; align-items: center; justify-content: center; padding: 0.3125rem 0.25rem 0.3125rem 0.375rem; background: #e0e6e6; color: var(--slate); font-size: 1.625rem; }
.mi-tri { border-bottom: 2.3125rem solid transparent; border-left: 0.5rem solid #e0e6e6; }
.mi-depth { display: flex; flex: 1; align-items: center; gap: 0.25rem; padding: 0.3125rem 0.1875rem; color: var(--slate); font-size: 1.625rem; }
.mi-matched { display: flex; flex-direction: column; color: #1e1e1e; font-size: 0.6875rem; line-height: 1.2; }
.mi-matched b { font-size: 0.75rem; }
.mi-bl { display: grid; grid-template-columns: 1fr 1fr; align-items: end; width: 9.75rem; padding-bottom: 0.25rem; font-size: 0.8125rem; text-align: center; }
.mk-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--slate); background: #fff; }
.mk-name { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 0.1875rem 0.3125rem; font-size: 0.9375rem; line-height: 1.3; word-break: break-all; }
.mk-cells { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 9.75rem; }
.bm { margin-top: 0.625rem; }
.bm-head { display: flex; align-items: center; min-height: 2.1875rem; padding: 0.3rem 0 0.3rem 0.16rem; background: #3b5160; color: #bbb; }
.bm-name { color: #fff; font-size: 0.8125rem; font-weight: 700; }
.bm-sep { margin: 0 0.375rem; font-size: 1rem; }
.bm-line { font-size: 0.8125rem; }
.bm-election { display: flex; align-items: center; justify-content: space-between; min-height: 1.9375rem; padding: 0 0.625rem; background: #e4f1f9; font-size: 0.8125rem; }
.bm-selhead { display: flex; justify-content: flex-end; min-height: 1.6875rem; background: #f8f6e1; border-bottom: 1px solid var(--slate); font-size: 0.8125rem; }
.bm-selhead b { display: flex; align-items: center; justify-content: center; width: 4.875rem; }
.bm-selhead .l { flex: 1; }
.bm-selhead .r { display: flex; }
.bm-row { display: flex; justify-content: space-between; min-height: 3.1875rem; background: #f8f6e1; border-bottom: 1px solid var(--slate); }
.bm-runner { display: flex; flex-direction: column; justify-content: center; padding: 0 0.625rem; font-size: 0.9375rem; font-weight: 700; }
.bm-cells { position: relative; display: flex; }
.bm-back, .bm-lay { display: flex; align-items: center; width: 4.875rem; padding: 0.26rem 0.325rem; background: #b2d4e8; }
.bm-lay { background: #f3dce2; }
.best-odds { display: flex; flex: 1; align-items: center; justify-content: center; align-self: stretch; border: 1px solid #fff; border-radius: 0.1875rem; background: var(--back); font-size: 0.8125rem; font-weight: 700; }
.best-odds.lay { background: var(--lay); }
.best-odds:disabled { opacity: 0.9; }
.fb { margin-top: 0.625rem; }
.fb-tabs { display: flex; align-items: flex-end; background: #243a48; }
.fb-tabs .fm-pin { margin: 0.25rem 0.375rem; }
.fb-tab { display: flex; align-items: center; gap: 0.3rem; height: 1.9375rem; padding: 0 1rem; border-radius: 0.5rem 0.5rem 0 0; color: #fff; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.fb-tab.fancy { background: linear-gradient(0deg, #097c8c, #0b90a3); }
.fb-tab.fancy .i:first-child { padding: 0.125rem; border-radius: 0.1875rem; background: #6bbd11; }
.fb-tab.premium { background: #1e2d38; }
.fb-tab.selected.premium { background: linear-gradient(0deg, #097c8c, #0b90a3); }
.fb-tab:not(.selected) { opacity: 0.85; }
.fb-info { opacity: 0.9; }
.fb-filter { padding: 0.26rem; background: #097e8e; overflow-x: auto; }
.fb-filter-panel { display: flex; }
.filter-tab { padding: 0.39rem 0.65rem; border-right: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.filter-tab.is-selected { border-radius: 0.325rem; border-right: 0; background: #fff; color: #546774; }
.fb-head { display: grid; grid-template-columns: 1fr 4.875rem 4.875rem; min-height: 1.9375rem; align-items: center; background: #e4f1f9; font-size: 0.8125rem; text-align: center; }
.fb-row { display: grid; grid-template-columns: 1fr 9.75rem; min-height: 3.125rem; background: #fff; border-bottom: 1px solid var(--slate); }
.fb-name { display: flex; flex-direction: column; justify-content: center; padding: 0.25rem 0.625rem; font-size: 0.8125rem; font-weight: 700; }
.fb-remark { color: #d0021b; font-weight: 400; font-size: 0.6875rem; }
.fb-cells { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.no, .yes { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lay); line-height: 1.2; }
.yes { background: var(--back); }
.no b, .yes b { font-size: 0.8125rem; }
.no small, .yes small { font-size: 0.6875rem; }
.pm-list { background: #fff; }
.pm-market { position: relative; border-bottom: 1px solid var(--slate); }
.pm-title { padding: 0.375rem 0.625rem; background: #e4f1f9; font-size: 0.8125rem; font-weight: 700; }
.pm-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1px; background: #dfe7ec; }
.pm-opt { display: flex; justify-content: space-between; align-items: center; min-height: 2.5rem; padding: 0 0.625rem; background: var(--back-3); font-size: 0.8125rem; text-align: left; }
.pm-opt b { color: #1e1e1e; }

/* ---------- mobile inline bet slip ---------- */
.inline-slip { padding: 0.5rem 0.375rem 0.375rem; background: #beddf4; border-bottom: 1px solid var(--slate); }
.inline-slip.side-lay { background: #f3dce2; }
.is-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.is-field { display: flex; height: 2.25rem; border: 1px solid #aaa; border-radius: 0.25rem; background: #fff; overflow: hidden; }
.is-field input { flex: 1; min-width: 0; border: 0; text-align: center; font-size: 0.9375rem; font-weight: 700; }
.is-step { width: 2.25rem; background: linear-gradient(180deg, #fff, #eee); font-size: 1.25rem; font-weight: 700; color: #1f72ac; }
.is-step:disabled { color: #bbb; }
.is-min { margin: 0.25rem 0; color: #1e1e1e; font-size: 0.6875rem; text-align: right; }
.is-stakes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-bottom: 0.3125rem; background: #999; border: 1px solid #999; border-radius: 0.25rem; overflow: hidden; }
.is-stakes button { height: 2rem; background: linear-gradient(180deg, #fff, #f0f0f0); font-size: 0.8125rem; font-weight: 700; }
.is-keypad { display: grid; grid-template-columns: repeat(6, 1fr) 1.4fr; gap: 1px; background: #aaa; border: 1px solid #aaa; }
.is-keypad button { height: 2.25rem; background: #fff; font-size: 0.9375rem; font-weight: 700; }
.is-keypad .is-del { grid-row: span 2; background: #fff; }
.is-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin-top: 0.375rem; }
.is-cancel, .is-place { height: 2.625rem; border-radius: 0.25rem; font-size: 0.9375rem; font-weight: 700; }
.is-cancel { border: 1px solid #aaa; background: #fff; }
.is-place { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #222; background: linear-gradient(180deg, #474747, #070707); color: #ffb200; line-height: 1.1; }
.is-place:disabled { opacity: 0.5; }
.is-place small { font-size: 0.6875rem; color: #fff; font-weight: 400; }

/* ---------- bet result bar ---------- */
#bet-results { position: fixed; top: 3rem; left: 0; right: 0; z-index: 60; pointer-events: none; }
.bet-result { position: relative; display: flex; flex-direction: column; margin: 0 0.375rem 0.25rem; padding: 0.375rem 2rem 0.375rem 0.625rem; border-radius: 0.25rem; background: #6bbd11; color: #fff; font-size: 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); pointer-events: auto; }
.bet-result.fail { background: #d0021b; }
.bet-result em { padding: 0 0.25rem; border-radius: 0.125rem; font-style: normal; background: var(--back); color: #1e1e1e; }
.bet-result em.side-lay { background: var(--lay); }
.bet-result button { position: absolute; top: 0.25rem; right: 0.375rem; color: #fff; font-size: 1.125rem; }
body.placing::after { content: ""; position: fixed; inset: 0; z-index: 70; background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23ffa10c' stroke-width='5' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 3rem no-repeat; }

/* ---------- footer (mobile) ---------- */
.footer-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: flex-end; height: calc(3.125rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--footer-bg); }
.footer-item-mini-game { position: relative; flex: none; width: 3.9375rem; height: 3.125rem; margin: 0 0.5rem 0 0.1875rem; background: linear-gradient(180deg, #253b49, #182833); }
.footer-item-mini-game::before { content: ""; position: absolute; left: -0.46875rem; top: -1rem; width: 4.875rem; height: 4.875rem; border-radius: 50%; background: #253b49; }
.footer-item-mini-game::after { content: ""; position: absolute; left: 0; top: -0.625rem; width: 3.9375rem; height: 3.75rem; background: url(../assets/games-orb.svg) center / contain no-repeat; }
.footer-item { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 3.125rem; padding-bottom: 0.3125rem; color: #fff; }
.footer-item.selected { background: var(--footer-on); }
.footer-item .i { position: absolute; top: 0.34rem; font-size: 1.5rem; }
.footer-item span { max-width: 100%; padding: 0 0.3125rem; font-size: 0.6875rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- search ---------- */
.search-pop { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.4); }
.search-bar { display: flex; align-items: center; gap: 0.25rem; height: 3.75rem; padding: 0 0.375rem 0 0.25rem; background: #fff; color: #1e1e1e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.search-bar button { display: flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; color: #1e1e1e; }
.search-back .i, .search-clear .i { font-size: 1.25rem; }
.search-clear.off { visibility: hidden; }
.search-go .i { font-size: 1.375rem; }
.search-bar input { flex: 1; min-width: 0; height: 2.5rem; padding: 0 0.25rem; border: 0; outline: 0; background: transparent; color: #1e1e1e; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.search-bar input::placeholder { color: #9b9b9b; }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-results { max-height: calc(100vh - 3.75rem); overflow-y: auto; background: #fff; }
.search-results:empty { display: none; }
.search-hit { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.search-hit b { color: var(--link); font-size: 0.9375rem; }
.search-hit small, .search-hit-time { color: var(--muted); font-size: 0.75rem; }
.search-hit-time.live { color: var(--live-text); font-weight: 700; }
.search-none { padding: 1rem; color: var(--muted); text-align: center; font-size: 0.875rem; }
.is-desktop .search-pop { align-items: center; padding-top: 60px; }
.is-desktop .search-bar, .is-desktop .search-results { width: 520px; }

/* ---------- empty / loading ---------- */
.no-data { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem 1rem; color: var(--slate); font-size: 0.8125rem; font-weight: 700; }
.no-data .i { font-size: 1.5rem; }
.page-loading { display: flex; justify-content: center; gap: 0.375rem; padding: 2rem 0; }
.page-loading i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--slate); animation: fade 0.6s infinite alternate; }
.page-loading i:nth-child(2) { animation-delay: 0.2s; } .page-loading i:nth-child(3) { animation-delay: 0.4s; }

/* ---------- dialogs, toasts, buttons ---------- */
.btn-main { height: 2.25rem; padding: 0 1rem; border: 1px solid #bd8c16; border-radius: 0.25rem; background: linear-gradient(180deg, #ffb70c 0%, #ffa40c 100%); color: #1e1e1e; font-weight: 700; }
.btn-main:disabled { opacity: 0.5; }
.btn-sub { height: 2.25rem; padding: 0 1rem; border: 1px solid #bbb; border-radius: 0.25rem; background: linear-gradient(180deg, #fff, #eee); font-weight: 700; }
.dialog-mask { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.7); }
.dialog { width: 100%; max-width: 82.5rem; border-radius: 0.3125rem; background: #fff; overflow: hidden; }
.dialog-text { padding: 1.875rem 1rem; border-bottom: 1px solid #ddd; font-size: 1rem; text-align: center; }
.dialog-foot { display: flex; justify-content: center; gap: 0.625rem; padding: 0.75rem; }
.dialog-foot .btn-main { min-width: 11rem; height: 2.75rem; font-size: 1rem; }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.75rem; background: var(--header-bg); font-weight: 700; }
.pop-body { padding: 0.75rem; font-size: 0.8125rem; }
/* Live TV unavailable (js/event-page.js): the "Live" picture fills the 16:9 panel edge to edge. */
.rcbx .fm-tv:not([hidden]):has(.fm-tv-off:not([hidden])) { padding: 0; }
.rcbx .fm-tv .fm-tv-off:not([hidden]) { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Header Bets / Setting panels (js/rcb-panels.js, styled by css/rcb-sports.css): the page under them does not scroll. */
html.ob-open, html.ob-open body, html.settings-open, html.settings-open body { overflow: hidden; }
#toasts { position: fixed; left: 50%; bottom: 5rem; z-index: 90; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.375rem; }
.toast { padding: 0.5rem 0.875rem; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 0.8125rem; transition: opacity 0.4s; }
.toast-ok { background: #508d0e; } .toast-error { background: #d0021b; }
.toast.out { opacity: 0; }

/* ---------- login, as on 9wicket.com (js/account.js) ----------
   Phone (sizes measured on the reference, following the screen width; capped at a 480px column): the KV cricketer on
   top, the form on the dark slate page. */
.login-wrap { --v: min(1vw, 4.8px); min-height: 100vh; background: var(--login-bg); color: #1e1e1e; font-family: Helvetica, Arial, sans-serif; }
.lw-box { max-width: 480px; margin: 0 auto; padding-bottom: calc(8 * var(--v)); }
.lw-kv { position: relative; aspect-ratio: 750 / 560; background: url(../assets/banners/KV-pic-9wickets.png) center top / 100% auto no-repeat; }
.lw-logo { position: absolute; top: 60%; left: 50%; width: calc(59.4 * var(--v)); margin: 0; transform: translate(-50%, -50%); }
.lw-logo img { display: block; width: 100%; height: auto; }
.lw-close { position: absolute; top: calc(1.8 * var(--v)); right: calc(1.9 * var(--v)); width: calc(9.4 * var(--v)); height: calc(9.4 * var(--v)); border-radius: 50%; background: rgba(0, 0, 0, 0.8); }
.lw-close::before, .lw-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(4.4 * var(--v)); height: calc(0.55 * var(--v)); border-radius: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.lw-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lw-panel { padding: calc(12 * var(--v)) calc(8 * var(--v)) 0; }
.login-form { margin: 0; }
.login-form dt { display: none; }
.login-form dd { position: relative; margin: 0 0 calc(3.3 * var(--v)); }
.login-form input { width: 100%; height: calc(10.07 * var(--v)); padding: 0 calc(1.9 * var(--v)); border: 1px solid #fff; border-radius: calc(1.2 * var(--v)); background: #fff; color: #1e1e1e; font: calc(3.8 * var(--v)) Helvetica, Arial, sans-serif; }
.login-form input::placeholder { color: #8a8a8a; }
.login-form input:focus { outline: 0; border-color: #ffd97a; background: #fff0c9; }
.code-img { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: calc(0.8 * var(--v)) calc(5.4 * var(--v)) 0 0; border: 0; background: none; color: #000; font: 700 calc(6.13 * var(--v)) / 1 Arial, Helvetica, sans-serif; cursor: pointer; }
.code-img img { height: calc(5.3333 * var(--v)); }
.btn-login { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: calc(10.4 * var(--v)); border: 1px solid #e18f00; border-radius: calc(1.2 * var(--v)); background: linear-gradient(180deg, #ffb80c, #ff9c00); color: #000; font: 700 calc(4 * var(--v)) Helvetica, Arial, sans-serif; cursor: pointer; }
.btn-login:hover { background: linear-gradient(180deg, #ff9c00, #ffb80c); }
.btn-login:disabled { opacity: 0.7; cursor: default; }
.btn-login .i { display: none; width: 0.8em; height: 0.8em; }
.login-error { color: #ff6b6b; font-size: calc(3.4667 * var(--v)); text-align: center; }
.login-error:empty { display: none; }
.lw-policy { display: flex; flex-wrap: wrap; justify-content: center; margin: calc(4.9 * var(--v)) calc(-3 * var(--v)) 0; padding: 0; list-style: none; font-size: calc(3.47 * var(--v)); line-height: calc(4.5 * var(--v)); }
.lw-policy li + li::before { content: "|"; margin: 0 calc(1.4 * var(--v)) 0 calc(2 * var(--v)); color: rgba(255, 255, 255, 0.5); font-size: 0.75em; }
.lw-policy a { color: rgba(255, 255, 255, 0.6); text-decoration: underline; }
.lw-browsers { display: none; }
/* A merchant's player whose session ended: no form, back to the merchant. */
.lw-panel.merchant-ended { color: #fff; font-size: calc(4 * var(--v)); line-height: 1.6; text-align: center; }
.lw-panel.merchant-ended p { margin: 0 0 calc(2 * var(--v)); }
.lw-panel.merchant-ended a { color: #ffb80c; font-weight: 700; text-decoration: underline; }
/* Desktop: the 540 x 408 box (logo panel left, "Member login" right) on the dark blue page, the browsers note under it. */
.is-desktop body[data-page="login"] #layout { height: 100vh; }
.is-desktop .login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 60px;
  background: radial-gradient(circle at 28% 50%, rgba(96, 92, 94, 0.95) 0, rgba(70, 72, 82, 0.5) 12%, rgba(40, 50, 70, 0) 26%), radial-gradient(circle at 80% 52%, rgba(76, 80, 92, 0.6) 0, rgba(40, 50, 70, 0) 22%), linear-gradient(180deg, #24324c, #1e2a3c); }
.is-desktop .lw-box { display: flex; width: 540px; max-width: none; height: 408px; margin: 0; padding: 0; border-radius: 6px; background: linear-gradient(180deg, #d8d9de, #e8e8e8); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); overflow: hidden; }
.is-desktop .lw-kv { flex: 0 0 250px; aspect-ratio: auto; background: url(../assets/banners/bg-login_wrap.png) 0 0 / 250px 408px no-repeat; }
.is-desktop .lw-logo, .is-desktop .lw-close, .is-desktop .lw-policy { display: none; } /* bg-login_wrap.png carries the logo */
.is-desktop .lw-panel { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0 0 6px 25px; }
.is-desktop .login-form { width: 220px; }
.is-desktop .login-form dt { display: block; margin-bottom: 10px; color: #243a48; font-size: 21px; }
.is-desktop .login-form dd { margin-bottom: 8px; }
.is-desktop .login-form input { height: 32px; padding: 0 6px; border: 1px solid #aaa; border-radius: 3px; font-size: 14px; }
.is-desktop .login-form input::placeholder { color: #555; }
.is-desktop .login-form input:focus { border-color: #ffb80c; background: #fff; }
.is-desktop .code-img { padding: 2px 17px 0 0; font-size: 23px; }
.is-desktop .code-img img { height: 22px; }
.is-desktop .btn-login { height: 37px; margin-top: 16px; border-radius: 3px; font-size: 15px; }
.is-desktop .btn-login .i { display: inline-block; width: 11px; height: 11px; }
.is-desktop .login-error { font-size: 12px; text-align: left; color: #d0021b; }
.is-desktop .lw-browsers { display: block; width: 560px; margin: 46px 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font: 11px/15px Tahoma, Helvetica, sans-serif; text-align: center; }
.is-desktop .lw-panel.merchant-ended { color: #243a48; font-size: 14px; padding-right: 25px; }
.is-desktop .lw-panel.merchant-ended a { color: #243a48; }

/* ---------- account ---------- */
.acc-info { display: flex; align-items: center; justify-content: space-between; height: 2.625rem; background: #1e1e1e; color: #fff; font-size: 0.9375rem; font-weight: 700; }
.acc-name { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.625rem; }
.acc-name .i { font-size: 1.5rem; padding: 0.125rem; border-radius: 50%; background: #fff; color: #1e1e1e; }
.acc-tz { align-self: stretch; display: flex; align-items: center; padding: 0 0.75rem; border-left: 1px solid #555; }
.acc-list { background: #fff; }
.acc-item { display: flex; align-items: center; justify-content: space-between; height: 3.625rem; padding: 0 0.625rem; border-bottom: 1px solid #e0e0e0; color: var(--link); font-size: 1.0625rem; font-weight: 700; }
.acc-arrow { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border: 1px solid #ccc; border-radius: 0.25rem; color: #1e1e1e; font-size: 1rem; }
.acc-logout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.625rem; margin-top: 1.875rem; background: linear-gradient(180deg, #e93522, #be2414); color: #fff; font-size: 1.125rem; font-weight: 700; }
.acc-bar { display: flex; align-items: center; height: 2.5rem; background: var(--title-bg); color: #fff; }
.acc-back { display: flex; align-items: center; padding: 0 0.75rem; font-size: 1.125rem; }
.acc-bar h2 { font-size: 0.9375rem; }
.acc-page { padding: 0.625rem; }
.acc-h { margin-bottom: 0.625rem; font-size: 1rem; }
.acc-cards { display: grid; gap: 0.625rem; }
.acc-card { background: #fff; border-bottom: 1px solid var(--slate); }
.acc-card h3 { padding: 0.25rem 0.625rem; background: #7e97a7; color: #fff; font-size: 0.8125rem; }
.acc-card dl > div { display: grid; grid-template-columns: 40% 1fr; padding: 0.375rem 0.625rem; border-bottom: 1px solid #eee; font-size: 0.8125rem; }
.acc-card dd { margin: 0; }
.mb-tabs { display: flex; margin-bottom: 0.625rem; border: 1px solid #3b5160; border-radius: 0.25rem; overflow: hidden; }
.mb-tabs a { flex: 1; padding: 0.5rem 0.25rem; background: #fff; color: #3b5160; font-size: 0.75rem; font-weight: 700; text-align: center; border-right: 1px solid #3b5160; }
.mb-tabs a:last-child { border-right: 0; }
.mb-tabs a.selected { background: #3b5160; color: #fff; }
.acc-section { margin-bottom: 0.75rem; }
.acc-section h3 { margin-bottom: 0.25rem; font-size: 0.875rem; }
.acc-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--slate); }
.acc-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.acc-table th { padding: 0.375rem; background: #e4e4e4; border-bottom: 1px solid var(--slate); text-align: right; white-space: nowrap; }
.acc-table td { padding: 0.375rem; border-bottom: 1px solid #eee; text-align: right; vertical-align: top; }
.acc-table .al { text-align: left; }
.acc-table td small { display: block; color: var(--muted); }
.acc-table .empty { padding: 1rem; text-align: center; color: var(--muted); }
.acc-table .ua { max-width: 16rem; word-break: break-all; }
.bet-back td:first-child { border-left: 3px solid var(--back); }
.bet-lay td:first-child { border-left: 3px solid var(--lay); }
.side-tag { padding: 0 0.375rem; border-radius: 0.125rem; background: var(--back); font-weight: 700; }
.side-tag.lay { background: var(--lay); }
.acc-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.625rem; font-size: 0.8125rem; }
.acc-pager a { color: var(--link); } .acc-pager a.disable { color: #b4bfca; pointer-events: none; }
.acc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.625rem; padding: 0.625rem; background: #e0e6e6; font-size: 0.75rem; }
.acc-filter input, .acc-filter select { height: 1.875rem; padding: 0 0.375rem; border: 1px solid #aaa; border-radius: 0.1875rem; background: #fff; }
.acc-filter-btns { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.acc-filter-btns button { height: 1.875rem; font-size: 0.75rem; }
.acc-error { padding: 0.625rem; color: #d0021b; font-size: 0.8125rem; }
.acc-total { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 700; }
.bo-main, .bo-vendors { margin-bottom: 0.625rem; padding: 0.75rem; background: #fff; border-bottom: 1px solid var(--slate); }
.bo-main h3 { color: var(--slate); font-size: 0.8125rem; }
.bo-main p b { font-size: 1.75rem; }
.bo-exp { font-size: 0.8125rem; }
.bo-vendor { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #eee; font-size: 0.875rem; }
.bo-all { padding-top: 0.625rem; text-align: right; }

/* ---------- games sheet ---------- */
.games-sheet[hidden] { display: none; }
.games-mask { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s; }
.games-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; flex-direction: column; height: min(62vh, 36rem); background: #7a0a0a; transform: translateY(100%); transition: transform 0.3s ease; }
.games-sheet.open .games-mask { opacity: 1; }
.games-sheet.open .games-panel { transform: none; }
.games-head { display: flex; align-items: flex-end; justify-content: space-between; height: 2.25rem; background: transparent; margin-top: -2.25rem; }
.games-tab { display: flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 1rem; border-radius: 0.625rem 0.625rem 0 0; background: linear-gradient(180deg, #f35151, #d31919); color: #fff; font-size: 0.875rem; font-weight: 700; }
.games-title { flex: 1; padding: 0 0.75rem; color: #fff; font-size: 0.8125rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.games-close { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.25rem; border-radius: 0.625rem 0.625rem 0 0; background: linear-gradient(180deg, #f35151, #d31919); color: #fff; font-size: 1rem; }
.games-frame { flex: 1; width: 100%; border: 0; background: #fff; }

/* =================================================================================================================
   DESKTOP (>= 1024px)
   ================================================================================================================= */
html.is-desktop { font-size: 16px; }
.is-desktop body { font: 400 12px/1.2 var(--font-desk); }
.is-desktop .desk-only { display: flex !important; }
.is-desktop .footer-wrap { display: none; }
.is-desktop .header-container { height: 46px; padding: 0 1.0417%; gap: 6px; font-size: 12px; }
.is-desktop .header-logo { height: 34px; margin-right: auto; }
.is-desktop .logo-text { font-size: 26px; }
.is-desktop .header-balance { flex: none; width: 250px; margin-right: 0; }
.is-desktop .header-bets { height: 32px; font-size: 12px; }
.is-desktop .hb-lines { font-size: 11px; }
.is-desktop .header-setting { width: 32px; height: 32px; font-size: 18px; }
.is-desktop .header-user { align-items: center; padding: 0 8px; font-weight: 700; }
.is-desktop .header-logout { align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; background: #ffc421; font-weight: 700; }
.is-desktop .header-login { height: 32px; font-size: 13px; padding: 0 16px; }
.is-desktop .desk-nav { align-items: stretch; height: 30px; padding: 0 1.0417%; background: var(--yellow); border-top: 1px solid rgba(0, 0, 0, 0.1); }
.is-desktop .desk-nav a, .is-desktop .nav-games { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-right: 1px solid rgba(69, 94, 104, 0.3); color: #1e1e1e; font-size: 12px; font-weight: 700; }
.is-desktop .desk-nav a.active { background: #ffdc7a; box-shadow: inset 0 -3px 0 #243a48; }
.is-desktop .nav-live { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 3px; background: #d0021b; color: #fff; font-size: 10px; }
.is-desktop .nav-live .i { font-size: 10px; }
.is-desktop .nav-games { margin-left: auto; border: 0; background: linear-gradient(180deg, #7c6171, #58394b); color: #fff; }

.is-desktop #layout { display: flex; gap: 15px; width: 97.9167%; max-width: 97.9167%; height: calc(100vh - 77px); min-height: 0; margin: 0 auto; }
.is-desktop .menu-container { display: block; flex: 0 0 16.33%; background: #fff; overflow: auto; }
.is-desktop .default-layout { flex: 1; min-width: 0; min-height: 0; padding: 0; overflow: auto; }
.is-desktop .right-group { display: flex; flex-direction: column; flex: 0 0 25.96%; background: #fff; overflow: hidden; }
.is-desktop body[data-page="login"] #layout { width: 100%; max-width: none; }
.is-desktop body[data-page="login"] .menu-container, .is-desktop body[data-page="login"] .right-group { display: none; }
.is-desktop body[data-page="account"] .right-group { display: none; }
/* Account (as on rcb365.vip): its own My Account sidebar is part of the page (js/account.js), so no left menu either. */
.is-desktop body[data-page="account"] .menu-container { display: none; }
.is-desktop body[data-page="account"] #layout { width: 100%; max-width: none; gap: 0; } /* the full page width, like rcb365's account pages */

/* left menu */
.lg-label { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; height: 25px; padding: 0 10px; background: linear-gradient(180deg, #546d7d 0%, #3b5160 100%); border-bottom: 1px solid #ced5da; color: #fff; font-size: 12px; }
.lg-label.sub { position: static; background: #3b5160; }
.lg-link { display: flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 10px; background: #fff; border-bottom: 1px solid #ced5da; color: var(--link); font-size: 12px; }
.lg-link:hover { text-decoration: underline; }
.lg-link.active { background: #f2dca7; color: #1e1e1e; text-decoration: none; }
.lg-link .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle-dot); }
.lg-link .dot.live { background: var(--live); }

/* highlight (desktop) */
.hl-hero { display: block; width: 100%; height: 190px; object-fit: cover; }
.hl-container { margin-top: 15px; }
.hl-head { display: flex; align-items: center; justify-content: space-between; height: 25px; padding: 0 5px 0 10px; background: var(--yellow); }
.hl-head-title { font-size: 13px; font-weight: 700; }
.hl-view { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hl-view-by { width: 108px; height: 21px; padding: 0 6px; border: 1px solid #ae7900; border-radius: 3px; background: linear-gradient(180deg, #ffcc2e, #ffbd14); font-size: 12px; }
.event-type-tabs { display: flex; padding: 0 5px 0 10px; gap: 3px; background: linear-gradient(180deg, #ffb80c 15%, #ffa00c 100%); }
.event-type-tabs li { width: 130px; }
.event-type-li { position: relative; width: 100%; height: 21px; padding: 3px 5px; border: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 0; border-radius: 3px 3px 0 0; background: #243a48; color: #fff; font-size: 12px; font-weight: 700; }
.event-type-li.selected { background: #dddcd6; color: #1e1e1e; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); font-weight: 400; }
.paginate { display: flex; justify-content: center; gap: 16px; padding: 5px; background: #fff; border-bottom: 1px solid var(--slate); }
.pg { display: flex; align-items: center; gap: 4px; color: var(--link); font-size: 12px; }
.pg.disable { color: #b4bfca; cursor: default; }
.pg .i { font-size: 11px; }
.browser-wrap { padding: 16px 0; color: #a6a6a6; font-size: 11px; line-height: 1.36; text-align: center; }
.browser-wrap .i { font-size: 20px; margin: 0 2px 0 8px; vertical-align: middle; }

/* desktop list table */
.list-head, .list-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px repeat(3, 11.7%) 26px; align-items: center; }
.list-head { height: 27px; background: #ced5da; border-top: 2px solid rgba(0, 0, 0, 0.1); color: #243a48; font-size: 12px; text-align: center; }
.list-head .r { padding-right: 6px; text-align: right; }
.list-row { min-height: 40px; background: #fff; border-bottom: 1px solid var(--line); }
.list-row .ev-type { padding: 4px 6px 4px 23px; }
.list-row .ev-type::before { left: 10px; top: 7px; bottom: auto; width: 8px; height: 8px; box-shadow: none; }
.list-row .ev-name { display: block; margin: 0; color: var(--link); font-size: 12px; font-weight: 700; line-height: 1.2; }
.list-row .ev-name:hover { text-decoration: underline; }
.list-row .ev-icons { gap: 2px; margin: 2px 0 0; }
.list-row .ev-time { color: #777; font-size: 12px; font-weight: 400; }
.list-row .ev-time.inPlay { color: var(--live-text); font-weight: 700; }
.list-row .score { color: var(--live-text); }
.list-row .matched { padding-right: 6px; color: #777; text-align: right; }
.odds-cell { height: 100%; padding: 2px 7px 2px 0; border-left: 1px solid var(--line); }
.odds-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: 35px; }
.odds-pair .xb { min-height: 21px; padding: 0; cursor: pointer; }
.odds-pair .xb b { font-size: 12px; }
.odds-pair .mask-t { background: rgba(0, 0, 0, 0.4); }
.pin-cell { display: flex; justify-content: center; }
.pin-btn.sm { width: 16px; height: 16px; margin: 0; border-color: #c5d0d7; font-size: 11px; }
.list-table { background: #fff; }
.list-empty { font-size: 12px; }

/* in-play (desktop) */
.ip-sticky { position: sticky; top: 0; z-index: 5; padding: 10px 0; background: var(--page); }
.is-desktop .tabs-container { width: 406px; border: 1px solid #3b5160; border-radius: 3px; }
.is-desktop .tab { height: 27px; border-right: 1px solid #3b5160; background: #fff; color: #3b5160; font-size: 13px; }
.is-desktop .tab.selected { background: #3b5160; color: #fff; }
.ip-table-label { display: flex; align-items: center; justify-content: space-between; height: 25px; padding: 0 10px; background: #243a48; border-top: 1px solid var(--slate); color: #fff; font-size: 12px; font-weight: 400; }
.ip-table-label .collapse { display: flex; color: #fff; font-size: 12px; }
.ip-table-label.folded { margin-bottom: 15px; }
.ip-display > .no-data { background: #fff; }
.ip-display > .list-table { margin-bottom: 15px; }
.sport-page .list-table { margin-bottom: 15px; }
.mm-title { padding: 6px 0; font-size: 13px; }
.mm-empty { padding: 0; text-align: left; color: #1e1e1e; font-size: 12px; }
.is-desktop .mm-bar { min-height: 30px; }
.is-desktop .mm-runner, .is-desktop .mm-head { grid-template-columns: 1fr 90px 90px; }
.is-desktop .mm-runner .xb { min-height: 40px; }
.is-desktop .mm-runner .mask-t { width: 181px; }

/* full market (desktop) */
.is-desktop .sb { padding: 10px; background: #fff; }
.is-desktop .sb-team { min-height: 34px; font-size: 13px; }
.fmd-info { display: flex; align-items: center; height: 32px; margin-top: 10px; background: #fff; border-bottom: 1px solid var(--slate); font-size: 13px; }
.fm-pin.square { width: 30px; height: 30px; margin: 0; border-radius: 0; background: linear-gradient(180deg, #2f434f, #111b22); font-size: 17px; }
.fm-pin.square.is-pinned { background: #6bbd11; }
.fmd-market { position: relative; display: flex; align-items: center; height: 30px; padding: 0 22px 0 12px; background: #e0e6e6; font-weight: 700; clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); }
.fmd-inplay { display: flex; flex: 1; align-items: center; gap: 4px; padding-left: 12px; color: var(--live-text); }
.fmd-inplay .i { padding: 1px; border-radius: 2px; background: #6bbd11; color: #fff; }
.fmd-matched { padding-right: 10px; }
.fmd-market-wrap { padding: 15px 0; }
.fmd-selinfo { display: grid; grid-template-columns: 1fr repeat(6, 69px); align-items: center; height: 22px; border-bottom: 1px solid var(--slate); font-size: 12px; text-align: center; }
.fmd-count { padding-left: 6px; color: var(--slate); font-size: 11px; text-align: left; }
.fmd-pct { grid-column: 2 / 4; text-align: right; padding-right: 8px; }
.fmd-all { display: flex; align-items: flex-end; justify-content: center; height: 21px; padding-bottom: 2px; border-radius: 4px 4px 0 0; }
.fmd-all.back { background: var(--back); } .fmd-all.lay { background: var(--lay); }
.fmd-pct.r { grid-column: 6 / 8; text-align: right; padding-right: 2px; }
.fmd-runners { background: #fff; }
.fmd-runner { display: flex; align-items: stretch; min-height: 41px; border-bottom: 1px solid var(--slate); }
.fmd-team { display: flex; flex: 1; align-items: center; gap: 5px; padding: 3px 10px; font-size: 12px; }
.fmd-team .i { font-size: 15px; }
.fmd-team .pos { margin-left: auto; }
.fmd-ladder { position: relative; display: grid; grid-template-columns: repeat(6, 68px); gap: 1px; }
.fmd-ladder .xb { min-height: 40px; }
.fmd-ladder .xb b { font-size: 12px; }
.fmd-ladder .xb small { font-size: 11px; }
.bm-d { margin-top: 0; }
.bm-d .bm-head { min-height: 25px; padding: 0 10px 0 0; }
.bm-d .fm-pin { margin-right: 8px; }
.bm-d .bm-election { min-height: 27px; padding: 6px; border-bottom: 1px solid var(--slate); font-size: 13px; }
.bm-d .bm-selhead { min-height: 23px; font-size: 12px; }
.bm-d .bm-selhead .r b { width: 234px; }
.bm-d .bm-row { min-height: 47px; }
.bm-d .bm-runner { font-size: 12px; }
.bm-d .bm-back, .bm-d .bm-lay { width: 234px; gap: 2px; padding: 3px 2px; background: linear-gradient(90deg, rgba(130, 183, 221, 0.15), rgba(130, 183, 221, 0.8) 65%); }
.bm-d .bm-lay { background: linear-gradient(90deg, rgba(231, 170, 184, 0.8) 5%, rgba(231, 170, 184, 0.15) 60%); }
.normal-odds { display: flex; flex: 1; align-items: center; justify-content: center; color: #59708d; font-size: 11px; font-weight: 700; }
.bm-d .best-odds { flex: 1; border-radius: 4px; font-size: 11px; }
.fb-d { margin-top: 15px; }
.fb-d .fb-tabs { background: none; }
.fb-d .fb-tab { height: 25px; font-size: 12px; }
.fb-d .fm-pin.fb { display: none; }
.fb-d .fb-filter { padding: 1px 4px 2px; background: #0a92a5; }
.fb-d .fb-filter-panel { width: max-content; margin: 0 auto; padding: 2px; gap: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.fb-d .filter-tab { display: flex; align-items: center; justify-content: center; width: 70px; padding: 2px 5px; border: 0; color: #076875; font-size: 12px; }
.fb-d .filter-tab.is-selected { border-radius: 4px; background: #fff; color: #076875; }
.fb-subhead { display: flex; align-items: center; gap: 8px; height: 25px; background: #243a48; color: #fff; font-size: 13px; }
.fb-d .fb-head { grid-template-columns: 1fr 76px 76px 154px; height: 24px; min-height: 0; background: #fff; border-bottom: 1px solid #1e1e1e; font-size: 12px; }
.fb-d .fb-row { grid-template-columns: 1fr 154px 154px; min-height: 41px; }
.fb-d .fb-name { padding: 2px 4px 2px 10px; font-size: 12px; }
.fb-d .fb-cells { grid-template-columns: 76px 76px; }
.fb-minmax { display: flex; flex-direction: column; justify-content: center; padding-left: 10px; color: #1e1e1e; font-size: 12px; }
.fb-minmax small { color: var(--slate); font-size: 11px; }

/* desktop bet slip */
.bs-title { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 10px; background: linear-gradient(180deg, #2d4a5c, #203846); border-bottom: 1px solid #c5d0d7; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); color: #fff; font-size: 12px; }
.bs-collapse { color: #fff; font-size: 10px; }
.right-group.collapsed .bs-content { display: none; }
.bs-content { flex: 1; overflow: auto; }
.no-content-text { padding: 15px 5px 5px; font-size: 13px; text-align: center; }
.bs-sec-head { display: grid; grid-template-columns: 1fr 64px 64px 64px; padding: 4px 8px; background: #d4e8f8; font-size: 11px; font-weight: 700; }
.bs-lay .bs-sec-head { background: #f4dfe4; }
.bs-sec-head span:not(:first-child) { text-align: center; }
.bs-item { padding: 6px 8px; border-bottom: 1px solid #c5d0d7; background: #e6f1fa; }
.bs-lay .bs-item { background: #fbeef1; }
.bs-item-top { display: grid; grid-template-columns: 16px 1fr 64px 64px 64px; gap: 4px; align-items: center; }
.bs-remove { width: 16px; height: 16px; border-radius: 3px; background: #7e97a7; color: #fff; line-height: 1; }
.bs-name b { display: block; font-size: 12px; }
.bs-name small { color: var(--muted); font-size: 11px; }
.bs-odds, .bs-stake { width: 100%; height: 24px; padding: 0 4px; border: 1px solid #aaa; border-radius: 3px; text-align: center; font-size: 12px; font-weight: 700; }
.bs-pl { text-align: center; font-weight: 700; }
.bs-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 6px; }
.bs-quick button { height: 22px; border: 1px solid #aaa; border-radius: 3px; background: linear-gradient(180deg, #fff, #eee); font-size: 11px; font-weight: 700; }
.bs-total { display: flex; justify-content: space-between; padding: 8px; font-size: 12px; }
.bs-confirm { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; font-size: 12px; }
.bs-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 10px; }
.bs-foot button { height: 30px; font-size: 12px; }
.ob-title { display: flex; align-items: center; height: 26px; padding: 0 10px; margin-top: 10px; background: linear-gradient(180deg, #2d4a5c, #203846); color: #fff; }
.ob-item { display: grid; grid-template-columns: 1fr 50px 60px; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #ddd; border-left: 3px solid var(--back); font-size: 11px; }
.ob-item.side-lay { border-left-color: var(--lay); }
.ob-item b { display: block; font-size: 12px; }
.ob-item small { color: var(--muted); }
.ob-item span { text-align: right; font-weight: 700; }

/* desktop account + login */
.is-desktop .acc-page { padding: 10px 0; }
.is-desktop .acc-cards { grid-template-columns: 1fr 1fr; }
.is-desktop .acc-table { font-size: 12px; }
.is-desktop #bet-results { top: 80px; left: auto; right: 1.0417%; width: 25.4%; }
.is-desktop .games-panel { left: 50%; right: auto; width: 750px; max-width: 96vw; height: 470px; transform: translate(-50%, 100%); }
.is-desktop .games-sheet.open .games-panel { transform: translate(-50%, 0); }
.is-desktop .dialog { max-width: 1320px; }

/* Games sheet sizes: the lobby strip keeps its 750:470 shape, a game screen is taller. */
.games-panel.is-lobby { height: calc(100vw * 470 / 750); }
.games-panel:not(.is-lobby) { height: calc(100vw * 470 / 750); }
.games-title:not(:empty) { flex: none; margin: 0 auto 0.25rem 0.5rem; padding: 0.25rem 0.75rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.7); text-shadow: none; }
.is-desktop .games-panel.is-lobby, .is-desktop .games-panel:not(.is-lobby) { height: 470px; }
.acc-table td:first-child { white-space: nowrap; }

/* Games sheet, reference style: red folder tabs on a thin red line, dark see-through maroon panel, page not dimmed. */
.games-mask { background: transparent; }
.games-panel { background: rgba(58, 4, 4, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 2px solid #e04a4a; box-shadow: 0 -1px 0 rgba(255, 140, 140, 0.35); }
.games-head { height: 1.75rem; margin-top: calc(-1.75rem - 2px); padding: 0 0 0 0.5rem; align-items: flex-end; }
.games-tab, .games-close { position: relative; height: 1.75rem; border-radius: 0; background: center / 100% 100% no-repeat; font-family: Oxanium, Arial, sans-serif; }
.games-tab { min-width: 5.5rem; padding: 0.125rem 1.5rem 0; color: #fff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f35151'/%3E%3Cstop offset='1' stop-color='%23d31919'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30C7 30 8 1 19 1H79C90 1 92 30 100 30Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
.games-close { width: 3rem; padding-left: 0.5rem; color: #fff; font-size: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f35151'/%3E%3Cstop offset='1' stop-color='%23d31919'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30C7 30 8 1 19 1H50V30Z' fill='url(%23g)'/%3E%3C/svg%3E"); }
.games-close .i { stroke: #fff; stroke-width: 40; }
.games-frame { background: transparent; }

/* Games sheet tabs, measured from the reference game panel (phone 360px wide): tab 70 x 22, label 13px medium,
   close tab 37 x 22 with a thin 12px cross. Sizes follow the screen width like the reference; fixed on desktop. */
.games-head { --gt: min(calc(100vw / 360), 1.4px); height: calc(22 * var(--gt)); margin-top: calc(-22 * var(--gt) - 2px); padding-left: calc(10 * var(--gt)); }
.games-tab { height: calc(22 * var(--gt)); min-width: calc(70 * var(--gt)); padding: calc(2 * var(--gt)) calc(14 * var(--gt)) 0; font-size: calc(13 * var(--gt)); font-weight: 500; letter-spacing: 0; line-height: 1; }
.games-close { width: calc(37 * var(--gt)); height: calc(22 * var(--gt)); padding: calc(1 * var(--gt)) 0 0 calc(6 * var(--gt)); font-size: calc(12 * var(--gt)); }
.games-close .i { width: 1em; height: 1em; stroke: none; }
.games-title:not(:empty) { font-size: calc(12 * var(--gt)); margin-bottom: calc(3 * var(--gt)); padding: calc(3 * var(--gt)) calc(10 * var(--gt)); }
.is-desktop .games-head { --gt: 1.2px; }


/* Match page title bar (phone, rcb365): hidden on desktop, which has its own Match Odds head */
.rcbx .fm-title[hidden] { display: none; }
.rcbx.fm-media .event-page { min-height: 0; } /* the top part (TV, title, scoreboard): rcb365 sizes only the whole page */

/* ---------- the reference site (wmowbihu0h.click): header row and Fancy Bet / Premium tab strip ---------- */
/* Header row: the first button (TV or Bets) flush with the left edge; sizes measured on the reference (360px wide phone). */
.is-mobile .header-container { padding: 0 0.4375rem 0 0; gap: 0; }
.is-mobile .header-bets { width: 6.75rem; height: 2.1875rem; border-left: 0; border-radius: 0 0.25rem 0.25rem 0; }
.is-mobile #header .tv-btn { width: 2.625rem; height: 2.1875rem; margin: 0; border-left: 0; border-radius: 0; }
.is-mobile #header .tv-btn + .header-bets { width: 4.25rem; }
.is-mobile .header-balance { gap: 0; height: 2.1875rem; }
.is-mobile .hb-lines { padding-right: 0.4375rem; }
.is-mobile .hb-refresh { width: 2.625rem; height: 2.1875rem; margin-right: 0.25rem; }
.is-mobile .header-setting { width: 2.1875rem; height: 2.1875rem; }

/* Tab strip: 20px over 30px tabs (reference FancyBetWithSportsBookContainer / SelectedTab / unSelectedTab). */
.rcbx .nwsb-tabs { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding-top: 1.25rem; background: #eee; }
.rcbx .nwsb-row { display: flex; min-width: 0; }
.rcbx .nwsb-sel { position: relative; z-index: 1; display: flex; height: 1.875rem; margin-right: -0.4375rem; }
.rcbx .nwsb-pinwrap { display: flex; width: 2.3125rem; }
.rcbx .nwsb-pinbox { display: flex; flex: 1; align-items: center; justify-content: flex-end; background: linear-gradient(180deg, #243a48 100%, #172732 0); }
.rcbx .nwsb-pin { display: flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; padding: 0.125rem; border: 0; border-radius: 50%; background: #3b5160; color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.rcbx .nwsb-pin.on { background: #6bbd11; color: #fff; }
.rcbx .nwsb-pin svg { width: 1rem; height: 1rem; fill: currentColor; }
.rcbx .nwsb-pinedge { width: 0.5625rem; height: 100%; }
.rcbx .nwsb-name { display: flex; align-items: center; padding: 0.5rem 0.5rem 0.5rem 0.4375rem; }
.rcbx .nwsb-sel.fancy .nwsb-name { background: linear-gradient(180deg, #0b90a3, #097c8c); }
.rcbx .nwsb-sel.premium .nwsb-name { background: linear-gradient(180deg, #ee6a29, #e4550f); }
.rcbx .nwsb-clock { width: 1.125rem; height: 1.125rem; margin-right: 0.25rem; }
.rcbx .nwsb-name span { color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.rcbx .nwsb-rules { position: relative; display: flex; align-items: center; justify-content: center; margin-left: -0.3125rem; padding: 0; border: 0; background: none; cursor: pointer; }
.rcbx .nwsb-rules img { width: 2.5rem; height: 100%; }
.rcbx .nwsb-rules i { position: absolute; display: flex; width: 0.9375rem; height: 0.9375rem; color: #fff; }
.rcbx .nwsb-rules i svg { width: 100%; height: 100%; fill: currentColor; }
.rcbx .nwsb-un { position: relative; display: flex; height: 1.875rem; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; }
.rcbx .nwsb-un img { width: 1.125rem; height: 100%; }
.rcbx .nwsb-un span { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(180deg, #243a48, #172732); font-size: 0.875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.rcbx .nwsb-tabs .fm-min { align-self: center; }
/* Filter bars: teal for Fancy Bet, orange for Premium; the open filter is a white rounded pill (reference Filter). */
.rcbx .event-page.fm .fm-sb .nwsb-filter { background: #097e8e; }
.rcbx .event-page.fm .fm-sb .nwsb-filter.premium { background: #e65812; }
.rcbx .event-page.fm .fm-sb .nwsb-filter button.active { border-radius: 0.3125rem; background: #fff; color: #546774; }
.rcbx .event-page.fm .fm-sb .nwsb-filter.premium button.active { color: #a34005; }
/* Sizes measured on the reference: header text (Bets 13px, balance 11px) and the 30px filter bar with 13px tabs. */
.is-mobile .header-bets { font-size: 0.8125rem; }
.is-mobile .hb-lines { font-size: 0.6875rem; line-height: 1.3; }
.rcbx .event-page.fm .fm-sb .nwsb-filter { height: 1.875rem; min-height: 0; padding: 0 0.25rem; }
.rcbx .event-page.fm .fm-sb .nwsb-filter .dk-fpanel { align-items: center; height: 100%; }
.rcbx .event-page.fm .fm-sb .nwsb-filter button { height: 1.375rem; padding: 0 0.625rem; font-size: 0.8125rem; line-height: 1; }

/* Match-list icons of the In-Play / Sports pages: the reference site's images; P, In-Play F / B and streaming from assets/icons/ */
.rcbx .ev-ico.ev-streaming { background-image: url("../assets/icons/play-icon.svg"); }
.rcbx .ev-ico.ev-low { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' fill='none'%3E%3Crect width='25' height='15' x='.501' fill='%23D0021B' rx='3'/%3E%3Cpath fill='%23fff' d='M8.106 11H3.253V3.73h1.826v5.883h3.027zm6.036-2.74q0 1.353-.743 2.135-.737.776-2.09.776-1.342 0-2.09-.776-.741-.782-.741-2.134 0-1.368.742-2.139.746-.777 2.09-.776 1.347 0 2.09.78.741.778.742 2.135m-1.753.01a3.3 3.3 0 0 0-.083-.81 1.5 1.5 0 0 0-.22-.522.8.8 0 0 0-.342-.284 1.1 1.1 0 0 0-.434-.083q-.23 0-.415.074a.8.8 0 0 0-.342.268 1.5 1.5 0 0 0-.235.523 3.3 3.3 0 0 0-.088.835q0 .503.083.815.083.308.215.493.136.19.342.278.205.088.454.088.205 0 .415-.088a.77.77 0 0 0 .342-.263q.152-.21.23-.503.078-.298.078-.82m10.83-2.753L21.617 11h-1.816l-.962-3.545L17.872 11h-1.816l-1.587-5.483h1.797l.84 3.628 1.04-3.628h1.508l.982 3.628.825-3.628z'/%3E%3C/svg%3E"); }
.rcbx .ev-ico.ev-fancy { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%230A92A5' rx='4'/%3E%3Cpath fill='%23C5F6EE' d='m6.26 12.5.907-4.377h2.849l.255-1.246H7.422l.652-3.116h3.67L12 2.5H6.6q-.68 0-1.19.428-.51.427-.667 1.137L3 12.5z'/%3E%3C/svg%3E"); }
.rcbx .ev-ico.ev-fancy.in-play { background-image: url("../assets/icons/f-icon.svg"); }
.rcbx .ev-ico.ev-bookmaker { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Crect width='15' height='15' fill='%23226BC3' rx='4'/%3E%3Cpath fill='%23CAFCFF' d='M9.29 12q.657 0 1.15-.385.492-.384.643-1.023l.493-2.244a.65.65 0 0 0-.061-.496.86.86 0 0 0-.35-.352q.275-.104.5-.339.226-.234.294-.496l.493-2.256q.15-.639-.17-1.024Q11.958 3 11.288 3h-6.79L2.5 12zM8.742 6.94H6.771l.63-2.804h1.971zm-.876 3.94H5.895l.63-2.818h1.971z'/%3E%3C/svg%3E"); }
.rcbx .ev-ico.ev-bookmaker.in-play { background-image: url("../assets/icons/b-icon.svg"); }
.rcbx .ev-ico.ev-premium { background-image: url("../assets/icons/p-icon.svg"); }