/* ===================================================================
   bt365-ui.css — Sports Homepage Stylesheet (v058 login register auth pages)
   Mobile-first: 390×844 target, 360×800 floor, 430×932 ceiling
   =================================================================== */

/* --- 1. RESET & BASE --------------------------------------------- */
*, *:before, *:after { box-sizing: border-box; }
html { background: #222; scroll-behavior: smooth; }
body.sports-shell {
    margin: 0;
    background: #1f1f1f;
    color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    min-width: 320px;
    max-width: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* --- 2. TOP BAR (desktop) ---------------------------------------- */
.bt-top {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    align-items: center;
    height: 100px;
    padding: 0 24px;
    background: linear-gradient(180deg, #244b3b, #1d3a30);
    border-bottom: 1px solid #22372f;
}
.bt-logo {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #f5e82d;
}
.bt-logo span,
.bt-footer-logo span { color: #fff; }
.bt-top-tabs {
    display: flex;
    justify-content: center;
    align-self: stretch;
    gap: 70px;
}
.bt-top-tabs a {
    display: flex;
    align-items: center;
    color: #fff;
    border-bottom: 4px solid transparent;
}
.bt-top-tabs a.active {
    color: #73f4b2;
    border-bottom-color: #73f4b2;
}
.bt-top-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.bt-top-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    color: #fff;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    white-space: nowrap;
}
.bt-top-actions a.join {
    color: #fff200;
    background: transparent;
    border-color: #fff200;
}
.bt-top-actions a.search-action {
    position: relative;
    width: 40px;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border-color: transparent;
}
.bt-top-actions a.search-action:before {
    content: "";
    position: absolute;
    left: 9px; top: 8px;
    width: 17px; height: 17px;
    border: 2px solid #d6dfdb;
    border-radius: 50%;
}
.bt-top-actions a.search-action:after {
    content: "";
    position: absolute;
    left: 25px; top: 26px;
    width: 11px; height: 2px;
    background: #d6dfdb;
    transform: rotate(45deg);
}

/* --- 3. APP LAYOUT (desktop: sidebar + main) --------------------- */
.bt-app {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
    min-height: calc(100vh - 100px);
}

/* --- 4. LEFT RAIL (desktop) -------------------------------------- */
.bt-rail {
    position: sticky;
    top: 100px;
    height: calc(100vh - 100px);
    padding: 46px 22px;
    overflow-y: auto;
    background: #252525;
    border-right: 1px solid #151515;
    scrollbar-color: #666 #252525;
    scrollbar-width: thin;
}
.bt-rail h2 {
    margin: 0 0 26px;
    color: #72efb2;
    font-size: 25px;
}
.bt-rail h2:not(:first-child) { margin-top: 68px; }
.bt-rail a {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    color: #d7d7d7;
    font-size: 18px;
    line-height: 1.1;
}
.bt-rail a.selected,
.bt-rail a:hover { color: #75f1b3; }
.bt-rail span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: #111;
    background: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}
.bt-rail .ball:before {
    content: "";
    width: 16px; height: 16px;
    background: #111;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #fff;
}
.bt-rail .tag { border-radius: 5px; background: #dfe7ff; }
.bt-rail .mlb {
    width: 34px; border-radius: 4px;
    background: linear-gradient(90deg, #274d93, #fff 48%, #c83b3b);
    color: transparent;
}
.bt-rail .crest { background: #79f0af; }
.bt-rail .dark { background: #eee; }
.bt-rail .horse { background: #f1d4a7; }
.bt-rail .tennis { background: #d9ff75; }
.bt-rail .wnba { background: #f5672e; color: #fff; }
.bt-rail .nfl { background: #b96858; color: #fff; }

/* --- 5. MAIN CONTENT AREA ---------------------------------------- */
.bt-content {
    padding: 24px 48px 80px;
    max-width: 100%;
}

/* --- 6. SEARCH BAR ----------------------------------------------- */
.bt-search {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 58px;
    margin-bottom: 48px;
    padding: 0 30px;
    color: #fff;
    background: #343434;
    border-radius: 30px;
    font-size: 18px;
}
.bt-search i {
    width: 20px; height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    flex-shrink: 0;
}
.bt-search i:after {
    content: "";
    display: block;
    width: 9px; height: 2px;
    margin: 14px 0 0 14px;
    background: #ddd;
    transform: rotate(45deg);
}

/* --- 7. SECTIONS & TITLE ROWS ----------------------------------- */
.bt-block,
.bt-odds-block,
.bt-builder,
.bt-casino { margin-bottom: 32px; }

.bt-title-row,
.bt-title-row.compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
}
.bt-title-row h1,
.bt-title-row h2,
.bt-casino h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.08;
    min-width: 0;
}
.bt-title-row.compact h2 { color: #88f6b8; font-style: italic; }

/* section icon in title rows */
.bt-section-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    object-fit: contain;
}

/* country flag and competition icon */
.bt-country-flag {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.25);
    vertical-align: middle;
}
.bt-competition-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

/* Unified View All / Show More pill buttons */
.bt-title-row a,
.bt-title-row.compact a,
.bt-casino-row-head a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 86px;
    height: 36px; min-height: 36px; max-height: 36px;
    padding: 0 15px;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: transparent;
}
.bt-title-row.compact a {
    min-width: 0;
    height: 30px; min-height: 30px; max-height: 30px;
    padding: 0;
    border-color: transparent;
}

/* --- 8. CARD ROWS ------------------------------------------------ */
.bt-card-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: 8px;
}

.bt-boost,
.bt-market-card,
.bt-outrights-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 16px 14px 12px;
    overflow: hidden;
    background: #333;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 0 rgba(0,0,0,.3);
    min-width: 0;
}
.bt-boost:before,
.bt-market-card:before,
.bt-outrights-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: rgba(255,255,255,.07);
}
.bt-market-card { min-height: 270px; }

.bt-boost h3,
.bt-market-card h3,
.bt-outrights-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-height: 2.6em;
    overflow: hidden;
}
.bt-boost b,
.bt-market-card b,
.bt-outrights-card b {
    display: block;
    margin: 7px 0 8px;
    color: #fff;
    font-size: 17px;
    line-height: 1.2;
}
.bt-boost p,
.bt-market-card p,
.bt-outrights-card p {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    margin: 5px 0;
    color: #cfcfcf;
    font-size: 13px;
    line-height: 1.18;
    font-weight: 500;
}

/* shirt/jersey placeholder */
.shirt {
    display: inline-block;
    flex-shrink: 0;
    width: 15px; height: 15px;
    margin-right: 10px;
    background: #e7e1d5;
    border-radius: 4px 4px 2px 2px;
    vertical-align: -2px;
}
.shirt.blue { background: #4b78d1; }
.shirt.red { background: #dc3636; }
/* neutral club kit colours */
.shirt-kit-dark-yellow { background: #222; box-shadow: inset 0 4px 0 #f5c400; }
.shirt-kit-red-black { background: #c41230; box-shadow: inset 0 4px 0 #1a1a1a; }
.shirt-kit-red-white { background: #d01020; box-shadow: inset 0 4px 0 #fff; }
.shirt-kit-black-white { background: #1a1a1a; box-shadow: inset 0 4px 0 #fff; }

/* bet boost line */
.bt-boost-line {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}
.bt-boost-line em {
    color: #7cf0b7;
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0;
}
.bt-market-card > em {
    margin-top: auto;
    color: #7cf0b7;
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0;
}
.bt-boost-line small {
    position: relative;
    padding-left: 16px;
    color: #ffd87b;
    font-size: 12px;
}
.bt-boost-line small:before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 10px; height: 10px;
    margin-top: -6px;
    border-radius: 50% 50% 50% 0;
    background: #ffd679;
    transform: rotate(-45deg);
}

.bt-boost strong,
.bt-market-card strong {
    display: block;
    min-height: 47px;
    margin: 8px 0 0;
    padding: 12px;
    color: #fff;
    background: #282828;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    font-size: 28px;
    text-align: center;
}
.bt-boost strong del,
.bt-market-card strong del {
    color: #9b9b9b;
    font-size: .68em;
    text-decoration-thickness: 2px;
}
.bt-boost > small,
.bt-market-card > small {
    display: block;
    margin-top: 4px;
    color: #cfcfcf;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* --- 9. OUTRIGHTS CARDS (Transfer Specials) ---------------------- */
.bt-outrights-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 14px;
}
.bt-outrights-card h3 {
    margin: 0 0 6px;
    min-height: 42px;
    color: #fff;
    font-size: 17px;
    line-height: 1.16;
}
.bt-outrights-card b {
    margin: 0 0 10px;
    color: #bababa;
    font-size: 13px;
}
.bt-outrights-card p {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    color: #d5d5d5;
    border-top: 1px solid rgba(255,255,255,.045);
    white-space: normal;
}
.bt-outrights-card p:first-of-type { border-top: 0; }
.bt-outrights-card p:before { display: none; }
.bt-outrights-card .shirt { flex: 0 0 18px; margin-right: 0; }
.bt-outrights-card p em {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
    color: #fff200;
    font-style: normal;
    font-weight: 500;
    text-align: right;
}
.bt-outrights-card a {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-top: auto;
    padding-top: 14px;
    color: #dcdcdc;
    font-weight: 800;
}
.bt-outrights-card a:after {
    content: "";
    width: 7px; height: 7px;
    margin-left: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

/* --- 10. ODDS BLOCKS (Match Rows) -------------------------------- */
.bt-odds-block {
    border-radius: 6px;
    background: transparent;
}
.bt-odds-block h2 {
    margin: 0 0 8px 8px;
    color: #fff;
    font-size: 16px;
    font-style: italic;
}

/* --- In-Play specific --- */
.bt-inplay-event {
    margin-bottom: 2px;
    border-radius: 6px;
    overflow: hidden;
    background: #313131;
}
.bt-inplay-event .bt-odds-head {
    border-radius: 6px 6px 0 0;
    background: #464646;
    font-size: 13px;
    min-height: 36px;
}
.bt-inplay-event .bt-match-row {
    background: transparent;
    border-bottom: 1px solid #3a3a3a;
}
.bt-inplay-event:last-child .bt-match-row {
    border-bottom: 0;
    border-radius: 0 0 6px 6px;
}
.bt-odds-head,
.bt-match-row {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) repeat(3, minmax(150px, 1fr));
    align-items: center;
}
.bt-odds-head {
    min-height: 42px;
    padding: 0 14px;
    color: #fff;
    background: #484848;
    border-radius: 6px 6px 0 0;
}
.bt-odds-head:not(:first-of-type) { border-radius: 0; }
.bt-odds-head span { text-align: center; }
.bt-odds-head + .bt-match-row { border-top: 0; }

.bt-match-row {
    min-height: 150px;
    padding: 0 14px;
    background: #333;
    border-bottom: 1px solid #444;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.bt-match-row:last-child { border-radius: 0 0 6px 6px; }
.bt-team-cell {
    display: grid;
    gap: 13px;
    padding-right: 16px;
    border-right: 1px solid #4b4b4b;
}
.bt-team-cell b {
    color: #fff;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bt-team-cell small { color: #ccc; }
.bt-team-cell em {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    color: #114431;
    background: #8ff8c2;
    border-radius: 2px;
    font-style: normal;
}
.bt-match-row button,
.bt-player button {
    min-height: 42px;
    color: #fff200;
    background: transparent;
    border: 0;
    font-size: 18px;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.bt-match-row button:hover,
.bt-player button:hover { color: #fff600; background: #575757; }
.bt-match-row button:active,
.bt-player button:active { transform: scale(.985); }

/* flag circles */
.flag {
    display: inline-block;
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-right: 8px;
    border: 1px solid #fff;
    border-radius: 50%;
    vertical-align: -4px;
}
.flag.fr { background: linear-gradient(90deg,#2d61c9 0 33%,#fff 33% 66%,#d63333 66%); }
.flag.es { background: linear-gradient(180deg,#c73333 0 25%,#f3d14a 25% 75%,#c73333 75%); }
.flag.en { background: #fff; }
.flag.ar { background: linear-gradient(180deg,#72c7f2 0 33%,#fff 33% 66%,#72c7f2 66%); }

/* --- 11. BUILDER CARDS ------------------------------------------- */
.bt-builder-card {
    overflow: hidden;
    background: #333;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.bt-versus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 10px 18px;
    background: #333;
    font-size: 18px;
}
.bt-versus small {
    flex-basis: 100%;
    margin-top: 12px;
    color: #ccc;
    text-align: center;
    font-weight: 500;
}
.bt-builder-card nav {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 14px 18px;
    background: #333;
    border-bottom: 1px solid #3f3f3f;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.bt-builder-card nav b {
    padding: 9px 13px;
    color: #111;
    background: #ddd;
    border-radius: 18px;
}
.bt-builder-card nav span {
    color: #e5e5e5;
    font-weight: 500;
}
.bt-player-head,
.bt-player {
    display: grid;
    grid-template-columns: minmax(330px, 1fr) repeat(3, minmax(150px, 1fr));
    align-items: center;
}
.bt-player-head {
    min-height: 42px;
    padding: 0 14px;
    background: #414141;
}
.bt-player-head b { font-weight: 700; }
.bt-player-head span { text-align: center; }
.bt-player {
    min-height: 64px;
    padding: 0 14px;
    background: #323232;
    border-bottom: 1px solid #424242;
}
.bt-player > div {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 10px;
    border-right: 1px solid #4a4a4a;
}
.bt-player i {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    color: #fff;
    background: #4d78d0;
    border-radius: 50%;
    font-style: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,.7);
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.1);
    flex-shrink: 0;
}
.bt-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-player small { color: #ddd; font-size: 12px; }
.bt-more {
    width: 100%;
    min-height: 48px;
    color: #e8e8e8;
    background: #303030;
    border: 0;
}

/* spacing between sections */
.bt-odds-block + .bt-block,
.bt-builder + .bt-block,
.bt-casino + .bt-block { margin-top: 34px; }

/* --- 12. CASINO SECTION (embedded in sports page) ---------------- */
.bt-casino { padding-top: 2px; }
.bt-casino h1 { margin-bottom: 22px; }
.bt-casino h2 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 28px;
}
.bt-casino-lobby { padding-top: 10px; }

/* Casino title row within sports page */
.bt-casino-title {
    display: flex;
    margin-top: 22px;
}

/* Hide casino sub-header on sports page */
body:not(.bt-casino-page) .bt-casino-lobby .bt-app-banner,
body:not(.bt-casino-page) .bt-casino-lobby .bt-casino-head,
body:not(.bt-casino-page) .bt-casino-lobby .bt-casino-search,
body:not(.bt-casino-page) .bt-casino-lobby .bt-casino-cats { display: none !important; }
body:not(.bt-casino-page) .bt-casino-lobby { padding-top: 0; }

/* Casino feature grid */
.bt-casino-feature {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) 1fr;
    gap: 12px;
    margin: 8px 0 22px;
}
.bt-casino-feature > a {
    position: relative;
    display: block;
    min-height: 250px;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    background: #2e2e2e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 rgba(0,0,0,.25);
}
.bt-casino-feature > a:after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
}
.bt-casino-feature img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.bt-casino-feature > a span,
.bt-casino-feature > a b,
.bt-casino-feature > a em {
    position: absolute; z-index: 1; left: 18px;
}
.bt-casino-feature > a span {
    bottom: 76px;
    color: #9fffcf;
    font-weight: 800;
    text-transform: uppercase;
}
.bt-casino-feature > a b {
    bottom: 34px;
    max-width: 58%;
    font-size: 28px;
    line-height: 1;
}
.bt-casino-feature > a em {
    right: 18px; bottom: 32px; left: auto;
    min-width: 126px;
    padding: 13px 20px;
    color: #071b11;
    text-align: center;
    font-style: normal;
    font-weight: 900;
    background: #81f5b1;
    border-radius: 28px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.bt-casino-feature > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-self: end;
}
.bt-casino-feature > div a {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    background: #333;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 rgba(0,0,0,.25);
}
.bt-casino-feature > div img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.bt-casino-feature > div span {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    padding: 30px 8px 8px;
    font-weight: 900;
    line-height: 1.05;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}

/* casino category rows */
.bt-casino-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    margin: 24px 0 14px;
}
.bt-casino-row-head h2 { margin: 0; }

/* casino game grids */
.bt-casino-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.bt-casino-grid.hot { grid-template-columns: repeat(4, minmax(0, 220px)); }
.bt-casino-grid.all-games { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bt-casino-grid a {
    position: relative;
    display: block;
    min-height: 180px;
    overflow: hidden;
    background: #333;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,.35);
    transform: translateZ(0);
}
.bt-casino-grid a:before {
    content: "";
    position: absolute; z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.78));
    pointer-events: none;
}
.bt-casino-grid img {
    width: 100%; height: 180px;
    object-fit: cover;
    transition: transform .18s ease, filter .18s ease;
}
.bt-casino-grid a:hover img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.035);
}
.bt-casino-grid span {
    position: absolute; z-index: 2;
    right: 0; bottom: 0; left: 0;
    padding: 42px 10px 10px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.86));
    font-size: 20px;
    line-height: 1.05;
}
.bt-casino-grid em {
    position: absolute; z-index: 2;
    right: 10px; bottom: 10px;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    color: #fff;
    background: rgba(25,86,55,.82);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    font-style: normal;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* Casino page overrides */
.bt-casino-page {
    min-height: 100vh;
    background: #1f1f1f;
}
.bt-casino-page .bt-content {
    max-width: 1500px;
    margin: 0 auto;
}
.bt-casino-page .bt-casino-lobby { margin-top: 0; }

/* Casino sub-header (casino page only) */
.bt-casino-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    margin: 0 -8px;
    padding: 0 12px;
    background: linear-gradient(180deg, #294f3e, #1e3e32);
}
.bt-casino-head h1 { margin: 0; color: #f5e82d; font-size: 34px; }
.bt-casino-head h1 span { color: #fff; }
.bt-casino-head div { display: flex; gap: 8px; }
.bt-casino-head a {
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
}
.bt-casino-head a.join { color: #fff200; border-color: #fff200; }
.bt-casino-search {
    display: none;
    align-items: center;
    gap: 16px;
    height: 58px;
    margin: 12px 0 28px;
    padding: 0 28px;
    color: #fff;
    background: #415149;
    border-radius: 30px;
    font-size: 18px;
}
.bt-casino-search i {
    width: 22px; height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.bt-casino-cats {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    margin: 0 0 26px;
    padding: 4px 0 12px;
}
.bt-casino-cats a {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 86px;
    color: #ddd;
    text-align: center;
}
.bt-casino-cats i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    padding: 9px;
    background: #7af3b1;
    border-radius: 10px;
    font-style: normal;
    box-sizing: border-box;
}
.bt-casino-cats i img {
    display: block;
    width: 100%; height: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    filter: brightness(0);
}
.bt-casino-cats a:not(.active) i { background: #333; }
.bt-casino-cats a:not(.active) i img { filter: brightness(0) invert(1); }

/* --- 13. GAME ROWS (horizontal scroll) --------------------------- */
.bt-game-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 260px;
    gap: 12px;
    overflow-x: auto;
    margin-bottom: 28px;
}
.bt-game-row a {
    position: relative;
    display: block;
    height: 220px;
    overflow: hidden;
    background: #333;
    border-radius: 6px;
}
.bt-game-row img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.bt-game-row span {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    padding: 44px 12px 12px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.86));
    font-size: 24px;
    line-height: 1.05;
}

/* --- 14. FOOTER -------------------------------------------------- */
.bt-footer {
    grid-column: 2;
    min-width: 0;
    margin-top: 70px;
    padding: 0 17% 54px;
    color: #aaa;
    border-top: 1px solid #4a4a4a;
}
.bt-partner-mark {
    display: grid;
    grid-template-columns: auto 1px auto;
    justify-content: center;
    align-items: center;
    gap: 26px;
    min-height: 150px;
    border-bottom: 1px solid #4a4a4a;
    color: #8d8d8d;
    text-align: center;
}
.bt-partner-mark b { color: #bdbdbd; font-size: 28px; }
.bt-partner-mark i {
    display: block;
    width: 1px; height: 64px;
    background: #6b6b6b;
}
.bt-partner-mark strong { color: #9b9b9b; font-size: 13px; line-height: 1.05; }
.bt-partner-mark small {
    grid-column: 1 / 4;
    margin-top: -38px;
    font-size: 11px;
    color: #8f8f8f;
}
.bt-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 38px;
    min-height: 140px;
}
.bt-trust-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px; min-height: 38px;
    color: #9a9a9a;
    border: 1px solid transparent;
    font-weight: 800;
    text-align: center;
    line-height: 1.05;
}
.bt-trust-row span:nth-child(4) {
    padding: 6px 12px;
    border-radius: 4px;
    background: #9f9f9f;
    color: #333;
}
.bt-trust-row span:last-child {
    min-width: 36px; min-height: 36px;
    border-color: #888;
    border-radius: 50%;
}
.bt-footer-logo {
    display: block;
    margin-bottom: 22px;
    color: #eee;
    font-size: 38px;
}
.bt-footer p {
    margin: 18px 0;
    color: #a8a8a8;
    line-height: 1.55;
    font-weight: 500;
}
.bt-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid #4a4a4a;
    color: #9f9f9f;
    font-size: 18px;
}
.bt-footer-bottom nav { display: flex; gap: 24px; }
.bt-footer-bottom a { color: #9f9f9f; font-size: 30px; }

/* --- 15. BET SLIP (fixed overlay) -------------------------------- */
.bt-slip {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 90;
    display: none;
    width: 320px;
    padding: 18px;
    color: #fff;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.bt-slip.show { display: block; }
.bt-slip-close {
    position: absolute;
    right: 10px; top: 8px;
    color: #ddd;
    background: transparent;
    border: 0;
}
.bt-slip b {
    display: block;
    margin-bottom: 12px;
    color: #76f4af;
    font-size: 18px;
}
.bt-slip p { margin: 6px 0; color: #ddd; line-height: 1.35; }
.bt-slip-selections {
    display: grid;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
}
.bt-slip-selections article {
    position: relative;
    padding: 8px 30px 8px 8px;
    background: #242424;
    border-left: 3px solid #76f4af;
}
.bt-slip-selections article b { margin: 0 0 3px; color: #fff; font-size: 13px; }
.bt-slip-selections article span { color: #bbb; font-size: 12px; }
.bt-slip-selections article button {
    position: absolute;
    top: 5px; right: 5px;
    width: 22px; height: 22px;
    padding: 0;
    color: #ddd;
    background: transparent;
    border: 0;
}
.bt-slip label {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.bt-slip input {
    width: 100%;
    padding: 9px 10px;
    color: #fff;
    background: #202020;
    border: 1px solid #555;
    border-radius: 4px;
}
.bt-slip strong { display: block; margin: 14px 0; color: #fff200; }
.bt-slip-submit {
    width: 100%;
    min-height: 42px;
    color: #173c2f;
    background: #76f4af;
    border: 0;
    border-radius: 4px;
}
.bt-slip small {
    display: block;
    margin-top: 10px;
    color: #aaa;
    line-height: 1.35;
}

.bt-bet-feedback {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 10020;
    width: min(420px, calc(100vw - 32px));
    padding: 13px 16px;
    transform: translate(-50%, -16px);
    border: 1px solid #666;
    border-radius: 6px;
    background: #292929;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.bt-bet-feedback.show { transform: translate(-50%, 0); opacity: 1; }
.bt-bet-feedback.success { border-color: #56d991; background: #173f2d; }
.bt-bet-feedback.warning { border-color: #e4bd56; background: #493a17; }
.bt-bet-feedback.error { border-color: #ef6b6b; background: #4a2020; }

/* --- 16. APP BANNER (mobile, casino page) ------------------------ */
.bt-app-banner {
    display: none;
    grid-template-columns: 24px 44px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 74px;
    margin: -12px -8px 0;
    padding: 8px 10px;
    background: #252525;
}
.bt-app-banner button {
    width: 24px; height: 24px;
    color: #aaa;
    background: transparent;
    border: 0;
    font-size: 22px;
}
.bt-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: #fff200;
    background: #2b6148;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(125,246,176,.45);
}
.bt-app-banner b { display: block; color: #79f3b4; font-style: italic; }
.bt-app-banner span { color: #fff; font-size: 13px; }
.bt-app-banner a {
    padding: 10px 18px;
    color: #15392d;
    background: #94ffb3;
    border-radius: 22px;
}

/* --- 17. LANGUAGE SWITCH ----------------------------------------- */
.bt-lang-switch { position: relative; margin-left: 8px; }
.bt-lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 14px;
    color: #ccc; background: #2a2a2a;
    border: 1px solid #4a4a4a; border-radius: 4px;
    font-size: 14px; cursor: pointer; white-space: nowrap;
}
.bt-lang-arrow { font-size: 10px; color: #888; }
.bt-lang-list {
    display: none; position: absolute; top: 100%; right: 0; z-index: 1050;
    min-width: 170px; margin: 4px 0 0; padding: 6px 0; list-style: none;
    background: #1e1e1e; border: 1px solid #4a4a4a; border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.bt-lang-switch.open .bt-lang-list { display: block; }
.bt-lang-list a {
    display: block; padding: 8px 16px; color: #ccc;
    text-decoration: none; font-size: 14px; line-height: 1.4; white-space: nowrap;
}
.bt-lang-list a:hover,
.bt-lang-list a.active { color: #fff; background: #333; }
.bt-lang-list a.active { font-weight: 700; }

/* --- 18. BOTTOM NAVIGATION (desktop: hidden) --------------------- */
/* --- Live page (base layer) --- */
.bt-live-view { padding: 0; }
.bt-live-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bt-live-heading h1 { margin: 0; font-size: 22px; color: #fff; }
.bt-live-count { color: #aaa; font-size: 13px; white-space: nowrap; }
.bt-live-sports { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.bt-live-sports::-webkit-scrollbar { display: none; }
.bt-live-sports button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 32px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #bbb; font-size: 13px; font-weight: 700; cursor: pointer; }
.bt-live-sports button img { flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; opacity: .7; }
.bt-live-sports button.active { color: #7af3b1; border-bottom-color: #7af3b1; }
.bt-live-sports button.active img { opacity: 1; }
.bt-live-group { margin-bottom: 6px; border-radius: 6px; overflow: hidden; background: #2f2f2f; }
.bt-live-market-head { display: grid; grid-template-columns: minmax(200px, 1fr) 80px 80px 80px; align-items: center; min-height: 36px; padding: 0 14px; background: #464646; font-size: 13px; color: #fff; }
.bt-live-market-head span { text-align: center; }
.bt-live-row { display: grid; grid-template-columns: minmax(200px, 1fr) 240px; align-items: stretch; border-bottom: 1px solid #3a3a3a; background: #2f2f2f; }
.bt-live-row:last-child { border-bottom: 0; }
.bt-live-teams { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 14px; min-width: 0; }
.bt-live-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bt-live-team b { color: #fff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bt-live-team em { flex-shrink: 0; color: #7af3b1; font-style: normal; font-size: 15px; font-weight: 700; min-width: 18px; text-align: center; }
.bt-live-team .bt-country-flag { width: 18px; height: 18px; flex-shrink: 0; }
.bt-live-team .shirt { width: 16px; height: 16px; flex-shrink: 0; }
.bt-live-teams small { display: flex; align-items: center; gap: 10px; color: #aaa; font-size: 13px; }
.bt-live-teams cite { font-style: normal; color: #7af3b1; }
.bt-live-odds { display: grid; grid-template-columns: 80px 80px 80px; border-left: 1px solid #3a3a3a; }
.bt-live-odds button { min-height: 100%; border: 0; background: transparent; color: #fff200; font-size: 15px; font-weight: 700; cursor: pointer; padding: 4px; }
.bt-live-odds button:active { background: rgba(255,255,255,.08); }
.bt-live-odds-basket { grid-template-columns: 1fr 1fr 1fr; font-size: 12px; }
.bt-live-odds-basket small { display: block; color: #aaa; font-size: 11px; text-align: center; }
.bt-live-odds-basket button { font-size: 13px; }
.bt-live-spread, .bt-live-total, .bt-live-money { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 2px; }
.bt-live-total { flex-direction: column; color: #fff; }
.bt-odds-na { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; color: #666; font-size: 14px; }

/* --- Tickets page (base layer) --- */
.bt-tickets-page-content { min-height: calc(100vh - 64px); }
.bt-tickets-view { width: 100%; max-width: 900px; min-height: 100%; padding: 0; }
.bt-tickets-heading { margin-bottom: 12px; }
.bt-tickets-heading h1 { margin: 0; font-size: 22px; color: #fff; }
.bt-ticket-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid #3a3a3a; }
.bt-ticket-tabs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-bottom: 2px solid transparent; color: #bbb; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.bt-ticket-tabs a.active { color: #7af3b1; border-bottom-color: #7af3b1; }
.bt-ticket-list { display: grid; gap: 8px; margin-bottom: 16px; }
.bt-ticket-card { background: #2f2f2f; border: 1px solid #3a3a3a; border-radius: 6px; padding: 14px; }
.bt-ticket-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.bt-ticket-id { color: #7af3b1; font-size: 14px; font-weight: 700; }
.bt-ticket-status { color: #ccc; font-size: 12px; padding: 2px 8px; background: #3a3a3a; border-radius: 4px; }
.bt-ticket-date { color: #aaa; font-size: 12px; margin-bottom: 10px; }
.bt-ticket-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.bt-ticket-summary div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.bt-ticket-summary dt { color: #888; font-size: 12px; }
.bt-ticket-summary dd { color: #fff; font-size: 14px; font-weight: 700; }
.bt-ticket-footer { display: flex; gap: 8px; }
.bt-ticket-view, .bt-ticket-print { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; font-size: 12px; font-weight: 700; text-decoration: none; }
.bt-ticket-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; min-height: 260px; }
.bt-ticket-empty h2 { margin: 0 0 8px; color: #fff; font-size: 18px; }
.bt-ticket-empty p { margin: 0 0 18px; color: #aaa; font-size: 14px; }
.bt-ticket-empty-icon { flex-shrink: 0; width: 48px; height: 48px; margin-bottom: 16px; border: 1.5px solid #888; border-radius: 6px; position: relative; }
.bt-ticket-empty-icon:before { content: ''; position: absolute; top: 14px; left: 10px; width: 28px; height: 1.5px; background: #888; }
.bt-ticket-empty-icon:after { content: ''; position: absolute; top: 22px; left: 10px; width: 18px; height: 1.5px; background: #888; }
.bt-ticket-empty-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 20px; color: #122d25; background: #7af3b1; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; }
.bt-ticket-pagination { margin-bottom: 14px; }
.bt-ticket-pagination a, .bt-ticket-pagination span { color: #ccc; font-size: 13px; padding: 4px 8px; }
.bt-ticket-note { color: #888; font-size: 12px; }
.bt-ticket-note span { color: #ccc; font-weight: 700; }

/* --- Auth pages (base layer) --- */
.bt-auth-page-content { min-height: calc(100vh - 64px); }
.bt-auth-view { width: 100%; max-width: 480px; margin: 0 auto; padding: 0; }
.bt-register-view { max-width: 760px; }
.bt-auth-heading { margin-bottom: 14px; }
.bt-auth-heading h1 { margin: 0; font-size: 22px; color: #fff; }
.bt-auth-switch { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid #3a3a3a; }
.bt-auth-switch a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-bottom: 2px solid transparent; color: #bbb; font-size: 13px; font-weight: 700; text-decoration: none; }
.bt-auth-switch a.active { color: #7af3b1; border-bottom-color: #7af3b1; }
.bt-auth-panel { background: #2f2f2f; border: 1px solid #3a3a3a; border-radius: 6px; padding: 20px; }
.bt-auth-form { display: flex; flex-direction: column; gap: 14px; }
.bt-auth-field { display: flex; flex-direction: column; gap: 4px; }
.bt-auth-field label { color: #bbb; font-size: 12px; font-weight: 700; }
.bt-auth-field .error-label { color: #ff6b6b; }
.bt-auth-field .error-label span { display: block; font-weight: 400; }
.bt-auth-field .error-label + input,
.bt-auth-field .error-label + select,
.bt-auth-field .error-label + .bt-auth-date select { border-color: #ff6b6b; }
.bt-auth-field input, .bt-auth-field select { min-height: 44px; padding: 0 12px; background: #3a3a3a; border: 1px solid #555; border-radius: 4px; color: #fff; font-size: 14px; }
.bt-auth-field input::placeholder { color: #888; }
.bt-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bt-email-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
.bt-email-code-send { min-height: 44px; border: 0; border-radius: 4px; background: #7af3b1; color: #111; font-weight: 800; cursor: pointer; }
.bt-email-code-send:disabled { background: #555; color: #aaa; cursor: default; }
.bt-email-code-message { min-height: 16px; color: #aaa; font-size: 12px; }
.bt-email-code-message.success { color: #7af3b1; }
.bt-email-code-message.error { color: #ff6b6b; }
.bt-auth-date { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bt-auth-date select { min-height: 44px; padding: 0 8px; background: #3a3a3a; border: 1px solid #555; border-radius: 4px; color: #fff; font-size: 13px; }
.bt-auth-section { margin-bottom: 4px; }
.bt-auth-section h2 { margin: 0 0 12px; color: #fff; font-size: 16px; }
.bt-auth-agreement { display: flex; align-items: flex-start; gap: 10px; color: #bbb; font-size: 13px; }
.bt-auth-agreement a { color: #7af3b1; text-decoration: none; }
.bt-auth-submit { min-height: 46px; padding: 0 24px; background: #7af3b1; color: #122d25; border: 0; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; }
.bt-auth-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; text-align: center; }
.bt-auth-links a { color: #7af3b1; font-size: 13px; text-decoration: none; }
.bt-auth-message { padding: 10px 14px; margin-bottom: 14px; background: #3a3a3a; border-radius: 4px; color: #ccc; font-size: 13px; }

.bt-bottom { display: none; }

/* ===================================================================
   19. TABLET BREAKPOINT (max-width: 1180px)
   =================================================================== */
@media (max-width: 1180px) and (min-width: 768px) {
    .bt-top { grid-template-columns: 210px 1fr 250px; }
    .bt-top-tabs { gap: 34px; }
    .bt-app { grid-template-columns: 300px minmax(0, 1fr); }
    .bt-rail { padding-right: 18px; padding-left: 18px; }
    .bt-content { padding-right: 24px; padding-left: 24px; }
    .bt-card-row { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
    .bt-odds-head,
    .bt-match-row { grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(90px, 1fr)); }
}

/* ===================================================================
   20. MOBILE BREAKPOINT (max-width: 980px)
   =================================================================== */
@media (max-width: 980px) {
    .bt-content { padding-bottom: 90px; }

    /* casino feature goes single-column */
    .bt-casino-feature {
        display: block;
        margin: 8px 0 18px;
    }
    .bt-casino-feature > a {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 14px;
    }
    .bt-casino-feature > a span { bottom: 62px; left: 16px; font-size: 12px; }
    .bt-casino-feature > a b { bottom: 20px; left: 16px; max-width: 55%; font-size: 24px; }
    .bt-casino-feature > a em { right: 14px; bottom: 20px; min-width: 112px; padding: 12px 16px; font-size: 15px; }
    .bt-casino-feature > div {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 92px;
        grid-template-columns: none;
        gap: 9px;
        margin-top: -50px;
        padding: 0 14px 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .bt-casino-feature > div::-webkit-scrollbar { display: none; }
    .bt-casino-feature > div a {
        border: 2px solid rgba(130,245,177,.18);
        box-shadow: 0 8px 18px rgba(0,0,0,.35);
    }
    .bt-casino-feature > div a:last-child { border-color: #7ff3ae; }

    /* casino grids: reduce columns */
    body:not(.bt-casino-page) .bt-casino-grid.hot {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    body:not(.bt-casino-page) .bt-casino-grid.hot span { font-size: 13px; }

    /* card rows: horizontal scroll on tablet break */
    .bt-card-row { gap: 7px; }
    .bt-boost, .bt-market-card {
        min-height: 156px;
        padding: 12px;
        border-radius: 6px;
    }
    .bt-boost h3, .bt-market-card h3 { font-size: 17px; }
    .bt-boost p, .bt-market-card p { font-size: 13px; }
    .bt-boost strong, .bt-market-card strong { min-height: 45px; font-size: 24px; }

    /* odds table: tighter columns */
    .bt-odds-head,
    .bt-match-row { grid-template-columns: minmax(142px, 1fr) 60px 60px 60px; }
    .bt-team-cell { padding-right: 8px; }

    /* builder: tighter player columns */
    .bt-builder-card { border-radius: 6px; }
    .bt-player-head,
    .bt-player { grid-template-columns: minmax(190px, 1fr) 96px 118px 118px; }

    /* casino grids */
    .bt-casino-grid a { border-radius: 7px; }
    .bt-casino-grid em { right: 8px; bottom: 8px; }

    /* title row */
    .bt-title-row { gap: 10px; }
    .bt-title-row a, .bt-casino-row-head a {
        min-width: 82px;
        height: 34px; min-height: 34px; max-height: 34px;
        padding: 0 13px;
        font-size: 13px;
    }
    .bt-title-row.compact a { height: 30px; min-height: 30px; max-height: 30px; padding: 0; }

    /* Transfer Specials horizontal scroll */
    #transfer-specials {
        margin-bottom: 22px;
        overflow: hidden;
    }
    #transfer-specials .bt-title-row { margin-bottom: 10px; }
    #transfer-specials .bt-card-row {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(276px, 84vw);
        grid-template-columns: none;
        gap: 8px;
        width: calc(100% + 8px);
        margin-right: -8px;
        padding-right: 18px;
        padding-bottom: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    #transfer-specials .bt-card-row::-webkit-scrollbar { display: none; }
    #transfer-specials .bt-card-row:after { content: ""; width: 10px; flex-shrink: 0; }
    #transfer-specials .bt-outrights-card {
        min-width: 0;
        min-height: 214px;
        scroll-snap-align: start;
        padding: 12px 14px;
    }
    #transfer-specials .bt-outrights-card h3 { min-height: 40px; font-size: 15px; line-height: 1.22; }
    #transfer-specials .bt-outrights-card p { min-height: 34px; font-size: 13px; }
}

/* ===================================================================
   21. MOBILE BREAKPOINT (max-width: 767px) — phone primary
   =================================================================== */
@media (max-width: 767px) {
    body.sports-shell { background: #1f1f1f; font-size: 14px; }

    /* top bar compact — v043: prevent overflow at 360px */
    .bt-top {
        grid-template-columns: minmax(0, 1fr) auto;
        height: 48px;
        padding: 0 6px;
        gap: 4px;
        background: linear-gradient(180deg, #294e3f, #1e3d31);
        min-width: 0;
    }
    .bt-logo {
        font-size: 16px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        min-width: 0;
    }
    .bt-top-tabs { display: none; }
    .bt-top-actions {
        gap: 4px;
        min-width: 0;
        flex-shrink: 0;
    }
    .bt-top-actions a {
        min-height: 28px;
        padding: 0 6px;
        border-radius: 14px;
        font-size: 10px;
    }
    .bt-top-actions a.search-action { display: none; }

    /* sidebar hidden, content full-width */
    .bt-app { display: block; }
    .bt-rail { display: none; }
    .bt-content {
        max-width: 560px;
        margin: 0 auto;
        padding: 10px 8px 82px;
    }

    /* search bar */
    .bt-search {
        height: 58px;
        margin: 0 4px 22px;
        padding: 0 28px;
        background: #3b4742;
        border-radius: 30px;
        color: #fff;
        font-size: 17px;
    }

    /* sections tighter */
    .bt-block, .bt-odds-block, .bt-builder, .bt-casino { margin-bottom: 28px; }
    .bt-title-row, .bt-title-row.compact { min-height: 38px; margin-bottom: 10px; }
    .bt-title-row h1, .bt-title-row h2, .bt-casino h1 { gap: 8px; font-size: 23px; line-height: 1.08; }
    .bt-section-icon { width: 22px; height: 22px; }
    .bt-title-row a {
        min-height: 30px;
        padding: 0 12px;
        border-radius: 16px;
        font-size: 13px;
    }

    /* horizontal card rows */
    .bt-card-row {
        grid-auto-flow: column;
        grid-auto-columns: minmax(278px, 86vw);
        gap: 8px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bt-card-row::-webkit-scrollbar,
    .bt-casino-cats::-webkit-scrollbar,
    .bt-casino-grid::-webkit-scrollbar { display: none; }

    .bt-boost, .bt-market-card {
        min-height: 146px;
        padding: 12px;
        background: #333;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
    }
    .bt-boost h3, .bt-market-card h3 { margin-bottom: 6px; font-size: 17px; letter-spacing: .1px; max-height: 2.4em; }
    .bt-boost b { font-size: 14px; }
    .bt-boost p, .bt-market-card p { margin: 5px 0; color: #d2d2d2; font-size: 13px; }
    .bt-boost strong, .bt-market-card strong { min-height: 43px; margin: 8px 0 0; border-radius: 5px; font-size: 24px; }
    .bt-boost-line { margin-top: auto; padding-top: 6px; }
    .bt-boost > small { font-size: 11px; }

    /* odds tables — 360px floor: 328px grid ÷ (54×3=162) → 166px team */
    .bt-odds-block h2 { margin: 0 0 7px; font-size: 13px; }
    .bt-odds-head, .bt-match-row { grid-template-columns: minmax(130px, 1fr) 54px 54px 54px; }
    .bt-odds-head { min-height: 38px; padding: 0 8px; background: #464646; font-size: 12px; }
    .bt-match-row { min-height: 110px; padding: 8px 8px; background: #313131; }
    .bt-team-cell b { min-height: 24px; font-size: 13px; }
    .bt-team-cell small { margin-top: 4px; font-size: 11px; }
    .bt-team-cell em { padding: 1px 5px; border-radius: 2px; font-size: 11px; }
    .bt-match-row button, .bt-player button { color: #fff200; font-size: 13px; }

    /* In-Play mobile */
    .bt-inplay-event .bt-odds-head { min-height: 32px; padding: 0 8px; font-size: 11px; }
    .bt-inplay-event .bt-match-row { min-height: 100px; padding: 6px 8px; }
    .bt-inplay-event .bt-team-cell b { font-size: 12px; }

    /* Live page mobile */
    .bt-live-heading h1 { font-size: 20px; }
    .bt-live-sports { gap: 2px; }
    .bt-live-sports button { min-height: 30px; padding: 0 10px; font-size: 12px; }
    .bt-live-sports button img { width: 16px; height: 16px; }
    .bt-live-market-head { grid-template-columns: minmax(120px, 1fr) 50px 50px 50px; padding: 0 8px; font-size: 11px; }
    .bt-live-row { grid-template-columns: minmax(120px, 1fr) 150px; }
    .bt-live-odds { grid-template-columns: 50px 50px 50px; }
    .bt-live-odds button { font-size: 12px; }
    .bt-live-team b { font-size: 12px; }
    .bt-live-team em { font-size: 12px; }
    .bt-live-teams { padding: 6px 8px; }
    .bt-live-teams small { font-size: 11px; }
    .bt-live-market-head h2 { font-size: 12px; }

    /* Tickets mobile */
    .bt-tickets-page-content { min-height: calc(100vh - 112px); }
    .bt-tickets-heading h1 { font-size: 20px; }

    /* Auth mobile */
    .bt-auth-page-content { min-height: calc(100vh - 112px); }
    .bt-auth-panel { padding: 14px; }
    .bt-auth-heading h1 { font-size: 20px; }
    .bt-auth-grid { grid-template-columns: 1fr; }
    .bt-email-code-row { grid-template-columns: minmax(0, 1fr) 108px; }
    .bt-auth-view { max-width: 100%; }
    .bt-ticket-tabs a { min-height: 30px; padding: 0 12px; font-size: 12px; }
    .bt-ticket-card { padding: 10px; }
    .bt-ticket-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bt-ticket-summary dd { font-size: 13px; }

    /* builder */
    .bt-builder-card {
        padding-top: 12px;
        background: #323232;
        border-radius: 6px;
        overflow-x: auto;
    }
    .bt-versus { min-height: 78px; gap: 9px; font-size: 15px; }
    .bt-versus small { margin-top: 7px; font-size: 12px; }
    .bt-builder-card nav { gap: 16px; min-height: 42px; padding: 0 12px; }
    .bt-player-head, .bt-player {
        grid-template-columns: minmax(180px, 1fr) 105px 124px 124px;
        min-width: 533px;
    }
    .bt-player-head { min-height: 36px; padding: 0 12px; font-size: 12px; }
    .bt-player { min-height: 54px; padding: 0 12px; }
    .bt-player > div { gap: 7px; }
    .bt-player i { width: 30px; height: 30px; font-size: 12px; }
    .bt-player b { font-size: 14px; }
    .bt-player small { margin-top: 3px; font-size: 11px; }

    /* casino on sports page */
    .bt-casino { padding-top: 2px; }
    body:not(.bt-casino-page) .bt-casino-lobby { margin-top: 2px; }
    body:not(.bt-casino-page) .bt-casino-lobby .bt-casino-row-head:first-of-type h2 { font-size: 24px; }
    .bt-casino-row-head { min-height: 38px; margin: 18px 0 9px; }
    .bt-casino-row-head h2 { font-size: 24px; }
    .bt-casino-row-head a { min-height: 30px; padding: 0 12px; border-radius: 17px; font-size: 13px; }

    .bt-casino-grid, .bt-casino-grid.hot, .bt-casino-grid.all-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .bt-casino-grid a { min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #2e2e2e; border-radius: 6px; }
    .bt-casino-grid img { height: 100%; object-fit: cover; }
    .bt-casino-grid span { padding: 48px 9px 9px; font-size: 17px; text-shadow: 0 2px 3px rgba(0,0,0,.75); }
    .bt-casino-grid em { width: 30px; height: 30px; font-size: 14px; background: rgba(34,86,58,.9); }

    /* casino page overrides */
    .bt-casino-page .bt-content { max-width: 560px; padding-top: 0; padding-right: 8px; padding-left: 8px; }

    /* casino page: game grids — 4 columns at 390px, 3 columns at 360px */
    .bt-casino-page .bt-casino-grid,
    .bt-casino-page .bt-casino-grid.hot,
    .bt-casino-page .bt-casino-grid.all-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .bt-casino-page .bt-casino-grid a { aspect-ratio: 1 / 1; min-height: 0; }
    .bt-casino-page .bt-casino-grid span { font-size: 12px; padding: 36px 6px 6px; }
    .bt-casino-page .bt-casino-grid em { width: 22px; height: 22px; font-size: 11px; right: 6px; bottom: 6px; }

    /* casino page: feature — thumbs below main, not overlapping */
    .bt-casino-page .bt-casino-feature { margin: 12px 0 20px; }
    .bt-casino-page .bt-feature-main {
        display: block;
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .bt-casino-page .bt-feature-main span { bottom: 58px; left: 14px; font-size: 12px; }
    .bt-casino-page .bt-feature-main b { bottom: 16px; left: 14px; max-width: 52%; font-size: 22px; }
    .bt-casino-page .bt-feature-main em { right: 12px; bottom: 16px; min-width: 100px; padding: 10px 14px; font-size: 14px; }
    .bt-casino-page .bt-feature-thumbs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 0;
        padding: 0;
        overflow: visible;
    }
    .bt-casino-page .bt-feature-thumbs a {
        aspect-ratio: 1 / 1;
        border: 2px solid transparent;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,.3);
    }
    .bt-casino-page .bt-feature-thumbs a:last-child { border-color: #7ff3ae; }
    .bt-casino-page .bt-feature-thumbs span { font-size: 11px; padding: 24px 5px 5px; }

    /* casino page: title */
    .bt-casino-page .bt-casino-title { margin-top: 10px; }
    .bt-casino-page .bt-casino-title h1 { font-size: 24px; }

    /* app banner & casino head on casino page */
    .bt-app-banner { min-height: 70px; margin: -10px -8px 0; border-bottom: 1px solid #333; }
    .bt-casino-head { min-height: 66px; margin: 0 -8px; }
    .bt-casino-head h1 { font-size: 31px; }
    .bt-casino-search { height: 58px; margin: 12px 4px 24px; background: #415149; }
    .bt-casino-cats { gap: 14px; margin: 0 0 12px; padding: 0 4px 4px; white-space: nowrap; scrollbar-width: none; }
    .bt-casino-cats a { min-width: 56px; gap: 6px; font-size: 11px; }
    .bt-casino-cats i { width: 36px; height: 36px; padding: 7px; border-radius: 8px; }

    /* bet slip mobile */
    .bt-slip {
        right: 10px; bottom: 74px; left: 10px;
        width: auto;
        padding: 16px;
        background: #303030;
        border-color: #4d4d4d;
        border-radius: 8px 8px 0 0;
    }
    .bt-slip-submit { min-height: 44px; border-radius: 4px; font-size: 15px; }

    /* game rows */
    .bt-game-row { grid-auto-columns: 156px; }
    .bt-game-row a { height: 156px; }
    .bt-game-row span { font-size: 20px; }

    /* footer */
    .bt-footer {
        display: block;
        grid-column: 1;
        margin-top: 34px;
        margin-bottom: 0;
        padding: 34px 18px 90px;
    }
    .bt-partner-mark {
        min-height: 118px;
        transform: scale(.82);
        transform-origin: center top;
    }
    .bt-trust-row { flex-wrap: wrap; gap: 12px 20px; min-height: 92px; }
    .bt-footer-logo { font-size: 32px; }
    .bt-footer p { margin: 14px 0; font-size: 13px; line-height: 1.5; }
    .bt-footer-bottom { margin-top: 34px; font-size: 14px; }
    .bt-footer-bottom a { font-size: 22px; }

    /* language switch — compressed for 360px */
    .bt-lang-btn {
        min-height: 28px;
        padding: 0 5px;
        font-size: 10px;
        max-width: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bt-lang-arrow { font-size: 8px; }
    .bt-lang-list {
        right: 0;
        left: auto;
        min-width: 140px;
        max-width: calc(100vw - 12px);
    }
    .bt-lang-list a { font-size: 13px; padding: 7px 12px; }

    /* bottom nav bar container */
    .bt-bottom {
        position: fixed;
        right: 0; bottom: 0; left: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        max-width: 560px;
        height: 66px;
        margin: 0 auto;
        background: #232323;
        border-top: 1px solid #3a3a3a;
    }
    .bt-bottom a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #fff;
        font-size: 12px;
        line-height: 1;
    }
    .bt-bottom a.active { color: #76f4af; }
    .bt-bottom a.casino-tab { color: #fff; }
    .bt-bottom a.casino-tab.active { color: #76f4af; }

    /* mobile bottom nav — SVG icon authority (protected icons) */
    .bt-bottom a, .bt-bottom a.casino-tab {
        position: relative !important;
        display: flex !important;
        min-width: 0 !important;
        height: 64px !important;
        padding: 36px 2px 5px !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }
    .bt-bottom a.active, .bt-bottom a.casino-tab.active { color: #76f4af !important; }
    .bt-bottom a.casino-tab { color: #fff !important; }
    .bt-bottom a.casino-tab.active { color: #76f4af !important; }

    .bt-bottom a:before, .bt-bottom a:first-child:before, .bt-bottom a.casino-tab:before {
        content: "" !important;
        position: absolute !important;
        top: 5px !important;
        left: 50% !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        box-shadow: none !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
    }

    .bt-bottom a[data-nav="home"]:before { background-image: url("/theme/Design/img/icons/nav-home.svg") !important; }
    .bt-bottom a[data-nav="sports"]:before { background-image: url("/theme/Design/img/icons/nav-search.svg") !important; }
    .bt-bottom a[data-nav="inplay"]:before { width: 34px !important; background-image: url("/theme/Design/img/icons/nav-inplay.svg") !important; }
    .bt-bottom a[data-nav="bets"]:before { background-image: url("/theme/Design/img/icons/nav-bets.svg") !important; }
    .bt-bottom a[data-nav="casino"]:before { background-image: url("/theme/Design/img/icons/nav-casino.svg") !important; }

    .bt-bottom a[data-nav="home"].active:before { background-image: url("/theme/Design/img/icons/nav-home-active.svg") !important; }
    .bt-bottom a[data-nav="sports"].active:before { background-image: url("/theme/Design/img/icons/nav-search-active.svg") !important; }
    .bt-bottom a[data-nav="inplay"].active:before { background-image: url("/theme/Design/img/icons/nav-inplay-active.svg") !important; }
    .bt-bottom a[data-nav="bets"].active:before { background-image: url("/theme/Design/img/icons/nav-bets-active.svg") !important; }
    .bt-bottom a[data-nav="casino"].active:before { background-image: url("/theme/Design/img/icons/nav-casino-active.svg") !important; }
}

/* ===================================================================
   22. DESKTOP CASINO COLUMNS (≥981px)
   =================================================================== */
@media (min-width: 981px) {
    body:not(.bt-casino-page) .bt-casino-grid.hot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body:not(.bt-casino-page) .bt-casino-grid:not(.hot) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* V084: the sports homepage (body.bt-betslip-page) overrides this via
       the later section 25.1f rules; every other page keeps the
       original fixed 8-column behaviour */
    body:not(.bt-casino-page) .bt-casino-grid.all-games { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ===================================================================
   23. PC SPORTS WORKSPACE UPGRADE — three stable ranges:
   <=767px:  phone layout untouched (sections 19-21, rail hidden).
   768-1279: compact two columns (220px rail + content, floating slip).
   >=1280:   three columns (rail + content + persistent bet-slip column).
   =================================================================== */

/* PC-only elements must never render below desktop */
.bt-sports-cats { display: none; }
.bt-slip-col { display: none; }

/* ===================================================================
   768-1279: compact two-column rail. This block closes the 768-980 gap
   where the legacy base rules (.bt-rail span chip, 60px rows, oversized
   images) used to leak through. >=1280 switches to three columns below.
   =================================================================== */
@media (min-width: 768px) {

    /* --- 23.1 PC header compact (70px) + matching sticky offsets --- */
    .bt-top {
        height: 70px;
        grid-template-columns: 220px minmax(0, 1fr) auto;
    }
    .bt-logo { font-size: 26px; letter-spacing: 0; white-space: nowrap; }
    .bt-app { min-height: calc(100vh - 70px); }

    /* --- 23.2 two-column grid (768-1279): rail + content, floating slip --- */
    body.bt-betslip-page .bt-app {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    body.bt-betslip-page .bt-content {
        padding: 24px 28px 80px;
    }

    /* --- 23.3 left rail: compact icon navigation ---
       Explicitly overrides the legacy base rules so 768-980 never falls
       back to the white-circle chip / oversized icon look. */
    .bt-rail {
        padding: 18px 10px;
        top: 70px;
        height: calc(100vh - 70px);
    }
    .bt-rail h2 {
        margin: 0 10px 8px;
        color: #72efb2;
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .bt-rail h2:not(:first-child) { margin-top: 22px; }
    .bt-rail a {
        min-height: 38px;
        max-height: 40px;
        padding: 0 10px;
        gap: 10px;
        border-left: 3px solid transparent;
        border-radius: 4px;
        font-size: 15px;
    }
    .bt-rail a:hover { color: #fff; background: rgba(255,255,255,.05); }
    .bt-rail a.selected {
        color: #7af3b1;
        background: rgba(122,243,177,.12);
        border-left-color: #7af3b1;
    }
    /* every rail image stays 18-20px, including generic/unknown sport marks */
    .bt-rail a img,
    .bt-rail-icon {
        flex: 0 0 auto;
        width: 20px; height: 20px;
        object-fit: contain;
        opacity: .92;
    }
    /* rail text labels: undo the legacy chip look of .bt-rail span */
    .bt-rail a > span {
        flex: 1 1 auto;
        width: auto; height: auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        background: transparent;
        border-radius: 0;
        font-size: inherit;
        font-weight: inherit;
    }

    /* --- 23.10 data-driven rail: sports list, counts, error state --- */
    .bt-rail-sports { display: flex; flex-direction: column; gap: 1px; }
    .bt-rail-count {
        flex: 0 0 auto;
        margin-left: auto;
        min-width: 20px;
        color: #9b9b9b;
        font-size: 12px;
        font-weight: 700;
        text-align: right;
    }
    .bt-rail a:hover .bt-rail-count { color: #c9c9c9; }
    .bt-rail a.selected .bt-rail-count { color: #7af3b1; }
    /* 0,2,0 beats the legacy .bt-rail span chip rule (0,1,1) */
    .bt-rail .bt-rail-error {
        display: block;
        flex: none;
        align-items: normal;
        justify-content: normal;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 2px 10px 6px;
        padding: 0;
        color: #9b9b9b;
        background: transparent;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        white-space: normal;
    }

    /* --- 23.4a compressed header for the narrow two-column range (768-899) ---
       All Sports / In-Play / Casino stay visible at 768: the brand and the
       secondary account actions shrink first, never the main navigation. */
    @media (max-width: 899px) {
        .bt-top { grid-template-columns: 140px minmax(0, 1fr) auto; }
        .bt-logo { font-size: 17px; }
        .bt-top-tabs { gap: 10px; }
        .bt-top-tabs a { font-size: 11px; }
        .bt-top-actions { gap: 4px; }
        .bt-top-actions a { padding: 0 8px; font-size: 10px; }
        .bt-lang-btn { min-height: 26px; padding: 0 6px; font-size: 10px; }
    }

    /* --- 23.4b All Sports / In-Play / Casino stay on one line at 900-980 --- */
    @media (min-width: 900px) and (max-width: 1279px) {
        .bt-top-tabs { gap: 18px; font-size: 12px; }
        .bt-top-actions a { padding: 0 10px; min-height: 28px; font-size: 11px; }
    }

    /* --- 23.4c content density for the narrow two-column range (768-980) --- */
    @media (max-width: 980px) {
        body.bt-betslip-page .bt-card-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        body.bt-betslip-page .bt-builder-card { overflow-x: auto; }
        body.bt-betslip-page .bt-player-head,
        body.bt-betslip-page .bt-player {
            grid-template-columns: minmax(170px, 1fr) 96px 118px 118px;
            min-width: 520px;
        }
    }

    /* --- 23.8 sport filter mode (rail is clickable from 768px up).
       The league tabs stay visible so the user can switch leagues or
       restore the trending view; only promotional/feature blocks hide. --- */
    body.bt-betslip-page.bt-filtering .bt-block,
    body.bt-betslip-page.bt-filtering .bt-builder,
    body.bt-betslip-page.bt-filtering .bt-casino,
    body.bt-betslip-page.bt-filtering .bt-promo,
    body.bt-betslip-page.bt-filtering .bt-featured,
    body.bt-betslip-page.bt-filtering .bt-odds-block:not([data-sports-acca]):not([data-sports-inplay]) {
        display: none;
    }
    .bt-filter-empty {
        display: none;
        margin: 0 0 24px;
        padding: 34px 20px;
        color: #9b9b9b;
        background: #2d2d2d;
        border: 1px dashed rgba(255,255,255,.12);
        border-radius: 6px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
    }
    body.bt-filtering .bt-filter-empty.show { display: block; }

    /* --- 23.3b compact rail directory (>=768px, independent of the 981px
           three-column workspace; the 981px layout itself is unchanged)
           V073 density: 27-30px rows, 15px icons, 12px/500 items,
           11px/600 group heads, 10px/400 counts --- */
    .bt-rail { padding: 10px 6px; }
    .bt-rail h2 {
        margin: 0 8px 4px;
        color: #63c58b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .bt-rail h2:not(:first-child) { margin-top: 12px; }
    .bt-rail-group { display: flex; flex-direction: column; gap: 1px; }
    .bt-rail a {
        /* V078: strict three-column row — 18px icon slot, left-aligned
           name, right-aligned count; every name starts at the same edge */
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 27px;
        max-height: 30px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
    }
    .bt-rail a:hover { background: rgba(255,255,255,.06); }
    .bt-rail a.selected {
        color: #7af3b1;
        background: transparent;
        border-left-color: #7af3b1;
    }
    .bt-rail a > span:not(.bt-rail-icon-slot) {
        font-size: 12px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        justify-self: start;
        text-align: left;
    }
    .bt-rail a .bt-rail-count {
        justify-self: end;
        text-align: right;
    }
    .bt-rail a img,
    .bt-rail-icon { width: 17px; height: 17px; }
    /* fixed 18px icon slot keeps columns stable; the icon renders 15px
       inside it (V075). No brightness/invert/greyscale filters on
       coloured icons — only the lucide path gets re-tinted below.
       The higher specificity also fends off the legacy `.bt-rail span`
       white-circle chip rule. */
    .bt-rail .bt-rail-icon-slot {
        flex: 0 0 18px;
        width: 18px; height: 18px;
        min-width: 18px; max-width: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        background: transparent;
        border-radius: 0;
        font-size: inherit;
        font-weight: inherit;
    }
    /* V077: 17px render inside the fixed 18px slot puts every glyph's
       longest edge at 14-17px with consistent visual weight. Project-level
       nudge classes re-centre glyphs whose content is drawn off-centre
       (official SVGs untouched). */
    .bt-rail .bt-rail-icon-slot img { width: 17px; height: 17px; }
    .bt-rail .bt-rail-icon-slot.nudge-up-2 img { transform: translateY(-2px); }
    .bt-rail .bt-rail-icon-slot.nudge-up-1 img { transform: translateY(-1px); }
    /* V082: per-icon visual-size calibration (scale only; translations
       are sub-pixel and handled by the centred slot). Factors are pixel
       measurements of the alpha bounds against the zClass 17px
       reference (_pc_layout_check product-calibration.json). Official
       SVGs are untouched. */
    .bt-rail .bt-rail-icon-slot.cal-1049 img { transform: scale(1.049); }
    .bt-rail .bt-rail-icon-slot.cal-1067 img { transform: scale(1.067); }
    .bt-rail .bt-rail-icon-slot.cal-1085 img { transform: scale(1.085); }
    .bt-rail .bt-rail-icon-slot.cal-1103 img { transform: scale(1.103); }
    .bt-rail .bt-rail-icon-slot.cal-1123 img { transform: scale(1.123); }
    .bt-rail .bt-rail-icon-slot.cal-1185 img { transform: scale(1.185); }
    .bt-rail .bt-rail-icon-slot.cal-1231 img { transform: scale(1.231); }
    /* Lucide command icons and the sports-line candidates stroke in
       near-black; re-tint them light grey-white so they stay readable on
       the dark rail. Coloured reference-sports (zClass) marks keep their
       colours — these selectors only match the lucide/sports-line paths. */
    .bt-rail img.bt-rail-icon[src*="/img/icons/lucide/"],
    .bt-rail img.bt-rail-icon[src*="/img/icons/sports-line/"] {
        filter: brightness(0) invert(1);
        opacity: .82;
    }
    .bt-rail a:hover img.bt-rail-icon[src*="/img/icons/lucide/"],
    .bt-rail a.selected img.bt-rail-icon[src*="/img/icons/lucide/"],
    .bt-rail a:hover img.bt-rail-icon[src*="/img/icons/sports-line/"],
    .bt-rail a.selected img.bt-rail-icon[src*="/img/icons/sports-line/"] {
        opacity: 1;
    }
    .bt-rail-count { font-size: 10px; font-weight: 400; color: #8f8f8f; }
    .bt-rail-count.zero { color: #565656; }
    .bt-rail a.selected .bt-rail-count { color: #7af3b1; }
    /* scoped above the legacy .bt-rail span chip rule (0,1,1) */
    .bt-rail .bt-rail-empty,
    .bt-rail .bt-rail-error {
        display: block;
        position: static;
        flex: none;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 2px 8px 6px;
        padding: 4px 6px;
        color: #6f6f6f;
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        white-space: normal;
        text-align: left;
    }
}

@media (min-width: 981px) {

    /* --- 23.5 odds rows: density + button states --- */
    .bt-odds-head { font-size: 12px; }
    .bt-team-cell { gap: 9px; padding-right: 12px; }
    .bt-team-cell b { font-size: 16px; }
    .bt-match-row button {
        margin: 0 5px;
        border-radius: 4px;
    }
    .bt-match-row button:hover { background: #4d4d4d; }
    .bt-match-row button.selected,
    .bt-match-row button.selected:hover {
        color: #0e2b1f;
        background: #7af3b1;
    }
    .bt-match-row button:disabled {
        color: #5c5c5c;
        background: transparent;
        cursor: not-allowed;
        transform: none;
    }
    /* builder: keep headers/odds legible inside the narrower column */
    .bt-player-head,
    .bt-player {
        grid-template-columns: minmax(220px, 1fr) 110px 110px 110px;
    }

    /* --- 23.6 two-column density (981-1279): floating slip, roomy odds --- */
    @media (max-width: 1279px) {
        body.bt-betslip-page .bt-odds-head,
        body.bt-betslip-page .bt-match-row {
            grid-template-columns: minmax(220px, 1fr) 72px 72px 72px;
        }
        body.bt-betslip-page .bt-card-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        body.bt-betslip-page .bt-casino-feature {
            grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
        }
        body.bt-betslip-page .bt-player-head,
        body.bt-betslip-page .bt-player {
            grid-template-columns: minmax(240px, 1fr) 110px 110px 110px;
        }
        body.bt-betslip-page .bt-live-market-head {
            grid-template-columns: minmax(200px, 1fr) 72px 72px 72px;
        }
        body.bt-betslip-page .bt-live-row {
            grid-template-columns: minmax(200px, 1fr) 216px;
        }
        body.bt-betslip-page .bt-live-odds { grid-template-columns: 72px 72px 72px; }
    }
    /* roomier two-column range: three-up card rows */
    @media (min-width: 1200px) and (max-width: 1279px) {
        body.bt-betslip-page .bt-card-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* --- 23.7 wide desktop (>=1280): two columns — rail 240 + content.
       The persistent slip column was removed (V068 revision): the bet slip
       floats as an overlay at every PC width, nothing reserves a third
       column in the main grid. --- */
    @media (min-width: 1280px) {
        .bt-top { grid-template-columns: 240px minmax(0, 1fr) auto; }
        body.bt-betslip-page .bt-app {
            grid-template-columns: 240px minmax(0, 1fr);
        }
        body.bt-betslip-page .bt-content { max-width: min(1180px, 100%); margin: 0 auto; }
        body.bt-betslip-page .bt-card-row {
            grid-template-columns: repeat(3, minmax(280px, 1fr));
        }
        body.bt-betslip-page .bt-odds-head,
        body.bt-betslip-page .bt-match-row {
            grid-template-columns: minmax(240px, 1fr) 80px 80px 80px;
        }
        body.bt-betslip-page .bt-player-head,
        body.bt-betslip-page .bt-player {
            grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(110px, 1fr));
        }
    }

    /* --- 23.9 very wide desktop (>=1600): three-up card rows --- */
    @media (min-width: 1600px) {
        body.bt-betslip-page .bt-card-row {
            grid-template-columns: repeat(3, minmax(280px, 1fr));
        }
    }
}

/* ===================================================================
   24. TEST-ODDS MARKER (all breakpoints — data-level honesty)
   Simulated odds generated by the sports sync pipeline carry a visible
   TEST badge so they can never be mistaken for provider prices.
   =================================================================== */
.bt-test-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 4px;
    color: #0e2b1f;
    background: #ffd87b;
    border-radius: 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.4;
    vertical-align: 1px;
}

/* DEMO marker for the in-memory demo fallback (V069): short, untranslated
   on purpose so it can never break the layout in any language */
.bt-demo-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 4px;
    color: #1a1400;
    background: #ffd87b;
    border-radius: 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.4;
    vertical-align: 1px;
}

/* ===================================================================
   25. PC SPORTS REFERENCE-STRUCTURE UPGRADE
   Seven-row right workspace: header / search / quick sports nav /
   promo carousel / league tabs / featured events / league odds table.
   Mobile blocks (19-21) stay untouched; new PC-only elements are
   hidden by default and shown only inside desktop media queries.
   =================================================================== */

/* PC-only elements must never render below desktop */
.bt-promo,
.bt-league-tabs,
.bt-featured { display: none; }

/* brand: the desktop "XBT Sports" span is hidden by default; the mobile
   span (translatable V068 brand) shows until >=768 swaps them. Both spans
   inherit the logo colour (the legacy `.bt-logo span {color:#fff}` rule
   must not repaint the brand text). */
.bt-logo .bt-logo-desktop { display: none; }
.bt-logo .bt-logo-desktop,
.bt-logo .bt-logo-mobile { color: inherit; }

/* casino title icons: the desktop dices icon is hidden by default so the
   phone layout keeps the V071 mobile icon unchanged */
.bt-casino-title-icon-desktop { display: none; }

/* neutral initials crest is desktop-only; the phone keeps the V077
   shirt placeholder pixel-for-pixel */
.bt-crest-fallback { display: none; }

/* search input: PC-only (>=768px). Below desktop the original static
   "Search" label renders exactly as in V067 (pixel freeze). */
.bt-search-input {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
}
.bt-search-input::placeholder { color: #a8a8a8; }
.bt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (min-width: 768px) {

    /* --- 25.1 header 50px (V073 density: 48-52) + matching offsets --- */
    body.bt-betslip-page .bt-top { height: 50px; }
    body.bt-betslip-page .bt-app { min-height: calc(100vh - 50px); }
    body.bt-betslip-page .bt-rail {
        top: 50px;
        height: calc(100vh - 50px);
        background: #191919;
    }
    body.bt-betslip-page .bt-content { padding-top: 12px; }

    /* --- 25.1a desktop row order via flex order. The DOM keeps the frozen
       phone order; on desktop the seven rows are arranged as:
       search / cats / promo / tabs / featured / empty / table / rest.
       Flex keeps every block in normal flow — siblings can never stack on
       top of each other the way a shared grid-area allowed. --- */
    body.bt-betslip-page .bt-content {
        display: flex;
        flex-direction: column;
    }
    body.bt-betslip-page .bt-content .bt-search { order: 0; }
    body.bt-betslip-page .bt-content .bt-sports-cats { order: 1; }
    body.bt-betslip-page .bt-content .bt-promo { order: 2; }
    body.bt-betslip-page .bt-content .bt-league-tabs { order: 3; }
    body.bt-betslip-page .bt-content .bt-featured { order: 4; }
    body.bt-betslip-page .bt-content .bt-filter-empty { order: 5; }
    body.bt-betslip-page .bt-content .bt-odds-block[data-sports-acca] { order: 6; }
    body.bt-betslip-page .bt-content > :not(.bt-search):not(.bt-sports-cats):not(.bt-promo):not(.bt-league-tabs):not(.bt-featured):not(.bt-filter-empty):not(.bt-odds-block[data-sports-acca]) { order: 7; }

    /* --- 25.1b the reference workspace replaces every legacy sports-home
           block on PC (>=768px only; the phone layout keeps V067/V068 as
           is). One explicit class instead of fragile per-id rules. --- */
    body.bt-betslip-page .bt-legacy-sports-home { display: none; }

    /* --- 25.1c brand: desktop shows the fixed short "XBT Sports",
           phone keeps the translatable V068 brand (the desktop span's
           base display:none lives outside this media query) --- */
    body.bt-betslip-page .bt-logo .bt-logo-desktop { display: inline; }
    body.bt-betslip-page .bt-logo .bt-logo-mobile { display: none; }

    /* --- 25.1d casino games section stays on the PC sports home (V071):
           normal flow after the odds table, before the footer --- */
    body.bt-betslip-page .bt-pc-games-section { display: block; }

    /* --- 25.1f All Local Games cards (V084): adaptive columns with a
           sensible minimum card width, stable 3:2 ratio matching the
           450x300 covers, two-line titles that wrap long words, and
           reserved space so the info button never covers the text.
           Scoped to the sports-home all-games grid only — the hot
           (featured) grid, Latest Games, the standalone casino page
           and mobile keep their existing rules. --- */
    body.bt-betslip-page .bt-casino-grid.all-games {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    body.bt-betslip-page .bt-casino-grid.all-games a {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }
    body.bt-betslip-page .bt-casino-grid.all-games img {
        height: 100%;
    }
    body.bt-betslip-page .bt-casino-grid.all-games span {
        padding: 30px 48px 8px 10px;
        font-size: 13px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    /* --- 25.1e casino title icon (V072): desktop swaps the legacy
           nav-casino.svg (renders as broken boxes on PC) for the lucide
           dices.svg, 18px, tinted light grey-white --- */
    body.bt-betslip-page .bt-casino-title .bt-casino-title-icon-mobile { display: none; }
    body.bt-betslip-page .bt-casino-title .bt-casino-title-icon-desktop {
        display: inline-block;
        width: 18px; height: 18px;
        filter: brightness(0) invert(1);
    }

    /* --- 25.2 header refinements (V073: brand 20px, tabs 12px/600,
           actions 11px, one line at 1024+) --- */
    body.bt-betslip-page .bt-logo { font-size: 20px; }
    body.bt-betslip-page .bt-top-tabs { gap: 30px; }
    body.bt-betslip-page .bt-top-tabs a {
        font-size: 12px;
        font-weight: 600;
    }
    body.bt-betslip-page .bt-top-actions { gap: 8px; }
    body.bt-betslip-page .bt-top-actions a {
        min-height: 28px;
        padding: 0 12px;
        font-size: 11px;
        border-radius: 14px;
    }
    body.bt-betslip-page .bt-top-actions a.search-action {
        width: 28px;
        min-height: 28px;
    }
    body.bt-betslip-page .bt-top-actions a.search-action:before {
        left: 5px; top: 5px;
        width: 12px; height: 12px;
    }
    body.bt-betslip-page .bt-top-actions a.search-action:after {
        left: 17px; top: 18px;
        width: 8px; height: 2px;
    }
    body.bt-betslip-page .bt-lang-btn { min-height: 28px; font-size: 12px; }

    /* --- 25.2z narrow header (768-899): brand and secondary actions
           compress; the three main tabs never hide or wrap --- */
    @media (max-width: 899px) {
        body.bt-betslip-page .bt-top { grid-template-columns: 140px minmax(0, 1fr) auto; }
        body.bt-betslip-page .bt-logo { font-size: 17px; }
        body.bt-betslip-page .bt-top-tabs { gap: 10px; }
        body.bt-betslip-page .bt-top-tabs a { font-size: 11px; }
        body.bt-betslip-page .bt-top-actions { gap: 4px; }
        body.bt-betslip-page .bt-top-actions a { min-height: 26px; padding: 0 8px; font-size: 10px; border-radius: 13px; }
        body.bt-betslip-page .bt-top-actions a.search-action { width: 26px; min-height: 26px; }
        body.bt-betslip-page .bt-top-actions a.search-action:before { left: 5px; top: 5px; width: 11px; height: 11px; }
        body.bt-betslip-page .bt-top-actions a.search-action:after { left: 16px; top: 17px; width: 7px; height: 2px; }
        body.bt-betslip-page .bt-lang-btn { min-height: 26px; padding: 0 6px; font-size: 10px; }
    }

    /* --- 25.2a search row (V073: 32px bar, 12px/400 input) --- */
    body.bt-betslip-page .bt-search {
        height: 32px;
        margin-bottom: 8px;
        padding: 0 12px;
        gap: 10px;
        background: #343434;
        border-radius: 16px;
    }
    body.bt-betslip-page .bt-search i { width: 14px; height: 14px; }
    body.bt-betslip-page .bt-search i:after {
        width: 7px; height: 2px;
        margin: 10px 0 0 10px;
    }
    body.bt-betslip-page .bt-search-input { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; }
    body.bt-betslip-page .bt-search-label { display: none; }

    /* --- 25.2b row 1: compact horizontal sports quick nav (V073):
           small square cells like the reference strip, 42-48px tall --- */
    body.bt-betslip-page .bt-sports-cats {
        display: flex;
        gap: 6px;
        margin: 0 0 8px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.bt-betslip-page .bt-sports-cats::-webkit-scrollbar { display: none; }
    body.bt-betslip-page .bt-sports-cats a {
        flex: 0 0 auto;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        min-width: 54px;
        padding: 4px 8px;
        color: #c9c9c9;
        background: #2d2d2d;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }
    body.bt-betslip-page .bt-sports-cats a:hover { color: #fff; background: #383838; }
    body.bt-betslip-page .bt-sports-cats a.active {
        color: #7af3b1;
        background: rgba(122,243,177,.14);
        border-color: #7af3b1;
    }
    body.bt-betslip-page .bt-sports-cats img {
        width: 14px; height: 14px;
        object-fit: contain;
    }
    /* quick-nav shares the same nudge compensation as the rail directory */
    body.bt-betslip-page .bt-sports-cats img.nudge-up-2 { transform: translateY(-2px); }
    body.bt-betslip-page .bt-sports-cats img.nudge-up-1 { transform: translateY(-1px); }
    /* V082: same visual-size calibration as the rail directory */
    body.bt-betslip-page .bt-sports-cats img.cal-1049 { transform: scale(1.049); }
    body.bt-betslip-page .bt-sports-cats img.cal-1067 { transform: scale(1.067); }
    body.bt-betslip-page .bt-sports-cats img.cal-1085 { transform: scale(1.085); }
    body.bt-betslip-page .bt-sports-cats img.cal-1103 { transform: scale(1.103); }
    body.bt-betslip-page .bt-sports-cats img.cal-1123 { transform: scale(1.123); }
    body.bt-betslip-page .bt-sports-cats img.cal-1185 { transform: scale(1.185); }
    body.bt-betslip-page .bt-sports-cats img.cal-1231 { transform: scale(1.231); }
    body.bt-betslip-page .bt-sports-cats a.active img { filter: none; }
    /* V083: quick-nav command icons (lucide/sports-line paths) get the
       same light-grey re-tint as the rail directory; coloured sport
       icons keep their colours — the selectors match command paths only */
    body.bt-betslip-page .bt-sports-cats img[src*="/img/icons/lucide/"],
    body.bt-betslip-page .bt-sports-cats img[src*="/img/icons/sports-line/"] {
        filter: brightness(0) invert(1);
        opacity: .82;
    }
    body.bt-betslip-page .bt-sports-cats a:hover img[src*="/img/icons/lucide/"],
    body.bt-betslip-page .bt-sports-cats a.active img[src*="/img/icons/lucide/"],
    body.bt-betslip-page .bt-sports-cats a:hover img[src*="/img/icons/sports-line/"],
    body.bt-betslip-page .bt-sports-cats a.active img[src*="/img/icons/sports-line/"] {
        opacity: 1;
    }
    /* real event count badge — hidden for zero-count entries */
    body.bt-betslip-page .bt-sports-cats a .bt-cats-count {
        font-style: normal;
        font-size: 9px;
        font-weight: 400;
        line-height: 1;
        color: #7af3b1;
    }

    /* --- 25.2c new rows become visible (768-1279: two columns) --- */
    body.bt-betslip-page .bt-promo { display: block; }
    body.bt-betslip-page .bt-league-tabs { display: flex; }
    body.bt-betslip-page .bt-featured { display: block; }

    /* --- 25.4 row 2: promo carousel (V073: 112px panels, 3 full cards on
           wide desktops, 16px/600 title, 11px/400 copy, 11px CTA) --- */
    body.bt-betslip-page .bt-promo {
        position: relative;
        margin: 0 0 8px;
    }
    body.bt-betslip-page .bt-promo-viewport { overflow: hidden; }
    body.bt-betslip-page .bt-promo-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }
    body.bt-betslip-page .bt-promo-track::-webkit-scrollbar { display: none; }
    body.bt-betslip-page .bt-promo-panel {
        position: relative;
        /* below 1024px: two and a bit panels; the peek stays under the
           panel padding so text never slides under the side arrows */
        flex: 0 0 40%;
        min-height: 112px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 12px 16px 24px;
        overflow: hidden;
        scroll-snap-align: start;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 8px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.3);
    }
    @media (min-width: 1024px) {
        /* wide desktop: 3 full panels + a 16px peek of the next (the
           sliver is narrower than the panel padding, so peek text never
           appears under the next arrow) */
        body.bt-betslip-page .bt-promo-panel { flex-basis: calc((100% - 24px - 16px) / 3); }
    }
    body.bt-betslip-page .bt-promo-panel b {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .03em;
        white-space: nowrap;
    }
    body.bt-betslip-page .bt-promo-panel span {
        max-width: 85%;
        color: rgba(255,255,255,.85);
        font-size: 11px;
        font-weight: 400;
        line-height: 1.3;
    }
    body.bt-betslip-page .bt-promo-panel .bt-promo-cta {
        position: absolute;
        right: 12px; bottom: 10px;
        padding: 5px 12px;
        color: #0e2b1f;
        background: #7af3b1;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 900;
    }
    body.bt-betslip-page .bt-promo-panel:nth-child(1) { background: linear-gradient(120deg, #163832, #2f5248 60%, #36524e); }
    body.bt-betslip-page .bt-promo-panel:nth-child(2) { background: linear-gradient(120deg, #12332b, #1f5742 55%, #2a4844); }
    body.bt-betslip-page .bt-promo-panel:nth-child(3) { background: linear-gradient(120deg, #3a2f1c, #4d3f26 55%, #5d4c2c); }
    body.bt-betslip-page .bt-promo-panel:nth-child(4) { background: linear-gradient(120deg, #142c40, #1d4057 55%, #264d63); }
    /* arrows sit entirely outside the panel area (in the content gutters),
       so they can never cover panel titles, copy or CTAs */
    body.bt-betslip-page .bt-promo-arrow {
        position: absolute;
        top: 50%;
        width: 30px; height: 30px;
        margin-top: -15px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(15,15,15,.78);
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 50%;
        font-size: 17px;
        line-height: 1;
        opacity: .9;
    }
    body.bt-betslip-page .bt-promo-arrow:hover { background: rgba(30,30,30,.92); }
    /* -28px keeps the 30px arrows inside the content's 28px side padding,
       so they neither touch panel copy nor overflow the document */
    body.bt-betslip-page .bt-promo-arrow.prev { left: -28px; }
    body.bt-betslip-page .bt-promo-arrow.next { right: -28px; }
    body.bt-betslip-page .bt-promo-dots {
        position: absolute;
        right: 0; bottom: 6px; left: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        pointer-events: none;
    }
    body.bt-betslip-page .bt-promo-dots i {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,.35);
    }
    body.bt-betslip-page .bt-promo-dots i.active { background: #7af3b1; }

    /* --- 25.4a row 3: league/category tabs — horizontal, current tab
           white with green underline, clicking really filters events --- */
    body.bt-betslip-page .bt-league-tabs {
        gap: 4px;
        margin: 0 0 10px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid #3a3a3a;
    }
    body.bt-betslip-page .bt-league-tabs::-webkit-scrollbar { display: none; }
    body.bt-betslip-page .bt-league-tabs a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 12px;
        color: #9b9b9b;
        border-bottom: 2px solid transparent;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }
    body.bt-betslip-page .bt-league-tabs a:hover { color: #d9d9d9; }
    body.bt-betslip-page .bt-league-tabs a.active {
        color: #fff;
        border-bottom-color: #7af3b1;
    }
    body.bt-betslip-page .bt-league-tabs a em {
        font-style: normal;
        color: #6f6f6f;
        font-size: 9px;
        font-weight: 400;
    }
    body.bt-betslip-page .bt-league-tabs a.active em { color: #7af3b1; }

    /* --- 25.5 row 4: featured event cards — exactly one row of 4:
           4 fixed columns at >=1280, a single horizontally scrolling row
           below 1280. Compact, small radius, odds buttons carry the
           four-state + slip selection logic. --- */
    body.bt-betslip-page .bt-featured { margin: 0 0 10px; }
    body.bt-betslip-page .bt-featured .bt-title-row { margin-bottom: 6px; }
    body.bt-betslip-page .bt-featured .bt-title-row h2 { font-size: 13px; font-weight: 500; }
    body.bt-betslip-page .bt-featured-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }
    @media (max-width: 1279px) {
        body.bt-betslip-page .bt-featured-grid {
            grid-auto-flow: column;
            grid-auto-columns: 210px;
            grid-template-columns: none;
            overflow-x: auto;
            scrollbar-width: none;
        }
        body.bt-betslip-page .bt-featured-grid::-webkit-scrollbar { display: none; }
    }
    body.bt-betslip-page .bt-featured-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        padding: 8px 10px 8px;
        background: #333;
        border: 1px solid rgba(255,255,255,.035);
        border-radius: 6px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }
    body.bt-betslip-page .bt-featured-card header {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    body.bt-betslip-page .bt-featured-sport {
        width: 15px; height: 15px;
        object-fit: contain;
        flex-shrink: 0;
    }
    body.bt-betslip-page .bt-featured-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }
    body.bt-betslip-page .bt-featured-meta b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #aaa;
        font-size: 10px;
        font-weight: 400;
    }
    body.bt-betslip-page .bt-featured-meta em {
        flex: 0 0 auto;
        font-style: normal;
        color: #ccc;
        font-size: 10px;
        font-weight: 400;
        white-space: nowrap;
    }
    body.bt-betslip-page .bt-featured-meta em.bt-featured-live {
        padding: 1px 6px;
        color: #0e2b1f;
        background: #7af3b1;
        border-radius: 3px;
        font-weight: 900;
    }
    body.bt-betslip-page .bt-featured-card h3 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
    }
    body.bt-betslip-page .bt-featured-card h3 span {
        padding: 0 4px;
        color: #7a7a7a;
        font-weight: 500;
    }
    body.bt-betslip-page .bt-featured-odds {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    body.bt-betslip-page .bt-featured-odds button {
        min-height: 28px;
        padding: 0 2px;
        color: #fff200;
        background: #2a2a2a;
        border: 0;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        transition: background .14s ease, color .14s ease;
    }
    /* the card meta already carries the DEMO badge — the in-button badge
       would squeeze the 14px odds inside narrow cards, so it hides here */
    body.bt-betslip-page .bt-featured-odds .bt-demo-badge { display: none; }
    body.bt-betslip-page .bt-featured-odds button:hover { color: #fff600; background: #4d4d4d; }
    body.bt-betslip-page .bt-featured-odds button.selected,
    body.bt-betslip-page .bt-featured-odds button.selected:hover {
        color: #0e2b1f;
        background: #7af3b1;
    }
    body.bt-betslip-page .bt-featured-odds button:disabled {
        color: #5c5c5c;
        background: #2a2a2a;
        cursor: not-allowed;
    }
    body.bt-betslip-page .bt-featured-odds .bt-odds-na { min-height: 28px; }
    body.bt-betslip-page .bt-featured-empty {
        padding: 26px 20px;
        color: #9b9b9b;
        background: #2d2d2d;
        border: 1px dashed rgba(255,255,255,.12);
        border-radius: 6px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
    }

    /* --- 25.6 row 5: high-density league-grouped odds table (V073:
           head 26px / 11px-600, market labels 10px, teams 12px-500,
           time 10px, odds 12px-600, rows 42-48px tall) --- */
    body.bt-betslip-page .bt-odds-block[data-sports-acca] h2 { display: none; }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-odds-head {
        min-height: 26px;
        background: #3c3c3c;
        font-size: 10px;
        font-weight: 500;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-odds-head b {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
    }
    body.bt-betslip-page .bt-league-sport-icon {
        width: 14px; height: 14px;
        object-fit: contain;
        flex-shrink: 0;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-match-row {
        /* V076: comfortable 58-60px rows (59px content + 1px separator
           border) — 18px team line-height, 4px breathing gaps, >=4px
           above the separator; fonts stay at V075 sizes */
        min-height: 59px;
        background: #333;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell {
        gap: 4px;
        padding: 2px 12px 3px 0;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell b {
        /* V078: fixed 16px crest slot + left-aligned name — every team
           name starts at the same edge; the secondary time line indents
           to the same edge below */
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        font-weight: 500;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell .bt-crest-slot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px; height: 16px;
        overflow: visible;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-crest-img {
        width: 16px; height: 16px;
        object-fit: contain;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell b img.bt-country-flag,
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell b img.bt-team-icon {
        width: 14px; height: 14px;
        flex-shrink: 0;
    }
    /* desktop swaps the shirt placeholder for the neutral initials crest */
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-crest-slot .shirt { display: none; }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-crest-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px; height: 16px;
        color: #b9b9b9;
        background: #4a4a4a;
        border-radius: 3px;
        font-size: 8px;
        font-weight: 600;
        line-height: 1;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell small {
        display: flex;
        align-items: center;
        height: 10px;
        line-height: 10px;
        font-size: 10px;
        font-weight: 400;
        padding-left: 24px; /* secondary info aligns under the team names */
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell small .bt-demo-badge {
        line-height: 1;
    }
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-match-row button {
        /* V074: odds value on top, TEST/DEMO badge on its own line below —
           the two can never overlap, at any PC width, and the 46px row
           keeps the V073 density unchanged */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 34px;
        padding: 2px 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: normal;
    }
    /* compact in-button DEMO badge keeps 12px odds + badge on one line
       inside the 60-80px odds columns */
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-match-row button .bt-demo-badge {
        margin-left: 3px;
        padding: 1px 3px;
        font-size: 8px;
        font-weight: 600;
    }
    /* in-row demo badge next to the time (row-level marker) */
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-team-cell small .bt-demo-badge {
        margin-left: 4px;
        padding: 1px 3px;
        font-size: 8px;
        font-weight: 600;
    }

    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-match-row button .bt-test-badge,
    body.bt-betslip-page .bt-odds-block[data-sports-acca] .bt-match-row button .bt-demo-badge {
        margin-left: 0;
    }
    body.bt-betslip-page .bt-table-empty {
        margin: 0 0 24px;
        padding: 34px 20px;
        color: #9b9b9b;
        background: #2d2d2d;
        border: 1px dashed rgba(255,255,255,.12);
        border-radius: 6px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
    }
}

@media (min-width: 1280px) {
    /* two-column workspace: grid widths live in section 23.7 */
}