.khelmantra-logo {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    max-width: 100%;
    color: #ffd56b;
    font-size: clamp(0.85rem, 2vw, 1.5rem);
    font-weight: 800;
    white-space: nowrap;
}

.bannerRow .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}

.gameBox .fadeinImg {
    display: block;
    width: 100%;
    height: auto;
}

.carouselAera .s-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
}

.carouselAera .s-wrapper::-webkit-scrollbar {
    display: none;
}

.khelmantra-card-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 400 / 534;
    padding: 0.5rem;
    background: #252525;
    color: #fff;
    text-align: center;
}

img.fadeinImg.image-reveal-pending {
    opacity: 0;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .bannerRow .carousel-item.bganimation,
    .gameBox .imgWarp.bganimation {
        animation: none;
    }

    .bannerRow img.fadeinImg,
    .gameBox img.fadeinImg {
        transition: none;
    }
}

#scrollheadr.topHeader {
    background: #000;
    box-shadow: none;
}

.km-match-section {
    margin: 12px 0 20px;
    color: #fff;
}

.km-match-section h2 { font-size: 1rem; }

.km-match-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.km-match-rail a {
    flex: 0 0 min(76%, 250px);
    display: grid;
    gap: 6px;
    min-height: 70px;
    padding: 12px;
    color: #fff;
    background: #272934;
    border-radius: 6px;
    scroll-snap-align: start;
}

.km-match-rail small { color: #ffad73; }

#km-auth {
    width: min(92vw, 1108px);
    max-height: 92vh;
    padding: 8px;
    color: #fff;
    background: #191919;
    border: 1px solid #aaa;
    border-radius: 10px;
    overflow-y: auto;
}

#km-auth::backdrop { background: rgb(0 0 0 / 72%); }
#km-auth [hidden] { display: none !important; }

.km-auth-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(76vh, 785px);
}

.km-auth-art {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 8px;
}

.km-auth-panel {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px clamp(20px, 4vw, 64px) 25px;
}

.km-auth-close { position: absolute; top: 0; right: 0; }
.km-auth-brand { text-align: center; font-size: 24px; font-weight: 900; font-style: italic; }
.km-auth-brand span { color: #ff222c; }
#km-auth-title { margin: 24px 0 16px; text-align: center; font-size: 24px; }
.km-auth-fields { display: grid; gap: 14px; }
.km-auth-phone { display: grid; grid-template-columns: minmax(95px, 38%) minmax(0, 1fr); gap: 14px; }
.km-password { position: relative; margin: 0; }

#km-auth input, #km-auth select, #km-auth button {
    min-width: 0;
    min-height: 48px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    padding: 10px 12px;
}

#km-auth input, #km-auth select { width: 100%; color-scheme: dark; }
#km-auth input::placeholder { color: #eee; }
#km-auth .km-password input { padding-right: 50px; }
#km-auth [data-password-toggle] { position: absolute; inset: 0 0 0 auto; border: 0; }
#km-auth .km-auth-primary { background: #f6f7f8; color: #181a1c; font-weight: 800; }
#km-auth .km-auth-whatsapp { background: #218738; border-color: #218738; font-weight: 800; }
#km-auth .km-auth-switch, #km-auth .km-auth-forgot, #km-auth .km-auth-close button {
    min-height: 32px;
    border: 0;
    font-size: 13px;
}
#km-auth .km-auth-forgot { justify-self: end; text-decoration: underline; }
#km-auth [role="status"] { margin: 0; text-align: center; }

@media (max-width: 767px) {
    #km-auth { max-width: 460px; }
    .km-auth-layout { grid-template-columns: 1fr; min-height: auto; }
    .km-auth-art { display: none; }
    .km-auth-panel { padding-inline: 14px; }
}

@media (min-width: 768px) {
    #km-auth { height: min(86dvh, 805px); overflow: hidden; }
    .km-auth-layout { height: 100%; min-height: 0; }
    .km-auth-panel { min-height: 0; overflow-y: auto; justify-content: safe center; }
    .km-auth-art { display: block; }
    body:has(#km-auth[open]) { overflow: hidden; }
}

@media (min-width: 768px) and (max-height: 850px) {
    .km-auth-panel { padding-block: 30px 8px; }
    #km-auth-title { margin: 12px 0 10px; }
    .km-auth-fields { gap: 8px; }
    #km-auth input, #km-auth select, #km-auth .km-auth-fields button { min-height: 38px; padding-block: 5px; }
}

img.khelmantra-logo {
    display: block;
    width: min(100%, 145px);
    height: auto;
    object-fit: contain;
}

#km-auth img.km-auth-brand {
    align-self: center;
    width: 106px;
    height: 62px;
    object-fit: contain;
}

.km-match-section {
    padding: 12px;
    background: #242424;
}

.km-match-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.km-match-heading h2 { margin: 0; }
.km-match-heading h2 span { color: #54bd64; }
.km-match-heading button {
    border: 0;
    border-radius: 5px;
    padding: 3px 12px;
    background: #383838;
    color: #fff;
    font-size: 20px;
}

.km-match-rail a {
    flex-basis: clamp(245px, 32%, 540px);
    align-content: start;
    background: #2d2d2d;
    text-decoration: none;
}

.km-match-rail small { color: #c8c8c8; }
.km-match-meta, .km-match-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.km-match-league { min-width: 0; }
.km-match-time { flex-shrink: 0; font-size: 10px; }
.km-match-live { color: #62bdff; text-shadow: 0 0 8px #268cff; }
.km-match-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.km-match-price {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #777;
}
.km-match-status { margin: 8px 0 0; }

@media (max-width: 767px) {
    .km-match-rail a { flex-basis: 82%; }
}

.km-signed-in .km-mobile header [data-auth],
.km-signed-in #scrollheadr button.km-guest { visibility: hidden; }
#km-account {
    position: fixed;
    z-index: 1200;
    top: 24px;
    right: 20px;
    text-align: right;
    color: #fff;
}
#km-account[hidden], #km-account-menu[hidden] { display: none; }
#km-account button { color: inherit; border: 1px solid #888; border-radius: 6px; background: #111; padding: 8px 12px; }
#km-account-toggle, #km-account-name { background: #d9000b !important; font-weight: 700; }
#km-account-menu {
    width: min(340px, calc(100vw - 30px));
    max-height: calc(100dvh - 90px);
    overflow: auto;
    margin-top: 6px;
    padding: 12px;
    background: #080808;
    border-radius: 9px;
    text-align: left;
}
#km-account-name { display: block; padding: 9px; border-radius: 6px; }
.km-wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
#km-account-menu dl div { display: flex; justify-content: space-between; border-top: 1px solid #84252a; padding: 8px 0; }
#km-account-menu dd { margin: 0; }
#km-account-menu > button { width: 100%; margin-bottom: 5px; }
@media (max-width: 767px) {
    #km-account { top: 3px; right: 43px; }
    #km-account-toggle { padding: 3px 9px !important; }
}

.km-account-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
#km-account-menu { margin-left: auto; }
.km-signed-in #scrollheadr select { visibility: hidden; }
.km-signed-in .km-mobile header .language-label { visibility: hidden; }
@media (max-width: 767px) {
    .km-account-toolbar { gap: 3px; }
    #km-account { right: 5px; }
    #km-account .km-account-toolbar button { font-size: 10px; padding: 3px 4px; }
}

.km-mobile-account-head, .km-mobile-account-item, .km-mobile-wallet { display: none; }

@media (max-width: 767px) {
    #km-account { inset: 0; pointer-events: none; }
    #km-account .km-account-toolbar { display: none; }
    #km-account-menu {
        position: absolute;
        inset: 0 0 calc(53px + env(safe-area-inset-bottom)) 0;
        width: auto;
        max-height: none;
        margin: 0;
        padding: 0 14px 18px;
        border-radius: 0;
        background: #fff;
        color: #202124;
        pointer-events: auto;
        overscroll-behavior: contain;
    }
    #km-account-menu .km-mobile-account-head {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: space-between;
        margin: 0 -14px 14px;
        padding: 5px 10px;
        background: #df000b;
        color: #fff;
    }
    #km-account-menu .km-mobile-account-head button { background: transparent; border: 0; }
    #km-account-name { color: #fff; margin-bottom: 12px; }
    #km-account-menu .km-wallet-actions { display: none; }
    #km-account-menu dl div { border-color: #ccc; }
    #km-account-menu > button { background: #fff; border-color: #222; margin-bottom: 9px; }
    #km-account-menu > .km-mobile-account-item { display: block; }
    #km-account-menu > #km-logout { background: #df000b; border-color: #df000b; color: #fff; }
    .km-mobile header .km-mobile-wallet:not([hidden]) { display: block; color: #fff; background: #920009; border: 0; border-radius: 4px; padding: 4px 6px; white-space: nowrap; }
    .km-signed-in .km-mobile header [data-auth] { display: none; }
    .km-signed-in .km-mobile header .language-label { visibility: visible; }
    .km-mobile .bottom-nav { z-index: 1201; }
    .km-mobile-account-open .bottom-nav [data-nav="Home"] { color: #8a8a8a; }
    .km-mobile-account-open .bottom-nav [data-nav="Home"]::after { display: none; }
    .km-mobile-account-open .bottom-nav [data-nav="Profile"] { color: #fff; border-bottom: 3px solid #fff; }
}

@media (min-width: 480px) and (max-width: 767px) {
    #km-account-menu { bottom: calc(66px + env(safe-area-inset-bottom)); }
}

.km-desktop-notice { display: none; }
@media (min-width: 768px) {
    #scrollheadr .headgameNav img, #scrollheadr .headgameNav svg {
        animation: km-desktop-icon-pulse 2.8s ease-in-out infinite;
    }
    .km-desktop-notice {
        display: flex; align-items: center; gap: 12px;
        margin-top: 12px; padding: 5px 12px; min-height: 30px;
        background: #414141; color: #fff; font-size: 12px;
    }
    .km-desktop-notice div { flex: 1; min-width: 0; overflow: hidden; }
    .km-desktop-notice span {
        display: inline-block; padding-left: 100%; white-space: nowrap;
        animation: km-desktop-notice-scroll 23s linear infinite;
    }
    .km-desktop-notice div:hover span, .km-desktop-notice div:focus span { animation-play-state: paused; }
}
@keyframes km-desktop-icon-pulse { 50% { opacity: .48; } }
@keyframes km-desktop-notice-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    #scrollheadr .headgameNav img, #scrollheadr .headgameNav svg, .km-desktop-notice span { animation: none; }
    .km-desktop-notice span { padding-left: 0; }
    .km-desktop-notice div { overflow-x: auto; }
}

#km-auth:not([open]) { display: none !important; }