:root {
    --gold: #ffcc19;
    --gold-light: #ffe982;
    --gold-dark: #be7d00;
    --ink: #07080a;
    --surface: #101114;
    --line: #24262b;
    --muted: #a9adb8;
    --theme-primary: #ffca16;
    --theme-primary-hover: #e9aa00;
    --theme-background: #07080a;
    --theme-secondary-bg: #101114;
    --theme-text: #f7f7f8;
    --theme-text-secondary: #a9adb8;
    --theme-border: #27282d;
    color-scheme: dark;
    font-family: "Nunito Sans", Arial, sans-serif;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
body {
    margin: 0;
    background: radial-gradient(
            ellipse at 45% -20%,
            #35240b55,
            transparent 38%
        ),
        #07080a;
    color: #f7f7f8;
    font-size: 14px;
    line-height: 1.4;
}
button,
input,
select,
textarea {
    font: inherit;
}
button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}
button,
a {
    touch-action: manipulation;
}
button {
    cursor: pointer;
    color: inherit;
}
button {
    border: 0;
}
a {
    color: inherit;
    text-decoration: none;
}
button:disabled {
    opacity: 0.6;
    cursor: wait;
}
img {
    max-width: 100%;
    display: block;
}
h1,
h2,
h3,
h4,
p {
    margin: 0;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}
input,
select,
textarea {
    min-width: 0;
}
input:focus,
select:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px #ffca1615;
}
[hidden],
.hidden {
    display: none !important;
}
.muted {
    color: var(--muted);
}
.gold-text {
    color: var(--gold);
}
.text-link {
    background: none;
    padding: 0;
    color: var(--gold);
    font-weight: 800;
}
.eyebrow {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 900;
}
.gold-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 20px;
    background: linear-gradient(110deg, #ffdc42 0%, #ffc510 50%, #e8a000 100%);
    border: 1px solid #ffe16c;
    border-radius: 12px;
    color: #10100b;
    font-weight: 900;
    box-shadow:
        inset 0 1px 3px #fff7b2a8,
        0 3px 16px #e9a60020;
    transition:
        filter 0.18s,
        transform 0.18s;
}
.gold-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #34353b;
    background: linear-gradient(140deg, #111316, #08090b);
    border-radius: 11px;
    padding: 10px 16px;
    min-height: 38px;
    font-size: 12px;
    font-weight: 800;
}
.outline-button:hover {
    border-color: var(--gold);
}
.icon-button {
    background: none;
    font-size: 20px;
    padding: 8px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    width: 154px;
    line-height: 0.95;
}
.brand svg {
    width: 47px;
    height: 46px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px #e9b21925);
}
.brand span {
    display: flex;
    flex-direction: column;
    letter-spacing: -1px;
    font-weight: 900;
}
.brand strong {
    font-size: 25px;
    font-weight: 1000;
    color: #f6f6f7;
}
.brand b {
    font-size: 20px;
    color: #ffd22a;
    font-weight: 1000;
}
.is-home .brand span {
    font-style: italic;
}
.site-header {
    height: 64px;
    position: relative;
    z-index: 40;
    background: linear-gradient(120deg, #0c0d0f, #060709 60%, #101114);
    border-bottom: 1px solid #9e7019;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 8px 30px #0005;
}
.header-inner {
    height: 100%;
    max-width: 1180px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 0 0;
}
.desktop-links {
    display: flex;
    align-items: center;
    gap: 17px;
    white-space: nowrap;
}
.desktop-links a,
.desktop-links button {
    font-size: 11px;
    font-weight: 800;
    background: none;
    padding: 8px 9px;
    color: #dedee3;
    border: 1px solid transparent;
    border-radius: 22px;
}
.desktop-links .active {
    color: #ffdc45;
    border-color: #715019;
    box-shadow:
        inset 0 0 12px #ffc00010,
        0 0 14px #f4bb0610;
}
.desktop-links a:hover,
.desktop-links button:hover {
    color: var(--gold);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.wallet {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #39372c;
    border-radius: 13px;
    padding: 10px 12px;
    background: linear-gradient(110deg, #08090b, #101113);
    box-shadow: inset 0 0 8px #0009;
    font-size: 12px;
}
.wallet i {
    color: var(--gold);
    font-size: 17px;
}
.wallet strong {
    font-weight: 900;
}
.deposit-button {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: 12px;
    gap: 6px;
}
.deposit-button b {
    font-size: 19px;
    line-height: 1;
}
.bonus-button {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    background: #0b0c0e;
    border: 1px solid #302c22;
    border-radius: 13px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 900;
    color: #ffe16c;
}
.bonus-button i {
    font-size: 16px;
}
.notification-dot {
    width: 7px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 100%;
    background: #f32c35;
}
.desktop-account {
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.desktop-account > i:first-child {
    border: 1px solid #31302a;
    border-radius: 50%;
    padding: 8px;
    color: var(--gold);
    font-size: 16px;
}
.desktop-account .fa-chevron-down {
    font-size: 9px;
}
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: #111316;
    border-radius: 12px;
    font-size: 23px;
}
.user-menu {
    position: absolute;
    right: max(20px, calc((100vw - 1180px) / 2));
    top: 76px;
    background: #111216;
    border: 1px solid #695021;
    border-radius: 18px;
    box-shadow: 0 15px 80px #000e;
    z-index: 90;
    width: min(350px, calc(100% - 32px));
    padding: 12px;
}
.menu-heading {
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    color: var(--gold);
}
.user-menu > a,
.user-menu > button,
.user-menu form button {
    display: flex;
    gap: 13px;
    align-items: center;
    width: 100%;
    padding: 13px 12px;
    border-radius: 9px;
    background: none;
    text-align: left;
}
.user-menu > a:hover,
.user-menu > button:hover {
    background: #ffc5170a;
    color: var(--gold);
}
.user-menu i {
    color: var(--gold);
    width: 20px;
}
.menu-scrim {
    position: fixed;
    inset: 0;
    background: #0009;
    backdrop-filter: blur(3px);
    z-index: 80;
}
.site-main {
    min-height: calc(100vh - 230px);
}
.site-shell {
    width: calc(100% - 56px);
    max-width: 1180px;
    margin: 0 auto;
}
.bottom-nav {
    display: none;
}
.site-footer {
    margin-top: 48px;
    border-top: 1px solid #242222;
    padding: 28px;
    background: #0b0c0e;
}
.footer-inner {
    max-width: 1180px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.footer-inner p {
    font-size: 11px;
    color: #828791;
}
.footer-inner .brand {
    width: 130px;
}
.footer-inner .brand svg {
    width: 35px;
}
.footer-inner .brand strong {
    font-size: 20px;
}
.footer-inner .brand b {
    font-size: 16px;
}
.footer-inner > div {
    display: flex;
    gap: 18px;
}
.footer-inner button {
    font-size: 10px;
    color: #a9adb8;
    background: none;
    padding: 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.trust-item > i {
    font-size: 26px;
    color: var(--gold);
}
.trust-item span {
    min-width: 0;
}
.trust-item strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
}
.trust-item small {
    display: block;
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px;
}
.round-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #a17523;
    border-radius: 50%;
    background: radial-gradient(at 25% 20%, #5a421d66, #0c0d0f);
    color: var(--gold);
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: inset 0 0 10px #f3bd0d10;
}
.rp-panel {
    background: linear-gradient(140deg, #141517, #0b0c0e 80%);
    border: 1px solid #292a2f;
    border-radius: 18px;
    padding: 26px;
}
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.section-heading h2 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.section-heading h2 > i {
    color: var(--gold);
    margin-right: 9px;
}
.section-heading p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
.section-heading .outline-button {
    font-size: 11px;
    min-height: 34px;
}
.home-content {
    padding-top: 20px;
}
.hero {
    position: relative;
    isolation: isolate;
    aspect-ratio: 2.32;
    overflow: hidden;
    border: 1px solid #353333;
    border-radius: 17px;
    background: #08090b url("/assets/raspa/hero.webp") center/cover no-repeat;
}
.hero-copy {
    position: absolute;
    left: 4%;
    top: 7%;
    width: 49%;
}
.hero-tag {
    display: inline-block;
    border: 1px solid #b89839;
    border-radius: 20px;
    padding: 2px 11px;
    line-height: 1;
    color: #ffe373;
    font-size: clamp(10px, 1.55vw, 16px);
    font-weight: 900;
    box-shadow: 0 0 15px #ffd01915;
}
.hero h1 {
    font-size: clamp(22px, 4.55vw, 53px);
    line-height: 1.05;
    font-style: italic;
    letter-spacing: -1.1px;
    font-weight: 1000;
    text-shadow: 0 2px 4px #0009;
    margin-top: 5px;
}
.hero h1 em {
    font-style: inherit;
    color: #ffe16d;
}
.hero-copy > p {
    font-size: clamp(10px, 1.8vw, 19px);
    line-height: 1.3;
    max-width: 80%;
    color: #d5d8e0;
    margin-top: 7px;
}
.hero .gold-button {
    margin-top: 14px;
    border-radius: 30px;
    min-height: 42px;
    font-size: 16px;
    padding: 9px 22px;
    gap: 9px;
}
.hero-trust {
    position: absolute;
    left: 4%;
    bottom: 5%;
    display: flex;
    gap: 24px;
    width: 58%;
}
.hero-trust .trust-item {
    gap: 8px;
}
.hero-trust .trust-item > i {
    font-size: 23px;
}
.hero-trust .trust-item strong {
    font-size: 9px;
}
.hero-trust .trust-item small {
    font-size: 8px;
}
.live-winners {
    border: 1px solid #26272b;
    border-radius: 15px;
    margin: 12px 0 15px;
    padding: 9px;
    background: linear-gradient(110deg, #101114, #08090b);
}
.live-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b9bdc8;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}
.live-heading > a {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: #d8d9df;
}
.live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff3bb;
    background: #674a0b99;
    border: 1px solid #665019;
    border-radius: 18px;
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.3;
}
.live-badge i {
    color: var(--gold);
    font-size: 15px;
}
.winner-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}
.winner-mini {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #34353b;
    border-radius: 12px;
    padding: 9px 13px;
    background: #090b0d;
}
.winner-mini img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px #000);
}
.winner-mini strong,
.winner-mini b,
.winner-mini small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
}
.winner-mini strong {
    color: #b6bdca;
    font-weight: 800;
}
.winner-mini b {
    color: #ffe346;
    font-weight: 900;
    margin: 2px 0;
}
.winner-mini small {
    color: #818795;
    font-size: 9px;
}
.winner-mini-empty {
    grid-column: 1/-1;
    font-size: 12px;
    color: var(--muted);
    padding: 12px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.category-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 0 0 16px;
}
.category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 65px;
    border: 1px solid #23252a;
    border-radius: 15px;
    background: linear-gradient(140deg, #111316, #0b0c0e);
    color: #b6bdc9;
    min-width: 0;
    font-size: 11px;
    transition: border-color 0.2s;
}
.category i {
    font-size: 22px;
}
.category.active {
    color: #ffda44;
    border-color: #d2a431;
    box-shadow:
        0 0 16px #ffc70018,
        inset 0 0 25px #a46b001a;
}
.category.active span {
    color: #f9eed0;
}
.game-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.game-card {
    padding: 9px;
    position: relative;
    border: 1px solid #3d302b;
    border-radius: 17px;
    background: linear-gradient(140deg, #1b1111, #0c0d0f);
    min-width: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px #101113;
}
.game-card[data-art="1"] {
    border-color: #293f27;
    background: linear-gradient(140deg, #142118, #0b0e0d);
}
.game-card[data-art="2"] {
    border-color: #452b40;
    background: linear-gradient(140deg, #241224, #0c0d0f);
}
.game-card-art {
    aspect-ratio: 1.48;
    background-image: url("/assets/raspa/game-art.webp");
    background-size: 300% auto;
    background-position: left top;
    border-radius: 10px 10px 0 0;
    margin: -4px -4px -12px;
    position: relative;
}
.game-card[data-art="1"] .game-card-art {
    background-position: center top;
}
.game-card[data-art="2"] .game-card-art {
    background-position: right top;
}
.game-card-art:after {
    content: "";
    position: absolute;
    inset: 50% 0 -15px;
    background: linear-gradient(transparent, #0d0e10);
}
.card-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    background: #fa141c;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    border-radius: 7px;
    padding: 5px 9px;
    z-index: 1;
    box-shadow: 0 0 15px #f00b;
}
.game-card-info {
    padding: 0 3px;
    position: relative;
}
.game-card-info > small {
    font-weight: 800;
    font-size: 12px;
    line-height: 1.1;
}
.game-card h3 {
    font-size: 21px;
    font-weight: 1000;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 1px 0 5px;
}
.game-card-info > p {
    font-size: 12px;
    color: #b9bfca;
    line-height: 1.15;
    min-height: 28px;
}
.game-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: 10px 0;
}
.price-pill {
    border: 1px solid #a37c25;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 900;
    background: #07090a;
    white-space: nowrap;
}
.card-prize {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}
.card-prize small {
    display: block;
    color: #ffe055;
    font-size: 9px;
}
.game-card .gold-button {
    width: 100%;
    border-radius: 10px;
    min-height: 38px;
    padding: 8px;
    font-size: 13px;
}
.catalog-extra {
    margin-top: 16px;
}
.empty-category {
    padding: 35px;
    text-align: center;
    border: 1px solid #3a3020;
    border-radius: 16px;
    margin: 12px 0;
    color: var(--muted);
}
.promo-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #ac7e29;
    border-radius: 15px;
    margin: 16px 0;
    padding: 16px 20px;
    background: radial-gradient(at 10% 45%, #ba770b88, transparent 35%),
        linear-gradient(110deg, #1c1309, #08090b 70%);
    min-height: 108px;
    box-shadow: inset 0 0 24px #bb8c0710;
}
.promo-trophy {
    color: #ffcb3c;
    font-size: 72px;
    filter: drop-shadow(0 0 12px #e9a11a88);
    transform: rotate(-12deg);
    margin: 0 15px;
}
.promo-text {
    flex: 1;
}
.promo-text small {
    font-size: 10px;
    letter-spacing: 0.5px;
    font-weight: 900;
    color: #e4e0d5;
}
.promo-text h2 {
    font-size: clamp(15px, 3vw, 28px);
    font-style: italic;
    font-weight: 1000;
    line-height: 1.05;
    color: #ffe476;
    max-width: 350px;
    letter-spacing: -0.4px;
}
.promo-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #f0d368;
    font-weight: 900;
}
.promo-action .gold-button {
    font-size: 11px;
    min-height: 38px;
    padding: 8px 16px;
}
.how-section {
    margin: 14px 0 12px;
    scroll-margin-top: 30px;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.step-card {
    background: linear-gradient(140deg, #121416, #0c0e11);
    border: 1px solid #24262b;
    border-radius: 13px;
    display: flex;
    gap: 10px;
    padding: 16px 12px;
    align-items: flex-start;
    min-width: 0;
}
.step-card .round-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
}
.step-card h3 {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    margin: 3px 0 5px;
}
.step-card p {
    color: #afb5c0;
    font-size: 11px;
    line-height: 1.25;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(140deg, #121416, #090b0e);
    border: 1px solid #24252a;
    border-radius: 12px;
    min-width: 0;
}
.benefit > i {
    background: #201d11;
    color: var(--gold);
    font-size: 23px;
    border-radius: 50%;
    padding: 8px;
}
.benefit strong {
    display: block;
    font-size: 10px;
    font-weight: 900;
}
.benefit small {
    display: block;
    font-size: 9px;
    color: #b1b6c1;
    margin-top: 2px;
}
.rp-modal {
    position: fixed;
    inset: 0;
    background: #000b;
    backdrop-filter: blur(9px);
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}
.modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 40px);
    overflow: auto;
    background: radial-gradient(ellipse at 20% 0, #6a491421, transparent 45%),
        #101114;
    border: 1px solid #8f6e29;
    border-radius: 23px;
    padding: 30px;
    box-shadow:
        0 0 55px #000a,
        inset 0 1px 0 #d4a64022;
}
.modal-close {
    position: absolute;
    top: 9px;
    right: 13px;
    background: none;
    font-size: 27px;
    color: #b8bdc6;
    line-height: 1;
    padding: 6px;
    z-index: 2;
}
.modal-brand {
    margin: 0 0 22px;
}
.modal-card h2 {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 1000;
    letter-spacing: -0.5px;
    margin: 7px 0 15px;
}
.modal-card > .muted {
    font-size: 13px;
}
.rp-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}
.rp-form > label,
.rp-form > div > label {
    font-weight: 800;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.rp-form input:not([type="checkbox"]):not([type="radio"]),
.rp-form select,
.referral-input {
    width: 100%;
    min-height: 47px;
    border: 1px solid #32343b;
    background: #090b0e;
    color: #f4f4f7;
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.2s;
}
.rp-form input::placeholder {
    color: #686e79;
}
.rp-form .check-label {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    font-size: 11px;
    font-weight: 500;
    color: #a9adb8;
    line-height: 1.45;
}
.check-label input {
    accent-color: var(--gold);
    margin: 2px 0 0;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.check-label .text-link {
    font-weight: 700;
    font-size: inherit;
}
.form-feedback {
    padding: 10px 12px;
    border: 1px solid #a23a34;
    background: #571e1e33;
    border-radius: 9px;
    color: #ffb4af;
    font-size: 12px;
}
.form-feedback.success {
    color: #a3f3b8;
    border-color: #2b7a42;
    background: #1b552a33;
}
.form-switch {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin-top: 20px;
}
.modal-emblem {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 25px;
    background: #ffd02212;
    border: 1px solid #b88827;
}
.deposit-presets {
    display: flex;
    gap: 8px;
}
.deposit-presets button {
    flex: 1;
    padding: 9px 4px;
    background: #d9ae1912;
    border: 1px solid #6e541b;
    color: #ffe16b;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
}
.deposit-presets .selected {
    background: #d9ae1933;
    border-color: var(--gold);
}
.secure-note {
    font-size: 11px;
    color: #9198a6;
    text-align: center;
    margin-top: 19px;
}
.secure-note i {
    color: var(--gold);
    margin-right: 5px;
}
.bonus-notice {
    background: #f5bf1512;
    border-radius: 8px;
    color: #ffdb5d;
    padding: 9px;
    font-size: 12px;
}
.qr-card {
    text-align: center;
}
.qr-card #qrCodeImage {
    width: 240px;
    margin: 22px auto;
    border: 12px solid white;
    border-radius: 12px;
}
.qr-card .gold-button {
    width: 100%;
}
#infoContent p {
    margin: 10px 0;
    line-height: 1.65;
}
.content-page {
    width: calc(100% - 56px);
    max-width: 1120px;
    margin: 30px auto;
}
.page-banner {
    border: 1px solid #6a5125;
    border-radius: 20px;
    padding: 30px;
    background: radial-gradient(at 100% 20%, #b074102f, transparent 45%),
        linear-gradient(120deg, #18150e, #0b0d10);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.page-banner:after {
    content: "♛";
    position: absolute;
    right: 30px;
    top: -45px;
    font-size: 230px;
    color: #f1bd0b08;
    pointer-events: none;
    transform: rotate(15deg);
}
.page-banner h1 {
    font-size: 32px;
    font-weight: 1000;
    letter-spacing: -0.5px;
    margin: 6px 0;
}
.page-banner h1 > i {
    color: var(--gold);
    margin-right: 10px;
}
.page-banner p {
    color: #b8bdc8;
    max-width: 680px;
    font-size: 13px;
}
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9ea5b1;
    font-size: 12px;
    margin-bottom: 14px;
}
.page-breadcrumb i:first-child {
    color: var(--gold);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.stat-card {
    padding: 20px;
    border: 1px solid #2b2b2d;
    border-radius: 15px;
    background: linear-gradient(140deg, #151618, #0b0d10);
    min-width: 0;
}
.stat-card > i {
    display: grid;
    place-items: center;
    border: 1px solid #85601d;
    background: #2c2515;
    color: #ffd02b;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px;
    margin-bottom: 16px;
}
.stat-card > strong {
    display: block;
    font-size: 25px;
    font-weight: 1000;
    letter-spacing: -0.5px;
}
.stat-card > small {
    font-size: 12px;
    color: #a5aab5;
}
.stat-card.highlight {
    border-color: #ad802a;
    background: radial-gradient(at 90% 0, #9a681433, transparent 70%), #111214;
}
.stat-card.highlight > strong {
    color: #ffdc50;
}
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 22px 0;
}
.panel-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
}
.panel-heading i {
    color: var(--gold);
}
.referral-row {
    display: flex;
    gap: 10px;
}
.referral-row input {
    flex: 1;
    font-size: 12px;
}
.referral-row button {
    white-space: nowrap;
}
.share-row {
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 18px;
}
.share-row p {
    color: var(--muted);
    font-size: 11px;
    margin-right: auto;
}
.share-row button {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    border: 1px solid #3e3827;
    background: #1b1810;
    color: #ffd642;
    font-size: 17px;
}
.share-row button:hover {
    border-color: var(--gold);
}
.numbered-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.numbered-steps > div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b0b7c3;
    font-size: 12px;
}
.numbered-steps b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #84631e;
    background: #2c2414;
    color: var(--gold);
    flex-shrink: 0;
}
.performance-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #26282c;
    padding: 11px 0;
    color: #a9b0bb;
    font-size: 13px;
}
.performance-row b {
    color: #fff;
}
.performance-row b.gold-text {
    color: var(--gold);
}
.withdraw-hint {
    text-align: center;
    margin-top: 20px;
    color: #a7adb8;
    font-size: 12px;
}
.withdraw-hint span {
    display: block;
    color: #ffdb5a;
    margin-top: 4px;
}
.data-table-wrap {
    overflow: auto;
    border: 1px solid #282a2e;
    border-radius: 13px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 12px;
}
.data-table thead {
    background: #1a1a19;
}
.data-table th {
    text-align: left;
    padding: 15px;
    color: #c6bd9b;
    font-size: 10px;
    letter-spacing: 0.4px;
}
.data-table td {
    padding: 15px;
    border-top: 1px solid #27282c;
    color: #d2d5de;
}
.data-table .amount {
    color: #ffe06d;
    font-weight: 900;
}
.empty-state {
    padding: 38px 20px;
    text-align: center;
    color: #959da9;
}
.empty-state > i {
    font-size: 34px;
    color: #8e702e;
    margin-bottom: 14px;
    display: block;
}
.empty-state strong {
    font-size: 15px;
    color: #d9dce2;
    display: block;
}
.empty-state p {
    margin-top: 6px;
    font-size: 12px;
}
.pagination {
    margin-top: 20px;
}
.pagination svg {
    width: 20px;
    height: 20px;
}
.profile-summary {
    text-align: center;
}
.avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 15px;
    border: 1px solid #ffd953;
    border-radius: 50%;
    color: #10100c;
    background: linear-gradient(140deg, #ffdf63, #b77b04);
    font-size: 30px;
    font-weight: 1000;
    box-shadow: 0 0 30px #ffba001a;
}
.profile-summary h2 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 20px;
}
.account-data {
    text-align: left;
    border-top: 1px solid var(--line);
    padding: 15px 0;
}
.account-data small {
    display: block;
    color: #969daa;
    font-size: 11px;
    margin-bottom: 5px;
}
.account-data strong {
    font-size: 14px;
    overflow-wrap: anywhere;
}
.account-data .balance-large {
    font-size: 25px;
    color: var(--gold);
}
.account-links {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.account-links a {
    flex: 1;
    font-size: 12px;
}
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.balance-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.balance-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #3a3525;
    border-radius: 10px;
    padding: 13px;
    background: #0d0e10;
    font-size: 12px;
    color: #c8ccd3;
    cursor: pointer;
}
.balance-options input {
    accent-color: var(--gold);
}
.status-pill {
    font-size: 10px;
    color: #ffdb53;
    border: 1px solid #75611f;
    background: #8d691519;
    border-radius: 20px;
    padding: 4px 9px;
}
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 170px);
    padding: 40px 20px;
    background: radial-gradient(at 15% 20%, #8c591713, transparent 30%),
        radial-gradient(at 85% 80%, #8c591713, transparent 30%);
}
.auth-page .rp-panel {
    max-width: 460px;
    width: 100%;
    border-color: #6e5428;
    padding: 32px;
}
.auth-page h1 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 1000;
    margin: 8px 0;
}
.auth-page > .rp-panel > p {
    margin-bottom: 25px;
}
.auth-icon {
    font-size: 30px;
    color: var(--gold);
    margin-bottom: 16px;
}
.alert {
    padding: 13px 16px;
    border: 1px solid #735b27;
    background: #6c4b111a;
    border-radius: 11px;
    color: #f9d963;
    font-size: 12px;
    margin-bottom: 20px;
}
.alert.error {
    color: #ffaaa5;
    border-color: #72322c;
    background: #60282522;
}
.winners-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.winner-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #4b3d24;
    border-radius: 15px;
    padding: 20px;
    background: radial-gradient(at 0 0, #7c531a20, transparent 70%), #101114;
}
.winner-card > i {
    color: #ffd448;
    font-size: 30px;
}
.winner-card strong,
.winner-card b,
.winner-card small {
    display: block;
}
.winner-card b {
    color: var(--gold);
    font-size: 21px;
    font-weight: 1000;
    margin: 4px 0;
}
.winner-card small {
    color: #919aa8;
    font-size: 11px;
}
.text-center {
    text-align: center;
}
.full-width {
    width: 100%;
}
@media (min-width: 1440px) {
    .header-inner {
        max-width: 1280px;
    }
    .desktop-links {
        gap: 24px;
    }
}
@media (max-width: 1230px) {
    .header-inner {
        padding: 0 25px;
        gap: 15px;
    }
    .desktop-links {
        gap: 4px;
    }
    .desktop-links a,
    .desktop-links button {
        font-size: 10px;
        padding: 8px;
    }
    .header-actions {
        gap: 8px;
    }
    .bonus-button {
        display: none;
    }
    .brand {
        width: 148px;
    }
}
@media (max-width: 1000px) {
    .desktop-links,
    .desktop-account {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
    .site-header {
        height: 64px;
    }
    .header-inner {
        max-width: none;
    }
    .wallet {
        font-size: 14px;
    }
    .deposit-button {
        font-size: 14px;
        min-height: 40px;
    }
    .is-home .site-footer {
        display: none;
    }
    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: start;
        position: fixed;
        z-index: 60;
        bottom: 0;
        left: 0;
        right: 0;
        height: 88px;
        padding: 13px 8px calc(16px + env(safe-area-inset-bottom));
        border: 1px solid #363942;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        background: linear-gradient(155deg, #161a20, #090b0e 65%);
        box-shadow: 0 -10px 35px #0008;
    }
    .bottom-nav > a,
    .bottom-nav > button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: #adb5c5;
        background: none;
        font-size: 11px;
        font-weight: 600;
        min-width: 0;
    }
    .bottom-nav i {
        font-size: 25px;
        line-height: 1.1;
    }
    .bottom-nav .active {
        color: #ffd12a;
        text-shadow: 0 0 20px #ffc70055;
    }
    .bottom-nav:after {
        content: "";
        position: absolute;
        bottom: 10px;
        left: 39%;
        width: 22%;
        height: 4px;
        background: #e6e7ea;
        border-radius: 5px;
    }
    .site-main {
        padding-bottom: 106px;
    }
    .site-footer {
        margin-bottom: 75px;
    }
    .stats-grid {
        gap: 12px;
    }
    .stat-card {
        padding: 16px;
    }
    .stat-card > strong {
        font-size: 22px;
    }
    .steps-grid {
        gap: 8px;
    }
    .step-card {
        padding: 12px 10px;
        gap: 8px;
    }
    .step-card .round-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    .step-card h3 {
        font-size: 10px;
    }
    .step-card p {
        font-size: 10px;
    }
    .benefit {
        padding: 10px 8px;
        gap: 8px;
    }
    .benefit > i {
        font-size: 20px;
        padding: 6px;
    }
    .benefit strong {
        font-size: 9px;
    }
    .benefit small {
        font-size: 8px;
    }
    .hero .gold-button {
        font-size: 14px;
        min-height: 40px;
        margin-top: 10px;
    }
    .hero-trust {
        gap: 13px;
    }
    .winners-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 760px) {
    .site-header {
        height: 56px;
        border-radius: 0 0 20px 20px;
    }
    .header-inner {
        padding: 0 28px;
    }
    .brand {
        width: 146px;
        gap: 4px;
    }
    .brand svg {
        height: 42px;
        width: 44px;
    }
    .brand strong {
        font-size: 24px;
    }
    .brand b {
        font-size: 19px;
    }
    .menu-toggle {
        background: transparent;
        width: 40px;
        height: 40px;
        font-size: 25px;
        margin-left: 13px;
    }
    .header-actions {
        gap: 12px;
    }
    .wallet {
        font-size: 13px;
        padding: 8px 11px;
        border-radius: 14px;
        gap: 8px;
    }
    .deposit-button {
        font-size: 13px;
        padding: 7px 14px;
        min-height: 38px;
    }
    .site-main {
        padding-bottom: 100px;
    }
    .home-content {
        padding-top: 0;
    }
    .hero-copy {
        top: 7%;
    }
    .hero h1 {
        font-size: 4.55vw;
        letter-spacing: -0.6px;
    }
    .hero-copy > p {
        font-size: 1.8vw;
        max-width: 90%;
        margin-top: 5px;
    }
    .hero .gold-button {
        font-size: 1.95vw;
        padding: 7px 18px;
        min-height: 5.7vw;
        margin-top: 9px;
    }
    .hero-tag {
        font-size: 1.55vw;
    }
    .hero-trust {
        width: 58%;
        gap: 13px;
        bottom: 5%;
    }
    .hero-trust .trust-item {
        gap: 7px;
    }
    .hero-trust .trust-item > i {
        font-size: 2.6vw;
    }
    .hero-trust .trust-item strong {
        font-size: 1.25vw;
    }
    .hero-trust .trust-item small {
        font-size: 1vw;
        line-height: 1.1;
    }
    .live-winners {
        margin: 11px 0 15px;
        padding: 8px;
    }
    .winner-mini {
        padding: 7px 9px;
        gap: 8px;
        min-width: 0;
    }
    .winner-mini img {
        width: 29px;
        height: 29px;
    }
    .winner-mini strong,
    .winner-mini b {
        font-size: 10px;
    }
    .winner-mini small {
        font-size: 9px;
    }
    .section-heading h2 {
        font-size: 21px;
    }
    .category-list {
        gap: 9px;
        margin-bottom: 16px;
    }
    .category {
        min-height: 60px;
        font-size: 10px;
        gap: 5px;
        border-radius: 13px;
    }
    .category i {
        font-size: 21px;
    }
    .game-cards {
        gap: 12px;
    }
    .game-card {
        padding: 8px;
    }
    .game-card h3 {
        font-size: 17px;
    }
    .game-card-info > small {
        font-size: 11px;
    }
    .game-card-info > p {
        font-size: 11px;
        min-height: 26px;
    }
    .game-card-bottom {
        margin: 9px 0;
    }
    .game-card .gold-button {
        font-size: 12px;
        min-height: 35px;
        padding: 7px 4px;
    }
    .price-pill {
        font-size: 11px;
        padding: 2px 6px;
    }
    .card-prize {
        font-size: 10px;
    }
    .card-prize small {
        font-size: 8px;
    }
    .card-tag {
        font-size: 9px;
        padding: 4px 6px;
    }
    .promo-banner {
        gap: 8px;
        padding: 12px 14px;
        margin: 16px 0;
        min-height: 103px;
    }
    .promo-trophy {
        font-size: 66px;
        margin: 0 10px;
    }
    .promo-text h2 {
        font-size: 3.1vw;
        max-width: 270px;
    }
    .promo-text small {
        font-size: 8px;
    }
    .promo-action {
        font-size: 8px;
    }
    .promo-action .gold-button {
        font-size: 9px;
        padding: 8px 12px;
        min-height: 37px;
    }
    .how-section .section-heading {
        margin-bottom: 8px;
    }
    .how-section .section-heading p {
        font-size: 12px;
    }
    .steps-grid {
        gap: 8px;
    }
    .step-card {
        padding: 13px 9px;
        gap: 9px;
    }
    .step-card .round-icon {
        width: 39px;
        height: 39px;
        font-size: 21px;
    }
    .step-card h3 {
        font-size: 10px;
    }
    .step-card p {
        font-size: 9px;
    }
    .benefits-grid {
        gap: 9px;
        margin-top: 11px;
    }
    .benefit {
        gap: 8px;
        padding: 9px 7px;
    }
    .benefit > i {
        font-size: 21px;
        padding: 6px;
    }
    .benefit strong {
        font-size: 9px;
    }
    .benefit small {
        font-size: 9px;
    }
    .bottom-nav {
        height: 88px;
        padding-top: 12px;
    }
    .bottom-nav i {
        font-size: 25px;
    }
    .bottom-nav > a {
        font-size: 11px;
    }
    .content-page {
        margin-top: 20px;
    }
    .page-banner {
        padding: 23px;
    }
    .page-banner h1 {
        font-size: 27px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .two-column {
        grid-template-columns: 1fr;
    }
    .stat-card > strong {
        font-size: 25px;
    }
    .field-grid {
        gap: 14px;
    }
    .footer-inner {
        flex-wrap: wrap;
    }
    .footer-inner > div {
        gap: 12px;
    }
    .winners-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .winner-card {
        padding: 14px;
        gap: 10px;
    }
    .winner-card b {
        font-size: 19px;
    }
}
@media (max-width: 540px) {
    .site-shell,
    .content-page {
        width: calc(100% - 28px);
    }
    .header-inner {
        padding: 0 14px;
        gap: 8px;
    }
    .brand {
        width: 116px;
        gap: 3px;
    }
    .brand svg {
        width: 34px;
        height: 36px;
    }
    .brand strong {
        font-size: 19px;
        letter-spacing: -0.6px;
    }
    .brand b {
        font-size: 15px;
        letter-spacing: -0.4px;
    }
    .header-actions {
        gap: 7px;
    }
    .wallet {
        font-size: 10px;
        gap: 5px;
        padding: 8px;
        border-radius: 10px;
    }
    .wallet i {
        font-size: 14px;
    }
    .deposit-button {
        padding: 7px 9px;
        min-height: 34px;
        font-size: 11px;
        gap: 4px;
        border-radius: 10px;
    }
    .deposit-button b {
        font-size: 16px;
    }
    .menu-toggle {
        margin: 0;
        width: 30px;
        font-size: 22px;
    }
    .login-button {
        padding: 7px 10px;
        font-size: 11px;
        min-height: 33px;
    }
    .register-button {
        font-size: 11px;
        min-height: 33px;
        padding: 7px 10px;
    }
    .hero {
        border-radius: 12px;
        aspect-ratio: 2.25;
    }
    .hero-copy {
        top: 6%;
        width: 50%;
        left: 4%;
    }
    .hero h1 {
        font-size: 4.7vw;
        letter-spacing: -0.5px;
        line-height: 1.08;
        margin-top: 3px;
    }
    .hero-tag {
        font-size: 1.7vw;
        padding: 2px 6px;
    }
    .hero-copy > p {
        font-size: 1.85vw;
        margin-top: 3px;
        line-height: 1.25;
    }
    .hero .gold-button {
        font-size: 2vw;
        border-radius: 20px;
        padding: 4px 10px;
        min-height: 6vw;
        margin-top: 6px;
        gap: 5px;
    }
    .hero-trust {
        gap: 7px;
        bottom: 5%;
        width: 58%;
    }
    .hero-trust .trust-item {
        gap: 4px;
    }
    .hero-trust .trust-item > i {
        font-size: 2.8vw;
    }
    .hero-trust .trust-item strong {
        font-size: 1.2vw;
        white-space: nowrap;
    }
    .hero-trust .trust-item small {
        font-size: 0.95vw;
    }
    .live-winners {
        padding: 6px;
        margin: 8px 0 11px;
        border-radius: 11px;
    }
    .live-heading {
        font-size: 9px;
        gap: 7px;
        margin-bottom: 6px;
    }
    .live-badge {
        font-size: 8px;
        padding: 2px 6px;
        gap: 5px;
    }
    .live-badge i {
        font-size: 10px;
    }
    .live-heading > a {
        font-size: 8px;
    }
    .winner-strip {
        gap: 5px;
        grid-template-columns: repeat(2, 1fr);
    }
    .winner-mini {
        padding: 5px 7px;
        gap: 7px;
        border-radius: 8px;
    }
    .winner-mini img {
        width: 26px;
        height: 26px;
    }
    .winner-mini strong,
    .winner-mini b {
        font-size: 9px;
    }
    .winner-mini small {
        font-size: 8px;
    }
    .category-list {
        gap: 5px;
        margin-bottom: 13px;
    }
    .category {
        min-height: 45px;
        font-size: 7px;
        border-radius: 9px;
        gap: 4px;
    }
    .category i {
        font-size: 17px;
    }
    .section-heading {
        margin-bottom: 9px;
    }
    .section-heading h2 {
        font-size: 18px;
    }
    .section-heading p {
        font-size: 10px;
        line-height: 1.2;
    }
    .section-heading .outline-button {
        min-height: 28px;
        padding: 6px 9px;
        font-size: 8px;
        border-radius: 9px;
        gap: 6px;
    }
    .game-cards {
        gap: 7px;
    }
    .game-card {
        border-radius: 12px;
        padding: 6px;
    }
    .game-card-art {
        margin: -3px -3px -5px;
        border-radius: 8px 8px 0 0;
        aspect-ratio: 1.13;
    }
    .game-card-art:after {
        inset: 60% 0 -10px;
    }
    .game-card-info {
        padding: 0;
    }
    .game-card-info > small {
        font-size: 8px;
    }
    .game-card h3 {
        font-size: 12px;
        line-height: 1.12;
        letter-spacing: -0.2px;
        margin: 1px 0 4px;
        min-height: 27px;
        overflow-wrap: normal;
    }
    .game-card-info > p {
        font-size: 8px;
        line-height: 1.2;
        min-height: 19px;
    }
    .game-card-bottom {
        gap: 3px;
        margin: 7px 0;
        flex-wrap: wrap;
        min-height: 35px;
    }
    .price-pill {
        font-size: 9px;
        padding: 1px 5px;
    }
    .card-prize {
        font-size: 8px;
    }
    .card-prize small {
        font-size: 7px;
    }
    .game-card .gold-button {
        font-size: 8px;
        border-radius: 7px;
        min-height: 27px;
        padding: 5px 2px;
        gap: 4px;
    }
    .card-tag {
        font-size: 6px;
        left: 5px;
        top: 5px;
        padding: 3px 4px;
        border-radius: 5px;
    }
    .promo-banner {
        padding: 10px 8px;
        min-height: 75px;
        border-radius: 11px;
        gap: 5px;
        margin: 12px 0;
    }
    .promo-trophy {
        font-size: 39px;
        margin: 0 6px;
    }
    .promo-text h2 {
        font-size: 3.25vw;
        letter-spacing: -0.25px;
    }
    .promo-text small {
        font-size: 6px;
        letter-spacing: 0;
    }
    .promo-action {
        font-size: 6px;
        gap: 5px;
    }
    .promo-action .gold-button {
        font-size: 7px;
        padding: 6px 7px;
        min-height: 28px;
        border-radius: 8px;
    }
    .how-section .section-heading p {
        font-size: 10px;
    }
    .steps-grid {
        gap: 6px;
        grid-template-columns: repeat(2, 1fr);
    }
    .step-card {
        padding: 11px 8px;
        gap: 8px;
        border-radius: 10px;
    }
    .step-card .round-icon {
        width: 31px;
        height: 31px;
        font-size: 16px;
    }
    .step-card h3 {
        font-size: 10px;
        margin-top: 0;
    }
    .step-card p {
        font-size: 9px;
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-top: 8px;
    }
    .benefit {
        padding: 9px 8px;
        gap: 7px;
        border-radius: 10px;
    }
    .benefit > i {
        font-size: 17px;
    }
    .benefit strong {
        font-size: 9px;
    }
    .benefit small {
        font-size: 8px;
    }
    .bottom-nav {
        height: 77px;
        border-radius: 16px 16px 0 0;
        padding: 11px 3px 18px;
    }
    .bottom-nav > a,
    .bottom-nav > button {
        font-size: 9px;
        gap: 6px;
    }
    .bottom-nav i {
        font-size: 22px;
    }
    .bottom-nav:after {
        height: 3px;
        bottom: 7px;
        left: 37%;
        width: 26%;
    }
    .site-main {
        padding-bottom: 91px;
    }
    .page-banner {
        padding: 20px 17px;
        border-radius: 15px;
    }
    .page-banner h1 {
        font-size: 25px;
    }
    .page-banner p {
        font-size: 12px;
    }
    .page-banner .eyebrow {
        font-size: 8px;
    }
    .stats-grid {
        gap: 9px;
    }
    .stat-card {
        padding: 16px 13px;
    }
    .stat-card > strong {
        font-size: 23px;
    }
    .stat-card > small {
        font-size: 10px;
    }
    .stat-card > i {
        width: 33px;
        height: 33px;
        font-size: 16px;
        margin-bottom: 12px;
    }
    .rp-panel {
        padding: 19px;
        border-radius: 15px;
    }
    .panel-heading {
        font-size: 18px;
    }
    .referral-row {
        flex-direction: column;
    }
    .referral-row .gold-button {
        width: 100%;
    }
    .share-row p {
        font-size: 9px;
    }
    .share-row {
        gap: 6px;
    }
    .share-row button {
        width: 31px;
        height: 31px;
    }
    .field-grid {
        grid-template-columns: 1fr;
    }
    .balance-options label {
        padding: 11px 9px;
        font-size: 11px;
    }
    .winners-cards {
        grid-template-columns: 1fr;
    }
    .modal-card {
        padding: 25px 21px;
        border-radius: 18px;
    }
    .modal-card h2 {
        font-size: 24px;
    }
    .rp-form input:not([type="checkbox"]):not([type="radio"]),
    .rp-form select {
        font-size: 16px;
    }
    .modal-card .rp-form {
        gap: 14px;
    }
    .site-footer {
        margin-top: 10px;
        padding: 22px 18px;
    }
    .footer-inner {
        gap: 20px;
    }
    .footer-inner > div {
        flex-wrap: wrap;
    }
    .auth-page {
        padding: 25px 14px;
        min-height: calc(100vh - 150px);
    }
    .auth-page .rp-panel {
        padding: 25px 21px;
    }
    .auth-page h1 {
        font-size: 25px;
    }
    .auth-page > .rp-panel > p {
        font-size: 12px;
    }
    .account-links {
        flex-wrap: wrap;
    }
    .account-links a {
        min-width: 120px;
    }
    .rp-modal {
        padding: 13px;
    }
    .modal-card {
        max-height: calc(100dvh - 26px);
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important;
    }
}
.field-grid > label {
    font-weight: 800;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.game-card-art {
    display: block;
}
.pagination nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pagination nav > div {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pagination nav > div.hidden {
    display: flex !important;
}
.pagination a,
.pagination [aria-current] > span,
.pagination [aria-disabled] > span {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid #5a4826;
    background: #131313;
    font-size: 11px;
    border-radius: 5px;
}
.pagination [aria-current] > span {
    color: var(--gold);
}
.pagination nav > div:first-child {
    display: none;
}
/* Final reference alignment and shared icon treatment. */
.fa-shield-alt {
    position: relative;
}
.fa-shield-alt:after {
    content: "\f00c";
    position: absolute;
    left: 28%;
    top: 28%;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.43em;
    color: #17180e;
}
.brand span {
    font-style: italic;
}
.home-content #jogos .section-heading {
    margin-bottom: 9px;
}
@media (min-width: 541px) and (max-width: 760px) {
    .game-card-art {
        aspect-ratio: 1.8;
    }
    .game-card-info > p {
        min-height: 22px;
    }
    .game-card-bottom {
        margin: 8px 0;
    }
    .game-card h3 {
        margin-bottom: 4px;
    }
    .benefits-grid {
        margin-top: 10px;
    }
    .home-content .how-section {
        margin-top: 13px;
    }
    .step-card {
        min-height: 80px;
    }
}
@media (max-width: 1000px) {
    .is-game .brand span {
        font-style: normal;
    }
}
@media (max-width: 380px) {
    .header-inner {
        padding: 0 12px;
        gap: 8px;
    }
    .brand {
        width: 107px;
    }
    .brand svg {
        width: 31px;
    }
    .brand strong {
        font-size: 18px;
    }
    .brand b {
        font-size: 14px;
    }
    .wallet {
        padding: 7px;
        font-size: 10px;
    }
    .deposit-button {
        width: 34px;
        padding: 0;
        min-height: 34px;
    }
    .deposit-button span {
        display: none;
    }
    .deposit-button b {
        font-size: 24px;
    }
    .header-actions {
        gap: 6px;
    }
    .menu-toggle {
        width: 28px;
        font-size: 21px;
    }
    .stats-grid .stat-card > strong {
        font-size: 20px;
    }
    .balance-options {
        grid-template-columns: 1fr;
    }
    .game-card .gold-button {
        font-size: 7px;
    }
    .card-prize {
        font-size: 7px;
    }
}
.promo-banner {
    background: #08090b url("/assets/raspa/promotion.webp") left center/auto
        180% no-repeat;
    box-shadow: inset 0 0 24px #bb8c0710;
}
.promo-trophy {
    visibility: hidden;
    width: 21%;
    margin: 0;
    flex-shrink: 0;
}
.promo-text h2 {
    text-shadow: 0 2px 5px #000;
}
.promo-action {
    padding: 8px;
    background: #090a0ca6;
    border: 1px solid #8a651b55;
    border-radius: 9px;
}
@media (min-width: 541px) and (max-width: 760px) {
    .home-content .benefits-grid {
        margin-top: 9px;
    }
    .home-content {
        padding-bottom: 0;
    }
    .is-home .site-main {
        padding-bottom: 86px;
    }
}
@media (max-width: 540px) {
    .promo-trophy {
        width: 18%;
        min-width: 45px;
    }
    .promo-action {
        padding: 5px;
    }
    .promo-text h2 {
        font-size: 3vw;
    }
    .promo-banner {
        gap: 5px;
        background-size: auto 170%;
    }
}
.promo-banner {
    background-size: auto 120%;
}
@media (min-width: 541px) and (max-width: 760px) {
    .is-home .header-inner {
        padding: 0 50px;
    }
    .is-home .deposit-button {
        min-width: 125px;
    }
}

/* Home layout follows the wide desktop reference, then compresses by device. */
.home-metrics {
    display: none;
}
.mobile-games-title {
    display: none;
}
.games-kicker {
    display: block;
    color: #e1ba43;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
@media (min-width: 761px) {
    .is-home .site-header {
        height: 58px;
    }
    .home-content {
        padding-top: 10px;
    }
    .live-winners {
        display: none;
    }
    .home-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        min-height: 58px;
        margin: 0 0 14px;
        padding: 8px 12px;
        border: 1px solid #36383d;
        border-radius: 12px;
        background: linear-gradient(110deg, #111316, #0b0c0e);
    }
    .home-metrics > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 0;
    }
    .home-metrics > div + div {
        border-left: 1px solid #292b30;
    }
    .home-metrics i {
        color: #ffd12c;
        font-size: 22px;
    }
    .home-metrics span {
        min-width: 0;
    }
    .home-metrics strong,
    .home-metrics small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .home-metrics strong {
        font-size: 14px;
        font-weight: 900;
    }
    .home-metrics small {
        color: #adb2bd;
        font-size: 9px;
    }
    .category-list {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 18px;
    }
    .category {
        min-height: 60px;
        border-radius: 11px;
        font-size: 9px;
        gap: 4px;
    }
    .category i {
        font-size: 20px;
    }
    .game-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .game-card {
        padding: 7px;
        border-radius: 12px;
    }
    .game-card-art {
        aspect-ratio: 1.15;
        border-radius: 8px 8px 0 0;
        margin: -3px -3px -9px;
    }
    .game-card-info {
        padding: 0 2px;
    }
    .game-card-info > small {
        font-size: 10px;
    }
    .game-card h3 {
        font-size: clamp(13px, 1.45vw, 17px);
        letter-spacing: -0.35px;
    }
    .game-card-info > p {
        font-size: 9px;
        min-height: 23px;
    }
    .game-card-bottom {
        margin: 7px 0;
        gap: 3px;
    }
    .price-pill {
        padding: 2px 6px;
        font-size: 10px;
    }
    .card-prize {
        font-size: 9px;
        text-align: right;
    }
    .card-prize small {
        font-size: 7px;
    }
    .game-card .gold-button {
        min-height: 32px;
        font-size: 10px;
        padding: 6px 4px;
    }
    .home-content #jogos .section-heading {
        margin-bottom: 10px;
    }
    .home-content #jogos .section-heading h2 {
        font-size: 24px;
    }
    .home-content #jogos .section-heading p {
        font-size: 11px;
    }
    .home-content .promo-banner {
        margin-top: 18px;
    }
}
@media (min-width: 761px) and (max-width: 1000px) {
    .is-home .site-header {
        height: 48px;
    }
    .is-home .header-inner {
        padding: 0 20px;
        gap: 8px;
    }
    .is-home .brand {
        width: 112px;
        gap: 3px;
        flex-shrink: 0;
    }
    .is-home .brand svg {
        width: 33px;
        height: 34px;
    }
    .is-home .brand strong {
        font-size: 19px;
    }
    .is-home .brand b {
        font-size: 15px;
    }
    .is-home .desktop-links {
        display: flex;
        gap: 0;
    }
    .is-home .desktop-links a,
    .is-home .desktop-links button {
        font-size: 8px;
        padding: 6px 5px;
    }
    .is-home .menu-toggle {
        display: none;
    }
    .is-home .header-actions {
        margin-left: 0;
        gap: 4px;
    }
    .is-home .bonus-button {
        display: flex;
        padding: 6px;
        font-size: 8px;
        gap: 4px;
    }
    .is-home .bonus-button i {
        font-size: 11px;
    }
    .is-home .header-actions .login-button,
    .is-home .header-actions .register-button {
        min-height: 28px;
        font-size: 8px;
        padding: 5px 8px;
        border-radius: 8px;
    }
    .is-home .wallet {
        padding: 6px;
        font-size: 8px;
        gap: 4px;
    }
    .is-home .wallet i {
        font-size: 12px;
    }
    .is-home .deposit-button {
        min-height: 28px;
        font-size: 8px;
        padding: 5px 7px;
    }
    .is-home .deposit-button b {
        font-size: 13px;
    }
    .home-content {
        padding-top: 8px;
    }
    .home-metrics {
        min-height: 53px;
        margin-bottom: 12px;
    }
    .home-metrics i {
        font-size: 18px;
    }
    .home-metrics strong {
        font-size: 11px;
    }
    .home-metrics small {
        font-size: 7px;
    }
    .category-list {
        gap: 5px;
    }
    .category {
        min-height: 54px;
        font-size: 8px;
    }
    .category i {
        font-size: 17px;
    }
    .game-card {
        padding: 6px;
    }
    .game-card h3 {
        font-size: 13px;
    }
    .game-card-info > p {
        font-size: 8px;
    }
    .price-pill {
        font-size: 8px;
    }
    .card-prize {
        font-size: 7px;
    }
    .game-card .gold-button {
        font-size: 8px;
        min-height: 29px;
    }
    .hero .gold-button {
        font-size: 12px;
        min-height: 32px;
    }
}
@media (min-width: 761px) and (max-width: 820px) {
    .game-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .game-card[data-home-order="4"] {
        display: none;
    }
    .home-metrics > div {
        gap: 7px;
    }
    .home-metrics i {
        font-size: 16px;
    }
    .category-list {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 4px;
    }
    .category {
        font-size: 7px;
    }
}
@media (max-width: 760px) {
    .home-metrics,
    .games-kicker,
    .desktop-games-title {
        display: none;
    }
    .mobile-games-title {
        display: inline;
    }
    .category[data-category="money"],
    .category[data-category="games"] {
        display: none;
    }
    .category-list {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .category-list::-webkit-scrollbar {
        display: none;
    }
    .category {
        flex: 1 0 0;
    }
}
@media (max-width: 540px) {
    .hero {
        aspect-ratio: 1.9;
    }
    .hero-copy {
        width: 63%;
        top: 7%;
    }
    .hero h1 {
        font-size: clamp(19px, 5.4vw, 24px);
        line-height: 1.02;
    }
    .hero-tag {
        font-size: 8px;
    }
    .hero-copy > p {
        font-size: 9px;
        max-width: 100%;
    }
    .hero .gold-button {
        font-size: 10px;
        min-height: 30px;
        padding: 5px 11px;
    }
    .hero-trust {
        display: none;
    }
    .winner-strip {
        display: flex;
        overflow-x: auto;
        gap: 7px;
        scrollbar-width: none;
    }
    .winner-strip::-webkit-scrollbar {
        display: none;
    }
    .winner-mini {
        flex: 0 0 145px;
        min-height: 48px;
    }
    .category-list {
        gap: 7px;
        margin-bottom: 12px;
    }
    .category {
        flex: 0 0 63px;
        min-height: 54px;
        font-size: 9px;
    }
    .category i {
        font-size: 18px;
    }
    .home-content #jogos .section-heading {
        margin-bottom: 8px;
    }
    .home-content #jogos .section-heading h2 {
        font-size: 19px;
    }
    .home-content #jogos .section-heading p {
        font-size: 10px;
    }
    .game-cards {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 0 2px 5px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .game-cards::-webkit-scrollbar {
        display: none;
    }
    .game-card {
        flex: 0 0 76%;
        scroll-snap-align: start;
        padding: 8px;
        border-radius: 14px;
    }
    .game-card-art {
        aspect-ratio: 1.48;
    }
    .game-card h3 {
        font-size: 17px;
    }
    .game-card-info > small {
        font-size: 10px;
    }
    .game-card-info > p {
        font-size: 10px;
        min-height: 22px;
    }
    .price-pill {
        font-size: 10px;
    }
    .card-prize {
        font-size: 9px;
    }
    .card-prize small {
        font-size: 8px;
    }
    .game-card .gold-button {
        min-height: 34px;
        font-size: 11px;
    }
    .promo-banner {
        min-height: 82px;
        margin: 11px 0;
        padding: 8px 10px;
    }
    .promo-text small {
        font-size: 7px;
    }
    .promo-text h2 {
        font-size: 10px;
    }
    .promo-action > span {
        display: none;
    }
    .promo-action .gold-button {
        font-size: 8px;
        min-height: 29px;
        padding: 5px 7px;
    }
    .how-section {
        margin: 10px 0;
    }
    .how-section .section-heading {
        margin-bottom: 6px;
    }
    .steps-grid {
        gap: 6px;
    }
    .step-card {
        padding: 8px 7px;
        gap: 6px;
    }
    .step-card .round-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .step-card h3 {
        font-size: 8px;
    }
    .step-card p {
        font-size: 8px;
        line-height: 1.15;
    }
    .benefits-grid {
        gap: 6px;
        margin-top: 8px;
    }
}
.mobile-games-copy {
    display: none;
}
@media (min-width: 761px) and (max-width: 1000px) {
    .is-home .bonus-button {
        display: flex;
    }
}
@media (max-width: 760px) {
    .desktop-games-copy {
        display: none;
    }
    .mobile-games-copy {
        display: inline;
    }
}
@media (max-width: 540px) {
    .game-card {
        flex-basis: 48%;
    }
    .game-card-art {
        aspect-ratio: 1.28;
    }
    .game-card-info > small {
        font-size: 9px;
    }
    .game-card h3 {
        font-size: clamp(12px, 3.8vw, 16px);
    }
    .game-card-info > p {
        min-height: 20px;
        font-size: 9px;
    }
    .game-card .gold-button {
        min-height: 31px;
        font-size: 9px;
    }
}
@media (max-width: 380px) {
    .game-card {
        flex-basis: 58%;
    }
}
@media (min-width: 1200px) {
    .hero {
        aspect-ratio: 2.8;
    }
}
@media (min-width: 761px) {
    .is-home .bottom-nav {
        display: none;
    }
    .is-home .site-main {
        padding-bottom: 0;
    }
    .is-home .bonus-button {
        display: flex;
    }
}
.game-card[data-art="3"] .game-card-art {
    background-image: url("/assets/raspa/motorcycle-card.webp");
    background-size: cover;
    background-position: center 45%;
}