:root {
    --bg: #08090c;
    --panel: #15161d;
    --panel2: #101116;
    --line: #2d2e36;

    --gold: #f1cf7b;
    --gold2: #a9752d;
    --gold3: #6d4b1e;

    --text: #f5f1e8;
    --muted: #99979f;

    --red: #c51f3d;
    --red-dark: #741326;

    --green: #168a5a;
    --green-dark: #0d5139;
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -15%,
            #302719 0%,
            #12100d 25%,
            #08090c 60%
        );

    color: var(--text);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 15px;
}


button,
input,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


.hidden {
    display: none !important;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    min-height: 76px;

    border-bottom:
        1px solid var(--line);

    background:
        linear-gradient(
            180deg,
            rgba(14, 14, 18, 0.97),
            rgba(9, 9, 12, 0.94)
        );

    backdrop-filter: blur(18px);

    display: flex;
    align-items: center;

    gap: 35px;

    padding:
        0 clamp(18px, 4vw, 60px);

    position: sticky;
    top: 0;

    z-index: 20;
}


.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: inherit;
    text-decoration: none;

    min-width: 210px;
}


.brand-mark {
    width: 40px;
    height: 40px;

    border:
        1px solid var(--gold2);

    border-radius: 10px;

    display: grid;
    place-items: center;

    color: var(--gold);

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    box-shadow:
        inset 0 0 15px rgba(233, 199, 119, 0.08),
        0 0 20px rgba(233, 199, 119, 0.05);
}


.brand b {
    display: block;

    font-family:
        Georgia,
        serif;

    font-size: 15px;

    letter-spacing: 2px;
}


.brand small {
    display: block;

    color: #85838b;

    font-size: 9px;

    letter-spacing: 2px;

    margin-top: 3px;
}


.navbar nav {
    display: flex;

    gap: 24px;

    flex: 1;
}


.nav-link {
    border: 0;

    background: none;

    color: #8b8991;

    font-size: 13px;

    letter-spacing: 1.3px;

    padding:
        28px 2px;

    border-bottom:
        2px solid transparent;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.nav-link:hover {
    color: #ddd7c9;
}


.nav-link.active {
    color: var(--gold);

    border-color: var(--gold);
}


.nav-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


.balance-mini {
    padding-right: 13px;

    border-right:
        1px solid var(--line);

    line-height: 1;
}


.balance-mini small,
.balance-mini span {
    display: block;

    color: #77757d;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.balance-mini strong {
    display: block;

    color: var(--gold);

    font-size: 20px;

    margin: 6px 0;
}


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

.gold-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.profile-btn,
.reset-btn {
    border-radius: 9px;

    padding: 13px 17px;

    color: var(--text);

    font-weight: 700;

    font-size: 13px;

    letter-spacing: 0.3px;

    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        border-color 0.15s ease;
}


.gold-btn {
    background:
        linear-gradient(
            135deg,
            #f3d383,
            #bd8937
        );

    color: #17130b;

    border:
        1px solid #d0a354;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}


.gold-btn:hover {
    filter: brightness(1.08);

    transform:
        translateY(-1px);
}


.ghost-btn {
    background: #15161b;

    border:
        1px solid #393941;
}


.ghost-btn:hover {
    border-color: #625d51;
}


.danger-btn {
    background: #421820;

    border:
        1px solid #702733;

    color: #ffb4bd;
}


.icon-btn {
    background: #25262d;

    border:
        1px solid #383840;
}


.small {
    padding:
        11px 14px;
}


.profile-btn {
    background: none;

    border:
        1px solid var(--line);

    display: flex;

    align-items: center;

    gap: 8px;
}


.avatar {
    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #2a2930;

    display: grid;
    place-items: center;

    color: var(--gold);

    font-size: 12px;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    max-width: 1250px;

    margin: auto;

    padding:
        55px 24px;
}


.hero-row {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: end;

    margin-bottom: 32px;
}


.eyebrow {
    color: #817e86;

    font-size: 10px;

    letter-spacing: 2px;

    margin:
        0 0 11px;
}


.hero-row h1,
.auth-card h1 {
    font:
        700 clamp(42px, 5vw, 66px) / 0.98
        "Playfair Display",
        Georgia,
        serif;

    margin: 0;
}


.hero-row h1 span,
.auth-card h1 span {
    color: var(--gold);
}


.muted {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


.balance-card {
    min-width: 155px;

    background:
        linear-gradient(
            145deg,
            #1b1a20,
            #111116
        );

    border:
        1px solid var(--line);

    border-radius: 14px;

    padding: 17px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2);
}


.balance-card small,
.balance-card span {
    display: block;

    color: #77757d;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.balance-card strong {
    display: block;

    color: var(--gold);

    font-size: 29px;

    margin: 8px 0;
}


/* =========================================================
   GAME GRID
   ========================================================= */

.game-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(310px, 0.8fr);

    gap: 16px;
}


.panel {
    background:
        linear-gradient(
            145deg,
            #181920,
            #111217
        );

    border:
        1px solid var(--line);

    border-radius: 16px;

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   WHEEL PANEL
   ========================================================= */

.wheel-panel {
    padding: 20px;
}


.panel-head {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 12px;
}


.panel-head small {
    color: #77757e;

    font-size: 9px;

    letter-spacing: 1.7px;
}


.panel-head h2 {
    font-size: 15px;

    margin:
        7px 0 0;
}


.live {
    font-size: 9px;

    color: #69d69f;

    letter-spacing: 1px;
}


.live i {
    display: inline-block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #69d69f;

    margin-right: 6px;

    box-shadow:
        0 0 8px rgba(105, 214, 159, 0.7);
}


/* =========================================================
   WHEEL STAGE
   ========================================================= */

.wheel-stage {
    position: relative;

    width: 100%;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        55px 15px 30px;

    overflow: visible;
}


/* =========================================================
   POINTER
   ========================================================= */

.pointer {
    position: absolute;

    left: 50%;

    top: 17px;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        17px solid transparent;

    border-right:
        17px solid transparent;

    border-top:
        34px solid var(--gold);

    border-bottom: 0;

    z-index: 30;

    filter:
        drop-shadow(
            0 4px 4px rgba(0, 0, 0, 0.9)
        )
        drop-shadow(
            0 0 8px rgba(241, 207, 123, 0.35)
        );

    pointer-events: none;
}


.pointer::after {
    content: "";

    position: absolute;

    left: -6px;

    top: 28px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 28%,
            #fffbe8 0%,
            #f1d17d 25%,
            #c08c38 55%,
            #654314 100%
        );

    border:
        1px solid #e0b85e;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.95),
        0 0 5px rgba(241, 207, 123, 0.25);

    transform:
        translateY(-50%);
}


/* =========================================================
   ROULETTE WHEEL
   ========================================================= */

.wheel {
    width:
        min(500px, 82vw);

    aspect-ratio: 1;

    border-radius: 50%;

    position: relative;

    flex: 0 0 auto;

    border:
        12px solid #715124;

    box-shadow:
        0 0 0 3px #1a140b,
        0 0 0 6px #bd8d3f,
        0 0 0 9px #3a2914,
        0 22px 55px rgba(0, 0, 0, 0.85),
        0 5px 20px rgba(0, 0, 0, 0.8),
        inset 0 0 0 3px rgba(240, 201, 112, 0.7),
        inset 0 0 30px rgba(0, 0, 0, 0.7);

    background:
        conic-gradient(
            from -4.864864deg,

            #168a5a 0deg 9.729729deg,

            #c51f3d 9.729729deg 19.459459deg,
            #111217 19.459459deg 29.189189deg,
            #c51f3d 29.189189deg 38.918918deg,
            #111217 38.918918deg 48.648648deg,
            #c51f3d 48.648648deg 58.378378deg,
            #111217 58.378378deg 68.108108deg,
            #c51f3d 68.108108deg 77.837837deg,
            #111217 77.837837deg 87.567567deg,
            #c51f3d 87.567567deg 97.297297deg,
            #111217 97.297297deg 107.027027deg,
            #c51f3d 107.027027deg 116.756756deg,
            #111217 116.756756deg 126.486486deg,
            #c51f3d 126.486486deg 136.216216deg,
            #111217 136.216216deg 145.945945deg,
            #c51f3d 145.945945deg 155.675675deg,
            #111217 155.675675deg 165.405405deg,
            #c51f3d 165.405405deg 175.135135deg,
            #111217 175.135135deg 184.864864deg,
            #c51f3d 184.864864deg 194.594594deg,
            #111217 194.594594deg 204.324324deg,
            #c51f3d 204.324324deg 214.054054deg,
            #111217 214.054054deg 223.783783deg,
            #c51f3d 223.783783deg 233.513513deg,
            #111217 233.513513deg 243.243243deg,
            #c51f3d 243.243243deg 252.972972deg,
            #111217 252.972972deg 262.702702deg,
            #c51f3d 262.702702deg 272.432432deg,
            #111217 272.432432deg 282.162162deg,
            #c51f3d 282.162162deg 291.891891deg,
            #111217 291.891891deg 301.621621deg,
            #c51f3d 301.621621deg 311.351351deg,
            #111217 311.351351deg 321.081081deg,
            #c51f3d 321.081081deg 330.810810deg,
            #111217 330.810810deg 340.540540deg,
            #c51f3d 340.540540deg 350.270270deg,
            #111217 350.270270deg 360deg
        );

    transition:
        transform
        5.2s
        cubic-bezier(
            0.12,
            0.68,
            0.15,
            1
        );

    will-change:
        transform;

    isolation:
        isolate;
}


/* =========================================================
   INNER RIM
   ========================================================= */

.wheel::before {
    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

    border:
        2px solid rgba(
            214,
            168,
            79,
            0.75
        );

    box-shadow:
        inset 0 0 0 5px rgba(10, 10, 12, 0.55),
        inset 0 0 0 7px rgba(198, 151, 66, 0.3),
        inset 0 0 35px rgba(0, 0, 0, 0.7);

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   HIGHLIGHT RING
   ========================================================= */

.wheel::after {
    content: "";

    position: absolute;

    inset: 5%;

    border-radius: 50%;

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

    box-shadow:
        inset 0 0 25px rgba(
            255,
            255,
            255,
            0.035
        );

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   WHEEL NUMBERS
   ========================================================= */

.wheel-number {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 34px;
    height: 34px;

    margin:
        -17px 0 0 -17px;

    /*
       IMPORTANT:

       --angle is the CENTER angle of the pocket.

       --radius determines how far from the center
       the number sits.

       Because the wheel itself starts at -4.864864deg,
       angle 0 is exactly the center of the zero pocket.
    */

    transform:
        rotate(var(--angle))
        translateY(
            calc(-1 * var(--radius))
        )
        rotate(
            calc(-1 * var(--angle))
        );

    display: grid;

    place-items: center;

    color: white;

    font-size: 14px;

    font-weight: 900;

    line-height: 1;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    text-shadow:
        0 2px 3px #000,
        0 0 5px rgba(
            0,
            0,
            0,
            0.8
        );

    z-index: 6;

    pointer-events: none;

    user-select: none;

    backface-visibility: hidden;
}


.wheel-number.red {
    color: #fff;
}


.wheel-number.black {
    color: #fff;
}


.wheel-number.green {
    color: #e7f7ed;
}


/* =========================================================
   WHEEL HUB
   ========================================================= */

.wheel-hub {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 112px;
    height: 112px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #343239,
            #15151a 50%,
            #08080a 100%
        );

    border:
        5px solid #a9792f;

    display: grid;

    place-items: center;

    align-content: center;

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.85),
        0 0 0 3px #241a0d,
        0 0 0 5px #b4863b,
        inset 0 0 18px rgba(0, 0, 0, 0.8);

    z-index: 10;

    pointer-events: none;
}


.wheel-hub b {
    font:
        700 17px
        Georgia,
        serif;

    color: var(--gold);

    letter-spacing: 1px;
}


.wheel-hub small {
    font-size: 7px;

    color: #999;

    letter-spacing: 1.5px;

    margin-top: 3px;
}


/* =========================================================
   RESULT
   ========================================================= */

.result-card {
    display: flex;

    justify-content: space-between;

    align-items: center;

    border:
        1px solid var(--line);

    border-radius: 11px;

    padding:
        14px 16px;

    margin-top: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 31, 0.9),
            rgba(9, 9, 12, 0.65)
        );

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.025
        );
}


.result-card small {
    font-size: 10px;

    color: #88858d;
}


.result-card strong {
    font-size: 22px;

    color: var(--gold);

    margin-left: 9px;

    font-weight: 900;
}


.result-meta {
    text-align: right;
}


.result-meta b,
.result-meta span {
    display: block;

    font-size: 10px;

    text-transform: uppercase;
}


.result-meta b {
    color: #ded9cf;
}


.result-meta span {
    color: #777;

    margin-top: 4px;
}


/* =========================================================
   RECENT RESULTS
   ========================================================= */

.recent {
    margin-top: 18px;
}


.recent > small {
    display: block;

    font-size: 9px;

    color: #85828a;

    letter-spacing: 1.5px;

    margin-bottom: 10px;
}


.recent-list {
    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    padding:
        2px 2px 8px;

    scrollbar-width: thin;
}


.recent-chip {
    flex:
        0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 12px;

    font-weight: 900;

    border:
        1px solid #444;

    box-shadow:
        inset 0 0 8px rgba(
            255,
            255,
            255,
            0.04
        ),
        0 3px 10px rgba(
            0,
            0,
            0,
            0.3
        );
}


.recent-chip.red {
    background:
        linear-gradient(
            145deg,
            #941b32,
            #681324
        );
}


.recent-chip.black {
    background:
        linear-gradient(
            145deg,
            #18181d,
            #08080b
        );
}


.recent-chip.green {
    background:
        linear-gradient(
            145deg,
            #187554,
            #0c4c37
        );
}


/* =========================================================
   BET PANEL
   ========================================================= */

.bet-panel {
    padding: 21px;
}


.field {
    display: block;

    color: #85828a;

    font-size: 10px;

    letter-spacing: 1.5px;

    margin: 21px 0;
}


.field input,
.field select {
    display: block;

    width: 100%;

    margin-top: 9px;

    background: #101116;

    color: #eee;

    border:
        1px solid #34353e;

    border-radius: 9px;

    padding:
        14px 13px;

    min-height: 48px;

    outline: none;

    font-size: 14px;

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


.field input:focus,
.field select:focus {
    border-color: #a67b3b;

    box-shadow:
        0 0 0 3px rgba(
            166,
            123,
            59,
            0.08
        );
}


/* =========================================================
   STAKE
   ========================================================= */

.stake {
    display: grid;

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

    width: 100%;

    margin-top: 10px;

    border-radius: 12px;

    overflow: hidden;

    background: #0d0e12;

    border:
        1px solid #3b3c45;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.025
        );
}


.stake button,
.stake input {
    width: 100%;

    height: 60px;

    margin: 0;

    outline: none;

    text-align: center;

    font-weight: 800;
}


.stake button {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    color: var(--gold);

    background:
        linear-gradient(
            180deg,
            #24232a 0%,
            #17171d 48%,
            #101116 100%
        );

    font-size: 30px;

    line-height: 1;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
}


.stake button:first-child {
    border-radius:
        11px 0 0 11px;

    border-right:
        1px solid #3b3c45;
}


.stake button:last-child {
    border-radius:
        0 11px 11px 0;

    border-left:
        1px solid #3b3c45;
}


.stake button:hover {
    background:
        linear-gradient(
            180deg,
            #302e36,
            #1d1c23
        );

    color: #ffe8a7;

    box-shadow:
        inset 0 0 18px rgba(
            241,
            207,
            123,
            0.07
        );
}


.stake button:active {
    transform:
        scale(0.94);
}


.stake input {
    border: 0;

    border-radius: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                241,
                207,
                123,
                0.06
            ),
            transparent 65%
        ),
        #101116;

    color: var(--gold);

    font-size: 23px;

    font-weight: 900;

    letter-spacing: 0.5px;

    appearance: textfield;

    -moz-appearance: textfield;
}


.stake input::-webkit-outer-spin-button,
.stake input::-webkit-inner-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


.stake input:focus {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                241,
                207,
                123,
                0.09
            ),
            transparent 65%
        ),
        #101116;

    box-shadow:
        inset 0 0 0 1px rgba(
            241,
            207,
            123,
            0.15
        );
}


/* =========================================================
   PAYOUT
   ========================================================= */

.payout-row {
    display: flex;

    justify-content: space-between;

    border-top:
        1px solid var(--line);

    padding:
        17px 0;

    color: #85828a;

    font-size: 11px;

    letter-spacing: 1px;
}


.payout-row b {
    color: var(--gold);

    font-size: 13px;
}


.full {
    width: 100%;

    margin-top: 6px;

    min-height: 50px;
}


.center-note {
    min-height: 30px;

    text-align: center;

    color: #aaa8b0;

    font-size: 11px;
}


.reset-btn {
    width: 100%;

    background: none;

    border:
        1px solid #33343b;

    color: #85828a;

    margin-top: 10px;
}


.virtual-note {
    font-size: 10px;

    color: #727078;

    text-align: center;

    line-height: 1.7;

    margin-top: 14px;
}


/* =========================================================
   NUMBER GRID
   ========================================================= */

.table-panel,
.history-panel {
    margin-top: 16px;

    padding: 19px;
}


.number-grid {
    display: grid;

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

    gap: 6px;
}


.number-btn {
    min-width: 0;

    min-height: 48px;

    border:
        1px solid #3c3d46;

    border-radius: 8px;

    color: #fff;

    font-weight: 800;

    font-size: 14px;

    background: #121217;

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


.number-btn:hover {
    filter: brightness(1.15);

    border-color: #8a7041;

    transform:
        translateY(-1px);

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


.number-btn:active {
    transform:
        scale(0.96);
}


.number-btn.red {
    background:
        linear-gradient(
            145deg,
            #941b32,
            #681324
        );
}


.number-btn.black {
    background:
        linear-gradient(
            145deg,
            #17171c,
            #08080b
        );
}


.number-btn.zero {
    grid-column:
        1 / -1;

    background:
        linear-gradient(
            145deg,
            #187554,
            #0c4c37
        );

    min-height: 52px;
}


/* =========================================================
   TRANSACTIONS
   ========================================================= */

.transactions {
    display: grid;

    gap: 9px;
}


.tx {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    border:
        1px solid var(--line);

    padding: 14px;

    border-radius: 9px;

    background:
        rgba(
            8,
            8,
            11,
            0.2
        );
}


.tx b {
    font-size: 13px;
}


.tx small {
    display: block;

    color: #777;

    font-size: 10px;

    margin-top: 4px;
}


.tx-status {
    font-size: 10px;

    text-transform: uppercase;

    color: var(--gold);
}


/* =========================================================
   HISTORY TABS
   ========================================================= */

.history-tabs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 4px;

    padding: 4px;

    margin-bottom: 12px;

    background: #101014;

    border:
        1px solid #292a31;

    border-radius: 9px;
}


.history-tab {
    border: 0;

    background: transparent;

    color: #77757d;

    padding:
        9px 6px;

    border-radius: 6px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;
}


.history-tab.active {
    background: #d6aa50;

    color: #111;
}


/* =========================================================
   GAME HISTORY
   ========================================================= */

.history-stats {
    display: grid;

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

    gap: 6px;

    margin-bottom: 10px;
}


.history-stat {
    background: #111116;

    border:
        1px solid #292a31;

    border-radius: 8px;

    padding:
        9px 7px;
}


.history-stat small {
    display: block;

    color: #77757d;

    font-size: 7px;

    letter-spacing: 1px;

    margin-bottom: 3px;
}


.history-stat strong {
    color: #eee;

    font-size: 14px;
}


.game-history {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.game-history-row {
    display: grid;

    grid-template-columns:
        1.5fr
        1.1fr
        .8fr
        .8fr;

    align-items: center;

    gap: 8px;

    padding: 9px;

    background: #111116;

    border:
        1px solid #292a31;

    border-radius: 8px;
}


.game-history-row.win {
    border-left:
        3px solid #6fdfa6;
}


.game-history-row.loss {
    border-left:
        3px solid #66646c;
}


.game-history-result {
    display: flex;

    align-items: center;

    gap: 7px;
}


.history-result-number {
    width: 30px;
    height: 30px;

    flex:
        0 0 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 9px;

    font-weight: 800;
}


.history-result-number.red {
    background: #701d29;
}


.history-result-number.black {
    background: #17171c;
}


.history-result-number.green {
    background: #176b46;
}


.history-result-info strong {
    display: block;

    font-size: 8px;
}


.history-result-info small {
    display: block;

    color: #68666e;

    font-size: 5px;

    margin-top: 2px;
}


.game-history-bet small,
.game-history-stake small,
.game-history-profit small {
    display: block;

    color: #66646c;

    font-size: 6px;

    margin-bottom: 2px;
}


.game-history-bet span,
.game-history-stake span {
    color: #d5d2d9;

    font-size: 8px;
}


.game-history-profit strong {
    font-size: 9px;
}


.game-history-profit.positive strong {
    color: #6fdfa6;
}


.game-history-profit.negative strong {
    color: #d07a82;
}


.history-empty {
    text-align: center;

    padding:
        25px 10px;

    border:
        1px dashed #303139;

    border-radius: 8px;
}


.history-empty-icon {
    color: #b89242;

    font-size: 20px;

    margin-bottom: 7px;
}


.history-empty strong {
    display: block;

    color: #ddd9d0;

    font-size: 10px;
}


.history-empty span {
    display: block;

    color: #66646c;

    font-size: 7px;

    margin-top: 4px;
}


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

.footer {
    text-align: center;

    color: #4e4d54;

    font-size: 10px;

    padding:
        30px 0 10px;
}


/* =========================================================
   AUTH
   ========================================================= */

.auth-wrap {
    min-height: 75vh;

    display: grid;

    place-items: center;
}


.auth-card {
    width:
        min(
            450px,
            100%
        );

    background: #15161c;

    border:
        1px solid var(--line);

    border-radius: 18px;

    padding: 31px;

    box-shadow:
        0 30px 100px rgba(
            0,
            0,
            0,
            0.65
        );
}


.auth-card h1 {
    font-size: 45px;

    margin-bottom: 14px;
}


.tabs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    border-bottom:
        1px solid var(--line);

    margin:
        25px 0;
}


.tab {
    background: none;

    border: 0;

    color: #85828a;

    padding: 14px;

    font-size: 13px;

    border-bottom:
        2px solid transparent;
}


.tab.active {
    color: var(--gold);

    border-color:
        var(--gold);
}


.form-message {
    font-size: 11px;

    text-align: center;

    min-height: 17px;

    color: #f18d99;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
    position: fixed;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.76
        );

    z-index: 50;

    display: grid;

    place-items: center;

    padding: 18px;

    backdrop-filter:
        blur(5px);
}


.modal-card {
    position: relative;

    width:
        min(
            500px,
            100%
        );

    max-height: 90vh;

    overflow: auto;

    background: #17181f;

    border:
        1px solid #3b3941;

    border-radius: 16px;

    padding: 26px;

    box-shadow:
        0 30px 100px rgba(
            0,
            0,
            0,
            0.85
        );
}


.close {
    position: absolute;

    right: 13px;
    top: 11px;

    background: none;

    border: 0;

    color: #aaa;

    font-size: 26px;
}


.payment-image {
    display: block;

    width: 100%;

    border-radius: 12px;

    border:
        1px solid #3b3529;

    margin:
        17px 0;
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-card {
    text-align: center;
}


.profile-avatar {
    width: 84px;
    height: 84px;

    border-radius: 50%;

    margin:
        9px auto 16px;

    background: #292831;

    border:
        1px solid #70552b;

    display: grid;

    place-items: center;

    color: var(--gold);

    font:
        30px Georgia,
        serif;

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


.profile-balance {
    padding: 17px;

    border:
        1px solid var(--line);

    border-radius: 11px;

    margin:
        21px 0;
}


.profile-balance small {
    display: block;

    color: #777;

    font-size: 8px;

    letter-spacing: 1px;
}


.profile-balance strong {
    display: block;

    color: var(--gold);

    font-size: 27px;

    margin-top: 7px;
}


.profile-card .ghost-btn,
.profile-card .danger-btn {
    margin-top: 9px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 100;

    background: #24232a;

    border:
        1px solid #393840;

    color: #ddd;

    padding:
        14px 17px;

    border-radius: 9px;

    font-size: 11px;

    opacity: 0;

    transform:
        translateY(10px);

    pointer-events: none;

    transition: 0.25s;

    max-width: 360px;
}


.toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.toast.good {
    border-color:
        #416d58;
}


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

@media (max-width: 1000px) {

    .navbar {
        min-height: 70px;

        flex-wrap: wrap;

        padding:
            12px 18px;

        gap: 10px;
    }


    .brand {
        min-width: auto;

        flex: 1;
    }


    .navbar nav {
        order: 3;

        width: 100%;

        justify-content: center;
    }


    .nav-link {
        padding: 9px;
    }


    .nav-actions {
        margin-left: auto;
    }


    .balance-mini {
        display: none;
    }


    .game-grid {
        grid-template-columns:
            1fr;
    }


    .wheel-stage {
        min-height: 540px;

        padding-top: 55px;
    }


    .number-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }
}


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

@media (max-width: 600px) {

    body {
        font-size: 14px;
    }


    main {
        padding:
            30px 12px;
    }


    .hero-row {
        align-items: flex-start;

        gap: 15px;
    }


    .hero-row h1 {
        font-size: 42px;
    }


    .balance-card {
        min-width: 110px;

        padding: 13px;
    }


    .balance-card strong {
        font-size: 24px;
    }


    .ghost-btn.small {
        display: none;
    }


    .profile-btn {
        padding: 8px;
    }


    .wheel-panel {
        padding: 13px;
    }


    .wheel-stage {
        min-height: 450px;

        padding:
            50px 0 25px;

        overflow: visible;
    }


    .wheel {
        width:
            min(
                430px,
                94vw
            );

        border-width: 9px;
    }


    .pointer {
        top: 12px;

        border-left-width: 13px;
        border-right-width: 13px;

        border-top-width: 28px;

        border-bottom: 0;
    }


    .pointer::after {
        left: -5px;

        top: 24px;

        width: 10px;
        height: 10px;
    }


    .wheel-number {
        width: 30px;
        height: 30px;

        margin:
            -15px 0 0 -15px;

        font-size: 12px;
    }


    .wheel-hub {
        width: 90px;
        height: 90px;

        border-width: 4px;
    }


    .wheel-hub b {
        font-size: 14px;
    }


    .wheel-hub small {
        font-size: 6px;
    }


    .result-card {
        padding:
            13px 14px;
    }


    .result-card strong {
        font-size: 20px;
    }


    .number-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: 5px;
    }


    .number-btn {
        min-height: 42px;

        font-size: 13px;
    }


    .stake {
        grid-template-columns:
            60px
            minmax(0, 1fr)
            60px;

        border-radius: 11px;
    }


    .stake button,
    .stake input {
        height: 58px;
    }


    .stake button {
        font-size: 28px;
    }


    .stake input {
        font-size: 21px;
    }


    .field {
        margin: 18px 0;
    }


    .field input,
    .field select {
        min-height: 50px;

        font-size: 15px;
    }


    .auth-card {
        padding: 23px;
    }


    .auth-card h1 {
        font-size: 42px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .hero-row h1 {
        font-size: 37px;
    }


    .balance-card {
        min-width: 95px;
    }


    .wheel-stage {
        min-height: 385px;

        padding:
            44px 0 20px;
    }


    .wheel {
        width: 91vw;

        border-width: 7px;
    }


    .pointer {
        top: 9px;

        border-left-width: 11px;
        border-right-width: 11px;

        border-top-width: 25px;

        border-bottom: 0;
    }


    .pointer::after {
        left: -4px;

        top: 21px;

        width: 8px;
        height: 8px;
    }


    .wheel-number {
        font-size: 10px;

        width: 26px;
        height: 26px;

        margin:
            -13px 0 0 -13px;
    }


    .wheel-hub {
        width: 76px;
        height: 76px;
    }


    .wheel-hub b {
        font-size: 12px;
    }


    .number-btn {
        min-height: 38px;

        font-size: 12px;
    }


    .stake {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            54px;
    }


    .stake button,
    .stake input {
        height: 54px;
    }


    .stake button {
        font-size: 24px;
    }


    .stake input {
        font-size: 19px;
    }
}


/* =========================================================
   DESKTOP / NON-MOBILE NOTICE
   ========================================================= */

.mobile-only-notice {
    display: none;
}


@media (min-width: 601px) {

    .mobile-only-notice {
        position: fixed;

        inset: 0;

        z-index: 9999;

        display: grid;

        place-items: center;

        padding: 24px;

        background: #08090c;

        text-align: center;
    }


    .mobile-only-card {
        width:
            min(
                430px,
                100%
            );

        padding:
            42px 30px;

        border:
            1px solid var(--line);

        border-radius: 20px;

        background:
            linear-gradient(
                145deg,
                #181920,
                #101116
            );

        box-shadow:
            0 30px 100px rgba(
                0,
                0,
                0,
                .65
            );
    }


    .mobile-only-card .brand-mark {
        margin:
            0 auto 20px;
    }


    .mobile-only-card h1 {
        margin:
            0 0 10px;

        font:
            700 34px/1
            "Playfair Display",
            Georgia,
            serif;
    }


    .mobile-only-card p {
        margin:
            0 0 8px;

        color:
            var(--muted);

        line-height: 1.6;
    }


    .mobile-only-card span {
        color:
            var(--gold);

        font-size: 12px;
    }


    body > header,
    body > main,
    body > .modal,
    body > .toast {
        visibility: hidden;
    }
}


/* =========================================================
   MOBILE-ONLY COMPACT LAYOUT
   ========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;

        min-width: 0;

        overflow-x: hidden;
    }


    body {
        font-size: 12px;

        padding-bottom:
            env(
                safe-area-inset-bottom
            );
    }


    .navbar {
        position: sticky;

        min-height: 52px;
        height: 52px;

        padding:
            6px 9px;

        gap: 7px;
    }


    .brand {
        min-width: 0;

        gap: 7px;

        flex: 1;
    }


    .brand-mark {
        width: 32px;
        height: 32px;

        border-radius: 8px;

        font-size: 18px;
    }


    .brand b {
        font-size: 12px;

        letter-spacing: 1.5px;
    }


    .brand small {
        font-size: 6px;

        letter-spacing: 1.2px;
    }


    .navbar nav {
        display: none;
    }


    .nav-actions {
        gap: 5px;
    }


    .balance-mini {
        display: block;

        border: 0;

        padding: 0;

        text-align: right;
    }


    .balance-mini small,
    .balance-mini span {
        display: none;
    }


    .balance-mini strong {
        margin: 0;

        font-size: 13px;
    }


    .ghost-btn.small {
        display: none;
    }


    .profile-btn {
        padding:
            5px 6px;

        gap: 4px;

        font-size: 10px;
    }


    .profile-btn .avatar {
        width: 25px;
        height: 25px;
    }


    .icon-btn {
        padding:
            6px 8px;
    }


    #depositBtn {
        padding:
            7px 8px;

        font-size: 9px;
    }


    main {
        max-width: none;

        padding:
            7px 7px 12px;
    }


    .hero-row {
        display: none;
    }


    .game-grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, .92fr);

        gap: 7px;

        align-items: stretch;
    }


    .panel {
        border-radius: 11px;
    }


    .wheel-panel {
        min-width: 0;

        padding: 8px;
    }


    .panel-head {
        margin-bottom: 5px;
    }


    .panel-head small {
        font-size: 7px;

        letter-spacing: 1.2px;
    }


    .panel-head h2 {
        font-size: 11px;

        margin-top: 3px;
    }


    .live {
        font-size: 7px;
    }


    .live i {
        width: 5px;
        height: 5px;

        margin-right: 3px;
    }


    .wheel-stage {
        min-height: 0;

        height:
            clamp(
                205px,
                57vw,
                245px
            );

        padding:
            25px 0 0;

        overflow: visible;
    }


    .wheel {
        width:
            min(
                58vw,
                225px
            );

        max-width: 100%;

        border-width: 6px;

        box-shadow:
            0 0 0 2px #17130c,
            0 0 0 3px #b8893d,
            0 0 0 5px #392914,
            0 10px 25px rgba(
                0,
                0,
                0,
                .9
            ),
            inset 0 0 0 2px rgba(
                240,
                201,
                112,
                .7
            ),
            inset 0 0 16px rgba(
                0,
                0,
                0,
                .7
            );
    }


    .pointer {
        top: 5px;

        border-left-width: 8px;
        border-right-width: 8px;

        border-top-width: 18px;
    }


    .pointer::after {
        left: -3px;

        top: 16px;

        width: 7px;
        height: 7px;
    }


    .wheel-number {
        width: 22px;
        height: 22px;

        margin:
            -11px 0 0 -11px;

        font-size: 9px;
    }


    .wheel-hub {
        width: 58px;
        height: 58px;

        border-width: 3px;
    }


    .wheel-hub b {
        font-size: 9px;
    }


    .wheel-hub small {
        font-size: 4px;
    }


    .result-card {
        padding:
            7px 8px;

        border-radius: 7px;
    }


    .result-card small {
        font-size: 6px;
    }


    .result-card strong {
        font-size: 16px;
    }


    .result-meta b,
    .result-meta span {
        font-size: 8px;
    }


    .recent {
        display: none;
    }


    .bet-panel {
        min-width: 0;

        padding: 9px;

        display: flex;

        flex-direction: column;
    }


    .bet-panel .panel-head {
        margin-bottom: 1px;
    }


    .bet-panel .panel-head h2 {
        font-size: 12px;
    }


    .bet-panel .field {
        margin: 7px 0;
    }


    .bet-panel .field input,
    .bet-panel .field select {
        min-height: 35px;

        height: 35px;

        padding:
            7px 8px;

        font-size: 11px;
    }


    .bet-panel .stake {
        grid-template-columns:
            31px
            minmax(0,1fr)
            31px;
    }


    .bet-panel .stake button,
    .bet-panel .stake input {
        height: 35px;
    }


    .bet-panel .stake button {
        font-size: 18px;
    }


    .bet-panel .stake input {
        font-size: 13px;
    }


    .payout-row {
        padding: 7px 0;

        font-size: 9px;
    }


    .bet-panel .gold-btn {
        min-height: 39px;

        padding:
            8px 5px;

        font-size: 9px;
    }


    .center-note {
        min-height: 24px;

        margin:
            4px 0 0;

        font-size: 8px;
    }


    .virtual-note {
        font-size: 7px;

        margin-top: auto;

        padding-top: 4px;
    }


    .table-panel {
        margin-top: 7px;

        padding: 8px;
    }


    .table-panel .panel-head {
        margin-bottom: 6px;
    }


    .table-panel .panel-head h2 {
        font-size: 11px;
    }


    .table-panel .panel-head .muted {
        font-size: 7px;
    }


    .number-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: 4px;
    }


    .number-btn {
        min-height: 31px;

        height: 31px;

        border-radius: 5px;

        font-size: 10px;
    }


    .number-btn.zero {
        grid-column:
            1 / -1;

        min-height: 28px;

        height: 28px;
    }


    .history-panel {
        margin-top: 7px;
    }


    .history-panel .panel-head {
        padding: 8px;
    }


    .history-tabs {
        margin-bottom: 8px;
    }


    .history-tab {
        padding:
            8px 4px;

        font-size: 7px;
    }


    .history-stats {
        gap: 3px;

        margin-bottom: 7px;
    }


    .history-stat {
        padding:
            6px 4px;

        border-radius: 6px;
    }


    .history-stat small {
        font-size: 5px;
    }


    .history-stat strong {
        font-size: 11px;
    }


    .game-history {
        gap: 4px;
    }


    .game-history-row {
        grid-template-columns:
            1.4fr
            .9fr
            .7fr
            .7fr;

        gap: 5px;

        padding: 7px;
    }


    .history-result-number {
        width: 26px;
        height: 26px;

        flex-basis: 26px;

        font-size: 8px;
    }


    .history-result-info strong {
        font-size: 7px;
    }


    .history-result-info small {
        font-size: 4px;
    }


    .game-history-bet small,
    .game-history-stake small,
    .game-history-profit small {
        font-size: 4px;
    }


    .game-history-bet span,
    .game-history-stake span {
        font-size: 6px;
    }


    .game-history-profit strong {
        font-size: 7px;
    }


    .footer {
        padding:
            12px 0 2px;

        font-size: 7px;
    }


    .toast {
        left: 8px;
        right: 8px;

        bottom:
            calc(
                8px +
                env(
                    safe-area-inset-bottom
                )
            );

        max-width: none;

        padding:
            10px 12px;

        font-size: 10px;

        text-align: center;
    }


    .modal {
        padding: 8px;
    }


    .modal-card {
        max-height: 92vh;

        padding: 18px;

        border-radius: 12px;
    }
}


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

@media (max-width: 360px) {

    .game-grid {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, .95fr);
    }


    .wheel-stage {
        height: 195px;
    }


    .wheel {
        width: 55vw;
    }


    .wheel-number {
        width: 20px;
        height: 20px;

        margin:
            -10px 0 0 -10px;

        font-size: 8px;
    }


    .wheel-hub {
        width: 52px;
        height: 52px;
    }


    .number-grid {
        gap: 3px;
    }


    .number-btn {
        min-height: 28px;

        height: 28px;

        font-size: 9px;
    }


    .number-btn.zero {
        min-height: 26px;

        height: 26px;
    }
}