:root {
    color-scheme: dark;

    --bg: #020711;
    --bg2: #04101e;

    --panel:
        rgba(4, 19, 34, .91);

    --panel2:
        rgba(7, 27, 47, .92);

    --panel3:
        rgba(9, 34, 57, .82);

    --border:
        rgba(35, 185, 255, .42);

    --border-soft:
        rgba(42, 158, 215, .18);

    --blue: #00d9ff;
    --blue2: #0a8bff;
    --blue3: #7befff;

    --gold: #f5c749;
    --gold2: #ffdf7d;
    --gold3: #9f6e14;

    --text: #f6f9ff;
    --muted: #7ea1bd;
    --muted2: #4f718d;

    --green: #4bf59f;
    --red: #ff5b73;
    --amber: #ffc65c;

    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(0, 134, 255, .16),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #020711 0%,
            #01050c 100%
        );

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color:
        transparent;
}

button:focus-visible,
input:focus-visible {
    outline:
        2px solid var(--blue);

    outline-offset:
        3px;
}


/* BACKGROUND */

.scene-light {
    position: fixed;

    z-index: 0;

    top: 0;
    bottom: 0;

    width: 240px;

    pointer-events: none;

    opacity: .48;

    filter:
        blur(45px);
}

.scene-light-left {
    left: -150px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 179, 56, .21),
            transparent
        );
}

.scene-light-right {
    right: -150px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 179, 56, .19),
            transparent
        );
}

.scene-noise {
    position: fixed;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}


/* APP */

.app-shell {
    position: relative;
    z-index: 2;

    width:
        min(1500px, 100%);

    margin:
        0 auto;

    padding:
        0 26px 22px;
}


/* HEADER */

.topbar {
    min-height: 88px;

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

    gap: 20px;

    border-bottom:
        1px solid rgba(237, 193, 66, .32);
}

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

    min-width: 0;

    gap: 13px;
}

.dice-logo {
    flex:
        0 0 auto;

    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(247, 201, 69, .55);

    border-radius: 13px;

    color: var(--gold);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 222, 116, .18),
            rgba(120, 72, 7, .08)
        );

    box-shadow:
        0 0 25px rgba(255, 200, 53, .08);
}

.dice-logo span {
    font-size: 28px;

    filter:
        drop-shadow(
            0 0 6px rgba(255, 205, 70, .28)
        );
}

.brand-copy {
    min-width: 0;
}

.brand-copy strong {
    display: block;

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

    font-size:
        clamp(20px, 2vw, 31px);

    font-weight: 500;

    letter-spacing:
        .04em;

    white-space:
        nowrap;
}

.brand-copy strong em {
    color: var(--gold);

    font-style: normal;
}

.brand-copy small {
    display: block;

    margin-top: 4px;

    color: #7796af;

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

    letter-spacing:
        .25em;
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.balance-box {
    min-height: 55px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        8px 14px;

    border:
        1px solid rgba(28, 163, 231, .34);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 25, 44, .94),
            rgba(2, 14, 28, .94)
        );
}

.balance-icon {
    color: var(--gold);

    font-size: 25px;
}

.balance-box div:last-child {
    display: flex;
    flex-direction: column;
}

.balance-box small {
    color: #69a4c7;

    font-size: 8px;
}

.balance-box strong {
    color: var(--blue);

    font-size: 17px;
}

.balance-box strong span {
    margin-left: 1px;

    font-size: 10px;
}

.icon-button {
    width: 50px;
    height: 50px;

    border:
        1px solid rgba(32, 166, 231, .32);

    border-radius: 13px;

    background:
        rgba(4, 20, 36, .9);

    color: #d9e8f4;

    cursor: pointer;

    font-size: 21px;
}


/* DESKTOP BOARD */

.game-board {
    display: grid;

    grid-template-columns:
        minmax(320px, .92fr)
        minmax(400px, 1.18fr)
        minmax(340px, .95fr);

    grid-template-areas:
        "numbers result bet"
        "numbers recent payout";

    gap: 16px;

    padding-top: 18px;
}

.panel {
    position: relative;

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

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(6, 29, 49, .93),
            rgba(2, 13, 27, .97)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 55px rgba(0, 0, 0, .29);

    overflow: hidden;
}

.panel::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            130deg,
            rgba(0, 203, 255, .045),
            transparent 37%
        );
}

.panel-heading {
    position: relative;
    z-index: 2;

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

    gap: 12px;

    padding:
        17px 18px 10px;
}

.step-title {
    display: flex;
    align-items: flex-start;

    gap: 11px;
}

.step-title > span {
    flex:
        0 0 auto;

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border:
        2px solid var(--gold);

    border-radius: 50%;

    color: var(--gold);

    font-family:
        Georgia,
        serif;

    font-size: 16px;
}

.step-title h2 {
    margin: 0;

    color: var(--gold2);

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

    font-size:
        clamp(17px, 1.7vw, 23px);

    font-weight: 500;

    letter-spacing:
        .035em;
}

.step-title p {
    margin: 2px 0 0;

    color: #68a4ca;

    font-size: 10px;
}

.desktop-helper {
    padding-top: 5px;

    color: #5d9fc4;

    font-size: 8px;

    letter-spacing:
        .18em;
}


/* RESULT */

.result-zone {
    grid-area: result;

    position: relative;

    min-height: 430px;

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

    overflow: hidden;

    border-radius: var(--radius);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 138, 255, .09),
            transparent 40%
        );
}

.result-zone::before,
.result-zone::after {
    content: "";

    position: absolute;

    top: 6%;
    bottom: 5%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(244, 190, 55, .38),
            transparent
        );
}

.result-zone::before {
    left: 8%;
}

.result-zone::after {
    right: 8%;
}

.result-caption {
    position: relative;
    z-index: 3;

    margin-bottom: 7px;

    color: var(--gold);

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

    letter-spacing:
        .35em;
}

.orb-stage {
    position: relative;

    width:
        min(100%, 450px);

    height: 320px;

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

.orb-aura {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.aura-a {
    width: 265px;
    height: 265px;

    border:
        1px solid rgba(0, 219, 255, .25);

    box-shadow:
        0 0 80px rgba(0, 173, 255, .2);

    animation:
        auraPulse 2.5s ease-in-out infinite alternate;
}

.aura-b {
    width: 305px;
    height: 305px;

    border:
        1px dashed rgba(244, 193, 57, .16);

    animation:
        auraRotate 32s linear infinite;
}

.result-orb {
    position: relative;
    z-index: 4;

    width: 230px;
    height: 230px;

    display: grid;
    place-items: center;

    border:
        2px solid rgba(74, 230, 255, .76);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 24%,
            rgba(101, 220, 255, .22),
            rgba(3, 35, 73, .94) 45%,
            rgba(0, 6, 20, .99) 74%
        );

    box-shadow:
        inset 0 0 50px rgba(0, 130, 255, .22),
        inset 0 0 90px rgba(0, 59, 132, .42),
        0 0 20px rgba(35, 221, 255, .75),
        0 0 80px rgba(0, 120, 255, .38);
}

.result-orb::before {
    content: "";

    position: absolute;

    inset: 9px;

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

    border-radius: 50%;
}

.orb-reflection {
    position: absolute;

    top: 23px;
    left: 52px;

    width: 85px;
    height: 31px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .33),
            transparent
        );

    transform:
        rotate(-25deg);

    filter:
        blur(5px);
}

.result-orb strong {
    position: relative;
    z-index: 3;

    font-size:
        clamp(62px, 7vw, 88px);

    letter-spacing:
        -.055em;

    text-shadow:
        0 0 14px rgba(115, 235, 255, .75),
        0 0 45px rgba(0, 127, 255, .55);
}

.orb-pedestal {
    position: absolute;

    z-index: 3;

    bottom: 10px;

    width: 290px;
    height: 64px;

    border:
        1px solid rgba(255, 204, 82, .64);

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #7d5510 0%,
            #171004 18%,
            #040507 50%,
            #8d6418 100%
        );

    box-shadow:
        0 0 22px rgba(255, 191, 45, .18);
}

.pedestal-top {
    position: absolute;

    top: -7px;
    left: 7%;

    width: 86%;
    height: 30px;

    border:
        2px solid rgba(254, 207, 74, .63);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 142, 255, .18),
            rgba(1, 7, 13, .92) 68%
        );
}

.pedestal-label {
    position: absolute;

    bottom: 10px;
    left: 50%;

    transform:
        translateX(-50%);

    width: max-content;

    color: var(--gold);

    font-size: 7px;
    font-weight: 750;

    letter-spacing:
        .25em;
}

.result-status {
    min-width: 82px;

    position: relative;
    z-index: 3;

    padding:
        6px 11px;

    border:
        1px solid rgba(0, 209, 255, .16);

    border-radius: 999px;

    background:
        rgba(0, 105, 154, .065);

    color: #73dfff;

    text-align: center;

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

    letter-spacing:
        .18em;
}


/* NUMBERS */

.numbers-panel {
    grid-area: numbers;

    min-height: 620px;
}

.number-scroll {
    position: relative;
    z-index: 2;

    height: 525px;

    margin:
        2px 14px 0;

    padding-right: 5px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color:
        #00b7ee
        rgba(0, 0, 0, .1);
}

.number-scroll::-webkit-scrollbar {
    width: 5px;
}

.number-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        linear-gradient(
            #00d8ff,
            #0873d6
        );
}

.number-grid {
    display: grid;

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

    gap: 7px;

    padding-bottom: 8px;
}

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

    border:
        1px solid rgba(77, 143, 187, .27);

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(23, 58, 87, .95),
            rgba(11, 36, 60, .94)
        );

    color: #eef6ff;

    cursor: pointer;

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

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

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        transform .15s ease;
}

.number-button:hover {
    border-color:
        rgba(0, 217, 255, .7);

    color: white;
}

.number-button.selected {
    border-color:
        #20e6ff;

    background:
        linear-gradient(
            180deg,
            rgba(16, 123, 178, .95),
            rgba(3, 71, 114, .98)
        );

    box-shadow:
        inset 0 0 16px rgba(65, 230, 255, .15),
        0 0 9px rgba(0, 219, 255, .7),
        0 0 26px rgba(0, 143, 255, .34);

    color: #fff;

    transform:
        translateY(-1px);
}

.scroll-label {
    position: relative;
    z-index: 2;

    height: 34px;

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

    gap: 13px;

    color: #7893a8;

    font-size: 7px;

    letter-spacing:
        .21em;
}


/* BET */

.bet-panel {
    grid-area: bet;

    padding-bottom: 17px;
}

.bet-fields {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr;

    gap: 11px;

    padding:
        2px 18px;
}

.field-group label {
    display: block;

    margin-bottom: 5px;

    color: #93b8d1;

    font-size: 10px;
}

.pick-display,
.wager-control {
    min-height: 51px;

    display: flex;
    align-items: center;

    border:
        1px solid rgba(68, 145, 194, .32);

    border-radius: 11px;

    background:
        rgba(1, 12, 25, .66);
}

.pick-display {
    padding:
        0 14px;

    gap: 12px;
}

.target-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-right:
        1px solid rgba(70, 134, 177, .18);

    color: #e8f7ff;

    font-size: 23px;
}

.pick-display strong {
    font-size: 23px;
}

.wager-control {
    display: grid;

    grid-template-columns:
        54px 1fr 54px;
}

.wager-control button {
    height: 100%;

    border: 0;

    background:
        linear-gradient(
            180deg,
            rgba(28, 77, 114, .9),
            rgba(8, 40, 68, .95)
        );

    color: white;

    cursor: pointer;

    font-size: 23px;
}

.wager-control button:first-child {
    border-radius:
        10px 0 0 10px;
}

.wager-control button:last-child {
    border-radius:
        0 10px 10px 0;
}

.wager-control input {
    min-width: 0;

    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    text-align: center;

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

    appearance: textfield;
}

.wager-control input::-webkit-inner-spin-button,
.wager-control input::-webkit-outer-spin-button {
    appearance: none;
}

.quick-bets {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 7px;

    padding:
        9px 18px 0;
}

.quick-bets button {
    min-height: 36px;

    border:
        1px solid rgba(74, 143, 188, .27);

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(22, 61, 91, .9),
            rgba(8, 33, 56, .96)
        );

    color: #eef6fc;

    cursor: pointer;

    font-size: 10px;
}

.quick-bets button.active,
.quick-bets button:hover {
    border-color:
        #28dfff;

    box-shadow:
        0 0 12px rgba(0, 207, 255, .48);

    color: white;
}

.spin-button {
    position: relative;
    z-index: 2;

    width:
        calc(100% - 36px);

    min-height: 69px;

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

    gap: 14px;

    margin:
        14px 18px 0;

    border:
        2px solid #57f1ff;

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #08b5e6,
            #0272c5
        );

    color: white;

    cursor: pointer;

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, .15),
        0 0 9px rgba(18, 230, 255, .88),
        0 0 30px rgba(0, 147, 255, .45);

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

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

    transform:
        translateY(-1px);
}

.spin-button:disabled {
    cursor: wait;

    opacity: .75;

    transform: none;
}

.spin-button strong {
    position: relative;
    z-index: 3;

    font-size: 25px;

    letter-spacing:
        .18em;
}

.spin-icon {
    position: relative;
    z-index: 3;

    font-size: 33px;
}

.button-shine {
    position: absolute;

    top: -80%;
    left: -35%;

    width: 18%;
    height: 250%;

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

    transform:
        rotate(20deg);

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

.spin-caption {
    position: relative;
    z-index: 2;

    margin-top: 10px;

    color: #5d8eab;

    text-align: center;

    font-size: 7px;

    letter-spacing:
        .21em;
}


/* PAYOUT */

.payout-panel {
    grid-area: payout;
}

.payout-table {
    position: relative;
    z-index: 2;

    padding:
        0 14px 14px;
}

.payout-row {
    min-height: 43px;

    display: grid;

    grid-template-columns:
        1.4fr 1.2fr .5fr;

    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid rgba(63, 127, 169, .13);

    color: #89a7be;

    font-size: 9px;
}

.payout-row:last-child {
    border-bottom: 0;
}

.rule-type {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #ecf5fb;
}

.rule-icon {
    color: var(--gold);

    font-size: 19px;
}

.payout-row strong {
    text-align: right;

    font-size: 14px;
}

.gold {
    color: var(--gold2);
}

.blue {
    color: var(--blue);
}


/* RECENT */

.recent-panel {
    grid-area: recent;

    align-self: stretch;
}

.recent-heading {
    align-items: center;
}

.recent-heading small {
    color: #6f9bb7;

    font-size: 8px;

    letter-spacing:
        .15em;
}

.recent-results {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        4px 17px 17px;

    overflow-x: auto;

    scrollbar-width: none;
}

.recent-results::-webkit-scrollbar {
    display: none;
}

.result-chip {
    flex:
        0 0 auto;

    min-width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(85, 145, 186, .35);

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(19, 55, 82, .92),
            rgba(5, 23, 41, .96)
        );

    color: #edf6fc;

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

.gold-chip {
    border-color:
        #ffd029;

    color:
        #ffdf58;

    box-shadow:
        0 0 10px rgba(255, 205, 32, .5);
}

.result-chip.exact {
    border-color: var(--green);

    color: #73ffc1;

    box-shadow:
        0 0 10px rgba(75, 245, 159, .42);
}

.result-chip.neighbor {
    border-color: var(--amber);

    color: #ffdc8a;
}

.result-chip.lose {
    border-color:
        rgba(255, 91, 115, .45);

    color:
        #ff96a6;
}


/* MOBILE NAV */

.mobile-nav {
    display: none;
}

.footer {
    min-height: 66px;

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

    gap: 14px;

    color: #b98d35;

    font-size: 7px;

    letter-spacing:
        .25em;
}

.footer span {
    width: 60px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9b7125
        );
}

.footer span:last-child {
    transform:
        rotate(180deg);
}


/* RESULT STATES */

.result-orb.spinning {
    animation:
        orbSpinPulse .55s ease-in-out infinite alternate;
}

.result-orb.exact {
    border-color:
        #68ffb8;

    box-shadow:
        inset 0 0 60px rgba(71, 255, 166, .15),
        0 0 25px rgba(74, 255, 174, .72),
        0 0 95px rgba(49, 255, 158, .32);
}

.result-orb.neighbor {
    border-color:
        #ffcf58;

    box-shadow:
        inset 0 0 60px rgba(255, 186, 53, .11),
        0 0 25px rgba(255, 195, 61, .58),
        0 0 85px rgba(255, 170, 31, .24);
}

.result-orb.lose {
    border-color:
        rgba(255, 96, 123, .62);

    box-shadow:
        inset 0 0 50px rgba(255, 70, 105, .08),
        0 0 30px rgba(255, 68, 98, .23);
}


/* MODAL */

.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 50;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(0, 4, 11, .76);

    backdrop-filter:
        blur(13px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

.rules-modal {
    width:
        min(470px, 100%);

    padding: 21px;

    border:
        1px solid rgba(38, 195, 255, .42);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 33, 55, .98),
            rgba(1, 12, 25, .99)
        );

    box-shadow:
        0 25px 100px rgba(0, 0, 0, .7);
}

.rules-modal-head {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.rules-modal-head small {
    color: var(--gold);

    font-size: 8px;

    letter-spacing:
        .23em;
}

.rules-modal-head h2 {
    margin: 3px 0 0;

    font-family:
        Georgia,
        serif;
}

.rules-modal-head button {
    width: 38px;
    height: 38px;

    border:
        1px solid rgba(82, 152, 197, .25);

    border-radius: 10px;

    background:
        rgba(2, 14, 28, .75);

    cursor: pointer;

    font-size: 21px;
}

.modal-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        13px 4px;

    border-top:
        1px solid rgba(78, 135, 171, .14);

    color: #86a6bd;

    font-size: 11px;
}

.modal-rule strong {
    color: #e7f0f7;
}


/* TOAST */

.toast {
    position: fixed;

    z-index: 60;

    right: 22px;
    bottom: 22px;

    width:
        min(350px, calc(100vw - 30px));

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding:
        14px 16px;

    border:
        1px solid rgba(0, 211, 255, .33);

    border-radius: 13px;

    background:
        rgba(3, 18, 33, .97);

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .55);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(12px);

    transition:
        all .18s ease;
}

.toast.visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.toast strong {
    font-size: 11px;
}

.toast span {
    color: #7e9bb1;

    font-size: 9px;

    line-height: 1.5;
}


/* TABLET */

@media (max-width: 1100px) {

    .game-board {
        grid-template-columns:
            minmax(280px, .9fr)
            minmax(380px, 1.1fr);

        grid-template-areas:
            "numbers result"
            "numbers bet"
            "recent payout";
    }

    .numbers-panel {
        min-height: 730px;
    }

    .number-scroll {
        height: 630px;
    }
}


/* MOBILE REFERENCE LAYOUT */

@media (max-width: 720px) {

    body {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(0, 115, 255, .16),
                transparent 30%
            ),
            #020711;
    }

    .app-shell {
        width: 100%;

        padding:
            0 10px calc(88px + env(safe-area-inset-bottom));
    }

    .topbar {
        min-height: 78px;

        padding:
            5px 3px;

        gap: 8px;
    }

    .brand {
        gap: 8px;
    }

    .dice-logo {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }

    .dice-logo span {
        font-size: 23px;
    }

    .brand-copy strong {
        font-size: 19px;
    }

    .brand-copy small {
        max-width: 180px;

        font-size: 5px;

        letter-spacing: .19em;
    }

    .balance-box {
        min-height: 45px;

        padding:
            6px 8px;

        gap: 6px;
    }

    .balance-icon {
        display: none;
    }

    .balance-box small {
        font-size: 6px;
    }

    .balance-box strong {
        font-size: 12px;
    }

    .icon-button {
        width: 43px;
        height: 43px;

        font-size: 18px;
    }

    .game-board {
        display: flex;
        flex-direction: column;

        gap: 10px;

        padding-top: 9px;
    }

    .result-zone {
        order: 1;

        min-height: 400px;

        background:
            radial-gradient(
                circle at 50% 44%,
                rgba(0, 122, 255, .16),
                transparent 46%
            );
    }

    .result-caption {
        margin-top: 6px;

        font-size: 12px;
    }

    .orb-stage {
        height: 305px;
    }

    .result-orb {
        width: 210px;
        height: 210px;
    }

    .aura-a {
        width: 245px;
        height: 245px;
    }

    .aura-b {
        width: 282px;
        height: 282px;
    }

    .orb-pedestal {
        width: 260px;
    }

    .numbers-panel {
        order: 2;

        min-height: 0;
    }

    .number-scroll {
        height: 220px;

        margin:
            0 9px;
    }

    .number-grid {
        gap: 6px;
    }

    .number-button {
        min-height: 40px;

        font-size: 11px;
    }

    .bet-panel {
        order: 3;
    }

    .payout-panel {
        order: 4;
    }

    .recent-panel {
        order: 5;
    }

    .panel {
        border-radius: 16px;
    }

    .panel-heading {
        padding:
            13px 14px 8px;
    }

    .step-title {
        gap: 9px;
    }

    .step-title > span {
        width: 28px;
        height: 28px;

        font-size: 14px;
    }

    .step-title h2 {
        font-size: 17px;
    }

    .step-title p {
        font-size: 9px;
    }

    .desktop-helper {
        display: none;
    }

    .bet-fields {
        grid-template-columns:
            1fr 1fr;

        padding:
            2px 14px;
    }

    .quick-bets {
        padding:
            9px 14px 0;
    }

    .spin-button {
        width:
            calc(100% - 28px);

        margin:
            13px 14px 0;

        min-height: 64px;
    }

    .spin-button strong {
        font-size: 22px;
    }

    .payout-table {
        padding:
            0 10px 12px;
    }

    .payout-row {
        grid-template-columns:
            1.35fr 1.1fr .4fr;

        font-size: 8px;
    }

    .recent-results {
        padding:
            3px 13px 14px;
    }

    .result-chip {
        min-width: 40px;
        height: 40px;
    }

    .mobile-nav {
        position: fixed;

        z-index: 25;

        left: 0;
        right: 0;
        bottom: 0;

        display: grid;

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

        padding:
            7px 10px calc(7px + env(safe-area-inset-bottom));

        border-top:
            1px solid rgba(228, 176, 50, .26);

        background:
            rgba(1, 8, 17, .96);

        backdrop-filter:
            blur(18px);
    }

    .mobile-nav button {
        min-height: 53px;

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

        gap: 2px;

        border: 0;

        background: transparent;

        color: #778491;

        font-size: 8px;

        cursor: pointer;
    }

    .mobile-nav button span {
        font-size: 19px;
    }

    .mobile-nav button.active {
        color: var(--gold2);
    }

    .footer {
        display: none;
    }

    .toast {
        right: 15px;
        bottom:
            calc(84px + env(safe-area-inset-bottom));
    }

}


/* SMALL MOBILE */

@media (max-width: 430px) {

    .app-shell {
        padding-left: 7px;
        padding-right: 7px;
    }

    .brand-copy small {
        display: none;
    }

    .balance-box small {
        display: none;
    }

    .balance-box strong {
        font-size: 11px;
    }

    .result-zone {
        min-height: 360px;
    }

    .orb-stage {
        height: 270px;
    }

    .result-orb {
        width: 185px;
        height: 185px;
    }

    .aura-a {
        width: 217px;
        height: 217px;
    }

    .aura-b {
        width: 250px;
        height: 250px;
    }

    .orb-pedestal {
        width: 225px;
    }

    .number-scroll {
        height: 215px;
    }

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

        font-size: 10px;
    }

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

    .wager-control {
        min-height: 48px;
    }

    .payout-row {
        grid-template-columns:
            1.25fr 1fr .45fr;

        gap: 5px;

        font-size: 7.5px;
    }

}


/* MOTION */

@keyframes auraPulse {

    from {
        transform: scale(.97);

        opacity: .65;
    }

    to {
        transform: scale(1.03);

        opacity: 1;
    }

}

@keyframes auraRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes orbSpinPulse {

    from {
        transform: scale(.97);
    }

    to {
        transform: scale(1.025);
    }

}

@keyframes buttonShine {

    0%,
    55% {
        left: -35%;
    }

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

}

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

    *,
    *::before,
    *::after {
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }

}

/* ============================================================
   HORNBILLCASINO_UI_V0.5.1_MOBILE_SPIN_ALIGNMENT
   Scope: mobile-only visual alignment fix for spin placement
   ============================================================ */

@media (max-width: 720px) {

    .result-zone {
        min-height: 340px;
    }

    .orb-stage {
        height: 248px;
    }

    .result-orb {
        width: 182px;
        height: 182px;
    }

    .aura-a {
        width: 214px;
        height: 214px;
    }

    .aura-b {
        width: 246px;
        height: 246px;
    }

    .orb-pedestal {
        width: 228px;
        height: 56px;
        bottom: 2px;
    }

    .pedestal-top {
        height: 24px;
    }

    .result-caption {
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 11px;
    }

    .result-status {
        margin-top: 2px;
    }

    .numbers-panel {
        min-height: 0;
    }

    .number-scroll {
        height: 168px;
        margin: 0 10px;
    }

    .number-grid {
        gap: 6px;
    }

    .number-button {
        min-height: 36px;
        font-size: 10px;
    }

    .scroll-label {
        height: 28px;
        font-size: 6px;
        gap: 8px;
    }

    .bet-panel {
        padding-bottom: 96px;
    }

    .bet-fields {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        padding: 2px 14px;
    }

    .field-group label {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .pick-display,
    .wager-control {
        min-height: 46px;
    }

    .pick-display strong {
        font-size: 20px;
    }

    .wager-control {
        grid-template-columns: 46px 1fr 46px;
    }

    .wager-control button {
        font-size: 20px;
    }

    .wager-control input {
        font-size: 15px;
    }

    .quick-bets {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        padding: 8px 14px 0;
    }

    .quick-bets button {
        min-height: 31px;
        font-size: 9px;
    }

    .spin-button {
        position: sticky;
        bottom: calc(78px + env(safe-area-inset-bottom));
        z-index: 20;
        width: calc(100% - 28px);
        min-height: 58px;
        margin: 12px 14px 0;
        border-radius: 13px;
    }

    .spin-button strong {
        font-size: 21px;
    }

    .spin-icon {
        font-size: 28px;
    }

    .spin-caption {
        margin-top: 8px;
        font-size: 6px;
    }
}

@media (max-width: 430px) {

    .result-zone {
        min-height: 318px;
    }

    .orb-stage {
        height: 226px;
    }

    .result-orb {
        width: 168px;
        height: 168px;
    }

    .aura-a {
        width: 198px;
        height: 198px;
    }

    .aura-b {
        width: 228px;
        height: 228px;
    }

    .orb-pedestal {
        width: 210px;
        height: 52px;
    }

    .number-scroll {
        height: 154px;
    }

    .number-button {
        min-height: 34px;
        font-size: 9px;
    }

    .bet-fields {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pick-display,
    .wager-control {
        min-height: 44px;
    }

    .quick-bets button {
        min-height: 30px;
        font-size: 8px;
    }

    .spin-button {
        min-height: 56px;
    }

    .spin-button strong {
        font-size: 20px;
    }
}

/* ============================================================
   HORNBILLCASINO_UI_V0.5.2_MOBILE_GAMEFLOW
   Real-device layout:
   ORB -> BET/SPIN -> NUMBER GRID -> PAYOUT -> RECENT
   ============================================================ */

@media (max-width: 720px) {

    /*
     * Keep mobile header compact.
     */
    .topbar {
        min-height: 68px;
    }

    /*
     * Result area becomes a compact hero instead of consuming
     * nearly half of the real device viewport.
     */
    .result-zone {
        order: 1;

        min-height: 262px;

        padding-top: 4px;
    }

    .result-caption {
        margin: 0 0 2px;

        font-size: 10px;
    }

    .orb-stage {
        height: 204px;
    }

    .result-orb {
        width: 154px;
        height: 154px;
    }

    .result-orb strong {
        font-size: 50px;
    }

    .orb-reflection {
        top: 18px;
        left: 35px;

        width: 63px;
        height: 23px;
    }

    .aura-a {
        width: 180px;
        height: 180px;
    }

    .aura-b {
        width: 207px;
        height: 207px;
    }

    .orb-pedestal {
        bottom: 1px;

        width: 192px;
        height: 45px;
    }

    .pedestal-top {
        top: -5px;

        height: 21px;
    }

    .pedestal-label {
        bottom: 7px;

        font-size: 5px;
    }

    .result-status {
        min-width: 70px;

        margin-top: 0;

        padding: 5px 9px;
    }

    /*
     * Core gameplay control comes immediately after the result.
     */
    .bet-panel {
        order: 2;

        padding-bottom: 12px;
    }

    .bet-panel .panel-heading {
        padding-bottom: 5px;
    }

    .bet-panel .step-title p {
        display: none;
    }

    .bet-fields {
        grid-template-columns: 1fr 1.15fr;

        gap: 7px;

        padding: 0 11px;
    }

    .field-group label {
        margin-bottom: 3px;

        font-size: 8px;
    }

    .pick-display,
    .wager-control {
        min-height: 40px;
    }

    .pick-display {
        padding: 0 9px;

        gap: 7px;
    }

    .target-icon {
        width: 27px;
        height: 27px;

        font-size: 18px;
    }

    .pick-display strong {
        font-size: 18px;
    }

    .wager-control {
        grid-template-columns:
            39px 1fr 39px;
    }

    .wager-control button {
        font-size: 18px;
    }

    .wager-control input {
        font-size: 14px;
    }

    .quick-bets {
        gap: 5px;

        padding: 7px 11px 0;
    }

    .quick-bets button {
        min-height: 28px;

        padding: 0 2px;

        font-size: 8px;
    }

    /*
     * SPIN is part of the visible game control panel.
     * It is no longer dependent on scrolling to a tall panel.
     */
    .spin-button {
        position: relative;

        bottom: auto;

        width: calc(100% - 22px);

        min-height: 54px;

        margin: 9px 11px 0;

        border-radius: 11px;
    }

    .spin-button strong {
        font-size: 19px;
    }

    .spin-icon {
        font-size: 25px;
    }

    .spin-caption {
        margin-top: 6px;

        font-size: 5px;
    }

    /*
     * Number selector follows betting controls.
     */
    .numbers-panel {
        order: 3;

        min-height: 0;
    }

    .numbers-panel .panel-heading {
        padding-bottom: 5px;
    }

    .number-scroll {
        height: 174px;

        margin: 0 8px;
    }

    .number-grid {
        gap: 5px;
    }

    .number-button {
        min-height: 35px;

        border-radius: 7px;

        font-size: 9px;
    }

    .scroll-label {
        height: 24px;

        gap: 7px;

        font-size: 5px;
    }

    /*
     * Secondary information follows gameplay.
     */
    .payout-panel {
        order: 4;
    }

    .recent-panel {
        order: 5;
    }

    /*
     * Bottom navigation is retained but reduced slightly
     * so it steals less usable viewport height.
     */
    .mobile-nav {
        padding-top: 4px;

        padding-bottom:
            calc(4px + env(safe-area-inset-bottom));
    }

    .mobile-nav button {
        min-height: 45px;

        font-size: 7px;
    }

    .mobile-nav button span {
        font-size: 16px;
    }

    .app-shell {
        padding-bottom:
            calc(66px + env(safe-area-inset-bottom));
    }

    .toast {
        bottom:
            calc(66px + env(safe-area-inset-bottom));
    }
}


@media (max-width: 430px) {

    .topbar {
        min-height: 64px;
    }

    .brand-copy strong {
        font-size: 17px;
    }

    .dice-logo {
        width: 35px;
        height: 35px;
    }

    .balance-box {
        min-height: 39px;
    }

    .icon-button {
        width: 39px;
        height: 39px;
    }

    .result-zone {
        min-height: 245px;
    }

    .orb-stage {
        height: 188px;
    }

    .result-orb {
        width: 143px;
        height: 143px;
    }

    .result-orb strong {
        font-size: 47px;
    }

    .aura-a {
        width: 168px;
        height: 168px;
    }

    .aura-b {
        width: 194px;
        height: 194px;
    }

    .orb-pedestal {
        width: 181px;
        height: 42px;
    }

    .panel-heading {
        padding:
            10px 11px 6px;
    }

    .step-title > span {
        width: 25px;
        height: 25px;

        font-size: 12px;
    }

    .step-title h2 {
        font-size: 15px;
    }

    .step-title p {
        font-size: 7px;
    }

    .bet-fields {
        grid-template-columns:
            .8fr 1.2fr;
    }

    .number-scroll {
        height: 163px;
    }

    .number-button {
        min-height: 33px;

        font-size: 8.5px;
    }

    .spin-button {
        min-height: 51px;
    }

    .spin-button strong {
        font-size: 18px;
    }
}