@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root {
    --bg:#090b14;
    --panel:#151827;
    --panel2:#202641;
    --silver:#c5cbd4;
    --silver2:#287bff;
    --text:#f5f6ff;
    --muted:#aab2ca;
    --line:#303955;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}
body {
    margin:0;
    background:radial-gradient(ellipse at 15% 0,#32152c 0,transparent 34%),radial-gradient(ellipse at 90% 0,#102b54 0,transparent 38%),#090b14;
    color:var(--text);
    font:13px 'DM Sans',sans-serif;
}
.ambient {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.12;
    background:repeating-linear-gradient(120deg,transparent 0 70px,#e5bd2820 71px 72px);
    z-index:-1;
}
a {
    color:inherit;
    text-decoration:none;
}
.wrap {
    width:min(1400px,calc(100% - 36px));
    margin:auto;
}
.silver {
    color:var(--silver);
}
.top {
    height:82px;
    display:flex;
    align-items:center;
    gap:30px;
    border-bottom:1px solid #a18a2730;
}
.brand {
    display:flex;
    align-items:center;
    gap:8px;
    font:800 17px Manrope,sans-serif;
    white-space:nowrap;
}
.logo {
    width:33px;
    height:33px;
    border:2px solid var(--silver);
    color:var(--silver);
    border-radius:50% 50% 50% 8px;
    display:grid;
    place-items:center;
    font-size:18px;
    transform:rotate(-10deg);
}
.mainnav {
    display:flex;
    gap:clamp(12px,2.3vw,32px);
    margin:auto;
    font-size:10px;
    font-weight:800;
    color:#ded6bd;
}
.mainnav a {
    padding:31px 0;
    border-bottom:2px solid transparent;
}
.mainnav a:hover,.mainnav .active {
    border-color:var(--silver);
    color:var(--silver);
}
.account {
    display:flex;
    gap:10px;
}
.btn {
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 17px;
    border-radius:8px;
    font-weight:800;
    font-size:11px;
    transition:.2s;
    white-space:nowrap;
}
.btn:hover {
    filter:brightness(1.1);
    transform:translateY(-1px);
}
.btn-yellow {
    background:linear-gradient(#d9dee7,#aeb8c7);
    color:#191505;
    box-shadow:0 3px 16px #ffdc2430;
}
.btn-dark {
    background:#373017;
    border:1px solid #8a7423;
    color:#e3e8ef;
}
.hamb {
    display:none;
}
.layout {
    display:grid;
    grid-template-columns:175px minmax(0,1fr) 190px;
    gap:14px;
    padding-top:18px;
    align-items:start;
}
.panel {
    background:linear-gradient(145deg,#171d28,#101722);
    border:1px solid #35445a;
    border-radius:11px;
    box-shadow:0 8px 24px #0003;
}
.left {
    padding:14px 12px;
}
.left h3,.side-box h3 {
    font-size:10px;
    text-align:center;
    color:#ffe67c;
    margin:2px 0 13px;
    letter-spacing:.5px;
}
.highlight {
    display:flex;
    align-items:center;
    gap:8px;
    background:#18180f;
    border:1px solid #554819;
    border-radius:6px;
    padding:7px;
    margin-bottom:7px;
    font-size:10px;
}
.thumb {
    width:40px;
    height:29px;
    border-radius:4px;
    background:linear-gradient(135deg,#26382a,#6d5420);
    display:grid;
    place-items:center;
    font-size:18px;
}
.left-title {
    margin-top:20px!important;
}
.sport-list {
    display:grid;
    gap:4px;
}
.sport-list a {
    background:#30270d;
    border-radius:5px;
    padding:8px 9px;
    font-size:10px;
    color:#c6bb91;
}
.sport-list a:hover,.sport-list .chosen {
    background:var(--silver);
    color:#1d1805;
    font-weight:800;
}
.center {
    min-width:0;
}
.hero {
    height:222px;
    border:1px solid #715c1c;
    border-radius:11px;
    overflow:hidden;
    display:flex;
    position:relative;
    background:radial-gradient(ellipse at 78% 45%,#92751c 0,transparent 35%),linear-gradient(100deg,#050604 0,#14150d 55%,#514014 100%);
}
.hero-text {
    padding:26px 24px;
    max-width:58%;
    position:relative;
    z-index:1;
}
.kicker {
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--silver);
    font-weight:800;
}
.hero h1 {
    font:800 clamp(22px,2.3vw,34px)/1.08 Manrope,sans-serif;
    letter-spacing:-1px;
    margin:12px 0;
}
.hero p {
    font-size:11px;
    line-height:1.6;
    color:#d3cbb3;
    max-width:390px;
    margin:0 0 14px;
}
.hero .btn {
    min-height:30px;
    font-size:10px;
}
.hero-graphic {
    position:absolute;
    right:0;
    top:0;
    width:47%;
    height:100%;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:radial-gradient(circle,#f6ce3b27,transparent 60%);
}
.ball {
    font-size:95px;
    filter:drop-shadow(0 10px 14px #0009);
    z-index:1;
    transform:rotate(-18deg);
}
.orbit {
    position:absolute;
    border:2px solid #f8d53d90;
    border-radius:50%;
    width:200px;
    height:70px;
    transform:rotate(-28deg);
    box-shadow:0 0 20px #e6b51c30;
}
.orbit2 {
    transform:rotate(35deg);
    width:230px;
    height:90px;
    border-color:#f5cf3455;
}
.glow {
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:#ffdd3230;
    filter:blur(20px);
}
.graphic-label {
    position:absolute;
    right:15px;
    bottom:12px;
    font-size:9px;
    letter-spacing:2px;
    color:#ffe98c;
    font-weight:800;
    text-align:right;
}
.tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    background:#242112;
    padding:5px;
    border:1px solid #6e5919;
    border-radius:9px;
    margin:12px 0;
}
.tab {
    display:grid;
    place-items:center;
    min-height:34px;
    background:#38331d;
    border:1px solid #695a25;
    border-radius:6px;
    font-weight:800;
    font-size:11px;
    color:#ddd3ae;
}
.tab:hover,.tab.selected {
    background:var(--silver);
    color:#1a1605;
}
.match-feature {
    padding:16px 18px;
    background:linear-gradient(120deg,#554418,#292513 70%,#3c3214);
    border:1px solid #786224;
    border-radius:10px;
    position:relative;
    margin-bottom:13px;
}
.live-badge {
    position:absolute;
    right:0;
    top:0;
    background:#d71631;
    padding:5px 10px;
    font-size:9px;
    font-weight:800;
    border-radius:0 8px 0 7px;
}
.live-badge i {
    display:inline-block;
    width:6px;
    height:6px;
    background:white;
    border-radius:50%;
    margin-right:5px;
}
.match-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.match-head small {
    font-size:8px;
    color:#ffe16b;
    letter-spacing:1px;
}
.match-head h2,.market-title h2 {
    font:800 17px Manrope,sans-serif;
    margin:5px 0;
}
.match-head p {
    font-size:10px;
    color:#d1c6a1;
    margin:0;
}
.league {
    font-size:11px;
    color:#ffe56e;
    border:1px solid #8c7427;
    border-radius:20px;
    padding:7px 10px;
}
.score {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(14px,5vw,65px);
    padding:13px 0 10px;
}
.team {
    display:flex;
    align-items:center;
    gap:9px;
    flex-direction:column;
    font-size:10px;
}
.teamcrest {
    font-size:31px;
    filter:drop-shadow(0 3px 5px #0008);
}
.score-mid {
    text-align:center;
}
.score-mid strong {
    font:800 25px Manrope;
    color:#fff6d6;
}
.score-mid small {
    display:block;
    color:#bdb18a;
    font-size:9px;
}
.match-actions {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.match-actions .btn {
    min-height:30px;
    font-size:9px;
}
.markets {
    padding:14px;
    margin-bottom:14px;
}
.market-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:13px;
}
.market-title h2 {
    font-size:16px;
}
.small {
    min-height:30px;
    font-size:9px;
    padding:0 10px;
}
.league-tabs {
    display:flex;
    gap:5px;
    overflow:auto;
    padding-bottom:10px;
}
.league-tabs a {
    flex:none;
    background:#443716;
    border:1px solid #70591a;
    padding:7px 9px;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
}
.league-tabs a:hover,.league-tabs .league-active {
    background:var(--silver);
    color:#1c1704;
}
.match-row {
    display:grid;
    grid-template-columns:65px minmax(65px,1fr) 25px minmax(65px,1fr) 48px 55px 40px;
    gap:5px;
    align-items:center;
    padding:10px 3px;
    border-top:1px solid #66531b;
    font-size:9px;
}
.match-time {
    color:#f4d853;
    font-weight:800;
    font-size:8px;
}
.match-time small {
    color:#b8ac83;
    font-weight:400;
}
.club {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.versus {
    color:#b9ad83;
    text-align:center;
    font-size:8px;
}
.odds {
    background:#4a3b19;
    border:1px solid #746025;
    border-radius:4px;
    padding:7px 3px;
    text-align:center;
    font-size:8px;
}
.odds:hover {
    background:var(--silver);
    color:#171300;
}
.right {
    display:grid;
    gap:13px;
}
.slip {
    padding:12px;
}
.side-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}
.side-tabs b {
    font-size:9px;
    text-align:center;
    background:#443715;
    padding:9px 3px;
    border-radius:4px;
    color:#ffe37a;
}
.empty {
    text-align:center;
    padding:23px 7px;
    color:#a89b70;
    font-size:21px;
}
.empty b {
    display:block;
    font-size:10px;
    color:#e8dba7;
    margin-top:8px;
}
.empty p {
    font-size:9px;
    line-height:1.5;
    margin:6px 0 0;
}
.full {
    width:100%;
    min-height:32px;
    font-size:9px;
}
.side-box {
    padding:13px;
}
.side-box h3 {
    text-align:left;
}
.side-box>a:not(.btn) {
    display:block;
    padding:10px 2px;
    border-bottom:1px solid #55471c;
    font-size:9px;
    color:#d6c99f;
}
.side-box>a span {
    float:right;
    color:var(--silver);
}
.side-box .btn {
    margin-top:13px;
}
.responsible p {
    font-size:10px;
    color:#bcb08b;
    line-height:1.6;
}
.responsible>a {
    color:var(--silver)!important;
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:20px;
}
.quick-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:13px;
    background:linear-gradient(140deg,#332a11,#191910);
    border:1px solid #69551c;
    border-radius:8px;
    min-width:0;
}
.quick-card>span {
    font-size:22px;
    color:var(--silver);
    margin-bottom:9px;
}
.quick-card b {
    font-size:9px;
    letter-spacing:.3px;
}
.quick-card small {
    font-size:9px;
    color:#bdb28d;
    margin:5px 0 12px;
}
.quick-card strong {
    font-size:8px;
    color:var(--silver);
}
.quick-card:hover {
    border-color:var(--silver);
    transform:translateY(-2px);
}
.lower {
    padding:45px 0;
}
.lower-head {
    text-align:center;
    margin-bottom:20px;
}
.lower-head h2 {
    font:800 25px Manrope;
    margin:8px 0;
}
.lower-head p {
    font-size:11px;
    color:var(--muted);
}
.button-cloud {
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
}
.button-cloud a {
    border:1px solid #79601d;
    background:#2d260f;
    border-radius:6px;
    padding:10px 15px;
    font-size:10px;
    font-weight:700;
}
.button-cloud a:hover {
    background:var(--silver);
    color:#171300;
}
.help {
    max-width:850px;
    padding-top:10px;
    padding-bottom:55px;
}
.help details {
    border-bottom:1px solid #5c4b1d;
    padding:15px 5px;
}
.help summary {
    cursor:pointer;
    font-size:12px;
    font-weight:700;
}
.help details p {
    font-size:11px;
    color:var(--muted);
}
footer {
    border-top:1px solid #6a551c;
    background:#0b0c08;
}
.foot {
    display:flex;
    align-items:center;
    gap:20px;
    padding-top:24px;
    padding-bottom:20px;
    flex-wrap:wrap;
}
.foot p {
    color:var(--muted);
    font-size:10px;
    margin-right:auto;
}
.foot>div {
    display:flex;
    gap:14px;
    font-size:10px;
    color:#d0c49c;
}
.copyright {
    padding:13px 0 20px;
    border-top:1px solid #ffffff0b;
    font-size:9px;
    color:#8f876f;
}
@media(min-width:1200px) {
    .hero {
        height:245px;
    }
    .layout {
        grid-template-columns:190px minmax(0,1fr) 205px;
        gap:17px;
    }
    .hero-text {
        padding:30px;
    }
    .match-feature {
        padding:19px 22px;
    }
    .markets {
        padding:17px;
    }
}
@media(max-width:900px) {
    .layout {
        grid-template-columns:145px minmax(0,1fr);
    }
    .right {
        grid-column:1/-1;
        grid-template-columns:repeat(3,1fr);
    }
    .slip {
        display:none;
    }
    .hero {
        height:205px;
    }
    .hero-text {
        max-width:65%;
        padding:20px;
    }
    .quick-grid {
        grid-template-columns:repeat(4,1fr);
    }
    .match-row {
        grid-template-columns:48px minmax(60px,1fr) 20px minmax(60px,1fr) 44px 44px;
    }
    .match-row .odds:last-child {
        display:none;
    }
}
@media(max-width:620px) {
    .wrap {
        width:calc(100% - 20px);
    }
    .top {
        height:65px;
        gap:10px;
    }
    .brand {
        font-size:14px;
    }
    .logo {
        width:29px;
        height:29px;
    }
    .hamb {
        display:block;
        margin-left:auto;
        background:#2b260f;
        border:1px solid #786221;
        color:var(--silver);
        border-radius:6px;
        padding:7px 10px;
    }
    .mainnav {
        display:none;
        position:absolute;
        top:59px;
        left:10px;
        right:10px;
        z-index:9;
        background:#17170e;
        border:1px solid #77601b;
        border-radius:8px;
        padding:10px;
        flex-direction:column;
        gap:0;
    }
    .mainnav.open {
        display:flex;
    }
    .mainnav a {
        padding:12px;
        border-bottom:1px solid #ffffff0c;
    }
    .mainnav a:last-child {
        border:0;
    }
    .account {
        gap:5px;
    }
    .account .btn {
        padding:0 9px;
        min-height:32px;
        font-size:9px;
    }
    .layout {
        grid-template-columns:minmax(0,1fr);
        gap:10px;
        padding-top:10px;
    }
    .left {
        order:2;
        padding:11px;
    }
    .left h3 {
        margin-bottom:8px;
    }
    .left>a.highlight {
        display:inline-flex;
        width:calc(50% - 5px);
        vertical-align:top;
        margin-right:3px;
    }
    .left .sport-list {
        grid-template-columns:repeat(3,1fr);
    }
    .left-title {
        margin-top:14px!important;
    }
    .center {
        order:1;
    }
    .right {
        order:3;
        grid-template-columns:1fr;
    }
    .slip {
        display:block;
    }
    .side-box {
        display:none;
    }
    .hero {
        height:auto;
        min-height:230px;
    }
    .hero-text {
        padding:21px 16px;
        max-width:75%;
        z-index:2;
    }
    .hero h1 {
        font-size:clamp(22px,6vw,31px);
    }
    .hero p {
        font-size:10px;
        max-width:260px;
    }
    .hero-graphic {
        width:43%;
        opacity:.7;
    }
    .ball {
        font-size:64px;
    }
    .orbit {
        width:130px;
        height:52px;
    }
    .graphic-label {
        font-size:7px;
    }
    .tabs {
        margin:9px 0;
    }
    .tab {
        min-height:33px;
        font-size:10px;
    }
    .match-feature {
        padding:14px 12px;
    }
    .match-head h2 {
        font-size:14px;
    }
    .match-head p {
        font-size:9px;
        max-width:230px;
    }
    .league {
        font-size:9px;
        padding:6px;
    }
    .score {
        gap:clamp(15px,8vw,45px);
    }
    .teamcrest {
        font-size:26px;
    }
    .score-mid strong {
        font-size:22px;
    }
    .markets {
        padding:10px;
    }
    .market-title h2 {
        font-size:14px;
    }
    .league-tabs a {
        padding:7px;
        font-size:8px;
    }
    .match-row {
        grid-template-columns:42px minmax(0,1fr) 18px minmax(0,1fr) 44px;
        gap:4px;
        padding:9px 0;
    }
    .match-row .odds:nth-last-child(-n+2) {
        display:none;
    }
    .club {
        font-size:8px;
    }
    .odds {
        font-size:8px;
    }
    .quick-grid {
        grid-template-columns:repeat(2,1fr);
        gap:7px;
    }
    .quick-card {
        padding:12px;
    }
    .right {
        grid-column:auto;
    }
    .lower {
        padding:30px 0;
    }
    .lower-head h2 {
        font-size:22px;
    }
    .foot {
        gap:12px;
    }
    .foot p {
        width:100%;
        margin:0;
    }
    .foot>div {
        flex-wrap:wrap;
    }
    .copyright {
        padding-bottom:15px;
    }
}
@media(max-width:360px) {
    .account .btn-dark {
        display:none;
    }
    .hero-text {
        max-width:82%;
    }
    .hero-graphic {
        width:38%;
    }
    .hero .btn {
        font-size:9px;
        padding:0 10px;
    }
    .match-row {
        grid-template-columns:35px minmax(0,1fr) 16px minmax(0,1fr) 39px;
    }
    .club {
        font-size:7px;
    }
    .odds {
        padding:6px 1px;
    }
}
.live-widget {
    overflow:hidden;
    margin-bottom:14px;
    padding:12px;
}
.widget-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:4px 4px 12px;
}
.widget-heading h2 {
    font:800 17px Manrope,sans-serif;
    margin:5px 0;
}
.widget-heading p {
    font-size:10px;
    color:#bcb49b;
    margin:0;
}
.live-widget iframe {
    background:#fff;
    border-radius:6px;
}
@media(max-width:620px) {
    .live-widget {
        padding:8px;
    }
    .widget-heading h2 {
        font-size:14px;
    }
    .widget-heading p {
        font-size:9px;
    }
    .live-widget iframe {
        height:560px!important;
        min-height:420px!important;
    }
}
.live-widget iframe {
    height:650px!important;
    min-height:420px!important;
}
@media(max-width:620px) {
    .live-widget iframe {
        height:560px!important;
        min-height:420px!important;
    }
}
@media(min-width:901px) {
    body {
        height:100vh;
        overflow:hidden;
    }
    .top {
        position:sticky;
        top:0;
        z-index:50;
        background:rgba(16,16,9,.88);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }
    .layout-shell {
        height:calc(100vh - 100px);
        display:grid;
        grid-template-columns:190px minmax(0,1fr) 205px;
        gap:17px;
        padding-top:18px;
        padding-bottom:8px;
        align-items:stretch;
    }
    .fixed-left,.fixed-right {
        min-height:0;
        overflow-y:auto;
        scrollbar-width:thin;
        scrollbar-color:#80691d #19180e;
    }
    .fixed-left::-webkit-scrollbar,.fixed-right::-webkit-scrollbar,.center-scroll::-webkit-scrollbar {
        width:7px;
    }
    .fixed-left::-webkit-scrollbar-thumb,.fixed-right::-webkit-scrollbar-thumb,.center-scroll::-webkit-scrollbar-thumb {
        background:linear-gradient(#ffe74b,#96751b);
        border-radius:10px;
        border:2px solid #19180e;
    }
    .fixed-left::-webkit-scrollbar-track,.fixed-right::-webkit-scrollbar-track,.center-scroll::-webkit-scrollbar-track {
        background:#19180e;
        border-radius:10px;
    }
    .left {
        height:auto;
    }
    .center-scroll {
        height:100%;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        padding:0 2px 32px 0;
        scrollbar-width:thin;
        scrollbar-color:#80691d #19180e;
        overscroll-behavior:contain;
    }
    .center {
        min-width:0;
    }
    .fixed-right .right {
        display:grid;
        grid-template-columns:1fr;
    }
    .scroll-cue {
        position:fixed;
        z-index:60;
        left:50%;
        bottom:15px;
        transform:translateX(-50%);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1px;
        padding:7px 14px 6px;
        border:1px solid #ffdc2440;
        border-radius:20px;
        background:rgba(18,17,10,.45);
        backdrop-filter:blur(9px);
        color:#c5cbd4;
        pointer-events:none;
        animation:cueFloat 1.7s ease-in-out infinite;
    }
    .scroll-cue small {
        font-size:7px;
        letter-spacing:1.4px;
        color:#fff1a4;
        opacity:.85;
        margin-top:2px;
    }
    .cue-chevron {
        width:11px;
        height:11px;
        border-right:2px solid rgba(255,225,65,.9);
        border-bottom:2px solid rgba(255,225,65,.9);
        transform:rotate(45deg);
        animation:cuePulse 1.4s ease-in-out infinite;
    }
    .cue-chevron:nth-child(2) {
        animation-delay:.18s;
        opacity:.55;
        margin-top:-5px;
    }
    @keyframes cueFloat {
        0%,100% {
            margin-bottom:0;
            opacity:.72;
        }
        50% {
            margin-bottom:5px;
            opacity:1;
        }
    }
    @keyframes cuePulse {
        0%,100% {
            opacity:.25;
            transform:translateY(-2px) rotate(45deg);
        }
        50% {
            opacity:1;
            transform:translateY(2px) rotate(45deg);
        }
    }
    .scroll-cue.hide {
        opacity:0;
        transition:opacity .4s;
    }
}
@media(max-width:900px) {
    .layout-shell {
        display:block;
    }
    .fixed-left,.fixed-right {
        overflow:visible;
    }
    .center-scroll {
        overflow:visible;
        height:auto;
    }
    .scroll-cue {
        display:flex;
        position:fixed;
        z-index:60;
        left:50%;
        bottom:10px;
        transform:translateX(-50%);
        flex-direction:column;
        align-items:center;
        gap:1px;
        padding:6px 12px;
        border:1px solid #ffdc2440;
        border-radius:20px;
        background:rgba(18,17,10,.42);
        backdrop-filter:blur(8px);
        pointer-events:none;
        animation:cueFloat 1.7s ease-in-out infinite;
        color:#c5cbd4;
    }
    .scroll-cue small {
        font-size:7px;
        letter-spacing:1px;
        color:#fff1a4;
    }
    .cue-chevron {
        width:10px;
        height:10px;
        border-right:2px solid rgba(255,225,65,.9);
        border-bottom:2px solid rgba(255,225,65,.9);
        transform:rotate(45deg);
        animation:cuePulse 1.4s ease-in-out infinite;
    }
    .cue-chevron:nth-child(2) {
        animation-delay:.18s;
        opacity:.55;
        margin-top:-5px;
    }
    @keyframes cueFloat {
        0%,100% {
            margin-bottom:0;
            opacity:.72;
        }
        50% {
            margin-bottom:5px;
            opacity:1;
        }
    }
    @keyframes cuePulse {
        0%,100% {
            opacity:.25;
            transform:translateY(-2px) rotate(45deg);
        }
        50% {
            opacity:1;
            transform:translateY(2px) rotate(45deg);
        }
    }
}
@media(prefers-reduced-motion:reduce) {
    .scroll-cue,.cue-chevron {
        animation:none!important;
    }
}
@media(min-width:901px) {
    .fixed-left {
        overflow:hidden!important;
    }
    .fixed-left .left {
        height:100%;
        overflow:hidden;
    }
    .fixed-right {
        overflow-y:auto;
        overflow-x:hidden;
    }
    .scroll-cue {
        pointer-events:auto!important;
        text-decoration:none;
        cursor:pointer;
    }
    .quick-grid {
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:10px;
        margin:18px 0 28px;
    }
    .quick-card {
        min-height:148px;
        padding:17px 15px;
        justify-content:flex-start;
    }
    .quick-card>span {
        font-size:26px;
        margin-bottom:12px;
    }
    .quick-card b {
        font-size:10px;
        min-height:25px;
    }
    .quick-card small {
        font-size:10px;
        line-height:1.5;
        min-height:28px;
    }
    .quick-card strong {
        margin-top:auto;
        font-size:9px;
    }
}
@media(min-width:621px) and (max-width:900px) {
    .quick-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .quick-card {
        min-height:135px;
    }
}
@media(max-width:620px) {
    .quick-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .quick-card {
        min-height:130px;
    }
}
.scroll-cue {
    pointer-events:auto!important;
    text-decoration:none;
    cursor:pointer;
}
.scroll-cue:hover {
    border-color:#c5cbd4aa;
    background:rgba(30,27,12,.65);
}
.top {
    width:calc(100% - 28px);
    max-width:1760px;
    height:76px;
    position:relative;
    z-index:100;
    background:rgba(15,15,9,.94);
    backdrop-filter:blur(16px);
    padding:0 8px;
}
.layout-shell.page-shell,.layout-shell:not(.page-shell) {
    width:calc(100% - 28px);
    max-width:1760px;
}
.layout-shell {
    grid-template-columns:clamp(174px,15vw,220px) minmax(0,1fr) clamp(190px,16vw,235px);
    gap:12px;
    height:calc(100dvh - 76px);
    padding-top:12px;
    padding-bottom:12px;
    align-items:stretch;
}
.fixed-left,.fixed-right {
    min-width:0;
    min-height:0;
    overflow:hidden!important;
}
.fixed-left .left,.fixed-left .shared-left {
    height:100%;
    overflow:hidden;
    padding:12px 10px;
}
.shared-left h3 {
    margin:2px 0 9px;
    font-size:10px;
}
.shared-left .highlight {
    padding:6px;
    margin-bottom:5px;
    min-height:36px;
}
.shared-left .thumb {
    width:34px;
    height:27px;
    flex-shrink:0;
}
.shared-left .left-title {
    margin-top:13px!important;
}
.shared-left .sport-list {
    gap:3px;
}
.shared-left .sport-list a {
    padding:7px 8px;
}
.rail-tool {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    padding:9px;
    background:#342a0e;
    border:1px solid #6e5919;
    border-radius:6px;
    color:#ffe36b;
    font-size:10px;
    font-weight:800;
}
.center-scroll {
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 2px 26px 0;
    scrollbar-width:thin;
    scrollbar-color:#c8a526 #17170f;
    overscroll-behavior:contain;
}
.center-scroll::-webkit-scrollbar,.fixed-left::-webkit-scrollbar,.fixed-right::-webkit-scrollbar {
    width:8px;
}
.center-scroll::-webkit-scrollbar-track,.fixed-left::-webkit-scrollbar-track,.fixed-right::-webkit-scrollbar-track {
    background:#17170f;
    border-left:1px solid #3e3414;
}
.center-scroll::-webkit-scrollbar-thumb,.fixed-left::-webkit-scrollbar-thumb,.fixed-right::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg,#ffe64a,#96751b);
    border:2px solid #17170f;
    border-radius:20px;
}
.center {
    min-width:0;
}
.shared-right {
    display:grid;
    gap:12px;
    align-content:start;
    min-width:0;
}
.shared-right .slip {
    padding:12px;
}
.shared-right .side-tabs {
    gap:6px;
}
.shared-right .side-tabs b {
    font-size:9px;
    padding:9px 4px;
}
.shared-right .empty {
    padding:18px 8px;
    font-size:20px;
}
.shared-right .empty b {
    font-size:11px;
}
.shared-right .empty p {
    font-size:9px;
    line-height:1.5;
}
.shared-right .side-box {
    padding:12px;
}
.shared-right .side-box h3 {
    text-align:left;
    margin-bottom:10px;
}
.shared-right .side-box>a:not(.btn) {
    display:flex;
    justify-content:space-between;
    gap:4px;
    padding:9px 0;
    border-bottom:1px solid #59491c;
    font-size:10px;
}
.shared-right .side-box .btn {
    margin-top:10px;
}
.page-center {
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:0;
}
.register-wrap,.layout-shell .page-center {
    width:100%;
    max-width:none;
    margin:0 auto 20px;
}
.register-wrap .crumb,.layout-shell .page-center .crumb {
    padding:8px 2px 12px;
}
.register-hero,.calc-hero {
    padding:clamp(18px,2vw,30px);
}
.form-shell,.calc-layout,.notice {
    width:100%;
}
.embed-frame {
    max-width:100%;
}
.a88-form-skin {
    max-width:100%;
}
.a88-form-viewport {
    max-width:100%;
}
.a88-form-iframe {
    max-width:none;
}
.site-footer {
    margin-top:auto;
    padding:18px 16px 10px;
    border-top:1px solid #6e591d;
    background:linear-gradient(180deg,#1b190eaa,#101009);
    border-radius:10px 10px 0 0;
}
.site-footer .foot {
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.site-footer .foot p {
    margin:0;
    color:#bcb49b;
    font-size:10px;
}
.footer-links {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-left:auto;
}
.footer-links a {
    font-size:10px;
    color:#e8d88b;
}
.footer-links a:hover {
    color:#c5cbd4;
}
.site-footer .copyright {
    padding-top:12px;
    margin-top:12px;
    border-top:1px solid #55471c;
    color:#9e936e;
    font-size:9px;
}
.lower {
    width:100%;
    margin:18px auto 0;
}
.lower-head h2 {
    font-size:20px;
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:16px 0 22px;
}
.quick-card {
    min-height:140px;
}
.scroll-cue {
    pointer-events:auto!important;
}
body {
    height:100dvh;
    overflow:hidden;
}
@media(max-width:1100px) {
    .top {
        gap:14px;
    }
    .mainnav {
        gap:12px;
    }
    .mainnav a {
        font-size:9px;
    }
    .layout-shell {
        grid-template-columns:160px minmax(0,1fr) 180px;
        gap:9px;
    }
    .shared-left .highlight {
        font-size:9px;
    }
    .shared-left .thumb {
        width:29px;
    }
    .shared-right .side-box>a:not(.btn) {
        font-size:9px;
    }
}
@media(max-width:900px) {
    body {
        height:auto;
        min-height:100vh;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .top {
        position:sticky;
        top:0;
        width:100%;
        height:68px;
        padding:0 14px;
        gap:10px;
    }
    .top .brand {
        font-size:15px;
    }
    .top .logo {
        width:30px;
        height:30px;
    }
    .hamb {
        display:block;
        margin-left:auto;
        background:#30270e;
        border:1px solid #75601e;
        color:#ffe36b;
        border-radius:7px;
        padding:7px 10px;
        font-size:17px;
    }
    .mainnav {
        display:none;
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:#15150d;
        border:1px solid #5b4a1b;
        padding:12px;
        flex-direction:column;
        gap:0;
        box-shadow:0 12px 25px #0008;
    }
    .mainnav.open {
        display:flex;
    }
    .mainnav a {
        padding:12px;
        border-bottom:1px solid #332b12;
    }
    .account {
        gap:6px;
    }
    .account .btn {
        min-height:32px;
        padding:0 10px;
        font-size:10px;
    }
    .layout-shell {
        display:grid;
        width:calc(100% - 20px);
        height:auto;
        min-height:0;
        grid-template-columns:1fr;
        gap:12px;
        padding-top:10px;
        padding-bottom:20px;
    }
    .fixed-left,.fixed-right {
        overflow:visible!important;
    }
    .fixed-left .left,.fixed-left .shared-left {
        height:auto;
        overflow:visible;
    }
    .fixed-left .shared-left {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }
    .shared-left h3,.shared-left .left-title {
        grid-column:1/-1;
        text-align:left;
        margin:4px 0!important;
    }
    .shared-left .highlight {
        margin:0;
        min-width:0;
    }
    .shared-left .sport-list {
        grid-column:1/-1;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .shared-left .rail-tool {
        grid-column:1/-1;
    }
    .center-scroll {
        height:auto;
        overflow:visible;
        padding:0;
        overscroll-behavior:auto;
    }
    .shared-right {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .shared-right .responsible {
        grid-column:1/-1;
    }
    .page-center {
        min-height:0;
    }
    .register-wrap,.layout-shell .page-center {
        margin:0 auto 18px;
    }
    .calc-layout {
        grid-template-columns:1fr;
    }
    .result-card {
        position:static;
    }
    .site-footer .foot {
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }
    .footer-links {
        margin-left:0;
    }
    .quick-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .scroll-cue {
        display:none;
    }
}
@media(max-width:520px) {
    .top .account .btn-dark {
        display:none;
    }
    .top .account .btn-yellow {
        font-size:9px;
        padding:0 9px;
    }
    .layout-shell {
        width:calc(100% - 14px);
    }
    .hero {
        height:auto;
        min-height:230px;
    }
    .hero-text {
        padding:22px 16px;
        max-width:72%;
    }
    .hero-graphic {
        width:42%;
        opacity:.85;
    }
    .ball {
        font-size:58px;
    }
    .orbit {
        width:130px;
        height:48px;
    }
    .tabs {
        margin:9px 0;
    }
    .live-widget iframe {
        height:560px!important;
        min-height:420px!important;
    }
    .shared-left .highlight {
        font-size:9px;
    }
    .shared-left .thumb {
        width:28px;
        height:25px;
        font-size:15px;
    }
    .shared-left .sport-list {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .shared-right {
        grid-template-columns:1fr;
    }
    .register-hero h1,.calc-hero h1 {
        font-size:28px;
    }
    .a88-form-skin {
        padding:4px;
    }
    .a88-form-viewport {
        width:100%;
    }
    .leg {
        grid-template-columns:25px minmax(0,1fr) 74px 28px;
    }
    .calc-card-head h2 {
        font-size:14px;
    }
    .result-stats {
        grid-template-columns:1fr 1fr;
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}
@media(min-width:901px) {
    .scroll-cue {
        position:fixed;
        z-index:120;
        left:50%;
        bottom:12px;
        transform:translateX(-50%);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:2px;
        padding:7px 14px;
        background:rgba(18,17,10,.48);
        backdrop-filter:blur(10px);
        border:1px solid #ffdc244d;
        border-radius:22px;
        color:#c5cbd4;
        pointer-events:auto;
        text-decoration:none;
        cursor:pointer;
    }
    .scroll-cue small {
        font-size:7px;
        letter-spacing:1.2px;
    }
    .scroll-cue.hide {
        opacity:0;
        pointer-events:none;
    }
}
.brand-image {
    display:block;
    width:clamp(130px,13vw,190px);
    height:auto;
    max-height:54px;
    object-fit:contain;
    object-position:left center;
}
.site-footer .brand-image {
    width:165px;
    max-height:48px;
}
@media(max-width:900px) {
    .brand-image {
        width:clamp(118px,30vw,165px);
        max-height:44px;
    }
}
@media(max-width:520px) {
    .brand-image {
        width:118px;
        max-height:38px;
    }
}
.banner-slider {
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    min-height:168px;
    max-height:320px;
    margin:0 0 14px;
    overflow:hidden;
    border:1px solid #7d661d;
    border-radius:12px;
    background:#17160d;
    box-shadow:0 12px 32px #0003;
}
.banner-track {
    position:relative;
    width:100%;
    height:100%;
}
.banner-slide {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    padding:clamp(16px,3vw,38px);
    opacity:0;
    visibility:hidden;
    transform:translateX(22px) scale(.99);
    transition:opacity .65s ease,transform .85s cubic-bezier(.2,.75,.25,1),visibility .65s;
    background:radial-gradient(ellipse at 80% 50%,#9d7a1c77,transparent 40%),linear-gradient(115deg,#090a07 0%,#211c0c 55%,#473711 100%);
}
.banner-slide:before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(120deg,transparent 0 60px,#f8d6380b 61px 62px);
}
.banner-slide.is-active {
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
    z-index:1;
}
.banner-slide.slide-two {
    background:radial-gradient(ellipse at 82% 55%,#7d641b88,transparent 43%),linear-gradient(115deg,#10110b,#25200d 55%,#3b3214);
}
.banner-slide.slide-three {
    background:radial-gradient(ellipse at 80% 50%,#8a6c1b88,transparent 42%),linear-gradient(115deg,#080906,#1e1b0d 55%,#4b3710);
}
.banner-copy {
    position:relative;
    z-index:2;
    max-width:65%;
}
.banner-kicker {
    font-size:clamp(7px,.75vw,10px);
    font-weight:900;
    letter-spacing:1.8px;
    color:#c5cbd4;
}
.banner-copy h2 {
    font:800 clamp(20px,3vw,38px)/1.06 Manrope,sans-serif;
    letter-spacing:-.8px;
    margin:10px 0 8px;
    color:#fff9e8;
}
.banner-copy h2 em {
    font-style:normal;
    color:#c5cbd4;
}
.banner-copy p {
    max-width:520px;
    color:#d0c6a3;
    font-size:clamp(9px,1vw,12px);
    line-height:1.65;
    margin:0 0 14px;
}
.banner-cta {
    display:inline-flex;
    align-items:center;
    gap:20px;
    padding:10px 14px;
    border-radius:7px;
    background:linear-gradient(180deg,#ffe94b,#aeb8c7);
    color:#191505;
    font-size:10px;
    font-weight:900;
    box-shadow:0 5px 18px #f2ca1930;
    transition:transform .2s,box-shadow .2s;
}
.banner-cta:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px #f2ca1950;
}
.banner-art {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34%;
    min-width:100px;
    height:100%;
}
.art-ball>span {
    font-size:clamp(62px,8vw,112px);
    filter:drop-shadow(0 14px 14px #0008);
    z-index:2;
    animation:bannerBallFloat 4s ease-in-out infinite;
}
.art-ball i,.art-ball b {
    position:absolute;
    width:90%;
    height:42%;
    border:2px solid #e7c52b99;
    border-radius:50%;
    transform:rotate(-25deg);
}
.art-ball b {
    transform:rotate(35deg);
    width:100%;
    height:52%;
    border-color:#f7d85a66;
}
.art-score {
    gap:7px;
    flex-wrap:wrap;
}
.score-chip {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:#1a190fbb;
    border:1px solid #b39327;
    border-radius:10px;
    padding:13px 18px;
    color:#e9dca4;
    font-size:9px;
}
.score-chip b {
    font:800 clamp(22px,3vw,36px) Manrope;
    color:#c5cbd4;
}
.score-vs {
    font-size:10px;
    color:#d8c56d;
    font-weight:900;
}
.art-calc {
    gap:7px;
    flex-wrap:wrap;
}
.art-calc span,.art-calc strong {
    font:800 clamp(16px,2.3vw,29px) Manrope;
    color:#c5cbd4;
    background:#16160eaa;
    border:1px solid #8e701e;
    border-radius:9px;
    padding:12px 10px;
    box-shadow:0 8px 20px #0003;
}
.art-calc b {
    color:#f7eab0;
    font-size:20px;
}
.banner-index {
    position:absolute;
    z-index:2;
    right:16px;
    bottom:14px;
    color:#e7d477;
    font-size:8px;
    letter-spacing:1.8px;
    font-weight:900;
}
.banner-controls {
    position:absolute;
    z-index:5;
    left:14px;
    bottom:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.banner-arrow {
    width:25px;
    height:25px;
    border-radius:50%;
    border:1px solid #8d711d;
    background:#15150ed9;
    color:#ffe35b;
    font-size:20px;
    line-height:18px;
    cursor:pointer;
}
.banner-dots {
    display:flex;
    gap:5px;
}
.banner-dots button {
    width:6px;
    height:6px;
    border:0;
    border-radius:8px;
    background:#95834a;
    opacity:.7;
    padding:0;
    cursor:pointer;
    transition:width .25s,opacity .25s;
}
.banner-dots button.active {
    width:22px;
    background:#c5cbd4;
    opacity:1;
}
.banner-auto {
    font-size:7px;
    letter-spacing:1.3px;
    color:#c6b36b;
    margin-left:4px;
}
@keyframes bannerBallFloat {
    0%,100% {
        transform:translateY(-4px) rotate(-4deg);
    }
    50% {
        transform:translateY(5px) rotate(4deg);
    }
}
@media(max-width:620px) {
    .banner-slider {
        aspect-ratio:1.65/1;
        min-height:190px;
        max-height:250px;
        margin-bottom:10px;
    }
    .banner-slide {
        padding:17px 13px 40px;
    }
    .banner-copy {
        max-width:72%;
    }
    .banner-copy h2 {
        font-size:clamp(19px,6vw,27px);
        margin:8px 0;
    }
    .banner-copy p {
        font-size:9px;
        line-height:1.45;
        margin-bottom:10px;
    }
    .banner-cta {
        font-size:9px;
        padding:8px 10px;
        gap:10px;
    }
    .banner-art {
        flex-basis:28%;
        min-width:65px;
        transform:scale(.88);
    }
    .art-ball>span {
        font-size:55px;
    }
    .art-ball i,.art-ball b {
        width:130%;
        height:34%;
    }
    .art-score {
        gap:4px;
    }
    .score-chip {
        padding:8px 7px;
        font-size:7px;
    }
    .score-chip b {
        font-size:21px;
    }
    .art-calc {
        gap:4px;
    }
    .art-calc span,.art-calc strong {
        font-size:14px;
        padding:7px 5px;
    }
    .art-calc b {
        font-size:12px;
    }
    .banner-index {
        right:9px;
        bottom:12px;
        font-size:7px;
    }
    .banner-controls {
        left:9px;
        bottom:9px;
        gap:5px;
    }
    .banner-arrow {
        width:22px;
        height:22px;
    }
    .banner-auto {
        display:none;
    }
}
@media(prefers-reduced-motion:reduce) {
    .banner-slide,.banner-cta,.banner-dots button {
        transition:none!important;
    }
    .art-ball>span {
        animation:none!important;
    }
}
.scroll-cue {
    transition:opacity .35s,background .25s,border-color .25s;
}
.scroll-cue.cue-to-top .cue-chevron {
    animation:cueUp 1.25s ease-in-out infinite;
}
.scroll-cue.cue-to-top .cue-chevron:nth-child(2) {
    animation-delay:.16s;
}
@keyframes cueUp {
    0%,100% {
        opacity:.35;
        transform:translateY(2px) rotate(225deg);
    }
    50% {
        opacity:1;
        transform:translateY(-2px) rotate(225deg);
    }
}
@media (max-width: 900px) {
    .layout-shell {
        display: flex;
        flex-direction: column;
    }
    .center-scroll {
        order: 0;
        width: 100%;
        min-width: 0;
    }
    .fixed-left {
        order: 1;
        width: 100%;
        min-width: 0;
    }
    .fixed-right {
        order: 2;
        width: 100%;
        min-width: 0;
    }
    .center, .page-center, .register-wrap, .layout-shell .page-center {
        width: 100%;
        min-width: 0;
    }
    .hero, .banner-slider, .live-widget, .panel, .lower, .calc-card, .form-shell {
        max-width: 100%;
    }
    .live-widget {
        overflow: hidden;
    }
    .live-widget iframe {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .fixed-left .left, .shared-left, .shared-right {
        margin: 0;
    }
    .shared-left {
        padding: 12px;
    }
    .shared-right {
        padding: 12px;
    }
    .shared-left .highlight {
        min-height: 42px;
        align-items: center;
        overflow-wrap: anywhere;
    }
    .shared-left .highlight b {
        line-height: 1.35;
    }
    .quick-card {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .register-wrap, .layout-shell .page-center {
        margin-top: 0;
        padding-bottom: 10px;
    }
    .register-hero, .calc-hero {
        border-radius: 12px;
    }
    .form-top {
        align-items: flex-start;
        padding: 14px;
    }
    .form-top h2 {
        font-size: 15px;
        line-height: 1.35;
    }
    .form-top p {
        line-height: 1.6;
    }
    .form-tag {
        font-size: 8px;
        padding: 6px 8px;
    }
    .embed-frame {
        width: 100%;
        min-width: 0;
        height: 820px;
    }
    .security-note {
        padding: 13px 14px;
    }
    .calc-body {
        padding: 12px;
    }
    .leg {
        grid-template-columns: 28px minmax(0, 1fr) 76px 28px;
        gap: 6px;
        padding: 8px;
    }
    .calc-input, .calc-select {
        padding: 10px 7px;
        font-size: 12px;
    }
    .site-footer {
        margin-top: 14px;
    }
}
@media (max-width: 520px) {
    body {
        font-size: 14px;
    }
    .top {
        height: 62px;
        padding-inline: 10px;
        gap: 8px;
    }
    .top .brand-image {
        width: 108px;
        max-height: 36px;
    }
    .hamb {
        min-width: 40px;
        min-height: 40px;
        padding: 6px 9px;
        border-radius: 9px;
    }
    .top .account .btn-yellow {
        min-height: 36px;
        padding-inline: 10px;
        font-size: 10px;
    }
    .mainnav {
        top: 62px;
        z-index: 150;
        border-radius: 0 0 12px 12px;
    }
    .layout-shell {
        width: calc(100% - 20px);
        gap: 10px;
        padding-top: 10px;
    }
    .banner-slider {
        min-height: 185px;
        aspect-ratio: 1.42 / 1;
        border-radius: 10px;
    }
    .banner-slide {
        padding: 15px 11px 39px;
    }
    .banner-copy {
        max-width: 73%;
    }
    .banner-copy h2 {
        font-size: clamp(18px, 5.8vw, 25px);
        line-height: 1.12;
        letter-spacing: -.4px;
    }
    .banner-copy p {
        max-width: 100%;
        font-size: 10px;
    }
    .banner-art {
        flex-basis: 25%;
        min-width: 52px;
    }
    .banner-cta {
        min-height: 34px;
        padding: 8px 9px;
        font-size: 10px;
    }
    .hero-text {
        max-width: 100%;
        padding: 20px 15px;
    }
    .hero-graphic {
        opacity: .18;
        right: -8px;
    }
    .tabs {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        gap: 7px;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .tabs > * {
        flex: 0 0 auto;
    }
    .live-widget iframe {
        height: 520px !important;
        min-height: 420px !important;
    }
    .shared-left .sport-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .shared-left .sport-list a {
        min-width: 0;
        padding: 9px 7px;
        font-size: 10px;
        overflow-wrap: anywhere;
    }
    .shared-right {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .quick-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .quick-card {
        min-height: 118px;
        padding: 12px;
    }
    .register-hero, .calc-hero {
        padding: 17px 14px;
    }
    .register-hero h1, .calc-hero h1 {
        font-size: 26px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    .register-hero p, .calc-hero p {
        font-size: 12px;
        line-height: 1.7;
    }
    .form-top {
        flex-direction: column;
        gap: 8px;
    }
    .embed-frame {
        height: 860px;
    }
    .register-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .register-actions .btn {
        width: 100%;
    }
    .calc-card-head {
        padding: 14px 12px;
    }
    .leg {
        grid-template-columns: 25px minmax(0, 1fr) 68px 26px;
        gap: 5px;
        padding: 7px 6px;
    }
    .leg-num {
        width: 25px;
        height: 28px;
    }
    .result-stats {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }
    .site-footer .foot {
        gap: 12px;
    }
    .footer-links {
        gap: 10px 14px;
    }
}
@media (max-width: 360px) {
    .top .brand-image {
        width: 94px;
    }
    .top .account .btn-yellow {
        padding-inline: 7px;
        font-size: 9px;
    }
    .banner-copy {
        max-width: 76%;
    }
    .banner-art {
        min-width: 42px;
    }
    .banner-copy h2 {
        font-size: 18px;
    }
    .leg {
        grid-template-columns: 23px minmax(0, 1fr) 60px 24px;
        gap: 4px;
    }
}
/* PROMO PAGE */
.promo-hero {
    padding: clamp(22px, 4vw, 38px);
    margin-bottom: 18px;
    border: 1px solid rgba(197,203,212,.22);
    border-radius: 22px;
    background: radial-gradient(circle at 88% 8%, rgba(197,203,212,.14), transparent 35%), linear-gradient(135deg, #15140e, #080a0f 65%);
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.promo-eyebrow {
    display:block;
    color:#483d00;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    margin-bottom:12px;
}
.promo-hero h1 {
    color:#c5cbd4;
    font-size:clamp(28px,4vw,42px);
    line-height:1.12;
    margin:0 0 14px;
}
.promo-hero p {
    color:#d5d8df;
    max-width:680px;
    line-height:1.75;
    margin:0 0 20px;
}
.promo-hero-actions,.promo-card-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.promo-summary {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:20px;
}
.promo-summary-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:16px;
    border:1px solid rgba(197,203,212,.17);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(197,203,212,.09),rgba(255,255,255,.025));
}
.promo-summary-item span {
    color:#bfc6d2;
    font-size:11px;
    font-weight:800;
    letter-spacing:.7px;
}
.promo-summary-item strong {
    color:#635400;
    font-size:24px;
}
.promo-list {
    display:grid;
    gap:16px;
}
.promo-card,.promo-legacy,.promo-important {
    padding:clamp(18px,3vw,28px);
    border:1px solid rgba(197,203,212,.17);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(17,22,31,.98),rgba(5,8,13,.98));
    box-shadow:0 16px 38px rgba(0,0,0,.25);
}
.promo-card.promo-featured {
    border-color:rgba(197,203,212,.42);
    box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.promo-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.promo-category {
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border:1px solid rgba(197,203,212,.25);
    border-radius:999px;
    color:#c5cbd4;
    background:rgba(197,203,212,.07);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.2px;
}
.promo-rate {
    display:grid;
    place-items:center;
    min-width:66px;
    min-height:56px;
    padding:5px 10px;
    border-radius:14px;
    color:#141006;
    font-size:24px;
    font-weight:950;
    background:linear-gradient(145deg,#483d00,#3f3600 55%,#ffd588);
    box-shadow:0 4px 0 #9e7323,0 10px 20px rgba(0,0,0,.25);
}
.promo-card h2,.promo-legacy h2,.promo-important h2 {
    color:#fff0a1;
    font-size:clamp(19px,2.5vw,25px);
    line-height:1.3;
    margin:0 0 12px;
}
.promo-card h3,.promo-legacy-card h3 {
    color:#c5cbd4;
    font-size:15px;
    margin:20px 0 10px;
}
.promo-intro,.promo-legacy>p,.promo-important p {
    color:#c9d0db;
    line-height:1.75;
    margin:0 0 15px;
}
.promo-terms {
    margin:0;
    padding-left:22px;
    color:#dce1e9;
    line-height:1.75;
}
.promo-terms li {
    padding-left:4px;
    margin:0 0 7px;
}
.promo-example {
    margin-top:18px;
    padding:15px 16px;
    border-left:3px solid #c5cbd4;
    border-radius:0 12px 12px 0;
    background:rgba(197,203,212,.065);
}
.promo-example strong {
    display:block;
    color:#c5cbd4;
    margin-bottom:7px;
}
.promo-example p {
    color:#e0e4eb;
    line-height:1.7;
    margin:0;
}
.promo-card-actions {
    margin-top:20px;
}
.promo-legacy {
    margin-top:4px;
}
.promo-legacy-card {
    padding:18px 0;
    border-top:1px solid rgba(197,203,212,.12);
}
.promo-legacy-card h3 {
    margin-top:12px;
}
.promo-legacy-card .promo-terms {
    font-size:13px;
    color:#c7ced8;
}
.promo-important {
    margin-top:18px;
    border-color:rgba(197,203,212,.32);
    background:radial-gradient(circle at 100% 0%,rgba(197,203,212,.08),transparent 38%),#0b0e13;
}
.promo-important .btn {
    margin-top:6px;
}
@media(max-width:600px) {
    .promo-summary {
        grid-template-columns:1fr;
        gap:8px;
    }
    .promo-summary-item {
        padding:12px 14px;
    }
    .promo-summary-item strong {
        font-size:21px;
    }
    .promo-hero {
        border-radius:17px;
    }
    .promo-card,.promo-legacy,.promo-important {
        border-radius:16px;
    }
    .promo-card-top {
        align-items:flex-start;
    }
    .promo-rate {
        min-width:58px;
        min-height:50px;
        font-size:21px;
    }
    .promo-hero-actions .btn {
        flex:1;
        text-align:center;
    }
}
.site-ticker {
    position:relative;
    z-index:20;
    display:flex;
    align-items:center;
    gap:0;
    width:min(1400px,calc(100% - 36px));
    margin:10px auto 16px;
    min-height:42px;
    overflow:hidden;
    border:1px solid rgba(255,219,36,.34);
    border-radius:9px;
    background:linear-gradient(100deg,rgba(255,219,36,.13),rgba(20,19,12,.96) 28%,rgba(34,29,14,.96));
    box-shadow:0 5px 22px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035);
}
.ticker-label {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    align-self:stretch;
    flex-shrink:0;
    padding:0 15px;
    background:linear-gradient(135deg,#ffe66a,#d7a91b);
    color:#171307;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.1px;
    white-space:nowrap;
}
.ticker-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#211b08;
    box-shadow:0 0 0 4px rgba(31,25,6,.1);
    animation:tickerPulse 1.8s ease-in-out infinite;
}
.ticker-window {
    min-width:0;
    overflow:hidden;
    flex:1;
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.ticker-track {
    display:flex;
    align-items:center;
    gap:23px;
    width:max-content;
    padding:0 18px;
    white-space:nowrap;
    animation:tickerMove 34s linear infinite;
    color:#eee7d0;
    font-size:11px;
    font-weight:600;
    letter-spacing:.15px;
}
.ticker-track i {
    color:var(--silver);
    font-style:normal;
    font-size:13px;
}
.site-ticker:hover .ticker-track {
    animation-play-state:paused;
}
@keyframes tickerMove {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(-50%);
    }
}
@keyframes tickerPulse {
    0%,100% {
        opacity:1;
        transform:scale(1);
    }
    50% {
        opacity:.55;
        transform:scale(.8);
    }
}
@media(max-width:600px) {
    .site-ticker {
        width:calc(100% - 22px);
        margin:8px auto 12px;
        min-height:38px;
    }
    .ticker-label {
        padding:0 10px;
        font-size:9px;
        letter-spacing:.6px;
    }
    .ticker-track {
        font-size:10px;
        gap:15px;
        animation-duration:28s;
    }
}
@media(prefers-reduced-motion:reduce) {
    .ticker-track,.ticker-dot {
        animation:none;
    }
    .ticker-track {
        width:auto;
        white-space:normal;
    }
    .ticker-window {
        mask-image:none;
    }
}
/* Responsive layout refinement: wide desktop, laptop, tablet, mobile */
img,video,canvas,svg,iframe {
    max-width:100%;
}
html,body {
    width:100%;
    min-width:0;
    overflow-x:hidden;
}
.wrap {
    width:min(1400px,calc(100% - 36px));
}
.layout-shell {
    min-width:0;
}
.center-scroll,.center,.fixed-left,.fixed-right,.left-inner,.right {
    min-width:0;
    max-width:100%;
}
.center-scroll {
    overscroll-behavior:contain;
}
.center>* {
    min-width:0;
    max-width:100%;
}
.banner-slider {
    width:100%;
    aspect-ratio:3.6/1;
    min-height:190px;
    max-height:330px;
}
.banner-slide {
    min-width:0;
}
.banner-copy {
    min-width:0;
    max-width:65%;
}
.banner-copy h2 {
    font-size:clamp(20px,2.2vw,34px);
    line-height:1.12;
    overflow-wrap:anywhere;
}
.banner-copy p {
    max-width:48ch;
}
.banner-art {
    max-width:38%;
}
.banner-bg-image {
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:center;
}
.hero,.panel,.markets,.live-widget,.promo-card,.promo-legacy,.promo-important {
    min-width:0;
    max-width:100%;
}
iframe {
    width:100%;
    max-width:100%;
}
.match-row,.widget-heading,.market-title {
    min-width:0;
}
.match-row>* {
    min-width:0;
}
.site-footer,.site-footer .foot,.copyright {
    min-width:0;
    overflow-wrap:anywhere;
}
table {
    max-width:100%;
}
pre,code {
    overflow-wrap:anywhere;
    white-space:pre-wrap;
}
input,select,textarea,button {
    max-width:100%;
    font:inherit;
}
a,button {
    -webkit-tap-highlight-color:transparent;
}
@media (min-width:1600px) {
    .wrap {
        width:min(1540px,calc(100% - 64px));
    }
    .layout-shell {
        grid-template-columns:220px minmax(0,1fr) 235px;
        gap:22px;
    }
}
@media (max-width:1200px) {
    .wrap {
        width:calc(100% - 28px);
    }
    .top {
        gap:18px;
    }
    .mainnav {
        gap:clamp(8px,1.4vw,18px);
    }
    .account {
        gap:6px;
    }
    .account .btn {
        padding:0 11px;
    }
    .layout-shell {
        grid-template-columns:165px minmax(0,1fr) 180px;
        gap:12px;
    }
    .banner-slider {
        aspect-ratio:3/1;
        min-height:175px;
    }
    .banner-copy {
        max-width:66%;
        padding:18px;
    }
    .banner-art {
        transform:scale(.88);
        transform-origin:center right;
    }
    .hero {
        height:auto;
        min-height:205px;
    }
    .hero-text {
        padding:22px;
        max-width:62%;
    }
    .fixed-left,.fixed-right {
        font-size:12px;
    }
}
@media (max-width:980px) {
    .top {
        height:auto;
        min-height:72px;
        flex-wrap:wrap;
        gap:12px;
        padding:12px 0;
    }
    .top .brand {
        margin-right:auto;
    }
    .mainnav {
        order:3;
        width:100%;
        justify-content:center;
        gap:clamp(12px,3vw,28px);
        flex-wrap:wrap;
    }
    .mainnav a {
        padding:8px 0;
    }
    .account {
        margin-left:auto;
    }
    .layout-shell {
        height:auto;
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:14px;
        padding-top:12px;
        padding-bottom:18px;
    }
    .fixed-left,.fixed-right {
        display:none;
    }
    .center-scroll {
        height:auto;
        max-height:none;
        overflow:visible;
        padding:0;
    }
    .center {
        width:100%;
    }
    .site-ticker {
        width:calc(100% - 28px);
    }
    .banner-slider {
        aspect-ratio:2.8/1;
        min-height:185px;
        max-height:300px;
    }
    .banner-copy {
        max-width:67%;
    }
    .banner-art {
        max-width:34%;
    }
    .hero {
        min-height:190px;
    }
    .quick-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .lower {
        width:100%;
    }
}
@media (max-width:700px) {
    body {
        font-size:13px;
    }
    .wrap {
        width:calc(100% - 22px);
    }
    .top {
        min-height:64px;
        gap:8px;
    }
    .brand-image {
        width:clamp(120px,36vw,165px);
        height:auto;
        max-height:46px;
        object-fit:contain;
    }
    .hamb {
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .mainnav {
        display:none;
        order:4;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        padding:6px 0 2px;
    }
    .mainnav.open,.mainnav.is-open {
        display:flex;
    }
    .mainnav a {
        padding:11px 9px;
        border-bottom:1px solid rgba(255,219,36,.12);
        font-size:10px;
    }
    .account {
        gap:6px;
    }
    .account .btn {
        min-height:34px;
        padding:0 9px;
        font-size:10px;
    }
    .site-ticker {
        width:calc(100% - 22px);
        margin:8px auto 12px;
    }
    .ticker-label {
        padding:0 9px;
    }
    .layout-shell {
        width:calc(100% - 22px);
        padding-top:6px;
        gap:10px;
    }
    .banner-slider {
        aspect-ratio:1.65/1;
        min-height:210px;
        max-height:290px;
        border-radius:10px;
    }
    .banner-slide {
        align-items:flex-start;
    }
    .banner-copy {
        max-width:76%;
        padding:18px 14px 42px;
    }
    .banner-copy h2 {
        font-size:clamp(19px,5.4vw,28px);
        line-height:1.12;
    }
    .banner-copy p {
        max-width:34ch;
        font-size:11px;
        line-height:1.45;
    }
    .banner-kicker {
        font-size:8px;
        letter-spacing:.7px;
    }
    .banner-cta {
        min-height:34px;
        padding:0 11px;
        font-size:10px;
    }
    .banner-art {
        max-width:29%;
        opacity:.78;
        transform:scale(.72);
        transform-origin:center right;
    }
    .banner-index {
        font-size:9px;
        right:12px;
        bottom:12px;
    }
    .banner-controls {
        gap:8px;
    }
    .banner-auto {
        font-size:8px;
    }
    .hero {
        height:auto;
        min-height:0;
        display:block;
    }
    .hero-text {
        max-width:100%;
        padding:20px 17px;
    }
    .hero-text h1 {
        font-size:clamp(25px,7vw,36px);
        line-height:1.1;
    }
    .hero-text p {
        font-size:12px;
        line-height:1.55;
    }
    .hero-graphic {
        display:none;
    }
    .tabs {
        gap:6px;
    }
    .tab {
        min-width:0;
        padding:10px 12px;
    }
    .widget-heading,.market-title {
        align-items:flex-start;
        gap:10px;
        flex-wrap:wrap;
    }
    .widget-heading h2,.market-title h2 {
        font-size:clamp(16px,4.5vw,21px);
    }
    .widget-heading .btn,.market-title .btn {
        flex-shrink:0;
    }
    .live-widget {
        padding:10px;
    }
    .live-widget iframe {
        height:540px!important;
        min-height:420px!important;
    }
    .league-tabs {
        display:flex;
        overflow-x:auto;
        max-width:100%;
        padding-bottom:5px;
    }
    .league-tabs a {
        flex:0 0 auto;
    }
    .match-row {
        display:grid;
        grid-template-columns:64px minmax(0,1fr) 28px minmax(0,1fr);
        gap:8px;
        padding:12px 9px;
    }
    .match-row .club {
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:4px;
    }
    .match-row .club b {
        font-size:10px;
        overflow-wrap:anywhere;
    }
    .match-row .odds {
        grid-row:2;
        font-size:10px;
        text-align:center;
        padding:7px 4px;
    }
    .match-time {
        font-size:9px;
    }
    .quick-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }
    .quick-card {
        min-width:0;
        padding:13px;
    }
    .quick-card b,.quick-card small,.quick-card strong {
        overflow-wrap:anywhere;
    }
    .lower {
        padding-left:0;
        padding-right:0;
    }
    .button-cloud {
        gap:7px;
    }
    .button-cloud a {
        padding:8px 10px;
        font-size:10px;
    }
    .site-footer {
        padding:15px 12px 10px;
    }
    .site-footer .foot {
        align-items:flex-start;
        gap:12px;
    }
    .site-footer .foot p {
        width:100%;
        line-height:1.5;
    }
    .footer-links {
        margin-left:0;
        gap:12px;
    }
    .promo-summary {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .promo-summary-item {
        min-width:0;
        padding:10px 6px;
    }
    .promo-summary-item span {
        font-size:8px;
        overflow-wrap:anywhere;
    }
    .promo-summary-item strong {
        font-size:19px;
    }
    .promo-card {
        padding:16px;
    }
    .promo-terms {
        padding-left:20px;
    }
}
@media (max-width:420px) {
    .wrap,.layout-shell {
        width:calc(100% - 16px);
    }
    .top {
        gap:6px;
    }
    .brand-image {
        width:112px;
        max-height:38px;
    }
    .account .btn {
        padding:0 7px;
        font-size:9px;
    }
    .banner-slider {
        aspect-ratio:1.25/1;
        min-height:220px;
    }
    .banner-copy {
        max-width:82%;
        padding:16px 12px 42px;
    }
    .banner-copy h2 {
        font-size:20px;
    }
    .banner-copy p {
        font-size:10px;
    }
    .banner-art {
        opacity:.42;
        max-width:25%;
        transform:scale(.58);
        transform-origin:bottom right;
    }
    .banner-cta {
        font-size:9px;
    }
    .quick-grid {
        grid-template-columns:minmax(0,1fr);
    }
    .promo-summary {
        grid-template-columns:1fr;
    }
    .promo-summary-item {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 13px;
    }
    .promo-summary-item strong {
        font-size:18px;
    }
    .match-row {
        grid-template-columns:52px minmax(0,1fr) 22px minmax(0,1fr);
        gap:5px;
    }
    .site-footer .brand-image {
        width:130px;
    }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

.banner-image-slide {
    display: block;
    padding: 0;
    background: #080a0e;
}
.banner-image-slide::before {
    display: none;
}
.banner-image-link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.banner-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 620px) {
    .banner-slider {
        aspect-ratio: 4 / 1;
        min-height: 100px;
        max-height: 190px;
        border-radius: 8px;
    }
    .banner-controls {
        left: 7px;
        bottom: 6px;
        gap: 5px;
        padding: 3px 5px;
        border-radius: 20px;
        background: #080806a8;
    }
    .banner-arrow {
        width: 22px;
        height: 22px;
    }
    .banner-auto {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .banner-slide {
        transition: none;
    }
}

.banner-slider {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.banner-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.banner-slide.banner-image-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.banner-image-slide::before {
    display: none;
}

.banner-image-link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.banner-image-slide .banner-bg-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center center;
}

.banner-controls {
    position: absolute;
    z-index: 5;
}

@media (max-width: 900px) {
    .banner-slider {
        width: 100%;
        aspect-ratio: 4 / 1;
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 620px) {
    .banner-slider {
        width: 100%;
        aspect-ratio: 4 / 1;
        min-height: 0;
        max-height: none;
        border-radius: 8px;
    }

    .banner-controls {
        left: 7px;
        bottom: 6px;
        gap: 5px;
        padding: 3px 5px;
    }

    .banner-arrow {
        width: 22px;
        height: 22px;
    }

    .banner-auto {
        display: none;
    }
}


/* FINAL BANNER OVERRIDE: keeps the original 2048x640 banner ratio (16:5)
   and prevents empty side gaps or image distortion across screen sizes. */
.banner-slider {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 5;
    min-height: 0;
    max-height: none;
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.banner-slider .banner-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.banner-slider .banner-slide.banner-image-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.banner-slider .banner-image-slide::before {
    display: none;
}

.banner-slider .banner-image-link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.banner-slider .banner-image-slide .banner-bg-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: fill;
    object-position: center;
}

.banner-slider .banner-controls {
    position: absolute;
    z-index: 5;
}

@media (max-width: 900px) {
    .banner-slider {
        width: 100%;
        aspect-ratio: 16 / 5;
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 620px) {
    .banner-slider {
        width: 100%;
        aspect-ratio: 16 / 5;
        min-height: 0;
        max-height: none;
        border-radius: 8px;
    }

    .banner-slider .banner-controls {
        left: 7px;
        bottom: 6px;
        gap: 5px;
        padding: 3px 5px;
    }

    .banner-slider .banner-arrow {
        width: 22px;
        height: 22px;
    }

    .banner-slider .banner-auto {
        display: none;
    }
}
@media (min-width: 901px) {
    header.top.wrap {
        position: sticky !important;
        top: 0 !important;
        z-index: 200 !important;
        background: rgba(16, 16, 9, 0.96) !important;
        isolation: isolate;
    }
}
.mainnav a {
    position: relative;
    transition: color .25s ease;
}

.mainnav a.active {
    color: #ffdc38 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mainnav a.active::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 20px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #ffe34d,
        #d69b16,
        #ffe34d,
        transparent
    );
    box-shadow: 0 0 8px rgba(255, 215, 45, .35);
    border-radius: 10px;
}

.mainnav a:hover {
    color: #ffdc38;
}


/* Custom registration form: replaces the legacy embedded form */
.registration-form{display:flex;flex-direction:column;gap:9px;padding:clamp(14px,3vw,24px);background:var(--panel,#171217);border:1px solid rgba(197,203,212,.28);border-radius:12px;color:var(--text,#f7f1e6)}
.registration-form label{display:block;margin-top:5px;font-weight:800;color:var(--text,#f7f1e6);font-size:14px;letter-spacing:.15px}
.registration-form label em{font-style:normal;color:#ff6262;margin-left:2px}
.registration-form input,.registration-form select{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid rgba(197,203,212,.35);border-radius:7px;background:#f3f3f3;color:#171717;font:inherit;box-sizing:border-box;outline-offset:2px}
.registration-form input:focus,.registration-form select:focus{border-color:#d9b54a;box-shadow:0 0 0 3px rgba(217,181,74,.18)}
.registration-form select{cursor:pointer}
.registration-submit{align-self:flex-start;min-width:120px;margin-top:12px;cursor:pointer}
.registration-status{margin:2px 0 0;color:#f4d77d;font-size:13px;line-height:1.5}
@media(max-width:520px){.registration-form{padding:14px;gap:8px}.registration-form input,.registration-form select{min-height:46px}.registration-submit{width:100%}}


/* 828BET cPanel form layout safety override */
#registrationForm.registration-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: clamp(14px, 3vw, 24px) !important;
  overflow: visible !important;
}
#registrationForm.registration-form > label,
#registrationForm.registration-form > input,
#registrationForm.registration-form > select,
#registrationForm.registration-form > textarea,
#registrationForm.registration-form > button,
#registrationForm.registration-form > .registration-status {
  display: block !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#registrationForm.registration-form > label {
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  color: var(--text, #f8f5e9) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}
#registrationForm.registration-form > input,
#registrationForm.registration-form > select,
#registrationForm.registration-form > textarea {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(197,203,212,.5) !important;
  border-radius: 7px !important;
  background: #f3f3f3 !important;
  color: #171717 !important;
  font: inherit !important;
}
#registrationForm.registration-form > button {
  min-height: 46px !important;
  margin-top: 8px !important;
  cursor: pointer !important;
}
#registrationForm.registration-form .registration-status {
  margin-top: 4px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 640px) {
  #registrationForm.registration-form { padding: 14px !important; }
  #registrationForm.registration-form > input,
  #registrationForm.registration-form > select,
  #registrationForm.registration-form > textarea { font-size: 16px !important; }
}


/* 828BET cPanel fix: transaction forms (deposit / withdraw) */
form.transaction-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px 16px !important;
  padding: 18px 20px 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #050505 !important;
  color: var(--text, #f7f1e6) !important;
}
form.transaction-form > label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 -4px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
form.transaction-form > input,
form.transaction-form > select,
form.transaction-form > textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(197,203,212,.45) !important;
  border-radius: 7px !important;
  background: #171717 !important;
  color: #f7f1e6 !important;
  font: inherit !important;
}
form.transaction-form > textarea {
  min-height: 96px !important;
  resize: vertical !important;
}
form.transaction-form > button.registration-submit {
  justify-self: start !important;
  align-self: start !important;
  min-width: 130px !important;
  margin: 4px 0 0 !important;
}
form.transaction-form > .registration-status {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}
@media (min-width: 760px) {
  form.transaction-form > label { grid-row: auto !important; }
}
@media (max-width: 759px) {
  form.transaction-form {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 14px !important;
    gap: 7px !important;
  }
  form.transaction-form > button.registration-submit { width: 100% !important; }
}


/* 828BET registration success popup */
.a88bet-register-modal[hidden]{display:none!important}
.a88bet-register-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px;box-sizing:border-box}
.a88bet-register-backdrop{position:absolute;inset:0;background:rgba(2,4,8,.82);backdrop-filter:blur(6px)}
.a88bet-register-dialog{position:relative;z-index:1;width:min(100%,480px);box-sizing:border-box;padding:30px;border:1px solid rgba(229,185,66,.55);border-radius:20px;background:radial-gradient(circle at 100% 0,rgba(229,185,66,.12),transparent 38%),linear-gradient(145deg,#151923,#090c12);color:#f7f4e9;box-shadow:0 28px 90px #0009;animation:a88betModalIn .22s ease-out}
.a88bet-register-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:1px solid #344052;border-radius:10px;background:#111722;color:#dce3ef;font-size:24px;line-height:1;cursor:pointer}
.a88bet-register-check{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:50%;background:#c5cbd4;color:#15120a;font-size:27px;font-weight:900;box-shadow:0 0 0 7px #c5cbd41c}
.a88bet-register-eyebrow{margin:0 0 8px;color:#c5cbd4;font-size:11px;font-weight:900;letter-spacing:.14em}
.a88bet-register-dialog h2{margin:0 34px 10px 0;color:#fff;font-size:clamp(22px,4vw,28px);line-height:1.2}
.a88bet-register-dialog>p:not(.a88bet-register-eyebrow):not(.a88bet-register-note){margin:0 0 20px;color:#b8c2d2;font-size:14px;line-height:1.65}
.a88bet-register-code-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center;padding:14px;margin:0 0 16px;border:1px solid #344052;border-radius:12px;background:#0a1019}
.a88bet-register-code-wrap span{grid-column:1/-1;color:#8f9cb0;font-size:10px;font-weight:800;letter-spacing:.1em}
.a88bet-register-code-wrap strong{min-width:0;overflow-wrap:anywhere;color:#fff;font-size:15px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.a88bet-register-code-wrap button{padding:9px 11px;border:1px solid #665321;border-radius:8px;background:#282313;color:#f1d77a;font-size:12px;font-weight:800;cursor:pointer}
.a88bet-register-livechat{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 16px;border-radius:10px;background:linear-gradient(100deg,#ffe64a,#ffc800);color:#171305!important;text-decoration:none;font-size:14px;font-weight:900;box-shadow:0 8px 24px #c5cbd420}
.a88bet-register-livechat:hover{filter:brightness(1.06);transform:translateY(-1px)}
.a88bet-register-note{min-height:18px;margin:12px 0 0;color:#98a5b8;font-size:11px;line-height:1.5;text-align:center}
body.a88bet-modal-open{overflow:hidden}
@keyframes a88betModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:520px){.a88bet-register-modal{padding:12px}.a88bet-register-dialog{padding:24px 18px 20px;border-radius:16px}.a88bet-register-code-wrap{padding:12px}.a88bet-register-code-wrap strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.a88bet-register-dialog{animation:none}}


/* =========================================================
   828BET MAIN SITE — GLOBALBOLA-INSPIRED VISUAL REFRESH
   Visual layout only; no username/password/login placeholders.
   ========================================================= */
:root{
 --bg:#090b10;--panel:#111824;--panel2:#182231;--silver:#c5cbd4;
 --silver2:#8e9bad;--text:#f6f7fb;--muted:#aab4c4;--line:#2b394c;
}
body{
 background:
  radial-gradient(ellipse at 50% -15%,rgba(204,157,50,.15),transparent 42%),
  linear-gradient(180deg,#0b0f17 0%,#080b11 100%);
 color:var(--text);
}
.ambient{opacity:.055;background:repeating-linear-gradient(120deg,transparent 0 82px,#e5bd2820 83px 84px)}
.wrap{width:min(1500px,calc(100% - 40px))}
.a88-utility-wrap{background:#080c13;border-bottom:1px solid #263246}
.a88-utility{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#aeb9c9;font-size:10px;font-weight:800;letter-spacing:.35px}
.a88-utility-left{display:flex;align-items:center;gap:22px;min-width:0}
.a88-utility a{transition:color .2s}
.a88-utility a:hover{color:var(--silver)}
.a88-online{display:inline-flex;align-items:center;gap:7px;color:#e8c75f}
.a88-online i{width:7px;height:7px;border-radius:50%;background:#35d39a;box-shadow:0 0 0 4px #35d39a20}
.a88-utility-help{color:#d7e0ec;white-space:nowrap}
.a88-utility-help span{color:var(--silver);padding-left:5px}
.top{
 height:78px;gap:clamp(14px,2.2vw,32px);
 border-bottom:1px solid #273347;
 background:rgba(10,15,23,.92);
}
.brand-image{object-fit:contain;max-width:190px}
.mainnav{gap:clamp(10px,1.8vw,27px);font-size:10px;color:#d6deea}
.mainnav a{padding:29px 0}
.mainnav a:hover,.mainnav .active{color:var(--silver);border-color:var(--silver)}
.account{gap:9px}
.btn{border-radius:7px;min-height:39px;font-size:10px;letter-spacing:.2px}
.btn-yellow{background:linear-gradient(180deg,#ffe16b 0%,#f3c437 48%,#dca72b 100%);color:#191405;box-shadow:0 4px 0 #8e6718,0 8px 18px #0005,inset 0 1px #fff8}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 6px 0 #8e6718,0 12px 20px #0006}
.btn-dark{background:#172233;border:1px solid #35445a;color:#e8edf5}
.a88-category-wrap{background:#111a27;border-bottom:1px solid #2a394d;box-shadow:0 8px 24px #0003}
.a88-category{display:flex;align-items:center;gap:6px;min-height:52px;overflow-x:auto;scrollbar-width:none}
.a88-category::-webkit-scrollbar{display:none}
.a88-category a{display:flex;align-items:center;gap:8px;flex:none;padding:10px 15px;border-radius:6px;color:#c3ccda;font-size:13px;font-weight:800;white-space:nowrap;transition:.2s}
.a88-category a span{font-size:10px;letter-spacing:.45px}
.a88-category a:hover,.a88-category a.is-current{background:linear-gradient(180deg,#d9dee7,#aeb8c7);color:#1b1607;box-shadow:0 3px 10px #d9a82b25}
.site-ticker{border-color:#4b3e20;background:#141923;color:#e1d6b7;margin-top:13px}
.ticker-label{background:linear-gradient(180deg,#d9dee7,#aeb8c7);color:#1d1705}
.ticker-track i{color:var(--silver)}
.layout{gap:16px}
.layout-shell{padding-top:16px}
.panel{background:linear-gradient(145deg,#151f2d,#101722);border:1px solid #2b3b50;border-radius:12px;box-shadow:0 12px 28px #0003}
.left,.slip,.side-box{background:linear-gradient(145deg,#151f2d,#101722);border-color:#2b3b50}
.left h3,.side-box h3{color:#c5cbd4}
.highlight{background:#0d141e;border-color:#2b3b50;color:#e5eaf2}
.highlight:hover{border-color:#cba33e;background:#192332}
.thumb{background:linear-gradient(135deg,#26384a,#6d5420)}
.sport-list a{background:#182332;color:#bdc7d5}
.sport-list a:hover,.sport-list .chosen{background:linear-gradient(180deg,#d9dee7,#aeb8c7);color:#1b1607}
.hero{border-color:#4a3c20;background:radial-gradient(ellipse at 78% 45%,#8b6a252b 0,transparent 38%),linear-gradient(100deg,#090d14 0,#121b28 58%,#352813 100%)}
.hero h1{color:#fff}
.hero p{color:#bdc7d4}
.tabs{background:#1c1c1c;border-color:#66572e}
.tab{background:#1c1c1c;border-color:#66572e;color:#d2dbe7}
.tab:hover,.tab.selected{background:linear-gradient(180deg,#d9dee7,#aeb8c7);color:#1b1607;border-color:#c5cbd4}
.match-feature{background:linear-gradient(120deg,#222d3c,#121a25 70%,#2b2112);border-color:#36465b}
.match-head small,.league{color:#e7c35b}
.league{border-color:#66572e}
.score-mid strong{color:#f8f7f2}
.markets{background:linear-gradient(145deg,#151f2d,#101722);border-color:#2b3b50}
.league-tabs a{background:#202d3c;border-color:#3b4b60;color:#dbe3ed}
.league-tabs a:hover,.league-tabs .league-active{background:#c5cbd4;color:#1a1505}
.match-row{border-color:#2a394d}
.match-time{color:#c5cbd4}
.odds{background:#1c2a3b;border-color:#3b4b60}
.odds:hover{background:#c5cbd4;color:#1a1505}
.side-tabs b{background:#1d2a3a;color:#c5cbd4}
.empty{color:#9aa8ba}
.empty b{color:#e4eaf2}
.side-box>a:not(.btn){border-color:#2a394d;color:#c7d0dc}
.quick-card{background:linear-gradient(145deg,#172333,#101722);border-color:#2c3b50}
.quick-card:hover{border-color:#d5ad43}
.lower-head p,.help details p{color:#aeb8c7}
.button-cloud a{background:#172333;border-color:#394a60;color:#dce4ed}
.button-cloud a:hover{background:#c5cbd4;color:#1a1505}
.help details{border-color:#2b3b50}
footer{background:#080c12;border-color:#2b3b50}
.foot>div{color:#c3ccda}
.copyright{border-color:#263346;color:#8592a5}
.a88bet-live-panel{background:linear-gradient(135deg,#151f2d,#0c121b)!important;border-color:#35465b}
.a88bet-match-card{background:linear-gradient(145deg,#1b2838,#101722);border-color:#35465b}
.a88bet-match-meta{color:#e6c15b}
.a88bet-match-status{background:#253246;color:#d6deea}
.a88bet-match-cta{background:linear-gradient(180deg,#d9dee7,#dca72b);color:#191405!important}
.a88-live-cta-wrap{background:radial-gradient(ellipse at 18% 50%,rgba(188,135,34,.18),transparent 42%),linear-gradient(135deg,#172333 0%,#0b111a 58%,#2a2113 100%);border-color:#3b4c62}
.a88-live-cta{background:linear-gradient(180deg,#ffe7a0 0%,#aeb8c7 44%,#52647e 100%)}
@media(max-width:900px){
 .a88-utility{padding:0 2px}
 .top{height:auto;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
 .mainnav{background:#101a28;border:1px solid #2b3b50;box-shadow:0 14px 28px #0008}
 .mainnav a{padding:13px 15px}
 .a88-category{min-height:46px}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 22px)}
 .a88-utility{min-height:32px;font-size:9px}
 .a88-utility-left{gap:12px}
 .a88-utility-left a:nth-of-type(2){display:none}
 .a88-utility-help{display:none}
 .top{gap:8px}
 .brand-image{max-width:150px;height:auto}
 .account .btn-dark{display:none}
 .account .btn-yellow{min-height:34px;padding:0 11px;font-size:9px}
 .a88-category a{padding:9px 12px}
 .site-ticker{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
 .a88-category a,.btn,.quick-card{transition:none}
}


/* Mobile-first stacked presentation based on the supplied reference layout */
.a88-app-promo{position:relative;display:flex;align-items:center;gap:18px;min-height:190px;margin:18px 0 14px;padding:22px 24px;overflow:hidden;border:1px solid #69521f;border-radius:12px;background:radial-gradient(circle at 15% 50%,#4a310e,transparent 28%),radial-gradient(circle at 88% 48%,#4a310e,transparent 25%),linear-gradient(115deg,#1b1810,#10100b 48%,#201f17);box-shadow:inset 0 1px #ffffff12,0 12px 26px #0005}
.a88-app-art{display:grid;place-items:center;flex:0 0 116px;width:116px;height:116px;border:5px solid #b99137;border-radius:26px;background:linear-gradient(145deg,#f7dc80,#9c6c1c 55%,#38240b);box-shadow:0 10px 0 #4a310e,0 18px 26px #0008,inset 0 3px 7px #fff8;transform:rotate(-7deg)}
.a88-app-art span{font-size:44px;font-weight:1000;color:#201606;text-shadow:0 2px #fff5}
.a88-app-copy{position:relative;z-index:1}
.a88-app-kicker{color:#f2c94e;font-size:9px;font-weight:1000;letter-spacing:2px}
.a88-app-copy h2{font-size:clamp(17px,2vw,24px);line-height:1.2;margin:7px 0;color:#fff}
.a88-app-copy p{font-size:11px;line-height:1.55;color:#c2c8c2;margin:0 0 13px}
.a88-app-button{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:7px;background:linear-gradient(#ffe17a,#d6a52d);box-shadow:0 4px 0 #795619;color:#211705;font-size:9px;font-weight:1000;letter-spacing:.5px}
.a88-payment-panel{margin:14px 0 20px;padding:17px;border:1px solid #403b2a;border-radius:10px;background:linear-gradient(145deg,#201e15,#16120d);text-align:center}
.a88-payment-panel h2{margin:0 0 7px;color:#f0ca5b;font-size:13px;font-weight:1000;letter-spacing:1.1px}
.a88-payment-panel p{max-width:560px;margin:0 auto 13px;color:#aeb7c1;font-size:10px;line-height:1.5}
.a88-payment-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.a88-payment-methods span{padding:9px 4px;border:1px solid #39424b;border-radius:6px;background:#111a23;color:#e5e9ee;font-size:8px;font-weight:900;letter-spacing:.25px}
.a88-payment-panel>a{display:inline-block;color:#f1cc61;font-size:10px;font-weight:900}
.a88-payment-panel>a b{padding-left:5px}
@media(max-width:900px){
 body{height:auto!important;min-height:100vh;overflow-x:hidden!important;overflow-y:auto!important}
 .layout-shell{display:block!important;width:calc(100% - 20px)!important;height:auto!important;min-height:0!important;padding-top:9px!important}
 .fixed-left,.fixed-right{display:none!important}
 .center-scroll{height:auto!important;min-height:0!important;overflow:visible!important;padding:0!important}
 .center{width:100%!important;max-width:none!important}
 .top{position:relative!important;top:auto!important}
 .mainnav{z-index:100}
 .site-ticker{width:calc(100% - 20px)!important;margin:8px auto 10px!important;min-height:34px!important}
 .ticker-label{font-size:9px;padding:0 10px}
 .a88-category{width:100%;min-height:43px}
 .a88-category a{padding:8px 11px}
 .banner-slider{aspect-ratio:16/7!important;min-height:145px!important;max-height:230px!important;margin-bottom:10px!important}
 .a88bet-live-panel{margin-top:10px}
 .a88-live-cta-wrap{min-height:0!important;padding:22px 18px!important;border-radius:12px!important}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:12px 0!important}
 .quick-card{min-height:105px!important;padding:10px!important;border-radius:8px!important}
 .quick-card>span{font-size:19px!important;margin-bottom:5px!important}
 .quick-card b{font-size:9px!important}
 .quick-card small{font-size:8px!important;margin:3px 0 7px!important}
 .quick-card strong{font-size:8px!important}
 .lower{padding:24px 0!important}
 .lower-head h2{font-size:19px!important}
 .lower-head p{font-size:10px!important;line-height:1.6}
 .site-footer{margin-top:12px!important}
 .site-footer .foot{align-items:center!important;text-align:center!important}
 .site-footer .foot p{font-size:9px}
}
@media(max-width:520px){
 .wrap{width:calc(100% - 16px)!important}
 .top{height:auto!important;min-height:58px!important;padding:7px 9px!important;display:flex!important;flex-wrap:nowrap!important}
 .brand-image{max-width:120px!important;width:120px!important;height:auto!important}
 .hamb{padding:6px 9px!important;font-size:15px!important}
 .account .btn-yellow{min-height:31px!important;font-size:8px!important;padding:0 8px!important}
 .mainnav{top:58px!important}
 .a88-utility{width:calc(100% - 16px)!important}
 .a88-utility-left{gap:10px!important}
 .a88-utility-left a{font-size:8px}
 .a88-category-wrap{overflow:hidden}
 .a88-category{gap:3px!important}
 .a88-category a{padding:8px 9px!important;font-size:12px!important}
 .a88-category a span{font-size:8px!important}
 .banner-slider{aspect-ratio:16/8!important;min-height:130px!important}
 .a88bet-live-panel{padding:10px!important}
 .a88-live-cta-wrap{gap:13px!important}
 .a88-live-orb{flex-basis:76px!important;width:76px!important;height:76px!important}
 .a88-live-orb span{font-size:34px!important}
 .a88-live-copy h3{font-size:19px!important}
 .a88-live-copy p{font-size:11px!important;margin-bottom:12px!important}
 .a88-live-cta{min-height:42px!important;font-size:11px!important}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .a88-app-promo{gap:13px;min-height:150px;padding:15px 12px;margin:12px 0}
 .a88-app-art{flex-basis:72px;width:72px;height:72px;border-width:3px;border-radius:17px}
 .a88-app-art span{font-size:29px}
 .a88-app-copy h2{font-size:15px}
 .a88-app-copy p{font-size:9px;margin-bottom:9px}
 .a88-app-button{font-size:8px;padding:8px 9px}
 .a88-payment-panel{padding:13px 10px}
 .a88-payment-methods{grid-template-columns:repeat(2,minmax(0,1fr))}
 .a88-payment-methods span{font-size:8px}
 .lower-head h2{font-size:17px!important}
 .help{padding-bottom:25px!important}
}


/* ==========================================================
   828BET — CENTERED MOBILE-STYLE MAIN SITE
   Reference direction: narrow black/silver sports landing page
   ========================================================== */
:root{--a88-silver:#c5cbd4;--a88-silver2:#e4e9f0;--a88-black:#090a0b;--a88-panel:#151719;--a88-line:#39352b}
html{background:#080909}
body{
  height:auto!important;min-height:100vh!important;overflow-x:hidden!important;overflow-y:auto!important;
  margin:0!important;background:
    radial-gradient(ellipse at 50% 10%,rgba(173,128,35,.12),transparent 42%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #080909!important;color:#f6f3eb
}
.a88-utility-wrap{width:min(430px,100%)!important;margin:0 auto!important;background:#101214!important;border-left:1px solid #202938;border-right:1px solid #202938}
.a88-utility{width:100%!important;min-height:26px!important;padding:3px 8px!important;gap:6px!important}
.a88-utility-left{gap:8px!important;overflow:hidden;white-space:nowrap}
.a88-utility-left a,.a88-utility-help{font-size:7px!important;letter-spacing:.2px!important}
.a88-online{font-size:7px!important}
.top{
  position:relative!important;top:auto!important;z-index:30!important;
  width:min(430px,100%)!important;height:auto!important;min-height:58px!important;
  margin:0 auto!important;padding:8px 10px!important;gap:8px!important;
  display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;
  background:linear-gradient(180deg,#17191a,#0c0e0f)!important;
  border-left:1px solid #202938;border-right:1px solid #202938;border-bottom:1px solid #4c3c1c;
  box-shadow:0 6px 16px #0008
}
.top .brand{min-width:0!important}
.top .brand-image{width:132px!important;height:auto!important;max-height:42px!important;object-fit:contain}
.top .hamb{display:block!important;margin-left:auto!important;padding:6px 9px!important;font-size:14px!important;background:#201b10!important;border:1px solid #70551b!important;color:#e4e9f0!important}
.top .account{display:none!important}
.mainnav{
  display:none;position:absolute!important;top:100%!important;left:0!important;right:0!important;
  z-index:100!important;padding:7px!important;background:#111416!important;
  border:1px solid #57451e!important;box-shadow:0 12px 22px #000b!important;
  flex-direction:column!important;gap:0!important
}
.mainnav.open{display:flex!important}
.mainnav a{padding:10px!important;border-bottom:1px solid #202938!important;font-size:10px!important}
.site-ticker{
  width:min(430px,100%)!important;min-height:31px!important;margin:0 auto!important;
  border-radius:0!important;border-left:1px solid #202938!important;border-right:1px solid #202938!important;
  border-top:0!important;background:#17191a!important
}
.ticker-label{font-size:7px!important;padding:0 7px!important}
.ticker-window,.ticker-track{font-size:8px!important}
.a88-category-wrap{
  width:min(430px,100%)!important;margin:0 auto!important;overflow-x:auto!important;
  border-left:1px solid #202938;border-right:1px solid #202938;
  background:#111314!important;scrollbar-width:none
}
.a88-category-wrap::-webkit-scrollbar{display:none}
.a88-category{width:max-content!important;min-width:100%!important;min-height:37px!important;gap:0!important;justify-content:space-around!important;padding:0 3px!important}
.a88-category a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:48px!important;padding:5px 6px!important;font-size:12px!important;white-space:nowrap}
.a88-category a span{font-size:7px!important;letter-spacing:.2px!important}
.layout-shell{
  display:block!important;width:min(430px,100%)!important;max-width:430px!important;
  height:auto!important;min-height:0!important;margin:0 auto!important;padding:10px 10px 24px!important;
  background:linear-gradient(180deg,#111416,#0d0f10 55%,#101112)!important;
  border-left:1px solid #202938;border-right:1px solid #202938
}
.fixed-left,.fixed-right{display:none!important}
.center-scroll{height:auto!important;min-height:0!important;overflow:visible!important;padding:0!important}
.center{width:100%!important;max-width:none!important}
.banner-slider{
  width:100%!important;aspect-ratio:16/7!important;min-height:125px!important;max-height:190px!important;
  margin:0 0 10px!important;border:1px solid #6e551e!important;border-radius:7px!important;
  box-shadow:0 8px 18px #0009!important
}
.banner-slide{padding:10px!important}
.banner-image-slide{padding:0!important}
.a88bet-live-panel{
  margin:10px 0!important;padding:10px!important;border:1px solid #4c4025!important;
  border-radius:7px!important;background:linear-gradient(145deg,#17191b,#0e1011)!important
}
.a88bet-live-panel .widget-heading h2,.a88bet-live-panel h2{font-size:13px!important}
.a88-live-cta-wrap{
  min-height:0!important;display:flex!important;flex-direction:row!important;gap:12px!important;
  margin:8px 0!important;padding:13px 10px!important;border-radius:7px!important
}
.a88-live-orb{flex:0 0 58px!important;width:58px!important;height:58px!important}
.a88-live-orb span{font-size:27px!important}
.a88-live-copy{text-align:left!important}
.a88-live-copy h3{font-size:14px!important}
.a88-live-copy p{font-size:9px!important;line-height:1.4!important;margin-bottom:8px!important}
.a88-live-cta{min-width:0!important;padding:8px 10px!important;font-size:9px!important;box-shadow:0 3px 0 #263d63,0 6px 10px #0008!important}
.a88-live-copy small{font-size:7px!important;margin-top:8px!important}
.quick-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;margin:9px 0 13px!important
}
.quick-card{
  min-height:83px!important;padding:9px!important;border:1px solid #57451f!important;
  border-radius:5px!important;background:linear-gradient(145deg,#202124,#121416)!important;
  box-shadow:inset 0 1px #ffffff0b,0 4px 9px #0006!important
}
.quick-card>span{font-size:18px!important;margin-bottom:4px!important}
.quick-card b{font-size:8px!important;letter-spacing:.2px!important}
.quick-card small{font-size:7px!important;margin:3px 0 6px!important;color:#aaa!important}
.quick-card strong{font-size:7px!important;color:#edc34e!important}
.a88-app-promo{
  display:flex!important;gap:12px!important;min-height:120px!important;margin:12px 0!important;
  padding:13px 11px!important;border-radius:7px!important;border:1px solid #625022!important
}
.a88-app-art{flex:0 0 65px!important;width:65px!important;height:65px!important;border-radius:15px!important}
.a88-app-art span{font-size:26px!important}
.a88-app-kicker{font-size:7px!important}
.a88-app-copy h2{font-size:13px!important;margin:5px 0!important}
.a88-app-copy p{font-size:8px!important;margin-bottom:7px!important}
.a88-app-button{font-size:7px!important;padding:7px 8px!important}
.a88-payment-panel{
  margin:10px 0 14px!important;padding:12px 9px!important;border-radius:6px!important;
  background:linear-gradient(145deg,#171a1b,#0d1011)!important
}
.a88-payment-panel h2{font-size:11px!important}
.a88-payment-panel p{font-size:8px!important}
.a88-payment-methods{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
.a88-payment-methods span{font-size:6px!important;padding:7px 2px!important}
.lower{width:100%!important;margin:12px auto 0!important;padding:17px 2px!important}
.lower-head{text-align:left!important;margin-bottom:12px!important}
.lower-head .kicker{font-size:7px!important;letter-spacing:1.5px!important}
.lower-head h2{font-size:14px!important;line-height:1.35!important;margin:6px 0!important}
.lower-head p{font-size:8px!important;line-height:1.6!important;color:#aaa!important}
.button-cloud{justify-content:flex-start!important;gap:5px!important}
.button-cloud a{font-size:7px!important;padding:6px 8px!important;border-radius:4px!important}
.help{max-width:none!important;padding:12px 2px 18px!important}
.help .lower-head h2{font-size:14px!important}
.help details{padding:10px 3px!important;border-color:#38342a!important}
.help summary{font-size:9px!important}
.help details p{font-size:8px!important;line-height:1.5!important}
.site-footer{
  width:100%!important;margin:12px 0 0!important;padding:12px 8px 8px!important;
  border-radius:0!important;border-top:1px solid #625022!important;background:#0b0d0e!important
}
.site-footer .foot{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;text-align:center!important;padding:8px 0!important}
.site-footer .brand-image{width:110px!important;height:auto!important}
.site-footer .foot p{font-size:7px!important;margin:0!important}
.site-footer .foot>div{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:9px!important;font-size:7px!important}
.site-footer .copyright{font-size:7px!important;text-align:center!important;padding-top:8px!important;margin-top:8px!important}
.scroll-cue{display:none!important}
@media(min-width:431px){
  .layout-shell{box-shadow:0 0 35px #000a}
}
@media(max-width:430px){
  .a88-payment-methods{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .a88-live-cta-wrap{flex-direction:row!important}
}
@media(prefers-reduced-motion:reduce){
  .a88-live-cta-wrap:before,.a88-live-orb{animation:none!important}
}


/* v5 safety layout: restore normal document flow on tablet/mobile; no clipped inner viewport */
.a88-utility-wrap{background:#0b0c0b;border-bottom:1px solid rgba(220,180,83,.18)}
.a88-utility{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.a88-utility-left{display:flex;align-items:center;gap:16px;min-width:0}
.a88-utility-note{font-size:9px;color:#aaa18d;letter-spacing:1px;font-weight:700}
.a88-utility-help{font-size:10px;font-weight:800;color:#ead9a6}
.top{height:94px;min-height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(218,174,72,.24);background:rgba(15,15,9,.96)}
.top .brand-image{width:190px;height:54px;object-fit:contain}
.hamb{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #806323;border-radius:4px;background:#15140f;color:#e9c15c;font-size:22px}
.site-ticker{width:min(1400px,calc(100% - 36px));margin:14px auto 16px;min-height:42px}
.a88-category-wrap{margin:0 auto 18px;border-top:1px solid rgba(220,180,83,.18);border-bottom:1px solid rgba(220,180,83,.2);background:linear-gradient(180deg,#151615,#0e100f)}
.a88-category{min-height:66px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:5px 6px}
.a88-category a{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border:1px solid transparent;border-radius:6px;color:#dedbd2;font-size:18px;line-height:1.1}
.a88-category a span{font-size:9px;font-weight:800;letter-spacing:.45px;white-space:nowrap}
.a88-category a.is-current{background:linear-gradient(180deg,#f2d77f,#c99b3d);border-color:#f0d27a;color:#17130a}
.layout-shell{height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:28px!important}
.center-scroll{height:auto!important;max-height:none!important;overflow:visible!important;padding:0 0 24px!important}
.center{width:100%;max-width:100%}
.banner-slider{width:100%;margin:0 0 18px;aspect-ratio:2.8/1;min-height:170px;max-height:340px}
.banner-image-link,.banner-bg-image{display:block;width:100%;height:100%}
.banner-bg-image{object-fit:cover;object-position:center}
@media(max-width:980px){
 .wrap{width:calc(100% - 32px)!important}
 .top{height:82px;min-height:82px;padding:0 4px}
 .top .brand-image{width:clamp(145px,30vw,185px);height:auto;max-height:52px}
 .site-ticker{width:calc(100% - 32px);margin:14px auto 16px}
 .a88-category-wrap{margin-bottom:16px}
 .a88-category{width:calc(100% - 20px);min-height:64px}
 .layout-shell{display:block!important;width:calc(100% - 32px)!important;max-width:1400px;margin:0 auto;gap:0}
 .fixed-left,.fixed-right{display:none!important}
 .center-scroll{display:block!important;width:100%!important;overflow:visible!important;height:auto!important;max-height:none!important}
 .center{width:100%!important}
}
@media(max-width:600px){
 .a88-utility{min-height:34px}
 .a88-utility-note{display:none}
 .top{height:72px;min-height:72px}
 .top .brand-image{width:145px;max-height:44px}
 .hamb{width:40px;height:40px}
 .site-ticker{width:calc(100% - 22px);margin:11px auto 13px}
 .a88-category-wrap{margin-bottom:14px}
 .a88-category{width:calc(100% - 12px);min-height:60px;gap:1px;padding:4px 0}
 .a88-category a{font-size:16px;padding:6px 1px;gap:4px}
 .a88-category a span{font-size:7.5px;letter-spacing:0}
 .layout-shell{width:calc(100% - 22px)!important}
 .banner-slider{aspect-ratio:1.8/1;min-height:180px;max-height:280px;border-radius:8px}
}


/* v6 public homepage flow: no fixed-height content clipping */
@media (min-width: 0px) {
  .layout-shell { height: auto !important; min-height: 0; }
  .center-scroll { height: auto !important; max-height: none !important; overflow: visible !important; }
  .center { height: auto !important; overflow: visible !important; }
  .top { justify-content: flex-start; }
  .banner-slider { margin-bottom: 18px; }
  .tabs { margin-top: 18px; }
}


/* =========================================================
   828BET GLOBAL DESIGN SYSTEM — BLACK / silver
   Shared public-page shell, spacing and responsive controls
   ========================================================= */
:root{
  --bg:#090a0b;
  --panel:#111315;
  --panel2:#181a1c;
  --silver:#c5cbd4;
  --silver2:#e4e9f0;
  --silver-deep:#7d899b;
  --text:#f4f1e8;
  --muted:#aaa69b;
  --line:rgba(216,180,90,.24);
  --surface-shadow:0 14px 38px rgba(0,0,0,.28);
}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{
  background:
    radial-gradient(ellipse at 50% -15%,rgba(166,126,44,.12),transparent 42%),
    linear-gradient(180deg,#0b0c0d 0%,#090a0b 100%);
  color:var(--text);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
a{transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
.a88-utility-wrap{
  background:#090a0b;
  border-bottom:1px solid rgba(216,180,90,.16);
}
.a88-utility{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.a88-utility-left{display:flex;align-items:center;gap:18px;min-width:0}
.a88-online{display:inline-flex;align-items:center;gap:8px;color:var(--silver2);font-size:10px;font-weight:800;letter-spacing:.55px;white-space:nowrap}
.a88-online i{width:8px;height:8px;border-radius:50%;background:#36c995;box-shadow:0 0 10px #36c99566}
.a88-utility-note{font-size:10px;color:#938d7d;font-weight:700;letter-spacing:1.1px}
.a88-utility-help{display:inline-flex;align-items:center;gap:9px;color:#e9dfc4;font-size:10px;font-weight:800;letter-spacing:.45px;white-space:nowrap}
.a88-utility-help span{color:var(--silver)}
.top.wrap{
  height:96px;min-height:96px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(105deg,#111315,#0c0d0e);
  border-bottom:1px solid var(--line);
}
.top .brand{display:flex;align-items:center;min-width:0}
.top .brand-image{display:block;width:190px;height:54px;max-width:100%;object-fit:contain}
.header-assurance{display:flex;align-items:center;gap:10px;color:#999486;font-size:9px;line-height:1.35;letter-spacing:1px;font-weight:700}
.header-assurance b{color:var(--silver2);font-size:10px;letter-spacing:1.2px}
.assurance-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(216,180,90,.5);border-radius:50%;color:var(--silver2);font-size:14px}
.site-ticker{
  width:min(1200px,calc(100% - 40px));min-height:42px;margin:14px auto 16px;
  display:flex;align-items:center;overflow:hidden;
  border:1px solid rgba(216,180,90,.22);border-radius:5px;
  background:linear-gradient(90deg,#171819,#101112);
}
.ticker-label{position:relative;z-index:1;align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 15px;background:linear-gradient(135deg,#d9b65e,#b88a34);color:#17130b;font-size:10px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.ticker-dot{width:8px;height:8px;border-radius:50%;background:#3b2c0c;box-shadow:0 0 0 3px #3b2c0c1c}
.ticker-window{min-width:0;flex:1;overflow:hidden}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;white-space:nowrap;animation:a88Ticker 42s linear infinite;color:#c9c4b8;font-size:11px;font-weight:600}
.ticker-track i{color:var(--silver);font-style:normal;font-size:16px}
.site-ticker:hover .ticker-track{animation-play-state:paused}
@keyframes a88Ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.a88-category-wrap{
  width:min(1200px,calc(100% - 40px));margin:0 auto 24px;
  border:1px solid rgba(216,180,90,.24);border-radius:7px;
  background:linear-gradient(180deg,#17191a,#101112);
  box-shadow:0 8px 22px #0005;
}
.a88-category{
  width:100%;min-height:76px;padding:9px 10px;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;
}
.a88-category a{
  min-width:0;min-height:56px;padding:9px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid transparent;border-radius:6px;
  color:#d7d3c9;background:transparent;
  font-size:10px;font-weight:800;letter-spacing:.45px;line-height:1.15;
  white-space:nowrap;
}
.a88-category a .nav-icon{font-size:17px;line-height:1;color:var(--silver2)}
.a88-category a span:last-child{font-size:9px}
.a88-category a:hover{background:#ffffff08;border-color:#a887443d;color:#fff}
.a88-category a.is-current{
  color:#17130a;background:linear-gradient(180deg,#c5cbd4,#c69b49);
  border-color:#f3d995;box-shadow:inset 0 1px #fff7,0 3px 9px #0004;
}
.a88-category a.is-current .nav-icon{color:#33250b}
.layout-shell{
  display:block!important;width:min(1000px,calc(100% - 40px))!important;
  height:auto!important;min-height:0!important;margin:0 auto!important;
  padding:0 0 34px!important;
}
.layout-shell>.fixed-left,.layout-shell>.fixed-right{display:none!important}
.layout-shell>.center-scroll{
  display:block!important;width:100%!important;height:auto!important;max-height:none!important;
  min-width:0!important;overflow:visible!important;padding:0!important;
}
.layout-shell .center,.layout-shell .page-center{
  width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
  overflow:visible!important;margin:0 auto!important;
}
.layout-shell .center>*{max-width:100%}
.banner-slider{margin:0 0 26px!important;border:1px solid rgba(216,180,90,.35);border-radius:10px;overflow:hidden;box-shadow:var(--surface-shadow)}
.page-shell{padding-top:0!important}
.crumb{margin:0 0 16px!important;color:#a9a18d;font-size:11px;letter-spacing:.35px}
.crumb a{color:var(--silver2);font-weight:800}
.register-wrap,.layout-shell .page-center{width:100%;max-width:100%;margin:0 auto 42px!important}
.register-hero,.calc-hero{
  padding:clamp(22px,3vw,34px)!important;border:1px solid var(--line)!important;
  border-radius:10px!important;background:
  radial-gradient(ellipse at 92% 5%,rgba(216,180,90,.13),transparent 36%),
  linear-gradient(120deg,#191a1b,#101112 65%,#17150f)!important;
  box-shadow:var(--surface-shadow);
}
.register-hero h1,.calc-hero h1{color:#f7f3e8;letter-spacing:-.7px}
.register-hero p,.calc-hero p{color:#bcb6a8;line-height:1.75}
.form-shell,.calc-card,.promo-card,.panel,.widget,.content-card{
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:linear-gradient(145deg,#191a1b,#111213)!important;
  box-shadow:0 10px 28px #0004;
}
.form-top,.calc-card-head{background:#171819!important;border-color:var(--line)!important}
.form-top h2,.calc-card-head h2{color:#f5f0e3}
.form-top p,.calc-card-head p{color:#aaa394}
.form-tag{background:linear-gradient(135deg,#c5cbd4,#bd9141)!important;color:#19140a!important}
.security-note{border-color:var(--line)!important;color:#bdb6a6!important}
.btn,.register-actions a,.calc-actions button,button[type=submit],input[type=submit]{
  min-height:42px;border-radius:6px;font-weight:800;letter-spacing:.2px;
}
.btn-yellow,.btn-primary,.submit-btn{
  background:linear-gradient(180deg,#c5cbd4,#c49a4b)!important;color:#17130a!important;
  border:1px solid #e7c878!important;box-shadow:inset 0 1px #fff8,0 3px 0 #765522!important;
}
.btn-dark{background:#17191a!important;border:1px solid #746039!important;color:#ead7a5!important}
input:not([type=checkbox]):not([type=radio]),select,textarea,.calc-input,.calc-select{
  max-width:100%;border:1px solid #51452b!important;border-radius:6px!important;
  background:#0d0f10!important;color:#f4f0e5!important;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(216,180,90,.28)!important;border-color:#c9a451!important}
label,.field-label{color:#e5d8b5}
table{border-color:var(--line)}
th{background:#202630;color:var(--silver2)}
td{border-color:#34302a}
.site-footer{
  width:min(1200px,calc(100% - 40px))!important;margin:20px auto 0!important;
  padding:24px!important;border:1px solid var(--line)!important;border-radius:9px!important;
  background:#0e1011!important;color:#aaa394;
}
.site-footer a:hover{color:var(--silver2)}
@media(max-width:760px){
  .wrap{width:calc(100% - 24px)}
  .a88-utility{min-height:36px}
  .a88-utility-note{display:none}
  .top.wrap{height:78px;min-height:78px;padding:0 12px}
  .top .brand-image{width:156px;height:auto;max-height:48px}
  .header-assurance{font-size:8px}
  .assurance-mark{width:27px;height:27px}
  .site-ticker{width:calc(100% - 24px);margin:12px auto 14px;min-height:40px}
  .ticker-label{padding:0 10px;font-size:9px}
  .ticker-track{font-size:10px;gap:18px}
  .a88-category-wrap{width:calc(100% - 24px);margin-bottom:20px;overflow:hidden}
  .a88-category{
    width:100%;display:flex;gap:7px;min-height:0;padding:8px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
    scrollbar-color:#8e7138 #171819;
  }
  .a88-category a{flex:0 0 78px;min-height:58px;padding:8px 5px;gap:5px}
  .a88-category a .nav-icon{font-size:16px}
  .a88-category a span:last-child{font-size:8px}
  .layout-shell{width:calc(100% - 24px)!important;padding-bottom:24px!important}
  .banner-slider{margin-bottom:20px!important}
  .register-wrap,.layout-shell .page-center{margin-bottom:28px!important}
  .register-hero,.calc-hero{padding:20px!important}
  .form-shell{margin-top:14px}
  .form-top{padding:15px}
  .security-note{padding:13px 15px}
  .calc-layout{grid-template-columns:minmax(0,1fr)!important}
  .leg{grid-template-columns:30px minmax(0,1fr) 82px 30px;gap:6px}
  .site-footer{width:calc(100% - 24px)!important;padding:18px!important}
}
@media(max-width:420px){
  .a88-utility-help{font-size:9px}
  .top .brand-image{width:136px}
  .header-assurance{gap:6px;font-size:7px}
  .header-assurance b{font-size:8px}
  .a88-category a{flex-basis:72px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Privacy and long-form content share the same public surface treatment */
.privacy-content{width:min(980px,calc(100% - 40px))!important;margin:0 auto 40px!important;padding:0 0 30px!important}
.privacy-hero,.privacy-card{border:1px solid var(--line)!important;border-radius:9px!important;background:linear-gradient(145deg,#191a1b,#111213)!important;box-shadow:0 10px 28px #0004}
.privacy-hero{padding:clamp(22px,3vw,34px)!important;margin-bottom:16px}
.privacy-card{padding:22px!important;margin:12px 0}
.privacy-content h1,.privacy-content h2{color:#f5f0e3}
.privacy-content p,.privacy-content li{color:#bcb6a8;line-height:1.8}
@media(max-width:760px){.privacy-content{width:calc(100% - 24px)!important}.privacy-card{padding:16px!important}}

/* Final responsive readability pass */
@media(max-width:760px){
  .lower-head h2,.help .lower-head h2{font-size:clamp(18px,4.5vw,23px)!important;line-height:1.3!important}
  .lower-head p,.help details p{font-size:12px!important;line-height:1.65!important}
  .quick-card{min-height:112px!important;padding:13px!important}
  .quick-card>span{font-size:23px!important}
  .quick-card b{font-size:10px!important}
  .quick-card small,.quick-card strong{font-size:9px!important}
  .a88-app-promo{min-height:140px!important;padding:16px!important;gap:14px!important}
  .a88-app-art{width:76px!important;height:76px!important;flex-basis:76px!important}
  .a88-app-copy h2{font-size:16px!important}
  .a88-app-copy p{font-size:11px!important;line-height:1.55!important}
  .a88-app-button{font-size:10px!important;padding:9px 12px!important}
  .a88-payment-panel{padding:16px!important}
  .a88-payment-panel h2{font-size:15px!important}
  .a88-payment-panel p{font-size:11px!important}
  .a88-payment-methods{gap:7px!important}
  .a88-payment-methods span{font-size:9px!important;padding:9px 5px!important}
  .button-cloud{gap:8px!important}
  .button-cloud a{font-size:10px!important;padding:8px 11px!important}
  .site-footer .foot p,.site-footer .foot>div,.site-footer .copyright{font-size:10px!important;line-height:1.6!important}
}


/* =========================================================
   v8 — CONSISTENT PUBLIC HEADER + BLACK/silver PAGE SYSTEM
   Navigation stays visible on desktop, tablet and mobile.
   ========================================================= */
:root{
  --bg:#090a0b;
  --panel:#121416;
  --panel2:#191b1d;
  --silver:#c5cbd4;
  --silver2:#c5cbd4;
  --silver-deep:#7d899b;
  --text:#f4f1e8;
  --muted:#aaa69b;
  --line:rgba(216,180,90,.25);
}
body{
  background:
    radial-gradient(ellipse at 50% 0,rgba(183,145,61,.10),transparent 38%),
    #090a0b !important;
  color:var(--text) !important;
}
.ambient{opacity:.08 !important}
.a88-utility-wrap{background:#090a0b!important;border-bottom:1px solid var(--line)!important}
.a88-utility{min-height:38px!important}
.top.wrap{
  display:flex!important;
  height:88px!important;min-height:88px!important;
  align-items:center!important;justify-content:space-between!important;
  padding:0 22px!important;
  background:linear-gradient(110deg,#141516,#0d0e0f)!important;
  border-bottom:1px solid var(--line)!important;
}
.top .brand-image{width:184px!important;height:54px!important;max-height:54px!important;object-fit:contain!important}
.header-assurance{display:flex!important}
.hamb,.top .hamb,.menu-toggle,.mobile-menu-toggle{display:none!important;visibility:hidden!important}
.site-ticker{
  width:min(1200px,calc(100% - 40px))!important;
  min-height:42px!important;margin:16px auto 18px!important;
  border:1px solid var(--line)!important;border-radius:5px!important;
  background:linear-gradient(90deg,#171819,#101112)!important;
}
.a88-category-wrap{
  display:block!important;visibility:visible!important;
  width:min(1200px,calc(100% - 40px))!important;
  margin:0 auto 26px!important;
  overflow:visible!important;
  border:1px solid var(--line)!important;border-radius:7px!important;
  background:linear-gradient(180deg,#17191a,#101112)!important;
}
.a88-category{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  width:100%!important;min-height:72px!important;
  gap:8px!important;padding:9px 10px!important;
  overflow:visible!important;
}
.a88-category a{
  display:flex!important;min-width:0!important;min-height:54px!important;
  align-items:center!important;justify-content:center!important;flex-direction:column!important;
  gap:6px!important;padding:8px 4px!important;
  border:1px solid transparent!important;border-radius:6px!important;
  color:#ded9cc!important;background:transparent!important;
  font-size:10px!important;font-weight:800!important;line-height:1.15!important;
  white-space:nowrap!important;
}
.a88-category a .nav-icon{font-size:17px!important;color:var(--silver2)!important;line-height:1!important}
.a88-category a span:last-child{font-size:9px!important;letter-spacing:.35px!important}
.a88-category a.is-current{
  color:#17130a!important;
  background:linear-gradient(180deg,#c5cbd4,#c69b49)!important;
  border-color:#f3d995!important;
  box-shadow:inset 0 1px #fff7,0 3px 9px #0004!important;
}
.a88-category a.is-current .nav-icon{color:#33250b!important}
.layout-shell{
  width:min(1200px,calc(100% - 40px))!important;
  margin:0 auto!important;padding:0 0 34px!important;
  height:auto!important;min-height:0!important;
}
.layout-shell>.fixed-left,.layout-shell>.fixed-right{display:none!important}
.layout-shell>.center-scroll{
  display:block!important;width:100%!important;height:auto!important;
  max-height:none!important;min-width:0!important;overflow:visible!important;padding:0!important;
}
.layout-shell .center,.layout-shell .page-center{
  width:100%!important;max-width:100%!important;height:auto!important;
  min-height:0!important;overflow:visible!important;margin:0 auto!important;
}
.layout-shell .center>*{max-width:100%}
.page-shell{padding-top:0!important}
.crumb{margin:0 0 18px!important;color:#aaa18d!important}
.register-wrap,.layout-shell .page-center{width:100%!important;max-width:100%!important;margin:0 auto 38px!important}
.register-hero,.calc-hero,.promo-hero,.privacy-hero{
  color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:10px!important;
  background:
    radial-gradient(ellipse at 92% 5%,rgba(216,180,90,.13),transparent 35%),
    linear-gradient(125deg,#1b1b19,#101112 66%,#17140e)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.30)!important;
}
.register-hero h1,.calc-hero h1,.promo-hero h1,.privacy-hero h1{color:#c5cbd4!important}
.register-hero p,.calc-hero p,.promo-hero p{color:#c5c0b4!important}
.promo-hero{padding:clamp(22px,3vw,34px)!important;margin:0 0 18px!important}
.promo-hero h1{font-size:clamp(28px,4vw,42px)!important;line-height:1.15!important}
.promo-eyebrow{color:var(--silver2)!important}
.promo-summary-item,.promo-card,.promo-legacy,.promo-important{
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:linear-gradient(145deg,#191a1b,#101112)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.25)!important;
}
.promo-summary-item span{color:#c4bdad!important}
.promo-summary-item strong,.promo-rate{color:#c5cbd4!important}
.promo-card h2,.promo-card h3,.promo-card .promo-terms{color:#eee9dc!important}
.promo-card p,.promo-card li{color:#bdb7aa!important;line-height:1.75!important}
.promo-example{background:#0d0f10!important;border:1px solid rgba(216,180,90,.2)!important;border-radius:7px!important}
.form-shell,.calc-card,.content-card,.panel,.widget{
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:linear-gradient(145deg,#191a1b,#111213)!important;
  box-shadow:0 10px 28px #0004!important;
}
.form-top,.calc-card-head{background:#171819!important;border-color:var(--line)!important}
.form-tag{background:linear-gradient(135deg,#c5cbd4,#bd9141)!important;color:#19140a!important}
.security-note{border-color:var(--line)!important;color:#bdb6a6!important}
.btn-yellow,.btn-primary,.submit-btn,button[type=submit],input[type=submit]{
  background:linear-gradient(180deg,#c5cbd4,#c49a4b)!important;color:#17130a!important;
  border:1px solid #e7c878!important;box-shadow:inset 0 1px #fff8,0 3px 0 #765522!important;
}
.btn-dark{background:#17191a!important;border:1px solid #746039!important;color:#ead7a5!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  max-width:100%!important;background:#0d0f10!important;color:#f4f0e5!important;
  border:1px solid #51452b!important;border-radius:6px!important;
}
.site-footer{
  width:min(1200px,calc(100% - 40px))!important;margin:24px auto 0!important;
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:#0e1011!important;color:#aaa394!important;
}
@media(max-width:760px){
  .wrap{width:calc(100% - 24px)!important}
  .top.wrap{height:76px!important;min-height:76px!important;padding:0 12px!important}
  .top .brand-image{width:150px!important;height:auto!important;max-height:46px!important}
  .header-assurance{display:flex!important}
  .site-ticker{width:calc(100% - 24px)!important;margin:12px auto 16px!important}
  .a88-category-wrap{width:calc(100% - 24px)!important;margin:0 auto 22px!important;overflow:visible!important}
  .a88-category{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:3px!important;padding:7px 5px!important;min-height:64px!important;
    overflow:visible!important;
  }
  .a88-category a{min-height:50px!important;padding:6px 1px!important;gap:4px!important}
  .a88-category a .nav-icon{font-size:15px!important}
  .a88-category a span:last-child{font-size:clamp(6px,1.25vw,8px)!important;letter-spacing:0!important}
  .layout-shell{width:calc(100% - 24px)!important;padding-bottom:24px!important}
  .promo-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .promo-summary-item{padding:10px 8px!important;gap:5px!important;flex-direction:column!important;align-items:flex-start!important}
  .promo-summary-item strong{font-size:20px!important}
  .promo-summary-item span{font-size:9px!important}
  .promo-hero{padding:20px!important}
  .register-hero,.calc-hero{padding:20px!important}
  .site-footer{width:calc(100% - 24px)!important}
}
@media(max-width:380px){
  .top .brand-image{width:128px!important}
  .header-assurance{font-size:7px!important}
  .assurance-mark{width:23px!important;height:23px!important}
  .a88-category a span:last-child{font-size:6px!important}
  .a88-category a .nav-icon{font-size:14px!important}
}


/* v9 DESKTOP WIDTH REPAIR — remove inherited narrow/mobile shell constraints */
html,body{width:100%!important;min-width:320px!important}
body{overflow-x:hidden!important}
.top.wrap,
.a88-utility,
.a88-utility-wrap,
.site-ticker,
.a88-category-wrap,
.layout-shell,
.site-footer{
  width:min(1200px,calc(100% - 48px))!important;
  max-width:1200px!important;
  margin-left:auto!important;margin-right:auto!important;
}
.top.wrap{
  min-height:92px!important;height:92px!important;
  padding:0 28px!important;
}
.top .brand-image{width:205px!important;max-width:42vw!important;height:60px!important}
.a88-utility-wrap{width:100%!important;max-width:none!important}
.a88-utility{width:min(1200px,calc(100% - 48px))!important}
.site-ticker{margin-top:16px!important;margin-bottom:18px!important}
.a88-category-wrap{margin-top:0!important;margin-bottom:28px!important}
.a88-category{min-height:76px!important;padding:10px 16px!important;gap:12px!important}
.a88-category a{min-height:54px!important;font-size:11px!important}
.layout-shell{
  display:block!important;
  max-width:1200px!important;width:min(1200px,calc(100% - 48px))!important;
  padding:0 0 40px!important;margin:0 auto!important;
  border-left:1px solid rgba(216,180,90,.16)!important;
  border-right:1px solid rgba(216,180,90,.16)!important;
  background:linear-gradient(180deg,#111416,#0d0f10 55%,#101112)!important;
}
.layout-shell>.center-scroll,
.layout-shell .center,
.layout-shell .page-center{
  width:100%!important;max-width:none!important;
  min-width:0!important;height:auto!important;max-height:none!important;
  overflow:visible!important;margin:0!important;padding:0!important;
}
.layout-shell .center>*{width:100%;max-width:100%}
.layout-shell .page-center,.register-wrap{width:100%!important;max-width:1120px!important;margin:0 auto 42px!important;padding:0 22px!important}
.calc-layout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;gap:20px!important}
.calc-card{min-width:0!important}
.promo-hero,.promo-summary,.promo-grid,.promo-content{max-width:1120px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:760px){
  .top.wrap,.site-ticker,.a88-category-wrap,.layout-shell,.site-footer{
    width:calc(100% - 24px)!important;max-width:none!important;
  }
  .a88-utility{width:calc(100% - 24px)!important}
  .top.wrap{min-height:76px!important;height:76px!important;padding:0 12px!important}
  .top .brand-image{width:150px!important;max-width:55vw!important;height:auto!important}
  .layout-shell{padding:0 0 26px!important}
  .layout-shell .page-center,.register-wrap{padding:0 12px!important}
  .calc-layout{grid-template-columns:minmax(0,1fr)!important}
}
@media(min-width:761px){
  .a88-category{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  .a88-category a{white-space:normal!important}
  .layout-shell .page-center{padding-left:22px!important;padding-right:22px!important}
}


/* ==========================================================
   v11 — DESKTOP COMPOSITION & RESPONSIVE SCALE REFINEMENT
   ========================================================== */
:root{--site-max:1120px;--site-gutter:clamp(16px,3vw,32px)}
html,body{width:100%;min-width:320px;overflow-x:hidden}
body{font-size:14px;line-height:1.55}
.top.wrap,
.site-ticker,
.a88-category-wrap,
.layout-shell,
.site-footer{
  width:min(var(--site-max),calc(100% - (var(--site-gutter) * 2)))!important;
  max-width:var(--site-max)!important;
  margin-left:auto!important;margin-right:auto!important;
}
.a88-utility-wrap{width:100%!important}
.a88-utility{width:min(var(--site-max),calc(100% - (var(--site-gutter) * 2)))!important;margin:0 auto!important}
.top.wrap{
  min-height:88px!important;height:auto!important;
  padding:14px clamp(18px,2.5vw,30px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.top .brand-image{width:clamp(160px,18vw,210px)!important;height:auto!important;max-height:64px!important;object-fit:contain!important}
.site-ticker{min-height:42px!important;margin:16px auto 18px!important}
.a88-category-wrap{margin:0 auto clamp(20px,2.4vw,30px)!important;overflow:hidden!important}
.a88-category{
  width:100%!important;min-height:72px!important;
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  align-items:stretch!important;gap:clamp(5px,.8vw,10px)!important;
  padding:9px clamp(8px,1.2vw,14px)!important;
}
.a88-category a{
  min-width:0!important;min-height:54px!important;padding:8px 5px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;white-space:normal!important;gap:5px!important;
}
.a88-category a .nav-icon{font-size:clamp(14px,1.4vw,19px)!important}
.a88-category a span:last-child{font-size:clamp(8px,.82vw,11px)!important;line-height:1.15!important;letter-spacing:.2px!important}
.layout-shell{
  display:block!important;height:auto!important;min-height:0!important;
  padding:0 0 clamp(28px,3vw,42px)!important;margin:0 auto!important;
  overflow:visible!important;
}
.layout-shell>.fixed-left,.layout-shell>.fixed-right{display:none!important}
.layout-shell>.center-scroll,
.layout-shell .center,
.layout-shell .page-center{
  display:block!important;width:100%!important;max-width:none!important;min-width:0!important;
  height:auto!important;max-height:none!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:visible!important;
}
.layout-shell .center>*{width:100%;max-width:100%;min-width:0}
.banner-slider{
  width:100%!important;aspect-ratio:4/1!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0 0 clamp(16px,2vw,24px)!important;
  overflow:hidden!important;border-radius:10px!important;
}
.banner-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.banner-slide.banner-image-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  padding:0!important;overflow:hidden!important;transform:none!important;
  transition:opacity .6s ease,visibility .6s ease!important;
}
.banner-slide.banner-image-slide:not(.is-active){opacity:0!important;visibility:hidden!important}
.banner-slide.banner-image-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important}
.banner-image-link{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.banner-bg-image{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
}
.center .a88bet-live-panel,
.center .a88-live-cta-wrap,
.center .quick-grid,
.center .a88-app-promo,
.center .a88-payment-panel,
.center .lower,
.center .faq,
.center .site-footer{
  width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;
}
.quick-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.quick-card{min-width:0!important;min-height:120px!important;padding:18px!important;text-align:left!important}
.a88-payment-methods{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.a88-payment-methods>*{min-width:0!important;text-align:center!important}
.a88-app-promo{display:flex!important;align-items:center!important;gap:20px!important}
.lower-head,.lower-content,.faq,.faq details,.a88-payment-panel{text-align:left}
.lower,.faq,.a88-payment-panel{margin-top:16px!important}
.lower h1,.lower h2,.lower h3,.faq h2,.a88-payment-panel h2{text-align:left!important}
.site-footer{margin-top:24px!important}
@media(min-width:1200px){
  .layout-shell{padding-left:0!important;padding-right:0!important}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  :root{--site-gutter:18px}
  .top.wrap{min-height:76px!important;padding:10px 16px!important}
  .top .brand-image{width:clamp(145px,24vw,185px)!important}
  .a88-category{min-height:64px!important;gap:4px!important;padding:7px 5px!important}
  .a88-category a{min-height:48px!important;padding:6px 2px!important}
  .a88-category a span:last-child{font-size:clamp(7px,1.05vw,9px)!important}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .a88-payment-methods{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:600px){
  :root{--site-gutter:10px}
  body{font-size:13px}
  .top.wrap{min-height:66px!important;padding:8px 10px!important}
  .top .brand-image{width:clamp(122px,39vw,155px)!important;max-height:46px!important}
  .site-ticker{min-height:35px!important;margin:10px auto 12px!important}
  .a88-category-wrap{margin-bottom:14px!important}
  .a88-category{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:1px!important;padding:5px 2px!important;min-height:56px!important}
  .a88-category a{min-height:44px!important;padding:4px 1px!important;gap:3px!important}
  .a88-category a .nav-icon{font-size:clamp(11px,3.4vw,15px)!important}
  .a88-category a span:last-child{font-size:clamp(5.5px,1.55vw,7.5px)!important;letter-spacing:0!important}
  .banner-slider{aspect-ratio:4/1!important;border-radius:7px!important;margin-bottom:12px!important}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .quick-card{min-height:100px!important;padding:12px!important}
  .a88-payment-methods{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .a88-app-promo{gap:12px!important;align-items:center!important}
  .layout-shell{padding-bottom:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .banner-slide.banner-image-slide{transition:none!important}
}


/* ==========================================================
   828BET MOBILE-SHELL v12
   Fixed mobile canvas (320–480px), centered on desktop.
   ========================================================== */
:root{
  --a88-mobile-width:480px;
  --a88-mobile-gutter:12px;
}
html,body{
  width:100%!important;min-width:320px!important;
  min-height:100%!important;margin:0!important;
  overflow-x:hidden!important;
}
html{background:#080909!important}
body{
  max-width:none!important;
  background:
    radial-gradient(ellipse at 50% 0,rgba(191,151,54,.10),transparent 38%),
    #080909!important;
  color:#f4f0e5!important;
  font-size:13px!important;
}
/* The public site becomes one centered mobile canvas even on desktop. */
.a88-utility-wrap,
.top.wrap,
.site-ticker,
.a88-category-wrap,
.layout-shell,
.site-footer,
body>header,
body>main,
body>footer{
  width:min(var(--a88-mobile-width),100%)!important;
  max-width:var(--a88-mobile-width)!important;
  margin-left:auto!important;margin-right:auto!important;
}
.a88-utility-wrap{width:100%!important;max-width:none!important}
.a88-utility{
  width:min(var(--a88-mobile-width),100%)!important;
  max-width:var(--a88-mobile-width)!important;
  margin:0 auto!important;padding:0 10px!important;
  min-height:32px!important;
}
.top.wrap{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  min-height:70px!important;height:auto!important;
  padding:9px 14px!important;gap:8px!important;
  box-sizing:border-box!important;
}
.top .brand-image{
  display:block!important;width:clamp(120px,38vw,158px)!important;
  max-width:62%!important;height:auto!important;max-height:48px!important;
  object-fit:contain!important;
}
.header-assurance{max-width:36%!important;font-size:8px!important}
.site-ticker{
  min-height:37px!important;height:auto!important;
  margin:10px auto 12px!important;padding:0!important;
  overflow:hidden!important;
}
.a88-category-wrap{
  display:block!important;overflow:hidden!important;
  margin:0 auto 14px!important;
  border-radius:6px!important;
}
.a88-category{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  width:100%!important;min-width:0!important;min-height:56px!important;
  gap:1px!important;padding:5px 3px!important;overflow:hidden!important;
}
.a88-category a{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:44px!important;
  padding:4px 1px!important;gap:3px!important;
  white-space:normal!important;text-align:center!important;
}
.a88-category a .nav-icon{
  font-size:clamp(11px,3.3vw,15px)!important;line-height:1!important;
}
.a88-category a span:last-child{
  display:block!important;max-width:100%!important;
  font-size:clamp(5.5px,1.55vw,7.5px)!important;
  line-height:1.08!important;letter-spacing:0!important;
  overflow-wrap:anywhere!important;
}
.layout-shell{
  display:block!important;position:relative!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  padding:0 0 22px!important;margin:0 auto!important;
  overflow:visible!important;box-sizing:border-box!important;
}
.layout-shell>.fixed-left,.layout-shell>.fixed-right{display:none!important}
.layout-shell>.center-scroll,
.layout-shell .center,
.layout-shell .page-center{
  display:block!important;position:relative!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;overflow:visible!important;
}
.layout-shell .center>*{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;
}
/* All public page content uses the same inner gutters. */
.page-shell,.register-wrap,.layout-shell .page-center,.promo-page,.privacy-page,
.form-shell,.calc-card,.promo-hero,.promo-grid,.promo-summary,
.content-card,.lower,.faq,.a88bet-live-panel,.a88-live-cta-wrap,
.quick-grid,.a88-app-promo,.a88-payment-panel{
  max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;
}
.register-wrap,.layout-shell .page-center{width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:12px!important;padding-right:12px!important}
.promo-hero,.promo-grid,.promo-summary,.promo-content{width:calc(100% - 24px)!important;margin-left:auto!important;margin-right:auto!important}
.quick-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.quick-card{min-width:0!important;padding:11px!important;min-height:94px!important}
.a88bet-live-panel{margin:10px 0!important;padding:10px!important}
.a88-live-cta-wrap{padding:16px 12px!important;gap:10px!important}
.a88-app-promo{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.a88-payment-methods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.form-shell,.calc-card,.promo-card,.content-card,.panel,.widget{
  width:100%!important;max-width:100%!important;min-width:0!important;
}
input,select,textarea,button{max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
iframe,video,img,svg,canvas{max-width:100%!important}
table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important}
.site-footer{margin:18px auto 0!important;padding:12px!important;box-sizing:border-box!important}
/* Banner image keeps its intrinsic artwork ratio inside a mobile banner frame. */
.banner-slider{
  display:block!important;position:relative!important;
  width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important;
  height:auto!important;aspect-ratio:4/1!important;
  min-height:0!important;max-height:none!important;
  margin:0 auto 12px!important;overflow:hidden!important;
  border-radius:7px!important;isolation:isolate!important;
}
.banner-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.banner-slide.banner-image-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;padding:0!important;
  overflow:hidden!important;transform:none!important;
  transition:opacity .55s ease,visibility .55s ease!important;
}
.banner-slide.banner-image-slide:not(.is-active){opacity:0!important;visibility:hidden!important}
.banner-slide.banner-image-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important}
.banner-image-link{
  position:absolute!important;inset:0!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;overflow:hidden!important;
}
.banner-bg-image{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center center!important;
}
@media(min-width:481px){
  body{padding:0!important}
}
@media(max-width:360px){
  .top.wrap{min-height:64px!important;padding:7px 10px!important}
  .top .brand-image{width:116px!important}
  .a88-category{padding-left:2px!important;padding-right:2px!important}
  .a88-category a span:last-child{font-size:5.2px!important}
  .promo-hero{padding:16px!important}
  .promo-summary{gap:5px!important}
  .promo-summary-item{padding:8px 6px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .banner-slide.banner-image-slide{transition:none!important}
}


/* ==========================================================
   v13 — MOBILE CANVAS INNER GUTTERS + EDITORIAL / FAQ RHYTHM
   Keep a clear, even inset between every section and the shell.
   ========================================================== */
:root{--a88-inner-space:14px}
.layout-shell{
  padding:0!important;
  overflow:hidden!important;
}
.layout-shell>.center-scroll{
  width:100%!important;
  padding:0 var(--a88-inner-space) 24px!important;
  box-sizing:border-box!important;
}
.layout-shell .center,
.layout-shell .page-center{
  width:100%!important;max-width:100%!important;
  margin:0!important;padding:0!important;
  box-sizing:border-box!important;
}
.layout-shell .center>*{
  max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;
}
/* Banner: align with the same inner gutter as all other sections. */
.banner-slider{
  width:100%!important;max-width:100%!important;
  margin:0 0 14px!important;
}
/* Main live score panel and category tiles now have equal breathing room. */
.a88bet-live-panel,
.a88-live-cta-wrap,
.quick-grid,
.a88-app-promo,
.a88-payment-panel{
  width:100%!important;max-width:100%!important;
  margin-left:0!important;margin-right:0!important;
}
.a88bet-live-panel{padding:14px!important;margin-top:12px!important;margin-bottom:12px!important}
.a88-live-cta-wrap{padding:16px!important}
.quick-grid{gap:8px!important;margin-top:12px!important;margin-bottom:12px!important}
.quick-card{padding:13px!important;min-height:104px!important}
.a88-app-promo{padding:14px!important;margin-top:12px!important;margin-bottom:12px!important}
.a88-payment-panel{padding:14px!important;margin-top:12px!important;margin-bottom:14px!important}
/* Editorial/article block: readable line length, clear section hierarchy. */
.layout-shell .center .lower{
  display:block!important;
  width:100%!important;max-width:100%!important;
  margin:16px 0 18px!important;
  padding:16px 14px!important;
  border:1px solid rgba(216,180,90,.25)!important;
  border-radius:9px!important;
  background:linear-gradient(145deg,rgba(22,24,25,.98),rgba(13,15,16,.98))!important;
  box-sizing:border-box!important;
  text-align:left!important;
}
.layout-shell .center .lower-head{max-width:100%!important;margin:0!important}
.layout-shell .center .lower-head .kicker{
  display:block!important;margin:0 0 8px!important;
  color:#e3bd62!important;letter-spacing:1.2px!important;
}
.layout-shell .center .lower h1,
.layout-shell .center .lower h2{
  margin:0 0 12px!important;
  text-align:left!important;line-height:1.35!important;
}
.layout-shell .center .lower p{
  margin:0 0 12px!important;
  color:#c5c0b5!important;
  font-size:12px!important;line-height:1.75!important;
  overflow-wrap:anywhere!important;
}
.layout-shell .center .button-cloud{
  display:flex!important;flex-wrap:wrap!important;
  gap:7px!important;margin:14px 0 0!important;
}
.layout-shell .center .button-cloud a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:30px!important;padding:6px 10px!important;
  border-radius:5px!important;
}
/* FAQ is a separate, padded help panel rather than text against the shell edge. */
.layout-shell .center .lower.help{
  margin:16px 0 18px!important;
  padding:16px 14px 10px!important;
}
.layout-shell .center .lower.help .lower-head{margin-bottom:10px!important}
.layout-shell .center .lower.help details{
  display:block!important;margin:0!important;padding:0!important;
  border-top:1px solid rgba(216,180,90,.22)!important;
}
.layout-shell .center .lower.help details:last-child{
  border-bottom:1px solid rgba(216,180,90,.22)!important;
}
.layout-shell .center .lower.help summary{
  display:block!important;position:relative!important;
  padding:13px 5px 13px 20px!important;
  color:#f1ead9!important;font-weight:700!important;
  line-height:1.45!important;cursor:pointer!important;
  list-style:none!important;
}
.layout-shell .center .lower.help summary::-webkit-details-marker{display:none!important}
.layout-shell .center .lower.help summary:before{
  content:"›";position:absolute;left:4px;top:11px;
  color:#e4bd62;font-size:17px;font-weight:900;
}
.layout-shell .center .lower.help details[open] summary:before{content:"⌄"}
.layout-shell .center .lower.help details p{
  margin:0!important;padding:0 8px 13px 20px!important;
  color:#bdb7a9!important;font-size:11px!important;line-height:1.7!important;
}
/* Footer gets its own inset and breathing room from the FAQ panel. */
.layout-shell .center .site-footer{
  width:100%!important;max-width:100%!important;
  margin:18px 0 0!important;padding:14px!important;
  border-radius:10px!important;box-sizing:border-box!important;
}
.layout-shell .center .site-footer .foot{
  padding:8px 0 14px!important;text-align:center!important;
}
.layout-shell .center .site-footer .foot>div{
  display:flex!important;justify-content:center!important;flex-wrap:wrap!important;
  gap:12px!important;margin-top:10px!important;
}
.layout-shell .center .site-footer .copyright{
  margin-top:12px!important;padding-top:12px!important;text-align:center!important;
}
/* Consistent spacing on narrow 320px screens without horizontal overflow. */
@media(max-width:360px){
  :root{--a88-inner-space:10px}
  .layout-shell .center .lower,
  .layout-shell .center .lower.help{padding:13px 11px!important}
  .a88bet-live-panel{padding:11px!important}
  .quick-card{padding:10px!important}
  .layout-shell .center .site-footer{padding:11px!important}
}


/* ==========================================================
   v14 — BANNER FULL-WIDTH ART + CALCULATOR SINGLE-COLUMN FIX
   Scope: banner and calculator only.
   ========================================================== */

/* Banner artwork fills the complete framed area: no black side gaps. */
.banner-slider{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  aspect-ratio:4/1!important;
  overflow:hidden!important;
  background:#080909!important;
  border:1px solid rgba(216,180,90,.55)!important;
}
.banner-slider .banner-track,
.banner-slider .banner-slide.banner-image-slide,
.banner-slider .banner-image-link{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.banner-slider .banner-image-link{
  display:block!important;
  background:#080909!important;
}
.banner-slider .banner-bg-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* The site is a 480px mobile canvas even on desktop.
   A two-column calculator cannot fit inside that canvas:
   stack the input card and result card vertically. */
.layout-shell .page-center{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:12px auto 28px!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .calc-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:stretch!important;
}
.layout-shell .page-center .calc-card,
.layout-shell .page-center .result-card{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .calc-card-head{
  width:100%!important;
  min-width:0!important;
  gap:8px!important;
  padding:14px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .calc-card-head h2{
  font-size:16px!important;
  line-height:1.35!important;
}
.layout-shell .page-center .calc-card-head p{
  font-size:11px!important;
  line-height:1.5!important;
}
.layout-shell .page-center .calc-body{
  width:100%!important;
  min-width:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .leg-list{
  width:100%!important;
  min-width:0!important;
}
.layout-shell .page-center .leg{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) minmax(76px,100px) 30px!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  padding:9px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .leg>*{min-width:0!important}
.layout-shell .page-center .leg .calc-input,
.layout-shell .page-center .leg .calc-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.layout-shell .page-center .calc-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.layout-shell .page-center .calc-btn{
  min-height:40px!important;
  white-space:normal!important;
}
.layout-shell .page-center .stake-wrap{
  width:100%!important;
  max-width:100%!important;
  margin-top:14px!important;
}
.layout-shell .page-center .result-main{
  padding:20px 12px!important;
  text-align:center!important;
}
.layout-shell .page-center .total-odds{
  font-size:clamp(36px,10vw,52px)!important;
  line-height:1.1!important;
}
.layout-shell .page-center .result-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:12px!important;
}
.layout-shell .page-center .result-stats .stat{
  min-width:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .result-stats .stat strong{
  overflow-wrap:anywhere!important;
  font-size:clamp(14px,4vw,19px)!important;
}
.layout-shell .page-center .result-card .calc-body,
.layout-shell .page-center .result-card .result-note{
  min-width:0!important;
}
.layout-shell .page-center .result-card p,
.layout-shell .page-center .result-card .result-note{
  overflow-wrap:anywhere!important;
  line-height:1.65!important;
}
@media(max-width:360px){
  .layout-shell .page-center{padding-left:10px!important;padding-right:10px!important}
  .layout-shell .page-center .leg{
    grid-template-columns:28px minmax(0,1fr) 78px 28px!important;
    gap:5px!important;padding:7px!important;
  }
  .layout-shell .page-center .calc-body{padding:10px!important}
  .layout-shell .page-center .result-stats{gap:6px!important;padding:9px!important}
  .layout-shell .page-center .result-stats .stat{padding:9px!important}
}


/* v15 — banner height + clean calculator composition */
.banner-slider{
  aspect-ratio:3.35/1!important;
  min-height:0!important;
}
.banner-slider .banner-bg-image{
  object-fit:cover!important;
  object-position:center center!important;
}
@media(max-width:360px){
  .banner-slider{aspect-ratio:3.2/1!important}
}

/* Calculator: single-column mobile canvas; no squeezed side-by-side cards. */
.layout-shell .page-center{
  width:100%!important;max-width:100%!important;
  margin:12px auto 28px!important;padding:0 12px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .calc-hero{
  padding:20px 16px!important;margin-bottom:12px!important;
}
.layout-shell .page-center .calc-hero h1{
  font-size:clamp(25px,7vw,34px)!important;line-height:1.16!important;
}
.layout-shell .page-center .calc-hero p{font-size:12px!important;line-height:1.7!important}
.layout-shell .page-center .calc-layout{
  display:flex!important;flex-direction:column!important;
  gap:12px!important;width:100%!important;min-width:0!important;
}
.layout-shell .page-center .calc-card,
.layout-shell .page-center .result-card{
  display:block!important;width:100%!important;max-width:100%!important;
  min-width:0!important;box-sizing:border-box!important;
}
.layout-shell .page-center .calc-card-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;padding:14px!important;min-width:0!important;
}
.layout-shell .page-center .calc-card-head>div{min-width:0!important;flex:1 1 auto!important}
.layout-shell .page-center .calc-card-head h2{font-size:16px!important;line-height:1.3!important}
.layout-shell .page-center .calc-card-head p{font-size:11px!important;line-height:1.5!important}
.layout-shell .page-center .form-tag{flex:0 0 auto!important;font-size:9px!important;max-width:92px!important;white-space:normal!important}
.layout-shell .page-center .calc-body{padding:12px!important;min-width:0!important}
.layout-shell .page-center .leg-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
.layout-shell .page-center .leg{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) minmax(86px,104px) 28px!important;
  align-items:end!important;gap:8px!important;
  width:100%!important;min-width:0!important;padding:10px!important;
  box-sizing:border-box!important;
}
.layout-shell .page-center .leg>div{min-width:0!important}
.layout-shell .page-center .leg .field-label{display:block!important;font-size:10px!important;line-height:1.25!important;margin-bottom:5px!important}
.layout-shell .page-center .leg .calc-input{width:100%!important;min-width:0!important;height:40px!important;padding:0 8px!important}
.layout-shell .page-center .leg-num{align-self:center!important}
.layout-shell .page-center .remove-leg{width:28px!important;height:36px!important;align-self:end!important}
.layout-shell .page-center .calc-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:12px!important}
.layout-shell .page-center .calc-btn{min-height:40px!important;padding:8px 12px!important;line-height:1.2!important}
.layout-shell .page-center .stake-wrap{margin-top:14px!important;padding-top:12px!important;border-top:1px solid #55451f!important}
.layout-shell .page-center .stake-wrap>.calc-input{width:100%!important;height:42px!important}
.layout-shell .page-center .result-main{padding:20px 12px!important}
.layout-shell .page-center .total-odds{font-size:clamp(34px,10vw,48px)!important}
.layout-shell .page-center .result-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:12px!important}
.layout-shell .page-center .result-stats .stat{min-width:0!important;padding:11px!important}
.layout-shell .page-center .result-stats .stat span{font-size:10px!important;line-height:1.4!important}
.layout-shell .page-center .result-stats .stat strong{font-size:clamp(14px,4vw,18px)!important;overflow-wrap:anywhere!important}
.layout-shell .page-center .result-foot{padding:0 12px 14px!important}
.layout-shell .page-center .result-foot p{font-size:10px!important;line-height:1.65!important}
.layout-shell .page-center .result-foot .btn{display:flex!important;justify-content:center!important;width:100%!important;min-height:44px!important;box-sizing:border-box!important}
.layout-shell .page-center .calc-note{margin-top:12px!important}
.layout-shell .page-center .result-card.is-pending .result-main,
.layout-shell .page-center .result-card.is-pending .result-stats,
.layout-shell .page-center .result-card.is-pending .result-foot{opacity:.55!important}
.layout-shell .page-center .result-loading{
  display:none;align-items:center;justify-content:center;gap:9px;
  padding:18px 12px;color:#e6c56c;font-size:11px;font-weight:800;
}
.layout-shell .page-center .result-loading.active{display:flex!important}
.layout-shell .page-center .result-spinner{
  width:15px;height:15px;border:2px solid #59451d;border-top-color:#f0d37a;
  border-radius:50%;animation:a88spin .7s linear infinite;
}
@keyframes a88spin{to{transform:rotate(360deg)}}
@media(max-width:360px){
  .layout-shell .page-center{padding-left:10px!important;padding-right:10px!important}
  .layout-shell .page-center .leg{grid-template-columns:28px minmax(0,1fr) 78px 26px!important;gap:5px!important;padding:8px!important}
  .layout-shell .page-center .calc-card-head{padding:12px!important}
  .layout-shell .page-center .form-tag{font-size:8px!important}
  .layout-shell .page-center .result-stats{gap:6px!important;padding:9px!important}
  .layout-shell .page-center .result-stats .stat{padding:9px!important}
}


/* v15 splash + silver particle ambience */
.a88-welcome-splash{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:15px;padding:24px;background:
    radial-gradient(ellipse at 50% 42%,rgba(190,145,48,.18),transparent 42%),
    #070808;color:#f2d27a;text-align:center;
  opacity:1;visibility:visible;
  transition:opacity .55s ease,visibility .55s ease;
}
.a88-welcome-splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.a88-welcome-splash img{
  display:block;width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(225,183,78,.45));
  animation:a88WelcomeLogo 1.8s ease-in-out infinite alternate;
}
.a88-welcome-splash strong{
  font-size:clamp(17px,4vw,22px);font-weight:900;letter-spacing:1.4px;
  color:#f0d17a;text-shadow:0 0 18px rgba(218,174,69,.28);
}
.a88-welcome-splash small{font-size:9px;letter-spacing:2px;color:#a9945c}
@keyframes a88WelcomeLogo{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.04)}}
.a88-silver-particles{
  position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9998;
}
.a88-silver-particle{
  position:absolute;bottom:-18px;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  opacity:0;background:radial-gradient(circle,#fff9d6 0 12%,#f8d36d 28%,#bd8725 58%,transparent 75%);
  box-shadow:0 0 6px 2px rgba(244,195,75,.48),0 0 14px rgba(239,185,52,.28);
  animation:a88ParticleRise var(--d) linear var(--delay) infinite;
}
@keyframes a88ParticleRise{
  0%{transform:translate3d(0,0,0) scale(.45);opacity:0}
  12%{opacity:var(--o)}
  75%{opacity:var(--o)}
  100%{transform:translate3d(var(--drift),-110vh,0) scale(1.15);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .a88-welcome-splash img{animation:none}
  .a88-silver-particle{animation:none;display:none}
}

/* v15 selector correction: calculator markup is .page-center, not .calc-page */
.layout-shell .page-center .calc-layout{display:flex!important;flex-direction:column!important;width:100%!important}
.layout-shell .page-center .calc-layout>.calc-card{width:100%!important;max-width:100%!important}
.layout-shell .page-center .calc-hero,
.layout-shell .page-center .calc-layout,
.layout-shell .page-center .notice{width:100%!important;max-width:100%!important;box-sizing:border-box!important}


/* Competition logo marquee — compact cards with captions. */
.a88-provider-strip{
  width:100%;max-width:100%;margin:12px 0 16px;padding:0;overflow:hidden;
  border:1px solid rgba(218,174,77,.22);border-radius:16px;
  background:linear-gradient(180deg,rgba(25,22,16,.96),rgba(10,10,9,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.18);
}
.a88-provider-marquee{width:100%;overflow:hidden;padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);}
.a88-provider-track{display:flex;width:max-content;animation:a88ProviderLoop 28s linear infinite;will-change:transform}
.a88-provider-group{display:flex;align-items:stretch;gap:10px;padding:0 5px;flex:0 0 auto}
.a88-provider-card{width:clamp(112px,22vw,148px);height:91px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:8px 9px 7px;box-sizing:border-box;border:1px solid rgba(226,190,105,.48);
  border-radius:13px;background:linear-gradient(145deg,#242016 0%,#100f0c 54%,#070706 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.42),0 0 10px rgba(218,174,77,.08),inset 0 1px 0 rgba(255,225,150,.13);}
.a88-provider-card img{display:block;width:100%;height:54px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.72));}
.a88-provider-card span{display:block;width:100%;min-height:13px;color:#e8c66f;font-size:10px;line-height:1.15;font-weight:700;letter-spacing:.025em;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 1px 4px rgba(218,174,77,.22)}
.a88-provider-marquee:hover .a88-provider-track{animation-play-state:paused}
@keyframes a88ProviderLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:480px){
 .a88-provider-strip{margin:9px 0 13px;border-radius:13px}
 .a88-provider-marquee{padding:7px 0}
 .a88-provider-group{gap:8px;padding:0 4px}
 .a88-provider-card{width:108px;height:82px;padding:6px 7px;border-radius:11px;gap:4px}
 .a88-provider-card img{height:47px}
 .a88-provider-card span{font-size:9px}
 .a88-provider-track{animation-duration:24s}
}
@media(prefers-reduced-motion:reduce){.a88-provider-track{animation:none}}


/* FIX: keep every competition caption present in both seamless marquee sets. */
.a88-provider-card{
  height:96px;
  min-height:96px;
  justify-content:center;
  gap:6px;
}
.a88-provider-card img{
  flex:0 0 54px;
  height:54px;
  object-fit:contain;
}
.a88-provider-card span{
  flex:0 0 14px;
  min-height:14px;
  line-height:14px;
  display:block;
  visibility:visible;
  opacity:1;
  overflow:visible;
  text-overflow:clip;
}
@media(max-width:480px){
  .a88-provider-card{height:88px;min-height:88px;gap:5px}
  .a88-provider-card img{flex-basis:48px;height:48px}
  .a88-provider-card span{flex-basis:14px;min-height:14px;font-size:9px;line-height:14px}
}

/* 828BET brand palette: neon red / blue / purple */
:root{--brand-red:#ff3155;--brand-blue:#347dff;--brand-purple:#a34cff}
.silver,.mainnav a:hover,.mainnav .active{color:var(--brand-blue)}
.mainnav a:hover,.mainnav .active{border-color:var(--brand-purple)}
.btn-primary,.btn-daftar{background:linear-gradient(110deg,var(--brand-red),var(--brand-purple),var(--brand-blue));color:#fff;border:0}
.logo{border-color:var(--brand-purple);color:#fff;background:linear-gradient(135deg,var(--brand-red),var(--brand-blue),var(--brand-purple))}


/* 828BET BRAND SYSTEM: BLACK / SILVER / RED / BLUE — NO silver */
:root{--bg:#080a0f;--panel:#121722;--panel2:#1a2230;--silver:#c5cbd4;--silver2:#287bff;--silver:#c5cbd4;--red:#f02d45;--blue:#287bff;--text:#f1f4f8;--muted:#9ca8b8;--line:#303b4c}
body{background:radial-gradient(ellipse at 12% 0,rgba(240,45,69,.13),transparent 34%),radial-gradient(ellipse at 90% 0,rgba(40,123,255,.16),transparent 38%),#080a0f;color:var(--text)}
.ambient{background:repeating-linear-gradient(120deg,transparent 0 70px,rgba(40,123,255,.08) 71px 72px)}
.top{border-bottom-color:#344052}.mainnav{color:#c7ced8}.mainnav a:hover,.mainnav .active{border-color:var(--blue);color:#8db8ff}
.btn-yellow,.banner-cta,.a88-live-cta,.a88bet-match-cta{background:linear-gradient(110deg,#f02d45 0%,#287bff 100%)!important;color:#fff!important;border-color:#668fe0!important;box-shadow:0 5px 0 #172c50,0 10px 22px rgba(40,123,255,.18)}
.btn-dark{background:#151c29;border:1px solid #52647e;color:#e0e5ed}.panel,.card,.form-shell,.calc-card{background:linear-gradient(145deg,#171e2a,#0f141e)!important;border-color:#354154!important}
.banner-slider,.a88-live-cta-wrap{border-color:#354154!important;background:radial-gradient(ellipse at 18% 50%,rgba(240,45,69,.14),transparent 42%),radial-gradient(ellipse at 90% 30%,rgba(40,123,255,.16),transparent 40%),#0c111b!important}
.a88bet-match-card{border-color:#354154!important;background:linear-gradient(145deg,#1a2230,#101722)!important}.a88bet-match-meta,.a88-live-eyebrow{color:#c5cbd4!important}.a88bet-match-cta{border:0!important}
.a88bet-arrow{border-color:#40516a!important;background:#111827!important;color:#dbe3ef!important}.banner-dots button.active{background:#287bff!important}.banner-arrow{border-color:#52647e!important;background:#151c29!important;color:#fff!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:rgba(40,123,255,.55)!important}