/* =========================================================
   CHETAK LIVE DRAW SYSTEM
   FINAL RESPONSIVE MAIN WEBSITE CSS

   Designed for:
   - Desktop
   - Laptop
   - Tablet
   - Mobile
   - Small mobile

   This file replaces the old style.css completely.
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: #050505;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at top,
            #222222 0%,
            #0b0b0b 35%,
            #020202 100%
        );

    color: #f5f5f5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

#scaleContainer {
    width: 100%;
    overflow: visible;
}


/* =========================================================
   MAIN SITE WRAPPER
========================================================= */

.site-wrapper {
    width: min(1180px, calc(100% - 24px));
    min-height: 100vh;

    margin: 0 auto;
    padding: 20px 28px 30px;

    position: relative;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.91),
            rgba(0, 0, 0, 0.96)
        ),
        repeating-linear-gradient(
            135deg,
            #171717 0,
            #171717 2px,
            #101010 2px,
            #101010 5px
        );

    border-left: 2px solid #352819;
    border-right: 2px solid #352819;

    box-shadow:
        0 0 45px rgba(0, 0, 0, 0.95),
        inset 0 0 45px rgba(255, 174, 55, 0.04);
}


/* =========================================================
   TOP HEADER
========================================================= */

.top-header {
    min-height: 65px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 70px;

    border-top: 2px solid #bb7d24;
    border-bottom: 1px solid #49351d;

    background:
        linear-gradient(
            180deg,
            #0c0c0c 0%,
            #050505 100%
        );
}

.top-header h1 {
    color: #e4a957;

    font-size: clamp(22px, 3vw, 28px);
    font-weight: normal;
    text-align: center;

    text-shadow:
        0 1px 0 #000000,
        0 0 8px rgba(231, 168, 81, 0.3);
}

.top-header h1 span {
    color: #d89336;
}

.header-decoration {
    position: absolute;
    left: 20px;

    color: #e0a34e;

    font-size: 30px;
}


/* =========================================================
   LOGIN HEADER
========================================================= */

.login-header {
    min-height: 100px;

    display: grid;
    grid-template-columns:
        minmax(170px, 190px)
        minmax(0, 1fr)
        minmax(210px, 250px);

    align-items: center;
    gap: 20px;

    padding: 12px 18px;

    border-bottom: 1px dashed #75664d;
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.brand-circle {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 4px solid #c21b1b;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ff3d3d 0%,
            #8c0000 75%
        );

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: bold;

    transform: rotate(-12deg);

    box-shadow:
        0 0 16px rgba(255, 0, 0, 0.35);
}

.brand-name {
    min-width: 0;

    color: #f5cc77;

    font-size: 18px;
    font-weight: bold;
    line-height: 1.15;
}

.brand-name span {
    display: block;

    margin-top: 4px;

    color: #d64135;

    font-size: 12px;
}

.login-form {
    min-width: 0;
    min-height: 50px;

    display: grid;
    grid-template-columns:
        auto
        minmax(110px, 174px)
        auto
        minmax(110px, 174px)
        auto;

    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 12px;

    border: 1px dashed #726247;
}

.login-form label {
    color: #eeeeee;

    font-size: 16px;
    white-space: nowrap;
}

.login-form input {
    width: 100%;
    height: 34px;

    padding: 4px 8px;

    border: 2px solid #ac7a31;
    outline: none;

    background: #ffffff;
    color: #111111;

    font-family: Arial, sans-serif;
    font-size: 16px;
}

.login-form input:focus {
    border-color: #f1c56c;

    box-shadow:
        0 0 0 2px rgba(241, 197, 108, 0.16);
}

.small-button {
    min-width: 75px;
    height: 34px;

    padding: 0 14px;

    border: 1px solid #bc8a43;
    border-radius: 3px;

    background:
        linear-gradient(
            #fff9df,
            #d6bc7a
        );

    color: #22160a;

    font-size: 13px;
    font-weight: bold;

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}

.small-button:hover {
    filter: brightness(1.08);
}

.small-button:active {
    transform: translateY(1px);
}

.main-logo {
    min-width: 0;
    text-align: center;
    line-height: 1;
}

.main-logo-small {
    color: #b6873c;

    font-size: 12px;
    letter-spacing: 2px;
}

.main-logo-title {
    color: #f1f1f1;

    font-size: clamp(27px, 3vw, 37px);
    font-weight: bold;
    letter-spacing: 3px;

    overflow-wrap: anywhere;

    text-shadow:
        2px 2px 0 #332512,
        0 0 9px rgba(255, 205, 112, 0.5);
}

.main-logo-subtitle {
    display: inline-block;

    margin-top: 5px;
    padding: 4px 18px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b37420,
            #eabf6b,
            #b37420,
            transparent
        );

    color: #111111;

    font-size: 15px;
    font-weight: bold;
}


/* =========================================================
   ORDER TABS
========================================================= */

.order-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    padding: 8px 28px 5px;
}

.tab-button {
    min-width: 140px;
    height: 34px;

    padding: 0 16px;

    border: 1px solid #c58a2c;
    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(
            #f4c862,
            #ba711d
        );

    color: #2b1804;

    font-size: 13px;
    font-weight: bold;
}

.tab-button:not(.active) {
    background:
        linear-gradient(
            #d39a3c,
            #8f5113
        );
}


/* =========================================================
   BETTING PANEL
========================================================= */

.betting-panel {
    margin: 0 28px;
    padding: 10px 12px 12px;

    border: 1px dashed #77684e;
}

.betting-topbar {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-bottom: 6px;
}

.draw-select-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;
}

.draw-select-area label {
    color: #f2f2f2;

    font-size: 16px;
}

.draw-select-area select {
    width: 150px;
    height: 32px;

    padding: 2px 8px;

    border: 1px solid #d69d45;
    border-radius: 12px;
    outline: none;

    background: #f1bb57;
    color: #332008;

    font-weight: bold;
}

.viewers-online {
    color: #eeeeee;

    font-size: 15px;
    white-space: nowrap;
}

.viewers-online span {
    color: #f0c064;
    font-weight: bold;
}


/* =========================================================
   BET TABLE
========================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}

.bet-table {
    width: 100%;
    min-width: 930px;

    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
}

.bet-table th {
    height: 30px;
    padding: 3px;

    border: 1px solid #d39b43;

    background:
        linear-gradient(
            #e3a442,
            #b46c1e
        );

    color: #261604;

    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.bet-table td {
    height: 36px;
    padding: 0;

    overflow: hidden;

    color: #f4f4f4;

    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}

.bet-table th.game-column {
    width: 155px;
}

.bet-table th:nth-child(2),
.bet-table th:nth-child(3) {
    width: 55px;
}

.bet-table th:nth-last-child(1),
.bet-table th:nth-last-child(2) {
    width: 82px;
}

.game-name {
    padding-left: 12px !important;

    color: #f1d9a5 !important;

    font-size: 14px !important;
    font-weight: bold;
    text-align: left !important;
    white-space: nowrap;
}

.sr-value,
.mrp-value {
    color: #ffffff !important;

    font-family: Arial, sans-serif;
    font-weight: bold;
}

.bet-input,
.row-total {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 30px;

    margin: 0;
    padding: 0 3px;

    border: 2px solid #bb8334;
    border-radius: 0;
    outline: none;

    background: #ffffff;
    color: #111111;

    text-align: center;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;

    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.bet-input::-webkit-inner-spin-button,
.bet-input::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
    appearance: none;
}

.bet-input:focus {
    border-color: #f7d17b;

    box-shadow:
        inset 0 0 4px rgba(242, 188, 84, 0.65);
}

.row-total {
    background: #fff9df;
    cursor: default;
}


/* =========================================================
   BET ACTIONS
========================================================= */

.bet-actions {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        120px
        135px
        125px
        78px
        78px;

    align-items: center;
    gap: 12px;

    margin-top: 10px;
}

.action-button {
    min-width: 0;
    height: 34px;

    border: 1px solid #d29b48;
    border-radius: 13px;

    font-size: 13px;
    font-weight: bold;
}

.reset-button {
    background:
        linear-gradient(
            #f6bb42,
            #e37c0b
        );

    color: #321b04;
}

.buy-button {
    background:
        linear-gradient(
            #fffefa,
            #c9c3b6
        );

    color: #24170a;
}

.grand-total-title {
    color: #f0e7d2;

    font-size: 14px;
    text-align: right;
}

.grand-total-box {
    width: 100%;
    height: 30px;

    border: 2px solid #bb8334;

    background: #ffffff;
    color: #111111;

    text-align: center;

    font-family: Arial, sans-serif;
    font-weight: bold;
}


/* =========================================================
   TIME INFORMATION
========================================================= */

.time-information {
    min-height: 48px;

    margin: 0 28px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: center;

    border-bottom: 1px dashed #726348;
}

.time-item {
    min-width: 0;

    padding: 8px 6px;

    color: #f2f2f2;

    font-size: 15px;
    text-align: center;

    overflow-wrap: anywhere;
}

.time-item span {
    color: #f0bc5b;
}


/* =========================================================
   LIVE DRAW CARDS
========================================================= */

.live-draw-panel {
    min-height: 420px;

    margin: 8px 28px 0;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border: 1px dashed #75664c;
}

.draw-card {
    min-width: 0;
    min-height: 410px;

    padding: 22px 18px;

    position: relative;

    text-align: center;
}

.draw-card + .draw-card {
    border-left: 1px dashed #75664c;
}

.draw-card h2 {
    color: #f5f1e9;

    font-size: 22px;
    font-weight: bold;

    overflow-wrap: anywhere;

    text-shadow:
        1px 1px 0 #000000,
        0 0 8px rgba(255, 255, 255, 0.25);
}

.draw-card p {
    margin-top: 12px;

    color: #f0f0f0;

    font-size: 16px;
    font-weight: bold;
}

.draw-card p span {
    color: #e8ba65;
}

/* =========================================================
   REAL REEL-STRIP SLOT MACHINE
========================================================= */

.slot-machine {
    width: min(270px, 100%);
    height: 178px;

    margin: 16px auto 0;
    padding: 13px;

    position: relative;
    overflow: hidden;

    border: 8px solid #d4d4d4;
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #565656 0%,
            #ededed 18%,
            #777777 37%,
            #f7f7f7 52%,
            #707070 70%,
            #e8e8e8 84%,
            #4d4d4d 100%
        );

    box-shadow:
        0 7px 0 #555555,
        0 13px 19px rgba(0, 0, 0, 0.82),
        inset 0 0 9px rgba(255, 255, 255, 0.76);
}

.slot-machine::before {
    content: "";

    position: absolute;
    top: 4px;
    left: 18px;
    right: 18px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.65);

    pointer-events: none;
}

.slot-display {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        8px
        minmax(0, 1fr);

    align-items: stretch;
    gap: 5px;

    position: relative;
    overflow: hidden;

    border: 3px solid #3e3e3e;
    border-radius: 9px;

    background:
        linear-gradient(
            to bottom,
            #050505 0%,
            #171717 16%,
            #292929 50%,
            #171717 84%,
            #050505 100%
        );

    box-shadow:
        inset 0 20px 22px rgba(0, 0, 0, 0.94),
        inset 0 -20px 22px rgba(0, 0, 0, 0.94),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
}

.slot-display::before,
.slot-display::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    height: 26px;

    z-index: 5;
    pointer-events: none;
}

.slot-display::before {
    top: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.96),
            rgba(0, 0, 0, 0)
        );
}

.slot-display::after {
    bottom: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.96),
            rgba(0, 0, 0, 0)
        );
}

.reel-window {
    min-width: 0;
    height: 100%;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #101010,
            #292929 50%,
            #101010
        );

    box-shadow:
        inset 0 0 8px rgba(0, 0, 0, 0.94);
}

.reel-window::before,
.reel-window::after {
    content: "";

    position: absolute;
    left: 4px;
    right: 4px;
    height: 1px;

    z-index: 6;
    pointer-events: none;

    background:
        rgba(255, 255, 255, 0.22);
}

.reel-window::before {
    top: 33%;
}

.reel-window::after {
    bottom: 33%;
}

.reel-divider {
    width: 8px;
    height: 100%;

    position: relative;
    z-index: 7;

    background:
        linear-gradient(
            90deg,
            #272727,
            #d8d8d8,
            #444444
        );

    box-shadow:
        0 0 5px rgba(0, 0, 0, 0.8);
}

.reel-strip {
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    transform:
        translate3d(0, 0, 0);

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    filter: none !important;
    -webkit-filter: none !important;
}

.reel-number {
    width: 100%;
    height: 126px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f4f4f4;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size: clamp(64px, 7vw, 90px);
    font-weight: 900;
    line-height: 1;

    filter: none !important;
    -webkit-filter: none !important;

    text-shadow:
        3px 3px 0 #242424,
        -2px -2px 0 #ffffff,
        0 0 8px rgba(255, 255, 255, 0.28);

    user-select: none;
}

.reel-strip.is-spinning .reel-number {
    filter: none !important;
    -webkit-filter: none !important;
}

.reel-strip.reel-landed {
    animation:
        reelMechanicalLanding 0.62s
        cubic-bezier(0.2, 0.86, 0.3, 1);
}

@keyframes reelMechanicalLanding {

    0% {
        margin-top: -8px;
    }

    44% {
        margin-top: 7px;
    }

    70% {
        margin-top: -3px;
    }

    86% {
        margin-top: 2px;
    }

    100% {
        margin-top: 0;
    }

}

.live-spin-status {
    min-height: 24px;

    margin-top: 11px;

    color: #d9d9d9;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.6px;
}

.live-spin-status.is-live {
    color: #f0bd5d;
}

.live-spin-status.is-result {
    color: #8ee48e;
}

.live-spin-status.is-error {
    color: #ff7777;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    min-height: 120px;

    position: relative;

    padding-top: 62px;
}

.all-results-button {
    width: 145px;
    height: 92px;

    position: absolute;
    top: -46px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 8px solid #cf8c2f;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #358482 0%,
            #164e55 70%,
            #0d2b30 100%
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: bold;
    text-align: center;

    box-shadow:
        0 0 0 4px #6e481c,
        0 5px 15px rgba(0, 0, 0, 0.8);
}

.result-crown {
    color: #f1c05f;
    font-size: 27px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 25px;

    padding: 18px;

    border-top: 1px solid #2b2217;
}

.footer-links a {
    color: #d9d9d9;

    font-size: 13px;
    text-decoration: none;
}

.footer-links a:hover {
    color: #e3af58;
}


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .site-wrapper {
        width: calc(100% - 16px);
        padding: 16px 18px 28px;
    }

    .login-header {
        grid-template-columns:
            minmax(150px, 180px)
            minmax(0, 1fr);
    }

    .main-logo {
        grid-column: 1 / -1;
        grid-row: 1;

        margin-bottom: 4px;
    }

    .brand-mark {
        grid-column: 1;
        grid-row: 2;
    }

    .login-form {
        grid-column: 2;
        grid-row: 2;
    }

    .live-draw-panel {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .draw-card:nth-child(3) {
        grid-column: 1 / -1;

        border-top: 1px dashed #75664c;
        border-left: none;
    }

    .bet-actions {
        grid-template-columns:
            minmax(0, 1fr)
            110px
            125px
            110px
            78px
            78px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .site-wrapper {
        width: 100%;

        padding: 12px;

        border-left: none;
        border-right: none;
    }

    .top-header {
        padding-left: 50px;
        padding-right: 15px;
    }

    .header-decoration {
        left: 12px;
        font-size: 24px;
    }

    .login-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;

        padding: 14px 10px;
    }

    .main-logo {
        order: 1;
    }

    .brand-mark {
        order: 2;
        justify-content: center;
    }

    .login-form {
        order: 3;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            auto;

        width: 100%;
    }

    .order-tabs,
    .betting-panel,
    .time-information,
    .live-draw-panel {
        margin-left: 0;
        margin-right: 0;
    }

    .order-tabs {
        padding-left: 0;
        padding-right: 0;
    }

    .betting-topbar {
        align-items: flex-start;
    }

    .bet-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .bet-actions > :first-child {
        grid-column: 1 / -1;
    }

    .grand-total-title {
        text-align: left;
    }

    .time-information {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .live-draw-panel {
        grid-template-columns: 1fr;
    }

    .draw-card {
        min-height: 360px;
    }

    .draw-card + .draw-card {
        border-top: 1px dashed #75664c;
        border-left: none;
    }

    .draw-card:nth-child(3) {
        grid-column: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .site-wrapper {
        padding: 8px;
    }

    .top-header {
        min-height: 58px;

        padding: 8px 12px 8px 42px;
    }

    .top-header h1 {
        font-size: 20px;
        line-height: 1.2;
    }

    .header-decoration {
        left: 10px;
        font-size: 21px;
    }

    .brand-circle {
        width: 58px;
        height: 58px;
        flex-basis: 58px;

        font-size: 34px;
    }

    .brand-name {
        font-size: 16px;
    }

    .main-logo-title {
        font-size: 27px;
        letter-spacing: 2px;
    }

    .main-logo-subtitle {
        padding: 4px 12px;
        font-size: 13px;
    }

    .login-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;

        padding: 10px;
    }

    .login-form label {
        font-size: 14px;
    }

    .login-form input,
    .small-button {
        width: 100%;
        height: 38px;
    }

    .order-tabs {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tab-button {
        width: 100%;
        min-width: 0;
    }

    .betting-panel {
        padding: 10px 8px;
    }

    .betting-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .draw-select-area {
        display: grid;
        grid-template-columns: 1fr;
    }

    .draw-select-area select {
        width: 100%;
        height: 38px;
    }

    .viewers-online {
        white-space: normal;
        text-align: left;
    }

    .table-responsive {
        border: 1px solid rgba(216, 166, 82, 0.28);
    }

    .bet-table {
        min-width: 880px;
    }

    .bet-actions {
        grid-template-columns: 1fr;
    }

    .bet-actions > * {
        width: 100%;
    }

    .bet-actions > :first-child {
        grid-column: auto;
    }

    .grand-total-title {
        text-align: center;
    }

    .action-button,
    .grand-total-box {
        height: 40px;
    }

    .time-information {
        grid-template-columns: 1fr;
    }

    .time-item {
        border-bottom:
            1px solid rgba(114, 99, 72, 0.45);
    }

    .time-item:last-child {
        border-bottom: none;
    }

    .draw-card {
        min-height: 330px;
        padding: 18px 10px;
    }

    .draw-card h2 {
        font-size: 20px;
    }

    .draw-card p {
        font-size: 15px;
    }

    .slot-machine {
        width: min(260px, 100%);
        height: 165px;
    }

    .reel-number {
        height: 113px;
        font-size: 68px;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .top-header {
        padding-left: 36px;
    }

    .top-header h1 {
        font-size: 18px;
    }

    .header-decoration {
        font-size: 18px;
    }

    .brand-mark {
        flex-direction: column;
        text-align: center;
    }

    .main-logo-title {
        font-size: 23px;
    }

    .main-logo-small {
        font-size: 10px;
    }

    .main-logo-subtitle {
        display: block;
        width: 100%;
    }

    .order-tabs {
        grid-template-columns: 1fr;
    }

    .slot-machine {
        height: 150px;
        padding: 10px;
        border-width: 6px;
    }

    .slot-display {
        gap: 5px;
    }

    .reel-number {
        height: 106px;
        font-size: 58px;
    }

    .all-results-button {
        width: 128px;
        height: 82px;

        font-size: 12px;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .site-wrapper {
        width: 100%;
        min-height: auto;

        padding: 0;

        border: none;

        background: #ffffff !important;

        box-shadow: none;
    }

    button,
    .footer-links,
    .order-tabs {
        display: none !important;
    }

}


/* =========================================================
   HOME PAGE MOBILE DESKTOP-FIT OVERRIDE
   ---------------------------------------------------------
   Mobile par desktop layout bilkul same rahega.
   JavaScript poore 1180px layout ko proportional scale karega.
   Is section ko file ke bilkul last me rakha gaya hai,
   taki purane mobile media rules override ho jayein.
========================================================= */

body.scaled-layout {
    min-width: 320px;
    overflow-x: hidden;
}

body.scaled-layout #scaleContainer {
    width: 100%;
    overflow: hidden;
}

body.scaled-layout .site-wrapper {
    width: 1180px !important;
    max-width: none !important;
    min-width: 1180px !important;

    margin: 0 !important;
    padding: 20px 28px 30px !important;

    border-left: 2px solid #352819 !important;
    border-right: 2px solid #352819 !important;
}

/* Header desktop layout preserve */
body.scaled-layout .top-header {
    min-height: 65px !important;
    padding: 10px 70px !important;
}

body.scaled-layout .top-header h1 {
    font-size: 28px !important;
    line-height: 1.4 !important;
}

body.scaled-layout .header-decoration {
    left: 20px !important;
    font-size: 30px !important;
}

/* Login header desktop layout preserve */
body.scaled-layout .login-header {
    min-height: 100px !important;

    display: grid !important;
    grid-template-columns:
        minmax(170px, 190px)
        minmax(0, 1fr)
        minmax(210px, 250px) !important;

    align-items: center !important;
    gap: 20px !important;

    padding: 12px 18px !important;
}

body.scaled-layout .brand-mark {
    grid-column: auto !important;
    grid-row: auto !important;

    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

body.scaled-layout .brand-circle {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
    font-size: 42px !important;
}

body.scaled-layout .brand-name {
    font-size: 18px !important;
}

body.scaled-layout .main-logo {
    grid-column: auto !important;
    grid-row: auto !important;
    order: initial !important;
    margin-bottom: 0 !important;
}

body.scaled-layout .main-logo-title {
    font-size: 37px !important;
    letter-spacing: 3px !important;
}

body.scaled-layout .main-logo-small {
    font-size: 12px !important;
}

body.scaled-layout .main-logo-subtitle {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 18px !important;
    font-size: 15px !important;
}

/* Login form ek hi row me */
body.scaled-layout .login-form {
    grid-column: auto !important;
    grid-row: auto !important;
    order: initial !important;

    width: auto !important;

    display: grid !important;
    grid-template-columns:
        auto
        minmax(110px, 174px)
        auto
        minmax(110px, 174px)
        auto !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    padding: 10px 12px !important;
}

body.scaled-layout .login-form label {
    font-size: 16px !important;
}

body.scaled-layout .login-form input {
    width: 100% !important;
    height: 34px !important;
}

body.scaled-layout .small-button {
    width: auto !important;
    min-width: 75px !important;
    height: 34px !important;
}

/* Tabs desktop row */
body.scaled-layout .order-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;

    gap: 6px !important;
    padding: 8px 28px 5px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.scaled-layout .tab-button {
    width: auto !important;
    min-width: 140px !important;
}

/* Betting panel desktop layout */
body.scaled-layout .betting-panel {
    margin: 0 28px !important;
    padding: 10px 12px 12px !important;
}

body.scaled-layout .betting-topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.scaled-layout .draw-select-area {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

body.scaled-layout .draw-select-area select {
    width: 150px !important;
    height: 32px !important;
}

body.scaled-layout .viewers-online {
    white-space: nowrap !important;
}

/* Table pura desktop width me */
body.scaled-layout .table-responsive {
    overflow: visible !important;
    border: none !important;
}

body.scaled-layout .bet-table {
    width: 100% !important;
    min-width: 930px !important;
}

/* Action row desktop layout */
body.scaled-layout .bet-actions {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        120px
        135px
        125px
        78px
        78px !important;

    align-items: center !important;
    gap: 12px !important;
}

body.scaled-layout .bet-actions > * {
    width: auto !important;
}

body.scaled-layout .bet-actions > :first-child {
    grid-column: auto !important;
}

body.scaled-layout .grand-total-title {
    text-align: right !important;
}

body.scaled-layout .action-button {
    height: 34px !important;
}

body.scaled-layout .grand-total-box {
    height: 30px !important;
}

/* Time row desktop */
body.scaled-layout .time-information {
    margin: 0 28px !important;

    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
}

body.scaled-layout .time-item {
    border-bottom: none !important;
}

/* Three result cards same row */
body.scaled-layout .live-draw-panel {
    min-height: 420px !important;

    margin: 8px 28px 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
}

body.scaled-layout .draw-card {
    min-height: 410px !important;
    padding: 22px 18px !important;
}

body.scaled-layout .draw-card + .draw-card {
    border-top: none !important;
    border-left: 1px dashed #75664c !important;
}

body.scaled-layout .draw-card:nth-child(3) {
    grid-column: auto !important;
    border-top: none !important;
    border-left: 1px dashed #75664c !important;
}

body.scaled-layout .draw-card h2 {
    font-size: 22px !important;
}

body.scaled-layout .draw-card p {
    font-size: 16px !important;
}

/* Slot desktop size */
body.scaled-layout .slot-machine {
    width: 270px !important;
    height: 178px !important;

    padding: 13px !important;
    border-width: 8px !important;
}

body.scaled-layout .slot-display {
    gap: 5px !important;
}

body.scaled-layout .reel-number {
    height: 126px !important;
    font-size: 90px !important;
}

/* Footer desktop layout */
body.scaled-layout .footer-links {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px 25px !important;
}

body.scaled-layout .all-results-button {
    width: 145px !important;
    height: 92px !important;
    font-size: 14px !important;
}

/* =========================================================
   FINAL HOME PAGE VISUAL OVERRIDES
   ---------------------------------------------------------
   - Mobile sizing/layout remains unchanged
   - Top announcement scrolls continuously
   - Time information uses normal readable font
   - Slot frame, divider and reel numbers use golden finish
========================================================= */

/* Continuous top announcement */
.top-header {
    overflow: hidden;
}

.top-header h1 {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: max-content;
    max-width: none;

    white-space: nowrap;

    animation: chetakHeaderScroll 14s linear infinite;
    will-change: transform;
}

@keyframes chetakHeaderScroll {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Normal font for Next Draw, Time Left, Time and Date */
.time-information,
.time-information .time-item,
.time-information .time-item span {
    font-family: Arial, Helvetica, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.time-information .time-item span {
    color: #f0bc5b;
}

/* Golden slot-machine outer body */
.slot-machine {
    border-color: #d49a22;

    background:
        linear-gradient(
            90deg,
            #6f4505 0%,
            #f8d56a 14%,
            #a96d0c 30%,
            #fff0a3 49%,
            #a56a0a 68%,
            #f4c95b 84%,
            #684004 100%
        );

    box-shadow:
        0 7px 0 #714606,
        0 13px 19px rgba(0, 0, 0, 0.82),
        inset 0 0 10px rgba(255, 244, 176, 0.88),
        0 0 16px rgba(226, 164, 38, 0.30);
}

.slot-machine::before {
    background: rgba(255, 247, 191, 0.78);
}

/* Golden inner border and centre divider */
.slot-display {
    border-color: #8c5c09;

    box-shadow:
        inset 0 20px 22px rgba(0, 0, 0, 0.94),
        inset 0 -20px 22px rgba(0, 0, 0, 0.94),
        inset 0 0 9px rgba(255, 207, 72, 0.18);
}

.reel-divider {
    background:
        linear-gradient(
            90deg,
            #5e3903,
            #f7d469,
            #9f680d,
            #ffe89a,
            #5e3903
        );

    box-shadow:
        0 0 6px rgba(0, 0, 0, 0.82),
        0 0 5px rgba(255, 207, 72, 0.32);
}

/* Golden reel numbers */
.reel-number,
.reel-strip,
.reel-strip * {
    color: #ffd65a !important;
    -webkit-text-fill-color: #ffd65a !important;

    text-shadow:
        3px 3px 0 #5f3b00,
        -1px -1px 0 #fff0a8,
        0 0 9px rgba(255, 201, 56, 0.62) !important;
}

/* Keep accessibility behaviour */
@media (prefers-reduced-motion: reduce) {
    .top-header h1 {
        width: auto;
        white-space: normal;
        animation: none;
    }
}

/* ===============================
   TIME INFORMATION
=============================== */

.time-item{
    min-width:0;

    padding:8px 6px;

    color:#f2f2f2;

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;
    font-weight:700;      /* Pehle 400 tha, ab Bold */

    text-align:center;

    overflow-wrap:anywhere;
}

.time-item span{

    color:#f0bc5b;

    font-family:Arial, Helvetica, sans-serif;

    font-size:17px;

    font-weight:700;      /* Time aur Date bhi Bold */

}


/* =========================================================
   FINAL MOBILE DESKTOP-LIKE LOGIN ROW
   Mobile par bhi Logo | Login ID | PIN | Login button | Brand
   ek hi horizontal row me rahega, bilkul desktop/reference jaisa.
========================================================= */
@media (max-width: 820px) {
    body.scaled-layout .login-header {
        min-height: 100px !important;
        display: grid !important;
        grid-template-columns: minmax(170px,190px) minmax(0,1fr) minmax(210px,250px) !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 12px 18px !important;
    }

    body.scaled-layout .brand-mark,
    body.scaled-layout .login-form,
    body.scaled-layout .main-logo {
        grid-row: 1 !important;
        order: initial !important;
        margin: 0 !important;
        align-self: center !important;
    }

    body.scaled-layout .brand-mark {
        grid-column: 1 !important;
        justify-self: stretch !important;
        justify-content: flex-start !important;
    }

    body.scaled-layout .login-form {
        grid-column: 2 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(110px,174px) auto minmax(110px,174px) auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        padding: 10px 12px !important;
    }

    body.scaled-layout .main-logo {
        grid-column: 3 !important;
        justify-self: center !important;
    }

    body.scaled-layout .login-form input {
        min-width: 0 !important;
        width: 100% !important;
        height: 34px !important;
        font-size: 16px !important;
        transform: none !important;
    }

    body.scaled-layout .login-form label {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    body.scaled-layout .login-form .small-button {
        min-width: 75px !important;
        width: auto !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   FINAL TOTAL AUTOMATIC RIBBON, JOKER AND FOOTER MESSAGE
   ---------------------------------------------------------
   Existing page design and functionality remain unchanged.
   Desktop and scaled mobile use the same visual positions.
========================================================= */

.site-wrapper {
    position: relative;
    overflow: visible;
}

.total-automatic-ribbon {
    position: absolute;
    top: -12px;
    left: -46px;
    width: 150px;
    height: auto;
    z-index: 99999;
    transform: rotate(-9deg);
    pointer-events: none;
}

.site-footer {
    position: relative;
    overflow: visible;
    min-height: 155px;
    padding-top: 62px;
}

/*
   Top positioning keeps the Joker in its existing place even
   after the new running message and legal text are added below.
*/
.footer-joker {
    position: absolute;
    top: -95px;      /* 30px niche */
    right: 250px;    /* thoda left balance */
    bottom: auto;
    width: 270px;    /* pehle 230px tha */
    height: auto;
    z-index: 99999;
    pointer-events: none;
}

/* Scaled mobile keeps exactly the same desktop position. */
body.scaled-layout .total-automatic-ribbon {
    top: -12px !important;
    left: -46px !important;
    width: 150px !important;
}

body.scaled-layout .footer-joker {
    top: -95px !important;
    right: 250px !important;
    bottom: auto !important;
    width: 270px !important;
}

/* Normal responsive mode also keeps equivalent placement. */
@media (max-width: 820px) {
    body:not(.scaled-layout) .total-automatic-ribbon {
        top: -12px;
        left: -46px;
        width: 150px;
    }

    body:not(.scaled-layout) .footer-joker {
        top: -125px;
        right: 260px;
        bottom: auto;
        width: 230px;
    }
}

/* =========================================================
   FOOTER RUNNING MESSAGE
   Same visual behaviour as the top running announcement.
========================================================= */

.footer-running-message {
    width: 100%;
    min-height: 65px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 8px;
    padding: 10px 0;
    border-top: 2px solid #bb7d24;
    border-bottom: 1px solid #49351d;
    background: linear-gradient(180deg, #0c0c0c 0%, #050505 100%);
}

.footer-running-track {
    display: inline-flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    color: #e4a957;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: normal;
    text-shadow:
        0 1px 0 #000000,
        0 0 8px rgba(231, 168, 81, 0.3);
    animation: footerHeaderScroll 18s linear infinite;
    will-change: transform;
}

.footer-running-track span:nth-child(even) {
    color: #d89336;
}

@keyframes footerHeaderScroll {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-100%);
    }
}

/* =========================================================
   FOOTER LEGAL / COPYRIGHT
========================================================= */

.footer-legal-text {
    width: 100%;
    padding: 18px 24px 6px;
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.footer-legal-text p + p {
    margin-top: 8px;
    color: #e0a957;
}

body.scaled-layout .footer-running-message {
    min-height: 65px !important;
    margin-top: 8px !important;
    padding: 10px 0 !important;
}

body.scaled-layout .footer-running-track {
    gap: 46px !important;
    font-size: 27px !important;
}

body.scaled-layout .footer-legal-text {
    padding: 18px 24px 6px !important;
    font-size: 14px !important;
}

@media (prefers-reduced-motion: reduce) {
    .footer-running-track {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
        padding: 8px 16px;
        animation: none;
    }
}

@media print {
    .footer-running-message {
        overflow: visible;
        border-color: #000000;
        background: #ffffff;
    }

    .footer-running-track {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        white-space: normal;
        color: #000000;
        animation: none;
    }

    .footer-legal-text {
        color: #000000;
    }
}

/* =========================================================
   USER DASHBOARD FOOTER
   Uses the same running message and legal design as index.php.
   This override affects only the dashboard footer.
========================================================= */

.dashboard-site-footer {
    width: 100%;
    min-height: auto;
    margin-top: 40px;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

.dashboard-site-footer .footer-running-message {
    margin-top: 0;
}

.dashboard-site-footer .footer-legal-text {
    padding-bottom: 12px;
}

@media print {
    .dashboard-site-footer {
        display: none !important;
    }
}

/* =========================================================
   USER DASHBOARD FOOTER - FINAL FALLBACK
========================================================= */

#dashboardFooterFinal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 145px !important;
    margin: 38px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    clear: both !important;
    z-index: 10 !important;
    background: #080808 !important;
    border-top: 1px solid #4a351d !important;
}

#dashboardFooterFinal .dashboard-footer-marquee {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 11px 0 !important;
    border-top: 2px solid #bb7d24 !important;
    border-bottom: 1px solid #49351d !important;
    background: linear-gradient(#101010, #050505) !important;
}

#dashboardFooterFinal .dashboard-footer-track {
    display: inline-flex !important;
    align-items: center !important;
    gap: 55px !important;
    width: max-content !important;
    white-space: nowrap !important;
    color: #e4a957 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    animation: dashboardFooterMove 20s linear infinite !important;
}

@keyframes dashboardFooterMove {
    from { transform: translateX(1180px); }
    to { transform: translateX(-100%); }
}

#dashboardFooterFinal .dashboard-footer-legal {
    display: block !important;
    padding: 16px 18px 12px !important;
    color: #dddddd !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: center !important;
    background: #080808 !important;
}

#dashboardFooterFinal .dashboard-footer-legal p {
    margin: 0 0 6px !important;
}

#dashboardFooterFinal .dashboard-footer-legal p:last-child {
    margin-bottom: 0 !important;
    color: #e4a957 !important;
}

@media print {
    #dashboardFooterFinal {
        display: none !important;
    }
}