* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 35%), #050b12;

    color: #fff;

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

.bt-page {
    width: 100%;
    min-height: 100vh;

    padding: 30px 0 50px;
}

.bt-container {
    max-width: 1100px;
    margin: auto;

    padding-left: 20px;
    padding-right: 20px;
}

/* =========================================
           HEADING
        ========================================= */

.section-heading {
    position: relative;

    display: flex;
    align-items: center;

    margin-bottom: 28px;

    font-size: 30px;
    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.3px;
}

.section-heading::before {
    content: "";

    width: 6px;
    height: 28px;

    margin-right: 12px;

    border-radius: 2px;

    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
}

.section-heading span {
    color: #01ff42;

    text-shadow: 0 0 12px rgba(212, 175, 55, 0.22);
}

.game-card {
    position: relative;

    padding: 8px;

    border-radius: 12px;

    background: linear-gradient(145deg, #172331, #0b131d);

    border: 1px solid #334253;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 22px rgba(0, 0, 0, 0.35);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.game-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 2px;

    background: linear-gradient(90deg, transparent, #01ff42, #ffe477, #01ff42, transparent);

    opacity: 0.7;
}

.game-card:hover {
    transform: translateY(-7px);

    border-color: #01ff42;

    box-shadow:
        0 0 15px rgba(212, 175, 55, 0.15),
        0 18px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-image {
    width: 100%;
    height: 300px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.game-card:hover .game-image {
    transform: scale(1.025);

    filter: brightness(1.08) saturate(1.05);
}
@media (max-width: 768px) {
    .game-image {
        height: auto;
    }
}

/* =========================================
           PROFIT SECTION
        ========================================= */

.profit-section {
    margin-top: 38px;
}

/* =========================================
           PROFIT CARD
        ========================================= */

.profit-card {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 105px;

    padding: 14px 16px;

    border-radius: 12px;

    background: linear-gradient(145deg, #121d29 0%, #0b141e 65%, #080f17 100%);

    border: 1px solid #2d3b4c;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 20px rgba(0, 0, 0, 0.28);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.profit-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: linear-gradient(180deg, #ffe477, #01ff42, #8d6915);

    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.profit-card:hover {
    transform: translateY(-4px);

    border-color: #01ff42;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(212, 175, 55, 0.08);
}

/* =========================================
           AVATAR
        ========================================= */

.member-avatar {
    flex-shrink: 0;

    width: 64px;
    height: 64px;

    margin-right: 14px;

    border-radius: 50%;

    padding: 2px;

    background: linear-gradient(145deg, #ffe477, #01ff42, #8a6818);

    box-shadow: 0 0 12px rgba(212, 175, 55, 0.22);
}

.member-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #0a1119;
}

/* =========================================
           MEMBER NAME
        ========================================= */

.member-info {
    /* min-width: 0; */

    flex: 1;
}

.member-name {
    color: #d6deea;

    font-size: 18px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* =========================================
           GAME MINI IMAGE
        ========================================= */

.profit-game {
    flex-shrink: 0;
    width: 108px;
    height: 76px;
    margin: 0 15px;
    padding: 3px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
    overflow: hidden;
}

.profit-game img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 9px;
}

/* =========================================
           PROFIT INFO
        ========================================= */

.profit-info {
    min-width: 210px;
}

.receive-amount {
    color: #01ff42;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

    text-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
}

.profit-label {
    margin-top: 8px;

    color: #9aa8bb;

    font-size: 17px;

    font-weight: 600;
}

/* =========================================
           GOLD SHINE
        ========================================= */

.profit-card::after {
    content: "";

    position: absolute;

    top: -100%;
    left: -120%;

    width: 50%;
    height: 300%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent);

    transform: rotate(20deg);

    transition: left 0.7s ease;

    pointer-events: none;
}

.profit-card:hover::after {
    left: 140%;
}

/* =========================================
           DESKTOP GAME SPACING
        ========================================= */

.game-row {
    row-gap: 24px;
}

.profit-row {
    row-gap: 12px;
}

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

@media (max-width: 991px) {
    .bt-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-heading {
        font-size: 27px;
    }

    .profit-card {
        min-height: 100px;
    }

    .profit-game {
        width: 95px;
        height: 68px;

        margin-left: 10px;
        margin-right: 12px;
    }

    .profit-info {
        min-width: 180px;
    }

    .receive-amount {
        font-size: 17px;
    }

    .profit-label {
        font-size: 15px;
    }
}

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

@media (max-width: 767px) {
    .bt-page {
        padding-top: 22px;
    }

    .bt-container {
        padding-left: 13px;
        padding-right: 13px;
    }

    .section-heading {
        font-size: 24px;

        margin-bottom: 20px;
    }

    .section-heading::before {
        width: 5px;
        height: 24px;

        margin-right: 9px;
    }

    /* Game cards */

    .game-row {
        row-gap: 15px;
    }

    .game-card {
        padding: 6px;

        border-radius: 10px;
    }

    /* Profit */

    .profit-section {
        margin-top: 30px;
    }

    .profit-row {
        row-gap: 12px;
    }

    .profit-card {
        min-height: 90px;

        padding: 10px 11px;

        border-radius: 11px;
    }

    .member-avatar {
        width: 52px;
        height: 52px;

        margin-right: 10px;
    }

    .member-name {
        font-size: 14px;
    }

    .profit-game {
        width: 76px;
        height: 57px;

        margin-left: 8px;
        margin-right: 9px;

        border-radius: 9px;
    }

    .profit-info {
        min-width: 0;

        flex: 1;
    }

    .receive-amount {
        font-size: 14px;
    }

    .profit-label {
        margin-top: 5px;

        font-size: 12px;
    }
}

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

@media (max-width: 450px) {
    .bt-container {
        padding-left: 9px;
        padding-right: 9px;
    }

    .section-heading {
        font-size: 21px;
    }

    .profit-card {
        padding: 9px 8px;
        overflow: auto;
        white-space: nowrap;
    }

    .member-avatar {
        width: 45px;
        height: 45px;

        margin-right: 8px;
    }

    .member-name {
        font-size: 12px;
    }

    .profit-game {
        width: 65px;
        height: 51px;

        margin-left: 6px;
        margin-right: 7px;
    }

    .receive-amount {
        font-size: 12px;
    }

    .profit-label {
        font-size: 11px;
    }
}

/* =========================================
           EXTRA SMALL
        ========================================= */

@media (max-width: 360px) {
    .profit-card {
        padding: 8px 6px;
    }

    .member-avatar {
        width: 40px;
        height: 40px;
    }

    .member-name {
        font-size: 11px;
    }

    .profit-game {
        width: 58px;
        height: 46px;

        margin-left: 5px;
        margin-right: 6px;
    }

    .receive-amount {
        font-size: 11px;
    }

    .profit-label {
        font-size: 10px;
    }
}

/* ====== win game style ==== */

.game_box {
    background: linear-gradient(145deg, #121c27, #080f17);
    border: 1px solid rgb(0 255 66);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 10px 10px;
    border-radius: 15px;
}
/* =========================================
   MULTIPLIER
========================================= */

.multiplier-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;

    overflow-x: auto;

    scrollbar-width: none;
}

.multiplier-row::-webkit-scrollbar {
    display: none;
}
.bet-controls {
    margin-top: 10px;
}

.multiplier-btn {
    flex: 0 0 auto;

    min-width: 70px;
    height: 40px;

    border: 1px solid rgba(212, 175, 55, 0.12);

    border-radius: 20px;

    background: linear-gradient(145deg, #11195b, #101451);

    color: #8990a8;

    font-size: 20px;
    font-weight: 500;

    cursor: pointer;

    transition: 0.25s ease;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 15px rgba(0, 0, 0, 0.25);
}

/* Random */

.random-btn {
    min-width: 108px;

    background: linear-gradient(145deg, #101823, #09121b);

    color: #01ff42;

    border: 1px solid #01ff42;

    box-shadow:
        0 0 10px rgba(212, 175, 55, 0.12),
        inset 0 0 10px rgba(212, 175, 55, 0.04);
}

/* Hover */

.multiplier-btn:hover {
    color: #ffffff;

    border-color: rgba(212, 175, 55, 0.6);

    transform: translateY(-2px);
}

/* Active */

.multiplier-btn.active {
    color: #07110d;

    background: linear-gradient(145deg, #ffe477 0%, #01ff42 55%, #b3861b 100%);

    border-color: #ffe477;

    font-weight: 800;

    box-shadow:
        0 0 10px rgba(212, 175, 55, 0.55),
        0 6px 18px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* =========================================
   BIG / SMALL
========================================= */

.size-row {
    margin-top: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.size-btn {
    padding: 6px 40px !important;
    border: 0 !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    position: relative;
    transition: 0.3s ease;
    outline: none;
    border: none;
    box-shadow: none;
    color: #dce5f2;
    background: linear-gradient(145deg, #293b50, #172534);
}

.size-btn:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline: none !important;
}

/* Big */

.big-btn {
    color: #ffffff;
    background: linear-gradient(145deg, #ffe477 0%, #01ff42 60%, #b88618 100%);
}

/* Small */

.small-btn {
    color: #dce5f2;

    background: linear-gradient(145deg, #0077ff, #3c8add);
}

/* Active Big */

/* .big-btn.active {
    color: #07110d;

    background: linear-gradient(145deg, #ffe477 0%, #01ff42 60%, #b88618 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        0 0 18px rgba(212, 175, 55, 0.35);
} */

/* Active Small */

/* .small-btn.active {
    color: #07110d;

    background: linear-gradient(145deg, #ffe477, #01ff42);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        0 0 18px rgba(212, 175, 55, 0.35);
} */

/* =========================================
   ACTIVE SHINE
========================================= */

.multiplier-btn.active::after,
.size-btn.active::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 45%;
    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

    transform: skewX(-20deg);

    animation: goldShine 2.5s infinite;
}

.size-btn {
    overflow: hidden;
}

@keyframes goldShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 130%;
    }
}

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

@media (max-width: 576px) {
    .multiplier-row {
        gap: 8px;
    }

    .multiplier-btn {
        min-width: 35px;
        height: 30px;

        border-radius: 16px;

        font-size: 16px;
    }

    .random-btn {
        min-width: 58px;
        height: 30px;
        font-size: 13px;
    }

    .size-row {
        margin-top: 15px;
    }
}

/* ==================     broken activation css     ================== */

.block-click {
    pointer-events: none;
}

.broker-page {
    width: 100%;
    min-height: 100vh;
    padding: 30px 15px 50px;

    background:
        radial-gradient(circle at 50% 10%, rgba(40, 48, 65, 0.35), transparent 35%),
        linear-gradient(180deg, #050a10 0%, #02070c 100%);

    overflow-x: hidden;
}

.balance-card {
    position: relative;
    margin: 0 auto;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.balance-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 35%;
    height: 2px;

    background: linear-gradient(90deg, transparent, #fff, #0dcf35, transparent);

    box-shadow: 0 0 12px #0dcf35;

    animation: balanceLight 4s linear infinite;
}

@keyframes balanceLight {
    0% {
        left: -35%;
    }

    100% {
        left: 120%;
    }
}

.balance-coin {
    position: relative;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #016e1e, #10c63f 38%, #13c73f 72%, #01731f);
    border: 5px solid #09da40;
    box-shadow:
        0 0 0 4px rgb(14 190 61 / 39%),
        inset 0 0 18px rgba(255, 255, 255, 0.35),
        0 0 30px rgb(9 220 65 / 32%);
}

.balance-coin::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
}

.balance-coin span {
    font-size: 35px;
    font-weight: 700;
    color: #fff8d5;
    text-shadow: 2px 3px 0 #936000;
}

.balance-content {
    position: relative;
    z-index: 3;
    margin-left: 25px;
}

.balance-amount {
    font-size: 25px;
    line-height: 0;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    margin-bottom: 20px;
}

.balance-title {
    margin-top: 10px;
    font-size: 25px;
    color: #aeb9ca;
    white-space: nowrap;
}

.balance-chart {
    position: absolute;

    right: 18px;
    bottom: 0;

    width: 300px;
    height: 180px;

    opacity: 0.9;
}

.chart-bars {
    position: absolute;

    right: 0px;
    bottom: -7px;

    display: flex;

    align-items: flex-end;

    gap: 12px;

    transform: skewY(-8deg);
}

.chart-bars span {
    width: 10px;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    border-radius: 18px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chart-bars span:nth-child(1) {
    height: 20px;
}

.chart-bars span:nth-child(2) {
    height: 30px;
}

.chart-bars span:nth-child(3) {
    height: 40px;
}

.chart-bars span:nth-child(4) {
    height: 50px;
}

.chart-bars span:nth-child(5) {
    height: 60px;
}

.chart-line {
    position: absolute;
    height: 89px;
    width: 300px;
    bottom: -70px;
    border-top: 4px solid #08d637;
    transform: rotate(326deg) skewX(-35deg);
    border-radius: 50%;
    box-shadow: 0 -4px 10px rgb(8 212 54 / 65%);
    right: -70px;
}

.broker-heading {
    width: 100%;
    margin: 38px auto 28px;
    /* display: flex; */
    align-items: center;
    gap: 20px;
}

.heading-line {
    flex: 1;

    min-width: 20px;

    height: 3px;

    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
}

.heading-line:last-child {
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
}

.heading-content {
    /* flex: 0 1 auto; */
    text-align: center;
    white-space: nowrap;
}

.heading-content h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    color: #f8f9fb;
}

.heading-content p {
    margin: 0px 0 0;
    font-size: 17px;
    color: #9eabc0;
}

.amount-card {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #263344;
    border-radius: 15px;
    background: linear-gradient(145deg, #070d14, #09111a);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 40px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}

.amount-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 15px;
}

.amount-option {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #263344;
    border-radius: 12px;
    background: linear-gradient(145deg, #151e28, #0d151e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 7px 0 #070c12,
        0 12px 22px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.amount-option:hover {
    transform: translateY(-4px);

    border-color: #68768b;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 11px 0 #070c12,
        0 18px 28px rgba(0, 0, 0, 0.3);
}

.amount-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid #8795aa;
    border-radius: 50%;
    background: #0b121b;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.55);
    transition: all 0.3s ease;
}

.custom-checkbox::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background: transparent;

    transition: all 0.3s ease;
}

.amount-option input:checked + .custom-checkbox {
    border-color: #ffcf43;

    box-shadow:
        0 0 0 4px rgba(255, 205, 55, 0.08),
        0 0 18px rgba(255, 205, 55, 0.5),
        inset 0 3px 7px rgba(0, 0, 0, 0.35);
}

.amount-option input:checked + .custom-checkbox::before {
    background: #ffcc35;

    box-shadow: 0 0 12px rgba(255, 205, 55, 0.8);
}

.check-icon {
    display: none;
}

.amount-value {
    flex: 1;
    min-width: 0;
    margin-left: 7px;
    padding: 0;
    background: transparent;
    color: #f7f8fa;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
    transition: all 0.25s ease;
}

.amount-option input:checked ~ .amount-value {
    color: #fff;

    text-shadow: 0 0 12px rgba(255, 215, 80, 0.25);
}

.coin-stack {
    position: relative;
    width: 30px;
    height: 35px;
    flex: 0 0 30px;
    top: 17px;
}

.coin-stack i {
    position: absolute;
    width: 25px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.coin-stack i:nth-child(1) {
    left: 0;
    bottom: 5px;
}

.coin-stack i:nth-child(2) {
    left: 13px;
    bottom: 19px;
}

.coin-stack i:nth-child(3) {
    left: 26px;
    bottom: 33px;
}

.gold-coins i {
    background: linear-gradient(180deg, #ffe47b, #d89509);

    box-shadow:
        0 4px 0 #805300,
        0 0 8px rgba(255, 205, 55, 0.3);
}

.blue-coins i {
    background: linear-gradient(180deg, #67c6ff, #0878c7);
}

.purple-coins i {
    background: linear-gradient(180deg, #c179ff, #7329d2);
}

.cyan-coins i {
    background: linear-gradient(180deg, #58f3eb, #0caeac);
}

.amount-option:has(input:checked) {
    border-color: #e5b83e;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 7px 0 #080d13,
        0 12px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 202, 48, 0.15);
}

.process-btn-wrapper {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 20px;
}

.process-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 25px; */
    border: 2px solid #0ac239;
    border-radius: 50px;
    background: linear-gradient(145deg, #0ac239, #11c33f, #005e18);
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    cursor: pointer;
    /* box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -4px 0 rgba(164, 105, 0, 0.35),
        0 6px 0 #9c6500,
        0 12px 30px rgba(255, 192, 32, 0.25); */
    transition: all 0.25s ease;
    padding: 7px 40px;
}

.process-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        0 9px 0 #9c6500,
        0 18px 35px rgba(255, 192, 32, 0.35);
}

.process-btn i {
    transition: transform 0.25s ease;
}

.process-btn:hover i {
    transform: translateX(7px);
}

@media (max-width: 800px) {
    .broker-page {
        padding: 25px 12px 40px;
    }

    .balance-card {
        min-height: 190px;

        padding: 25px;
    }

    .balance-coin {
        width: 95px;
        height: 95px;

        flex-basis: 95px;
    }

    .balance-coin span {
        font-size: 52px;
    }

    .balance-content {
        margin-left: 22px;
    }

    .balance-amount {
        font-size: 42px;
    }

    .balance-title {
        font-size: 21px;
    }

    /* .balance-chart {
        opacity: 0.25;
    } */

    .broker-heading {
        gap: 12px;
    }

    .heading-content h2 {
        font-size: 34px;
    }

    .heading-content p {
        font-size: 17px;
    }

    .amount-card {
        padding: 30px 20px;
    }

    .amount-option {
        min-height: 115px;

        padding: 15px;
    }

    .amount-value {
        margin-left: 15px;

        font-size: 30px;
    }

    .custom-checkbox {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .coin-stack {
        transform: scale(0.8);

        transform-origin: right center;
    }
}

@media (max-width: 600px) {
    .broker-page {
        padding: 18px 10px 35px;
    }

    /* ---------- BALANCE ---------- */

    .balance-card {
        width: 100%;

        min-height: 145px;

        padding: 20px 18px;

        border-radius: 22px;
    }

    .balance-coin {
        width: 70px;
        height: 70px;

        flex: 0 0 70px;

        border-width: 3px;
    }

    .balance-coin::before {
        inset: 6px;
    }

    .balance-coin span {
        font-size: 39px;
    }

    .balance-content {
        margin-left: 15px;
    }

    .balance-amount {
        font-size: 30px;

        letter-spacing: 0;

        white-space: nowrap;
    }

    .balance-title {
        margin-top: 6px;

        font-size: 16px;

        white-space: normal;

        line-height: 1.2;
    }

    /* .balance-chart {
        display: none;
    } */

    /* ---------- HEADING ---------- */

    .broker-heading {
        margin: 28px auto 22px;

        gap: 8px;
    }

    .heading-line {
        min-width: 15px;
    }

    .wallet-icon {
        width: 35px;

        font-size: 28px;
    }

    .heading-content {
        min-width: 0;
    }

    .heading-content h2 {
        font-size: 27px;

        white-space: nowrap;
    }

    .heading-content p {
        font-size: 14px;

        white-space: nowrap;
    }

    /* ---------- AMOUNT CARD ---------- */

    .amount-card {
        width: 100%;

        padding: 22px 12px 25px;

        border-radius: 19px;
    }

    /* IMPORTANT:
       2 cards top + 2 cards bottom
    */

    .amount-form {
        width: 100%;

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

        gap: 14px 9px;
    }

    /* ---------- OPTION ---------- */

    .amount-option {
        width: 100%;

        min-height: 92px;

        padding: 10px;

        border-radius: 16px;
    }

    /* ---------- CHECK ---------- */

    .custom-checkbox {
        width: 27px;
        height: 27px;

        flex: 0 0 27px;

        border-width: 3px;
    }

    .custom-checkbox::before {
        inset: 5px;
    }

    /* ---------- AMOUNT ---------- */

    .amount-value {
        margin-left: 8px;

        font-size: 21px;

        overflow: visible;
    }

    /* ---------- COINS ---------- */

    .coin-stack {
        width: 43px;
        height: 52px;

        flex: 0 0 43px;

        transform: scale(0.62);

        transform-origin: right center;

        margin-left: -8px;
    }

    /* ---------- PROCESS ---------- */

    .process-btn-wrapper {
        margin-top: 30px;
    }

    .process-btn {
        width: 90%;

        min-height: 58px;

        font-size: 25px;

        gap: 15px;
    }

    .process-btn i {
        font-size: 22px;
    }
}

.small-swal {
    width: 320px !important;
    font-size: 14px;
}

.small-swal .swal2-title {
    font-size: 20px;
}

.small-swal .swal2-html-container {
    font-size: 14px;
}

.small-swal .swal2-confirm {
    font-size: 13px;
    padding: 7px 18px;
}

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

@media (max-width: 390px) {
    .balance-card {
        padding: 17px 14px;
    }

    .balance-coin {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }

    .balance-coin span {
        font-size: 33px;
    }

    .balance-content {
        margin-left: 11px;
        margin-top: 15px;
    }

    .balance-amount {
        font-size: 25px;
        margin-bottom: 25px;
    }

    .balance-title {
        font-size: 14px;
    }

    .heading-content h2 {
        font-size: 23px;
    }

    .heading-content p {
        font-size: 12px;
    }

    .amount-option {
        min-height: 82px;

        padding: 8px;
    }

    .custom-checkbox {
        width: 23px;
        height: 23px;

        flex-basis: 23px;
    }

    .amount-value {
        font-size: 18px;

        margin-left: 6px;
    }

    .coin-stack {
        transform: scale(0.48);

        margin-left: -13px;
    }

    .process-btn {
        width: 94%;

        min-height: 53px;

        font-size: 22px;
    }
}

.game-timers {
    width: 100%;
    margin: 0 auto 25px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-radius: 18px;
    padding: 4px;
    overflow: hidden;

    background: linear-gradient(145deg, #121c27, #080f17);
    border: 1px solid rgb(0 255 66);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.timer-item.active {
    background: linear-gradient(145deg, #121c27, #080f17);
    border: 1px solid rgb(0 255 66);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 13px;
}
.timer-item {
    position: relative;
    flex: 1;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #ff3333;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}
.timer-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid currentColor;
    font-size: 27px;
    text-shadow: 0 0 8px currentColor;
    box-shadow:
        0 0 12px currentColor,
        inset 0 0 8px rgba(255, 255, 255, 0.08);
    animation: timerPulse 2s infinite ease-in-out;
}
.timer-arrow {
    font-size: 16px;
    line-height: 12px;
    color: currentColor;
    text-shadow: 0 0 7px currentColor;
}
.timer-item span {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 10px currentColor;
}
.timer-green {
    color: #20f56b;
}
.timer-purple {
    color: #d94cff;
}
.timer-blue {
    color: #14bfff;
}
.timer-item:last-child {
    border-right: none;
}

@media (max-width: 390px) {
    .timer-item {
        min-height: 72px;
    }
}
@media (max-width: 600px) {
    .timer-item {
        min-height: 82px;
    }
}
@media (max-width: 600px) {
    .game-timers {
        margin-bottom: 18px;
        border-radius: 14px;
        padding: 3px;
    }
}
@media (max-width: 390px) {
    .timer-icon {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .timer-icon {
        width: 32px;
        height: 32px;
        border-width: 2px;
        font-size: 18px;
    }
}
@media (max-width: 390px) {
    .timer-arrow {
        font-size: 9px;
    }
}
@media (max-width: 600px) {
    .timer-arrow {
        font-size: 10px;
        line-height: 8px;
    }
}
@media (max-width: 600px) {
    .timer-item span {
        font-size: 14px;
    }
}
@media (max-width: 390px) {
    .timer-item span {
        font-size: 12px;
    }
}
.game-timers > a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    height: auto;
}

.game-timers > a .timer-item {
    width: 100%;
    height: 100%;
}

/* =========================================================
   PREMIUM 3D BET MODAL
   DARK NAVY + GOLD THEME
========================================================= */

/* =========================================================
   COMMON BET MODAL
   ========================================================= */

.bet-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    width: 100%;
    height: 100%;

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

    padding: 20px;

    background: rgba(2, 6, 12, 0.84);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    overflow-y: auto;
}

.bet-modal.show {
    display: flex;
    animation: overlayIn 0.3s ease forwards;
}

@keyframes overlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   MAIN MODAL BOX
   ========================================================= */

.bet-modal-box {
    position: relative;

    width: 620px;
    max-width: 620px;

    max-height: 92vh;

    margin: auto;

    overflow: hidden;

    border-radius: 22px;

    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.035), transparent 38%),
        linear-gradient(145deg, #111c28 0%, #09111a 55%, #050b12 100%);

    border: 1px solid rgba(212, 175, 55, 0.42);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transform: scale(0.94) translateY(20px);

    animation: modalIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalIn {
    0% {
        opacity: 0;
        transform: perspective(900px) rotateX(8deg) scale(0.94) translateY(20px);
    }

    70% {
        opacity: 1;
        transform: perspective(900px) rotateX(0) scale(1.01) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: perspective(900px) rotateX(0) scale(1) translateY(0);
    }
}

/* =========================================================
   CORNER EFFECT
   ========================================================= */

.bet-modal-box::before,
.bet-modal-box::after {
    content: "";

    position: absolute;

    top: 10px;

    width: 22px;
    height: 22px;

    z-index: 20;

    border-top: 2px solid #ffe477;

    opacity: 0.9;
}

.bet-modal-box::before {
    left: 10px;

    border-left: 2px solid #ffe477;

    box-shadow: -3px -3px 10px rgba(212, 175, 55, 0.18);
}

.bet-modal-box::after {
    right: 10px;

    border-right: 2px solid #ffe477;

    box-shadow: 3px -3px 10px rgba(212, 175, 55, 0.18);
}

/* =========================================================
   HEADER - GOLD DEFAULT / BIG
   ========================================================= */

.bet-modal-header {
    position: relative;

    min-height: 145px;

    padding: 22px 20px 48px;

    text-align: center;

    overflow: hidden;

    color: #071019;

    background: linear-gradient(145deg, #806017 0%, #c69b29 24%, #ffe477 50%, #d2a52f 72%, #76550d 100%);

    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        inset 0 -10px 20px rgba(85, 55, 0, 0.2);
}

/* Header curved bottom */

.bet-modal-header::after {
    content: "";

    position: absolute;

    left: -5%;
    right: -5%;

    bottom: -60px;

    height: 90px;

    background: #080f18;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    transform: rotate(-2deg);

    z-index: 2;
}

/* Header moving shine */

.bet-modal-header::before {
    content: "";

    position: absolute;

    top: -30px;
    left: -160px;

    width: 230px;
    height: 65px;

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

    filter: blur(22px);

    transform: rotate(-25deg);

    animation: goldLight 4s ease-in-out infinite;

    z-index: 1;
}

@keyframes goldLight {
    0% {
        left: -160px;
        opacity: 0.05;
    }

    45% {
        left: 80%;
        opacity: 0.38;
    }

    100% {
        left: 110%;
        opacity: 0.05;
    }
}

/* =========================================================
   TITLE
   ========================================================= */

.bet-modal-header h3 {
    position: relative;

    z-index: 5;

    margin: 0 0 14px;

    color: #071019;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: 0.3px;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.35),
        0 4px 10px rgba(80, 50, 0, 0.28);
}

/* =========================================================
   SELECTED DISPLAY
   ========================================================= */

.selected-display {
    position: relative;

    z-index: 8;

    width: 72%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding: 9px 18px;

    border-radius: 10px;

    background: linear-gradient(145deg, #ffffff, #e9edf1);

    border: 1px solid #fff;

    color: #111923;

    font-size: 21px;

    font-weight: 800;

    box-shadow:
        0 5px 0 #967019,
        0 9px 18px rgba(0, 0, 0, 0.22),
        inset 0 2px 0 #fff;
}

/* =========================================================
   BODY
   ========================================================= */

.bet-modal-body {
    position: relative;

    padding: 20px 25px 24px;

    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.045), transparent 42%), #080f18;
}

/* Body vertical glow */

.bet-modal-body::before {
    content: "";

    position: absolute;

    top: 25px;
    bottom: 25px;
    left: 9px;

    width: 2px;

    background: linear-gradient(to bottom, transparent, #01ff42, transparent);

    box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);

    opacity: 0.35;
}

/* =========================================================
   ROW
   ========================================================= */

.bet-line {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 19px;
}

/* =========================================================
   LABEL
   ========================================================= */

.bet-label {
    min-width: 105px;

    color: #e4eaf1;

    font-size: 20px;

    font-weight: 700;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

/* =========================================================
   BALANCE
   ========================================================= */

.balance-options {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}

.balance-btn {
    min-width: 53px;
    height: 48px;

    padding: 0 9px;

    border: 1px solid #354352;

    border-radius: 6px;

    background: linear-gradient(145deg, #1c2936, #111b25);

    color: #aeb9c6;

    font-size: 17px;

    font-weight: 800;

    box-shadow:
        0 4px 0 #060b10,
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border 0.2s ease,
        box-shadow 0.2s ease;
}

.balance-btn:hover {
    transform: translateY(-2px);

    color: #fff;

    border-color: #01ff42;

    box-shadow:
        0 6px 0 #070b10,
        0 0 12px rgba(212, 175, 55, 0.18);
}

/* GOLD ACTIVE */

.balance-btn.active {
    background: linear-gradient(145deg, #ffe477, #01ff42 55%, #9a7015);

    border-color: #ffe477;

    color: #071019;

    box-shadow:
        0 5px 0 #73510b,
        0 0 18px rgba(212, 175, 55, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transform: translateY(-2px);
}

/* =========================================================
   QUANTITY
   ========================================================= */

.quantity-box {
    display: flex;

    align-items: center;

    gap: 7px;
}

.quantity-box button {
    width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid #ffe477;

    border-radius: 6px;

    background: linear-gradient(145deg, #ffe477, #01ff42 55%, #9a7015);

    color: #071019;

    font-size: 28px;

    font-weight: 900;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 0 #73510b,
        0 7px 14px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transition: 0.2s ease;
}

.quantity-box button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 0 #73510b,
        0 12px 20px rgba(212, 175, 55, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.quantity-box button:active {
    transform: translateY(2px);

    box-shadow: 0 2px 0 #73510b;
}

.quantity-box input {
    width: 125px;
    height: 48px;

    border: 1px solid #394858;

    border-radius: 6px;

    outline: none;

    text-align: center;

    background: linear-gradient(145deg, #182430, #0e171f);

    color: #fff;

    font-size: 19px;

    font-weight: 800;

    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.4),
        0 4px 0 #05090d;
}

/* =========================================================
   MULTIPLIERS
   ========================================================= */

.modal-multipliers {
    display: flex;

    justify-content: flex-end;

    gap: 7px;

    flex-wrap: wrap;
}

.modal-multiple {
    min-width: 64px;
    height: 46px;

    padding: 0 8px;

    border: 1px solid #344251;

    border-radius: 6px;

    background: linear-gradient(145deg, #1c2935, #111a23);

    color: #aeb9c6;

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 4px 0 #060a0f,
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transition: 0.2s ease;
}

.modal-multiple:hover {
    transform: translateY(-2px);

    color: #fff;

    border-color: #01ff42;
}

.modal-multiple.active {
    background: linear-gradient(145deg, #ffe477, #01ff42 55%, #9a7015);

    border-color: #ffe477;

    color: #071019;

    box-shadow:
        0 5px 0 #73510b,
        0 0 17px rgba(212, 175, 55, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transform: translateY(-2px);
}

/* =========================================================
   AGREEMENT
   ========================================================= */

.agreement {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 3px;
}

.agree-check {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #dce4ed;

    font-size: 17px;

    cursor: pointer;
}

.agree-check input {
    position: absolute;

    opacity: 0;
}

.check-mark {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: linear-gradient(145deg, #ffe477, #01ff42, #997015);

    color: #071019;

    font-size: 20px;

    font-weight: 900;

    box-shadow:
        0 4px 0 #76530b,
        0 0 13px rgba(212, 175, 55, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.agreement a {
    color: #ff7777;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;
}

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

.bet-modal-footer {
    display: flex;

    width: 100%;

    min-height: 65px;

    border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.modal-cancel {
    width: 34%;

    border: 0;

    background: linear-gradient(145deg, #1d2632, #111923);

    color: #788697;

    font-size: 19px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.modal-cancel:hover {
    color: #fff;

    background: linear-gradient(145deg, #273441, #18222c);
}

/* =========================================================
   BIG TOTAL - GOLD
   ========================================================= */

.modal-total {
    position: relative;

    flex: 1;

    overflow: hidden;

    border: 0;

    background: linear-gradient(145deg, #ffe477 0%, #01ff42 45%, #a67816 100%);

    color: #071019;

    font-size: 20px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -5px 10px rgba(100, 65, 0, 0.22);

    transition: 0.25s ease;
}

.modal-total::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);

    transform: skewX(-20deg);

    animation: goldButtonShine 3.5s infinite;
}

@keyframes goldButtonShine {
    0% {
        left: -100%;
    }

    35% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

.modal-total:hover {
    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.8),
        0 0 22px rgba(212, 175, 55, 0.28);
}

/* =========================================================
   =========================================================
   SMALL MODAL - COMPLETE BLUE THEME
   #0077ff -> #3c8add
   =========================================================
   ========================================================= */

/* Main */

.small-modal-theme {
    border-color: rgba(0, 119, 255, 0.55) !important;

    background:
        radial-gradient(circle at 85% 10%, rgba(0, 119, 255, 0.13), transparent 32%),
        linear-gradient(145deg, #101a25, #08111c 55%, #050c14) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.8),
        0 0 45px rgba(0, 119, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Blue corners */

.small-modal-theme::before,
.small-modal-theme::after {
    border-color: #67adff !important;

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

/* =========================================================
   BLUE HEADER
   ========================================================= */

.small-modal-theme .bet-modal-header {
    background: linear-gradient(145deg, #005bc4 0%, #0077ff 34%, #3c8add 66%, #0065d9 100%) !important;

    color: #fff !important;

    box-shadow:
        0 8px 26px rgba(0, 119, 255, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -10px 20px rgba(0, 45, 110, 0.25) !important;
}

/* Blue moving shine */

.small-modal-theme .bet-modal-header::before {
    background: rgba(255, 255, 255, 0.24) !important;

    animation: blueLight 4s ease-in-out infinite !important;
}

@keyframes blueLight {
    0% {
        left: -160px;
        opacity: 0.05;
    }

    45% {
        left: 80%;
        opacity: 0.38;
    }

    100% {
        left: 110%;
        opacity: 0.05;
    }
}

/* =========================================================
   BLUE TITLE
   ========================================================= */

.small-modal-theme .bet-modal-header h3 {
    color: #ffffff !important;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 35, 90, 0.45) !important;
}

/* =========================================================
   BLUE SELECT DISPLAY
   ========================================================= */

.small-modal-theme .selected-display {
    background: linear-gradient(145deg, #ffffff, #eaf3ff) !important;

    border-color: #fff !important;

    color: #102033 !important;

    box-shadow:
        0 5px 0 #0756a8,
        0 9px 18px rgba(0, 68, 150, 0.3),
        inset 0 2px 0 #fff !important;
}

/* =========================================================
   BLUE BODY
   ========================================================= */

.small-modal-theme .bet-modal-body {
    background: radial-gradient(circle at 50% 0%, rgba(0, 119, 255, 0.09), transparent 43%), #080f18 !important;
}

.small-modal-theme .bet-modal-body::before {
    background: linear-gradient(to bottom, transparent, #0077ff, #3c8add, transparent) !important;

    box-shadow: 0 0 10px rgba(0, 119, 255, 0.35) !important;
}

/* =========================================================
   BLUE LABEL
   ========================================================= */

.small-modal-theme .bet-label {
    color: #e7f1ff !important;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.65) !important;
}

/* =========================================================
   BLUE BALANCE
   ========================================================= */

.small-modal-theme .balance-btn {
    border-color: #334b65 !important;

    background: linear-gradient(145deg, #1b2b3c, #101b27) !important;

    color: #aebed0 !important;

    box-shadow:
        0 4px 0 #050a10,
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.small-modal-theme .balance-btn:hover {
    border-color: #0077ff !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 6px 0 #063e78,
        0 0 14px rgba(0, 119, 255, 0.25) !important;
}

.small-modal-theme .balance-btn.active {
    background: linear-gradient(145deg, #0077ff, #3c8add) !important;

    border-color: #70afff !important;

    color: #fff !important;

    box-shadow:
        0 5px 0 #064b94,
        0 0 20px rgba(0, 119, 255, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;

    transform: translateY(-2px);
}

/* =========================================================
   BLUE QUANTITY
   ========================================================= */

.small-modal-theme .quantity-box button {
    background: linear-gradient(145deg, #0077ff, #3c8add) !important;

    border-color: #70afff !important;

    color: #fff !important;

    box-shadow:
        0 5px 0 #064b94,
        0 7px 15px rgba(0, 119, 255, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;
}

.small-modal-theme .quantity-box button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 0 #064b94,
        0 12px 20px rgba(0, 119, 255, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.52) !important;
}

.small-modal-theme .quantity-box button:active {
    transform: translateY(2px);

    box-shadow: 0 2px 0 #064b94 !important;
}

.small-modal-theme .quantity-box input {
    border-color: #36516c !important;

    background: linear-gradient(145deg, #182838, #0d1722) !important;

    color: #fff !important;

    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.4),
        0 4px 0 #05090d !important;
}

/* =========================================================
   BLUE MULTIPLIERS
   ========================================================= */

.small-modal-theme .modal-multiple {
    border-color: #334b65 !important;

    background: linear-gradient(145deg, #1b2b3c, #101b27) !important;

    color: #aebed0 !important;

    box-shadow:
        0 4px 0 #050a10,
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.small-modal-theme .modal-multiple:hover {
    border-color: #0077ff !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 6px 0 #063e78,
        0 0 15px rgba(0, 119, 255, 0.25) !important;
}

.small-modal-theme .modal-multiple.active {
    background: linear-gradient(145deg, #0077ff, #3c8add) !important;

    border-color: #70afff !important;

    color: #fff !important;

    box-shadow:
        0 5px 0 #064b94,
        0 0 19px rgba(0, 119, 255, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;

    transform: translateY(-2px);
}

/* =========================================================
   BLUE CHECKBOX
   ========================================================= */

.small-modal-theme .check-mark {
    background: linear-gradient(145deg, #0077ff, #3c8add) !important;

    color: #fff !important;

    box-shadow:
        0 4px 0 #064b94,
        0 0 15px rgba(0, 119, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;
}

.small-modal-theme .agree-check {
    color: #dcecff !important;
}

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

.small-modal-theme .bet-modal-footer {
    border-top-color: rgba(0, 119, 255, 0.22) !important;
}

/* Cancel */

.small-modal-theme .modal-cancel {
    background: linear-gradient(145deg, #1d2937, #111a24) !important;

    color: #8495a8 !important;
}

.small-modal-theme .modal-cancel:hover {
    color: #fff !important;

    background: linear-gradient(145deg, #26394c, #162330) !important;
}

/* =========================================================
   BLUE TOTAL BUTTON
   ========================================================= */

.small-modal-theme .modal-total {
    background: linear-gradient(145deg, #0077ff, #3c8add) !important;

    color: #fff !important;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 50, 120, 0.25),
        0 0 18px rgba(0, 119, 255, 0.18) !important;
}

/* Blue shine */

.small-modal-theme .modal-total::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;

    animation: blueButtonShine 3.5s infinite;
}

@keyframes blueButtonShine {
    0% {
        left: -100%;
    }

    35% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

.small-modal-theme .modal-total:hover {
    filter: brightness(1.1);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        0 0 25px rgba(0, 119, 255, 0.35) !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {
    .bet-modal {
        align-items: center;

        justify-content: center;

        padding: 25px;
    }

    .bet-modal-box {
        width: 620px;

        max-width: 620px;

        margin: 0 auto !important;
    }
}

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

@media (min-width: 576px) and (max-width: 767px) {
    .bet-modal {
        padding: 15px;
    }

    .bet-modal-box {
        width: 100%;

        max-width: 580px;

        margin: auto !important;
    }
}

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

@media (max-width: 575px) {
    .bet-modal {
        padding: 0;

        align-items: flex-end;
    }

    .bet-modal-box {
        width: 100%;

        max-width: 100%;

        max-height: 94vh;

        margin: 0 !important;

        border-radius: 20px 20px 0 0;
    }

    .bet-modal-header {
        min-height: 140px;

        padding: 20px 15px 42px;
    }

    .bet-modal-header h3 {
        font-size: 25px;

        margin-bottom: 13px;
    }

    .selected-display {
        width: 88%;

        padding: 9px 14px;

        gap: 18px;

        font-size: 19px;
    }

    .bet-modal-body {
        padding: 18px 14px 21px;
    }

    .bet-line {
        gap: 8px;

        margin-bottom: 18px;
    }

    .bet-label {
        min-width: 75px;

        font-size: 18px;
    }

    .balance-options {
        gap: 5px;
    }

    .balance-btn {
        min-width: 45px;

        height: 45px;

        padding: 0 7px;

        font-size: 15px;
    }

    .quantity-box {
        gap: 5px;
    }

    .quantity-box button {
        width: 44px;

        height: 45px;

        font-size: 26px;
    }

    .quantity-box input {
        width: 92px;

        height: 45px;

        font-size: 17px;
    }

    .modal-multipliers {
        gap: 5px;
    }

    .modal-multiple {
        min-width: 55px;

        height: 44px;

        padding: 0 7px;

        font-size: 14px;
    }

    .agreement {
        gap: 10px;

        flex-wrap: wrap;
    }

    .agree-check {
        font-size: 16px;
    }

    .check-mark {
        width: 32px;

        height: 32px;

        font-size: 19px;
    }

    .agreement a {
        font-size: 15px;
    }

    .bet-modal-footer {
        min-height: 63px;
    }

    .modal-cancel {
        width: 34%;

        font-size: 17px;
    }

    .modal-total {
        font-size: 16px;
    }
}

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

@media (max-width: 380px) {
    .bet-modal-header {
        min-height: 132px;

        padding: 18px 12px 40px;
    }

    .bet-modal-header h3 {
        font-size: 22px;
    }

    .selected-display {
        width: 94%;

        font-size: 17px;

        gap: 13px;
    }

    .bet-modal-body {
        padding: 16px 11px 19px;
    }

    .bet-label {
        min-width: 66px;

        font-size: 16px;
    }

    .balance-btn {
        min-width: 41px;

        height: 42px;

        font-size: 14px;
    }

    .quantity-box button {
        width: 40px;

        height: 42px;
    }

    .quantity-box input {
        width: 76px;

        height: 42px;
    }

    .modal-multiple {
        min-width: 49px;

        height: 41px;

        font-size: 13px;
    }

    .modal-cancel {
        font-size: 15px;
    }

    .modal-total {
        font-size: 14px;
    }
}

.buy_btn {
    color: rgb(255, 255, 255);
    background: #3dc021;
    border-color: #3dc021;
}
.sell_btn {
    color: rgb(255, 255, 255);
    background: rgb(242, 65, 59);
    border-color: rgb(242, 65, 59);
}
.p2p_btn {
    color: rgb(255, 255, 255);
    background: #0277ff;
    border-color: #0277ff;
}

.modal_xvalue {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 10px;
}
.modal_xvalue button {
    background: #b5b5b5;
    padding: 5px 13px;
    border-radius: 6px;
    background: linear-gradient(145deg, #1c2936, #111b25);
    color: #aeb9c6;
    box-shadow:
        0 4px 0 #060b10,
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid #354352;
}
.modal_xvalue span {
    background: #b5b5b5;
    padding: 5px 13px;
    border-radius: 6px;
    background: linear-gradient(145deg, #9a9a9a, #8c949c);
    color: #ffffff;
    /* box-shadow: 0 4px 0 #c9c9c9, inset 0 1px 0 rgba(255, 255, 255, .06); */
    border: 1px solid #90969c;
}

.modal_xvalue button:focus {
    background: #12c912;
    outline: none;
}

.modal-header {
    justify-content: center;
}

/* Timer Main */
.game-timer {
    width: 100%;
    padding: 9px 12px;
    background: linear-gradient(135deg, #ffca45, #ffad00);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Timer */
#timer {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: Arial, sans-serif;
    font-size: 0;
}

/* Each Digit Box */
#timer .timer-digit {
    position: relative;
    width: 25px;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050505;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
}

/* Cut Corner */
#timer .timer-digit::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: #ffb51d;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Colon */
#timer .timer-colon {
    color: #050505;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin: 0 -3px;
}

/* Mobile */
@media (max-width: 480px) {
    .game-timer {
        padding: 8px 10px;
    }

    #timer {
        gap: 7px;
    }

    #timer .timer-colon {
        margin: 0 -2px;
    }

    #timer .timer-digit::after {
        width: 12px;
        height: 12px;
    }
}

.promotion_card {
    background: linear-gradient(145deg, #111c29, #070d14) !important;
    border: 1px solid rgb(0 255 66) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.promotion-code {
    position: relative;
    margin-top: 15px;
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid rgb(1 255 66 / 54%);
    background:
        radial-gradient(circle at 15% 20%, rgba(212, 175, 55, 0.14), transparent 35%),
        linear-gradient(145deg, #11110e, #050505 60%, #151208);
    text-align: center;
    overflow: hidden;
    isolation: isolate;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 223, 115, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.8),
        0 0 18px rgba(212, 175, 55, 0.08);

    transition: all 0.35s ease;
}

/* Golden moving shine */
.promotion-code::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -100%;
    width: 55%;
    height: 220%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 223, 115, 0.08),
        rgba(255, 255, 255, 0.25),
        rgba(255, 223, 115, 0.08),
        transparent
    );

    transform: rotate(20deg);
    animation: promotionShine 4s ease-in-out infinite;
    pointer-events: none;
}

/* Inner golden line */
.promotion-code::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 11px;
    border: 1px solid rgb(1 255 66 / 54%);
    pointer-events: none;
}

/* Hover */
.promotion-code:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 223, 115, 0.18);
}

/* Shine Animation */
@keyframes promotionShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 150%;
    }
}

.modal_h {
    flex-direction: column !important;
    justify-content: center;
    gap: 0px;
    align-items: center;
}

.zero_no {
    background: linear-gradient(to top left, #9c27b0 50%, #bd0711 50%) !important;
}
.five_no {
    background: linear-gradient(to top left, #9c27b0 50%, #44b659 50%) !important;
}

.live-section {
    margin-bottom: 70px;
}

.live-card {
    padding: 30px;
    background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    border-radius: 18px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
}

.live-card h3 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 8px;
}

.live-card p {
    color: #9ba8b9;
    margin: 0;
}

.live-number {
    font-size: 35px;
    font-weight: 900;
    color: #01ff42;
}

/* =========================
           SECTION 4 - GAME FEATURES
        ========================= */

.feature-section {
    margin-bottom: 70px;
}

.feature-card {
    padding: 28px 22px;
    margin-bottom: 20px;
    text-align: center;

    background: linear-gradient(145deg, #121e2b, #080f17);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;

    transition: 0.3s ease;

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
}

.feature-card:hover {
    transform: translateY(-7px);

    border-color: #01ff42;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(212, 175, 55, 0.15);
}

.feature-icon {
    width: 65px;
    height: 65px;

    margin: auto auto 18px;

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

    border-radius: 16px;

    font-size: 27px;

    color: #071019;

    background: linear-gradient(145deg, #ffe477, #01ff42, #9a7015);

    box-shadow:
        0 5px 0 #73510b,
        0 0 15px rgba(212, 175, 55, 0.25);
}

.feature-card h4 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px;
}

.feature-card p {
    color: #8e9aaa;
    font-size: 14px;
    margin: 0;
}

/* =========================
           SECTION 5 - HOW TO PLAY
        ========================= */

.how-section {
    margin-bottom: 70px;
}

.step-card {
    position: relative;

    padding: 25px;

    background: linear-gradient(145deg, #101b28, #070d14);

    border-radius: 16px;

    border: 1px solid rgb(0 255 66);
    margin-bottom: 30px;
}

.step-number {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
}

.step-card h4 {
    margin-top: 20px;
    color: #fff;
    font-weight: 800;
}

.step-card p {
    color: #8f9bab;
    margin: 0;
    line-height: 1.6;
}

/* =========================
           SECTION 6 - CTA
        ========================= */

.cta-section {
    margin-bottom: 70px;
}

.cta-box {
    position: relative;

    padding: 50px 30px;

    text-align: center;

    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.12), transparent 55%),
        linear-gradient(145deg, #111c29, #050a10);

    border: 1px solid #01ff42;

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cta-box h2 {
    font-size: 34px;
    font-weight: 900;
    color: #01ff42;
}

.cta-box p {
    color: #9ba8b9;
    margin: 12px 0 25px;
}

.play-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
    transition: 0.25s ease;
}

.play-btn:hover {
    color: #071019;
    transform: translateY(-3px);

    box-shadow:
        0 9px 0 #73510b,
        0 0 28px rgba(212, 175, 55, 0.4);
}

/* =========================
           SECTION 7 - FOOTER
        ========================= */

.footer {
    padding: 25px 0;

    text-align: center;

    border-top: 1px solid rgba(212, 175, 55, 0.12);

    color: #667384;
}

.footer strong {
    color: #01ff42;
}

/* =========================
           RESPONSIVE
        ========================= */

@media (max-width: 991px) {
    .main-wrapper {
        padding: 40px 20px;
    }

    .profit-card {
        padding: 15px 20px;
    }

    .win-box {
        width: 105px;
    }
}

@media (max-width: 767px) {
    .main-wrapper {
        padding: 30px 15px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .section-title h2 {
        font-size: 23px;
    }

    .section-title::before {
        width: 5px;
        height: 27px;
    }

    .profit-card {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 15px;
    }

    .profit-right {
        width: 100%;
        justify-content: space-between;
    }

    .win-box {
        width: 110px;
    }

    .profit-amount h4 {
        font-size: 17px;
    }

    .profit-amount p {
        font-size: 14px;
    }

    .live-card {
        padding: 22px;
    }

    .live-number {
        font-size: 28px;
    }

    .cta-box h2 {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .member-avatar {
        width: 52px;
        height: 52px;
    }

    .member-name {
        font-size: 15px;
    }

    .profit-right {
        gap: 10px;
    }

    .win-box {
        width: 95px;
        height: 65px;
        font-size: 13px;
    }

    .profit-amount h4 {
        font-size: 15px;
    }

    .feature-card {
        padding: 22px 18px;
        margin-bottom: 20px;
    }

    .cta-box {
        padding: 35px 20px;
    }
}

.game-stats,
.featured-game {
    margin-bottom: 75px;
}

.section-title span {
    color: #6f7d8e;
    font-size: 13px;
    font-weight: 600;
    margin-left: 5px;
}

/* =========================================
   ARENA CARD
========================================= */

.arena-card {
    position: relative;
    height: 430px;
    overflow: hidden;

    padding: 12px;

    border-radius: 20px;

    background: linear-gradient(145deg, #142334, #070e16);

    border: 1px solid rgba(212, 175, 55, 0.22);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition: 0.4s ease;
}

.arena-card:hover {
    transform: translateY(-10px);

    border-color: #01ff42;

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.65),
        0 0 30px rgba(212, 175, 55, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.arena-card::before {
    content: "";

    position: absolute;
    inset: 7px;

    border: 1px solid rgba(212, 175, 55, 0.14);

    border-radius: 15px;

    pointer-events: none;
}

.arena-badge {
    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 3;

    padding: 6px 11px;

    border-radius: 7px;

    background: rgba(212, 175, 55, 0.13);

    border: 1px solid rgba(212, 175, 55, 0.4);

    color: #ffe477;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.5px;

    backdrop-filter: blur(5px);
}

.arena-badge i {
    margin-right: 4px;
}

.arena-image {
    position: relative;

    height: 350px;

    display: flex;

    justify-content: center;
    align-items: center;
}

.arena-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 15px rgba(212, 175, 55, 0.15));

    transition: 0.5s ease;
}

.arena-card:hover .arena-image img {
    transform: scale(1.04);
}

.arena-content {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 17px;

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

    padding: 12px 14px;

    border-radius: 12px;

    background: rgba(4, 9, 15, 0.92);

    border: 1px solid rgba(212, 175, 55, 0.18);

    backdrop-filter: blur(8px);
}

.arena-content h3 {
    margin: 0;

    color: #ffe477;

    font-size: 18px;
    font-weight: 900;

    text-transform: uppercase;
}

.arena-content p {
    margin: 3px 0 0;

    color: #8491a1;

    font-size: 11px;
}

.arena-btn {
    width: 42px;
    height: 42px;

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

    border-radius: 10px;

    color: #071019;

    text-decoration: none;

    background: linear-gradient(145deg, #ffe477, #01ff42, #9a7015);

    box-shadow:
        0 4px 0 #73510b,
        0 0 12px rgba(212, 175, 55, 0.25);

    transition: 0.25s ease;
}

.arena-btn:hover {
    color: #071019;

    transform: translateY(-3px);

    box-shadow:
        0 7px 0 #73510b,
        0 0 20px rgba(212, 175, 55, 0.4);
}

/* =========================================
   STATISTICS
========================================= */

.stat-card {
    position: relative;
    margin-bottom: 20px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(145deg, #111e2c, #070e16);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
    transition: 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: #01ff42;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(212, 175, 55, 0.12);
}

.stat-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
}

.stat-info span {
    display: block;

    color: #7e8b9b;

    font-size: 12px;
    font-weight: 600;
}

.stat-info strong {
    display: block;

    margin-top: 3px;

    color: #e7edf5;

    font-size: 22px;
    font-weight: 900;
}

.stat-line {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 35%;
    height: 2px;

    background: linear-gradient(90deg, #01ff42, transparent);
}

/* =========================================
   FEATURED GAME
========================================= */

.featured-box {
    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-radius: 24px;

    background:
        radial-gradient(circle at 75% 50%, rgba(0, 85, 170, 0.15), transparent 35%),
        radial-gradient(circle at 25% 50%, rgba(212, 175, 55, 0.1), transparent 35%),
        linear-gradient(145deg, #111e2c, #050a10);

    border: 1px solid #01ff42;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.featured-box::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: 80px;

    border-radius: 50%;

    border: 1px solid rgb(1 255 66 / 36%);

    box-shadow:
        0 0 50px #01ff4221,
        inset 0 0 40px rgba(212, 175, 55, 0.05);
}

.featured-content {
    position: relative;
    z-index: 2;

    width: 55%;

    padding: 50px;
}

.featured-label {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    border-radius: 7px;

    color: #01ff42;

    background: rgba(212, 175, 55, 0.1);

    border: 1px solid #01ff42;

    font-size: 11px;
    font-weight: 800;
}

.featured-content h2 {
    margin: 20px 0 5px;

    color: #01ff42;

    font-size: 55px;
    font-weight: 1000;

    letter-spacing: 2px;

    text-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}

.featured-content h2 span {
    display: block;

    color: #fff;

    font-size: 20px;

    letter-spacing: 4px;
}

.featured-content > p {
    max-width: 480px;

    margin: 18px 0;

    color: #8996a6;

    line-height: 1.7;

    font-size: 14px;
}

.featured-info {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin: 25px 0;
}

.featured-info div {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #b8c2cf;

    font-size: 12px;
    font-weight: 700;
}

.featured-info i {
    color: #01ff42;
}

.featured-btn {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    padding: 13px 22px;

    border-radius: 9px;

    text-decoration: none;

    color: #fff;

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

    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);

    transition: 0.3s ease;
}

.featured-btn:hover {
    color: #071019;

    transform: translateY(-3px);

    box-shadow:
        0 9px 0 #73510b,
        0 0 30px rgba(212, 175, 55, 0.4);
}

.featured-image {
    position: absolute;

    right: 5%;
    top: 50%;

    width: 42%;
    height: 90%;

    transform: translateY(-50%);

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

    z-index: 1;
}

.featured-image img {
    position: relative;
    z-index: 2;

    width: 60%;
    border-radius: 50%;

    object-fit: contain;

    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(212, 175, 55, 0.2));

    animation: gameFloat 4s ease-in-out infinite;
}

.image-ring {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    border: 2px solid rgb(1 255 66 / 67%);

    box-shadow:
        0 0 35px #01ff424a,
        inset 0 0 35px rgba(212, 175, 55, 0.08);

    animation: ringRotate 8s linear infinite;
}

@keyframes gameFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes ringRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {
    .arena-card {
        height: 400px;
    }

    .featured-content {
        width: 60%;
        padding: 35px;
    }

    .featured-content h2 {
        font-size: 45px;
    }

    .featured-image {
        right: 0;
        width: 43%;
    }
}

@media (max-width: 767px) {
    .game-stats,
    .featured-game {
        margin-bottom: 50px;
    }

    .section-title {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-title span {
        width: 100%;
        margin-left: 19px;
    }

    .arena-card {
        height: 390px;
    }

    .arena-image {
        height: 320px;
    }

    .stat-card {
        min-height: 105px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .stat-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .stat-info strong {
        font-size: 18px;
    }

    .featured-box {
        min-height: 700px;
        display: block;
    }

    .featured-content {
        width: 100%;
        padding: 30px 22px;
    }

    .featured-content h2 {
        font-size: 42px;
    }

    .featured-image {
        position: absolute;

        top: auto;
        bottom: -25px;
        right: 50%;

        width: 75%;
        height: 340px;

        transform: translateX(50%);
    }

    .featured-box::before {
        right: 50%;
        transform: translateX(50%);
        bottom: 10px;
    }

    .image-ring {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 480px) {
    .arena-card {
        height: 360px;
    }

    .arena-image {
        height: 295px;
    }

    .arena-content {
        left: 14px;
        right: 14px;
        bottom: 13px;
    }

    .stat-card {
        gap: 10px;
        padding: 12px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-info span {
        font-size: 10px;
    }

    .stat-info strong {
        font-size: 16px;
    }

    .featured-box {
        min-height: 650px;
    }

    .featured-content {
        padding: 25px 18px;
    }

    .featured-content h2 {
        font-size: 35px;
    }

    .featured-content h2 span {
        font-size: 15px;
    }

    .featured-info {
        gap: 12px;
    }

    .featured-image {
        width: 90%;
        height: 300px;
    }
}

/* =========================================
   PREMIUM CENTER BANNER
========================================= */

.premium-banner {
    position: relative;

    min-height: 500px;

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

    margin-bottom: 75px;

    overflow: hidden;

    border-radius: 25px;

    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.12), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(0, 90, 180, 0.1), transparent 30%),
        linear-gradient(145deg, #111e2c, #05090e 60%, #080d14);

    border: 1px solid rgba(212, 175, 55, 0.35);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* INNER FRAME */

.premium-banner::before {
    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 18px;

    border: 1px solid rgba(212, 175, 55, 0.12);

    pointer-events: none;
}

.premium-banner::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border: 1px solid rgba(212, 175, 55, 0.08);

    box-shadow:
        0 0 80px rgba(212, 175, 55, 0.05),
        inset 0 0 80px rgba(212, 175, 55, 0.04);

    animation: bannerRotate 18s linear infinite;
}

/* =========================================
   CENTER CONTENT
========================================= */

.banner-content {
    position: relative;

    z-index: 10;

    width: 100%;
    max-width: 720px;

    padding: 55px 25px;

    text-align: center;
}

.banner-tag {
    display: inline-flex;

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

    gap: 8px;

    padding: 8px 15px;

    border-radius: 50px;

    color: #ffe477;

    background: linear-gradient(145deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04));

    border: 1px solid rgba(212, 175, 55, 0.45);

    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}

.banner-tag i {
    font-size: 13px;

    text-shadow: 0 0 10px #01ff42;
}

/* LIVE DOT */

.live-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #ffe477;

    box-shadow: 0 0 8px #01ff42;

    animation: livePulse 1.5s infinite;
}

/* =========================================
   HEADING
========================================= */

.banner-content h1 {
    margin: 24px 0 0;

    color: #ffffff;

    font-size: clamp(38px, 6vw, 65px);

    line-height: 1;

    font-weight: 1000;

    letter-spacing: 3px;

    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

.banner-content h1 span {
    display: block;

    margin-top: 8px;

    color: #01ff42;

    font-size: 1.08em;

    text-shadow:
        0 0 10px rgba(212, 175, 55, 0.35),
        0 0 30px rgba(212, 175, 55, 0.15);
}

/* =========================================
   GOLD DIVIDER
========================================= */

.banner-line {
    display: flex;

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

    gap: 10px;

    margin: 20px auto;

    width: 220px;
}

.banner-line span {
    width: 75px;
    height: 1px;

    background: linear-gradient(90deg, transparent, #01ff42);
}

.banner-line span:last-child {
    background: linear-gradient(90deg, #01ff42, transparent);
}

.banner-line i {
    color: #ffe477;

    font-size: 9px;

    transform: rotate(45deg);

    text-shadow: 0 0 10px #01ff42;
}

/* =========================================
   DESCRIPTION
========================================= */

.banner-content > p {
    max-width: 570px;

    margin: 0 auto;

    color: #8b98a9;

    font-size: 14px;

    line-height: 1.8;
}

/* =========================================
   GAME ICON FEATURES
========================================= */

.banner-features {
    display: flex;

    justify-content: center;

    gap: 35px;

    margin: 28px 0;
}

.banner-feature {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    min-width: 75px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
    transition: 0.3s ease;
}

.banner-feature:hover .feature-icon {
    transform: translateY(-5px) rotate(-3deg);

    box-shadow:
        0 9px 0 #73510b,
        0 0 28px rgba(212, 175, 55, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.banner-feature span {
    color: #a3afbd;

    font-size: 10px;

    font-weight: 700;
}

/* =========================================
   BUTTONS
========================================= */

.banner-buttons {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;
}

.banner-main-btn,
.banner-outline-btn {
    display: inline-flex;

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

    gap: 9px;

    min-width: 145px;

    padding: 13px 20px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 900;

    transition: 0.3s ease;
}

/* MAIN */

.banner-main-btn {
    color: #071019;

    background: linear-gradient(145deg, #ffe477, #01ff42 55%, #9a7015);

    border: 1px solid #ffe477;

    box-shadow:
        0 5px 0 #73510b,
        0 0 18px rgba(212, 175, 55, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.6);
}

.banner-main-btn:hover {
    color: #071019;

    transform: translateY(-4px);

    box-shadow:
        0 9px 0 #73510b,
        0 0 30px rgba(212, 175, 55, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

/* OUTLINE */

.banner-outline-btn {
    color: #01ff42;

    background: rgba(212, 175, 55, 0.04);

    border: 1px solid rgba(212, 175, 55, 0.45);

    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.03);
}

.banner-outline-btn:hover {
    color: #ffe477;

    border-color: #01ff42;

    transform: translateY(-4px);

    box-shadow:
        0 6px 0 #070b10,
        0 0 18px rgba(212, 175, 55, 0.2);
}

/* =========================================
   DECORATIVE ICONS
========================================= */

.banner-decoration i {
    position: absolute;

    z-index: 2;

    color: rgba(212, 175, 55, 0.22);

    font-size: 28px;

    text-shadow: 0 0 15px rgba(212, 175, 55, 0.2);

    pointer-events: none;
}

.dice-one {
    top: 16%;
    left: 8%;

    transform: rotate(-20deg);

    animation: floatIcon 4s ease-in-out infinite;
}

.coin-one {
    bottom: 18%;
    left: 13%;

    font-size: 22px !important;

    animation: floatIcon 5s ease-in-out infinite reverse;
}

.trophy-one {
    top: 18%;
    right: 9%;

    font-size: 25px !important;

    animation: floatIcon 4.5s ease-in-out infinite;
}

.bolt-one {
    bottom: 20%;
    right: 13%;

    color: rgba(212, 175, 55, 0.3) !important;

    animation: floatIcon 3.5s ease-in-out infinite reverse;
}

.star-one {
    top: 50%;
    left: 5%;

    font-size: 17px !important;

    animation: starGlow 2s infinite;
}

.dice-two {
    top: 55%;
    right: 5%;

    font-size: 18px !important;

    animation: starGlow 3s infinite;
}

/* =========================================
   ORBITS
========================================= */

.banner-orbit {
    position: absolute;

    z-index: 1;

    width: 380px;
    height: 150px;

    border: 1px solid rgba(212, 175, 55, 0.08);

    border-radius: 50%;

    transform: rotate(-25deg);

    pointer-events: none;
}

.orbit-one {
    animation: orbitMove 8s linear infinite;
}

.orbit-two {
    width: 450px;
    height: 180px;

    transform: rotate(25deg);

    border-color: rgba(0, 110, 210, 0.08);

    animation: orbitMove 12s linear infinite reverse;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes livePulse {
    0%,
    100% {
        transform: scale(1);

        opacity: 1;
    }

    50% {
        transform: scale(1.7);

        opacity: 0.5;
    }
}

@keyframes floatIcon {
    0%,
    100% {
        transform: translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateY(-15px) rotate(10deg);
    }
}

@keyframes starGlow {
    0%,
    100% {
        opacity: 0.3;

        transform: scale(1);
    }

    50% {
        opacity: 1;

        transform: scale(1.4);

        text-shadow: 0 0 20px #01ff42;
    }
}

@keyframes bannerRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitMove {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

@media (max-width: 767px) {
    .premium-banner {
        min-height: 540px;

        border-radius: 20px;
    }

    .banner-content {
        padding: 45px 20px;
    }

    .banner-content h1 {
        font-size: 40px;

        letter-spacing: 2px;
    }

    .banner-content > p {
        font-size: 12px;

        max-width: 450px;
    }

    .banner-features {
        gap: 20px;
    }

    .banner-decoration i {
        opacity: 0.5;
    }
}

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

@media (max-width: 480px) {
    .premium-banner {
        min-height: 590px;

        margin-bottom: 50px;

        border-radius: 17px;
    }

    .premium-banner::before {
        inset: 7px;
    }

    .banner-content {
        padding: 35px 15px;
    }

    .banner-tag {
        font-size: 8px;

        padding: 7px 10px;
    }

    .banner-content h1 {
        margin-top: 20px;

        font-size: 32px;

        letter-spacing: 1px;
    }

    .banner-content h1 span {
        margin-top: 6px;
    }

    .banner-line {
        margin: 17px auto;
    }

    .banner-content > p {
        font-size: 11px;

        line-height: 1.7;
    }

    .banner-features {
        gap: 12px;

        margin: 23px 0;
    }

    .feature-icon {
        width: 42px;
        height: 42px;

        font-size: 16px;

        border-radius: 11px;
    }

    .banner-feature span {
        font-size: 9px;
    }

    .banner-buttons {
        flex-direction: column;

        align-items: center;

        margin-top: 22px;
    }

    .banner-main-btn,
    .banner-outline-btn {
        width: 190px;

        padding: 12px;
    }

    .banner-decoration i {
        font-size: 18px;

        opacity: 0.35;
    }

    .dice-one {
        left: 4%;
    }

    .trophy-one {
        right: 4%;
    }

    .coin-one {
        left: 5%;
    }

    .bolt-one {
        right: 5%;
    }
}

/* =========================================
   ABOUT SECTION
========================================= */

.about-section {
    margin-bottom: 75px;
}

.about-box {
    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    min-height: 470px;

    border-radius: 22px;

    background: linear-gradient(145deg, #111e2b, #070d14);

    border: 1px solid rgba(212, 175, 55, 0.25);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.about-image {
    position: relative;

    width: 45%;
    height: 470px;

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

.about-frame {
    position: relative;

    width: 310px;
    height: 410px;

    padding: 8px;

    border-radius: 20px;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);
}

.about-frame img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 15px;

    background: #060b11;
}

.about-badge {
    position: absolute;

    right: 10%;
    bottom: 35px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;

    border-radius: 10px;

    background: rgba(7, 13, 20, 0.95);

    border: 1px solid #01ff42;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(212, 175, 55, 0.15);
}

.about-badge > i {
    color: #01ff42;
    font-size: 20px;
}

.about-badge strong,
.about-badge span {
    display: block;
}

.about-badge strong {
    color: #01ff42;
    font-size: 17px;
}

.about-badge span {
    color: #8794a4;
    font-size: 9px;
    letter-spacing: 2px;
}

.about-content {
    width: 55%;

    padding: 50px;
}

.about-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #01ff42;

    font-size: 11px;
    font-weight: 800;
}

.about-content h3 {
    margin: 18px 0;

    color: #fff;

    font-size: 35px;
    font-weight: 900;
}

.about-content h3 span {
    display: block;
    color: #01ff42;
}

.about-content > p {
    color: #8996a6;

    font-size: 14px;

    line-height: 1.8;
}

.about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin: 25px 0;
}

.about-points div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #aeb8c5;

    font-size: 12px;
    font-weight: 600;
}

.about-points i {
    color: #01ff42;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;

    text-decoration: none;

    color: #fff;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 900;
    background: linear-gradient(145deg, #01ff42, #11c33f, #005e18);
    box-shadow:
        0 6px 0 #01ff4299,
        0 0 20px rgba(212, 175, 55, 0.25);

    transition: 0.3s ease;
}

.about-btn:hover {
    color: #071019;

    transform: translateY(-3px);

    box-shadow: 0 8px 0 #73510b;
}

/* =========================================
   GAME PULSE
========================================= */

.game-pulse {
    margin-bottom: 75px;
}

.pulse-wrapper {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 25px;

    border-radius: 22px;

    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.08), transparent 35%),
        linear-gradient(145deg, #101c29, #050a10);

    border: 1px solid rgba(212, 175, 55, 0.2);

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.pulse-list {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.pulse-card {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 72px;

    padding: 10px 13px;

    border-radius: 12px;

    background: rgba(15, 27, 40, 0.85);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: 0.3s ease;
}

.pulse-card:hover {
    border-color: rgba(212, 175, 55, 0.45);

    transform: translateX(4px);

    box-shadow: 0 0 15px rgba(212, 175, 55, 0.08);
}

.pulse-game-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 10px;

    color: #071019;

    background: linear-gradient(145deg, #ffe477, #01ff42, #9a7015);

    box-shadow: 0 3px 0 #73510b;
}

.pulse-info {
    flex: 1;
}

.pulse-info strong {
    display: block;

    color: #e4eaf2;

    font-size: 13px;
}

.pulse-info span {
    display: block;

    margin-top: 3px;

    color: #748194;

    font-size: 10px;
}

.pulse-status {
    color: #01ff42;

    font-size: 9px;
    font-weight: 900;
}

.pulse-status i {
    font-size: 7px;

    margin-right: 3px;

    text-shadow: 0 0 8px #01ff42;
}

.pulse-value {
    color: #01ff42;

    font-size: 10px;
    font-weight: 900;
}

/* CENTER PULSE */

.pulse-core {
    position: relative;

    width: 190px;
    height: 190px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), rgba(5, 10, 16, 0.95) 65%);

    border: 1px solid rgba(212, 175, 55, 0.5);

    box-shadow:
        0 0 35px rgba(212, 175, 55, 0.12),
        inset 0 0 30px rgba(212, 175, 55, 0.08);
}

.core-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 8px;

    border-radius: 50%;

    color: #071019;

    font-size: 22px;

    background: linear-gradient(145deg, #ffe477, #01ff42);

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
}

.pulse-core strong {
    color: #ffe477;

    font-size: 18px;

    letter-spacing: 3px;
}

.pulse-core > span {
    color: #697789;

    font-size: 8px;

    letter-spacing: 3px;
}

.core-ring {
    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px dashed rgba(212, 175, 55, 0.25);

    animation: rotateRing 8s linear infinite;
}

.ring-two {
    inset: -25px;

    border-color: rgba(0, 100, 200, 0.2);

    animation-direction: reverse;

    animation-duration: 12s;
}

@media (max-width: 991px) {
    .about-image {
        width: 42%;
    }

    .about-content {
        width: 58%;
        padding: 30px;
    }

    .about-frame {
        width: 260px;
        height: 370px;
    }

    .pulse-core {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 767px) {
    /* ABOUT */

    .about-box {
        display: block;
    }

    .about-image {
        width: 100%;
        height: 380px;
    }

    .about-frame {
        width: 230px;
        height: 330px;
    }

    .about-content {
        width: 100%;
        padding: 30px 22px;
    }

    .about-content h3 {
        font-size: 29px;
    }

    /* PULSE */

    .pulse-wrapper {
        flex-direction: column;
        padding: 18px;
    }

    .pulse-list {
        width: 100%;
    }

    .pulse-core {
        order: -1;

        width: 160px;
        height: 160px;

        margin: 15px 0 20px;
    }
}

@media (max-width: 480px) {
    .about-points {
        grid-template-columns: 1fr;
    }

    .about-image {
        height: 350px;
    }

    .about-frame {
        width: 205px;
        height: 300px;
    }

    .about-badge {
        right: 8%;
    }

    .pulse-card {
        min-height: 65px;
    }

    .pulse-game-icon {
        width: 38px;
        height: 38px;
    }
}

.five-sec-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}
.five-sec-modal.show {
    display: flex !important;
}
.five-sec-timer-box {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #080808;
    border: 2px solid #01ff42;
    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.35),
        inset 0 0 25px rgba(212, 175, 55, 0.12);
    animation: timerPop 0.3s ease;
}
#modalTimer {
    color: rgb(16 198 61 / 84%);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    /* text-shadow: 0 0 15px rgba(255, 223, 115, 0.5); */
}
@keyframes timerPop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================
   BROKER SECTION
========================================= */

.broker-section {
    padding: 25px 15px;
}

/* =========================================
   HEADING
========================================= */

.broker-heading {
    text-align: center;
    margin-bottom: 30px;
}

.broker-heading h2 {
    display: inline-block;

    margin: 0 15px;

    color: #05d737;

    font-size: 25px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 2px;

    text-shadow: 0 0 15px rgba(212, 175, 55, 0.35);
}

.broker-heading p {
    margin: 8px 0 0;

    color: #888;
    font-size: 13px;
}

.broker-line {
    display: inline-block;

    width: 45px;
    height: 1px;

    vertical-align: middle;

    background: linear-gradient(90deg, transparent, #01ff42);
}

/* =========================================
   CARD
========================================= */

.broker-card {
    position: relative;
    margin-bottom: 20px;
    min-height: 285px;

    padding: 22px;

    overflow: hidden;

    border-radius: 24px;

    background:
        radial-gradient(circle at 85% 10%, rgb(32 107 30 / 42%), transparent 35%),
        linear-gradient(145deg, #151515, #080808 55%, #050505);

    border: 1px solid rgb(16 198 61 / 84%);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* =========================================
   HOVER 3D
========================================= */

.broker-card:hover {
    transform: translateY(-10px) perspective(700px) rotateX(2deg);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.75),
        0 0 30px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 223, 115, 0.12);
}

/* =========================================
   MOVING GLOW
========================================= */

.broker-glow {
    position: absolute;

    width: 120px;
    height: 120px;

    top: -60px;
    right: -60px;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.15);

    filter: blur(25px);

    transition: 0.5s;
}

.broker-card:hover .broker-glow {
    transform: scale(1.8);
    background: rgba(212, 175, 55, 0.22);
}

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

.broker-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================
   ICON
========================================= */

.broker-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 16px;

    color: #ffdf73;

    font-size: 23px;

    background: linear-gradient(145deg, #2b220c, #0a0a0a);

    border: 1px solid rgba(212, 175, 55, 0.55);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 12px rgba(212, 175, 55, 0.08);
}

/* =========================================
   TAG
========================================= */

.broker-tag {
    padding: 6px 11px;

    border-radius: 20px;

    color: #01ff42;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;

    background: rgba(212, 175, 55, 0.07);

    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* =========================================
   AMOUNT
========================================= */

.broker-amount {
    margin-top: 25px;
}

.broker-amount small {
    color: #777;

    font-size: 10px;

    letter-spacing: 1.5px;
}

.broker-amount h3 {
    margin: 5px 0 0;

    color: #fff;

    font-size: 31px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

/* =========================================
   DIVIDER
========================================= */

.broker-divider {
    height: 1px;

    margin: 18px 0;

    background: linear-gradient(90deg, rgba(212, 175, 55, 0.35), transparent);
}

/* =========================================
   INCOME
========================================= */

.broker-income {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.broker-income span,
.income-value small {
    display: block;

    color: #777;

    font-size: 11px;
}

.broker-income strong {
    display: block;

    margin-top: 4px;

    color: #ffdf73;

    font-size: 18px;
}

.income-value {
    text-align: right;
}

.income-value b {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 18px;
}

/* =========================================
   BOTTOM
========================================= */

.broker-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 18px;

    padding-top: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    color: #8c8c8c;

    font-size: 11px;
}

.broker-bottom i {
    margin-right: 5px;

    color: #01ff42;
}

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

@media (max-width: 575px) {
    .broker-section {
        padding: 20px 10px;
    }

    .broker-card {
        min-height: 270px;
        padding: 18px;
        border-radius: 20px;
    }

    .broker-amount h3 {
        font-size: 27px;
    }

    .broker-icon {
        width: 47px;
        height: 47px;
        font-size: 20px;
    }
}

/* =========================================
   TRADE SECTION
========================================= */

.trade-section {
    padding: 25px 15px;
}

/* =========================================
   HEADING
========================================= */

.trade-heading {
    text-align: center;
    margin-bottom: 30px;
}

.trade-heading h2 {
    display: inline-block;

    margin: 0 15px;

    color: #05d737;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

    text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.trade-heading p {
    margin: 8px 0 0;

    color: #888;
    font-size: 13px;
}

.trade-line {
    display: inline-block;

    width: 45px;
    height: 1px;

    vertical-align: middle;

    background: linear-gradient(90deg, transparent, #01ff42);
}

/* =========================================
   CARD
========================================= */

.trade-card {
    position: relative;
    min-height: 270px;
    margin-bottom: 20px;
    padding: 22px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 10%, rgb(32 107 30 / 42%), transparent 35%),
        linear-gradient(145deg, #151515, #080808 55%, #050505);
    border: 1px solid rgb(16 198 61 / 84%);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    transition: all 0.4s ease;
}

.trade-card:hover {
    transform: translateY(-9px);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.75),
        0 0 30px rgba(212, 175, 55, 0.16),
        inset 0 1px 0 rgba(255, 223, 115, 0.12);
}

/* =========================================
   GLOW
========================================= */

.trade-glow {
    position: absolute;

    width: 130px;
    height: 130px;

    top: -70px;
    right: -60px;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.14);

    filter: blur(28px);

    transition: 0.5s;
}

.trade-card:hover .trade-glow {
    transform: scale(1.8);
}

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

.trade-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================
   ICON
========================================= */

.trade-icon {
    width: 54px;
    height: 54px;

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

    border-radius: 17px;

    color: #ffdf73;

    font-size: 23px;

    background: linear-gradient(145deg, #2b220c, #080808);

    border: 1px solid rgba(212, 175, 55, 0.55);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.5),
        inset 0 0 15px rgba(212, 175, 55, 0.1);

    transition: 0.4s;
}

.trade-card:hover .trade-icon {
    transform: rotateY(180deg);

    box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

/* =========================================
   BADGE
========================================= */

.trade-badge {
    min-width: 45px;

    padding: 7px 12px;

    text-align: center;

    border-radius: 20px;

    color: #ffdf73;

    font-size: 12px;
    font-weight: 800;

    background: rgba(212, 175, 55, 0.08);

    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* =========================================
   CONTENT
========================================= */

.trade-content {
    margin-top: 27px;
}

.trade-content small {
    color: #777;

    font-size: 10px;

    letter-spacing: 1.5px;
}

.trade-content h3 {
    margin: 7px 0 0;

    color: #fff;

    font-size: 29px;
    font-weight: 800;
}

/* =========================================
   DIVIDER
========================================= */

.trade-divider {
    height: 1px;

    margin: 20px 0;

    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), transparent);
}

/* =========================================
   INCOME
========================================= */

.trade-income {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trade-income span {
    color: #777;

    font-size: 12px;
}

.trade-income strong {
    color: #ffdf73;

    font-size: 22px;

    text-shadow: 0 0 12px rgba(255, 223, 115, 0.25);
}

/* =========================================
   BOTTOM
========================================= */

.trade-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 18px;

    padding-top: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    color: #888;

    font-size: 10px;
}

.trade-bottom i {
    margin-right: 6px;

    color: #01ff42;
}

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

@media (max-width: 575px) {
    .trade-section {
        padding: 20px 10px;
    }

    .trade-heading h2 {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .trade-card {
        min-height: 255px;
        padding: 18px;
        border-radius: 20px;
    }

    .trade-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .trade-content h3 {
        font-size: 25px;
    }

    .trade-bottom {
        left: 18px;
        right: 18px;
    }
}

.big_c {
    background: #b28213;
}
.small_c {
    background: #0077ff;
}

.broker_c2 {
    height: auto !important;
    min-height: auto !important;
    text-align: center;
}
.broker_c2 h5 {
    color: #05d737;
    font-size: 21px;
    font-weight: 600;
}
.broker_c2 p {
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto;
}

/* .bg_color_sec{
    position: relative;
}
.coloumn_bg{
    position: relative;
}
.table_class{
    position: relative;
} */

/* ==========================================
           MODAL BACKDROP
        ========================================== */

.reward-modal .modal-dialog {
    max-width: 470px;
    margin: 70px auto;
}

.reward-modal .modal-content {
    background: transparent;
    border: 0;
    overflow: visible;
}

.reward-modal .modal-body {
    padding: 0;
    overflow: visible;
}

.reward-backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

/* ==========================================
           MAIN GOLDEN CARD
        ========================================== */

.reward-card {
    position: relative;
    width: 100%;
    min-height: 520px;

    padding: 105px 28px 28px;

    border-radius: 45px 45px 35px 35px;

    background:
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.18), transparent 25%),
        linear-gradient(145deg, #d7d64a 0%, #c5c51b 28%, #b4b000 65%, #d2c82b 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -12px 25px rgba(100, 80, 0, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.55);

    overflow: visible;
}

/* ==========================================
           TOP RIBBON
        ========================================== */

.reward-ribbon {
    position: absolute;
    top: 17px;
    left: 0px;
    width: 100%;
    right: -18px;
    height: 82px;
    z-index: 1;

    background: linear-gradient(180deg, #a88c00, #d8c21b 35%, #a88a00 100%);

    clip-path: polygon(
        0 25%,
        18% 42%,
        25% 15%,
        50% 0,
        75% 15%,
        82% 42%,
        100% 25%,
        91% 72%,
        75% 65%,
        50% 82%,
        25% 65%,
        9% 72%
    );

    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.3));
}

.reward-ribbon::before,
.reward-ribbon::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 75px;
    height: 65px;

    background: linear-gradient(135deg, #b79b00, #e0ca24, #9a7e00);

    z-index: -1;
}

.reward-ribbon::before {
    left: -18px;
    transform: skewY(25deg);
}

.reward-ribbon::after {
    right: -18px;
    transform: skewY(-25deg);
}

/* ==========================================
           TOP MEDAL
        ========================================== */

.reward-medal {
    position: absolute;
    z-index: 5;

    top: -70px;
    left: 50%;

    transform: translateX(-50%);

    width: 145px;
    height: 145px;

    border-radius: 50%;

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

    background: radial-gradient(circle, #f2db28 0%, #d2b900 55%, #a98e00 100%);

    border: 10px solid #e1c700;

    box-shadow:
        0 7px 0 #9b8100,
        0 12px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.reward-medal::before {
    content: "";
    position: absolute;
    inset: 9px;

    border-radius: 50%;

    border: 3px solid rgba(255, 255, 255, 0.2);

    box-shadow: inset 0 0 0 4px rgba(110, 90, 0, 0.15);
}

.reward-medal-icon {
    position: relative;
    z-index: 2;

    width: 82px;
    height: 82px;

    border-radius: 50%;

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

    background: linear-gradient(145deg, #d8c323, #b9a000);

    color: #f9f4c5;

    font-size: 48px;

    text-shadow: 0 3px 4px rgba(80, 60, 0, 0.45);
}

/* ==========================================
           MEDAL WINGS
        ========================================== */

.reward-wing {
    position: absolute;
    z-index: 3;

    top: -30px;

    color: #e2cf24;

    font-size: 72px;

    filter: drop-shadow(0 4px 2px rgba(100, 80, 0, 0.35));
}

.reward-wing.left {
    left: 72px;
    transform: rotate(-25deg);
}

.reward-wing.right {
    right: 72px;
    transform: rotate(25deg) scaleX(-1);
}

/* ==========================================
           HEADING
        ========================================== */

.reward-title {
    position: relative;
    z-index: 6;

    text-align: center;

    color: #fff;

    font-size: 36px;
    font-weight: 700;

    margin-bottom: 48px;

    text-shadow: 0 3px 3px rgba(100, 80, 0, 0.35);
}

/* ==========================================
           RESULT ROW
        ========================================== */

.reward-result {
    position: relative;
    z-index: 5;

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

    gap: 10px;

    margin-bottom: 28px;
}

.result-label {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}

.result-pill {
    min-width: 82px;

    padding: 8px 17px;

    text-align: center;

    color: #fff;

    background: linear-gradient(180deg, #45bc82, #32aa70);

    border-radius: 8px;

    font-size: 16px;
    font-weight: 500;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 3px 5px rgba(60, 90, 0, 0.18);
}

.result-number {
    width: 34px;
    height: 34px;

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

    color: #fff;

    background: #3bb47c;

    border-radius: 50%;

    font-size: 15px;
}

/* ==========================================
           BONUS SECTION
        ========================================== */

.bonus-area {
    position: relative;

    margin-top: 15px;
    padding-top: 22px;
}

.bonus-line {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 45px;

    border: 7px solid #dfd03b;

    border-radius: 30px;

    background: linear-gradient(180deg, #a09100, #756900);

    box-shadow:
        inset 0 3px 5px rgba(0, 0, 0, 0.4),
        0 2px 3px rgba(255, 255, 255, 0.15);
}

.bonus-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 5px);
    color: #991f14;
    font-size: 17px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(100, 0, 0, 0.25);
}

/* ==========================================
           BONUS PAPER
        ========================================== */

.bonus-paper {
    position: relative;

    margin: 17px auto 0;

    width: 88%;

    min-height: 135px;

    padding: 15px 15px 25px;

    text-align: center;

    background: linear-gradient(180deg, #e4dd6c, #d8d35a);

    clip-path: polygon(6% 0, 94% 0, 100% 75%, 91% 100%, 9% 100%, 0 75%);

    filter: drop-shadow(0 7px 4px rgba(80, 60, 0, 0.28));
}

.bonus-amount {
    color: #f23b2d;

    font-size: 30px;
    font-weight: 700;

    margin-top: 0;
    margin-bottom: 10px;
}

.period-text {
    color: #737366;

    font-size: 15px;
    font-weight: 500;

    white-space: nowrap;
}

/* ==========================================
           AUTO CLOSE
        ========================================== */

.auto-close {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: 24px;

    color: #fff;

    font-size: 18px;
}

.auto-close-circle {
    width: 35px;
    height: 35px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.8);

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

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

.auto-close-circle i {
    font-size: 14px;
    color: #fff;
}

/* ==========================================
           COUNTDOWN
        ========================================== */

#rewardCountdown {
    font-weight: 700;
    margin-left: 3px;
}

/* ==========================================
           DESKTOP EXTRA DEPTH
        ========================================== */

.reward-card::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    bottom: -9px;

    height: 20px;

    border-radius: 50%;

    background: rgba(105, 85, 0, 0.45);

    filter: blur(5px);

    z-index: -1;
}

/* ==========================================
           MODAL ANIMATION
        ========================================== */

.reward-modal .modal-dialog {
    transform: scale(0.7) translateY(30px);
    transition: 0.45s ease;
}

.reward-modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

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

@media (max-width: 576px) {
    .reward-modal .modal-dialog {
        max-width: calc(100% - 28px);
        margin: 55px auto 20px;
    }

    .reward-card {
        min-height: 480px;

        padding: 92px 18px 25px;
    }

    .reward-medal {
        width: 120px;
        height: 120px;

        border-width: 8px;

        top: -35px;
    }

    .reward-medal-icon {
        width: 68px;
        height: 68px;

        font-size: 38px;
    }

    .reward-wing {
        font-size: 60px;
        top: 4px;
    }

    .reward-wing.left {
        left: 40px;
    }

    .reward-wing.right {
        right: 40px;
    }

    .reward-title {
        font-size: 30px;
        margin-bottom: 38px;
    }

    .result-label {
        font-size: 15px;
    }

    .result-pill {
        min-width: 70px;
        padding: 7px 12px;
        font-size: 14px;
    }

    .result-number {
        width: 30px;
        height: 30px;
    }

    .bonus-paper {
        width: 92%;
    }

    .period-text {
        font-size: 13px;
    }

    .auto-close {
        font-size: 16px;
    }
}

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

@media (max-width: 380px) {
    .reward-modal .modal-dialog {
        max-width: calc(100% - 18px);
    }

    .reward-card {
        padding-left: 12px;
        padding-right: 12px;
        border-radius: 35px;
    }

    .reward-medal {
        width: 105px;
        height: 105px;

        top: -30px;
    }

    .reward-medal-icon {
        width: 60px;
        height: 60px;
        font-size: 32px;
    }

    .reward-wing {
        font-size: 48px;
    }

    .reward-wing.left {
        left: 30px;
    }

    .reward-wing.right {
        right: 30px;
    }

    .reward-title {
        font-size: 26px;
        margin-bottom: 32px;
    }

    .reward-result {
        gap: 6px;
    }

    .result-label {
        font-size: 13px;
    }

    .result-pill {
        min-width: 58px;
        padding: 6px 8px;
        font-size: 13px;
    }

    .bonus-amount {
        font-size: 26px;
    }

    .period-text {
        font-size: 11px;
    }

    .auto-close {
        font-size: 14px;
        gap: 9px;
    }

    .auto-close-circle {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================
   MODAL
========================================== */

.lose-modal .modal-dialog {
    max-width: 470px;
    margin: 60px auto;
}

.lose-modal .modal-content {
    background: transparent;
    border: 0;
    overflow: visible;
}

.lose-modal .modal-body {
    padding: 0;
}

/* ==========================================
   MAIN BLUE CARD
========================================== */

.lose-card {
    position: relative;

    width: 100%;
    min-height: 520px;

    padding: 105px 28px 28px;

    border-radius: 45px 45px 35px 35px;

    background:
        radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.25), transparent 28%),
        linear-gradient(145deg, #9fc3e9 0%, #83acd9 35%, #6797c9 70%, #8fb8df 100%);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        inset 0 -15px 30px rgba(30, 75, 120, 0.22),
        0 20px 55px rgba(0, 0, 0, 0.5);

    overflow: visible;
}

/* ==========================================
   RIBBON
========================================== */

.lose-ribbon {
    position: absolute;

    top: 17px;
    left: 0;

    width: 100%;
    height: 82px;

    z-index: 1;

    background: linear-gradient(180deg, #477ba9, #79a8d4 35%, #386d9e 100%);

    clip-path: polygon(
        0 25%,
        18% 42%,
        25% 15%,
        50% 0,
        75% 15%,
        82% 42%,
        100% 25%,
        91% 72%,
        75% 65%,
        50% 82%,
        25% 65%,
        9% 72%
    );

    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.3));
}

/* ==========================================
   RIBBON SIDES
========================================== */

.lose-ribbon::before,
.lose-ribbon::after {
    content: "";

    position: absolute;

    top: 18px;

    width: 75px;
    height: 65px;

    background: linear-gradient(135deg, #386d9e, #8bb6df, #315e8d);

    z-index: -1;
}

.lose-ribbon::before {
    left: -18px;
    transform: skewY(25deg);
}

.lose-ribbon::after {
    right: -18px;
    transform: skewY(-25deg);
}

/* ==========================================
   WINGS
========================================== */

.lose-wing {
    position: absolute;

    z-index: 3;

    top: -30px;

    color: #a8c9e8;

    font-size: 72px;

    filter: drop-shadow(0 4px 2px rgba(30, 70, 110, 0.35));
}

.lose-wing.left {
    left: 72px;
    transform: rotate(-25deg);
}

.lose-wing.right {
    right: 72px;
    transform: rotate(25deg) scaleX(-1);
}

/* ==========================================
   MEDAL
========================================== */

.lose-medal {
    position: absolute;

    z-index: 5;

    top: -70px;
    left: 50%;

    transform: translateX(-50%);

    width: 145px;
    height: 145px;

    border-radius: 50%;

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

    background: radial-gradient(circle, #a9d0f2 0%, #6f9fc9 55%, #4176a6 100%);

    border: 10px solid #83b1dc;

    box-shadow:
        0 7px 0 #426f99,
        0 12px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.lose-medal::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

    border: 3px solid rgba(255, 255, 255, 0.22);

    box-shadow: inset 0 0 0 4px rgba(30, 70, 110, 0.15);
}

/* ==========================================
   MEDAL ICON
========================================== */

.lose-medal-icon {
    position: relative;

    z-index: 2;

    width: 82px;
    height: 82px;

    border-radius: 50%;

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

    background: linear-gradient(145deg, #6fa1d0, #4078aa);

    color: #eaf5ff;

    font-size: 48px;

    text-shadow: 0 3px 4px rgba(30, 60, 90, 0.45);
}

/* ==========================================
   TITLE
========================================== */

.lose-title {
    position: relative;

    z-index: 6;

    text-align: center;

    color: #fff;

    font-size: 36px;
    font-weight: 700;

    margin-bottom: 48px;

    text-shadow: 0 3px 3px rgba(30, 70, 110, 0.35);
}

/* ==========================================
   RESULT
========================================== */

.lose-result {
    position: relative;

    z-index: 6;

    display: flex;

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

    gap: 9px;

    margin-bottom: 28px;
}

.lose-result-label {
    color: #fff;

    font-size: 17px;
    font-weight: 500;
}

.lose-pill {
    min-width: 78px;

    padding: 8px 12px;

    text-align: center;

    color: #fff;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 500;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 3px 6px rgba(30, 60, 100, 0.2);
}

/* Purple Red gradient like screenshot */

.purple-red {
    background: linear-gradient(135deg, #ff553e 0%, #ef3b68 48%, #c936e9 100%);
}

.lose-number {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    color: #fff;

    border-radius: 50%;

    background: linear-gradient(135deg, #ff4b42, #e72cbd);

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

/* ==========================================
   LOSE PAPER AREA
========================================== */

.lose-paper-area {
    position: relative;

    margin-top: 15px;

    padding-top: 22px;
}

/* Dark horizontal slot */

.lose-paper-line {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 45px;

    border: 7px solid #b9d4ee;

    border-radius: 30px;

    background: linear-gradient(180deg, #3e6f99, #2e597e);

    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.4),
        0 2px 3px rgba(255, 255, 255, 0.18);
}

/* ==========================================
   PAPER
========================================== */

.lose-paper {
    position: relative;

    margin: 17px auto 0;

    width: 88%;

    min-height: 135px;

    padding: 15px 15px 25px;

    text-align: center;

    background: linear-gradient(180deg, #dceafa, #c4d9ee);

    clip-path: polygon(6% 0, 94% 0, 100% 75%, 91% 100%, 9% 100%, 0 75%);

    filter: drop-shadow(0 7px 4px rgba(30, 60, 90, 0.28));
}

/* ==========================================
   LOSE TEXT
========================================== */

.lose-text {
    color: #4f79a5;

    font-size: 36px;
    font-weight: 600;

    margin-bottom: 12px;

    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ==========================================
   PERIOD
========================================== */

.lose-period {
    color: #737f8d;

    font-size: 15px;
    font-weight: 500;

    white-space: nowrap;
}

/* ==========================================
   AUTO CLOSE
========================================== */

.lose-auto-close {
    display: flex;

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

    gap: 15px;

    margin-top: 24px;

    color: #fff;

    font-size: 18px;

    text-shadow: 0 2px 3px rgba(30, 70, 110, 0.3);
}

.lose-close-circle {
    width: 35px;
    height: 35px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.8);

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

    display: flex;

    align-items: center;
    justify-content: center;
}

.lose-close-circle i {
    font-size: 14px;
}

/* ==========================================
   ANIMATION
========================================== */

.lose-modal .modal-dialog {
    transform: scale(0.7) translateY(30px);

    transition: 0.45s ease;
}

.lose-modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

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

@media (max-width: 576px) {
    .lose-modal .modal-dialog {
        max-width: calc(100% - 28px);
        margin: 55px auto 20px;
    }

    .lose-card {
        min-height: 480px;

        padding: 92px 18px 25px;
    }

    .lose-medal {
        width: 120px;
        height: 120px;

        border-width: 8px;

        top: -35px;
    }

    .lose-medal-icon {
        width: 68px;
        height: 68px;

        font-size: 38px;
    }

    .lose-wing {
        font-size: 60px;
    }

    .lose-wing.left {
        left: 40px;
    }

    .lose-wing.right {
        right: 40px;
    }

    .lose-title {
        font-size: 30px;

        margin-bottom: 38px;
    }

    .lose-result {
        gap: 6px;
    }

    .lose-result-label {
        font-size: 14px;
    }

    .lose-pill {
        min-width: 64px;

        padding: 7px 8px;

        font-size: 13px;
    }

    .lose-number {
        width: 30px;
        height: 30px;
    }

    .lose-paper {
        width: 92%;
    }

    .lose-period {
        font-size: 12px;
    }

    .lose-auto-close {
        font-size: 16px;
    }
}

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

@media (max-width: 380px) {
    .lose-modal .modal-dialog {
        max-width: calc(100% - 18px);
    }

    .lose-card {
        padding-left: 12px;
        padding-right: 12px;

        border-radius: 35px;
    }

    .lose-medal {
        width: 105px;
        height: 105px;

        top: -30px;
    }

    .lose-medal-icon {
        width: 60px;
        height: 60px;

        font-size: 32px;
    }

    .lose-wing {
        font-size: 48px;
    }

    .lose-wing.left {
        left: 30px;
    }

    .lose-wing.right {
        right: 30px;
    }

    .lose-title {
        font-size: 26px;

        margin-bottom: 32px;
    }

    .lose-result-label {
        font-size: 12px;
    }

    .lose-pill {
        min-width: 55px;

        padding: 6px 6px;

        font-size: 12px;
    }

    .lose-text {
        font-size: 30px;
    }

    .lose-period {
        font-size: 10px;
    }

    .lose-auto-close {
        font-size: 14px;

        gap: 9px;
    }

    .lose-close-circle {
        width: 30px;
        height: 30px;
    }
}