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

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% -10%,
            #26385d 0%,
            #101827 38%,
            #070b13 75%,
            #05070c 100%
        );
    color: #f5f7fb;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   TOP BAR
========================================================= */

.top {
    min-height: 64px;
    background: rgba(7, 11, 20, .94);
    color: #fff;

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

    padding: 0 20px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 8px 30px rgba(0,0,0,.22);

    position: sticky;
    top: 0;
    z-index: 100;
}

.top a {
    color: #fff;
    text-decoration: none;
}

.top a:hover {
    opacity: .85;
}

.brand {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .4px;
}

.brand:first-letter {
    color: #38a8ff;
}


/* =========================================================
   COMMON LAYOUT
========================================================= */

.container {
    width: min(1100px, calc(100% - 28px));
    margin: 24px auto 45px;
    padding: 0;
}

.center {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.card {
    background: rgba(16, 24, 40, .88);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.25);

    backdrop-filter: blur(16px);
}

.landing {
    max-width: 520px;
    text-align: center;
}

.form {
    max-width: 420px;
    width: 100%;
}

h1 {
    margin: 5px 0 12px;
    font-size: 30px;
    line-height: 1.15;
}

h2 {
    margin: 0 0 13px;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #8d9ab0;
    font-weight: 900;
}

.badge {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 12px;
}

.muted,
.notice {
    color: #8995aa;
    font-size: 13px;
    line-height: 1.5;
}


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

.btn {
    display: inline-block;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;

    background: rgba(255,255,255,.06);
    color: #f5f7fb;

    text-decoration: none;
    padding: 11px 15px;

    font-weight: 800;
    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}

.btn:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-1px);
}

.btn.primary {
    background: linear-gradient(
        135deg,
        #635bff,
        #328cff
    );

    border-color: transparent;
    color: #fff;
}

.full {
    width: 100%;
}

.actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 25px 0;
}


/* =========================================================
   ALERTS
========================================================= */

.alert {
    padding: 12px 14px;
    border-radius: 11px;
    margin: 12px 0;

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

    background: rgba(255,196,64,.1);
    border: 1px solid rgba(255,196,64,.18);
}

.alert.good {
    background: rgba(34,211,125,.10);
    border-color: rgba(34,211,125,.22);
    color: #64e7a1;
}

.alert.bad {
    background: rgba(255,64,83,.10);
    border-color: rgba(255,64,83,.22);
    color: #ff8794;
}


/* =========================================================
   FORMS
========================================================= */

label {
    display: block;
    font-weight: 800;
    margin: 14px 0;
}

input,
select,
textarea {
    display: block;
    width: 100%;
    margin-top: 7px;

    padding: 12px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;

    background: rgba(255,255,255,.05);
    color: #fff;

    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4d8cff;
}

input[type=file] {
    padding: 9px;
}


/* =========================================================
   TABLES
========================================================= */

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.table-wrap {
    overflow: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 850px;
}

th,
td {
    padding: 11px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-align: left;
    font-size: 13px;
    vertical-align: top;
}

th {
    color: #8995aa;
}

.inline {
    display: grid;
    gap: 6px;
    min-width: 180px;
}

.inline input {
    margin: 0;
}

.inline .btn {
    width: 100%;
}


/* =========================================================
   GAME PAGE
========================================================= */

.game-container {
    width: min(560px, calc(100% - 24px));
    margin: 18px auto 45px;
}


/* Game heading */

.game-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.game-hero h1 {
    margin: 4px 0 0;
    font-size: 27px;
}


/* =========================================================
   GAME TOP / ROUND CARD
========================================================= */

.round-card {
    padding: 15px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(22,31,52,.96),
            rgba(10,16,29,.96)
        );

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 20px 55px rgba(0,0,0,.35);
}

.round-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.round-number {
    color: #b8c2d5;
    font-size: 13px;
    margin-top: 3px;
}


/* =========================================================
   TIMER
========================================================= */

.timer {
    min-width: 76px;

    text-align: center;

    padding: 9px 10px;

    border-radius: 12px;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.08);

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

    font-variant-numeric: tabular-nums;

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

.timer.danger {
    background: rgba(255,65,87,.15);
    color: #ff7181;

    border-color:
        rgba(255,65,87,.3);

    animation: timerPulse .8s infinite;
}

@keyframes timerPulse {

    0% {
        opacity: 1;
    }

    50% {
        opacity: .65;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================================
   GAME PANEL
========================================================= */

.game-panel {
    margin-top: 14px;
    padding: 16px;

    border-radius: 19px;

    background:
        rgba(7,12,23,.88);

    border: 1px solid rgba(255,255,255,.07);
}


/* =========================================================
   3 × 3 COLOUR GRID
========================================================= */

.colors {
    display: grid;

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

    gap: 9px;
}


/* Small rectangular colour buttons */

.color-btn {
    position: relative;

    min-height: 64px;

    border: 0;

    border-radius: 13px;

    cursor: pointer;

    color: #fff;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 7px 18px rgba(0,0,0,.28);

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}

.color-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.color-btn:active {
    transform: scale(.96);
}


/* Selected colour */

.color-btn.selected {
    outline: 3px solid #fff;
    outline-offset: 2px;

    transform: scale(.96);

    box-shadow:
        0 0 0 5px rgba(255,255,255,.08),
        0 10px 25px rgba(0,0,0,.35);
}


/* =========================================================
   COLOURS
========================================================= */

.color-btn.red {
    background:
        linear-gradient(
            145deg,
            #ff4b61,
            #c71f39
        );
}

.color-btn.green {
    background:
        linear-gradient(
            145deg,
            #27dc82,
            #078b49
        );
}

.color-btn.blue {
    background:
        linear-gradient(
            145deg,
            #4895ff,
            #2456c7
        );
}

.color-btn.yellow {
    background:
        linear-gradient(
            145deg,
            #ffe05a,
            #d99b00
        );

    color: #17120a;
}

.color-btn.pink {
    background:
        linear-gradient(
            145deg,
            #ff69bc,
            #c32c80
        );
}

.color-btn.purple {
    background:
        linear-gradient(
            145deg,
            #a066ff,
            #5923bd
        );
}

.color-btn.orange {
    background:
        linear-gradient(
            145deg,
            #ff9f46,
            #dc5b08
        );
}

.color-btn.cyan {
    background:
        linear-gradient(
            145deg,
            #29e6e8,
            #078b9d
        );
}

.color-btn.violet {
    background:
        linear-gradient(
            145deg,
            #707aff,
            #3c42b7
        );
}


/* =========================================================
   BET BOX
========================================================= */

.bet-box {
    margin-top: 16px;
    padding-top: 15px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.selected-text {
    margin-bottom: 10px;

    color: #aeb9cd;

    font-size: 13px;
}

.selected-text strong {
    color: #fff;
}


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

.amounts {
    display: flex;
    gap: 9px;
}

.amount {
    flex: 1;

    padding: 11px;

    border-radius: 11px;

    border: 1px solid rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.05);

    color: #fff;

    cursor: pointer;

    font-weight: 800;

    transition: .15s ease;
}

.amount:hover {
    background:
        rgba(255,255,255,.09);
}

.amount.active {
    border-color: #fff;

    background:
        rgba(255,255,255,.14);

    box-shadow:
        0 0 0 2px rgba(255,255,255,.05);
}


/* =========================================================
   CONFIRM BET
========================================================= */

.confirm {
    width: 100%;

    margin-top: 11px;

    padding: 14px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #685cff,
            #3e8fff
        );

    color: #fff;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(62,143,255,.2);

    transition:
        transform .15s ease,
        filter .15s ease;
}

.confirm:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.confirm:active:not(:disabled) {
    transform: scale(.98);
}

.confirm:disabled {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}


/* =========================================================
   GAME NAVIGATION
========================================================= */

.bottom-links {
    display: flex;
    gap: 9px;

    margin-top: 14px;
}

.link-btn {
    flex: 1;

    text-align: center;

    padding: 11px 7px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.07);

    color: #dbe1ee;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .15s ease;
}

.link-btn:hover {
    background:
        rgba(255,255,255,.1);

    color: #fff;
}


/* =========================================================
   GAME NOTICE
========================================================= */

.game-notice {
    margin-top: 12px;

    color: #727e96;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   RESULTS PAGE
========================================================= */

.results-page {
    width: min(1050px, calc(100% - 28px));
    margin: 0 auto;
    padding: 22px 0 45px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}

.results-header h1 {
    margin: 0;
}

.results-header p {
    margin: 5px 0 0;
    color: #8b97aa;
}

.back-btn {
    text-decoration: none;

    padding: 10px 15px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.08);

    color: #fff;
}


/* Result cards */

.result-card {
    background:
        rgba(16,24,40,.88);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 18px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.22);
}

.result-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 17px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.round-date {
    font-size: 12px;
    color: #7e899c;
}

.result-row {
    display: grid;

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

    gap: 10px;

    padding: 17px;
}

.result-item {
    min-width: 0;
}

.result-label {
    display: block;

    font-size: 11px;

    color: #7e899c;

    margin-bottom: 5px;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.result-value {
    font-weight: 700;
}

.color-result {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}

.color-dot {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    display: inline-block;

    flex-shrink: 0;
}


/* Result dots */

.color-dot.red {
    background: #ff3b57;
    box-shadow:
        0 0 12px rgba(255,59,87,.45);
}

.color-dot.green {
    background: #22d47b;
    box-shadow:
        0 0 12px rgba(34,212,123,.45);
}

.color-dot.blue {
    background: #3d8bff;
    box-shadow:
        0 0 12px rgba(61,139,255,.45);
}

.color-dot.yellow {
    background: #f5c928;
    box-shadow:
        0 0 12px rgba(245,201,40,.45);
}

.color-dot.pink {
    background: #ef4da8;
    box-shadow:
        0 0 12px rgba(239,77,168,.45);
}

.color-dot.purple {
    background: #8854e8;
    box-shadow:
        0 0 12px rgba(136,84,232,.45);
}

.color-dot.orange {
    background: #f47c24;
    box-shadow:
        0 0 12px rgba(244,124,36,.45);
}

.color-dot.cyan {
    background: #13cbd0;
    box-shadow:
        0 0 12px rgba(19,203,208,.45);
}

.color-dot.violet {
    background: #5d67ef;
    box-shadow:
        0 0 12px rgba(93,103,239,.45);
}

.color-dot.default {
    background: #aaa;
}


/* Results empty */

.empty {
    padding: 35px;

    text-align: center;

    color: #7f8b9e;
}


/* Win / loss */

.win {
    color: #35dd8a;
    font-weight: 800;
}

.loss {
    color: #ff5368;
    font-weight: 800;
}

.pending {
    color: #8995a8;
}


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

@media (max-width: 700px) {

    .top {
        min-height: 58px;
        padding: 0 14px;
    }

    .brand {
        font-size: 18px;
    }

    .container {
        margin-top: 14px;
    }

    .game-container {
        width: calc(100% - 20px);
        margin-top: 14px;
    }

    .game-hero h1 {
        font-size: 24px;
    }

    .round-card {
        padding: 13px;
        border-radius: 17px;
    }

    .game-panel {
        padding: 12px;
    }

    .colors {
        gap: 8px;
    }

    .color-btn {
        min-height: 58px;
        border-radius: 11px;
        font-size: 11px;
    }

    .result-row {
        grid-template-columns: 1fr 1fr;
    }

    .results-header {
        align-items: flex-start;
    }

    .results-header h1 {
        font-size: 24px;
    }

    .results-page {
        width: calc(100% - 20px);
    }

    .bet-table {
        font-size: 12px;
    }

    .bet-table th,
    .bet-table td {
        padding: 10px 8px;
    }

    .bottom-links {
        gap: 7px;
    }

    .link-btn {
        font-size: 12px;
        padding: 10px 5px;
    }
}


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

@media (max-width: 380px) {

    .color-btn {
        min-height: 54px;
        font-size: 10px;
    }

    .timer {
        min-width: 68px;
        font-size: 18px;
    }

    .game-panel {
        padding: 10px;
    }
}