:root {
    color-scheme: dark;
    --green-950: #063c1e;
    --green-900: #07542a;
    --green-800: #087436;
    --green-700: #0a8b3f;
    --green-500: #18b414;
    --yellow: #ffe000;
    --gold: #f6bd29;
    --red: #ef1745;
    --pink: #db32d1;
    --cyan: #25b9ff;
    --ink: #08090a;
    --panel: #18191b;
    --panel-soft: #202124;
    --line: #2a2c30;
    --muted: #8e949d;
    --text: #f5f7fb;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: #061508;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.site-shell {
    min-height: 100vh;
}

.is-hidden {
    display: none !important;
}

.lobby-view {
    min-height: 100vh;
    padding-bottom: 112px;
    background:
        radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.07) 0 2px, transparent 3px) 0 0 / 42px 42px,
        linear-gradient(180deg, var(--green-900), var(--green-800) 44%, var(--green-700));
}

.lobby-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: 52px minmax(170px, 1fr) auto 50px auto auto;
    gap: 14px;
    align-items: center;
    min-height: 104px;
    padding: 14px 32px;
    border-top: 8px solid #103b1e;
    background: #07572b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.icon-button,
.menu-button,
.game-menu-button,
.lobby-button,
.account-button,
.deposit-button,
.mail-button {
    cursor: pointer;
}

.menu-button {
    display: grid;
    gap: 6px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: transparent;
}

.menu-button span {
    display: block;
    width: 32px;
    height: 5px;
    border-radius: 999px;
    background: #d6fff0;
}

.lobby-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: clamp(36px, 5.8vw, 64px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.lobby-brand span,
.lobby-brand em {
    color: var(--yellow);
    font-style: normal;
}

.brand-badge {
    display: grid;
    place-items: center;
    min-width: 1.28em;
    height: 0.98em;
    border: 3px solid rgba(255, 255, 255, 0.82);
    border-radius: 10px;
    background: var(--yellow);
    color: #07542a !important;
    font-size: 0.82em;
    line-height: 1;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

.lobby-brand strong {
    color: #fff;
}

.wallet-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 14px;
    border: 2px solid rgba(255, 224, 0, 0.65);
    border-radius: 28px;
    color: var(--yellow);
    background: #0b7337;
}

.wallet-badge strong,
.game-wallet strong {
    font-size: 28px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 8px;
}

.wallet-badge small,
.game-wallet span {
    color: #c7dfcb;
    font-size: 14px;
}

.wallet-badge.is-syncing,
.game-wallet.is-syncing {
    position: relative;
    opacity: 0.72;
}

.wallet-badge.is-syncing::after,
.game-wallet.is-syncing::after {
    content: "SYNC";
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 16px;
    padding: 0 5px;
    border: 1px solid rgba(255, 224, 0, 0.65);
    border-radius: 999px;
    background: #111214;
    color: var(--yellow);
    font-size: 8px;
    font-weight: 950;
}

.coin-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 3px solid var(--gold);
    border-radius: 50%;
    background: #0f6b37;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.deposit-button {
    min-height: 68px;
    padding: 0 30px;
    border-radius: 18px;
    background: var(--yellow);
    color: #07542a;
    font-size: 32px;
    font-weight: 500;
}

.account-button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 224, 0, 0.5);
    border-radius: 8px;
    background: #06451f;
    color: var(--yellow);
    font-weight: 800;
}

.audio-toggle {
    display: grid;
    place-items: center;
    width: 46px;
    min-height: 46px;
    border: 1px solid rgba(255, 224, 0, 0.48);
    border-radius: 50%;
    background: #06451f;
    color: var(--yellow);
    cursor: pointer;
    font-size: 23px;
    font-weight: 900;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}

.audio-toggle.is-on {
    background: var(--yellow);
    color: #07542a;
    box-shadow: 0 0 18px rgba(255, 224, 0, 0.36);
}

.lobby-scroll {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 34px 34px 0;
}

.vip-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    min-height: 260px;
    padding: 36px 64px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(3, 70, 35, 0.96), rgba(4, 112, 58, 0.78)),
        radial-gradient(circle at 88% 40%, rgba(255, 224, 0, 0.38), transparent 32%),
        #063e23;
}

.vip-banner h1 {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.05;
}

.vip-banner p {
    margin: 8px 0;
    color: #fff;
    font-size: clamp(25px, 3.5vw, 40px);
    font-weight: 900;
}

.vip-banner strong {
    color: var(--yellow);
}

.vip-crown {
    align-self: center;
    justify-self: center;
    color: #ffe268;
    font-size: clamp(84px, 10vw, 150px);
    font-weight: 950;
    text-shadow: 0 8px 0 #8a5c03, 0 20px 38px rgba(0, 0, 0, 0.42);
}

.notice-strip {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 94px;
    overflow: hidden;
}

.notice-strip p {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(25px, 4vw, 40px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-strip strong {
    color: var(--yellow);
}

.speaker-icon {
    width: 48px;
    height: 38px;
    clip-path: polygon(0 28%, 30% 28%, 62% 0, 62% 100%, 30% 72%, 0 72%);
    background: #e5fff0;
}

.mail-button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.14);
    color: var(--yellow);
    font-weight: 900;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 18px;
}

.section-title h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 500;
}

.section-title button {
    background: transparent;
    color: var(--yellow);
    cursor: pointer;
    font-size: clamp(23px, 3vw, 34px);
}

.sports-row {
    display: grid;
    grid-auto-columns: minmax(430px, 1fr);
    grid-auto-flow: column;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.match-card {
    min-height: 220px;
    padding: 18px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: #0a8a41;
}

.match-card > span,
.match-card strong {
    display: inline-block;
    margin-right: 12px;
    color: #b7e4bf;
    font-size: 28px;
    font-weight: 500;
}

.teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin: 18px 0;
    text-align: center;
}

.teams p,
.teams b {
    margin: 0;
    color: #fff;
    font-size: 30px;
}

.odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.odds span {
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #fff;
    font-size: 26px;
    text-align: center;
}

.category-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 16px;
    margin: 26px 0;
}

.category-row button {
    display: grid;
    gap: 8px;
    justify-items: center;
    min-height: 102px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: clamp(22px, 3vw, 38px);
}

.cat-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffef58, #ef1745);
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 8px;
}

.quick-actions button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(255, 224, 0, 0.22);
    border-radius: 8px;
    background: rgba(4, 61, 30, 0.72);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.quick-actions span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.14);
    font-size: 24px;
}

.quick-actions strong,
.rooms-grid strong,
.leaderboard-strip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-actions small,
.rooms-grid small {
    color: rgba(255, 255, 255, 0.64);
    font-weight: 700;
}

.cat-icon.slot {
    background: linear-gradient(135deg, #fff, #d61a26);
}

.cat-icon.mini {
    background: linear-gradient(135deg, #55dbff, #1376d7);
}

.cat-icon.fish {
    background: linear-gradient(135deg, #7eeaff, #2b6dff);
}

.cat-icon.live {
    background: linear-gradient(135deg, #ffd9c9, #ef1745);
}

.jackpot-banner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    align-items: center;
    min-height: 210px;
    margin: 20px 0 34px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 218, 36, 0.12), rgba(239, 23, 69, 0.25)),
        #0b8b42;
}

.jackpot-banner div {
    text-align: center;
}

.jackpot-banner small {
    display: block;
    color: var(--yellow);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 950;
}

.jackpot-banner strong {
    color: #fff0b5;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    text-shadow: 0 5px 0 #bd1f22;
}

.jackpot-plane,
.cash-stack {
    width: 170px;
    height: 120px;
    background: url("./img/aviator_jogo.png") center / contain no-repeat;
}

.cash-stack {
    border-radius: 8px;
    background:
        linear-gradient(135deg, #d6ff85, #00a934);
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.game-card {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 220px;
    overflow: hidden;
    border-radius: 8px;
    background: #151515;
    color: #fff;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 -42px 58px rgba(0, 0, 0, 0.34), 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
}

.game-card:active {
    transform: scale(0.985);
}

.game-card img {
    position: absolute;
    inset: 14px 6% auto;
    width: 88%;
    height: 130px;
    object-fit: contain;
    opacity: 0.92;
}

.aviator-card {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(239, 23, 69, 0.52)),
        repeating-conic-gradient(from 270deg at 50% 40%, rgba(255, 255, 255, 0.08) 0deg 8deg, transparent 8deg 18deg),
        #202020;
}

.blue-card {
    background: linear-gradient(135deg, #10255d, #3b77ff);
}

.green-card {
    background: linear-gradient(135deg, #65f45c, #087436);
}

.dragon-card {
    background:
        radial-gradient(circle at 68% 28%, rgba(255, 224, 0, 0.45), transparent 23%),
        linear-gradient(135deg, #2a0708, #d61a26 55%, #ffb000);
}

.dragon-card::before,
.gold-card::before,
.aqua-card::before,
.live-card::before {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 50%;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 46%),
        radial-gradient(circle, rgba(255, 224, 0, 0.24), transparent 62%);
    filter: blur(1px);
}

.dragon-card::before {
    content: "";
}

.gold-card {
    background: linear-gradient(135deg, #3a1d00, #ffb000 58%, #ef1745);
}

.gold-card::before {
    content: "";
}

.aqua-card {
    background: linear-gradient(135deg, #083c58, #15b8ff 58%, #0fb46a);
}

.aqua-card::before {
    content: "";
}

.live-card {
    background: linear-gradient(135deg, #2f102d, #db32d1 58%, #ef1745);
}

.live-card::before {
    content: "";
}

.card-art {
    position: absolute;
    z-index: 2;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(58px, 7vw, 86px);
    line-height: 1;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.18)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
}

.card-glow {
    position: absolute;
    z-index: 0;
    inset: 18% 10% 26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 0, 0.34), transparent 62%);
    opacity: 0.72;
}

.game-card.is-favorite .favorite-star::before {
    background: var(--yellow);
}

.game-card strong {
    z-index: 1;
    padding: 24px;
    font-size: 30px;
    text-align: center;
}

.leaderboard-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 72px;
    margin: 28px 0 18px;
    padding: 12px 16px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(4, 61, 30, 0.72);
    color: #fff;
}

.leaderboard-strip div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
}

.leaderboard-strip p {
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.8);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.rooms-grid button {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: center;
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(13, 14, 16, 0.32);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.rooms-grid span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.12);
    font-size: 25px;
}

.favorite-star {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.68);
    color: transparent;
}

.favorite-star::before {
    content: "";
    width: 24px;
    height: 24px;
    clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
    background: #333;
}

.bottom-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 108px;
    background: #07582c;
}

.bottom-nav button {
    display: grid;
    gap: 4px;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    font-size: clamp(19px, 3vw, 34px);
}

.bottom-nav span {
    display: block;
    font-size: 0.9em;
    line-height: 1;
}

.bottom-nav button.is-active {
    color: var(--yellow);
}

.aviator-view {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
    background: #0d0e10;
}

.game-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto 46px 48px;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 14px;
    border-bottom: 1px solid #1f2024;
    background: #171819;
}

.lobby-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-width: 66px;
    height: 38px;
    margin-top: 0;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: linear-gradient(180deg, #2c2e33, #1d1e22);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.game-brand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: linear-gradient(180deg, #2c2e33, #1d1e22);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.game-brand-button svg { color: #E3392D; flex: 0 0 auto; }

.mini-logo {
    color: var(--red);
    font-size: 22px;
    font-weight: 900;
}

.game-wallet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #161719;
    color: var(--green-500);
}

.game-wallet strong {
    font-size: 18px;
    text-decoration: none;
}

.game-quick-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.game-quick-actions button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #232428;
    color: #e8edf0;
    font-weight: 800;
    white-space: nowrap;
}

.game-quick-actions button:first-child {
    border-color: rgba(255, 225, 0, 0.45);
    background: linear-gradient(180deg, #ffe500, #ffc400);
    color: #07542a;
}

.game-menu-button {
    min-height: 34px;
    border-radius: 8px;
    background: #232428;
    color: #b8bdc5;
    font-size: 0;
}

.game-audio,
.mini-audio {
    width: 34px;
    min-height: 34px;
    font-size: 18px;
}

.game-menu-button::before {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    margin: 0 auto;
    border-radius: 999px;
    background: #b8bdc5;
    box-shadow: 0 7px 0 #b8bdc5, 0 -7px 0 #b8bdc5;
}

.bets-board {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    border-right: 1px solid #222327;
    background: #111214;
}

.bets-board > * { flex: 0 0 auto; }

.bets-board .side-list {
    flex: 1 1 auto;
    min-height: 0;
}

.bets-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #17181b;
}

.bets-tabs button {
    min-height: 31px;
    border-radius: 8px;
    background: transparent;
    color: #9aa0aa;
    cursor: pointer;
    font-size: 13px;
}

.bets-tabs button.is-active {
    background: #303137;
    color: #fff;
}

.side-summary {
    min-height: 74px;
    padding: 13px 6px;
    color: #8e949d;
}

.round-result {
    text-align: center;
}

.round-result span {
    display: block;
    color: #9aa0aa;
    font-size: 12px;
}

.round-result strong {
    color: var(--cyan);
    font-size: 30px;
}

.table-head,
.bet-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 82px 56px 82px;
    gap: 8px;
    align-items: center;
}

.table-head {
    min-height: 28px;
    color: #686e77;
    font-size: 11px;
}

.side-list {
    min-height: 0;
    overflow: auto;
    padding-bottom: 8px;
}

.bet-row {
    min-height: 33px;
    margin-bottom: 3px;
    padding: 0 6px;
    border-radius: 999px;
    background: #17191b;
    color: #aeb4bd;
    font-size: 13px;
}

.bet-row.is-win {
    background: #203f17;
}

.bet-row.is-mine {
    background: linear-gradient(90deg, rgba(24, 180, 20, 0.26), rgba(23, 25, 27, 0.92));
    box-shadow: inset 3px 0 0 var(--yellow);
}

.player-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.avatar {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.52), transparent 20%),
        linear-gradient(135deg, var(--dp-color, var(--yellow)), var(--dp-accent, var(--red)));
    color: #fff;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.26), 0 4px 10px rgba(0, 0, 0, 0.28);
}

.avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 7px;
    height: 7px;
    border: 1px solid #111214;
    border-radius: 50%;
    background: var(--green-500);
}

.avatar.has-photo {
    background: #202227;
}

.avatar.has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.player-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-cell .player-name {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.player-cell .bet-when {
    color: #7d8088;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.x-cell .x-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #26282d;
    font-weight: 800;
    font-size: 12px;
    font-style: normal;
}

.x-cell .x-chip.low { color: #34b3f1; }
.x-cell .x-chip.mid { color: #b57bff; }
.x-cell .x-chip.high { color: #d05cff; }

.x-cell,
.win-cell {
    color: var(--cyan);
}

.win-cell {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.side-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    color: #767b83;
    font-size: 11px;
}

.flight-main {
    display: grid;
    grid-template-rows: 34px minmax(280px, 1fr) 218px;
    min-width: 0;
    min-height: 0;
    background: #0d0e10;
}

.round-history-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #191b1f;
    background: #111214;
}
.round-history {
    display: flex;
    gap: 16px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10px;
    background: transparent;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}

.round-history::-webkit-scrollbar {
    display: none;
}

/* Three-dots "..." expander (Spribe-style) */
.history-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid #191b1f;
    background: #17181b;
    cursor: pointer;
}
.history-more span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8a8d94;
}
.history-more.is-open span { background: #E3392D; }
.history-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 6px;
    left: 6px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #2a2c31;
    border-radius: 12px;
    background: #16171a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.history-panel.is-hidden { display: none; }
.history-panel-empty { color: #7d8088; font-size: 12px; padding: 6px; }

/* Top-tab sub-filters (X / Win / Rounds · Day / Month / Year) */
.top-filters {
    display: grid;
    gap: 6px;
    padding: 8px 8px 2px;
}
.top-filters.is-hidden { display: none; }
.top-filters .tf-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.top-filters .tf-row button {
    padding: 7px 4px;
    border: 1px solid #2a2c31;
    border-radius: 8px;
    background: #1a1c1f;
    color: #b7bac1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.top-filters .tf-row button.is-active {
    background: #23261d;
    border-color: rgba(255, 224, 0, 0.4);
    color: #ffe000;
}

/* Top · Rounds rows (Date & Time | X) */
.round-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    background: #17181b;
    margin-bottom: 6px;
    cursor: pointer;
}
.round-top-row .rt-time { color: #c7cad0; font-size: 13px; }
.round-top-row .rt-x { font-weight: 800; font-size: 14px; }
.round-top-row .rt-x.low { color: #34b3f1; }
.round-top-row .rt-x.mid { color: #b57bff; }
.round-top-row .rt-x.high { color: #d63bd6; }

.history-chip {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}

.history-chip:hover,
.history-chip:focus-visible {
    filter: brightness(1.25);
    transform: translateY(-1px);
    outline: none;
}

.history-chip.low {
    color: var(--cyan);
}

.history-chip.mid {
    color: #8156ff;
}

.history-chip.high {
    color: var(--pink);
}

.game-connection-status {
    position: absolute;
    z-index: 6;
    top: 10px;
    right: 12px;
    min-width: 72px;
    max-width: calc(100% - 24px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(16, 18, 22, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d5f7df;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.game-connection-status::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #26e36f;
    box-shadow: 0 0 10px rgba(38, 227, 111, 0.72);
}

.game-connection-status.is-quiet {
    opacity: 0.38;
}

.game-connection-status[data-status="slow"] {
    color: #ffe08a;
    border-color: rgba(255, 200, 38, 0.32);
}

.game-connection-status[data-status="slow"]::before {
    background: #ffbd1f;
    box-shadow: 0 0 10px rgba(255, 189, 31, 0.72);
}

.game-connection-status[data-status="connecting"],
.game-connection-status[data-status="offline"] {
    color: #fff;
    background: rgba(109, 24, 34, 0.88);
    border-color: rgba(255, 71, 90, 0.45);
}

.game-connection-status[data-status="connecting"]::before,
.game-connection-status[data-status="offline"]::before {
    background: #ff475a;
    box-shadow: 0 0 10px rgba(255, 71, 90, 0.76);
}

.round-history-modal .round-history-sheet {
    width: min(720px, calc(100vw - 24px));
    max-height: min(760px, calc(100vh - 28px));
    overflow: hidden auto;
    border-radius: 18px;
    background:
        radial-gradient(circle at 58% 10%, rgba(43, 165, 229, 0.15), transparent 34%),
        linear-gradient(180deg, #1d1f24 0%, #111316 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fbff;
}

.round-history-modal.is-open,
.round-history-modal.is-open.is-hidden,
.round-history-modal[data-rendered="true"] {
    display: grid !important;
}

.round-history-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    align-items: end;
    padding: 18px 20px 14px;
    background: rgba(255, 255, 255, 0.035);
}

.round-history-head span,
.round-history-head small,
.round-history-section-title span,
.round-history-winners small,
.round-history-leaders small {
    color: #9ca2ad;
    font-size: 12px;
    font-weight: 700;
}

.round-history-head strong {
    grid-row: span 2;
    color: #ff0a48;
    font-size: clamp(36px, 8vw, 64px);
    font-weight: 900;
    letter-spacing: 0;
}

.round-history-modal[data-level="low"] .round-history-head strong {
    color: #20b8ff;
}

.round-history-modal[data-level="mid"] .round-history-head strong {
    color: #8b5cff;
}

.round-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 20px;
}

.round-history-summary article,
.round-history-leaders article {
    min-width: 0;
    padding: 13px 14px;
    border-radius: 14px;
    background: rgba(3, 5, 7, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.round-history-summary span,
.round-history-leaders span {
    display: block;
    color: #9ca2ad;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.round-history-summary strong,
.round-history-leaders strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

.round-history-section {
    padding: 4px 20px 18px;
}

.round-history-section-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.round-history-section-title strong {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

.round-history-winners {
    display: grid;
    gap: 8px;
}

.round-history-winners article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.round-history-winners .mini-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2dc8ff, #56f086);
    color: #061014;
    font-size: 10px;
    font-weight: 900;
}

.round-history-winners strong,
.round-history-winners small {
    display: block;
}

.round-history-winners b {
    color: #d8fbd5;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.round-history-leaders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.round-history-empty {
    padding: 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    color: #9ca2ad;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 680px) {
    .game-connection-status {
        top: auto;
        right: 10px;
        bottom: 10px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .round-history-summary {
        grid-template-columns: 1fr;
    }

    .round-history-leaders {
        grid-template-columns: 1fr 1fr;
    }
}

.flight-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #292a2f;
    border-radius: 8px;
    background:
        radial-gradient(circle at 54% 45%, rgba(24, 121, 174, 0.22), transparent 18%),
        repeating-conic-gradient(from 250deg at 0% 100%, rgba(255, 255, 255, 0.045) 0deg 8deg, transparent 8deg 20deg),
        #050505;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* ===== Branded Aviator loader (shown until the first live round arrives) ===== */
.aviator-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    background: radial-gradient(circle at 50% 42%, #101418 0%, #060708 60%, #030304 100%);
    opacity: 1;
    transition: opacity 320ms ease;
}
.aviator-loader.is-hidden { opacity: 0; pointer-events: none; }
.aviator-loader .al-prop {
    position: relative;
    width: 104px;
    height: 104px;
}
.aviator-loader .al-prop svg {
    display: block;
    animation: alProp 0.75s linear infinite;
    filter: drop-shadow(0 0 26px rgba(227, 57, 45, 0.38));
}
@keyframes alProp { to { transform: rotate(360deg); } }
.aviator-loader .al-title {
    position: relative;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 36px;
    letter-spacing: 0.01em;
    color: #E3392D;
    text-shadow: 0 3px 16px rgba(227, 57, 45, 0.4);
}
.aviator-loader .al-bar {
    position: relative;
    width: 210px;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
}
.aviator-loader .al-bar span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #E3392D, #ff6a5c);
    transform: scaleX(0);
    transform-origin: left;
    animation: alFill 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes alFill { 0% { transform: scaleX(0); } 68% { transform: scaleX(0.82); } 100% { transform: scaleX(1); } }
.aviator-loader .al-sub {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.62);
    text-transform: uppercase;
}

.flight-stage[data-mood="panic"],
.flight-stage[data-mood="snap"] {
    border-color: rgba(239, 23, 69, 0.7);
    box-shadow: inset 0 0 36px rgba(239, 23, 69, 0.16);
}

.flight-stage[data-mood="climb"],
.flight-stage[data-mood="moon"] {
    border-color: rgba(255, 224, 0, 0.58);
    box-shadow: inset 0 0 46px rgba(255, 224, 0, 0.12), 0 0 32px rgba(239, 23, 69, 0.12);
}

.flight-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, 0.45));
}

#canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.partner-card {
    position: absolute;
    z-index: 3;
    top: 44%;
    left: 50%;
    display: grid;
    gap: 5px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.partner-card strong {
    color: var(--red);
    font-size: clamp(46px, 6vw, 74px);
    font-style: italic;
    line-height: 1;
}

.partner-card span {
    color: #fff;
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 950;
    text-transform: uppercase;
}

.round-loader {
    position: relative;
    justify-self: center;
    width: clamp(96px, 18vw, 190px);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.round-loader span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef1745, #ffde24);
    box-shadow: 0 0 14px rgba(239, 23, 69, 0.34);
    transition: width 120ms linear;
}

.partner-card small {
    justify-self: center;
    width: max-content;
    padding: 8px 12px;
    border: 1px solid #5a971a;
    border-radius: 8px;
    background: rgba(20, 65, 9, 0.86);
    color: #a8ff67;
    font-weight: 800;
}

.big-counter {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    color: #fff;
    font-size: clamp(72px, 8vw, 132px);
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.62);
    transition: color 120ms linear, text-shadow 120ms linear;
}

.flight-stage[data-mood="moon"] .big-counter,
.flight-stage[data-mood="climb"] .big-counter {
    color: #fff7ba;
    text-shadow: 0 0 32px rgba(255, 224, 0, 0.32), 0 14px 46px rgba(0, 0, 0, 0.7);
}

.flight-stage[data-phase="crashed"] .big-counter,
.flight-stage[data-phase="crashed"] .flew-away {
    color: #ff174f;
    text-shadow:
        0 0 18px rgba(255, 23, 79, 0.72),
        0 10px 38px rgba(0, 0, 0, 0.72);
}

.flew-away {
    position: absolute;
    z-index: 4;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 850;
}

.player-count {
    position: absolute;
    z-index: 4;
    right: 16px;
    bottom: 14px;
    min-width: 72px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #202124;
    color: #bfc4cc;
    font-size: 13px;
    text-align: right;
}

.game-bets {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-height: 0;
    padding: 8px;
    border-top: 1px solid #222327;
    background: #111214;
}

.place-both-button {
    position: absolute;
    z-index: 5;
    top: 9px;
    left: 50%;
    min-height: 30px;
    padding: 0 18px;
    border-radius: 8px;
    background: #313238;
    color: #dce0e6;
    cursor: pointer;
    transform: translateX(-50%);
}

.place-both-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bet-panel {
    display: grid;
    grid-template-columns: minmax(86px, 0.8fr) minmax(106px, 1fr) minmax(132px, 1.15fr);
    grid-template-rows: 28px 34px 58px 23px 17px;
    gap: 6px 8px;
    align-content: center;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1b1c1f;
}

.mode-toggle {
    grid-column: 1 / 3;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 999px;
    background: #121315;
}

.mode-toggle button {
    min-height: 28px;
    border-radius: 999px;
    background: transparent;
    color: #8f949c;
    cursor: pointer;
    font-size: 12px;
}

.mode-toggle button.is-selected {
    background: #32343a;
    color: #fff;
}

.stake-line {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    gap: 8px;
    align-self: end;
}

.stake-line button,
.quick-stakes button {
    border-radius: 999px;
    background: #25272c;
    color: #9ca2ad;
    cursor: pointer;
    font-weight: 800;
}

.stake-line input {
    width: 100%;
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    background: #121315;
    color: #cfd4db;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.quick-stakes {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.quick-stakes button {
    min-height: 24px;
}

.auto-cash {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8f949c;
    font-size: 11px;
}

.auto-cash input {
    width: 70px;
    min-height: 22px;
    border: 0;
    border-radius: 6px;
    background: #121315;
    color: #fff;
    text-align: center;
}

.bet-button {
    grid-column: 3;
    grid-row: 2 / 5;
    align-self: center;
    min-height: 66px;
    border-radius: 8px;
    background: var(--green-500);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1.15;
}

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

.bet-button.cashout {
    background: var(--gold);
    color: #151515;
}

.bet-button:disabled {
    background: #303238;
    color: #8c929b;
    cursor: not-allowed;
}

.bet-panel p {
    grid-column: 3;
    grid-row: 5;
    margin: 0;
    color: #8f949c;
    font-size: 12px;
    text-align: center;
}

.toast-line {
    position: fixed;
    z-index: 60;
    right: 20px;
    bottom: 234px;
    max-width: min(620px, calc(100vw - 40px));
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #171819;
    color: var(--yellow);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100vw;
    max-width: 100vw;
    padding: 22px;
    overflow: hidden auto;
    background: rgba(0, 0, 0, 0.62);
}

.modal-card {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(440px, calc(100vw - 44px));
    max-width: 100%;
    padding: 24px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #171819;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.account-card {
    width: min(880px, 100%);
    max-height: min(860px, calc(100vh - 44px));
    overflow: auto;
}

.app-screen-card {
    overflow: hidden auto;
    border-color: rgba(255, 224, 0, 0.22);
    background:
        linear-gradient(180deg, rgba(7, 87, 43, 0.95) 0 88px, #171819 88px),
        #171819;
}

.screen-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    margin: -10px -4px 2px;
    padding-right: 44px;
    color: rgba(255, 255, 255, 0.82);
}

.screen-topline span {
    color: var(--yellow);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.screen-topline strong {
    color: #fff;
    font-size: 18px;
}

.app-screen-card h2 {
    color: #fff;
}

.mine-screen {
    gap: 14px;
}

.mini-game-view,
.imported-game-view {
    min-height: 100vh;
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 224, 0, 0.12), transparent 24%),
        linear-gradient(180deg, #052512, #08140d);
}

.mini-game-header,
.imported-game-header {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto 46px auto;
    gap: 18px;
    align-items: center;
    min-height: 92px;
    padding: 12px 24px;
    background: #07572b;
    border-bottom: 1px solid rgba(255, 224, 0, 0.18);
}

.mini-game-header .lobby-button,
.imported-game-header .lobby-button {
    margin: 0;
}

.mini-game-header span,
.imported-game-header span {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 800;
    text-transform: uppercase;
}

.mini-game-header h1,
.imported-game-header h1 {
    margin: 2px 0 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 54px);
    line-height: 1;
}

.imported-game-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

.imported-game-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #05070a;
}

@media (max-width: 600px), ((orientation: landscape) and (max-height: 500px)) {
    .imported-game-view {
        min-height: 100dvh;
        height: 100dvh;
        grid-template-rows: minmax(0, 1fr);
    }

    .imported-game-header {
        display: none;
    }

    .imported-game-header .lobby-button {
        width: auto;
        height: 30px;
        padding: 0 9px;
        font-size: 11px;
    }

    .imported-game-header span,
    .imported-game-header .deposit-chip {
        display: none;
    }

    .imported-game-header h1 {
        overflow: hidden;
        margin: 0;
        font-size: 17px;
        line-height: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .imported-game-header .game-wallet {
        min-width: 0;
        padding: 5px 7px;
    }

    .imported-game-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        align-self: stretch;
    }
}

.deposit-chip {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--yellow);
    color: #06451f;
    cursor: pointer;
    font-weight: 900;
}

.mini-game-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 18px;
    padding: 18px;
}

.mini-side,
.mini-stage,
.mini-controls {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(13, 14, 16, 0.78);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
}

.mini-side,
.mini-controls {
    padding: 16px;
}

.mini-side h2 {
    margin: 0 0 12px;
    color: var(--yellow);
}

.mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.mini-stat {
    min-height: 76px;
    padding: 10px;
    border-radius: 8px;
    background: #111214;
}

.mini-stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.mini-stat strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 24px;
}

.mini-history {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.mini-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #101812;
}

.mini-history-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-history-row span {
    color: var(--muted);
    font-size: 12px;
}

.mini-history-row b {
    color: var(--yellow);
}

.mini-stage {
    display: grid;
    grid-template-rows: minmax(360px, 1fr) auto;
    min-height: calc(100vh - 128px);
    overflow: hidden;
}

.mini-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
    overflow: hidden;
    background:
        repeating-conic-gradient(from 270deg at 50% 70%, rgba(255, 255, 255, 0.06) 0deg 8deg, transparent 8deg 18deg),
        #050505;
}

.mini-visual::before {
    content: attr(data-symbol);
    display: grid;
    place-items: center;
    width: min(48vw, 420px);
    aspect-ratio: 1;
    border: 10px solid rgba(255, 224, 0, 0.32);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 224, 0, 0.22), transparent 62%),
        rgba(239, 23, 69, 0.16);
    color: #fff;
    font-size: clamp(58px, 9vw, 132px);
    font-weight: 950;
    text-shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
}

.mini-visual.is-spinning::before {
    animation: miniPulse 0.5s ease-in-out infinite alternate;
}

.mini-visual.has-engine {
    padding: 18px;
}

.mini-visual.has-engine::before {
    display: none;
}

.mini-visual.has-engine.is-spinning .engine-board {
    animation: miniPulse 0.5s ease-in-out infinite alternate;
}

.engine-board {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 620px);
    min-height: 300px;
    align-content: center;
    gap: 18px;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid rgba(255, 220, 130, 0.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 224, 0, 0.16), transparent 170px),
        linear-gradient(145deg, rgba(5, 48, 29, 0.94), rgba(3, 11, 8, 0.96));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.engine-caption {
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
    font-weight: 850;
    text-align: center;
}

.dragon-table {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.mini-card {
    display: grid;
    place-items: center;
    min-height: 210px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #dfe6df);
    color: #07120c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.mini-card.red {
    color: #d51a38;
}

.mini-card span {
    color: rgba(5, 20, 13, 0.62);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.mini-card strong {
    font-size: clamp(42px, 7vw, 80px);
    line-height: 1;
}

.versus-pill {
    display: grid;
    place-items: center;
    min-width: 70px;
    min-height: 70px;
    border: 1px solid rgba(255, 224, 0, 0.45);
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.16);
    color: var(--yellow);
    font-size: 17px;
    font-weight: 950;
}

.mine-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.mine-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mine-toolbar span {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(255, 224, 0, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.mine-toolbar b {
    color: var(--yellow);
    font-size: 15px;
}

.mine-grid span,
.mine-grid button {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(23, 145, 75, 0.9), rgba(3, 69, 35, 0.94));
    color: #fff;
    font-size: clamp(17px, 3vw, 30px);
    font-weight: 950;
}

.mine-grid button {
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.mine-grid button:not(:disabled):hover {
    border-color: rgba(255, 224, 0, 0.6);
    filter: brightness(1.15);
    transform: translateY(-2px);
}

.mine-grid button:disabled {
    cursor: default;
}

.mine-grid span.is-open,
.mine-grid button.is-open {
    border-color: rgba(255, 224, 0, 0.54);
    background: linear-gradient(145deg, #ffe000, #20b45b);
    color: #06351c;
}

.mine-grid span.is-mine,
.mine-grid button.is-mine {
    border-color: rgba(255, 90, 105, 0.68);
    background: linear-gradient(145deg, #ff4e5f, #631018);
    color: #fff;
}

.mine-grid button.is-safe {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24), 0 0 18px rgba(255, 224, 0, 0.12);
}

.plinko-board {
    gap: 14px;
}

.plinko-chip {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 74px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fff7a9, #ffe000 44%, #d79800);
    color: #084621;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(255, 224, 0, 0.22);
}

.plinko-peg-field {
    display: grid;
    gap: 5px;
    justify-items: center;
    padding: 4px 0;
}

.plinko-row {
    display: grid;
    grid-template-columns: repeat(var(--row), 1fr);
    gap: clamp(5px, 1.2vw, 10px);
    width: min(100%, calc(var(--row) * 34px));
}

.plinko-row i {
    display: block;
    width: clamp(7px, 1.5vw, 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fff, var(--yellow) 46%, #8a6400);
    box-shadow: 0 0 12px rgba(255, 224, 0, 0.22);
}

.plinko-path {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.plinko-path span {
    display: grid;
    place-items: center;
    min-height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 950;
}

.plinko-path span.right {
    transform: translateY(5px);
    background: rgba(37, 185, 255, 0.2);
    color: #bcecff;
}

.plinko-path span.left {
    transform: translateY(-5px);
    background: rgba(255, 224, 0, 0.18);
    color: #ffef86;
}

.plinko-slots {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 5px;
}

.plinko-slots span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 950;
}

.plinko-slots span.is-hit {
    background: var(--yellow);
    color: #06451f;
}

.road-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 10px;
}

.road-steps span {
    display: grid;
    place-items: center;
    min-height: 74px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

.road-steps span.is-clear {
    border-color: rgba(255, 224, 0, 0.44);
    background: linear-gradient(180deg, #ffe000, #128944);
    color: #06451f;
}

.road-steps span.is-crash {
    border-color: rgba(255, 90, 105, 0.7);
    background: linear-gradient(180deg, #ff4058, #72101d);
}

.cricket-board {
    overflow: hidden;
    min-height: 340px;
}

.pitch-line {
    position: absolute;
    inset: 15% 18%;
    border: 2px dashed rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transform: rotate(-12deg);
}

.scoreboard {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(58vw, 250px);
    aspect-ratio: 1;
    border: 8px solid rgba(255, 224, 0, 0.28);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 0, 0.24), rgba(239, 23, 69, 0.1));
    color: #fff;
    font-size: clamp(68px, 11vw, 130px);
    font-weight: 950;
}

.ludo-board {
    grid-template-columns: 1fr 1fr;
}

.source-ludo-board {
    grid-template-columns: 1fr 1fr;
}

.ludo-mini-track {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(239, 23, 69, 0.12), rgba(37, 185, 255, 0.12)),
        rgba(255, 255, 255, 0.06);
}

.ludo-mini-track span {
    display: grid;
    place-items: center;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    font-weight: 950;
}

.ludo-mini-track span.has-you {
    background: linear-gradient(180deg, #ffe000, #0fa34d);
    color: #06351c;
}

.ludo-mini-track span.has-rival {
    background: linear-gradient(180deg, #25b9ff, #0c4673);
    color: #fff;
}

.dice-lane {
    display: grid;
    gap: 12px;
    min-height: 190px;
    align-content: center;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.dice-lane span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
}

.dice-lane strong {
    color: #fff;
    font-size: clamp(22px, 4vw, 38px);
}

.dice-lane b {
    color: var(--yellow);
    font-size: clamp(38px, 7vw, 72px);
}

.roulette-board {
    justify-items: center;
    padding: 6px 0 2px;
}

.roulette-pointer {
    width: 0;
    height: 0;
    border-right: 16px solid transparent;
    border-bottom: 26px solid var(--yellow);
    border-left: 16px solid transparent;
    filter: drop-shadow(0 4px 8px rgba(255, 200, 0, 0.4));
    animation: zooBob 1.6s ease-in-out infinite;
}
@keyframes zooBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.roulette-wheel {
    display: grid;
    grid-template-columns: repeat(3, minmax(78px, 1fr));
    gap: 16px;
    width: min(100%, 400px);
    margin-top: 6px;
}

/* Premium animal tokens */
.roulette-wheel span {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--tok, #46e58a) 65%, #05130b);
    background:
        radial-gradient(circle at 50% 26%, rgba(255,255,255,0.35) 0 14%, transparent 44%),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tok,#46e58a) 40%, #0a2418) 0 55%, #071a10 100%);
    box-shadow:
        inset 0 4px 10px rgba(255,255,255,0.18),
        inset 0 -12px 20px rgba(0,0,0,0.45),
        0 8px 18px rgba(0,0,0,0.4),
        0 0 0 4px color-mix(in srgb, var(--tok,#46e58a) 14%, transparent);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.roulette-wheel span b {
    font-size: clamp(30px, 8vw, 46px);
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
    margin-top: 8px;
}
.roulette-wheel span small {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tok,#46e58a) 80%, #ffffff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* The zone the player has selected */
.roulette-wheel span.is-picked {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        inset 0 4px 10px rgba(255,255,255,0.22),
        inset 0 -12px 20px rgba(0,0,0,0.4),
        0 10px 22px rgba(0,0,0,0.45),
        0 0 0 4px var(--tok,#46e58a),
        0 0 26px color-mix(in srgb, var(--tok,#46e58a) 55%, transparent);
}
/* The winning result */
.roulette-wheel span.is-hit {
    animation: zooHit 0.7s ease;
    border-color: #ffe000;
    box-shadow:
        inset 0 4px 10px rgba(255,255,255,0.3),
        0 0 0 5px rgba(255,224,0,0.4),
        0 0 34px rgba(255,224,0,0.6);
}
@keyframes zooHit {
    0% { transform: scale(1); }
    35% { transform: scale(1.16) rotate(-4deg); }
    70% { transform: scale(0.98) rotate(3deg); }
    100% { transform: scale(1.05); }
}
/* Spin shimmer while resolving */
.is-spinning .roulette-wheel span b { animation: zooSpin 0.65s cubic-bezier(0.3,0.1,0.2,1); }
@keyframes zooSpin {
    0% { transform: rotate(0) scale(1); }
    100% { transform: rotate(720deg) scale(1.1); }
}

.slot-reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.slot-reels span {
    display: grid;
    place-items: center;
    min-height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff7a9, #f3b400 45%, #744411);
    color: #073b1d;
    font-size: clamp(38px, 8vw, 84px);
    font-weight: 950;
    box-shadow: inset 0 12px 22px rgba(255, 255, 255, 0.2), 0 18px 38px rgba(0, 0, 0, 0.24);
}

.slot-reels span.is-match {
    color: #a70727;
}

.slot-machine-reels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(7px, 1.5vw, 14px);
    padding: 12px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(255, 224, 0, 0.34) 8% 10%, transparent 10% 90%, rgba(255, 224, 0, 0.34) 90% 92%, transparent 92%),
        rgba(0, 0, 0, 0.28);
}

.slot-machine-reels::after {
    content: "";
    position: absolute;
    right: 10px;
    left: 10px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 224, 0, 0.85), transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

.source-reel {
    display: grid;
    grid-template-rows: repeat(3, minmax(48px, 1fr));
    gap: 6px;
    min-height: 220px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.22));
    box-shadow: inset 0 10px 26px rgba(255, 255, 255, 0.08), 0 16px 28px rgba(0, 0, 0, 0.22);
}

.source-reel span {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff7a9, #e7ae00 52%, #7a4a0c);
    color: #06351c;
    font-size: clamp(23px, 4vw, 46px);
    font-weight: 950;
}

.source-reel span.is-payline {
    box-shadow: inset 0 0 0 3px rgba(255, 224, 0, 0.6);
}

.source-reel span.is-match {
    color: #b7062a;
    filter: brightness(1.12);
}

.slot-payline {
    justify-self: center;
    padding: 8px 14px;
    border: 1px solid rgba(255, 224, 0, 0.22);
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.11);
    color: var(--yellow);
    font-size: 13px;
    font-weight: 900;
}

.outcome-board {
    overflow: hidden;
}

.outcome-board::after {
    content: "";
    position: absolute;
    inset: auto -14% -46% 30%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 224, 0, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 224, 0, 0.025), 0 0 0 68px rgba(255, 224, 0, 0.018);
    pointer-events: none;
}

.outcome-board-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.outcome-board-head span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.outcome-board-head strong {
    display: grid;
    place-items: center;
    min-width: 74px;
    min-height: 74px;
    padding: 8px;
    border: 1px solid rgba(255, 224, 0, 0.42);
    border-radius: 50%;
    background: rgba(255, 224, 0, 0.12);
    color: var(--yellow);
    font-size: clamp(28px, 5vw, 54px);
    line-height: 1;
}

.outcome-lanes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.outcome-lane {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 126px;
    padding: 14px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.outcome-lane b {
    color: #fff;
    font-size: clamp(27px, 5vw, 48px);
    line-height: 1;
}

.outcome-lane small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    font-weight: 850;
}

.outcome-lane.is-picked {
    border-color: rgba(37, 185, 255, 0.48);
    box-shadow: inset 0 0 0 1px rgba(37, 185, 255, 0.12);
}

.outcome-lane.is-result {
    border-color: rgba(255, 224, 0, 0.74);
    background: linear-gradient(145deg, rgba(255, 224, 0, 0.24), rgba(16, 142, 68, 0.32));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 224, 0, 0.16);
}

.outcome-lane.is-result b,
.outcome-lane.is-result small {
    color: #fff7a9;
}

.outcome-board.engine-crash .outcome-board-head strong {
    border-color: rgba(255, 76, 101, 0.54);
    background: rgba(239, 23, 69, 0.17);
    color: #ff7087;
}

.outcome-board.engine-color .outcome-lane:nth-child(1),
.outcome-board.engine-fishing .outcome-lane:nth-child(1) {
    background: rgba(21, 170, 91, 0.14);
}

.outcome-board.engine-color .outcome-lane:nth-child(2),
.outcome-board.engine-race .outcome-lane:nth-child(2) {
    background: rgba(239, 23, 69, 0.13);
}

.outcome-board.engine-dice .outcome-lane b,
.outcome-board.engine-cards .outcome-lane b {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
}

.mini-play-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

@media (max-width: 920px) {
    .engine-board {
        min-height: 260px;
        padding: 16px;
    }

    .mini-card {
        min-height: 150px;
    }

    .outcome-lanes {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    }

    .outcome-lane {
        min-height: 104px;
    }

    .plinko-path {
        gap: 4px;
    }

    .plinko-path span {
        min-height: 26px;
        font-size: 10px;
    }

    .plinko-slots {
        gap: 3px;
    }

    .plinko-slots span {
        min-height: 34px;
        font-size: 10px;
    }

    .slot-reels span {
        min-height: 130px;
    }

    .source-reel {
        min-height: 176px;
    }

    .mine-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .mini-visual.has-engine {
        padding: 10px;
    }

    .dragon-table,
    .ludo-board {
        grid-template-columns: 1fr;
    }

    .versus-pill {
        justify-self: center;
        min-width: 56px;
        min-height: 56px;
    }

    .mine-grid {
        gap: 6px;
    }

    .road-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .road-steps span {
        min-height: 58px;
        font-size: 19px;
    }

    .roulette-wheel {
        grid-template-columns: repeat(3, minmax(58px, 1fr));
        gap: 8px;
    }

    .slot-reels {
        gap: 8px;
    }

    .slot-reels span {
        min-height: 105px;
    }

    .slot-machine-reels {
        gap: 5px;
        padding: 7px;
    }

    .source-reel {
        min-height: 138px;
        padding: 5px;
    }

    .source-reel span {
        border-radius: 9px;
        font-size: 20px;
    }

    .slot-payline {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

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

@keyframes miniPulse {
    to {
        transform: scale(1.05) rotate(3deg);
        filter: brightness(1.18);
    }
}

.dragon-visual {
    background:
        radial-gradient(circle at 50% 48%, rgba(239, 23, 69, 0.28), transparent 32%),
        repeating-conic-gradient(from 250deg at 50% 65%, rgba(255, 224, 0, 0.08) 0deg 10deg, transparent 10deg 21deg),
        #120504;
}

.mines-visual {
    background:
        linear-gradient(135deg, rgba(37, 185, 255, 0.18), transparent),
        #071a22;
}

.fishing-visual {
    background:
        radial-gradient(circle at 35% 40%, rgba(37, 185, 255, 0.32), transparent 28%),
        linear-gradient(180deg, #063858, #021622);
}

.live-visual {
    background:
        radial-gradient(circle at 50% 50%, rgba(219, 50, 209, 0.28), transparent 28%),
        #100613;
}

.slot-visual {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 224, 0, 0.28), transparent 28%),
        #1c1003;
}

.mini-result {
    margin: 0;
    min-height: 78px;
    padding: 18px 22px;
    color: #fff;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 900;
    text-align: center;
    background: #111214;
}

.mini-controls {
    display: grid;
    align-content: start;
    gap: 14px;
}

.mini-controls label {
    display: grid;
    gap: 8px;
}

.mini-controls label span {
    color: var(--muted);
    font-weight: 800;
}

.mini-controls input {
    min-height: 54px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
    padding: 0 14px;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}

.mini-choices {
    display: grid;
    gap: 10px;
}

.mini-choice {
    min-height: 58px;
    border-radius: 8px;
    background: #24272d;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

.mini-choice.is-selected {
    background: var(--yellow);
    color: #06451f;
}

.mini-play-button {
    min-height: 70px;
    border-radius: 8px;
    background: var(--green-500);
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    font-weight: 950;
}

.mini-controls p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.modal-card h2,
.modal-card p {
    margin: 0;
}

.modal-card h2 {
    font-size: 26px;
}

.modal-card p {
    color: #9aa0aa;
    font-size: 13px;
    line-height: 1.5;
}

.modal-card .form-error {
    min-height: 18px;
    color: #ff8aa2;
    font-weight: 900;
}

.modal-card label {
    display: grid;
    gap: 7px;
}

.modal-card label span {
    color: #b5bbc4;
    font-weight: 800;
}

.modal-card input {
    min-height: 46px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
    padding: 0 12px;
}

.close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #26282d;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.modal-action {
    min-height: 48px;
    border-radius: 8px;
    background: var(--yellow);
    color: #06451f;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

.auth-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: initial;
    grid-auto-columns: initial;
}

.deposit-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.deposit-presets button {
    min-height: 38px;
    border-radius: 8px;
    background: #26282d;
    color: #fff;
    cursor: pointer;
}

.auth-badges,
.method-row,
.account-actions {
    display: grid;
    gap: 8px;
}

.auth-badges {
    grid-template-columns: repeat(3, 1fr);
}

.auth-badges span {
    min-height: 34px;
    padding: 8px;
    border-radius: 8px;
    background: #0d0e10;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.method-row {
    grid-template-columns: repeat(3, 1fr);
}

.method-row label {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.method-row input {
    width: 15px;
    min-height: auto;
    accent-color: var(--yellow);
}

.account-actions {
    grid-template-columns: repeat(6, 1fr);
}

.account-actions button,
.account-actions a {
    display: grid;
    gap: 6px;
    place-items: center;
    min-height: 78px;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
    cursor: pointer;
    font-weight: 850;
    text-decoration: none;
}

.account-actions span {
    font-size: 24px;
    line-height: 1;
}

.mine-menu-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mine-menu-list button {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.mine-menu-list span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.12);
    font-size: 22px;
}

.mine-menu-list strong,
.mine-menu-list small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mine-menu-list small {
    color: var(--muted);
    font-weight: 800;
}

.account-panels {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 14px;
}

.account-panels h3 {
    margin: 0 0 10px;
    color: var(--yellow);
    font-size: 17px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.info-grid div,
.inbox-list article,
.referral-card {
    min-height: 62px;
    padding: 12px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
}

.info-grid span,
.referral-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.info-grid strong,
.referral-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 19px;
}

.transaction-list,
.inbox-list,
.support-chat {
    display: grid;
    gap: 8px;
}

.transaction-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 74px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
}

.transaction-row strong,
.transaction-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-row span {
    color: var(--muted);
    font-size: 12px;
}

.transaction-row b {
    color: #fff;
    white-space: nowrap;
}

.transaction-row b.positive {
    color: var(--green-500);
}

.transaction-row b.negative {
    color: var(--red);
}

.transaction-row em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    text-align: right;
}

.inbox-list article {
    display: grid;
    gap: 5px;
}

.inbox-list span,
.support-chat span {
    color: var(--muted);
    line-height: 1.4;
}

.referral-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
}

.referral-card strong {
    grid-column: 1;
    color: var(--yellow);
    font-size: 28px;
}

.referral-card button {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--yellow);
    color: #06451f;
    cursor: pointer;
    font-weight: 900;
}

.support-inbox-layout {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    min-height: 420px;
}

.support-thread-list {
    display: grid;
    align-content: start;
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(255, 220, 130, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
}

.support-thread-tab {
    display: grid;
    gap: 3px;
    min-height: 64px;
    padding: 10px;
    border: 1px solid rgba(255, 220, 130, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.support-thread-tab.is-active {
    border-color: rgba(255, 224, 0, 0.42);
    background: linear-gradient(135deg, rgba(255, 224, 0, 0.16), rgba(8, 97, 45, 0.42));
}

.support-thread-tab strong,
.support-thread-tab span,
.support-thread-tab small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-thread-tab strong {
    color: var(--yellow);
    font-size: 13px;
}

.support-thread-tab span,
.support-thread-tab small {
    color: rgba(238, 255, 231, 0.66);
    font-size: 11px;
    font-weight: 800;
}

.support-conversation-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
}

.support-chat {
    display: grid;
    gap: 10px;
    max-height: 300px;
    padding: 12px;
    overflow: auto;
    border: 1px solid rgba(255, 220, 130, 0.14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 224, 0, 0.08), transparent 120px),
        linear-gradient(180deg, rgba(5, 34, 22, 0.94), rgba(2, 17, 12, 0.96));
}

.support-category {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.support-chat-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.18), transparent 120px),
        linear-gradient(135deg, rgba(6, 94, 46, 0.92), rgba(4, 35, 22, 0.96));
}

.support-chat-head h2 {
    margin: 0 0 4px;
    color: #fff4c7;
}

.support-chat-head span {
    color: rgba(238, 255, 231, 0.68);
    font-size: 12px;
    font-weight: 800;
}

.support-chat-head button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 224, 0, 0.34);
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.12);
    color: var(--yellow);
    cursor: pointer;
    font-weight: 950;
}

.support-category button,
.support-proof {
    min-height: 38px;
    border: 1px solid rgba(255, 224, 0, 0.26);
    border-radius: 8px;
    background: #0d0e10;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 1000;
}

.support-category button.is-active {
    background: var(--yellow);
    color: #06451f;
}

.support-ticket-meta,
.support-safe-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.support-ticket-meta strong {
    color: var(--yellow);
}

.support-chat p {
    justify-self: start;
    display: grid;
    gap: 4px;
    width: min(84%, 360px);
    min-height: 54px;
    padding: 10px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255, 255, 255, 0.06);
}

.support-chat p.is-user {
    justify-self: end;
    border-radius: 14px 14px 4px 14px;
    background: rgba(255, 224, 0, 0.12);
    border: 1px solid rgba(255, 224, 0, 0.2);
}

.support-chat p.is-staff {
    border: 1px solid rgba(23, 189, 87, 0.18);
}

.support-chat small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 800;
}

.support-proof-image {
    display: block;
    width: min(100%, 220px);
    max-height: 140px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}

.support-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px 82px;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
}

.support-form input {
    min-height: 42px;
    border: 1px solid rgba(255, 220, 130, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 0 14px;
}

.support-proof {
    display: grid;
    place-items: center;
}

.support-proof input {
    display: none;
}

.support-form button {
    border-radius: 8px;
    background: var(--yellow);
    color: #06451f;
    cursor: pointer;
    font-weight: 900;
}

@media (max-width: 560px) {
    .support-inbox-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .support-thread-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(138px, 68vw);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .support-thread-tab {
        min-height: 58px;
    }

    .support-conversation-panel {
        min-height: 0;
    }

    .support-chat {
        max-height: min(48vh, 360px);
    }
}

.promo-list,
.profile-summary {
    display: grid;
    gap: 10px;
}

.promo-list button,
.profile-summary div {
    min-height: 58px;
    padding: 12px;
    border: 1px solid #303238;
    border-radius: 8px;
    background: #0d0e10;
    color: #fff;
}

.promo-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-weight: 850;
    text-align: left;
}

.promo-list button strong {
    color: var(--yellow);
    white-space: nowrap;
}

.profile-summary div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.profile-summary span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .lobby-header {
        grid-template-columns: 48px minmax(150px, 1fr) auto 46px auto;
    }

    .account-button {
        display: none;
    }

    .vip-banner {
        grid-template-columns: 1fr;
    }

    .vip-crown {
        display: none;
    }

    .aviator-view {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .bet-panel {
        grid-template-columns: minmax(82px, 0.8fr) minmax(96px, 1fr) minmax(124px, 1.1fr);
        padding-inline: 10px;
    }

    .mini-game-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .mini-controls {
        grid-column: 1 / -1;
        grid-template-columns: 220px minmax(0, 1fr) 240px;
        align-items: end;
    }

    .mini-choices {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 920px) {
    .lobby-header {
        gap: 10px;
        min-height: 74px;
        padding: 10px 14px;
    }

    .lobby-brand {
        font-size: 34px;
    }

    .wallet-badge {
        min-height: 42px;
        padding: 4px 8px;
    }

    .wallet-badge strong {
        font-size: 20px;
    }

    .coin-mark {
        width: 32px;
        height: 32px;
    }

    .deposit-button {
        min-height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 22px;
    }

    .audio-toggle {
        width: 42px;
        min-height: 42px;
        font-size: 20px;
    }

    .lobby-scroll {
        padding: 18px 14px 0;
    }

    .vip-banner {
        min-height: 200px;
        padding: 26px;
    }

    .sports-row {
        grid-auto-columns: minmax(330px, 82vw);
    }

    .category-row {
        grid-template-columns: repeat(5, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jackpot-banner {
        grid-template-columns: 70px 1fr 70px;
        min-height: 132px;
    }

    .jackpot-plane,
    .cash-stack {
        width: 86px;
        height: 78px;
    }

    .game-grid {
        grid-template-columns: repeat(3, minmax(185px, 1fr));
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .game-card {
        min-height: 190px;
        scroll-snap-align: start;
    }

    .game-card strong {
        padding: 18px;
        font-size: 24px;
    }

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

    .aviator-view {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .bets-board {
        display: none;
    }

    .flight-main {
        grid-template-rows: 36px 52vh auto;
    }

    .game-bets {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    .toast-line {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-width: none;
        overflow: hidden;
        padding: 9px 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bet-panel {
        grid-template-columns: 130px minmax(120px, 1fr);
        grid-template-rows: auto auto auto auto auto;
    }

    .mode-toggle,
    .stake-line,
    .quick-stakes,
    .auto-cash {
        grid-column: 1;
    }

    .bet-button,
    .bet-panel p {
        grid-column: 2;
    }

    .bet-button {
        grid-row: 2 / 5;
    }

    .mini-game-header,
    .imported-game-header {
        grid-template-columns: 84px minmax(0, 1fr) auto 40px;
    }

    .mini-game-header .deposit-chip,
    .imported-game-header .deposit-chip {
        display: none;
    }

    .mini-game-layout {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .mini-side {
        order: 3;
    }

    .mini-stage {
        min-height: 420px;
    }

    .mini-controls {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .mini-choices {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-panels {
        grid-template-columns: 1fr;
    }

    .account-actions {
        grid-template-columns: repeat(3, 1fr);
    }

    .mine-menu-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    html,
    body,
    .site-shell,
    .lobby-view,
    .aviator-view,
    .mini-game-view {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .modal {
        place-items: start center;
        padding: 12px;
    }

    .modal-card {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        overflow: auto;
        padding: 18px;
    }

    .auth-mode-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .lobby-header {
        grid-template-columns: 32px 116px 62px 34px 68px;
        gap: 6px;
        min-height: 64px;
        padding: 8px;
    }

    .menu-button {
        width: 36px;
        height: 38px;
    }

    .menu-button span {
        width: 29px;
        height: 4px;
    }

    .lobby-brand {
        min-width: 0;
        overflow: hidden;
        font-size: 20px;
        text-overflow: clip;
    }

    .brand-badge {
        border-width: 2px;
        border-radius: 7px;
    }

    .wallet-badge {
        display: flex;
        justify-self: start;
        justify-content: center;
        width: 62px;
        gap: 3px;
        min-height: 36px;
        padding: 3px 7px;
        border-width: 1px;
        border-radius: 18px;
    }

    .wallet-badge .coin-mark,
    .wallet-badge small {
        display: none;
    }

    .wallet-badge strong {
        max-width: 54px;
        overflow: hidden;
        font-size: 14px;
        text-decoration: none;
        text-overflow: ellipsis;
    }

    .audio-toggle {
        width: 34px;
        min-height: 34px;
        font-size: 16px;
    }

    .deposit-button {
        min-height: 38px;
        width: 68px;
        padding: 0;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 800;
    }

    .vip-banner {
        padding: 22px 26px;
    }

    .vip-banner h1 {
        font-size: 30px;
    }

    .vip-banner p {
        font-size: 19px;
        line-height: 1.14;
        word-break: break-word;
    }

    .notice-strip {
        grid-template-columns: 36px 1fr auto;
    }

    .notice-strip p {
        font-size: 20px;
    }

    .speaker-icon {
        width: 34px;
        height: 28px;
    }

    .match-card > span,
    .match-card strong,
    .teams p,
    .teams b,
    .odds span {
        font-size: 20px;
    }

    .bottom-nav {
        min-height: 86px;
    }

    .bottom-nav button {
        font-size: 13px;
    }

    .bottom-nav span {
        font-size: 20px;
    }

    .quick-actions {
        gap: 8px;
    }

    .quick-actions button,
    .rooms-grid button {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 66px;
        padding: 9px;
    }

    .quick-actions span,
    .rooms-grid span {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .leaderboard-strip {
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: 66px;
    }

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

    .game-header {
        grid-template-columns: auto minmax(0, 1fr) auto 32px 34px;
        gap: 6px;
        padding: 7px 8px;
    }

    .game-wallet {
        justify-content: flex-start;
        width: 58px;
        min-width: 58px;
        padding: 0 7px;
        overflow: hidden;
    }

    .game-wallet strong {
        max-width: 48px;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
    }

    .game-wallet span {
        display: none;
    }

    .mini-logo {
        min-width: 0;
        overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-quick-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .game-quick-actions button {
        min-width: 0;
        min-height: 32px;
        padding: 0 5px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lobby-button {
        min-width: 0;
        height: 34px;
        margin-top: 0;
        padding: 0 10px;
        font-size: 12px;
    }

    .game-brand-button {
        height: 32px;
        padding: 0 10px 0 8px;
        font-size: 12px;
    }

    .flight-main {
        grid-template-rows: 34px 420px auto;
    }

    .bet-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        padding: 9px 10px;
        overflow: hidden;
    }

    .mode-toggle,
    .stake-line,
    .quick-stakes,
    .auto-cash,
    .bet-button,
    .bet-panel p {
        grid-column: 1;
    }

    .bet-button {
        grid-row: auto;
        width: 100%;
        min-width: 0;
        min-height: 58px;
        font-size: 16px;
    }

    .bet-button span {
        font-size: 14px;
    }

    .place-both-button {
        position: static;
        grid-column: 1;
        transform: none;
    }

    .mini-game-header,
    .imported-game-header {
        grid-template-columns: 58px minmax(0, 1fr) auto 36px;
        gap: 10px;
        padding: 8px 10px;
    }

    .mini-game-header .lobby-button,
    .imported-game-header .lobby-button {
        width: auto;
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    .mini-game-header h1,
    .imported-game-header h1 {
        font-size: 25px;
    }

    .mini-stage {
        grid-template-rows: 320px auto;
        min-height: 0;
    }

    .mini-visual {
        min-height: 320px;
    }

    .mini-choices {
        grid-template-columns: 1fr;
    }

    .modal {
        align-items: start;
        padding: 0;
    }

    .modal-card {
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .app-screen-card {
        max-height: 100vh;
        padding-top: 18px;
    }

    .screen-topline {
        margin: -8px 0 2px;
        padding-right: 38px;
    }

    .account-card {
        max-height: 100vh;
    }

    .auth-badges,
    .method-row,
    .account-actions,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .transaction-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .transaction-row em {
        grid-column: 1 / -1;
        text-align: left;
    }

    .referral-card {
        grid-template-columns: 1fr;
    }

    .referral-card button {
        grid-column: auto;
        grid-row: auto;
    }

    .support-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .lobby-header {
        grid-template-columns: 32px 96px 54px 32px 62px;
    }

    .lobby-brand em {
        display: none;
    }

    .wallet-badge {
        width: 54px;
    }

    .deposit-button {
        width: 62px;
        font-size: 13px;
    }
}

/* Premium 11bet lobby refresh */
.lobby-view {
    background:
        linear-gradient(180deg, #043d20 0 78px, #080b0d 78px, #10130f 56%, #06391f 100%);
}

.lobby-header {
    border-top: 0;
    background: linear-gradient(180deg, #074a25, #042b18);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}

.lobby-scroll {
    width: min(100%, 1240px);
}

.vip-banner,
.sports-section,
.quick-actions button,
.leaderboard-strip,
.rooms-grid button {
    border: 1px solid rgba(255, 224, 0, 0.16);
    background-color: rgba(9, 14, 16, 0.88);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.vip-banner {
    min-height: 230px;
    background:
        linear-gradient(110deg, rgba(10, 20, 18, 0.98) 0%, rgba(14, 76, 44, 0.92) 56%, rgba(95, 68, 13, 0.92) 100%);
}

.notice-strip {
    min-height: 74px;
}

.casino-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
    gap: 18px;
    align-items: stretch;
    min-height: 250px;
    margin: 8px 0 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 224, 0, 0.26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(9, 10, 12, 0.98) 0%, rgba(25, 21, 11, 0.96) 48%, rgba(6, 70, 35, 0.94) 100%);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.casino-stage-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 28px;
}

.casino-stage-copy span {
    color: var(--yellow);
    font-size: 13px;
    font-weight: 1000;
    text-transform: uppercase;
}

.casino-stage-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 0.94;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.44);
}

.casino-stage-copy p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(15px, 2.1vw, 22px);
    font-weight: 760;
    line-height: 1.4;
}

.stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.stage-actions button,
.provider-tabs button {
    min-height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    font-weight: 950;
}

.stage-actions button {
    padding: 0 16px;
}

.stage-actions button:first-child,
.provider-tabs button.is-active {
    background: var(--yellow);
    color: #052d18;
}

.casino-stage-art {
    position: relative;
    min-height: 250px;
    background:
        linear-gradient(135deg, rgba(255, 224, 0, 0.08), rgba(24, 185, 20, 0.12)),
        #0d1114;
}

.stage-chip,
.stage-card,
.stage-dragon {
    position: absolute;
    display: grid;
    place-items: center;
    font-weight: 1000;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.38);
}

.stage-chip {
    top: 32px;
    right: 38px;
    width: 112px;
    height: 112px;
    border: 8px solid #d7a92c;
    border-radius: 50%;
    background: #101418;
    color: var(--yellow);
    font-size: 44px;
}

.stage-card {
    width: 82px;
    height: 118px;
    border: 2px solid rgba(255, 255, 255, 0.48);
    border-radius: 8px;
    background: #f7f4e8;
    color: #b0092c;
    font-size: 44px;
}

.stage-card-a {
    right: 170px;
    bottom: 28px;
    transform: rotate(-12deg);
}

.stage-card-k {
    right: 92px;
    bottom: 42px;
    color: #111820;
    transform: rotate(10deg);
}

.stage-dragon {
    left: 30px;
    bottom: 34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef1745, #ffb000);
    color: #fff;
    font-size: 50px;
}

.provider-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 24px;
}

.provider-tabs button {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.section-title h2 {
    font-weight: 900;
}

.game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.game-card {
    min-height: 248px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #111417;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), inset 0 -72px 80px rgba(0, 0, 0, 0.5);
}

.game-card:hover {
    border-color: rgba(255, 224, 0, 0.52);
    transform: translateY(-2px);
}

.game-badge {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.44);
    color: var(--yellow);
    font-size: 11px;
    font-weight: 1000;
}

.game-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 0 38%, rgba(255, 255, 255, 0.18) 45%, transparent 54% 100%);
    transform: translateX(-55%);
    opacity: 0.7;
}

.game-card:hover .game-shine {
    transform: translateX(45%);
    transition: transform 0.55s ease;
}

.game-card strong {
    align-self: end;
    padding: 0 16px 36px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 1000;
    text-align: left;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.game-card small {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 14px;
    left: 16px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card img {
    top: 48px;
    height: 118px;
}

.favorite-star {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
}

.card-art {
    top: 56px;
}

.aviator-card {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(239, 23, 69, 0.54)),
        repeating-conic-gradient(from 280deg at 18% 100%, rgba(255, 255, 255, 0.08) 0deg 7deg, transparent 7deg 17deg),
        #17191d;
}

.dragon-card {
    background:
        linear-gradient(135deg, rgba(16, 2, 4, 0.7), rgba(214, 26, 38, 0.9) 58%, rgba(255, 176, 0, 0.95)),
        #28080a;
}

.gold-card {
    background:
        linear-gradient(135deg, #1b1102, #d19216 54%, #ec2b3e),
        #191006;
}

.green-card {
    background:
        linear-gradient(135deg, #0b1f12, #14a44d 54%, #c7f94e),
        #0b1c12;
}

.blue-card {
    background:
        linear-gradient(135deg, #0a122c, #285fe7 58%, #25b9ff),
        #0a1327;
}

.aqua-card {
    background:
        linear-gradient(135deg, #062635, #0ca6d6 58%, #12d08e),
        #071d26;
}

.live-card {
    background:
        linear-gradient(135deg, #1d0a1e, #db32d1 56%, #ef1745),
        #180918;
}

@media (max-width: 1180px) {
    .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .lobby-view {
        background:
            linear-gradient(180deg, #043d20 0 72px, #080b0d 72px, #10130f 64%, #06391f 100%);
    }

    .casino-stage {
        grid-template-columns: 1fr;
        max-width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .casino-stage-copy {
        min-width: 0;
        padding: 16px;
    }

    .casino-stage-copy h1 {
        max-width: 100%;
        font-size: 40px;
        overflow-wrap: anywhere;
    }

    .casino-stage-copy p {
        max-width: 280px;
        width: 100%;
        font-size: 14px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .casino-stage-art {
        display: none;
    }

    .provider-tabs {
        grid-auto-columns: minmax(84px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .provider-tabs button {
        min-width: 84px;
    }

    .game-grid {
        grid-template-columns: repeat(2, minmax(166px, 1fr));
        gap: 12px;
        overflow: visible;
    }

    .game-card {
        min-height: 204px;
    }

    .game-card strong {
        padding: 0 12px 34px;
        font-size: 19px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .game-card small {
        right: 12px;
        left: 12px;
        white-space: normal;
    }

    .card-art {
        top: 58px;
        font-size: 66px;
    }

    .quick-actions button,
    .rooms-grid button {
        min-width: 0;
    }

    .quick-actions strong,
    .quick-actions small,
    .rooms-grid strong,
    .rooms-grid small {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .lobby-scroll {
        max-width: 100vw;
        padding: 12px 10px 0;
        overflow-x: hidden;
    }

    .notice-strip p {
        font-size: 18px;
    }

    .stage-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .category-row {
        gap: 10px;
    }

    .provider-tabs {
        gap: 8px;
    }

    .section-title {
        margin: 14px 0 12px;
    }

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

    .hot-section {
        width: 100%;
        max-width: 370px;
        margin-right: 0;
        margin-left: 0;
        overflow: hidden;
    }

    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .game-card {
        min-height: 176px;
    }

    .game-card img {
        top: 52px;
        height: 76px;
    }

    .card-art {
        top: 54px;
        font-size: 52px;
    }

    .game-badge {
        top: 10px;
        left: 10px;
        min-height: 24px;
        padding: 0 7px;
        font-size: 9px;
    }

    .favorite-star {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    .favorite-star::before {
        width: 18px;
        height: 18px;
    }

    .game-card strong {
        padding: 0 10px 31px;
        font-size: 16px;
        line-height: 1.12;
    }

    .game-card small {
        right: 10px;
        bottom: 10px;
        left: 10px;
        font-size: 10.5px;
        line-height: 1.2;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .quick-actions button {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 70px;
        padding: 9px 8px;
    }

    .quick-actions span {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .quick-actions strong,
    .quick-actions small,
    .rooms-grid strong,
    .rooms-grid small {
        overflow: visible;
        text-overflow: clip;
    }

    .quick-actions strong {
        font-size: 14px;
    }

    .quick-actions small {
        font-size: 12px;
    }

    .jackpot-banner {
        grid-template-columns: 52px minmax(0, 1fr) 42px;
        min-height: 108px;
        margin-top: 18px;
    }

    .jackpot-plane,
    .cash-stack {
        width: 58px;
        height: 56px;
    }

    .jackpot-banner small {
        font-size: 26px;
    }

    .jackpot-banner strong {
        font-size: 30px;
        line-height: 1;
        white-space: nowrap;
    }
}

/* Emerald Vault selected production theme */
:root {
    --emerald-bg: radial-gradient(ellipse at top, #0f3a2b 0%, #082418 42%, #041610 100%);
    --emerald-panel: rgba(12, 35, 24, 0.78);
    --emerald-panel-strong: rgba(7, 24, 16, 0.94);
    --emerald-line: rgba(255, 220, 130, 0.22);
    --emerald-line-strong: rgba(255, 220, 130, 0.38);
    --emerald-text: #f0e4c0;
    --emerald-soft: rgba(240, 228, 192, 0.64);
    --emerald-gold: #ffcc4a;
    --emerald-gold-2: #b58813;
    --emerald-green: #1a6b48;
    --user-screen-width: 452px;
    --emerald-wash: radial-gradient(ellipse at 20% 30%, rgba(201, 165, 61, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(26, 107, 72, 0.35) 0%, transparent 55%);
    --emerald-cta: linear-gradient(180deg, #ffe089 0%, #f5c134 55%, #b58813 100%);
    --emerald-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 204, 74, 0.16), transparent 320px),
        radial-gradient(circle at 90% 8%, rgba(26, 107, 72, 0.28), transparent 300px),
        #020806;
}

.lobby-view {
    width: min(100%, var(--user-screen-width));
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 92px;
    overflow-x: hidden;
    background: var(--emerald-bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 80px rgba(0, 0, 0, 0.56);
}

.lobby-view::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.035;
    mix-blend-mode: overlay;
}

.lobby-header,
.lobby-scroll,
.bottom-nav {
    position: relative;
    z-index: 1;
}

.lobby-header {
    display: grid;
    grid-template-columns: 34px minmax(110px, 1fr) minmax(116px, auto) 34px;
    gap: 10px;
    min-height: 74px;
    padding: 10px 12px 8px;
    border: 0;
    background: linear-gradient(180deg, rgba(5, 37, 25, 0.98), rgba(5, 25, 17, 0.88));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

.menu-button {
    width: 34px;
    height: 34px;
    gap: 4px;
    align-content: center;
}

.menu-button span {
    width: 24px;
    height: 3px;
    background: var(--emerald-text);
}

.lobby-brand {
    min-width: 0;
    gap: 2px;
    font-size: 28px;
    filter: drop-shadow(0 0 15px rgba(201, 165, 61, 0.28));
}

.brand-badge {
    min-width: 1.2em;
    height: 0.98em;
    border: 2px solid rgba(255, 237, 176, 0.78);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffedb0, #c9a53d 60%, #8a6a15);
    color: #102111 !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

.lobby-brand strong {
    color: #fff6d7;
}

.lobby-brand em {
    color: var(--emerald-gold);
    font-size: 0.62em;
}

.wallet-badge {
    min-height: 36px;
    min-width: 0;
    max-width: 126px;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid var(--emerald-line-strong);
    border-radius: 999px;
    color: var(--emerald-text);
    background: rgba(201, 165, 61, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 220, 130, 0.2), 0 5px 14px rgba(0, 0, 0, 0.42);
}

.coin-mark {
    width: 23px;
    height: 23px;
    border: 0;
    background: radial-gradient(circle at 30% 30%, #fff2a8, #d4a017 55%, #7a5410);
    color: #3a2500;
    font-size: 9px;
}

.wallet-badge strong,
.game-wallet strong {
    max-width: 82px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-badge small,
.game-wallet span {
    color: var(--emerald-soft);
    font-size: 10px;
}

.deposit-button,
.account-button,
.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
}

.account-button,
.admin-button {
    width: 42px;
    padding: 0;
}

.deposit-button {
    background: var(--emerald-cta);
    color: #2a1f00;
    box-shadow: 0 8px 20px rgba(201, 165, 61, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.account-button,
.admin-button,
.audio-toggle {
    border: 1px solid var(--emerald-line);
    background: rgba(201, 165, 61, 0.08);
    color: var(--emerald-text);
}

.admin-button {
    color: var(--emerald-gold);
}

.audio-toggle {
    width: 34px;
    min-height: 34px;
    font-size: 17px;
    box-shadow: none;
}

.audio-toggle.is-on {
    background: var(--emerald-cta);
    color: #2a1f00;
    box-shadow: 0 0 16px rgba(201, 165, 61, 0.38);
}

.lobby-scroll {
    width: 100%;
    max-width: var(--user-screen-width);
    padding: 12px 12px 18px;
}

.emerald-promo {
    position: relative;
    min-height: 168px;
    margin: 4px 0 14px;
    overflow: hidden;
    border: 1px solid rgba(201, 165, 61, 0.42);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(20, 60, 42, 0.72), rgba(8, 26, 18, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 220, 130, 0.18), var(--emerald-shadow);
}

.emerald-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--emerald-wash);
}

.emerald-promo::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
    animation: emeraldShimmer 4s ease-in-out infinite;
}

.emerald-promo-art {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 14px;
    bottom: auto;
    width: 142px;
    height: 142px;
    border: 1px solid rgba(255, 220, 130, 0.3);
    border-radius: 18px;
    object-fit: cover;
    mix-blend-mode: normal;
    filter: contrast(1.08) saturate(1.16) brightness(1.05);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 34px rgba(255, 204, 74, 0.13);
    animation: emeraldFloat 3.5s ease-in-out infinite;
}

.emerald-promo-copy {
    position: relative;
    z-index: 4;
    max-width: 58%;
    padding: 16px 12px 14px 16px;
}

.emerald-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(255, 220, 130, 0.4);
    border-radius: 999px;
    background: rgba(201, 165, 61, 0.16);
    color: #ffdc7a;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.emerald-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--emerald-gold);
    box-shadow: 0 0 10px var(--emerald-gold);
    animation: emeraldPulse 1.4s ease-in-out infinite;
}

.emerald-promo-copy p {
    margin: 10px 0 0;
    color: #fdf3d8;
    font-size: 17px;
    line-height: 1;
    font-weight: 850;
}

.emerald-promo-copy h1 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0 8px;
    color: transparent;
    font-size: 36px;
    line-height: 0.95;
    font-style: italic;
    font-weight: 1000;
    background: linear-gradient(180deg, #fff2a8 0%, #ffcc4a 55%, #b58813 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 3px 10px rgba(255, 204, 74, 0.48));
}

.emerald-promo-copy h1 span {
    color: #fdf3d8;
    -webkit-text-fill-color: #fdf3d8;
}

.emerald-promo-copy small {
    display: block;
    max-width: 158px;
    margin-bottom: 11px;
    color: rgba(253, 243, 216, 0.78);
    font-size: 10.5px;
    line-height: 1.25;
    font-weight: 700;
}

.emerald-promo-copy button {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255, 240, 180, 0.55);
    border-radius: 999px;
    background: var(--emerald-cta);
    color: #2a1f00;
    cursor: pointer;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(201, 165, 61, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.promo-spark {
    position: absolute;
    z-index: 4;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe89e;
    box-shadow: 0 0 12px #ffe89e;
    animation: emeraldSpark 3.5s ease-in-out infinite;
}

.promo-spark-a { top: 22px; left: 22px; }
.promo-spark-b { top: 32px; right: 130px; animation-delay: 0.7s; }
.promo-spark-c { right: 78px; bottom: 44px; width: 3px; height: 3px; animation-delay: 1.3s; }

.emerald-dots {
    position: absolute;
    z-index: 5;
    bottom: 8px;
    left: 50%;
    display: flex;
    gap: 4px;
    transform: translateX(-50%);
}

.emerald-dots span {
    width: 6px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 220, 130, 0.28);
}

.emerald-dots span:first-child {
    width: 18px;
    background: var(--emerald-gold);
    box-shadow: 0 0 8px var(--emerald-gold);
}

.emerald-categories {
    display: flex;
    gap: 4px;
    margin: 0 -2px;
    padding: 4px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.emerald-categories::-webkit-scrollbar,
.emerald-providers::-webkit-scrollbar {
    display: none;
}

.emerald-categories button {
    flex: 1 0 58px;
    min-width: 58px;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--emerald-soft);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0;
    cursor: pointer;
}

.emerald-categories button.is-active {
    border-color: rgba(255, 220, 130, 0.38);
    background: linear-gradient(180deg, rgba(201, 165, 61, 0.28), rgba(139, 105, 31, 0.15));
    color: #ffedb0;
    box-shadow: inset 0 1px 0 rgba(255, 220, 130, 0.25), 0 4px 14px rgba(201, 165, 61, 0.24);
}

.emerald-categories img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.45));
}

.emerald-providers {
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, 1fr);
    grid-template-columns: none;
    gap: 7px;
    margin: 0 0 14px;
    overflow-x: auto;
}

.emerald-providers button {
    min-height: 34px;
    border: 1px solid rgba(255, 220, 130, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--emerald-soft);
    font-size: 11px;
}

.emerald-providers button.is-active {
    background: var(--emerald-cta);
    color: #2a1f00;
}

.emerald-games {
    max-width: 100%;
    overflow: visible;
}

.emerald-games .section-title {
    margin: 4px 0 10px;
    display: block;
}

.emerald-games .section-title h2 {
    color: #fff7dc;
    font-size: 21px;
    line-height: 1.1;
}

.emerald-games .section-title button,
.section-title button {
    color: var(--emerald-gold);
}

.emerald-games .section-title button {
    display: none;
}

.emerald-games .game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.emerald-games .game-card {
    position: relative;
    display: block;
    min-height: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid rgba(255, 220, 130, 0.16);
    border-radius: 14px;
    padding: 0;
    background: #0a1a12;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 220, 130, 0.1);
}

.emerald-games .game-card.is-filtered-out {
    display: none;
}

.emerald-games .game-card.is-game-down {
    filter: grayscale(0.75) brightness(0.62);
    opacity: 0.7;
}

.emerald-games .game-card.is-game-down::before {
    content: "DOWN";
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 1000;
}

.controlled-popup {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(2, 8, 6, 0.72);
    backdrop-filter: blur(14px);
}

.controlled-popup section {
    display: grid;
    gap: 14px;
    width: min(420px, 100%);
    padding: 18px;
    border: 1px solid var(--emerald-line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 60, 42, 0.96), rgba(7, 24, 16, 0.98));
    color: var(--emerald-text);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.controlled-popup img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.controlled-popup h2 {
    margin: 0;
    color: #fff7dc;
    font-size: 24px;
}

.controlled-popup p {
    margin: 0;
    color: var(--emerald-soft);
    line-height: 1.45;
}

.controlled-popup div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.controlled-popup button {
    min-height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--emerald-text);
    font-weight: 950;
}

.controlled-popup [data-popup-open] {
    background: var(--emerald-cta);
    color: #2a1f00;
}

.emerald-games .game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 220, 130, 0.08) 0%, transparent 30%, transparent 75%, rgba(0, 0, 0, 0.16) 100%);
    pointer-events: none;
}

.emerald-games .game-card:hover {
    border-color: rgba(255, 220, 130, 0.45);
    transform: translateY(-1px);
}

.emerald-games .game-card img {
    position: static;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.emerald-games .game-card strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.quick-actions button,
.jackpot-banner,
.sports-section,
.leaderboard-strip,
.rooms-grid button,
.match-card,
.modal-card,
.app-screen-card {
    border-color: var(--emerald-line);
    background: rgba(7, 24, 16, 0.86);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 220, 130, 0.08);
}

.quick-actions span,
.rooms-grid span,
.referral-card,
.profile-summary div,
.info-grid div {
    background: linear-gradient(180deg, rgba(201, 165, 61, 0.18), rgba(26, 107, 72, 0.12));
    border-color: var(--emerald-line);
}

.jackpot-banner {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    padding: 18px 20px;
    color: #fff7dc;
    background:
        radial-gradient(circle at 16% 50%, rgba(255, 204, 74, 0.2), transparent 32%),
        linear-gradient(110deg, rgba(7, 24, 16, 0.94), rgba(28, 91, 61, 0.88), rgba(95, 68, 13, 0.86));
}

.jackpot-banner div {
    min-width: 0;
    text-align: left;
}

.jackpot-banner small {
    font-size: clamp(22px, 4.8vw, 42px);
    line-height: 0.95;
}

.jackpot-banner strong {
    display: block;
    font-size: clamp(30px, 5.8vw, 60px);
    line-height: 1;
    overflow-wrap: anywhere;
    text-shadow: 0 3px 0 #bd1f22;
}

.jackpot-plane {
    justify-self: end;
    color: transparent;
    font-size: 0;
}

.bottom-nav {
    position: fixed;
    right: auto;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--user-screen-width));
    min-height: 72px;
    padding: 8px 6px 10px;
    transform: translateX(-50%);
    border-top: 1px solid rgba(255, 220, 130, 0.16);
    background: linear-gradient(180deg, rgba(15, 34, 24, 0.88), rgba(4, 18, 12, 0.96));
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.44);
}

.bottom-nav button {
    gap: 3px;
    min-height: 54px;
    border-radius: 14px;
    color: rgba(240, 228, 192, 0.56);
    font-size: 10px;
}

.bottom-nav span {
    font-size: 21px;
}

.bottom-nav button.is-active {
    color: var(--emerald-gold);
    background: rgba(201, 165, 61, 0.1);
}

.modal {
    background: rgba(2, 8, 6, 0.72);
    backdrop-filter: blur(16px);
}

.modal-card {
    color: var(--emerald-text);
}

.modal-card h2 {
    color: #fff7dc;
}

.screen-submenu {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(92px, 1fr);
    gap: 7px;
    overflow-x: auto;
    margin: 4px 0 12px;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.screen-submenu::-webkit-scrollbar {
    display: none;
}

.screen-submenu button {
    min-height: 34px;
    border: 1px solid var(--emerald-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--emerald-soft);
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
}

.screen-submenu button.is-active {
    background: var(--emerald-cta);
    color: #2a1f00;
    box-shadow: 0 8px 18px rgba(201, 165, 61, 0.24);
}

#signup-modal {
    justify-items: start;
    align-items: start;
    padding: 12px;
}

#signup-modal .modal-card {
    width: min(330px, calc(100vw - 24px));
    max-width: 330px;
    min-width: 0;
    margin-left: 0;
    overflow-x: hidden;
}

#signup-modal .screen-submenu.auth-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: initial;
    width: 100%;
    overflow: hidden;
}

#signup-modal .screen-submenu.auth-mode-switch button {
    min-width: 0;
}

.clarity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.clarity-grid div {
    min-height: 62px;
    padding: 10px;
    border: 1px solid var(--emerald-line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(201, 165, 61, 0.13), rgba(26, 107, 72, 0.08));
}

.clarity-grid span {
    display: block;
    color: var(--emerald-soft);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.clarity-grid strong {
    display: block;
    margin-top: 5px;
    color: #fff7dc;
    font-size: 12px;
    line-height: 1.15;
}

.modal-card input {
    border-color: var(--emerald-line);
    background: rgba(3, 14, 10, 0.92);
    color: var(--emerald-text);
}

.method-row label,
.deposit-presets button,
.promo-list button,
.account-actions button,
.account-actions a,
.mine-menu-list button,
.inbox-list article {
    border-color: var(--emerald-line);
    background: rgba(255, 255, 255, 0.055);
    color: var(--emerald-text);
}

.modal-action,
.support-form button,
.referral-card button,
.mini-play-button,
.bet-button,
.place-both-button {
    background: var(--emerald-cta);
    color: #2a1f00;
    box-shadow: 0 8px 20px rgba(201, 165, 61, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.screen-topline span,
.screen-topline strong,
.profile-summary strong,
.info-grid strong,
.clarity-grid strong,
.transaction-list strong,
.promo-list strong,
.referral-card strong {
    color: var(--emerald-gold);
}

.aviator-view,
.mini-game-view,
.imported-game-view {
    background:
        radial-gradient(circle at 16% 4%, rgba(255, 204, 74, 0.12), transparent 280px),
        linear-gradient(180deg, #081812, #050806 62%, #0a2015);
}

.game-header,
.mini-game-header,
.imported-game-header {
    border-color: rgba(255, 220, 130, 0.16);
    background: linear-gradient(180deg, rgba(5, 37, 25, 0.98), rgba(7, 16, 13, 0.96));
}

.lobby-button,
.game-brand-button,
.game-menu-button,
.deposit-chip,
.game-wallet,
.game-quick-actions button {
    border-color: var(--emerald-line);
    background: rgba(201, 165, 61, 0.09);
    color: var(--emerald-text);
}

.game-quick-actions button:first-child {
    border-color: rgba(255, 225, 0, 0.78);
    background: linear-gradient(180deg, #ffe600, #ffbf00);
    color: #06391f;
}

.mini-logo,
.mini-provider,
.mini-game-header h1,
.imported-game-header h1 {
    color: var(--emerald-gold);
}

.flight-stage,
.bet-panel,
.bets-board,
.mini-side,
.mini-stage,
.mini-controls {
    border-color: rgba(255, 220, 130, 0.14);
    background-color: rgba(7, 24, 16, 0.72);
}

@keyframes emeraldShimmer {
    0% { transform: translateX(-30%); }
    50% { transform: translateX(30%); }
    100% { transform: translateX(-30%); }
}

@keyframes emeraldFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes emeraldSpark {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-6px) scale(1.35); opacity: 1; }
}

@keyframes emeraldPulse {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 1; }
}

@media (max-width: 430px) {
    .lobby-header {
        grid-template-columns: 32px minmax(96px, 1fr) 138px 34px;
        gap: 8px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .lobby-brand {
        width: auto;
        font-size: 25px;
    }

    .wallet-badge {
        gap: 4px;
        padding: 4px 7px;
        width: 138px;
        max-width: 138px;
    }

    .wallet-badge strong {
        max-width: 78px;
        font-size: 12px;
    }

    .coin-mark {
        width: 21px;
        height: 21px;
    }

    .emerald-games .game-grid {
        gap: 8px;
    }
}

@media (min-width: 700px) {
    .lobby-view {
        border-radius: 0 0 34px 34px;
    }
}

/* 11bet full page flows */
.lobby-page {
    display: none;
}

.lobby-page.is-active {
    display: block;
}

.app-page {
    min-height: calc(100vh - 166px);
    padding: 4px 0 24px;
    color: var(--emerald-text);
}

.app-page-head {
    position: relative;
    overflow: hidden;
    margin: 4px 0 14px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 220, 130, 0.26);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 20%, rgba(255, 204, 74, 0.2), transparent 120px),
        linear-gradient(145deg, rgba(8, 40, 26, 0.96), rgba(5, 19, 13, 0.94));
    box-shadow: var(--emerald-shadow), inset 0 1px 0 rgba(255, 220, 130, 0.13);
}

.app-page-head span,
.app-panel-title span,
.level-card span,
.rebate-grid span,
.team-grid span,
.commission-row span,
.account-hero span,
.vip-progress-card span {
    display: block;
    color: rgba(255, 235, 170, 0.72);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-page-head h1,
.app-panel-title h2,
.level-card h2,
.community-panel h2 {
    margin: 4px 0 0;
    color: #fff4c7;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 1000;
}

.app-page-head p,
.level-card p,
.promo-event-card p,
.empty-page-row,
.mail-row span {
    margin: 8px 0 0;
    color: rgba(240, 228, 192, 0.68);
    font-size: 12px;
    line-height: 1.35;
}

.daily-bonus-panel,
.wallet-method-panel,
.wallet-amount-panel,
.commission-card,
.community-panel,
.account-menu-panel,
.settings-panel,
.account-detail-panel,
.vip-progress-card,
.level-card,
.promo-event-card {
    border: 1px solid rgba(255, 220, 130, 0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(10, 38, 25, 0.92), rgba(5, 20, 13, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 220, 130, 0.08);
}

.app-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
}

.app-panel-title h2 {
    font-size: 20px;
}

.app-panel-title strong,
.app-panel-title button,
.level-card button,
.promo-event-card button,
.commission-card button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 220, 130, 0.32);
    border-radius: 999px;
    background: rgba(255, 220, 130, 0.12);
    color: var(--emerald-gold);
    font-size: 11px;
    font-weight: 950;
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 14px 14px;
}

.bonus-grid button,
.amount-grid button,
.redeem-grid button {
    min-height: 86px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 220, 130, 0.26);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 204, 74, 0.2), transparent 44px),
        rgba(2, 14, 9, 0.78);
    color: #fff4c7;
    font-weight: 950;
}

.bonus-grid button::before {
    content: "";
    display: block;
    width: 32px;
    height: 24px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4a8, #ffc32d 58%, #8d5f09);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
}

.bonus-grid button span,
.amount-grid button span,
.redeem-grid span {
    display: block;
    color: rgba(255, 242, 204, 0.78);
    font-size: 11px;
}

.bonus-grid button strong,
.redeem-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--emerald-gold);
    font-size: 13px;
}

.bonus-grid .wide {
    grid-column: 1 / -1;
    min-height: 104px;
}

.page-primary-action,
.fixed-page-actions button,
.wallet-input-row button,
.account-quick-actions button {
    min-height: 48px;
    border: 1px solid rgba(255, 240, 180, 0.5);
    border-radius: 999px;
    background: var(--emerald-cta);
    color: #2a1f00;
    font-size: 15px;
    font-weight: 1000;
    box-shadow: 0 10px 22px rgba(201, 165, 61, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.page-primary-action {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
}

.page-card-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.promo-event-card {
    padding: 14px;
}

.promo-event-card strong {
    display: block;
    margin-top: 4px;
    color: #fff4c7;
    font-size: 18px;
}

.promo-event-card button {
    margin-top: 12px;
}

.page-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
}

.page-tabs button {
    min-height: 38px;
    border-radius: 999px;
    color: rgba(240, 228, 192, 0.62);
    font-size: 11px;
    font-weight: 950;
}

.page-tabs button.is-active {
    background: linear-gradient(180deg, #ffe2a0, #e6b956);
    color: #2a1f00;
}

.level-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.level-badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffe6a1, #b98525);
    color: #3c2500;
    font-size: 28px;
    font-weight: 1000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 10px 22px rgba(0, 0, 0, 0.32);
}

.rebate-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.rebate-grid div,
.team-grid article {
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
}

.rebate-grid strong,
.team-grid strong,
.commission-row strong {
    display: block;
    margin-top: 6px;
    color: var(--emerald-gold);
    font-size: 23px;
}

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

.team-grid article {
    min-height: 116px;
}

.team-grid small {
    display: block;
    margin-top: 8px;
    color: rgba(240, 228, 192, 0.62);
    font-size: 10px;
    line-height: 1.25;
}

.commission-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1.15fr;
    gap: 8px;
    align-items: center;
    padding: 8px 14px 14px;
}

.commission-row div {
    min-height: 66px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.32);
}

.commission-row .total {
    border: 1px solid rgba(255, 220, 130, 0.34);
    background: rgba(255, 220, 130, 0.1);
}

.commission-row button {
    grid-column: 1 / -1;
    min-height: 42px;
    background: linear-gradient(180deg, #55bd77, #0d7d3e);
    color: #fff;
}

.fixed-page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 0;
}

.fixed-page-actions button:last-child {
    background: linear-gradient(180deg, #43c67e, #0b8a48);
    color: #fff;
}

.wallet-page-form,
.wallet-method-panel,
.wallet-amount-panel {
    display: grid;
    gap: 12px;
}

.wallet-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 14px;
}

.wallet-methods label {
    position: relative;
    min-height: 62px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.wallet-methods input {
    position: absolute;
    opacity: 0;
}

.wallet-methods label:has(input:checked) {
    border-color: rgba(255, 220, 130, 0.64);
    background: rgba(255, 220, 130, 0.12);
}

.wallet-methods span {
    display: block;
    color: #fff4c7;
    font-size: 12px;
    font-weight: 950;
}

.wallet-methods strong {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #334cdf;
    color: #fff;
    font-size: 9px;
}

.wallet-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 8px;
    padding: 0 14px;
}

.wallet-input-row input,
.wallet-reference {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff4c7;
    font-size: 18px;
    font-weight: 900;
}

.wallet-reference {
    margin: 0 14px;
    width: calc(100% - 28px);
    padding: 0 14px;
    font-size: 13px;
}

.deposit-exact-card,
.deposit-proof-uploader,
.deposit-proof-field {
    margin: 12px 14px 0;
}

.deposit-exact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 224, 0, 0.32);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.16), transparent 140px),
        linear-gradient(135deg, rgba(4, 78, 36, 0.94), rgba(2, 39, 22, 0.98));
}

.deposit-exact-card span,
.deposit-exact-card small,
.deposit-proof-field span,
.deposit-proof-uploader span,
.deposit-proof-uploader small {
    color: rgba(238, 255, 231, 0.7);
    font-size: 12px;
    font-weight: 900;
}

.deposit-exact-card strong {
    display: block;
    margin-top: 3px;
    color: var(--yellow);
    font-size: clamp(24px, 7vw, 38px);
    font-weight: 1000;
    line-height: 1;
}

.deposit-exact-card b {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.14);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 1000;
}

.deposit-proof-field {
    display: grid;
    gap: 8px;
}

.deposit-proof-field .wallet-reference {
    margin: 0;
    width: 100%;
}

.deposit-proof-uploader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
}

.proof-picker {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 224, 0, 0.34);
    border-radius: 12px;
    background: rgba(255, 224, 0, 0.12);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}

.proof-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.proof-status {
    grid-column: 1 / -1;
    min-height: 28px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(238, 255, 231, 0.62);
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.proof-status.ready {
    color: #7dff9e;
    background: rgba(34, 197, 94, 0.12);
}

.rebate-banner {
    margin: 2px 14px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 220, 130, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at 80% 50%, rgba(255, 204, 74, 0.32), transparent 100px),
        linear-gradient(135deg, rgba(116, 42, 38, 0.72), rgba(19, 65, 43, 0.86));
}

.rebate-banner span,
.rebate-banner small {
    display: block;
    color: rgba(255, 242, 204, 0.78);
    font-size: 11px;
    font-weight: 850;
}

.rebate-banner strong {
    display: block;
    margin: 5px 0;
    color: var(--emerald-gold);
    font-size: 23px;
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 14px 14px;
}

.amount-grid button {
    min-height: 52px;
    color: #2d2207;
    background: linear-gradient(180deg, #ffecbd, #ddb060);
    font-size: 15px;
}

.community-panel {
    margin-top: 12px;
    padding: 14px;
    text-align: center;
}

.community-panel h2 {
    font-size: 18px;
}

.community-panel div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.community-panel button {
    min-height: 42px;
    border: 1px solid rgba(255, 220, 130, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--emerald-text);
    font-size: 10px;
    font-weight: 900;
}

.account-hero {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 88px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.account-avatar {
    position: relative;
    border: 0;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(145deg, #146c4b, #071b12);
    color: #fff4c7;
    font-size: 22px;
    font-weight: 1000;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 220, 130, 0.62), 0 10px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar-wrap {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.avatar-upload-input {
    display: none;
}

.avatar-upload-button,
.inline-upload-action {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 220, 130, 0.36);
    border-radius: 999px;
    background: rgba(255, 220, 130, 0.12);
    color: #ffdf00;
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
}

.inline-upload-action {
    margin-top: 8px;
    min-height: 34px;
    font-size: 12px;
}

.account-hero strong {
    display: block;
    margin-top: 8px;
    color: rgba(240, 228, 192, 0.72);
    font-size: 12px;
}

.account-hero button {
    min-height: 42px;
    border-radius: 999px;
    background: linear-gradient(180deg, #d98361, #9b3e2f);
    color: #fff;
    font-weight: 950;
}

.vip-progress-card {
    padding: 16px;
    background: linear-gradient(135deg, #e6bd6a, #a96a25);
    color: #351f00;
}

.vip-progress-card span,
.vip-progress-card strong {
    color: #3a2400;
}

.progress-track {
    height: 18px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(80, 43, 0, 0.42);
}

.progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff0a8, #ffe000);
}

.account-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

.account-quick-actions button:last-child {
    background: linear-gradient(180deg, #d6755f, #903c32);
    color: #fff;
}

.account-menu-panel,
.settings-panel {
    display: grid;
    padding: 6px 14px;
}

.account-menu-panel button,
.settings-panel button,
.page-transaction-row,
.language-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    border-bottom: 1px solid rgba(255, 220, 130, 0.12);
    color: var(--emerald-text);
    text-align: left;
}

.account-menu-panel button,
.settings-panel button {
    padding: 0 12px;
    border-right: 0;
    border-left: 0;
    background: transparent;
    font: inherit;
}

.account-menu-panel button:last-child,
.settings-panel button:last-child,
.page-transaction-row:last-child,
.mail-row:last-child {
    border-bottom: 0;
}

.account-menu-panel button.is-active span {
    color: var(--emerald-gold);
}

.account-menu-panel strong,
.settings-panel strong,
.page-transaction-row b {
    color: var(--emerald-gold);
    font-size: 12px;
}

.account-detail-panel {
    margin: 12px 0;
    padding: 12px 14px;
}

.account-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.account-detail-head span {
    color: rgba(255, 235, 170, 0.68);
    font-size: 11px;
    text-transform: uppercase;
}

.account-detail-head strong {
    color: #fff4c7;
}

.page-transaction-row div,
.mail-row {
    min-width: 0;
}

.mail-row {
    display: block;
    min-height: 0;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 220, 130, 0.12);
}

.page-transaction-row strong,
.mail-row strong {
    display: block;
    color: #fff4c7;
    font-size: 13px;
}

.mail-row span {
    display: block;
}

.page-transaction-row span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: rgba(240, 228, 192, 0.62);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-transaction-row b.positive {
    color: #69e38e;
}

.page-transaction-row b.negative {
    color: #ff7e75;
}

.redeem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.redeem-grid button {
    min-height: 74px;
}

.language-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0;
}

.language-row button {
    min-height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--emerald-text);
    font-weight: 900;
}

.language-row button.is-active {
    background: linear-gradient(180deg, #43c67e, #0b8a48);
    color: #fff;
}

@media (max-width: 430px) {
    .app-page-head h1 {
        font-size: 25px;
    }

    .bonus-grid,
    .amount-grid,
    .wallet-methods {
        gap: 7px;
    }

    .community-panel div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-grid,
    .redeem-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile account-flow pages */
.mobile-flow {
    min-height: calc(100vh - 110px);
    padding: 0 0 24px;
    color: var(--emerald-text);
}

.mobile-screen-head {
    position: sticky;
    top: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 74px;
    margin: -34px -34px 0;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 220, 130, 0.16);
    background: linear-gradient(180deg, #07542a, #063d22);
}

.mobile-screen-head h1 {
    margin: 0;
    overflow: hidden;
    color: #fffaf0;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 520;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screen-back,
.screen-icon-action,
.screen-link {
    min-height: 44px;
    border-radius: 8px;
    background: transparent;
    color: var(--emerald-gold);
    cursor: pointer;
    font-weight: 950;
}

.screen-back {
    color: #d9ffe8;
    font-size: 44px;
    line-height: 1;
}

.screen-icon-action {
    min-width: 44px;
    border: 1px solid rgba(255, 220, 130, 0.28);
}

.screen-link {
    padding: 0 8px;
    color: var(--emerald-gold);
    font-size: 16px;
}

.mobile-tab-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 28px;
    align-items: end;
    margin: 0 -34px 18px;
    overflow-x: auto;
    padding: 16px 28px 0;
    border-bottom: 1px solid rgba(255, 220, 130, 0.16);
    background: rgba(7, 80, 38, 0.86);
    scrollbar-width: none;
}

.mobile-tab-strip::-webkit-scrollbar,
.invite-tabs::-webkit-scrollbar {
    display: none;
}

.mobile-tab-strip button {
    position: relative;
    min-height: 54px;
    padding: 0 0 12px;
    background: transparent;
    color: #fff9df;
    cursor: pointer;
    font-size: clamp(18px, 3vw, 30px);
    white-space: nowrap;
}

.mobile-tab-strip button.is-active {
    color: var(--emerald-gold);
}

.mobile-tab-strip button.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    border-radius: 999px;
    background: var(--emerald-gold);
}

.nav-badge {
    position: absolute;
    top: -8px;
    right: -20px;
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px 999px 999px 2px;
    background: #ff654f;
    color: #fff;
    font-size: 16px;
}

.promo-panel,
.invite-panel {
    display: none;
}

.promo-panel.is-active,
.invite-panel.is-active {
    display: block;
}

.promo-panel.is-active.rebate-layout,
.promo-panel.is-active[data-promo-panel="event"] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.side-filter-rail {
    position: sticky;
    top: 150px;
    display: grid;
    gap: 14px;
}

.side-filter-rail button {
    position: relative;
    min-height: 62px;
    border: 1px solid rgba(255, 220, 130, 0.34);
    border-radius: 8px;
    background: rgba(8, 75, 36, 0.75);
    color: var(--emerald-gold);
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

.side-filter-rail button.is-active {
    border-color: transparent;
    background: var(--emerald-cta);
    color: #07542a;
}

.promo-banners,
.task-board,
.vip-tier-list,
.rebate-list,
.receiving-account-list,
.security-list,
.login-device-details {
    display: grid;
    gap: 16px;
}

.reward-banner {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 190px;
    overflow: hidden;
    padding: 24px 28px;
    border: 1px solid rgba(255, 220, 130, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(110deg, rgba(5, 68, 31, 0.97), rgba(12, 117, 58, 0.78)),
        radial-gradient(circle at 82% 45%, rgba(255, 224, 0, 0.33), transparent 30%);
    box-shadow: var(--emerald-shadow);
}

.reward-banner::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 145px;
    height: 110px;
    opacity: 0.92;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}

.reward-banner.wheel::after {
    border: 10px solid #d8a52c;
    border-radius: 50%;
    background: conic-gradient(#ee3b3b, #ffe000, #43d765, #2595ff, #9d4dff, #ee3b3b);
}

.reward-banner.friend::after {
    border-radius: 24px;
    background: linear-gradient(135deg, #ffe3c4, #fff), linear-gradient(45deg, transparent 45%, #d4a53b 46% 54%, transparent 55%);
}

.reward-banner.vip::after {
    clip-path: polygon(50% 0, 62% 36%, 100% 28%, 76% 58%, 84% 100%, 50% 78%, 16% 100%, 24% 58%, 0 28%, 38% 36%);
    background: linear-gradient(135deg, #fff6a6, #b98117);
}

.reward-banner.aviator::after {
    background: url("./design-handoff-royalx/assets/games/aviator.png") center / contain no-repeat;
}

.reward-banner span {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
}

.reward-banner strong {
    max-width: 68%;
    color: var(--emerald-gold);
    font-size: clamp(28px, 4.6vw, 52px);
    line-height: 1.04;
}

.reward-banner button,
.task-board button,
.rebate-list button,
.split-actions button,
.page-primary-action,
.withdraw-actions button,
.receiving-account-card > button,
.wallet-account-form button {
    min-height: 50px;
    border-radius: 8px;
    background: var(--emerald-cta);
    color: #073f22;
    cursor: pointer;
    font-weight: 950;
}

.task-board article,
.rebate-list article,
.agent-summary-card,
.commission-card,
.invite-link-card,
.data-ledger-card,
.settlement-card,
.interest-panel,
.withdraw-request-card,
.receiving-account-card,
.wallet-account-form,
.withdraw-pin-card,
.profile-details-form,
.device-summary-card,
.device-settings-row,
.login-device-details,
.security-list,
.vip-mobile-card,
.vip-tier-list article {
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 8px;
    background: rgba(7, 69, 33, 0.78);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.task-board article,
.rebate-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    min-height: 92px;
    padding: 16px;
}

.task-board span,
.rebate-list span,
.data-ledger-card span,
.settlement-card span,
.login-device-details span {
    color: rgba(240, 228, 192, 0.68);
}

.task-board strong,
.rebate-list strong,
.data-ledger-card strong,
.settlement-card strong,
.login-device-details strong {
    color: #fff9df;
}

.vip-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 16px;
    align-items: center;
    padding: 18px;
    background: linear-gradient(135deg, #ffdf1e, #edb617);
    color: #07542a;
}

.vip-mobile-card span,
.vip-mobile-card strong {
    display: block;
    color: #07542a;
}

.vip-tier-list article,
.data-ledger-card,
.interest-panel,
.withdraw-request-card,
.receiving-account-card,
.wallet-account-form,
.withdraw-pin-card,
.profile-details-form,
.login-device-details,
.security-list {
    padding: 18px;
}

.rebate-list article {
    grid-template-columns: 70px minmax(0, 1fr) minmax(150px, 0.8fr) 92px;
}

.rebate-list article > div:not(.provider-mark) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.rebate-list span,
.rebate-list strong {
    display: block;
    min-width: 0;
}

.rebate-list b {
    color: #fff9df;
}

.rebate-list article:not(.is-focus) {
    opacity: 0.78;
}

.provider-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 42px;
    border-radius: 8px;
    background: #fff;
    color: #0b7337;
    font-weight: 1000;
}

.empty-state-block {
    display: grid;
    min-height: 64vh;
    place-content: center;
    justify-items: center;
    gap: 18px;
    color: rgba(240, 228, 192, 0.6);
}

.empty-cube {
    width: 170px;
    height: 140px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent),
        rgba(255, 255, 255, 0.08);
    opacity: 0.72;
}

.filter-row,
.date-pills,
.share-row,
.split-actions,
.withdraw-actions,
.account-action-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-row button,
.filter-row select,
.filter-row input,
.date-pills button,
.share-row button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 220, 130, 0.24);
    border-radius: 999px;
    background: rgba(7, 69, 33, 0.8);
    color: rgba(240, 228, 192, 0.76);
    font: inherit;
    font-weight: 700;
    outline: none;
}

.filter-row select,
.filter-row input {
    min-width: 0;
    flex: 1 1 138px;
    color: #fff8d8;
}

.filter-row input::placeholder {
    color: rgba(240, 228, 192, 0.48);
}

.date-pills button.is-active {
    border-color: transparent;
    background: var(--emerald-cta);
    color: #07542a;
}

.interest-top,
.balance-line,
.app-panel-title,
.device-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.interest-top button,
.device-settings-row strong {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.18);
    color: var(--emerald-gold);
}

.ticker-lane {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 1fr);
    gap: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}

.ticker-lane span {
    overflow: hidden;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(4, 55, 26, 0.82);
    color: rgba(240, 228, 192, 0.74);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticker-lane b,
.commission-row strong,
.data-ledger-card h2 strong {
    color: var(--emerald-gold);
}

.agent-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    gap: 16px;
    padding: 18px;
}

.agent-summary-card span,
.agent-summary-card strong,
.agent-summary-card small,
.data-ledger-card div {
    display: block;
}

.agent-summary-card strong {
    color: var(--emerald-gold);
    font-size: 28px;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.commission-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.invite-tools {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.qr-box {
    width: 150px;
    aspect-ratio: 1;
    border: 8px solid #fff;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #000 12px, transparent 12px 24px, #000 24px 36px, transparent 36px) 0 0 / 48px 48px,
        linear-gradient(#000 12px, transparent 12px 24px, #000 24px 36px, transparent 36px) 0 0 / 48px 48px,
        #fff;
}

.invite-copy-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    align-items: center;
    min-height: 66px;
    padding: 0 12px 0 18px;
    border: 1px solid rgba(255, 220, 130, 0.28);
    border-radius: 8px;
}

.invite-copy-box span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-copy-box button {
    min-height: 42px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.16);
    color: var(--emerald-gold);
}

.tutorial-tree {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    margin: 16px 0;
    text-align: center;
}

.tutorial-tree div {
    grid-column: 1 / -1;
    justify-self: center;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.16);
    color: var(--emerald-gold);
    font-size: 44px;
    font-weight: 1000;
    line-height: 80px;
}

.tutorial-tree span {
    min-height: 66px;
    border: 1px solid rgba(255, 220, 130, 0.2);
    border-radius: 8px;
    line-height: 66px;
}

.data-ledger-card {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.data-ledger-card h2 {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-weight: 520;
}

.data-ledger-card div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.settlement-card {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 12px;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
}

.detailed-deposit,
.withdraw-request-card,
.wallet-account-form,
.profile-details-form {
    display: grid;
    gap: 18px;
}

.wallet-methods.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-methods.channel-row {
    grid-template-columns: repeat(2, minmax(0, 220px));
}

.wallet-input-row.solo {
    grid-template-columns: 64px minmax(0, 1fr);
    border: 1px solid rgba(255, 99, 78, 0.85);
    border-radius: 8px;
    padding: 0 14px;
}

.wallet-input-row.solo span {
    color: #fff;
    font-weight: 900;
}

.wallet-input-row.solo input {
    border: 0;
    background: transparent;
}

.wallet-reminder,
.withdraw-request-card p,
.wallet-account-form p,
.withdraw-pin-card p,
.agent-tutorial p,
.interest-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.45;
}

.add-withdraw-account,
.withdraw-request-card label,
.wallet-account-form label,
.profile-details-form label {
    display: grid;
    gap: 8px;
}

.add-withdraw-account {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 18px;
    border: 1px solid rgba(255, 220, 130, 0.34);
    border-radius: 8px;
    background: rgba(8, 75, 36, 0.72);
    color: rgba(240, 228, 192, 0.75);
    text-align: left;
}

.withdraw-request-card input,
.withdraw-request-card select,
.wallet-account-form input,
.profile-details-form input {
    width: 100%;
    min-height: 58px;
    border: 1px solid rgba(255, 220, 130, 0.28);
    border-radius: 8px;
    background: rgba(4, 55, 26, 0.78);
    color: #fff;
    padding: 0 16px;
}

.withdraw-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.withdraw-actions button:last-child {
    opacity: 0.78;
}

.receiving-account-list article,
.security-list button,
.login-device-details div {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 0 18px;
    border: 1px solid rgba(255, 220, 130, 0.2);
    border-radius: 8px;
    background: rgba(6, 60, 30, 0.62);
    color: #fff;
    text-align: left;
}

.login-device-details strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

.receiving-account-list span,
.security-list strong {
    color: rgba(240, 228, 192, 0.64);
}

.receiving-account-list button,
.security-list button strong {
    color: var(--emerald-gold);
}

.security-list button i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 7px;
    border-radius: 50%;
    background: #ff654f;
}

.pin-display {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 74px;
    overflow: hidden;
    border: 1px solid rgba(255, 220, 130, 0.38);
    border-radius: 8px;
}

.pin-display.is-active {
    border-color: var(--emerald-gold);
}

.pin-display span {
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255, 220, 130, 0.25);
    color: var(--emerald-gold);
    font-size: 28px;
}

.pin-display span:last-child {
    border-right: 0;
}

.withdraw-pin-card {
    display: grid;
    gap: 18px;
}

.withdraw-pin-card strong {
    color: #ff796b;
    font-weight: 650;
}

.numeric-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.numeric-keypad button {
    min-height: 82px;
    border-radius: 8px;
    background: #087436;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}

.account-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 210px;
    margin: -34px -34px 18px;
    padding: 74px 34px 28px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 224, 0, 0.16), transparent 36%),
        linear-gradient(135deg, #0c6a3a, #07542a);
}

.account-profile-hero > .screen-icon-action {
    position: absolute;
    top: 22px;
    right: 84px;
}

.account-profile-hero > .screen-icon-action.mail {
    right: 24px;
}

.account-profile-hero .mail span {
    margin-left: 4px;
    color: #ff604d;
}

.account-profile-hero .account-avatar {
    width: 92px;
    height: 92px;
    font-size: 28px;
}

.account-identity-stack {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.account-identity-stack > span {
    color: #fff;
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 950;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.account-identity-stack > strong {
    color: rgba(238, 255, 231, 0.72);
    font-size: 17px;
    font-weight: 850;
}

.account-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.account-status-pill,
.account-month-pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
}

.account-status-pill {
    background: rgba(30, 210, 104, 0.18);
    box-shadow: inset 0 0 0 1px rgba(30, 210, 104, 0.34);
}

.account-status-pill.is-review,
.account-status-pill.is-limited {
    background: rgba(255, 180, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 180, 0, 0.4);
}

.account-status-pill.is-blocked,
.account-status-pill.is-suspended {
    background: rgba(255, 78, 78, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 78, 78, 0.4);
}

.account-month-pill {
    color: #503900;
    background: linear-gradient(180deg, #ffe56f, #d7aa2e);
}

.account-balance-line {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.account-balance-line strong {
    color: #fff;
    font-size: 34px;
    text-decoration: underline;
    text-underline-offset: 7px;
}

.account-balance-line button {
    color: var(--emerald-gold);
    background: transparent;
}

.account-action-icons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.account-action-icons button {
    min-height: 76px;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 20px;
}

.account-wallet-card,
.account-control-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.account-wallet-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    padding: 14px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 222, 0, 0.16), transparent 130px),
        linear-gradient(135deg, rgba(6, 72, 36, 0.92), rgba(3, 30, 18, 0.96));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.account-wallet-main,
.account-month-level-card {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.account-wallet-main span,
.account-month-level-card span,
.account-control-grid span {
    color: rgba(238, 255, 231, 0.68);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.account-wallet-main strong {
    color: #fff;
    font-size: clamp(27px, 6vw, 44px);
    line-height: 1;
}

.account-wallet-main small,
.account-month-level-card small,
.account-control-grid small {
    color: rgba(238, 255, 231, 0.66);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.account-month-level-card {
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.24);
}

.account-month-level-card strong {
    display: block;
    color: var(--emerald-gold);
    font-size: 15px;
}

.month-level-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.month-level-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #25e078, #ffe000);
}

.account-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-control-grid button {
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 13px;
    border: 1px solid rgba(255, 220, 130, 0.17);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 222, 0, 0.1), transparent 70px),
        linear-gradient(180deg, rgba(8, 72, 38, 0.78), rgba(3, 34, 20, 0.9));
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.account-control-grid strong {
    color: #ffdf00;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.account-vip-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 10px;
}

.account-vip-wide .progress-track {
    grid-column: 1 / -1;
}

.account-primary-list {
    margin-top: 16px;
}

.profile-edit-head,
.device-summary-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.profile-edit-head {
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 8px;
    background: rgba(7, 69, 33, 0.78);
}

.profile-edit-head strong,
.profile-edit-head span,
.device-summary-card span {
    display: block;
}

.brand-small {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 28px;
    font-weight: 950;
}

.brand-small strong {
    color: #fff;
}

.device-summary-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
    margin-bottom: 14px;
    background:
        linear-gradient(135deg, rgba(255, 224, 0, 0.08), rgba(255, 255, 255, 0.04)),
        rgba(7, 69, 33, 0.84);
}

@media (max-width: 720px) {
    .mobile-screen-head {
        margin: -18px -14px 0;
        padding-inline: 14px;
    }

    .mobile-tab-strip {
        margin-inline: -14px;
        gap: 26px;
        padding-inline: 22px;
    }

    .promo-panel.is-active.rebate-layout,
    .promo-panel.is-active[data-promo-panel="event"] {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 12px;
    }

    .side-filter-rail button {
        min-height: 54px;
        font-size: 15px;
    }

    .reward-banner {
        min-height: 155px;
        padding: 18px;
    }

    .reward-banner strong {
        max-width: 78%;
        font-size: 27px;
    }

    .reward-banner::after {
        width: 96px;
        height: 78px;
        right: 12px;
    }

    .rebate-list article {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .rebate-list article button,
    .rebate-list article > div:nth-child(3) {
        grid-column: 2;
    }

    .agent-summary-card,
    .commission-row,
    .invite-tools,
    .settlement-card,
    .withdraw-actions,
    .device-summary-card {
        grid-template-columns: 1fr;
    }

    .qr-box {
        width: 128px;
    }

    .account-profile-hero {
        margin: -18px -14px 14px;
        padding-inline: 24px;
    }

    .account-wallet-card {
        grid-template-columns: 1fr;
    }

    .account-action-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .numeric-keypad button {
        min-height: 70px;
        font-size: 32px;
    }
}

/* Phone-first reset for user finance, promo, invite, and security flows. */
.referral-track-summary,
.referral-track-list {
    display: grid;
    gap: 12px;
}

.referral-track-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0;
}

.referral-track-summary.wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.referral-track-summary div,
.referral-track-row {
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 8px;
    background: rgba(7, 69, 33, 0.78);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.referral-track-summary div {
    display: grid;
    gap: 4px;
    min-height: 82px;
    padding: 14px;
}

.referral-track-summary span,
.referral-track-row span,
.referral-track-row small {
    color: rgba(240, 228, 192, 0.66);
}

.referral-track-summary strong,
.referral-track-row strong {
    min-width: 0;
    color: #fff9df;
    overflow-wrap: anywhere;
}

.referral-track-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 14px;
}

.referral-track-row div {
    min-width: 0;
}

.referral-track-row span,
.referral-track-row strong {
    display: block;
}

.referral-link-card {
    display: grid;
    gap: 14px;
}

.referral-link-form {
    display: grid;
    gap: 8px;
}

.referral-link-form label {
    color: rgba(240, 228, 192, 0.72);
    font-size: 13px;
    font-weight: 800;
}

.referral-link-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
}

.referral-link-form input {
    min-width: 0;
    min-height: 46px;
    border: 1px solid rgba(255, 220, 130, 0.22);
    border-radius: 8px;
    background: rgba(3, 48, 23, 0.82);
    color: #fff9df;
    padding: 0 14px;
    font: inherit;
}

.referral-link-form button,
.referral-link-detail button {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--emerald-cta);
    color: #073f22;
    cursor: pointer;
    font-weight: 950;
}

.referral-link-list {
    display: grid;
    gap: 12px;
}

.referral-link-row {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 8px;
    background: rgba(3, 48, 23, 0.66);
    padding: 14px;
}

.referral-link-main,
.referral-link-detail {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.referral-link-main span,
.referral-link-main small,
.referral-link-detail span,
.referral-link-metrics span {
    color: rgba(240, 228, 192, 0.64);
}

.referral-link-main strong {
    color: #fff9df;
    font-size: 18px;
}

.referral-link-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-link-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.referral-link-metrics div {
    min-width: 0;
    border-radius: 8px;
    background: rgba(255, 220, 21, 0.08);
    padding: 10px;
}

.referral-link-metrics strong {
    display: block;
    color: #ffdc15;
    overflow-wrap: anywhere;
}

.referral-link-detail {
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: center;
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .site-shell,
    .lobby-view {
        width: 100%;
        max-width: 100vw;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .lobby-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: 12px 10px calc(96px + env(safe-area-inset-bottom));
    }

    .lobby-page,
    .app-page,
    .mobile-flow,
    .promo-panel,
    .invite-panel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .mobile-flow {
        min-height: calc(100dvh - 76px);
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .mobile-screen-head {
        grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
        min-height: 64px;
        margin: -12px -10px 0;
        padding: 8px 10px;
    }

    .mobile-screen-head h1 {
        font-size: 24px;
    }

    .screen-back,
    .screen-icon-action,
    .screen-link {
        min-width: 40px;
        min-height: 40px;
    }

    .screen-back {
        font-size: 36px;
    }

    .screen-link {
        font-size: 13px;
    }

    .mobile-tab-strip {
        grid-auto-columns: max-content;
        gap: 8px;
        margin: 0 -10px 12px;
        padding: 8px 10px 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }

    .mobile-tab-strip button {
        min-height: 42px;
        padding: 0 14px 10px;
        border-radius: 14px 14px 0 0;
        font-size: 14px;
        scroll-snap-align: start;
    }

    .mobile-tab-strip .nav-badge {
        top: -12px;
        right: -2px;
    }

    .mobile-tab-strip button.is-active::after {
        height: 3px;
    }

    .nav-badge {
        top: -5px;
        right: -10px;
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .promo-panel.is-active.rebate-layout,
    .promo-panel.is-active[data-promo-panel="event"] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .side-filter-rail {
        position: relative;
        top: auto;
        display: flex;
        gap: 8px;
        width: auto;
        margin: 0 -10px;
        overflow-x: auto;
        padding: 0 10px 6px;
        scrollbar-width: none;
    }

    .side-filter-rail::-webkit-scrollbar {
        display: none;
    }

    .side-filter-rail button {
        flex: 0 0 auto;
        min-width: 88px;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 13px;
    }

    .promo-banners,
    .task-board,
    .vip-tier-list,
    .rebate-list,
    .receiving-account-list,
    .security-list,
    .login-device-details,
    .referral-track-list {
        gap: 10px;
    }

    .reward-banner {
        min-height: 130px;
        padding: 14px;
        border-radius: 14px;
    }

    .reward-banner span {
        font-size: 14px;
    }

    .reward-banner strong {
        max-width: 72%;
        font-size: 22px;
    }

    .reward-banner::after {
        right: 10px;
        bottom: 12px;
        width: 76px;
        height: 64px;
    }

    .rebate-list article {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        padding: 12px;
        border-radius: 14px;
    }

    .rebate-list article > div:nth-child(3),
    .rebate-list article button {
        grid-column: 1 / -1;
    }

    .rebate-list article button {
        width: 100%;
        min-height: 42px;
    }

    .provider-mark {
        width: 42px;
        height: 36px;
        font-size: 13px;
    }

    .filter-row,
    .date-pills,
    .share-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -2px 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .filter-row::-webkit-scrollbar,
    .date-pills::-webkit-scrollbar,
    .share-row::-webkit-scrollbar {
        display: none;
    }

    .filter-row button,
    .date-pills button,
    .share-row button {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }

    .agent-summary-card,
    .commission-row,
    .invite-tools,
    .settlement-card,
    .withdraw-actions,
    .device-summary-card,
    .account-vip-wide,
    .profile-edit-head,
    .referral-track-summary,
    .referral-track-summary.wide {
        grid-template-columns: 1fr;
    }

    .referral-track-row {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
        padding: 12px;
        border-radius: 14px;
    }

    .referral-track-row > div:first-child,
    .referral-track-row small {
        grid-column: 1 / -1;
    }

    .referral-link-form > div,
    .referral-link-detail {
        grid-template-columns: 1fr;
    }

    .referral-link-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .referral-link-row {
        border-radius: 14px;
        padding: 12px;
    }

    .invite-link-card,
    .data-ledger-card,
    .commission-card,
    .agent-summary-card,
    .settlement-card,
    .interest-panel,
    .withdraw-request-card,
    .receiving-account-card,
    .wallet-account-form,
    .withdraw-pin-card,
    .profile-details-form,
    .device-summary-card,
    .device-settings-row,
    .login-device-details,
    .security-list,
    .vip-mobile-card,
    .referral-track-summary div {
        border-radius: 14px;
        padding: 14px;
    }

    .app-panel-title,
    .interest-top,
    .balance-line,
    .device-settings-row,
    .data-ledger-card h2 {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .data-ledger-card div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .invite-tools {
        justify-items: stretch;
    }

    .qr-box {
        justify-self: center;
        width: min(148px, 48vw);
    }

    .invite-copy-box {
        grid-template-columns: minmax(0, 1fr) 68px;
        min-height: 52px;
        padding: 0 8px 0 12px;
    }

    .split-actions,
    .withdraw-actions,
    .fixed-page-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wallet-methods.two,
    .wallet-methods.channel-row,
    .wallet-methods {
        grid-template-columns: 1fr 1fr;
    }

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

    .wallet-input-row,
    .wallet-input-row.solo {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .wallet-input-row button {
        grid-column: 1 / -1;
    }

    .account-profile-hero {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 170px;
        margin: -12px -10px 12px;
        padding: 68px 14px 18px;
    }

    .account-profile-hero .account-avatar {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }

    .account-profile-hero > .screen-icon-action {
        top: 16px;
        right: 64px;
    }

    .account-profile-hero > .screen-icon-action.mail {
        right: 12px;
    }

    .account-balance-line {
        grid-column: 1 / -1;
    }

    .account-balance-line strong {
        font-size: 26px;
    }

    .account-action-icons {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .account-action-icons button {
        min-height: 58px;
        font-size: 14px;
    }

    .account-menu-panel button,
    .settings-panel button,
    .page-transaction-row,
    .receiving-account-list article {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 56px;
        padding: 0 12px;
    }

    .security-list button,
    .login-device-details div {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-height: 56px;
        padding: 12px;
    }

    .security-list button strong,
    .login-device-details strong {
        overflow-wrap: anywhere;
        text-align: left;
    }

    .numeric-keypad {
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom));
        margin-inline: -10px;
        border-radius: 18px 18px 0 0;
    }

    .numeric-keypad button {
        min-height: 58px;
        font-size: 28px;
    }

    .empty-state-block {
        min-height: 48vh;
        padding: 28px 10px;
    }

    .empty-cube {
        width: 112px;
        height: 92px;
    }

    .bottom-nav {
        right: 0;
        left: 0;
        width: 100%;
        min-height: 72px;
        padding: 7px 4px calc(8px + env(safe-area-inset-bottom));
        transform: none;
    }

    .bottom-nav button {
        min-height: 54px;
        border-radius: 12px;
        font-size: 10px;
    }

    .bottom-nav button span {
        font-size: 20px;
    }
}

@media (max-width: 380px) {
    .mobile-screen-head h1 {
        font-size: 21px;
    }

    .mobile-tab-strip button,
    .side-filter-rail button,
    .filter-row button,
    .date-pills button,
    .share-row button {
        font-size: 12px;
    }

    .reward-banner strong {
        max-width: 68%;
        font-size: 19px;
    }

    .amount-grid button,
    .wallet-methods label {
        min-height: 52px;
        font-size: 15px;
    }
}

/* Aviator launch skin: keep the casino lobby emerald, keep the flight table black/red. */
.aviator-view {
    background: #050607;
    color: #f4f5f7;
}

.aviator-view .game-header {
    border-color: #24262b;
    background: linear-gradient(180deg, #1b1c1f, #141517);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    overflow: visible;
}

.aviator-view .game-brand-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: 36px;
    margin: 0;
    padding: 0 14px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: linear-gradient(180deg, #2c2e33, #1d1e22);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.aviator-view .game-brand-button::before {
    content: none;
}

.aviator-view .game-brand-button::after {
    content: none;
}

.aviator-view .mini-logo {
    color: #ef1745;
    font-size: clamp(24px, 2.4vw, 36px);
    font-style: italic;
    font-weight: 1000;
    text-shadow: 0 0 18px rgba(239, 23, 69, 0.32);
}

.aviator-view .game-wallet {
    width: auto;
    min-width: 118px;
    border-color: transparent;
    background: transparent;
    color: #20bf14;
}

.aviator-view .game-wallet strong {
    color: #20bf14;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 950;
}

.aviator-view .game-wallet span {
    display: inline;
    color: #9b9da3;
    font-size: clamp(15px, 1.1vw, 21px);
}

.aviator-view .game-quick-actions button,
.aviator-view .game-audio,
.aviator-view .game-menu-button {
    border-color: rgba(255, 255, 255, 0.08);
    background: #232428;
    color: #d9dce2;
    box-shadow: none;
}

.aviator-view .game-quick-actions button:first-child {
    border-color: rgba(32, 184, 15, 0.42);
    background: #1fb60f;
    color: #fff;
}

.aviator-view .game-menu-button {
    background: transparent;
    color: #8d929b;
}

.aviator-view .game-menu-button::before {
    background: #8d929b;
    box-shadow: 0 7px 0 #8d929b, 0 -7px 0 #8d929b;
}

.aviator-view .bets-board,
.aviator-view .game-bets,
.aviator-view .bet-panel,
.aviator-view .side-summary,
.aviator-view .side-list,
.aviator-view .round-history,
.aviator-view .bets-tabs {
    border-color: #24262b;
    background-color: #111214;
}

.aviator-view .bets-tabs,
.aviator-view .mode-toggle {
    background: #101113;
}

.aviator-view .bets-tabs button.is-active,
.aviator-view .mode-toggle button.is-selected {
    background: #303137;
    color: #fff;
}

.aviator-view .flight-main {
    background: #0a0b0d;
}

.aviator-view .round-history {
    border-bottom: 1px solid #202227;
    background: #111214;
}

.aviator-view .flight-stage {
    border: 1px solid #2a2d33;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 46%, rgba(34, 118, 160, 0.26), transparent 18%),
        repeating-conic-gradient(from 246deg at 0% 100%, rgba(255, 255, 255, 0.052) 0deg 7deg, rgba(0, 0, 0, 0) 7deg 19deg),
        linear-gradient(180deg, #030303, #070708 55%, #030303);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 -90px 100px rgba(0, 0, 0, 0.52);
}

.aviator-view .flight-stage[data-phase="flying"] {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 -90px 100px rgba(0, 0, 0, 0.52),
        inset 0 0 90px rgba(34, 118, 160, 0.16);
}

.aviator-view .flight-stage[data-mood="climb"],
.aviator-view .flight-stage[data-mood="moon"] {
    border-color: rgba(123, 72, 210, 0.5);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 -90px 100px rgba(0, 0, 0, 0.52),
        inset 0 0 120px rgba(100, 42, 170, 0.22);
}

.aviator-view .flight-stage[data-phase="crashed"] {
    border-color: rgba(239, 23, 69, 0.66);
    background:
        radial-gradient(circle at 52% 46%, rgba(239, 23, 69, 0.17), transparent 20%),
        repeating-conic-gradient(from 246deg at 0% 100%, rgba(255, 255, 255, 0.052) 0deg 7deg, rgba(0, 0, 0, 0) 7deg 19deg),
        linear-gradient(180deg, #030303, #060607 55%, #030303);
    box-shadow:
        inset 0 0 0 1px rgba(239, 23, 69, 0.08),
        inset 0 0 100px rgba(239, 23, 69, 0.14);
}

.aviator-view .partner-card strong {
    color: #f2f4f8;
    font-size: clamp(22px, 3.6vw, 46px);
    font-style: normal;
    font-weight: 1000;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.72);
}

.aviator-view .partner-card span {
    color: #ef1745;
    font-size: clamp(36px, 5.8vw, 78px);
    font-weight: 1000;
    letter-spacing: 0;
    line-height: 0.9;
}

.aviator-view .round-loader {
    width: clamp(102px, 14vw, 176px);
    height: 4px;
    margin: 2px auto 3px;
    background: rgba(255, 255, 255, 0.13);
}

.aviator-view .round-loader span {
    background: linear-gradient(90deg, #ef1745 0%, #ef1745 48%, #7b8392 49%, #ffde24 100%);
}

.aviator-view .partner-card small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: rgba(91, 151, 26, 0.58);
    background: rgba(14, 35, 10, 0.78);
    color: #b7f56d;
}

.aviator-view .partner-card small i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #25d328;
    box-shadow: 0 0 10px rgba(37, 211, 40, 0.72);
}

.aviator-view .big-counter {
    color: #fff;
    font-size: clamp(78px, 8.8vw, 150px);
    font-weight: 1000;
    text-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.aviator-view .flight-stage[data-phase="crashed"] .big-counter {
    top: 57%;
    color: #e4002b;
    text-shadow: 0 0 22px rgba(228, 0, 43, 0.24), 0 16px 48px rgba(0, 0, 0, 0.76);
}

.aviator-view .flight-stage[data-phase="crashed"] .flew-away {
    color: #fff;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.76);
}

.aviator-view .flew-away {
    top: 32%;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 39px);
    font-weight: 950;
    letter-spacing: 0;
}

.aviator-view .player-count {
    background: rgba(25, 26, 28, 0.94);
    color: #f3f4f6;
}

.aviator-view .bet-panel {
    border-radius: 18px;
    background: #1a1b1d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.aviator-view .stake-line {
    background: transparent;
}

.aviator-view .stake-line input,
.aviator-view .quick-stakes button,
.aviator-view .auto-cash input {
    border-color: rgba(255, 255, 255, 0.035);
    background: #101113;
    color: #d6d9df;
}

.aviator-view .stake-line button {
    background: #2b2d32;
    color: #aeb3bb;
}

.aviator-view .bet-button {
    border: 2px solid rgba(255, 255, 255, 0.62);
    border-radius: 14px;
    background: #20b80f;
    color: #fff;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 8px 18px rgba(0, 0, 0, 0.3);
}

.aviator-view .bet-button.cashout {
    border-color: rgba(255, 255, 255, 0.72);
    background: #f57c00;
    color: #fff;
}

.aviator-view .place-both-button {
    border: 1px solid rgba(239, 23, 69, 0.38);
    background: #ef1745;
    color: #fff;
    box-shadow: 0 10px 24px rgba(239, 23, 69, 0.18);
}

.aviator-view .bet-row {
    background: #0d0e10;
}

.aviator-view .bet-row.is-win {
    background: rgba(53, 105, 19, 0.42);
}

.aviator-view .x-cell,
.aviator-view .round-result strong {
    color: #22a8ff;
}

.aviator-view .win-cell {
    color: #cdd4dd;
}

.aviator-view .side-footer {
    color: #8f949c;
}

.aviator-view .side-footer strong {
    color: #b8bdc5;
}

@media (max-width: 920px) {
    .aviator-view {
        background: #08090b;
    }

    .aviator-view .game-header {
        grid-template-columns: 56px minmax(0, 1fr) auto 36px 38px;
        align-items: center;
        min-height: 76px;
        padding: 7px 8px 8px;
    }

    .aviator-view .game-brand-button {
        width: auto;
        height: 34px;
        margin: 0;
    }

    .aviator-view .mini-logo {
        min-width: 0;
        padding-top: 0;
        margin-left: -4px;
        overflow: hidden;
        font-size: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .aviator-view .game-wallet {
        justify-self: end;
        min-width: 110px;
        padding-top: 0;
    }

    .aviator-view .game-audio,
    .aviator-view .game-menu-button {
        margin-top: 0;
    }

    .aviator-view .game-quick-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding-top: 0;
    }

    .aviator-view .game-quick-actions button {
        min-height: 30px;
        border-radius: 999px;
        font-size: 11px;
    }

    .aviator-view .flight-main {
        grid-template-rows: 34px auto auto;
        background: #08090b;
    }

    .aviator-view .flight-stage {
        border-radius: 16px;
    }

    .aviator-view .game-bets {
        padding: 8px;
        background: #111214;
    }
}

@media (max-width: 560px) {
    .aviator-view .game-header {
        grid-template-columns: auto minmax(0, 1fr) auto 38px;
        min-height: 54px;
        gap: 5px;
        padding: 6px;
    }

    .aviator-view .game-brand-button {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        height: 32px;
        padding: 0 10px 0 8px;
        font-size: 12px;
    }

    .aviator-view .mini-logo {
        grid-column: 2;
        grid-row: 1;
        font-size: 19px;
    }

    .aviator-view .game-wallet {
        grid-column: 3;
        grid-row: 1;
        min-width: 86px;
        gap: 4px;
        padding-inline: 2px;
    }

    .aviator-view .game-wallet strong {
        font-size: 16px;
    }

    .aviator-view .game-wallet span {
        font-size: 13px;
    }

    .aviator-view .game-wallet span {
        display: inline;
    }

    .aviator-view .game-audio {
        display: none;
    }

    .aviator-view .game-menu-button {
        grid-column: 4;
        grid-row: 1;
    }

    .aviator-view .game-quick-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr);
    }

    .aviator-view .game-quick-actions button {
        min-height: 34px;
        padding-inline: 8px;
    }

    .aviator-view .game-quick-actions button:not(:first-child) {
        display: none;
    }

    .aviator-view .quick-stakes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aviator-view .quick-stakes button {
        min-width: 0;
        overflow: hidden;
        font-size: 16px;
        text-overflow: clip;
    }

    .aviator-view .big-counter {
        max-width: calc(100% - 30px);
        font-size: clamp(58px, 18vw, 82px);
        white-space: nowrap;
    }

    .aviator-view .flew-away {
        top: 32%;
        font-size: clamp(20px, 7vw, 32px);
    }

    .aviator-view .partner-card strong {
        font-size: clamp(18px, 7vw, 28px);
    }

    .aviator-view .partner-card span {
        font-size: clamp(38px, 15vw, 58px);
    }
}

.aviator-view .flight-stage {
    --flight-glow: rgba(35, 139, 194, 0.26);
    isolation: isolate;
    background: linear-gradient(180deg, #05090b, #07090a 58%, #040707);
}

.aviator-view .flight-stage[data-tone="purple"] {
    --flight-glow: rgba(112, 48, 185, 0.28);
}

.aviator-view .flight-stage[data-tone="orange"] {
    --flight-glow: rgba(234, 107, 23, 0.27);
}

.aviator-view .flight-stage[data-tone="green"] {
    --flight-glow: rgba(89, 224, 144, 0.3);
}

.aviator-view .flight-stage::before {
    content: none;
}

.aviator-view > .toast-line {
    display: none;
}

.aviator-view .place-both-button {
    display: none;
}

.aviator-view .flight-stage::after {
    z-index: 1;
    background:
        radial-gradient(circle at 52% 47%, var(--flight-glow), rgba(0, 0, 0, 0) 34%),
        linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, 0.2));
    transition: none;
}

.aviator-view #canvas {
    z-index: 2;
}

.aviator-view .flight-stage[data-mood="climb"],
.aviator-view .flight-stage[data-mood="moon"] {
    border-color: #2a2d33;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 -90px 100px rgba(0, 0, 0, 0.52);
}

.aviator-view .flight-stage[data-mood="climb"] .big-counter,
.aviator-view .flight-stage[data-mood="moon"] .big-counter {
    color: #fff;
    text-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
}

.aviator-view .flight-stage[data-phase="flying"],
.aviator-view .flight-stage[data-phase="crashed"] {
    border-color: #2a2d33;
    background: linear-gradient(180deg, #05090b, #07090a 58%, #040707);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 -90px 100px rgba(0, 0, 0, 0.34),
        inset 0 0 86px var(--flight-glow);
    transition: none;
}

.aviator-view .flight-stage[data-phase="crashed"] .big-counter {
    color: #e4002b;
    text-shadow: 0 0 22px rgba(228, 0, 43, 0.24), 0 16px 48px rgba(0, 0, 0, 0.76);
}

.aviator-win-toast {
    position: fixed;
    z-index: 90;
    top: 12px;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(132px, auto) 38px;
    align-items: center;
    width: min(470px, calc(100vw - 24px));
    min-height: 58px;
    overflow: hidden;
    border: 1px solid rgba(133, 207, 81, 0.48);
    border-radius: 8px;
    background: rgba(29, 48, 25, 0.97);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.52);
    transform: translateX(-50%);
}

.aviator-win-toast > span {
    display: grid;
    gap: 2px;
    padding: 8px 14px;
    color: #d8e4d1;
    font-size: 13px;
}

.aviator-win-toast > span strong {
    color: #fff;
    font-size: 16px;
}

.aviator-win-toast > b {
    display: grid;
    place-items: center;
    align-self: stretch;
    padding: 7px 14px;
    background: #71af4b;
    color: #f7fff3;
    font-size: 13px;
    text-align: center;
}

.aviator-win-toast > b strong {
    display: block;
    font-size: 18px;
}

.aviator-win-toast button {
    align-self: stretch;
    border: 0;
    background: rgba(0, 0, 0, 0.16);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
}

@media (max-width: 920px) {
    .aviator-view .flight-main {
        grid-template-rows: 34px auto auto;
        align-content: start;
        min-height: 0;
    }

    .aviator-view .flight-stage {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1.42;
    }

    .aviator-view .game-bets {
        align-self: start;
    }
}

@media (max-width: 430px) {
    .aviator-win-toast {
        top: 8px;
        grid-template-columns: minmax(126px, 1fr) minmax(112px, auto) 34px;
        min-height: 52px;
    }

    .aviator-win-toast > span,
    .aviator-win-toast > b {
        padding-inline: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviator-view .flight-stage::before {
        animation: none;
    }
}

/* Player-first lobby polish */
:root {
    --user-screen-width: 492px;
    --player-bg-top: #0a2e20;
    --player-bg-mid: #062015;
    --player-bg-low: #03100b;
    --player-card: rgba(8, 27, 19, 0.92);
    --player-card-soft: rgba(16, 63, 43, 0.74);
    --player-line: rgba(255, 221, 124, 0.20);
    --player-line-bright: rgba(255, 221, 124, 0.42);
    --player-gold: #ffd84f;
    --player-green: #1dcf55;
    --player-red: #ef1745;
    --player-blue: #20b7ff;
}

.site-shell {
    background:
        linear-gradient(180deg, rgba(2, 8, 6, 0.86), rgba(2, 8, 6, 0.96)),
        #020806;
}

.lobby-view {
    width: min(100%, var(--user-screen-width));
    min-height: 100dvh;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, var(--player-bg-top) 0%, var(--player-bg-mid) 48%, var(--player-bg-low) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 26px 90px rgba(0, 0, 0, 0.62);
}

.lobby-view::before {
    opacity: 0.028;
    background-image:
        linear-gradient(125deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
        radial-gradient(circle at 28% 18%, rgba(255, 216, 79, 0.18), transparent 34%),
        radial-gradient(circle at 92% 24%, rgba(32, 183, 255, 0.16), transparent 28%);
    background-size: auto, 100% 100%, 100% 100%;
}

.lobby-header {
    grid-template-columns: 40px minmax(0, 1fr) minmax(124px, auto) 40px;
    gap: 9px;
    min-height: 68px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 221, 124, 0.12);
    background: rgba(4, 18, 12, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}

.menu-button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.menu-button span {
    width: 20px;
    height: 2px;
}

.lobby-brand {
    font-size: 25px;
    letter-spacing: 0;
}

.brand-badge {
    min-width: 32px;
    height: 29px;
    border-radius: 8px;
}

.wallet-badge {
    min-height: 36px;
    max-width: 150px;
    padding: 5px 8px;
    border-color: rgba(255, 221, 124, 0.3);
    background: rgba(255, 216, 79, 0.10);
}

.wallet-badge strong,
.game-wallet strong {
    max-width: 88px;
    color: var(--player-green);
    font-size: 14px;
}

.audio-toggle {
    width: 40px;
    min-height: 40px;
    border-radius: 12px;
}

.lobby-scroll {
    width: 100%;
    max-width: var(--user-screen-width);
    padding: 10px 12px 0;
}

.player-command {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
}

.player-balance-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    min-height: 70px;
    padding: 13px 14px;
    border: 1px solid var(--player-line);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 216, 79, 0.14), rgba(32, 183, 255, 0.08)),
        var(--player-card);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.player-balance-tile span,
.player-balance-tile small {
    min-width: 0;
    overflow: hidden;
    color: rgba(240, 228, 192, 0.68);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-balance-tile strong {
    grid-row: 1 / 3;
    grid-column: 2;
    color: #fff8dc;
    font-size: clamp(21px, 7vw, 30px);
    line-height: 1;
    white-space: nowrap;
}

.player-balance-tile b {
    color: var(--player-green);
}

.player-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.player-quick-grid button {
    display: grid;
    gap: 3px;
    justify-items: center;
    min-width: 0;
    min-height: 82px;
    padding: 9px 5px 8px;
    border: 1px solid rgba(255, 221, 124, 0.16);
    border-radius: 14px;
    background: rgba(8, 27, 19, 0.72);
    color: #fff7dc;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-quick-grid button:active {
    transform: translateY(1px) scale(0.99);
}

.player-quick-grid span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 216, 79, 0.14);
    color: var(--player-gold);
    font-size: 12px;
    font-weight: 1000;
}

.player-quick-grid strong,
.player-quick-grid small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-quick-grid strong {
    font-size: 12px;
    line-height: 1;
}

.player-quick-grid small {
    color: rgba(240, 228, 192, 0.58);
    font-size: 9px;
    font-weight: 750;
}

.emerald-promo {
    min-height: 152px;
    margin: 0 0 12px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(12, 47, 32, 0.94), rgba(6, 19, 13, 0.92)),
        #06130d;
}

.emerald-promo::after {
    opacity: 0.54;
}

.emerald-promo-art {
    top: 11px;
    right: 11px;
    width: 130px;
    height: 130px;
    border-radius: 16px;
}

.emerald-promo-copy {
    max-width: calc(100% - 132px);
    padding: 14px 8px 12px 14px;
}

.emerald-tag {
    max-width: 142px;
    font-size: 7.5px;
}

.emerald-promo-copy p {
    margin-top: 9px;
    font-size: 15px;
}

.emerald-promo-copy h1 {
    margin-bottom: 7px;
    font-size: 32px;
}

.emerald-promo-copy small {
    max-width: 150px;
    margin-bottom: 10px;
    font-size: 9.5px;
}

.emerald-promo-copy button {
    min-height: 31px;
    padding-inline: 13px;
}

.emerald-categories {
    position: sticky;
    z-index: 4;
    top: 68px;
    margin: 0 -12px 10px;
    padding: 8px 12px;
    background: rgba(4, 18, 12, 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    border-block: 1px solid rgba(255, 221, 124, 0.09);
}

.emerald-categories button {
    flex-basis: 64px;
    min-width: 64px;
    min-height: 62px;
    border-radius: 14px;
    font-size: 8.5px;
}

.emerald-categories img {
    width: 32px;
    height: 32px;
}

.jackpot-banner {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
    min-height: 102px;
    margin: 0 0 14px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--player-line-bright);
    background:
        linear-gradient(110deg, rgba(255, 216, 79, 0.14), rgba(239, 23, 69, 0.14) 56%, rgba(32, 183, 255, 0.09)),
        var(--player-card);
}

.jackpot-kicker {
    display: inline-flex;
    margin-bottom: 3px;
    color: rgba(240, 228, 192, 0.68);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.jackpot-banner small {
    color: var(--player-gold);
    font-size: 14px;
    line-height: 1;
    text-shadow: none;
}

.jackpot-banner strong {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    color: #fff7d0;
    font-size: clamp(23px, 7.1vw, 35px);
    font-variant-numeric: tabular-nums;
    line-height: 0.98;
    overflow-wrap: normal;
    text-overflow: clip;
    text-shadow: 0 0 18px rgba(255, 216, 79, 0.18);
    white-space: nowrap;
}

.jackpot-banner p {
    margin: 6px 0 0;
    overflow: hidden;
    color: rgba(240, 228, 192, 0.58);
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jackpot-plane {
    width: 96px;
    height: 70px;
    align-self: center;
    opacity: 0.96;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 16px rgba(239, 23, 69, 0.28));
}

.emerald-games .section-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: end;
    margin: 0 0 10px;
}

.emerald-games .section-title h2 {
    color: #fff8dc;
    font-size: 21px;
}

.emerald-games .section-title p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(240, 228, 192, 0.58);
    font-size: 11px;
    font-weight: 750;
}

.emerald-games .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.emerald-games .game-card {
    display: grid;
    align-content: end;
    aspect-ratio: 0.78;
    min-width: 0;
    border-radius: 14px;
    border-color: rgba(255, 221, 124, 0.20);
    background: #07110c;
    text-align: left;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.emerald-games .game-card::after {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 36%, rgba(0, 0, 0, 0.76) 100%),
        linear-gradient(135deg, rgba(255, 216, 79, 0.16), transparent 46%);
}

.emerald-games .game-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.emerald-games .game-card em,
.emerald-games .game-card strong,
.emerald-games .game-card small {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    overflow: hidden;
    clip: auto;
    text-overflow: ellipsis;
}

.emerald-games .game-card em {
    position: absolute;
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
    padding: 3px 7px;
    border: 1px solid rgba(255, 221, 124, 0.32);
    border-radius: 999px;
    background: rgba(4, 18, 12, 0.76);
    color: var(--player-gold);
    font-size: 8px;
    font-style: normal;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
}

.emerald-games .game-card strong {
    display: -webkit-box;
    padding: 0 8px 2px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.emerald-games .game-card small {
    display: block;
    padding: 0 8px 8px;
    color: rgba(240, 228, 192, 0.66);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}

.emerald-games .game-card.is-game-down::before {
    z-index: 4;
}

.bottom-nav {
    width: min(100%, var(--user-screen-width));
    min-height: 76px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: rgba(4, 18, 12, 0.96);
}

.bottom-nav button {
    min-height: 58px;
    border-radius: 14px;
    font-size: 10.5px;
}

.bottom-nav span {
    font-size: 20px;
}

@media (max-width: 430px) {
    .lobby-header {
        grid-template-columns: 38px minmax(0, 1fr) minmax(118px, auto) 38px;
        min-height: 64px;
        padding-inline: 10px;
    }

    .lobby-brand {
        font-size: 23px;
    }

    .wallet-badge {
        width: auto;
        max-width: 132px;
    }

    .wallet-badge strong {
        max-width: 72px;
        font-size: 12px;
    }

    .lobby-scroll {
        padding-inline: 10px;
    }

    .player-quick-grid {
        gap: 7px;
    }

    .player-quick-grid button {
        min-height: 76px;
    }

    .emerald-promo-art {
        width: 118px;
        height: 118px;
    }

    .emerald-promo-copy {
        max-width: calc(100% - 118px);
    }

    .emerald-promo-copy h1 {
        font-size: 29px;
    }

    .emerald-categories {
        top: 64px;
        margin-inline: -10px;
        padding-inline: 10px;
    }

    .jackpot-banner {
        grid-template-columns: minmax(0, 1fr) 88px;
        padding-inline: 12px;
    }

    .jackpot-plane {
        width: 84px;
        height: 62px;
    }

    .emerald-games .game-grid {
        gap: 8px;
    }

    .emerald-games .game-card strong {
        font-size: 11px;
    }

    .emerald-games .game-card small {
        font-size: 8px;
    }
}

@media (max-width: 360px) {
    .player-quick-grid strong {
        font-size: 11px;
    }

    .player-quick-grid small,
    .emerald-games .game-card small {
        display: none;
    }

    .emerald-promo-copy small {
        display: none;
    }

    .jackpot-banner strong {
        font-size: 22px;
    }
}

/* Compact first viewport: keep player actions and first games visible */
.player-command {
    gap: 8px;
    margin-bottom: 10px;
}

.player-balance-tile {
    min-height: 56px;
    padding: 9px 12px;
    border-radius: 14px;
}

.player-balance-tile span,
.player-balance-tile small {
    font-size: 10.5px;
}

.player-balance-tile strong {
    font-size: clamp(20px, 6.2vw, 26px);
}

.player-quick-grid button {
    min-height: 58px;
    padding: 7px 4px 6px;
    border-radius: 13px;
}

.player-quick-grid span {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 10px;
}

.player-quick-grid strong {
    font-size: 11px;
}

.player-quick-grid small {
    font-size: 8px;
}

.emerald-promo {
    height: 126px;
    min-height: 126px;
    border-radius: 16px;
}

.emerald-promo-art {
    top: 9px;
    right: 9px;
    width: 106px;
    height: 106px;
    border-radius: 14px;
}

.emerald-promo-copy {
    max-width: calc(100% - 108px);
    padding: 11px 6px 10px 12px;
}

.emerald-tag {
    min-height: 19px;
    padding-inline: 8px;
    font-size: 7px;
}

.emerald-promo-copy p {
    margin-top: 7px;
    font-size: 12px;
}

.emerald-promo-copy h1 {
    margin-bottom: 5px;
    font-size: 25px;
}

.emerald-promo-copy small {
    display: -webkit-box;
    max-width: 132px;
    margin-bottom: 7px;
    overflow: hidden;
    font-size: 8.5px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.emerald-promo-copy button {
    min-height: 27px;
    padding-inline: 11px;
    font-size: 8.5px;
}

.emerald-categories {
    margin-bottom: 8px;
    padding-block: 6px 8px;
}

.emerald-categories button {
    min-height: 50px;
}

.emerald-categories img {
    width: 26px;
    height: 26px;
}

.jackpot-banner {
    grid-template-columns: minmax(0, 1fr) 78px;
    min-height: 76px;
    margin-bottom: 10px;
    padding: 10px 12px;
}

.jackpot-kicker,
.jackpot-banner p {
    display: none;
}

.jackpot-banner small {
    font-size: 12px;
}

.jackpot-banner strong {
    margin-top: 5px;
    font-size: clamp(22px, 6.4vw, 30px);
}

.jackpot-plane {
    width: 76px;
    height: 50px;
}

.emerald-games .section-title {
    margin-bottom: 8px;
}

.emerald-games .section-title h2 {
    font-size: 20px;
}

.emerald-games .section-title p {
    font-size: 10px;
}

.emerald-games .game-card {
    aspect-ratio: 0.92;
}

.emerald-promo-copy small,
.emerald-games .game-card small {
    display: none;
}

.emerald-promo-copy button {
    margin-top: 6px;
}

.emerald-games .game-card strong {
    padding-bottom: 9px;
}

/* Promo and withdraw polish */
.promo-overview-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 220, 70, 0.24);
    border-radius: 14px;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 222, 0, 0.2), transparent 28%),
        linear-gradient(135deg, rgba(7, 90, 42, 0.96), rgba(5, 62, 30, 0.92));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.promo-overview-card div,
.withdraw-status-grid div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(4, 53, 25, 0.58);
}

.promo-overview-card span,
.promo-quick-strip span,
.withdraw-status-grid span,
.payout-account-card span {
    color: rgba(232, 255, 236, 0.72);
    font-size: 12px;
}

.promo-overview-card strong,
.withdraw-status-grid strong,
.payout-account-card strong {
    color: #fff;
    font-size: 16px;
    font-weight: 950;
}

.promo-overview-card b,
.withdraw-status-grid b {
    color: var(--emerald-gold);
}

.promo-overview-card small {
    color: rgba(232, 255, 236, 0.64);
    font-size: 11px;
}

.promo-overview-card button,
.promo-quick-strip button,
.payout-account-card button {
    min-height: 48px;
    border: 1px solid rgba(255, 220, 70, 0.3);
    border-radius: 10px;
    background: var(--emerald-cta);
    color: #064625;
    cursor: pointer;
    font-weight: 950;
}

.promo-quick-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.promo-quick-strip button {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 8px 6px;
    background: rgba(8, 81, 39, 0.86);
    color: #fff;
}

.promo-quick-strip button.is-active,
.promo-quick-strip button:hover {
    background: var(--emerald-cta);
    color: #064625;
}

.promo-quick-strip strong {
    font-size: 13px;
}

.promo-banners {
    align-content: start;
}

.reward-banner {
    min-height: 164px;
}

.reward-banner small {
    max-width: 58%;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.35;
}

.reward-banner button {
    width: fit-content;
    min-width: 130px;
    align-self: end;
    padding-inline: 16px;
}

.admin-promo-card {
    isolation: isolate;
}

.reward-banner.admin-promo-card.has-image::after {
    display: none;
}

.admin-promo-card .promo-card-image {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: -1;
    width: min(42%, 190px);
    max-height: 72%;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42));
}

.admin-promo-card.compact {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 128px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(255, 220, 130, 0.2);
    border-radius: 8px;
    background:
        radial-gradient(circle at 86% 20%, rgba(255, 204, 74, 0.2), transparent 170px),
        linear-gradient(135deg, rgba(5, 68, 31, 0.96), rgba(7, 116, 55, 0.82));
    box-shadow: var(--emerald-shadow);
}

.admin-promo-card.compact span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 950;
}

.admin-promo-card.compact strong {
    max-width: 72%;
    color: var(--emerald-gold);
    font-size: clamp(20px, 4vw, 34px);
    line-height: 1.05;
}

.admin-promo-card.compact small {
    max-width: 70%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.35;
}

.admin-promo-card.compact button {
    width: fit-content;
    min-width: 118px;
    min-height: 42px;
    border-radius: 8px;
    background: var(--emerald-cta);
    color: #073f22;
    font-weight: 950;
}

.withdraw-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.withdraw-account-slots {
    display: grid;
    gap: 9px;
}

.payout-account-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 10px;
    border: 1px solid rgba(255, 220, 70, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(7, 86, 40, 0.92), rgba(4, 55, 27, 0.85)),
        radial-gradient(circle at 92% 20%, rgba(255, 222, 0, 0.15), transparent 34%);
}

.payout-account-card.is-selected {
    border-color: rgba(255, 222, 0, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 222, 0, 0.22), 0 14px 26px rgba(0, 0, 0, 0.18);
}

.payout-account-card.is-empty {
    background: rgba(7, 69, 33, 0.58);
}

.payout-slot-index {
    display: grid;
    place-items: center;
    min-height: 46px;
    border-radius: 10px;
    background: rgba(255, 220, 70, 0.12);
    color: var(--emerald-gold);
    font-size: 13px;
    font-weight: 950;
    text-align: center;
}

.payout-account-card > div:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.payout-account-card span,
.payout-account-card strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payout-account-card button {
    min-width: 72px;
    padding-inline: 12px;
}

.receiving-account-card > .payout-account-card,
.receiving-account-list .payout-account-card {
    grid-template-columns: 86px minmax(0, 1fr) auto;
}

.receiving-account-card > button {
    width: 100%;
}

@media (max-width: 720px) {
    .promo-overview-card {
        grid-template-columns: 1fr 1fr;
    }

    .promo-overview-card button {
        grid-column: 1 / -1;
    }

    .withdraw-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .promo-overview-card {
        gap: 8px;
        margin: 0 0 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .promo-overview-card div,
    .withdraw-status-grid div {
        padding: 8px;
        border-radius: 10px;
    }

    .promo-overview-card strong,
    .withdraw-status-grid strong {
        font-size: 14px;
    }

    .promo-overview-card small {
        display: none;
    }

    .promo-quick-strip {
        grid-template-columns: repeat(4, minmax(74px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .promo-quick-strip::-webkit-scrollbar {
        display: none;
    }

    .promo-quick-strip button {
        min-height: 50px;
        border-radius: 12px;
    }

    .reward-banner {
        min-height: 122px;
        padding: 12px;
    }

    .reward-banner strong {
        max-width: 70%;
        font-size: 19px;
    }

    .reward-banner small {
        max-width: 66%;
        font-size: 11px;
    }

    .reward-banner button {
        min-width: 108px;
        min-height: 38px;
        padding-inline: 12px;
        font-size: 12px;
    }

    .withdraw-status-grid {
        gap: 6px;
    }

    .withdraw-account-slots {
        gap: 8px;
    }

    .payout-account-card,
    .receiving-account-list .payout-account-card {
        grid-template-columns: 70px minmax(0, 1fr) 64px;
        min-height: 64px;
        padding: 8px;
        border-radius: 12px;
    }

    .payout-slot-index {
        min-height: 42px;
        font-size: 11px;
    }

    .payout-account-card strong {
        font-size: 14px;
    }

    .payout-account-card span {
        font-size: 11px;
    }

    .payout-account-card button {
        min-width: 0;
        min-height: 40px;
        padding-inline: 8px;
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .promo-quick-strip {
        grid-template-columns: repeat(4, 72px);
    }

    .payout-account-card,
    .receiving-account-list .payout-account-card {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .payout-account-card button {
        grid-column: 1 / -1;
    }
}

/* Wallet platform experience */
.money-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    overflow: hidden;
    min-height: 118px;
    padding: 16px;
    border: 1px solid rgba(255, 222, 0, 0.28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 222, 0, 0.22), transparent 26%),
        radial-gradient(circle at 4% 100%, rgba(45, 255, 142, 0.15), transparent 34%),
        linear-gradient(135deg, rgba(7, 92, 43, 0.98), rgba(5, 46, 26, 0.96));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.money-hero-card::after {
    content: "";
    position: absolute;
    inset: auto -12% -42% 38%;
    height: 160px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 222, 0, 0.18), transparent 68%);
    pointer-events: none;
}

.money-hero-card div,
.money-hero-card button {
    position: relative;
    z-index: 1;
}

.money-hero-card span,
.money-hero-card small {
    display: block;
    color: rgba(238, 255, 231, 0.72);
    font-weight: 800;
}

.money-hero-card span {
    font-size: 12px;
    text-transform: uppercase;
}

.money-hero-card strong {
    display: block;
    margin: 4px 0;
    color: #fff;
    font-size: clamp(26px, 7.4vw, 40px);
    line-height: 1;
}

.money-hero-card b {
    color: #ffdf00;
}

.money-hero-card small {
    max-width: 420px;
    font-size: 12px;
    line-height: 1.35;
}

.money-hero-card button,
.lobby-support-fab {
    min-height: 44px;
    border: 1px solid rgba(255, 222, 0, 0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe500, #ffbb00);
    color: #075228;
    cursor: pointer;
    font-weight: 1000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.money-hero-card button {
    padding: 0 16px;
    white-space: nowrap;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px;
}

.payment-option {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 98px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(9, 78, 40, 0.78), rgba(4, 50, 26, 0.86));
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Admin-disabled payment methods are hidden from players entirely.
   High-specificity selectors are needed to beat .deposit-page.wr .payment-option
   which forces display:block !important. */
.payment-option[hidden],
.quick-payment-option[hidden],
.deposit-page.wr .payment-option[hidden],
.deposit-page .quick-payment-option[hidden],
.payment-method-grid .payment-option[hidden] { display: none !important; }

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-option span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 222, 0, 0.14);
    color: #ffdf00;
    font-size: 12px;
    font-weight: 1000;
}

.payment-option strong,
.payment-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-option strong {
    color: #fff;
    font-size: 13px;
}

.payment-option small {
    color: rgba(238, 255, 231, 0.66);
    font-size: 10px;
    font-weight: 800;
}

.payment-option:has(input:checked) {
    border-color: rgba(255, 222, 0, 0.9);
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 222, 0, 0.22), transparent 36%),
        linear-gradient(180deg, rgba(13, 112, 53, 0.92), rgba(5, 71, 34, 0.94));
    box-shadow: inset 0 0 0 1px rgba(255, 222, 0, 0.22), 0 12px 22px rgba(0, 0, 0, 0.24);
}

.payment-option.usdt span,
.payout-account-card.usdt .payout-slot-index {
    background: rgba(30, 198, 126, 0.16);
    color: #39f0a2;
}

.payment-option.binance span,
.payout-account-card.binance .payout-slot-index {
    background: rgba(255, 210, 0, 0.18);
    color: #ffdf00;
}

.payment-option.easypaisa span,
.payout-account-card.easypaisa .payout-slot-index {
    background: rgba(108, 211, 255, 0.15);
    color: #89e6ff;
}

.deposit-method-detail {
    display: grid;
    gap: 9px;
    margin: 0 14px 14px;
    padding: 14px;
    border: 1px solid rgba(255, 220, 130, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(5, 58, 29, 0.88), rgba(3, 35, 20, 0.92));
}

.deposit-method-detail > div:first-child,
.deposit-payment-code {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.deposit-method-detail span,
.deposit-method-detail strong {
    color: #fff;
    font-size: 14px;
    font-weight: 1000;
}

.deposit-method-detail strong {
    color: #ffdf00;
}

.deposit-method-detail p {
    flex: 1;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fffbe4;
    font-size: 15px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.copy-mini {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 224, 0, 0.38);
    border-radius: 10px;
    background: rgba(255, 224, 0, 0.12);
    color: var(--yellow);
    cursor: pointer;
    font-weight: 1000;
    white-space: nowrap;
}

.deposit-method-secondary {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.deposit-method-secondary span {
    color: rgba(238, 255, 231, 0.72);
    font-size: 12px;
}

.deposit-method-secondary strong {
    color: #ff6f6f;
    font-size: 12px;
}

.deposit-method-qr {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 144px;
    padding: 12px;
    border: 1px dashed rgba(255, 224, 0, 0.34);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(238, 255, 231, 0.72);
    text-align: center;
}

.deposit-method-qr img {
    width: min(180px, 70%);
    aspect-ratio: 1;
    object-fit: contain;
    border: 6px solid #fff;
    border-radius: 14px;
    background: #fff;
}

.deposit-method-qr strong {
    color: var(--yellow);
}

.deposit-method-detail small {
    color: rgba(238, 255, 231, 0.7);
    font-size: 12px;
    line-height: 1.35;
}

.crypto-conversion-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 224, 0, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.12), transparent 120px),
        linear-gradient(135deg, rgba(4, 66, 34, 0.94), rgba(2, 31, 19, 0.96));
}

.crypto-conversion-card div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.crypto-conversion-card span,
.crypto-conversion-card small {
    color: rgba(238, 255, 231, 0.68);
    font-size: 12px;
    font-weight: 850;
}

.crypto-conversion-card strong {
    color: #fff;
    font-size: clamp(17px, 4.6vw, 24px);
    overflow-wrap: anywhere;
}

.crypto-conversion-card small {
    grid-column: 1 / -1;
    color: var(--yellow);
}

.cryptapi-payment-card {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(62, 224, 118, 0.26);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(62, 224, 118, 0.16), transparent 120px),
        linear-gradient(145deg, rgba(3, 41, 26, 0.98), rgba(5, 21, 18, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cryptapi-payment-head,
.cryptapi-payment-grid,
.cryptapi-address-box {
    display: grid;
    gap: 8px;
}

.cryptapi-payment-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.cryptapi-payment-head span,
.cryptapi-address-box span {
    color: rgba(238, 255, 231, 0.66);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.cryptapi-payment-head strong {
    color: #fff;
    font-size: 16px;
}

.cryptapi-payment-head small {
    color: var(--yellow);
    font-size: 11px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.cryptapi-payment-grid {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
}

.cryptapi-payment-qr {
    display: grid;
    place-items: center;
    min-height: 112px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(238, 255, 231, 0.62);
    font-size: 12px;
    text-align: center;
}

.cryptapi-payment-qr img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border: 5px solid #fff;
    border-radius: 12px;
    background: #fff;
}

.cryptapi-address-box {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

.cryptapi-address-box strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cryptapi-warning {
    margin: 0;
    color: #ffd94c;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

.withdraw-tabs {
    gap: 18px;
    margin-inline: -14px;
    padding-inline: 14px;
}

.withdraw-tabs button {
    min-height: 44px;
    padding-bottom: 10px;
    font-size: clamp(14px, 3.4vw, 17px);
    font-weight: 850;
}

.withdraw-tabs button.is-active::after {
    height: 3px;
}

.deposit-page .wallet-amount-panel,
.withdraw-page .withdraw-request-card,
.receiving-account-card,
.wallet-account-form {
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 222, 0, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(7, 78, 38, 0.84), rgba(4, 44, 24, 0.92));
}

.withdraw-account-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payout-account-card {
    position: relative;
    overflow: hidden;
    min-height: 88px;
}

.payout-account-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0;
    pointer-events: none;
}

.payout-account-card.is-selected::after,
.payout-account-card:active::after {
    opacity: 1;
}

.payout-slot-index {
    gap: 2px;
}

.payout-slot-index b,
.payout-slot-index span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payout-slot-index b {
    color: inherit;
    font-size: 18px;
    line-height: 1;
}

.payout-slot-index span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    line-height: 1;
}

.payout-account-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: rgba(238, 255, 231, 0.64);
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payout-account-card button[data-remove-wallet] {
    border-color: rgba(255, 86, 86, 0.38);
    background: rgba(255, 86, 86, 0.14);
    color: #ffb6b6;
}

.receiving-account-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.receiving-account-card .app-panel-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.receiving-account-card .app-panel-title button {
    justify-self: end;
    min-height: 40px;
}

.wallet-account-form {
    max-width: 620px;
    margin-inline: auto;
    width: 100%;
}

.wallet-account-form label span,
.withdraw-request-card label span {
    color: rgba(238, 255, 231, 0.76);
    font-weight: 850;
}

.wallet-account-form input:focus,
.withdraw-request-card input:focus,
.withdraw-request-card select:focus {
    border-color: rgba(255, 222, 0, 0.86);
    box-shadow: 0 0 0 3px rgba(255, 222, 0, 0.12);
    outline: none;
}

.lobby-support-fab {
    position: fixed;
    z-index: 30;
    right: max(14px, calc((100vw - var(--user-screen-width)) / 2 + 14px));
    bottom: calc(88px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 30px auto;
    gap: 6px;
    align-items: center;
    min-height: 46px;
    padding: 7px 12px 7px 8px;
}

.lobby-support-fab span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(4, 70, 34, 0.18);
    color: #075228;
    font-size: 10px;
}

.lobby-support-fab strong {
    font-size: 12px;
}

html[data-lobby-page="account"] .lobby-support-fab,
html[data-lobby-page="promotions"] .lobby-support-fab,
html[data-lobby-page="refer"] .lobby-support-fab,
html[data-lobby-page="deposit"] .lobby-support-fab,
html[data-lobby-page="withdraw"] .lobby-support-fab,
html[data-lobby-page="receiving-account"] .lobby-support-fab,
html[data-lobby-page="add-wallet"] .lobby-support-fab,
html[data-lobby-page="withdraw-password"] .lobby-support-fab,
html[data-lobby-page="profile-details"] .lobby-support-fab,
html[data-lobby-page="security"] .lobby-support-fab,
html[data-lobby-page="login-device"] .lobby-support-fab {
    display: none;
}

.modal .method-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .payment-method-grid,
    .withdraw-account-slots,
    .receiving-account-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .money-hero-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 106px;
        padding: 14px;
        border-radius: 16px;
    }

    .money-hero-card button {
        width: 100%;
        min-height: 42px;
    }

    .payment-method-grid {
        gap: 8px;
        padding-inline: 12px;
    }

    .payment-option {
        min-height: 86px;
        padding: 10px;
        border-radius: 12px;
    }

    .payment-option span {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .deposit-method-detail {
        margin-inline: 12px;
        padding: 12px;
        border-radius: 12px;
    }

    .withdraw-account-slots,
    .receiving-account-list {
        grid-template-columns: 1fr;
    }

    .payout-account-card,
    .receiving-account-list .payout-account-card {
        grid-template-columns: 66px minmax(0, 1fr) 66px;
        min-height: 72px;
    }

    .payout-slot-index b {
        font-size: 16px;
    }

    .payout-account-card small {
        font-size: 10px;
    }

    .lobby-support-fab {
        right: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        min-height: 42px;
    }

    .account-profile-hero {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 14px;
    }

    .account-profile-hero .account-avatar {
        width: 78px;
        height: 78px;
    }

    .avatar-upload-button {
        padding-inline: 7px;
        font-size: 9px;
    }

    .account-balance-line {
        grid-column: 1 / -1;
    }

    .account-control-grid {
        grid-template-columns: 1fr;
    }

    .support-category {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .support-form {
        grid-template-columns: minmax(0, 1fr) 58px 68px;
    }

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

@media (max-width: 360px) {
    .payout-account-card,
    .receiving-account-list .payout-account-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .payment-option strong {
        font-size: 12px;
    }

    .payment-option small {
        font-size: 9px;
    }
}

/* User panel responsive finish pass */
:root {
    --user-screen-width: 476px;
    --user-gutter: 12px;
    --bottom-nav-size: 76px;
}

html,
body,
.site-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.lobby-view {
    width: min(100%, var(--user-screen-width));
    max-width: 100%;
    overflow-x: clip;
}

.lobby-scroll {
    width: 100%;
    max-width: 100%;
    padding: 10px var(--user-gutter) calc(var(--bottom-nav-size) + 18px + env(safe-area-inset-bottom));
    overflow-x: clip;
}

.lobby-page,
.app-page,
.mobile-flow,
.wallet-page-form,
.detailed-deposit,
.withdraw-request-card,
.receiving-account-card,
.wallet-account-form,
.profile-details-form,
.support-conversation-panel,
.support-inbox-layout {
    min-width: 0;
    max-width: 100%;
}

.lobby-page,
.app-page,
.mobile-flow {
    overflow-x: clip;
}

.lobby-page > *,
.app-page > *,
.mobile-flow > * {
    min-width: 0;
}

.lobby-header {
    width: 100%;
    max-width: var(--user-screen-width);
    margin-inline: auto;
}

.lobby-brand,
.wallet-badge,
.player-balance-tile,
.player-quick-grid button,
.emerald-promo,
.jackpot-banner,
.game-card,
.promo-overview-card,
.reward-banner,
.money-hero-card,
.payment-option,
.payout-account-card,
.account-control-grid button,
.account-menu-panel button,
.settings-panel button {
    min-width: 0;
}

.lobby-brand,
.player-balance-tile strong,
.jackpot-banner strong,
.account-wallet-main strong,
.money-hero-card strong,
.account-balance-line strong {
    font-variant-numeric: tabular-nums;
}

.player-balance-tile {
    grid-template-columns: minmax(0, 1fr);
}

.player-balance-tile strong {
    grid-row: auto;
    grid-column: auto;
    width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

.player-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.player-quick-grid strong,
.player-quick-grid small,
.emerald-games .game-card strong,
.emerald-games .game-card small,
.payout-slot-index b,
.payout-slot-index span {
    min-width: 0;
}

.emerald-categories {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--user-gutter);
    scrollbar-width: none;
}

.emerald-categories::-webkit-scrollbar {
    display: none;
}

.emerald-categories button {
    flex: 0 0 66px;
    min-width: 66px;
    max-width: 74px;
}

.emerald-games .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
}

.emerald-games .game-card {
    aspect-ratio: 0.78;
    min-height: 0;
}

.jackpot-banner {
    overflow: hidden;
}

.jackpot-banner > div {
    min-width: 0;
    text-align: left;
}

.jackpot-banner strong {
    display: block;
    max-width: 100%;
}

.bottom-nav {
    width: min(100%, var(--user-screen-width));
    max-width: 100%;
}

.bottom-nav button {
    min-width: 0;
    overflow: hidden;
}

.bottom-nav button span {
    line-height: 1;
}

.mobile-screen-head {
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
    width: auto;
    margin: calc(var(--user-gutter) * -1) calc(var(--user-gutter) * -1) 0;
    padding: 8px var(--user-gutter);
}

.mobile-screen-head h1 {
    font-size: 24px;
    line-height: 1.15;
}

.screen-back,
.screen-icon-action,
.screen-link {
    min-width: 40px;
    min-height: 40px;
}

.mobile-tab-strip {
    margin-inline: calc(var(--user-gutter) * -1);
    padding-inline: var(--user-gutter);
    gap: 8px;
}

.mobile-tab-strip button {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 14px;
}

.promo-overview-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.promo-overview-card button {
    grid-column: 1 / -1;
}

.promo-quick-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(84px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.promo-quick-strip::-webkit-scrollbar {
    display: none;
}

.promo-panel.is-active.rebate-layout,
.promo-panel.is-active[data-promo-panel="event"] {
    grid-template-columns: 1fr;
}

.side-filter-rail {
    position: static;
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--user-gutter) * -1);
    padding: 0 var(--user-gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.side-filter-rail::-webkit-scrollbar {
    display: none;
}

.side-filter-rail button {
    flex: 0 0 auto;
    min-width: 86px;
    min-height: 40px;
    padding-inline: 12px;
    border-radius: 999px;
    font-size: 13px;
}

.reward-banner {
    border-radius: 14px;
}

.reward-banner strong {
    max-width: 72%;
}

.reward-banner small {
    max-width: 68%;
}

.settlement-card,
.agent-summary-card,
.commission-row,
.invite-tools,
.device-summary-card,
.account-wallet-card,
.account-vip-wide {
    grid-template-columns: 1fr;
}

.filter-row,
.date-pills,
.share-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-row::-webkit-scrollbar,
.date-pills::-webkit-scrollbar,
.share-row::-webkit-scrollbar {
    display: none;
}

.filter-row button,
.date-pills button,
.share-row button {
    flex: 0 0 auto;
}

.invite-copy-box,
.referral-link-detail,
.referral-link-form > div {
    grid-template-columns: 1fr;
}

.invite-copy-box button,
.referral-link-detail button,
.referral-link-form button {
    width: 100%;
}

.referral-track-summary,
.referral-track-summary.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.referral-track-row > div:first-child,
.referral-track-row small {
    grid-column: 1 / -1;
}

.money-hero-card {
    grid-template-columns: 1fr;
    gap: 12px;
}

.money-hero-card button {
    width: 100%;
}

.payment-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 0;
}

.payment-option {
    min-height: 86px;
}

.deposit-method-detail {
    margin-inline: 0;
}

.deposit-method-detail > div:first-child,
.deposit-payment-code,
.cryptapi-payment-head {
    align-items: stretch;
}

.deposit-payment-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.deposit-method-detail p,
.cryptapi-address-box strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.amount-grid button {
    min-height: 54px;
}

.wallet-input-row,
.wallet-input-row.solo {
    grid-template-columns: 48px minmax(0, 1fr);
}

.crypto-conversion-card,
.cryptapi-payment-grid {
    grid-template-columns: 1fr;
}

.cryptapi-payment-qr {
    justify-self: center;
    width: 132px;
    min-height: 132px;
}

.withdraw-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.withdraw-account-slots,
.receiving-account-list {
    grid-template-columns: 1fr;
}

.payout-account-card,
.receiving-account-list .payout-account-card {
    grid-template-columns: 66px minmax(0, 1fr) 64px;
}

.payout-account-card button {
    min-width: 0;
}

.withdraw-actions,
.fixed-page-actions {
    grid-template-columns: 1fr;
}

.account-profile-hero {
    grid-template-columns: 76px minmax(0, 1fr);
    margin: calc(var(--user-gutter) * -1) calc(var(--user-gutter) * -1) 12px;
    padding: 66px var(--user-gutter) 18px;
}

.account-profile-hero .account-avatar {
    width: 72px;
    height: 72px;
}

.account-identity-stack > span {
    font-size: 22px;
}

.account-balance-line {
    grid-column: 1 / -1;
}

.account-action-icons,
.account-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-action-icons button {
    min-height: 62px;
    font-size: 14px;
}

.account-control-grid button {
    min-height: 86px;
}

.account-menu-panel button,
.settings-panel button,
.security-list button,
.login-device-details div,
.receiving-account-list article {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.profile-edit-head {
    grid-template-columns: 72px minmax(0, 1fr);
}

.support-inbox-layout {
    grid-template-columns: 1fr;
}

.support-thread-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(142px, 68%);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.support-category {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-form {
    grid-template-columns: minmax(0, 1fr) 56px 68px;
}

.account-profile-hero > .screen-icon-action {
    top: 14px;
    right: auto;
    left: var(--user-gutter);
}

.account-profile-hero > .screen-icon-action.mail {
    right: var(--user-gutter);
    left: auto;
    min-width: 74px;
}

.account-profile-hero .mail span {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 999px;
    background: #ff604d;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

@media (min-width: 760px) {
    :root {
        --user-screen-width: 502px;
        --user-gutter: 14px;
    }

    .lobby-view {
        border-radius: 0 0 28px 28px;
    }

    .payment-method-grid,
    .account-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emerald-games .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    :root {
        --user-gutter: 10px;
    }

    .lobby-header {
        grid-template-columns: 36px minmax(0, 1fr) minmax(108px, auto) 36px;
        gap: 7px;
        padding-inline: 8px;
    }

    .lobby-brand {
        font-size: 21px;
    }

    .wallet-badge {
        max-width: 116px;
        padding-inline: 6px;
    }

    .wallet-badge strong {
        max-width: 58px;
    }

    .player-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emerald-promo {
        min-height: 132px;
    }

    .emerald-promo-art {
        width: 104px;
        height: 104px;
    }

    .emerald-promo-copy {
        max-width: calc(100% - 102px);
    }

    .emerald-promo-copy h1 {
        font-size: 24px;
    }

    .emerald-promo-copy p,
    .emerald-promo-copy small {
        font-size: 10px;
    }

    .emerald-categories button {
        flex-basis: 58px;
        min-width: 58px;
    }

    .emerald-games .game-grid {
        gap: 7px;
    }

    .jackpot-banner {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    .jackpot-plane {
        width: 70px;
    }

    .mobile-screen-head h1 {
        font-size: 21px;
    }

    .account-action-icons,
    .account-control-grid,
    .referral-track-summary,
    .referral-track-summary.wide,
    .withdraw-status-grid,
    .payment-method-grid {
        grid-template-columns: 1fr;
    }

    .payout-account-card,
    .receiving-account-list .payout-account-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .payout-account-card button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .support-category {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-form {
        grid-template-columns: minmax(0, 1fr) 50px;
    }

    .support-form button {
        grid-column: 1 / -1;
        min-height: 42px;
    }
}

html[data-lobby-page="promotions"] .lobby-support-fab,
html[data-lobby-page="refer"] .lobby-support-fab,
html[data-lobby-page="deposit"] .lobby-support-fab,
html[data-lobby-page="withdraw"] .lobby-support-fab,
html[data-lobby-page="receiving-account"] .lobby-support-fab,
html[data-lobby-page="add-wallet"] .lobby-support-fab,
html[data-lobby-page="withdraw-password"] .lobby-support-fab,
html[data-lobby-page="account"] .lobby-support-fab,
html[data-lobby-page="profile-details"] .lobby-support-fab,
html[data-lobby-page="security"] .lobby-support-fab,
html[data-lobby-page="login-device"] .lobby-support-fab {
    display: none !important;
}

.lobby-view {
    margin-inline: auto;
}

@media (min-width: 760px) {
    body:has(.lobby-view:not(.is-hidden)) {
        background:
            radial-gradient(circle at 24% 14%, rgba(255, 222, 0, 0.06), transparent 280px),
            radial-gradient(circle at 78% 8%, rgba(69, 255, 160, 0.05), transparent 300px),
            #020806;
    }
}

/* Final deposit desk pass: compact first step, payment details only after Deposit. */
.deposit-page .wallet-page-form {
    gap: 12px;
}

.deposit-page .money-hero-card {
    min-height: auto;
    padding: 14px;
    border-color: rgba(239, 191, 126, 0.34);
    background:
        radial-gradient(circle at 84% 12%, rgba(157, 69, 255, 0.26), transparent 130px),
        linear-gradient(135deg, #2b1025 0%, #180815 48%, #070404 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.24);
}

.deposit-page .money-hero-card strong {
    color: #ffdd72;
}

.deposit-page .wallet-method-panel,
.deposit-page .wallet-amount-panel {
    padding: 13px;
    border-color: rgba(239, 191, 126, 0.24);
    background:
        radial-gradient(circle at 12% 0%, rgba(180, 44, 190, 0.18), transparent 180px),
        linear-gradient(180deg, #21101f 0%, #150613 64%, #0a0408 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.deposit-page .app-panel-title {
    align-items: center;
    gap: 10px;
}

.deposit-page .app-panel-title span {
    color: rgba(244, 194, 133, 0.82);
}

.deposit-page .app-panel-title h2 {
    color: #ffdc75;
}

.deposit-page .app-panel-title button {
    color: #f5c87b;
}

.deposit-page .payment-method-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 1px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.deposit-page .payment-method-grid::-webkit-scrollbar {
    display: none;
}

.deposit-page .payment-option {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
    flex: 0 0 162px;
    min-height: 66px;
    padding: 10px;
    scroll-snap-align: start;
    border-color: rgba(239, 191, 126, 0.26);
    border-radius: 9px;
    background:
        radial-gradient(circle at 96% 0%, rgba(195, 61, 255, 0.16), transparent 70px),
        linear-gradient(135deg, #27101f, #0f0710);
}

.deposit-page .payment-option:has(input:checked) {
    border-color: rgba(255, 213, 119, 0.95);
    background:
        radial-gradient(circle at 98% 0%, rgba(255, 201, 86, 0.22), transparent 80px),
        linear-gradient(135deg, #3a1531, #13080f);
    box-shadow: inset 0 0 0 1px rgba(255, 223, 137, 0.2), 0 12px 22px rgba(0, 0, 0, 0.28);
}

.deposit-page .payment-option span {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: #f8f4ef;
    color: #242424;
    font-size: 12px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
}

.deposit-page .payment-option strong {
    color: #ead5c3;
    font-size: 16px;
    line-height: 1.08;
}

.deposit-page .payment-option small {
    color: rgba(238, 210, 187, 0.62);
    font-size: 11px;
}

.deposit-page .payment-option.is-recommended::after,
.deposit-page .payment-option.is-fast::after {
    position: absolute;
    top: -7px;
    right: -2px;
    min-width: 68px;
    padding: 2px 8px;
    border-radius: 0 8px 0 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 1000;
    line-height: 1.35;
    text-align: center;
}

.deposit-page .payment-option.is-recommended::after {
    content: "Recommend";
    background: linear-gradient(180deg, #5267ff, #3840d8);
}

.deposit-page .payment-option.is-fast::after {
    content: "Fast";
    min-width: 42px;
    background: linear-gradient(180deg, #d433f5, #9824c9);
}

.payment-option.usdt-polygon span,
.payment-option.usdt-trc20 span {
    background: linear-gradient(135deg, #101f38, #2f6bff);
    color: #fff;
}

.deposit-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.28fr);
    gap: 10px;
    align-items: stretch;
}

.deposit-page .wallet-input-row {
    min-height: 58px;
    border-color: rgba(239, 191, 126, 0.28);
    border-radius: 10px;
    background: #030203;
}

.deposit-page .wallet-input-row span {
    color: #f3d49b;
}

.deposit-page .wallet-input-row input {
    color: #fff9e8;
    font-size: 18px;
}

.deposit-step-button {
    min-height: 58px;
    border: 1px solid rgba(255, 218, 166, 0.28);
    border-radius: 999px;
    background: linear-gradient(180deg, #d7846c, #8e3f2a);
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 20px rgba(0, 0, 0, 0.24);
}

.deposit-step-button[hidden] {
    display: none !important;
}

.deposit-rebate-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 88px;
    margin-top: 12px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(244, 194, 133, 0.5);
    border-radius: 10px;
    background:
        radial-gradient(circle at 82% 40%, rgba(247, 178, 51, 0.22), transparent 115px),
        linear-gradient(135deg, #3c172b, #17070f);
}

.deposit-rebate-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, transparent, rgba(255, 213, 119, 0.18), transparent 58%),
        repeating-linear-gradient(-16deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px);
    pointer-events: none;
}

.deposit-rebate-card span,
.deposit-rebate-card small {
    position: relative;
    display: block;
    color: rgba(255, 226, 187, 0.8);
    font-size: 12px;
    font-weight: 900;
}

.deposit-rebate-card strong {
    position: relative;
    display: block;
    margin: 5px 0;
    color: #ffce47;
    font-size: clamp(24px, 7vw, 36px);
    line-height: 1;
}

.deposit-rebate-card b {
    position: relative;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #c830ff, #7626df);
    color: #fff;
    font-size: 16px;
}

.deposit-page .amount-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.deposit-page .amount-grid button {
    min-height: 58px;
    border-color: rgba(244, 194, 133, 0.34);
    border-radius: 8px;
    background: linear-gradient(180deg, #f1d1aa, #e7b879);
    color: #312417;
    font-size: clamp(16px, 4.4vw, 24px);
    font-weight: 1000;
}

.deposit-page .amount-grid button.is-active,
.deposit-page .amount-grid button:focus-visible {
    outline: 2px solid #ffd452;
    outline-offset: 2px;
}

.deposit-step-two[hidden],
.deposit-page .deposit-step-two[hidden] {
    display: none !important;
}

.deposit-page .deposit-method-detail,
.deposit-page .crypto-conversion-card,
.deposit-page .cryptapi-payment-card,
.deposit-page .deposit-exact-card,
.deposit-page .deposit-proof-field,
.deposit-page .deposit-proof-uploader,
.deposit-page .wallet-reminder {
    margin: 12px 0 0;
    border-color: rgba(239, 191, 126, 0.26);
    background:
        radial-gradient(circle at 94% 4%, rgba(213, 47, 255, 0.12), transparent 96px),
        linear-gradient(135deg, #23111e, #0b0508);
}

.deposit-page .deposit-method-detail {
    padding: 13px;
    border-radius: 10px;
}

.deposit-page .deposit-method-detail p {
    background: rgba(0, 0, 0, 0.32);
    color: #fff2d3;
}

.deposit-page .deposit-method-detail strong,
.deposit-page .deposit-method-detail small,
.deposit-page .deposit-method-secondary strong {
    color: #ffd65c;
}

.deposit-page .deposit-method-qr {
    min-height: 136px;
    border-color: rgba(255, 213, 119, 0.4);
    background: rgba(0, 0, 0, 0.28);
}

.deposit-page .copy-mini,
.deposit-page .page-primary-action {
    border-color: rgba(255, 213, 119, 0.42);
    background: linear-gradient(180deg, #ffe16d, #f4bb1e);
    color: #241800;
}

.deposit-page .crypto-conversion-card,
.deposit-page .deposit-exact-card {
    border-radius: 10px;
}

.deposit-page .crypto-conversion-card strong,
.deposit-page .deposit-exact-card strong {
    color: #fff;
}

.deposit-page .deposit-proof-field {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(239, 191, 126, 0.26);
    border-radius: 10px;
}

.deposit-page .deposit-proof-field input {
    min-height: 48px;
    border: 1px solid rgba(239, 191, 126, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

@media (max-width: 480px) {
    .deposit-page .wallet-method-panel,
    .deposit-page .wallet-amount-panel {
        padding: 11px;
    }

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

    .deposit-page .amount-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .deposit-page .payment-option {
        flex-basis: 158px;
    }
}

@media (max-width: 360px) {
    .deposit-page .amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Payment icon and wallet quick-deposit pass. */
.wallet-badge,
.game-wallet,
.account-balance-line {
    position: relative;
}

.wallet-badge {
    padding-right: 7px;
}

.game-wallet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.wallet-plus {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 235, 136, 0.82);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe75c, #efb91c);
    color: #102010;
    font-size: 18px;
    font-weight: 1000;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.wallet-plus.inline-plus {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    font-size: 15px;
}

.wallet-plus:hover,
.wallet-plus:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.account-balance-line {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.account-balance-line small {
    color: rgba(235, 255, 230, 0.72);
    font-size: 12px;
    font-weight: 900;
}

.payment-method-icon,
.quick-payment-option span,
.payout-slot-index {
    overflow: hidden;
}

.payment-method-icon img,
.quick-payment-option span img,
.payout-slot-index img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.deposit-page .payment-option .payment-method-icon {
    display: grid;
    place-items: center;
    padding: 5px;
}

.payment-option.usdt-polygon .payment-method-icon,
.payment-option.usdt-trc20 .payment-method-icon {
    background: #f8f4ef;
    color: #222;
}

.payout-slot-index {
    display: grid;
    grid-template-rows: 34px auto;
    place-items: center;
    gap: 3px;
    padding: 5px;
}

.payout-slot-index img {
    max-width: 34px;
    max-height: 34px;
    border-radius: 9px;
    background: #fff;
}

.deposit-quick-sheet {
    width: min(520px, calc(100vw - 22px));
    max-height: min(92dvh, 760px);
    overflow: auto;
    border-color: rgba(239, 191, 126, 0.36);
    background:
        radial-gradient(circle at 88% 0%, rgba(167, 45, 210, 0.22), transparent 180px),
        linear-gradient(180deg, #211020 0%, #120611 64%, #070406 100%);
}

.modal .quick-payment-grid,
.quick-payment-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.quick-payment-option {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px 8px;
    align-items: center;
    min-height: 62px;
    padding: 9px;
    border: 1px solid rgba(239, 191, 126, 0.24);
    border-radius: 10px;
    background: linear-gradient(135deg, #26101f, #0f070f);
    color: #f1ddc8;
    cursor: pointer;
}

.quick-payment-option.easypaisa,
.quick-payment-option.jazzcash {
    grid-column: span 3;
}

.quick-payment-option.polygon,
.quick-payment-option.trc20,
.quick-payment-option.binance {
    grid-column: span 2;
}

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

.quick-payment-option span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 9px;
    background: #f8f4ef;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

.quick-payment-option strong {
    min-width: 0;
    overflow: hidden;
    color: #fff0d7;
    font-size: 13px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-payment-option small {
    min-width: 0;
    overflow: hidden;
    color: rgba(238, 210, 187, 0.62);
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-payment-option:has(input:checked) {
    border-color: rgba(255, 213, 119, 0.92);
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 213, 119, 0.18), transparent 80px),
        linear-gradient(135deg, #381430, #13070f);
    box-shadow: inset 0 0 0 1px rgba(255, 213, 119, 0.17), 0 10px 18px rgba(0, 0, 0, 0.24);
}

.quick-deposit-detail {
    margin: 0;
}

.deposit-method-secondary[hidden],
.deposit-method-qr[hidden],
.quick-deposit-detail [hidden] {
    display: none !important;
}

@media (max-width: 430px) {
    .wallet-badge {
        gap: 5px;
        max-width: 172px;
    }

    .wallet-plus {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        font-size: 16px;
    }

    .modal .quick-payment-grid,
    .quick-payment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-payment-option.easypaisa,
    .quick-payment-option.jazzcash,
    .quick-payment-option.polygon,
    .quick-payment-option.trc20 {
        grid-column: span 1;
    }

    .quick-payment-option.binance {
        grid-column: 1 / -1;
    }

    .deposit-page .payment-option {
        flex-basis: 168px;
    }
}

/* Deposit UX final pass: competitor-style recharge sheet without repeated panels. */
.deposit-page {
    --deposit-plum: #21091b;
    --deposit-plum-2: #12040e;
    --deposit-gold: #f1bd69;
    --deposit-yellow: #ffd91f;
    --deposit-copper: #b96048;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 220, 60, 0.08), transparent 170px),
        linear-gradient(180deg, #07170e 0%, #0b6b38 42%, #06321d 100%);
}

.deposit-page .mobile-screen-head {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 62px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 230, 128, 0.14);
    background: linear-gradient(180deg, #087334 0%, #07582d 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.deposit-page .mobile-screen-head h1 {
    font-size: 26px;
    letter-spacing: 0;
}

.deposit-page .screen-icon-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-color: rgba(255, 220, 72, 0.4);
    color: #ffdf29;
}

.deposit-recharge-sheet {
    width: 100%;
    max-width: 100%;
    padding: 10px 10px 96px;
    gap: 9px !important;
    overflow-x: hidden;
}

.deposit-wallet-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 218, 126, 0.26);
    border-radius: 12px;
    background:
        radial-gradient(circle at 94% 12%, rgba(178, 55, 232, 0.2), transparent 110px),
        linear-gradient(135deg, #361228, #140611 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 22px rgba(0, 0, 0, 0.2);
}

.deposit-wallet-strip span {
    display: block;
    color: rgba(255, 226, 176, 0.76);
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
}

.deposit-wallet-strip strong {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #ffdf66;
    font-size: 20px;
    font-weight: 1000;
    line-height: 1;
}

.deposit-wallet-strip > button,
.deposit-section-label button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 220, 93, 0.32);
    border-radius: 999px;
    background: rgba(255, 214, 42, 0.08);
    color: #ffd82e;
    font-size: 12px;
    font-weight: 1000;
}

.deposit-page .deposit-method-strip,
.deposit-page .deposit-recharge-panel {
    padding: 10px;
    border: 1px solid rgba(239, 191, 126, 0.24);
    border-radius: 12px;
    background:
        radial-gradient(circle at 90% 0%, rgba(154, 39, 208, 0.15), transparent 140px),
        linear-gradient(180deg, var(--deposit-plum) 0%, var(--deposit-plum-2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.deposit-section-label,
.deposit-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    margin-bottom: 8px;
}

.deposit-section-label span,
.deposit-section-title span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-left: 5px solid #bb58a4;
    background: rgba(139, 55, 114, 0.42);
    color: #d8a75c;
    font-size: 17px;
    font-weight: 1000;
}

.deposit-section-title button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(211, 85, 180, 0.62);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: #d98cc8;
    font-size: 20px;
    font-weight: 1000;
}

.deposit-page .payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    padding: 7px 1px 5px;
}

.deposit-page .payment-option {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 8px;
    width: auto;
    flex: initial;
    min-width: 0;
    min-height: 58px;
    padding: 9px;
    border: 1px solid rgba(221, 129, 174, 0.32);
    border-radius: 9px;
    background: linear-gradient(135deg, #2a0f22, #120510);
}

.deposit-page .payment-option.binance {
    grid-column: 1 / -1;
}

.deposit-page .payment-option:has(input:checked) {
    border-color: rgba(255, 218, 122, 0.92);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 215, 48, 0.22), transparent 82px),
        linear-gradient(135deg, #42152f, #1d0716);
    box-shadow: inset 0 0 0 1px rgba(255, 229, 139, 0.16), 0 10px 16px rgba(0, 0, 0, 0.24);
}

.deposit-page .payment-option .payment-method-icon {
    grid-row: 1 / 3;
    width: 39px;
    height: 39px;
    padding: 4px;
    border-radius: 9px;
    background: #f7f3ed;
}

.deposit-page .payment-option strong {
    min-width: 0;
    overflow: hidden;
    color: #ead6c9;
    font-size: 16px;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deposit-page .payment-option small {
    min-width: 0;
    overflow: hidden;
    color: rgba(236, 210, 190, 0.56);
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deposit-page .payment-option.is-recommended::after,
.deposit-page .payment-option.is-fast::after {
    top: -6px;
    right: -1px;
    min-width: 72px;
    padding: 2px 8px;
    border-radius: 0 8px 0 8px;
}

.deposit-entry-row {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 9px;
}

.deposit-page .wallet-input-row.solo {
    min-height: 58px;
    border: 1px solid rgba(239, 191, 126, 0.16);
    border-radius: 11px;
    background: #030203;
}

.deposit-page .wallet-input-row.solo span {
    color: #f2d09a;
    font-size: 16px;
}

.deposit-page .wallet-input-row.solo input {
    color: #fff9e8;
    font-size: 21px;
    font-weight: 1000;
}

.deposit-step-button {
    min-height: 58px;
    border: 1px solid rgba(255, 222, 176, 0.28);
    border-radius: 999px;
    background: linear-gradient(180deg, #d4826a, #8d3d2b);
    color: #fff;
    font-size: 17px;
    font-weight: 1000;
}

.deposit-rebate-card {
    min-height: 84px;
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(244, 194, 133, 0.56);
    border-radius: 10px;
    background:
        radial-gradient(circle at 88% 42%, rgba(255, 201, 42, 0.25), transparent 120px),
        linear-gradient(135deg, #42182d, #180710);
}

.deposit-rebate-card strong {
    font-size: clamp(27px, 7.5vw, 38px);
}

.deposit-page .amount-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
}

.deposit-page .amount-grid button {
    min-width: 0;
    min-height: 56px;
    border: 1px solid rgba(244, 194, 133, 0.34);
    border-radius: 8px;
    background: linear-gradient(180deg, #f2d3ad, #e8b979);
    color: #33281a;
    font-size: clamp(16px, 5vw, 23px);
    font-weight: 1000;
    letter-spacing: 0;
}

.deposit-page .amount-grid button.is-active {
    background: linear-gradient(180deg, #ffe2b5, #f0c47f);
    box-shadow: inset 0 0 0 2px rgba(255, 220, 73, 0.72);
}

.deposit-step-stack {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.deposit-step-stack:empty {
    display: none;
}

.deposit-page .deposit-step-two[hidden],
.deposit-step-stack [hidden] {
    display: none !important;
}

.deposit-page .deposit-method-detail,
.deposit-page .crypto-conversion-card,
.deposit-page .cryptapi-payment-card,
.deposit-page .deposit-exact-card,
.deposit-page .deposit-proof-field,
.deposit-page .deposit-proof-uploader,
.deposit-page .wallet-reminder {
    margin: 0;
    border: 1px solid rgba(239, 191, 126, 0.3);
    border-radius: 11px;
    background:
        radial-gradient(circle at 90% 2%, rgba(209, 45, 241, 0.12), transparent 100px),
        linear-gradient(135deg, #271120, #0a0408);
}

.deposit-page .deposit-method-detail {
    padding: 12px;
    gap: 8px;
}

.deposit-page .deposit-method-detail > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.deposit-page .deposit-payment-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.deposit-page .deposit-payment-code p {
    min-height: 42px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    color: #fff2d5;
    font-weight: 900;
}

.deposit-page .deposit-method-qr {
    min-height: 128px;
    border-color: rgba(255, 217, 31, 0.38);
    background: rgba(0, 0, 0, 0.24);
}

.deposit-page .crypto-conversion-card,
.deposit-page .deposit-exact-card {
    padding: 11px;
}

.deposit-page .cryptapi-payment-card {
    padding: 12px;
}

.deposit-page .deposit-proof-field,
.deposit-page .deposit-proof-uploader {
    padding: 11px;
}

.deposit-page .deposit-proof-uploader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
}

.deposit-page .deposit-proof-uploader div {
    min-width: 0;
}

.deposit-page .deposit-proof-uploader span,
.deposit-page .deposit-proof-uploader small {
    display: block;
}

.deposit-page .deposit-proof-uploader span {
    color: #fff1d2;
    font-size: 13px;
    font-weight: 1000;
}

.deposit-page .deposit-proof-uploader small {
    margin-top: 3px;
    color: rgba(255, 228, 190, 0.66);
    font-size: 11px;
    line-height: 1.25;
}

.deposit-page .proof-picker {
    min-height: 42px;
    padding: 0 12px;
    border-color: rgba(255, 217, 31, 0.48);
    border-radius: 999px;
    color: #ffdc3d;
    white-space: nowrap;
}

.deposit-page .proof-status {
    grid-column: 1 / -1;
    min-height: 36px;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 232, 202, 0.74);
    font-size: 12px;
    font-weight: 900;
}

.deposit-page .deposit-proof-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(239, 191, 126, 0.24);
    background: rgba(0, 0, 0, 0.32);
    color: #fff;
}

.deposit-page .wallet-reminder {
    padding: 10px 12px;
    color: rgba(255, 232, 202, 0.78);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.deposit-page .page-primary-action {
    min-height: 52px;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffe36b, #efbc20);
    color: #201400;
    font-size: 17px;
}

@media (max-width: 430px) {
    .deposit-recharge-sheet {
        padding-inline: 8px;
    }

    .deposit-page .deposit-method-strip,
    .deposit-page .deposit-recharge-panel {
        padding: 9px;
    }

    .deposit-entry-row {
        grid-template-columns: minmax(0, 1fr) 104px;
    }

    .deposit-page .amount-grid {
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .deposit-entry-row {
        grid-template-columns: 1fr;
    }
}

/* Money-flow polish: final overrides for the live deposit and withdraw screens. */
.app-loading-bar {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 224, 0, 0.45);
    background: rgba(2, 31, 15, 0.96);
    color: #fff6c8;
    font-size: 13px;
    font-weight: 900;
    transform: translateY(-110%);
    transition: transform 180ms ease;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.app-loading-bar span {
    position: relative;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.app-loading-bar span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 44%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe100, #46f3a4);
    animation: appLoadingSlide 950ms ease-in-out infinite;
}

html.is-app-loading .app-loading-bar {
    transform: translateY(0);
}

@keyframes appLoadingSlide {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(260%);
    }
}

.wallet-plus {
    display: inline-grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin-left: 6px;
    border: 1px solid rgba(255, 224, 0, 0.64);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe86b, #efbd1f);
    color: #073817;
    cursor: pointer;
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 5px 14px rgba(0, 0, 0, 0.24);
}

.wallet-plus.inline-plus {
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-size: 18px;
}

.deposit-page {
    background:
        radial-gradient(circle at 80% -10%, rgba(255, 224, 0, 0.13), transparent 260px),
        linear-gradient(180deg, #08753a 0%, #069447 42%, #077235 100%) !important;
}

.deposit-recharge-sheet {
    display: grid;
    gap: 12px;
    padding: 12px 14px 0;
    background: transparent !important;
}

.deposit-page .mobile-screen-head {
    border-color: rgba(255, 255, 255, 0.13);
    background: #077236;
}

.deposit-page .deposit-wallet-strip,
.deposit-page .wallet-method-panel,
.deposit-page .wallet-amount-panel,
.wallet-request-status {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.12), transparent 150px),
        rgba(2, 89, 39, 0.68) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.deposit-page .deposit-wallet-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 12px;
}

.deposit-page .deposit-wallet-strip span,
.wallet-request-head span {
    color: rgba(220, 255, 232, 0.72);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.deposit-page .deposit-wallet-strip strong {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 20px;
}

.deposit-page .deposit-wallet-strip > button,
.deposit-section-label button,
.deposit-section-title button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 224, 0, 0.44);
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.13);
    color: #ffe100;
    cursor: pointer;
    font-size: 12px;
    font-weight: 1000;
}

.deposit-section-label span,
.deposit-section-title span {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff6c8 !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

.deposit-page .payment-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 !important;
}

.deposit-page .payment-option {
    min-height: 66px !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    background: rgba(3, 67, 31, 0.64) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.deposit-page .payment-option.binance {
    grid-column: auto !important;
}

.deposit-page .payment-option:has(input:checked) {
    border-color: rgba(255, 224, 0, 0.92) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.24), transparent 80px),
        rgba(4, 94, 42, 0.94) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 224, 0, 0.18) !important;
}

.deposit-page .payment-option .payment-method-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.deposit-page .payment-option strong {
    color: #fff !important;
    font-size: 15px !important;
}

.deposit-page .payment-option small {
    color: rgba(218, 255, 232, 0.68) !important;
}

.deposit-page .payment-option.is-recommended::after,
.deposit-page .payment-option.is-fast::after {
    background: #435cff !important;
    color: #fff !important;
    font-size: 10px !important;
}

.deposit-page .payment-option.is-fast::after {
    background: #c514db !important;
}

.deposit-page .wallet-input-row.solo {
    min-height: 62px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: #021b0d !important;
}

.deposit-page .wallet-input-row.solo span {
    color: #fff6c8 !important;
}

.deposit-page .wallet-input-row.solo input {
    color: #fff !important;
    font-size: 24px !important;
}

.deposit-step-button,
.deposit-page .page-primary-action {
    min-height: 60px !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffe768, #efbf20) !important;
    color: #063716 !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
}

.deposit-rebate-card {
    border-color: rgba(255, 224, 0, 0.24) !important;
    background:
        radial-gradient(circle at 88% 42%, rgba(255, 224, 0, 0.22), transparent 120px),
        linear-gradient(135deg, #064e27, #028742) !important;
}

.deposit-page .amount-grid button {
    border: 1px solid rgba(255, 224, 0, 0.28) !important;
    background: linear-gradient(180deg, #f9e4ad, #f1c575) !important;
    color: #1e2a18 !important;
}

.deposit-page.is-payment-step .deposit-method-strip,
.deposit-page.is-payment-step .deposit-entry-row,
.deposit-page.is-payment-step .deposit-rebate-card,
.deposit-page.is-payment-step .amount-grid {
    display: none !important;
}

.deposit-page.is-payment-step .deposit-recharge-panel {
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.deposit-step-stack {
    gap: 10px !important;
    margin-top: 0 !important;
}

.deposit-page .deposit-method-detail,
.deposit-page .crypto-conversion-card,
.deposit-page .cryptapi-payment-card,
.deposit-page .deposit-exact-card,
.deposit-page .deposit-proof-field,
.deposit-page .deposit-proof-uploader,
.deposit-page .wallet-reminder {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 224, 0, 0.11), transparent 140px),
        #03562a !important;
}

.deposit-page .deposit-method-detail,
.deposit-page .deposit-exact-card,
.deposit-page .crypto-conversion-card,
.deposit-page .cryptapi-payment-card,
.deposit-page .deposit-proof-field,
.deposit-page .deposit-proof-uploader {
    padding: 13px !important;
}

.deposit-page .deposit-payment-code p,
.deposit-page .deposit-proof-field input {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    color: #fff !important;
}

.deposit-page .copy-mini,
.deposit-page .proof-picker,
.deposit-step-back {
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(255, 224, 0, 0.44) !important;
    border-radius: 8px;
    background: rgba(255, 224, 0, 0.13) !important;
    color: #ffe100 !important;
    cursor: pointer;
    font-weight: 1000;
}

.deposit-step-back {
    width: 100%;
}

.deposit-page .deposit-method-qr,
.deposit-page .cryptapi-payment-qr {
    border-color: rgba(255, 224, 0, 0.28) !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

.wallet-request-status {
    display: grid;
    gap: 10px;
    margin: 12px 14px 24px;
    padding: 12px;
}

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

.wallet-request-head strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 18px;
}

.wallet-request-head small {
    color: #ffe100;
    font-weight: 1000;
}

.request-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 70px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.request-status-card span,
.request-status-card small {
    display: block;
    color: rgba(226, 255, 236, 0.7);
    font-size: 12px;
    font-weight: 800;
}

.request-status-card strong {
    display: block;
    margin: 2px 0;
    color: #fff;
    font-size: 18px;
}

.request-status-card b {
    display: inline-grid;
    place-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
}

.request-status-card.is-pending b,
.request-status-card.is-review b {
    background: rgba(255, 193, 7, 0.18);
    color: #ffe100;
}

.request-status-card.is-approved b {
    background: rgba(50, 228, 132, 0.18);
    color: #5dff9f;
}

.request-status-card.is-failed b {
    background: rgba(255, 82, 82, 0.18);
    color: #ff8585;
}

.request-status-card.is-empty {
    display: block;
    color: rgba(226, 255, 236, 0.7);
}

@media (min-width: 760px) {
    .deposit-recharge-sheet,
    .wallet-request-status {
        width: min(100%, 720px);
        margin-inline: auto;
    }
}

@media (max-width: 430px) {
    .deposit-page .payment-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .deposit-page .payment-option strong {
        font-size: 14px !important;
    }

    .deposit-entry-row {
        grid-template-columns: minmax(0, 1fr) 112px !important;
    }
}

@media (max-width: 360px) {
    .deposit-entry-row {
        grid-template-columns: 1fr !important;
    }
}

/* Money-flow fix 2: tighter app-like deposit steps and no wide/duplicated panels. */
.deposit-page .mobile-screen-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 8px !important;
}

.deposit-page .mobile-screen-head h1 {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deposit-page .deposit-method-strip,
.deposit-page .deposit-recharge-panel,
.deposit-page .deposit-wallet-strip,
.wallet-request-status {
    border-radius: 12px !important;
}

.deposit-page .payment-method-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 0 -2px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 8px 2px 5px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.deposit-page .payment-method-grid::-webkit-scrollbar {
    display: none;
}

.deposit-page .payment-option {
    flex: 0 0 min(176px, 48vw) !important;
    min-width: min(176px, 48vw) !important;
    scroll-snap-align: start;
}

.deposit-page .payment-option strong {
    font-size: clamp(13px, 3.8vw, 16px) !important;
}

.deposit-page .payment-option .payment-method-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deposit-entry-row {
    align-items: stretch;
}

.deposit-page .wallet-input-row.solo {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
}

.deposit-page .wallet-input-row.solo input {
    min-width: 0;
    text-align: center;
}

.deposit-step-button {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.deposit-page.is-payment-step .deposit-section-title {
    display: none !important;
}

.deposit-page.is-payment-step .deposit-recharge-sheet {
    padding-bottom: 0;
}

.deposit-page.is-payment-step .deposit-step-stack {
    margin-top: 0 !important;
}

.deposit-page.is-payment-step .deposit-method-detail {
    min-height: 0;
}

.deposit-page .deposit-method-detail > div:first-child span,
.deposit-page .crypto-conversion-card span,
.deposit-page .deposit-exact-card span {
    color: rgba(226, 255, 236, 0.72);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.deposit-page .deposit-method-detail > div:first-child strong,
.deposit-page .crypto-conversion-card strong,
.deposit-page .deposit-exact-card strong {
    color: #fff;
}

.deposit-page .deposit-exact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.deposit-page .deposit-exact-card b {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 224, 0, 0.16);
    color: #ffe100;
    font-size: 12px;
}

.deposit-page .deposit-payment-code {
    grid-template-columns: minmax(0, 1fr) 78px !important;
}

.deposit-page .deposit-payment-code p {
    overflow-wrap: anywhere;
}

.deposit-page .deposit-method-qr img,
.deposit-page .cryptapi-payment-qr img {
    max-width: 170px;
    max-height: 170px;
    border-radius: 10px;
}

.deposit-page .wallet-reminder {
    border-color: rgba(255, 224, 0, 0.26) !important;
    background: rgba(255, 224, 0, 0.08) !important;
}

.wallet-request-status {
    max-width: calc(100% - 28px);
}

@media (max-width: 430px) {
    .deposit-recharge-sheet {
        padding: 10px 12px 0 !important;
    }

    .deposit-entry-row {
        grid-template-columns: minmax(0, 1fr) 104px !important;
        gap: 8px !important;
    }

    .deposit-page .payment-option {
        flex-basis: 166px !important;
        min-width: 166px !important;
    }

    .deposit-page .amount-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 370px) {
    .deposit-entry-row {
        grid-template-columns: 1fr !important;
    }

    .deposit-step-button {
        min-height: 52px !important;
    }

    .deposit-page .payment-option {
        flex-basis: 156px !important;
        min-width: 156px !important;
    }
}

/* Money-flow fix 3: final deposit screen authority. Keep step one clean and step two focused. */
.deposit-page {
    --deposit-panel: rgba(4, 82, 37, 0.96);
    --deposit-panel-2: rgba(3, 65, 29, 0.98);
    --deposit-line: rgba(160, 238, 179, 0.22);
    --deposit-gold: #ffe100;
}

.deposit-page .wallet-page-form,
.deposit-page .wallet-request-status {
    max-width: min(100% - 24px, 520px) !important;
}

.deposit-page .deposit-wallet-strip,
.deposit-page .wallet-method-panel,
.deposit-page .wallet-amount-panel,
.deposit-page .wallet-request-status {
    border: 1px solid var(--deposit-line) !important;
    background: linear-gradient(180deg, var(--deposit-panel), var(--deposit-panel-2)) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

.deposit-page .deposit-section-label,
.deposit-page .deposit-section-title {
    min-height: 42px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    color: rgba(240, 255, 242, 0.74);
}

.deposit-page .payment-option {
    min-height: 76px !important;
    border: 1px solid rgba(255, 225, 0, 0.26) !important;
    border-radius: 8px !important;
    background: rgba(9, 32, 18, 0.64) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.deposit-page .payment-option:has(input:checked) {
    border-color: rgba(255, 225, 0, 0.9) !important;
    background: linear-gradient(180deg, rgba(255, 225, 0, 0.15), rgba(8, 63, 30, 0.96)) !important;
}

.deposit-page .payment-option small {
    position: absolute;
    top: -9px;
    right: 8px;
    min-height: 20px;
    padding: 0 10px;
    border-radius: 5px;
    background: #3c4dff;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
}

.deposit-page .payment-option.is-fast small,
.deposit-page .payment-option.usdt-trc20 small,
.deposit-page .payment-option.binance small {
    background: linear-gradient(180deg, #d823f3, #8d2de4);
}

.deposit-page .wallet-input-row.solo {
    min-height: 58px !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(0, 0, 0, 0.42) !important;
}

.deposit-page .wallet-input-row.solo input {
    color: #fff !important;
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 950 !important;
}

.deposit-page .deposit-step-button,
.deposit-page .page-primary-action {
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffe671, #f7bd17 58%, #ce8f09) !important;
    color: #113b16 !important;
    font-weight: 1000 !important;
    text-shadow: none !important;
}

.deposit-page .deposit-rebate-card {
    min-height: 92px !important;
    border-color: rgba(255, 225, 0, 0.32) !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 86% 24%, rgba(255, 225, 0, 0.22), transparent 26%),
        linear-gradient(135deg, rgba(33, 92, 38, 0.98), rgba(5, 61, 29, 0.98)) !important;
}

.deposit-page .deposit-rebate-card span {
    color: #ffdd58 !important;
    text-transform: uppercase;
}

.deposit-page .amount-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.deposit-page .amount-grid button {
    min-height: 56px !important;
    border: 1px solid rgba(255, 232, 161, 0.2) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffe7b8, #f6c987) !important;
    color: #1e2b1e !important;
    font-size: clamp(17px, 4.7vw, 24px) !important;
    font-weight: 950 !important;
}

.deposit-page.is-payment-step .deposit-wallet-strip,
.deposit-page.is-payment-step .deposit-method-strip,
.deposit-page.is-payment-step .deposit-section-title,
.deposit-page.is-payment-step .deposit-entry-row,
.deposit-page.is-payment-step .deposit-rebate-card,
.deposit-page.is-payment-step .amount-grid {
    display: none !important;
}

.deposit-page.is-payment-step .deposit-recharge-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.deposit-page.is-payment-step .deposit-step-stack {
    display: grid !important;
    gap: 10px !important;
    max-width: min(100% - 24px, 520px) !important;
    margin: 12px auto 0 !important;
}

.deposit-page.is-payment-step .deposit-step-two:not([hidden]) {
    display: grid !important;
}

.deposit-page.is-payment-step .deposit-method-detail,
.deposit-page.is-payment-step .crypto-conversion-card,
.deposit-page.is-payment-step .cryptapi-payment-card,
.deposit-page.is-payment-step .deposit-exact-card,
.deposit-page.is-payment-step .deposit-proof-field,
.deposit-page.is-payment-step .deposit-proof-uploader,
.deposit-page.is-payment-step .wallet-reminder {
    border: 1px solid var(--deposit-line) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(5, 84, 38, 0.98), rgba(3, 59, 28, 0.98)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.deposit-page.is-payment-step .deposit-step-back {
    min-height: 46px;
    border: 1px solid rgba(255, 225, 0, 0.34);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--deposit-gold);
    font-weight: 900;
}

.deposit-page .wallet-request-status {
    margin: 12px auto calc(92px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
}

.deposit-page .wallet-request-status .section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.deposit-page .wallet-request-status .section-title h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    text-transform: none !important;
}

.deposit-page .wallet-request-status .section-title p {
    margin: 0 !important;
    color: rgba(226, 255, 236, 0.68) !important;
    font-size: 12px !important;
}

.deposit-page .request-status-list {
    display: grid !important;
    gap: 8px !important;
}

.deposit-page .request-status-card {
    min-height: 64px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Money-flow/profile fix 1: separate history, notification, support and profile controls. */
.mobile-flow,
.account-page,
.withdraw-page,
.deposit-page {
    --money-bg: #057738;
    --money-bg-2: #043f20;
    --money-panel: rgba(3, 82, 38, 0.96);
    --money-panel-dark: rgba(2, 39, 19, 0.92);
    --money-line: rgba(174, 255, 196, 0.2);
    --money-gold: #ffe100;
    background:
        radial-gradient(circle at 80% -12%, rgba(255, 225, 0, 0.14), transparent 240px),
        linear-gradient(180deg, var(--money-bg), var(--money-bg-2)) !important;
}

.mobile-screen-head {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    min-height: 60px !important;
    background: rgba(3, 96, 43, 0.95) !important;
}

.screen-head-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 7px;
}

.screen-icon-action {
    position: relative;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-color: rgba(255, 225, 0, 0.3) !important;
    background: rgba(0, 0, 0, 0.16) !important;
    color: #ffe100 !important;
    font-size: 18px !important;
}

.notification-action span,
[data-notification-count] {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff5b4f;
    color: #fff;
    font-size: 10px;
    font-weight: 1000;
    line-height: 1;
}

.wallet-history-sheet,
.activity-sheet {
    width: min(100% - 20px, 540px);
    max-height: min(86vh, 760px);
    overflow: auto;
    border: 1px solid rgba(255, 225, 0, 0.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 225, 0, 0.11), transparent 180px),
        linear-gradient(180deg, rgba(4, 88, 40, 0.98), rgba(2, 38, 18, 0.98));
}

.history-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.history-modal-head h2 {
    margin: 0;
    color: #fff;
}

.history-modal-head span {
    display: block;
    margin-top: 3px;
    color: rgba(226, 255, 236, 0.72);
    font-size: 13px;
}

.history-modal-head button,
.history-filter-row button {
    min-height: 36px;
    border: 1px solid rgba(255, 225, 0, 0.32);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--money-gold);
    cursor: pointer;
    font-weight: 900;
}

.history-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.history-summary-grid div,
.account-mini-metrics div {
    min-height: 68px;
    padding: 10px;
    border: 1px solid var(--money-line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.history-summary-grid span,
.account-mini-metrics span {
    display: block;
    color: rgba(226, 255, 236, 0.68);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.history-summary-grid strong,
.account-mini-metrics strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 18px;
}

.history-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.history-filter-row button {
    flex: 0 0 auto;
    min-width: 82px;
}

.history-filter-row button.is-active {
    background: linear-gradient(180deg, #ffe76b, #efbf20);
    color: #073817;
}

.wallet-history-list,
.activity-list {
    display: grid;
    gap: 9px;
}

.history-row,
.activity-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 74px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.history-row-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 225, 0, 0.13);
    color: var(--money-gold);
    font-weight: 1000;
}

.history-row strong,
.activity-row strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.history-row span,
.history-row small,
.activity-row span,
.activity-row small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: rgba(226, 255, 236, 0.68);
    font-size: 12px;
    font-weight: 800;
}

.history-row aside,
.activity-row aside {
    text-align: right;
}

.history-row b,
.activity-row b {
    display: block;
    color: #fff;
    font-size: 15px;
}

.history-row em {
    display: inline-grid;
    place-items: center;
    min-height: 24px;
    margin-top: 4px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 225, 0, 0.14);
    color: var(--money-gold);
    font-size: 11px;
    font-style: normal;
    font-weight: 1000;
}

.history-row.is-approved em {
    background: rgba(58, 231, 135, 0.16);
    color: #61ff9f;
}

.history-row.is-failed em {
    background: rgba(255, 82, 82, 0.16);
    color: #ff8b8b;
}

.wallet-history-empty {
    min-height: 280px;
    color: rgba(226, 255, 236, 0.72);
}

.wallet-history-empty button {
    margin-top: 10px;
}

.withdraw-page .withdraw-request-card,
.withdraw-page .wallet-request-status,
.account-wallet-card,
.account-control-grid button,
.account-menu-panel,
.account-detail-panel,
.settings-panel,
.account-vip-wide {
    border-color: var(--money-line) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 225, 0, 0.09), transparent 150px),
        linear-gradient(180deg, rgba(4, 82, 38, 0.96), rgba(2, 55, 26, 0.96)) !important;
}

.withdraw-tabs {
    gap: 8px !important;
    padding-inline: 12px !important;
}

.withdraw-tabs button {
    min-width: 86px;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.14) !important;
}

.withdraw-tabs button.is-active {
    background: linear-gradient(180deg, #ffe76b, #efbf20) !important;
    color: #073817 !important;
}

.withdraw-actions button[type="submit"]:disabled,
.page-primary-action:disabled,
.deposit-step-button:disabled {
    opacity: 0.68;
    cursor: wait;
}

.account-profile-hero {
    position: relative;
    grid-template-columns: 44px 76px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--money-line);
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 225, 0, 0.17), transparent 180px),
        linear-gradient(135deg, #08743a, #044420) !important;
}

.account-profile-hero > .screen-icon-action.mail {
    right: 10px !important;
}

.account-avatar-wrap {
    position: relative;
}

.avatar-upload-button {
    display: none !important;
}

.avatar-edit-dot {
    position: absolute;
    right: -2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 225, 0, 0.72);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe86b, #efbd1f);
    color: #063716;
    cursor: pointer;
    font-size: 14px;
    font-weight: 1000;
}

.account-balance-line {
    border: 1px solid rgba(255, 225, 0, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    padding: 6px 8px;
}

.account-action-icons button {
    border: 1px solid rgba(255, 225, 0, 0.24) !important;
    background: rgba(2, 58, 27, 0.86) !important;
    color: #fff !important;
}

.account-action-icons button::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe76b, #efbf20);
}

.account-vip-wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 13px !important;
}

.account-vip-wide > div:first-child {
    min-width: 0;
}

.account-vip-wide strong {
    color: #fff !important;
    font-size: clamp(16px, 4.8vw, 22px) !important;
}

.account-vip-wide small {
    color: rgba(226, 255, 236, 0.72) !important;
}

.account-vip-wide button {
    align-self: center;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe76b, #efbf20);
    color: #073817;
    font-weight: 1000;
}

.account-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.account-detail-head {
    align-items: center;
}

.account-detail-head button {
    min-height: 34px;
    border: 1px solid rgba(255, 225, 0, 0.28);
    border-radius: 999px;
    background: rgba(255, 225, 0, 0.12);
    color: var(--money-gold);
    cursor: pointer;
    font-weight: 900;
}

.mail-row,
.page-transaction-row {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.16) !important;
}

@media (max-width: 430px) {
    .account-profile-hero {
        grid-template-columns: 42px 70px minmax(0, 1fr) !important;
    }

    .account-profile-hero .account-balance-line {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .history-summary-grid,
    .account-mini-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .history-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .history-row aside {
        grid-column: 2;
        text-align: left;
    }
}

/* Profile quality pass: keep identity, wallet and VIP controls from colliding. */
.account-page .account-profile-hero {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "avatar identity support notice"
        "balance balance balance balance" !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 225, 0, 0.16);
    border-radius: 0 0 18px 18px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 225, 0, 0.15), transparent 150px),
        radial-gradient(circle at 92% 10%, rgba(77, 238, 170, 0.14), transparent 130px),
        linear-gradient(135deg, #08743a 0%, #045324 62%, #032f19 100%) !important;
}

.account-page .account-profile-hero > .screen-icon-action {
    position: static !important;
    grid-area: support;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
}

.account-page .account-profile-hero > .screen-icon-action.mail {
    grid-area: notice;
    justify-self: end;
    width: 48px;
    min-width: 48px;
    right: auto !important;
    left: auto !important;
}

.account-page .account-profile-hero .mail span,
.account-page [data-notification-count] {
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 22px;
}

.account-page .account-avatar-wrap {
    grid-area: avatar;
    width: 76px;
    height: 76px;
}

.account-page .account-profile-hero .account-avatar {
    width: 76px !important;
    height: 76px !important;
    border-width: 2px;
    font-size: 24px !important;
}

.account-page .avatar-edit-dot {
    right: -1px;
    bottom: -1px;
}

.account-page .account-identity-stack {
    grid-area: identity;
    gap: 5px;
    align-content: center;
}

.account-page .account-status-row {
    gap: 5px;
}

.account-page .account-status-pill,
.account-page .account-month-pill {
    min-height: 22px;
    padding: 0 8px;
    font-size: 9px;
    white-space: nowrap;
}

.account-page .account-month-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-page .account-identity-stack > span {
    font-size: clamp(18px, 4.4vw, 24px) !important;
    line-height: 1.1;
}

.account-page .account-identity-stack > strong {
    max-width: 100%;
    overflow: hidden;
    color: rgba(236, 255, 232, 0.78);
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-page .account-balance-line {
    grid-area: balance;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    padding: 9px 10px !important;
    gap: 8px;
    border-color: rgba(255, 225, 0, 0.24);
    background: rgba(0, 0, 0, 0.22);
}

.account-page .account-balance-line strong {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1;
}

.account-page .account-action-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 10px;
}

.account-page .account-action-icons button {
    display: grid;
    place-items: center;
    min-height: 68px !important;
    padding: 8px;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.account-page .account-action-icons button::before {
    display: grid;
    place-items: center;
    color: #063817;
    font-size: 15px;
}

.account-page .account-action-icons button:nth-child(1)::before {
    content: "↗";
}

.account-page .account-action-icons button:nth-child(2)::before {
    content: "+";
}

.account-page .account-action-icons button:nth-child(3)::before {
    content: "↺";
}

.account-page .account-wallet-card,
.account-page .account-control-grid button,
.account-page .account-menu-panel,
.account-page .account-detail-panel,
.account-page .settings-panel {
    border-color: rgba(255, 225, 0, 0.18) !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 225, 0, 0.08), transparent 120px),
        rgba(3, 58, 27, 0.76) !important;
}

.account-page .account-vip-wide {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    border-color: rgba(255, 225, 0, 0.22) !important;
    background:
        linear-gradient(135deg, rgba(255, 225, 0, 0.16), transparent 45%),
        rgba(3, 58, 27, 0.86) !important;
}

.account-page .account-vip-wide > div:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    align-items: center;
}

.account-page .account-vip-wide span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe76b, #efbf20);
    color: #063817;
    font-size: 18px;
    font-weight: 1000;
}

.account-page .account-vip-wide strong {
    font-size: clamp(14px, 4.2vw, 18px) !important;
    line-height: 1.2;
}

.account-page .account-vip-wide small {
    font-size: 11px;
}

.account-page .account-vip-wide button {
    width: 100%;
}

@media (max-width: 430px) {
    .account-page .account-profile-hero {
        grid-template-columns: 70px minmax(0, 1fr) 42px 42px !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    .account-page .account-avatar-wrap,
    .account-page .account-profile-hero .account-avatar {
        width: 68px !important;
        height: 68px !important;
    }

    .account-page .account-status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-page .account-balance-line strong {
        font-size: 30px !important;
    }
}

/* ============================================================
   WALLET REDESIGN (Claude Design 11bet — 1a/1b/1c/1d)
   Scoped to `.wr` pages. Appended last so it wins the cascade.
   ============================================================ */
.wr {
    --wr-bg: #156b36;
    --wr-appbar: #082310;
    --wr-panel: #0e5429;
    --wr-panel-2: #1b7b40;
    --wr-input: #073a1b;
    --wr-line: rgba(225, 255, 235, 0.22);
    --wr-line-soft: rgba(225, 255, 235, 0.16);
    --wr-gold: #ffd42a;
    --wr-gold-deep: #ffc400;
    --wr-ink: #201800;
    --wr-white: #ffffff;
    --wr-g100: #d9f4e0;
    --wr-g200: #b2dfc0;
    --wr-g300: #c0e8cc;
    --wr-g400: #9bd4ac;
    --wr-mint: #46e58a;
    --wr-danger: #ff5c49;
    --wr-warn: #ffb547;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    background: var(--wr-bg) !important;
    color: var(--wr-white);
    padding-bottom: 120px !important;
}

.wr * {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* the hidden attribute must always win over redesign display rules */
.wr [hidden] {
    display: none !important;
}

.wr .mobile-screen-head {
    background: var(--wr-appbar) !important;
    border-bottom: 1px solid rgba(225, 255, 235, 0.18) !important;
    padding: 12px 16px !important;
}

.wr .mobile-screen-head h1 {
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    letter-spacing: -0.01em;
}

.wr .screen-back {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: #e7faec !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.wr .screen-icon-action {
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: #e7faec !important;
    border-radius: 11px !important;
}

/* --- shared: app bar / brand / balance pill --- */
.wr .wr-appbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--wr-appbar);
    border-bottom: 1px solid rgba(225, 255, 235, 0.18);
}

.wr .wr-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wr .wr-brand span {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wr .wr-brand strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--wr-white);
    letter-spacing: -0.01em;
}

.wr .wr-balance-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.16);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 13px;
    font-weight: 800;
    color: var(--wr-gold);
    font-variant-numeric: tabular-nums;
}

.wr .wr-balance-pill.has-plus {
    padding-right: 5px;
}

.wr .wr-balance-pill i {
    font-size: 10.5px;
    color: #f0cc4c;
    font-style: normal;
}

.wr .wr-balance-pill .wallet-plus {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- shared: numbered step head --- */
.wr .wr-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 2px 9px;
}

.wr .wr-step-num {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.wr .wr-step-head > span {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--wr-white);
}

.wr .wr-step-hint {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g200);
}

.wr .wr-step-link {
    margin-left: auto;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 800;
    color: var(--wr-gold) !important;
}

/* --- shared: gold CTA + note --- */
.wr .wr-cta-note {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g200);
}

.wr .wr-chip-btn {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.2);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 11px;
    font-weight: 800;
    color: var(--wr-gold) !important;
    flex: none;
    align-self: center;
}

/* ============ 1a ACCOUNT ============ */
.account-page.wr {
    padding: 0 0 120px !important;
}

.account-page.wr > *:not(.wr-appbar):not(.account-profile-hero) {
    margin-left: 16px;
    margin-right: 16px;
}

.account-page.wr .account-profile-hero {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    position: static !important;
    padding: 16px !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
}

.account-page.wr .account-profile-hero::before,
.account-page.wr .account-profile-hero::after {
    display: none !important;
}

.account-page.wr .account-avatar-wrap {
    position: relative;
    width: 54px;
    height: 54px;
    flex: none;
    margin: 0 !important;
}

.account-page.wr .account-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: var(--wr-panel-2) !important;
    border: 2px solid rgba(255, 212, 42, 0.9) !important;
    color: var(--wr-gold) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-page.wr .avatar-edit-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wr-bg);
}

.account-page.wr .account-identity-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-page.wr .account-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-page.wr .account-name-row #account-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--wr-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-page.wr .account-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(70, 229, 138, 0.16) !important;
    border: 1px solid rgba(70, 229, 138, 0.5) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--wr-mint) !important;
    text-transform: uppercase;
    flex: none;
}

.account-page.wr .account-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--wr-mint);
}

.account-page.wr .account-id-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wr-g100);
}

.account-page.wr .account-id-line b {
    font-weight: 700;
}

.account-page.wr .wr-copy-id {
    background: none;
    border: 0;
    color: var(--wr-g200);
    display: inline-flex;
    padding: 2px;
    cursor: pointer;
}

.account-page.wr .wr-square-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    color: #e7faec;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.account-page.wr .wr-square-btn span[data-notification-count] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wr-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* wallet hero */
.wr .wr-wallet-hero {
    margin-top: 4px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, #26a155, #12602f);
    border: 1px solid rgba(225, 255, 235, 0.26);
}

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

.wr .wr-wallet-hero-top span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g100);
}

.wr .wr-wallet-hero-top small {
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-g200);
}

.wr .wr-hero-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.wr .wr-hero-amount strong {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: var(--wr-white);
    font-variant-numeric: tabular-nums;
}

.wr .wr-hero-amount i {
    font-size: 15px;
    font-weight: 800;
    color: var(--wr-gold);
    font-style: normal;
}

.account-page.wr .account-action-icons {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.account-page.wr .account-action-icons button {
    height: 44px;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: var(--wr-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

.account-page.wr .account-action-icons button.is-gold {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
}

.account-page.wr .account-action-icons button::before {
    content: none !important;
}

/* VIP card */
.account-page.wr .vip-progress-card {
    display: block !important;
    margin-top: 12px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.wr .wr-vip-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr .wr-vip-badge {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.account-page.wr .wr-vip-head strong {
    flex: 1;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wr-white);
}

.wr .wr-vip-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.2);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 11px;
    font-weight: 800;
    color: var(--wr-gold);
    white-space: nowrap;
}

.account-page.wr .vip-progress-card .progress-track {
    margin-top: 12px;
    height: 8px;
    border-radius: 999px;
    background: #073a1b;
    border: 1px solid rgba(225, 255, 235, 0.18);
    overflow: hidden;
}

.account-page.wr .vip-progress-card .progress-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wr-gold-deep), var(--wr-gold));
}

.wr .wr-vip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.wr .wr-vip-foot small {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g100);
    font-variant-numeric: tabular-nums;
}

.account-page.wr .wr-vip-foot button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 800;
    color: var(--wr-gold) !important;
}

.wr .wr-vip-extra {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wr-g300);
}

/* control grid 2x2 */
.account-page.wr .account-control-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.account-page.wr .account-control-grid button {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 13px !important;
    border-radius: 16px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    text-align: left;
}

.account-page.wr .account-control-grid span {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g200) !important;
}

.account-page.wr .account-control-grid strong {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    margin-top: 3px;
}

.account-page.wr .account-control-grid small {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--wr-g300) !important;
}

/* group labels + grouped menus */
.wr .wr-group-label {
    margin: 18px 4px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g200);
}

.account-page.wr .account-menu-panel,
.account-page.wr .settings-panel {
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    overflow: hidden;
    padding: 0 !important;
    display: block !important;
}

.account-page.wr .wr-menu button {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--wr-line-soft) !important;
    text-align: left;
}

.account-page.wr .wr-menu button:first-child {
    border-top: 0 !important;
}

.wr .wr-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--wr-panel-2);
    border: 1px solid var(--wr-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dcf5e3;
    flex: none;
}

.account-page.wr .wr-menu button > span {
    flex: 1;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--wr-white) !important;
}

.account-page.wr .wr-menu button > strong {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--wr-g100) !important;
}

.account-page.wr .wr-menu button > strong.is-gold {
    color: var(--wr-gold) !important;
}

.wr .wr-chevron {
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--wr-g400);
    border-right: 2px solid var(--wr-g400);
    transform: rotate(45deg);
    flex: none;
    margin-left: 2px;
}

.wr .wr-switch,
.account-page.wr .settings-panel .wr-switch,
.account-page.wr .account-menu-panel .wr-switch {
    width: 42px !important;
    height: 25px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
    background: #073a1b !important;
    border: 1px solid rgba(225, 255, 235, 0.3) !important;
    position: relative;
    font-size: 0 !important;
    color: transparent !important;
    flex: none;
    padding: 0 !important;
}

.wr .wr-switch::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--wr-g200);
    transition: transform 0.16s ease, background 0.16s ease;
}

.wr .wr-switch.is-on,
.account-page.wr .settings-panel .wr-switch.is-on {
    background: rgba(255, 212, 42, 0.25) !important;
    border-color: rgba(255, 212, 42, 0.6) !important;
}

.wr .wr-switch.is-on::after {
    transform: translateX(17px);
    background: var(--wr-gold);
}

/* ============ 1b WITHDRAW ============ */
.withdraw-page.wr .mobile-screen-head .wr-balance-pill {
    margin-left: 0;
    padding: 5px 10px;
}

.withdraw-page.wr .withdraw-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 12px 16px 0 !important;
    border-radius: 13px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.withdraw-page.wr .withdraw-tabs button {
    height: 34px;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--wr-g100) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border: 0 !important;
}

.withdraw-page.wr .withdraw-tabs button.is-active {
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

.withdraw-page.wr .withdraw-request-card {
    display: block !important;
    padding: 14px 16px 22px !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

.withdraw-page.wr .money-hero-card {
    display: block !important;
    margin: 12px 0 0 !important;
    padding: 17px 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
}

.withdraw-page.wr .money-hero-card::after,
.withdraw-page.wr .money-hero-card::before {
    display: none !important;
}

.wr .wr-hero-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g100);
}

.withdraw-page.wr .wr-hero-amount strong {
    font-size: 34px;
}

.wr .wr-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

.wr .wr-hero-chips span {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(225, 255, 235, 0.24);
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-g100);
}

.withdraw-page.wr .withdraw-account-slots {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wr .wr-add-chip {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1.5px dashed rgba(225, 255, 235, 0.5) !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 700;
    color: #e7faec !important;
    flex: none;
}

.withdraw-page.wr .payout-account-card {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 212, 42, 0.12) !important;
    border: 1.5px solid rgba(255, 212, 42, 0.9) !important;
}

.withdraw-page.wr .payout-account-card .payout-slot-index {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--wr-panel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    flex: none;
}

.withdraw-page.wr .payout-account-card > div:not(.payout-slot-index) {
    flex: 1;
    min-width: 0;
}

.withdraw-page.wr .payout-account-card span {
    font-size: 14px;
    font-weight: 800;
    color: var(--wr-white);
}

.withdraw-page.wr .payout-account-card strong,
.withdraw-page.wr .payout-account-card small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--wr-g100);
}

.withdraw-page.wr .payout-account-card button {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 11px;
    font-weight: 800;
    flex: none;
}

.withdraw-page.wr .wr-visually-hidden-field {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.withdraw-page.wr .wr-withdraw-amount {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: var(--wr-input) !important;
    border: 1px solid rgba(225, 255, 235, 0.3) !important;
    margin: 0 !important;
}

.withdraw-page.wr .wr-withdraw-amount > span {
    font-size: 13px;
    font-weight: 800;
    color: var(--wr-g200);
}

.withdraw-page.wr .wr-withdraw-amount input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    font-size: 26px;
    font-weight: 800;
    color: var(--wr-white) !important;
    font-variant-numeric: tabular-nums;
    padding: 0 !important;
}

.withdraw-page.wr .wr-withdraw-amount input::placeholder {
    color: #8fc7a0;
}

.withdraw-page.wr .wr-withdraw-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
    margin-top: 9px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.wr .wr-minmax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding: 0 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g200);
}

.wr .wr-minmax-row b {
    color: var(--wr-g100);
}

.wr .wr-warning-banner {
    display: none;
    align-items: center;
    gap: 9px;
    margin: 12px 0 0;
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(255, 181, 71, 0.14);
    border: 1px solid rgba(255, 181, 71, 0.45);
    font-size: 12px;
    font-weight: 700;
    color: #ffcb7a;
    line-height: 1.45;
}

body.is-wallet-empty .wr .wr-warning-banner {
    display: flex;
}

.wr .wr-warning-banner::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--wr-warn);
    flex: none;
}

.wr .wr-promo-banner {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(255, 212, 42, 0.26), rgba(255, 212, 42, 0.08)) !important;
    border: 1px solid rgba(255, 212, 42, 0.5) !important;
    text-align: left;
}

.wr .wr-promo-banner b {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.wr .wr-promo-banner span {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: #f0fcf3;
}

.wr .wr-promo-banner i {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--wr-gold);
    font-style: normal;
}

/* withdraw + deposit primary gold CTA */
.withdraw-page.wr #withdraw-page-submit:not([hidden]),
.deposit-page.wr .deposit-step-button:not([hidden]),
.deposit-page.wr #deposit-page-submit:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px !important;
    margin: 14px 0 0 !important;
    border-radius: 14px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, 0.4) !important;
    border: 0 !important;
}

body.is-wallet-empty .withdraw-page.wr #withdraw-page-submit {
    opacity: 0.45;
    box-shadow: none !important;
}

/* ============ 1c / 1d DEPOSIT ============ */
.deposit-page.wr .deposit-recharge-sheet {
    display: block !important;
    padding: 14px 16px 22px !important;
    background: transparent !important;
}

/* step two (pay & proof): hide all step-one content */
.deposit-page.wr.is-payment-step .deposit-wallet-strip,
.deposit-page.wr.is-payment-step .deposit-method-strip,
.deposit-page.wr.is-payment-step .deposit-section-title,
.deposit-page.wr.is-payment-step .deposit-entry-row,
.deposit-page.wr.is-payment-step .deposit-rebate-card,
.deposit-page.wr.is-payment-step .amount-grid,
.deposit-page.wr.is-payment-step .deposit-step-one-note {
    display: none !important;
}

.deposit-page.wr .wr-flow-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.deposit-page.wr .wr-flow-stepper[hidden] {
    display: none;
}

.deposit-page.wr .wr-flow-stepper span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
}

.deposit-page.wr .wr-flow-stepper .is-done {
    background: rgba(70, 229, 138, 0.16);
    border: 1px solid rgba(70, 229, 138, 0.5);
    color: var(--wr-mint);
}

.deposit-page.wr .wr-flow-stepper .is-current {
    background: var(--wr-gold);
    border: 1px solid var(--wr-gold);
    color: var(--wr-ink);
}

.deposit-page.wr .deposit-wallet-strip {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    margin: 0 !important;
}

.deposit-page.wr .deposit-wallet-strip > div {
    flex: 1;
}

.deposit-page.wr .deposit-wallet-strip span {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g200) !important;
}

.deposit-page.wr .deposit-wallet-strip strong {
    display: block;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.deposit-page.wr .deposit-wallet-strip strong i {
    font-size: 12px;
    color: var(--wr-gold);
    font-style: normal;
}

.deposit-page.wr .deposit-wallet-strip > button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--wr-gold) !important;
    flex: none;
}

/* method cards — full override of legacy layout */
.deposit-page.wr .deposit-method-strip {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

.deposit-page.wr .deposit-section-label {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.deposit-page.wr .payment-method-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
}

.deposit-page.wr .payment-option {
    position: relative;
    display: block !important;
    padding: 13px 13px 12px !important;
    border-radius: 16px !important;
    background: var(--wr-panel) !important;
    border: 1.5px solid rgba(225, 255, 235, 0.24) !important;
    min-height: 0 !important;
    overflow: hidden;
}

.deposit-page.wr .payment-option::after,
.deposit-page.wr .payment-option::before {
    content: none !important;
    display: none !important;
}

.deposit-page.wr .payment-option:has(input:checked) {
    background: rgba(255, 212, 42, 0.12) !important;
    border-color: rgba(255, 212, 42, 0.9) !important;
}

.deposit-page.wr .payment-option:has(input:checked)::after {
    content: "✓" !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    background-image: none !important;
    color: var(--wr-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.deposit-page.wr .payment-option .payment-method-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static !important;
    margin: 0 !important;
    background: #fff;
}

.deposit-page.wr .payment-option .payment-method-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deposit-page.wr .payment-option strong {
    display: block !important;
    position: static !important;
    margin-top: 9px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
}

.deposit-page.wr .payment-option small {
    display: flex !important;
    align-items: center;
    gap: 5px;
    position: static !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--wr-g300) !important;
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap;
}

.wr .wr-pop-pill {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.22);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 9.5px;
    font-weight: 800;
    font-style: normal;
    color: var(--wr-gold);
}

/* amount panel */
.deposit-page.wr .deposit-recharge-panel {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.deposit-page.wr .deposit-entry-row {
    margin: 0 !important;
}

.deposit-page.wr .wallet-input-row.solo {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: var(--wr-input) !important;
    border: 1.5px solid rgba(255, 212, 42, 0.9) !important;
    margin: 0 !important;
}

.deposit-page.wr .wallet-input-row.solo span#deposit-page-unit {
    font-size: 13px;
    font-weight: 800;
    color: var(--wr-g200);
    background: none !important;
    padding: 0 !important;
}

.deposit-page.wr .wallet-input-row.solo input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    font-variant-numeric: tabular-nums;
    padding: 0 !important;
    text-align: left !important;
}

.deposit-page.wr .amount-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
    margin-top: 9px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* kill the cream/tan legacy amount buttons on redesigned pages */
.deposit-page.wr .amount-grid button,
.withdraw-page.wr .amount-grid button {
    padding: 9px 0 !important;
    text-align: center !important;
    border-radius: 11px !important;
    background: var(--wr-panel) !important;
    border: 1px solid rgba(225, 255, 235, 0.24) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #f0fcf3 !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    min-height: 0 !important;
}

.deposit-page.wr .amount-grid button.is-active,
.withdraw-page.wr .amount-grid button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
}

/* rebate banner */
.deposit-page.wr .deposit-rebate-card {
    display: flex !important;
    align-items: center;
    gap: 11px;
    margin-top: 12px !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(255, 212, 42, 0.26), rgba(255, 212, 42, 0.08)) !important;
    border: 1px solid rgba(255, 212, 42, 0.55) !important;
}

.deposit-page.wr .deposit-rebate-card::before,
.deposit-page.wr .deposit-rebate-card::after {
    content: none !important;
    display: none !important;
}

.deposit-page.wr .deposit-rebate-card b#deposit-rebate-bonus {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.deposit-page.wr .deposit-rebate-card > div {
    flex: 1;
    min-width: 0;
}

.deposit-page.wr .deposit-rebate-card span {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0cc4c !important;
}

.deposit-page.wr .deposit-rebate-card strong {
    display: block;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.deposit-page.wr .deposit-rebate-card small {
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 212, 42, 0.55);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--wr-gold);
    flex: none;
}

/* step-two stack (pay + proof) */
.deposit-page.wr .deposit-step-stack {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    max-width: none !important;
}

.deposit-page.wr .deposit-method-detail:not([hidden]) {
    display: block !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
    box-shadow: none !important;
}

.deposit-page.wr .deposit-method-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.deposit-page.wr .deposit-method-detail-head span {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wr-white);
}

.deposit-page.wr .deposit-method-detail-head strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g100);
}

.deposit-page.wr .deposit-method-qr {
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.deposit-page.wr .deposit-method-qr img {
    width: 148px;
    height: 148px;
}

.deposit-page.wr .deposit-method-qr span {
    font-size: 10px;
    font-weight: 700;
    color: #5e7a67;
}

.deposit-page.wr .deposit-payment-code {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.deposit-page.wr .deposit-payment-code p {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 13px;
    background: var(--wr-input);
    border: 1px solid var(--wr-line);
    font-size: 16.5px;
    font-weight: 800;
    color: var(--wr-white);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.deposit-page.wr .copy-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    border-radius: 13px;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12.5px;
    font-weight: 800;
    flex: none;
}

.deposit-page.wr .deposit-method-detail small#deposit-method-note {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
    line-height: 1.5;
}

.deposit-page.wr .deposit-method-secondary {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--wr-g100);
}

.deposit-page.wr .deposit-exact-card:not([hidden]) {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    box-shadow: none !important;
}

.deposit-page.wr .deposit-exact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.deposit-page.wr .deposit-exact-head span {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g200) !important;
}

.deposit-page.wr .deposit-exact-card b#deposit-exact-method {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.2);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--wr-gold);
}

.deposit-page.wr .deposit-exact-card strong#deposit-exact-amount {
    display: block;
    margin-top: 8px;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1;
    color: var(--wr-white) !important;
    font-variant-numeric: tabular-nums;
}

.deposit-page.wr .deposit-exact-card small#deposit-exact-credit {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wr-g100);
    font-variant-numeric: tabular-nums;
}

.deposit-page.wr .deposit-step-back {
    height: 40px;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 212, 42, 0.5) !important;
    background: transparent !important;
    color: var(--wr-gold) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-page.wr .wr-proof-panel:not([hidden]) {
    display: block !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.deposit-page.wr .deposit-proof-field {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.deposit-page.wr .deposit-proof-field span {
    font-size: 12px;
    font-weight: 800;
    color: var(--wr-g100);
}

.deposit-page.wr .deposit-proof-field input {
    width: 100%;
    margin-top: 7px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: var(--wr-input) !important;
    border: 1px solid var(--wr-line) !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wr-white) !important;
}

.deposit-page.wr .deposit-proof-field input::placeholder {
    color: #8fc7a0;
}

.wr .wr-or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 13px 0;
}

.wr .wr-or-divider i {
    flex: 1;
    height: 1px;
    background: rgba(225, 255, 235, 0.18);
}

.wr .wr-or-divider span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--wr-g200);
}

.deposit-page.wr .deposit-proof-uploader {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.deposit-page.wr .proof-picker {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 18px 14px !important;
    border-radius: 14px !important;
    border: 1.5px dashed rgba(225, 255, 235, 0.5) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    text-align: center;
    color: #dcf5e3 !important;
    font-size: 0 !important;
    cursor: pointer;
}

.deposit-page.wr .proof-picker svg {
    width: 40px;
    height: 40px;
    padding: 11px;
    border-radius: 12px;
    background: var(--wr-panel-2);
    border: 1px solid var(--wr-line);
    color: #dcf5e3;
    margin-bottom: 6px;
}

.deposit-page.wr .proof-picker strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--wr-white);
}

.deposit-page.wr .proof-picker small {
    font-size: 11px;
    font-weight: 600;
    color: var(--wr-g200);
}

.deposit-page.wr .proof-picker em {
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.2);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 11.5px;
    font-weight: 800;
    font-style: normal;
    color: var(--wr-gold);
}

.deposit-page.wr .proof-picker input {
    display: none;
}

.deposit-page.wr .proof-status {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
    text-align: center;
}

.deposit-page.wr .proof-status.ready {
    color: var(--wr-mint);
}

.deposit-page.wr .wallet-reminder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
    line-height: 1.45;
}

/* request status list (deposit + withdraw) */
.wr .wallet-request-status,
.deposit-page.wr .deposit-request-status,
.withdraw-page.wr .withdraw-request-status {
    margin: 20px 16px 0 !important;
}

.wr .wallet-request-status .wallet-request-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px 8px;
}

.wr .wallet-request-status .wallet-request-head span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g200);
}

.wr .wallet-request-status .wallet-request-head strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--wr-g100);
    margin-top: 2px;
}

.wr .wallet-request-status .wallet-request-head small {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g200);
}

.wr .request-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    border-radius: 18px;
    margin-top: 8px;
}

.wr .request-status-card > div {
    flex: 1;
    min-width: 0;
}

.wr .request-status-card span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
}

.wr .request-status-card strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wr-white);
    font-variant-numeric: tabular-nums;
}

.wr .request-status-card b {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 181, 71, 0.16);
    border: 1px solid rgba(255, 181, 71, 0.5);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--wr-warn);
    flex: none;
}

.wr .request-status-card.is-approved b {
    background: rgba(70, 229, 138, 0.16);
    border-color: rgba(70, 229, 138, 0.5);
    color: var(--wr-mint);
}

.wr .request-status-card.is-failed b {
    background: rgba(255, 92, 73, 0.16);
    border-color: rgba(255, 92, 73, 0.5);
    color: var(--wr-danger);
}

.wr .request-status-card.is-empty {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
}

.wr .request-status-card.is-empty .wr-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--wr-panel-2);
    border: 1px solid var(--wr-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dcf5e3;
}

.wr .request-status-card.is-empty strong {
    margin-top: 10px;
    font-size: 14px;
}

.wr .request-status-card.is-empty span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--wr-g300);
}

.wr .request-status-card.is-empty button {
    margin-top: 10px;
    background: none;
    border: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--wr-gold);
}

/* sub-pages inherit panel look */
.wr .receiving-account-card,
.wr .wallet-account-form,
.wr .withdraw-pin-card,
.wr .device-summary-card {
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 18px !important;
}

/* --- VIP card: neutralize legacy circular-badge span styling ---
   `.account-page .account-vip-wide span` turns every span into a 52px gold
   circle and `> div:first-child` forces a grid. Override at higher specificity. */
.account-page.wr .vip-progress-card .wr-vip-head {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px;
}

.account-page.wr .vip-progress-card span {
    grid-row: auto !important;
    display: inline !important;
    place-items: initial !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.account-page.wr .vip-progress-card .wr-vip-pill {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 212, 42, 0.2) !important;
    border: 1px solid rgba(255, 212, 42, 0.6) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--wr-gold) !important;
    white-space: nowrap;
    margin-left: auto;
}

.account-page.wr .vip-progress-card .wr-vip-badge {
    display: flex !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    align-items: center;
    justify-content: center;
    flex: none;
}

.account-page.wr .vip-progress-card .progress-track {
    height: 8px !important;
    margin-top: 12px !important;
    border-radius: 999px !important;
    background: #073a1b !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
    overflow: hidden;
}

.account-page.wr .vip-progress-card .progress-track span {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--wr-gold-deep), var(--wr-gold)) !important;
}

.account-page.wr .vip-progress-card .wr-vip-foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.account-page.wr .vip-progress-card .wr-vip-foot button {
    width: auto !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 800;
    color: var(--wr-gold) !important;
}

.account-page.wr .vip-progress-card .wr-vip-extra {
    display: block !important;
    margin-top: 6px;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--wr-g300) !important;
}

.account-page.wr .vip-progress-card .wr-vip-extra b {
    color: var(--wr-g100) !important;
    font-weight: 700;
}

/* --- Deposit crypto step-two cards: match the clean panel style --- */
.deposit-page.wr .crypto-conversion-card:not([hidden]),
.deposit-page.wr .cryptapi-payment-card:not([hidden]) {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    box-shadow: none !important;
}

.deposit-page.wr .crypto-conversion-card > div {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.deposit-page.wr .crypto-conversion-card span,
.deposit-page.wr .cryptapi-payment-head span,
.deposit-page.wr .cryptapi-address-box span {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wr-g200) !important;
}

.deposit-page.wr .crypto-conversion-card strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
    font-variant-numeric: tabular-nums;
}

.deposit-page.wr .crypto-conversion-card small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--wr-gold) !important;
    line-height: 1.45;
}

.deposit-page.wr .cryptapi-payment-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.deposit-page.wr .cryptapi-payment-head > div {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.deposit-page.wr .cryptapi-payment-head strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--wr-white) !important;
}

.deposit-page.wr .cryptapi-payment-head small {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--wr-g200) !important;
    white-space: nowrap;
    flex: none;
}

.deposit-page.wr .cryptapi-payment-grid {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.deposit-page.wr .cryptapi-payment-qr {
    width: 110px !important;
    height: 110px !important;
    border-radius: 14px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #5e7a67 !important;
    font-size: 11px;
    overflow: hidden;
}

.deposit-page.wr .cryptapi-payment-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deposit-page.wr .cryptapi-address-box {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.deposit-page.wr .cryptapi-address-box strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--wr-white) !important;
    word-break: break-all;
    line-height: 1.4;
}

.deposit-page.wr .cryptapi-address-box .copy-mini {
    align-self: flex-start;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12px;
    font-weight: 800;
}

.deposit-page.wr .cryptapi-warning {
    margin-top: 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--wr-warn) !important;
    line-height: 1.45;
}

/* ============================================================
   BATCH A — Account cluster: Security 5a · Profile 5b · Payout 2a
   ============================================================ */
.wr .wr-page-body {
    padding: 14px 16px 120px !important;
}

.wr .wr-head-save {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12.5px;
    font-weight: 800;
    border: 0;
}

/* shared: gradient hero, segment bar, footer note */
.wr .wr-sec-hero,
.wr .wr-payout-hero {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, #26a155, #12602f);
    border: 1px solid rgba(225, 255, 235, 0.26);
}

.wr .wr-sec-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wr .wr-sec-hero-top i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: none;
}

.wr .wr-sec-hero-top span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wr-g100);
}

.wr .wr-sec-hero-top strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    color: var(--wr-warn);
}

.wr .wr-seg-bar {
    display: flex;
    gap: 4px;
    margin-top: 13px;
}

.wr .wr-seg-bar i {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
}

.wr .wr-seg-bar i.is-on {
    background: var(--wr-gold);
}

.wr .wr-sec-hero p,
.wr .wr-payout-hero p {
    margin: 10px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g100);
    line-height: 1.5;
}

.wr .wr-sec-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 2px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g200);
    line-height: 1.5;
}

.wr .wr-sec-foot svg {
    flex: none;
}

.wr .wr-sec-count {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 181, 71, 0.16);
    border: 1px solid rgba(255, 181, 71, 0.5);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--wr-warn);
}

/* Security list rows (5a) */
.wr .wr-sec-list {
    margin-top: 12px;
    border-radius: 18px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    overflow: hidden;
    display: block;
}

.wr .wr-sec-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--wr-line-soft) !important;
    text-align: left;
}

.wr .wr-sec-row:first-child {
    border-top: 0 !important;
}

.wr .wr-sec-row.is-highlight {
    background: rgba(255, 212, 42, 0.07) !important;
}

.wr .wr-sec-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--wr-panel-2);
    border: 1px solid var(--wr-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dcf5e3;
    flex: none;
}

.wr .wr-sec-icon.is-gold {
    background: rgba(255, 212, 42, 0.16);
    border-color: rgba(255, 212, 42, 0.55);
    color: var(--wr-gold);
}

.wr .wr-sec-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wr .wr-sec-text b {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.wr .wr-sec-text small {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
}

.wr .wr-sec-row.is-highlight .wr-sec-text small {
    color: #f0cc4c;
}

.wr .wr-pill-gold {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--wr-gold);
    color: var(--wr-ink) !important;
    font-size: 12px;
    font-weight: 800;
    flex: none;
    white-space: nowrap;
}

.wr .wr-pill-gold.is-glow {
    box-shadow: 0 6px 16px rgba(255, 176, 0, 0.35);
}

.wr .wr-pill-ghost {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    flex: none;
}

.wr .wr-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(70, 229, 138, 0.16);
    border: 1px solid rgba(70, 229, 138, 0.5);
    font-size: 10px;
    font-weight: 800;
    color: var(--wr-mint);
    flex: none;
}

.wr .wr-verified i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--wr-mint);
}

.wr .wr-switch2 {
    width: 42px;
    height: 25px;
    border-radius: 999px;
    background: #073a1b;
    border: 1px solid rgba(225, 255, 235, 0.24);
    position: relative;
    flex: none;
}

.wr .wr-switch2::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #8fc7a0;
    transition: transform 0.16s ease, background 0.16s ease;
}

.wr .wr-switch2.is-on {
    background: rgba(255, 212, 42, 0.25);
    border-color: rgba(255, 212, 42, 0.6);
}

.wr .wr-switch2.is-on::after {
    transform: translateX(17px);
    background: var(--wr-gold);
}

/* Profile edit (5b) */
.wr .wr-profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.wr .wr-profile-avatar-wrap .account-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 999px !important;
    background: #133326 !important;
    border: 2.5px solid rgba(255, 212, 42, 0.65) !important;
    color: var(--wr-gold) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wr .wr-avatar-cam {
    position: absolute;
    top: 58px;
    left: calc(50% + 22px);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--wr-gold);
    border: 2px solid #081711;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-ink);
    cursor: pointer;
}

.wr .wr-change-photo {
    margin-top: 10px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.34);
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.wr .wr-field-label {
    margin: 14px 2px 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g200);
}

.wr .wr-profile-avatar-wrap + .wr-field-label {
    margin-top: 18px;
}

.wr .wr-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
}

.wr .wr-field-edit {
    background: var(--wr-input);
    border: 1.5px solid rgba(255, 212, 42, 0.55);
}

.wr .wr-field-dashed {
    background: var(--wr-input);
    border: 1.5px dashed rgba(225, 255, 235, 0.4);
}

.wr .wr-field input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    padding: 0;
}

.wr .wr-field input::placeholder,
.wr .wr-field-placeholder {
    color: #8fc7a0;
    font-weight: 600;
    font-size: 13.5px;
}

.wr .wr-field-placeholder {
    flex: 1;
}

.wr .wr-field-edit b {
    font-size: 11px;
    font-weight: 700;
    color: #8fc7a0;
}

.wr .wr-field-value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wr-g100);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr .wr-field-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    color: var(--wr-gold);
    font-size: 11.5px;
    font-weight: 800;
    flex: none;
}

.wr .wr-field-hint {
    margin: 5px 2px 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #8fc7a0;
}

.wr .wr-logout-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    padding: 14px !important;
    border-radius: 16px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.wr .wr-logout-row span {
    flex: 1;
    text-align: left;
    font-size: 13.5px;
    font-weight: 800;
    color: #ff8a7a;
}

/* Payout accounts (2a) */
.wr .wr-payout-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wr .wr-payout-hero-top span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wr-g100);
}

.wr .wr-payout-hero-top b {
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-g100);
}

.wr #receiving-account-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.wr .wr-payout-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
}

.wr .wr-payout-row.is-linked {
    background: rgba(70, 229, 138, 0.1);
    border: 1.5px solid rgba(70, 229, 138, 0.5);
}

.wr .wr-payout-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    flex: none;
}

.wr .pb-jazzcash { background: #c0272f; }
.wr .pb-easypaisa { background: #009e4f; }
.wr .pb-bank { background: #33526e; }
.wr .pb-usdt { background: #26a17b; }
.wr .pb-binance { background: #f3ba2f; color: #201800; }

.wr .wr-payout-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wr .wr-payout-text b {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.wr .wr-payout-text small {
    font-size: 12px;
    font-weight: 600;
    color: var(--wr-g300);
}

.wr .wr-linked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(70, 229, 138, 0.16);
    border: 1px solid rgba(70, 229, 138, 0.5);
    font-size: 9.5px;
    font-weight: 800;
    color: var(--wr-mint);
}

.wr .wr-linked-badge i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--wr-mint);
}

.wr .wr-remove-btn {
    background: none;
    border: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: #ff8a7a;
    flex: none;
}

/* Batch A fixes — neutralize legacy profile-form input box + camera dot */
.wr .profile-details-form .wr-field {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
}

.wr .wr-field input {
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
}

.wr .wr-avatar-cam {
    left: auto;
    right: calc(50% - 42px);
    top: 56px;
}

/* ============================================================
   BATCH B — Invite page (2e hub + 3a-3d tabs)
   ============================================================ */
.refer-page.wr {
    padding-bottom: 120px !important;
}

.refer-page.wr .invite-panel {
    padding: 14px 16px 22px !important;
    background: transparent !important;
}

/* pill tab strip */
.refer-page.wr .mobile-tab-strip,
.promo-center-page.wr .mobile-tab-strip {
    display: flex !important;
    gap: 7px !important;
    padding: 12px 16px 2px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    background: transparent !important;
    border: 0 !important;
    scrollbar-width: none;
}

.refer-page.wr .mobile-tab-strip::-webkit-scrollbar,
.promo-center-page.wr .mobile-tab-strip::-webkit-scrollbar {
    display: none;
}

.refer-page.wr .mobile-tab-strip button,
.promo-center-page.wr .mobile-tab-strip button {
    flex: none !important;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    min-height: 0 !important;
}

.refer-page.wr .mobile-tab-strip button.is-active,
.promo-center-page.wr .mobile-tab-strip button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

.refer-page.wr .mobile-tab-strip .nav-badge,
.promo-center-page.wr .mobile-tab-strip .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--wr-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

/* ticker */
.refer-page.wr .ticker-lane {
    padding: 9px 13px !important;
    border-radius: 12px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 11.5px;
    font-weight: 600;
}

.refer-page.wr .ticker-lane b { color: var(--wr-gold); }

/* agent id gradient hero */
.refer-page.wr .agent-summary-card {
    display: block !important;
    margin-top: 12px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
}

.refer-page.wr .agent-summary-card > div { border: 0 !important; padding: 0 !important; }
.refer-page.wr .agent-summary-card > div + div { margin-top: 10px; }

.refer-page.wr .agent-summary-card span {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g100) !important;
}

.refer-page.wr .agent-summary-card strong {
    display: block;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.refer-page.wr .agent-summary-card small {
    font-size: 11px;
    font-weight: 600;
    color: var(--wr-g200);
}

/* generic green panels */
.refer-page.wr .commission-card,
.refer-page.wr .invite-link-card,
.refer-page.wr .data-ledger-card,
.refer-page.wr .settlement-card,
.refer-page.wr .agent-tutorial,
.refer-page.wr .empty-state-block {
    margin-top: 12px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.refer-page.wr .app-panel-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.refer-page.wr .app-panel-title span {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g200) !important;
}

.refer-page.wr .app-panel-title h2 {
    margin: 2px 0 0 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.refer-page.wr .app-panel-title > strong {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.2);
    border: 1px solid rgba(255, 212, 42, 0.6);
    font-size: 11px;
    font-weight: 800;
    color: var(--wr-gold);
    font-variant-numeric: tabular-nums;
}

.refer-page.wr .app-panel-title button {
    padding: 7px 16px !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border: 0 !important;
    min-height: 0 !important;
}

/* commission 4-tile grid */
.refer-page.wr .commission-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    margin-top: 12px !important;
}

.refer-page.wr .commission-row > div {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: var(--wr-input) !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
}

.refer-page.wr .commission-row span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g200);
}

.refer-page.wr .commission-row strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.refer-page.wr .commission-row > div:last-child strong { color: var(--wr-gold); }

/* invite tools: QR + link */
.refer-page.wr .invite-tools {
    display: flex !important;
    gap: 12px;
    margin-top: 12px;
    align-items: center;
}

.refer-page.wr .qr-box {
    width: 92px;
    height: 92px;
    border-radius: 12px;
    background: #fff !important;
    flex: none;
    background-image:
        linear-gradient(90deg, #141414 25%, transparent 0 50%, #141414 0 75%, transparent 0),
        linear-gradient(#141414 25%, transparent 0 50%, #141414 0 75%, transparent 0);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: repeat;
    background-clip: content-box;
    padding: 12px;
}

.refer-page.wr .invite-copy-box {
    flex: 1;
    min-width: 0;
    display: block !important;
}

.refer-page.wr .invite-copy-box span {
    display: block;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--wr-input);
    border: 1px solid rgba(225, 255, 235, 0.18);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wr-g100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.refer-page.wr .invite-copy-box button {
    width: 100%;
    margin-top: 8px;
    height: 38px;
    border-radius: 11px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 13px;
    font-weight: 800;
    border: 0;
}

.refer-page.wr .share-row {
    display: flex !important;
    gap: 7px;
    margin-top: 12px;
}

.refer-page.wr .share-row button {
    flex: 1 !important;
    padding: 9px 0 !important;
    border-radius: 11px !important;
    background: var(--wr-input) !important;
    border: 1px solid var(--wr-line) !important;
    color: #f0fcf3 !important;
    font-size: 12px;
    font-weight: 700;
    min-height: 0 !important;
}

.refer-page.wr .split-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.refer-page.wr .split-actions button {
    height: 46px;
    border-radius: 13px !important;
    font-size: 13.5px;
    font-weight: 800;
    border: 0 !important;
}

.refer-page.wr .split-actions button:first-child {
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
}

.refer-page.wr .split-actions button:last-child {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
}

/* data ledger rows */
.refer-page.wr .data-ledger-card {
    padding: 0 !important;
    overflow: hidden;
}

.refer-page.wr .data-ledger-card h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 14px 16px 12px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
    border-bottom: 1px solid var(--wr-line-soft);
}

.refer-page.wr .data-ledger-card h2 strong { color: var(--wr-gold); font-variant-numeric: tabular-nums; }

.refer-page.wr .data-ledger-card > div {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
    border-top: 1px solid var(--wr-line-soft);
}

.refer-page.wr .data-ledger-card > div:first-of-type { border-top: 0; }

.refer-page.wr .data-ledger-card span { font-size: 13px; font-weight: 600; color: var(--wr-g100); }
.refer-page.wr .data-ledger-card strong { font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* date/filter pills */
.refer-page.wr .date-pills,
.refer-page.wr .filter-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    margin-top: 12px !important;
}

.refer-page.wr .date-pills button,
.refer-page.wr .filter-row button,
.refer-page.wr .filter-row select,
.refer-page.wr .filter-row input {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 12px;
    font-weight: 700;
    min-height: 0 !important;
}

.refer-page.wr .filter-row select,
.refer-page.wr .filter-row input {
    flex: 1 1 126px;
    min-width: 0;
    height: 36px;
}

.refer-page.wr .filter-row input::placeholder {
    color: rgba(226, 233, 201, 0.44);
}

.refer-page.wr .date-pills button.is-active,
.refer-page.wr .filter-row button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

/* settlement gradient */
.refer-page.wr .settlement-card {
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
    display: block !important;
}

.refer-page.wr .settlement-card span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-g100);
}

.refer-page.wr .settlement-card strong {
    display: block;
    margin: 2px 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

/* empty state */
.refer-page.wr .empty-state-block,
.promo-center-page.wr .empty-state-block {
    padding: 32px 18px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.refer-page.wr .empty-cube,
.promo-center-page.wr .empty-cube {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--wr-panel-2);
    border: 1px solid var(--wr-line);
}

.refer-page.wr .empty-state-block strong,
.promo-center-page.wr .empty-state-block strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
}

.refer-page.wr .empty-state-block button,
.promo-center-page.wr .empty-state-block button {
    padding: 9px 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    min-height: 0 !important;
}

/* tutorial tree */
.refer-page.wr .agent-tutorial h2 { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: #fff; }
.refer-page.wr .tutorial-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.refer-page.wr .tutorial-tree > div {
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--wr-gold); color: var(--wr-ink);
    font-size: 15px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.refer-page.wr .tutorial-tree span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 40px; margin: 0 4px; border-radius: 11px;
    background: var(--wr-input); border: 1px solid var(--wr-line);
    color: #f0fcf3; font-size: 12.5px; font-weight: 800;
}
.refer-page.wr .agent-tutorial p { margin: 11px 0 0; font-size: 11.5px; font-weight: 600; color: var(--wr-g300); line-height: 1.55; text-align: center; }
.refer-page.wr .agent-tutorial p strong { color: var(--wr-gold); }

/* referral link form */
.refer-page.wr .referral-link-form label { font-size: 12px; font-weight: 800; color: var(--wr-g100); }
.refer-page.wr .referral-link-form > div { display: flex; gap: 8px; margin-top: 6px; }
.refer-page.wr .referral-link-form input {
    flex: 1; min-height: 0 !important; padding: 12px 14px !important;
    border-radius: 12px !important; background: var(--wr-input) !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important; color: #fff !important;
    font-size: 13px; font-weight: 600;
}
.refer-page.wr .referral-link-form button {
    padding: 0 16px !important; border-radius: 12px !important;
    background: var(--wr-gold) !important; color: var(--wr-ink) !important;
    font-size: 12.5px; font-weight: 800; border: 0 !important;
}

/* ============================================================
   BATCH C — Promo page (2f hub + 3e-3h tabs + 5c mission)
   ============================================================ */
.promo-center-page.wr {
    padding-bottom: 120px !important;
}

.promo-center-page.wr .promo-panel {
    padding: 12px 16px 22px !important;
    background: transparent !important;
    display: none !important;
}

.promo-center-page.wr .promo-panel.is-active {
    display: block !important;
    grid-template-columns: none !important;
}

/* overview gradient card (2f hub) */
.promo-center-page.wr .promo-overview-card {
    display: block !important;
    margin: 12px 16px 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
}

.promo-center-page.wr .promo-overview-card > div {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

.promo-center-page.wr .promo-overview-card span {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g100) !important;
}

.promo-center-page.wr .promo-overview-card strong {
    display: block;
    margin-top: 4px;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--wr-gold) !important;
    font-variant-numeric: tabular-nums;
}

.promo-center-page.wr .promo-overview-card > div:last-of-type strong {
    color: #fff !important;
    font-size: 16px !important;
}

.promo-center-page.wr .promo-overview-card small {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wr-g100);
}

.promo-center-page.wr .promo-overview-card button {
    display: block !important;
    width: 100%;
    margin-top: 14px !important;
    height: 46px;
    border-radius: 13px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 14px;
    font-weight: 800;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, 0.4);
}

/* quick strip 4 tiles */
.promo-center-page.wr .promo-quick-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
    margin: 10px 16px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.promo-center-page.wr .promo-quick-strip button {
    padding: 9px 4px !important;
    border-radius: 12px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    text-align: center;
    min-height: 0 !important;
}

.promo-center-page.wr .promo-quick-strip button:first-child {
    background: rgba(255, 212, 42, 0.2) !important;
    border-color: rgba(255, 212, 42, 0.6) !important;
}

.promo-center-page.wr .promo-quick-strip strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #f0fcf3;
}

.promo-center-page.wr .promo-quick-strip button:first-child strong { color: var(--wr-gold); }

.promo-center-page.wr .promo-quick-strip span {
    font-size: 10px;
    font-weight: 700;
    color: var(--wr-g300);
}

/* side filter rail -> horizontal pills */
.promo-center-page.wr .side-filter-rail {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    margin-bottom: 12px;
    width: auto !important;
}

.promo-center-page.wr .side-filter-rail button {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 12px;
    font-weight: 700;
    min-height: 0 !important;
}

.promo-center-page.wr .side-filter-rail button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

/* reward banners */
.promo-center-page.wr .promo-banners {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

.promo-center-page.wr .reward-banner {
    display: block !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
}

.promo-center-page.wr .reward-banner span {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f0cc4c !important;
}

.promo-center-page.wr .reward-banner strong {
    display: block;
    margin-top: 8px;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.15;
    color: var(--wr-gold) !important;
}

.promo-center-page.wr .reward-banner small {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wr-g100);
    line-height: 1.5;
}

.promo-center-page.wr .reward-banner button {
    display: inline-flex;
    align-items: center;
    margin-top: 12px !important;
    padding: 11px 20px !important;
    border-radius: 12px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 13px;
    font-weight: 800;
    border: 0 !important;
    min-height: 0 !important;
}

/* task board (mission) */
.promo-center-page.wr .task-board {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    overflow: hidden;
}

.promo-center-page.wr .task-board article {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 13px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--wr-line-soft);
}

.promo-center-page.wr .task-board article:first-child { border-top: 0; }

.promo-center-page.wr .task-board strong {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.promo-center-page.wr .task-board button {
    order: 2;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 12px;
    font-weight: 800;
    border: 0 !important;
    min-height: 0 !important;
    flex: none;
}

.promo-center-page.wr .task-board span {
    order: 3;
    flex-basis: 100%;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g300);
}

/* VIP tab */
.promo-center-page.wr .vip-mobile-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: var(--wr-gold) !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, 0.4);
}

.promo-center-page.wr .vip-mobile-card > div { flex: 1; }
.promo-center-page.wr .vip-mobile-card span { font-size: 13.5px; font-weight: 800; color: var(--wr-ink); }
.promo-center-page.wr .vip-mobile-card strong { display: block; font-size: 11.5px; font-weight: 700; color: rgba(32,24,0,.7); font-variant-numeric: tabular-nums; }
.promo-center-page.wr .vip-mobile-card button {
    padding: 8px 14px !important; border-radius: 999px !important;
    background: var(--wr-ink) !important; color: var(--wr-gold) !important;
    font-size: 12px; font-weight: 800; border: 0 !important; min-height: 0 !important;
}

.promo-center-page.wr .vip-tier-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.promo-center-page.wr .vip-tier-list article {
    display: block !important;
    padding: 18px 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
    text-align: left;
}

.promo-center-page.wr .vip-tier-list span {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: #f0cc4c;
}

.promo-center-page.wr .vip-tier-list strong {
    display: block; margin-top: 8px; font-size: 22px; font-weight: 800;
    line-height: 1.15; color: var(--wr-gold);
}

.promo-center-page.wr .vip-tier-list small {
    display: block; margin-top: 7px; font-size: 12px; font-weight: 600;
    color: var(--wr-g100); line-height: 1.5;
}

.promo-center-page.wr .vip-tier-list button {
    display: inline-flex; margin-top: 12px !important; padding: 11px 20px !important;
    border-radius: 12px !important; background: var(--wr-gold) !important;
    color: var(--wr-ink) !important; font-size: 13px; font-weight: 800;
    border: 0 !important; min-height: 0 !important;
}

/* rebate list rows */
.promo-center-page.wr .rebate-list {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    overflow: hidden;
}

.promo-center-page.wr .rebate-list > * {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border-top: 1px solid var(--wr-line-soft);
}

.promo-center-page.wr .rebate-list > *:first-child { border-top: 0; }

/* interest tab */
.promo-center-page.wr .interest-panel {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.promo-center-page.wr .interest-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #26a155, #12602f) !important;
    border: 1px solid rgba(225, 255, 235, 0.26) !important;
    align-items: center;
}

.promo-center-page.wr .interest-top > div { grid-column: 1 / 3; }
.promo-center-page.wr .interest-top span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-g100); }
.promo-center-page.wr .interest-top strong { display: block; margin-top: 6px; font-size: 30px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.promo-center-page.wr .interest-top button {
    height: 44px; border-radius: 12px !important; font-size: 13.5px; font-weight: 800; border: 0 !important; min-height: 0 !important;
}
.promo-center-page.wr .interest-top button:first-of-type { background: var(--wr-gold) !important; color: var(--wr-ink) !important; }
.promo-center-page.wr .interest-top button:last-of-type { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.34) !important; color: #fff !important; }

.promo-center-page.wr .interest-panel p {
    margin-top: 12px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wr-g100);
    line-height: 1.55;
}

.promo-center-page.wr .interest-panel p strong { color: #fff; }

/* rebate-list article inner structure (3f) */
.promo-center-page.wr .rebate-list article {
    align-items: center;
    gap: 10px;
}
.promo-center-page.wr .rebate-list .provider-mark {
    width: 36px; height: 36px; border-radius: 11px;
    background: #fff; color: #12331e;
    font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.promo-center-page.wr .rebate-list article > div {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.promo-center-page.wr .rebate-list article > div:nth-of-type(2) { display: none; }
.promo-center-page.wr .rebate-list article span {
    font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.promo-center-page.wr .rebate-list article span b { color: #fff; }
.promo-center-page.wr .rebate-list article strong {
    font-size: 11px; font-weight: 600; color: var(--wr-g300); font-variant-numeric: tabular-nums;
}
.promo-center-page.wr .rebate-list article button {
    padding: 8px 15px !important; border-radius: 999px !important;
    background: var(--wr-gold) !important; color: var(--wr-ink) !important;
    font-size: 12px; font-weight: 800; border: 0 !important; min-height: 0 !important; flex: none;
}

/* ============================================================
   BATCH D — Utility modals: Notifications 2b · Transactions 2c · Support 2d
   ============================================================ */
.modal-card.wr {
    background: var(--wr-bg) !important;
    border: 1px solid rgba(10, 25, 16, 0.25) !important;
    color: #fff;
}

.modal-card.wr .screen-topline {
    color: var(--wr-g200) !important;
}

.modal-card.wr .close-modal {
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: #e7faec !important;
    border-radius: 11px !important;
}

.modal-card.wr .history-modal-head,
.modal-card.wr .support-chat-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.modal-card.wr .history-modal-head h2,
.modal-card.wr .support-chat-head h2,
.modal-card.wr h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.modal-card.wr .history-modal-head span,
.modal-card.wr .support-chat-head span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wr-g200);
}

.modal-card.wr .history-modal-head button,
.modal-card.wr .support-chat-head button,
.modal-card.wr [data-clear-notifications],
.modal-card.wr [data-refresh-wallet-history],
.modal-card.wr #support-new-chat {
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    flex: none;
    min-height: 0 !important;
}

/* history summary tiles (2c) */
.modal-card.wr .history-summary-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.modal-card.wr .history-summary-grid > div {
    padding: 12px 13px;
    border-radius: 16px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
}

.modal-card.wr .history-summary-grid span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wr-g200);
}

.modal-card.wr .history-summary-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.modal-card.wr .history-summary-grid > div:nth-child(2) strong,
.modal-card.wr .history-summary-grid > div:nth-child(4) strong { color: var(--wr-warn); }

/* filter pills (2c) */
.modal-card.wr .history-filter-row {
    display: flex !important;
    gap: 7px !important;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.modal-card.wr .history-filter-row button {
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 12px;
    font-weight: 700;
    min-height: 0 !important;
}

.modal-card.wr .history-filter-row button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

/* history rows (2c) */
.modal-card.wr .wallet-history-list {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    overflow: hidden;
}

.modal-card.wr .history-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 13px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--wr-line-soft) !important;
}

.modal-card.wr .history-row:first-child { border-top: 0 !important; }

.modal-card.wr .history-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(70, 229, 138, 0.16);
    border: 1px solid rgba(70, 229, 138, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-mint);
    font-size: 16px;
    font-weight: 800;
    flex: none;
}

.modal-card.wr .history-row.is-pending .history-row-icon,
.modal-card.wr .history-row.is-review .history-row-icon {
    background: rgba(255, 181, 71, 0.16);
    border-color: rgba(255, 181, 71, 0.5);
    color: var(--wr-warn);
}

.modal-card.wr .history-row > div:not(.history-row-icon) { flex: 1; min-width: 0; }
.modal-card.wr .history-row strong { display: block; font-size: 13.5px; font-weight: 800; color: #fff; }
.modal-card.wr .history-row span { display: block; font-size: 11.5px; font-weight: 600; color: var(--wr-g300); margin-top: 2px; }
.modal-card.wr .history-row small { display: block; font-size: 10.5px; font-weight: 600; color: var(--wr-g200); margin-top: 2px; }
.modal-card.wr .history-row aside { text-align: right; flex: none; }
.modal-card.wr .history-row aside b { font-size: 14.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.modal-card.wr .history-row aside em {
    display: inline-flex; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
    background: rgba(255, 181, 71, 0.16); border: 1px solid rgba(255, 181, 71, 0.5);
    font-size: 10px; font-weight: 800; font-style: normal; color: var(--wr-warn);
}
.modal-card.wr .history-row.is-approved aside em { background: rgba(70,229,138,.16); border-color: rgba(70,229,138,.5); color: var(--wr-mint); }
.modal-card.wr .history-row.is-failed aside em { background: rgba(255,92,73,.16); border-color: rgba(255,92,73,.5); color: var(--wr-danger); }

/* notifications rows (2b) */
.modal-card.wr .activity-list {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border-radius: 18px;
    background: var(--wr-panel);
    border: 1px solid var(--wr-line);
    overflow: hidden;
}

.modal-card.wr .activity-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 13px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--wr-line-soft) !important;
}

.modal-card.wr .activity-row:first-child { border-top: 0 !important; }
.modal-card.wr .activity-row > div { flex: 1; min-width: 0; }
.modal-card.wr .activity-row strong { display: block; font-size: 13.5px; font-weight: 800; color: #fff; }
.modal-card.wr .activity-row span { display: block; font-size: 11.5px; font-weight: 600; color: var(--wr-g300); margin-top: 2px; }
.modal-card.wr .activity-row aside { text-align: right; flex: none; }
.modal-card.wr .activity-row aside b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.modal-card.wr .activity-row aside b.positive { color: var(--wr-mint); }
.modal-card.wr .activity-row aside b.negative { color: var(--wr-danger); }
.modal-card.wr .activity-row aside small { display: block; font-size: 10.5px; font-weight: 600; color: var(--wr-g200); margin-top: 2px; }

/* inbox list */
.modal-card.wr .inbox-list { display: flex; flex-direction: column; gap: 8px; }
.modal-card.wr .inbox-list article { padding: 13px 14px; border-radius: 16px; background: var(--wr-panel); border: 1px solid var(--wr-line); }
.modal-card.wr .inbox-list strong { font-size: 13.5px; font-weight: 800; color: #fff; }
.modal-card.wr .inbox-list span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--wr-g300); line-height: 1.5; }

/* support chat (2d) */
.modal-card.wr .support-category {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    margin-bottom: 12px;
}

.modal-card.wr .support-category button {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: var(--wr-input) !important;
    border: 1px solid var(--wr-line) !important;
    color: var(--wr-g100) !important;
    font-size: 12px;
    font-weight: 700;
    min-height: 0 !important;
}

.modal-card.wr .support-category button.is-active {
    background: var(--wr-gold) !important;
    border-color: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-weight: 800 !important;
}

.modal-card.wr .support-ticket-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-g200);
    margin-bottom: 10px;
}

.modal-card.wr .support-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.modal-card.wr .support-chat p,
.modal-card.wr .support-chat .support-bubble-in {
    max-width: 82%;
    align-self: flex-start;
    padding: 11px 13px;
    border-radius: 14px 14px 14px 5px;
    background: var(--wr-input);
    border: 1px solid rgba(225, 255, 235, 0.18);
    margin: 0;
}

.modal-card.wr .support-chat .support-bubble-out,
.modal-card.wr .support-chat p.is-user {
    align-self: flex-end;
    background: var(--wr-gold);
    border: 0;
    border-radius: 14px 14px 5px 14px;
    color: var(--wr-ink);
}

.modal-card.wr .support-chat p strong,
.modal-card.wr .support-chat .support-bubble-in strong { font-size: 11px; font-weight: 800; color: #f0cc4c; }
.modal-card.wr .support-chat p span { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: #f0fcf3; line-height: 1.5; }
.modal-card.wr .support-chat p.is-user span { color: var(--wr-ink); }

.modal-card.wr .support-form {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.modal-card.wr .support-form input#support-input {
    flex: 1;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    background: var(--wr-input) !important;
    border: 1px solid var(--wr-line) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
}

.modal-card.wr .support-proof {
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.modal-card.wr .support-form button[type="submit"] {
    padding: 11px 18px !important;
    border-radius: 999px !important;
    background: var(--wr-gold) !important;
    color: var(--wr-ink) !important;
    font-size: 13px;
    font-weight: 800;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, 0.4);
    min-height: 0 !important;
}

.modal-card.wr .support-safe-note {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--wr-g200);
}

.modal-card.wr .support-thread-list { display: none; }

/* empty state inside modals */
.modal-card.wr .empty-state-block {
    padding: 32px 18px !important;
    border-radius: 18px !important;
    background: var(--wr-panel) !important;
    border: 1px solid var(--wr-line) !important;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.modal-card.wr .empty-cube { width: 44px; height: 44px; border-radius: 14px; background: var(--wr-panel-2); border: 1px solid var(--wr-line); }
.modal-card.wr .empty-state-block strong { font-size: 14px; font-weight: 800; color: #fff; }

/* Batch D fixes */
.modal-card.wr .support-inbox-layout .support-category button { background: var(--wr-input) !important; border: 1px solid var(--wr-line) !important; }
.modal-card.wr .support-inbox-layout .support-category button.is-active { background: var(--wr-gold) !important; border-color: var(--wr-gold) !important; }
.modal-card.wr .support-thread-list { display: none !important; }
.modal-card.wr .support-inbox-layout { display: block !important; }

/* Batch D — keep history/activity rows single-line with right column */
.modal-card.wr .history-row,
.modal-card.wr .activity-row {
    flex-wrap: nowrap !important;
    display: flex !important;
}
.modal-card.wr .history-row aside,
.modal-card.wr .activity-row aside {
    flex: none !important;
    width: auto !important;
    align-self: center;
}

/* ============================================================
   BATCH E — Home lobby (4a): categories, game grid, jackpot, bottom nav
   ============================================================ */
.lobby-view { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }

/* app-bar style header */
.lobby-view .lobby-header {
    background: #082310 !important;
    border-bottom: 1px solid rgba(225, 255, 235, 0.18) !important;
}

.lobby-view .lobby-brand .brand-badge {
    background: #FFD42A !important;
    color: #201800 !important;
    border-radius: 8px !important;
}

.lobby-view .wallet-badge {
    background: rgba(255, 212, 42, 0.16) !important;
    border: 1px solid rgba(255, 212, 42, 0.6) !important;
    border-radius: 999px !important;
}

.lobby-view .wallet-badge strong,
.lobby-view .wallet-badge small { color: #FFD42A !important; }

.lobby-view .wallet-badge .wallet-plus {
    background: #FFD42A !important;
    color: #201800 !important;
}

/* category pills (4a) */
.wr-lobby .category-row.emerald-categories {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto;
    padding: 4px 16px 2px !important;
    scrollbar-width: none;
    background: transparent !important;
}

.wr-lobby .category-row.emerald-categories::-webkit-scrollbar { display: none; }

.wr-lobby .category-row.emerald-categories button {
    flex: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    color: #D9F4E0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: none;
    min-height: 0 !important;
    width: auto !important;
}

.wr-lobby .category-row.emerald-categories button.is-active {
    background: #FFD42A !important;
    border-color: #FFD42A !important;
    color: #201800 !important;
    font-weight: 800 !important;
}

.wr-lobby .category-row.emerald-categories button img {
    width: 16px !important;
    height: 16px !important;
    filter: none;
}

.wr-lobby .category-row.emerald-categories button.is-active img {
    filter: brightness(0) saturate(100%);
}

/* jackpot banner */
.wr-lobby .jackpot-banner {
    margin: 12px 16px 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #071A0F, #0E2D19 48%, #2E1210) !important;
    border: 1px solid rgba(255, 92, 73, 0.45) !important;
}

.wr-lobby .jackpot-banner .jackpot-kicker,
.wr-lobby .jackpot-banner small { color: #46E58A !important; }
.wr-lobby .jackpot-banner strong { color: #FFD42A !important; font-variant-numeric: tabular-nums; }

/* section title */
.wr-lobby .hot-section.emerald-games { padding: 0 16px !important; }
.wr-lobby .section-title h2 { font-size: 18px !important; font-weight: 800 !important; color: #fff !important; }
.wr-lobby .section-title p { font-size: 11px !important; font-weight: 600 !important; color: #B2DFC0 !important; }

/* 3-col game grid (4a) */
.wr-lobby .game-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
}

.wr-lobby .game-card {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
}

.wr-lobby .game-card img {
    width: 100% !important;
    height: 118px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
    background: linear-gradient(160deg, #123018, #062E24);
}

.wr-lobby .game-card.aviator-card img,
.wr-lobby .game-card[data-game="aviator"] img {
    border-color: rgba(255, 92, 73, 0.4) !important;
    background: linear-gradient(160deg, #2A0E0C, #120504);
}

.wr-lobby .game-card em {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(8, 35, 16, 0.8) !important;
    color: #fff !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: 0.05em;
}

.wr-lobby .game-card[data-game="aviator"] em { background: #FF5C49 !important; }
.wr-lobby .game-card.is-favorite em,
.wr-lobby .game-card[data-game="mines"] em { background: #FFD42A !important; color: #201800 !important; }

.wr-lobby .game-card strong {
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-align: center;
}

.wr-lobby .game-card small { display: none !important; }

/* bottom nav (4a) */
.lobby-view .bottom-nav {
    background: #082310 !important;
    border-top: 1px solid rgba(225, 255, 235, 0.18) !important;
}

.lobby-view .bottom-nav button {
    color: #B2DFC0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.lobby-view .bottom-nav button.is-active {
    color: #FFD42A !important;
    font-weight: 800 !important;
}

.lobby-view .bottom-nav button span { font-size: 17px !important; }

/* chat FAB (4a) */
.lobby-view .lobby-support-fab {
    background: #FFD42A !important;
    color: #201800 !important;
    box-shadow: 0 10px 26px rgba(255, 176, 0, 0.5) !important;
    border-radius: 999px !important;
}

.lobby-view .lobby-support-fab strong { color: #201800 !important; }

/* ============================================================
   QA PASS — cross-screen consistency fixes
   ============================================================ */
/* Design shows ONE top bar per screen. Hide the global brand header
   on every sub-page (they carry their own app-bar / screen-head). */
#lobby-view:has(#lobby-pages > .lobby-page.is-active:not(#home-page)) > .lobby-header {
    display: none !important;
}

/* Account VIP head: keep title on one line like the design */
.account-page.wr .vip-progress-card .wr-vip-head {
    flex-wrap: nowrap;
}
.account-page.wr .vip-progress-card .wr-vip-head strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.account-page.wr .vip-progress-card .wr-vip-pill {
    white-space: nowrap;
    flex: none;
}

/* ============================================================
   EXACT PORT — screens rebuilt from the design's own markup.
   .wr-exact neutralizes earlier structural .wr overrides so the
   design's inline styles render pixel-exact.
   ============================================================ */
.wr-exact.account-page.wr {
    padding: 0 !important;
    background: #156B36 !important;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.wr-exact.account-page.wr > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* let the design's inline styling own everything inside */
.wr-exact * { box-sizing: border-box; }

/* toggle switch live state (design inline switch) */
.wr-x-switch.is-on {
    background: rgba(255, 212, 42, 0.25) !important;
    border-color: rgba(255, 212, 42, 0.6) !important;
}
.wr-x-switch.is-on > div {
    transform: translateX(17px);
    background: #FFD42A !important;
}
.wr-x-switch > div { transition: transform .16s ease, background .16s ease; }

/* ============================================================
   EXACT LOBBY (4a) — hero carousel keyframes + cleanup
   ============================================================ */
@keyframes wr-heroslide{0%,18%{transform:translateX(0)}20%,38%{transform:translateX(-16.6667%)}40%,58%{transform:translateX(-33.3334%)}60%,78%{transform:translateX(-50%)}80%,98%{transform:translateX(-66.6667%)}100%{transform:translateX(-83.3334%)}}
@keyframes wr-avfloat{0%,100%{transform:translateY(4px) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2.5deg)}}
@keyframes wr-avglow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes wr-bob{0%,100%{transform:translateY(4px)}50%{transform:translateY(-6px)}}
@keyframes wr-ringspin{to{transform:rotate(360deg)}}
@keyframes wr-hdot1{0%,18%{width:16px;background:#FFD42A}20%,98%{width:5px;background:rgba(225,255,235,.35)}100%{width:16px;background:#FFD42A}}
@keyframes wr-hdot2{0%,18%{width:5px;background:rgba(225,255,235,.35)}20%,38%{width:16px;background:#FFD42A}40%,100%{width:5px;background:rgba(225,255,235,.35)}}
@keyframes wr-hdot3{0%,38%{width:5px;background:rgba(225,255,235,.35)}40%,58%{width:16px;background:#FFD42A}60%,100%{width:5px;background:rgba(225,255,235,.35)}}
@keyframes wr-hdot4{0%,58%{width:5px;background:rgba(225,255,235,.35)}60%,78%{width:16px;background:#FFD42A}80%,100%{width:5px;background:rgba(225,255,235,.35)}}
@keyframes wr-hdot5{0%,78%{width:5px;background:rgba(225,255,235,.35)}80%,98%{width:16px;background:#FFD42A}100%{width:5px;background:rgba(225,255,235,.35)}}

/* design 4a has no balance/quick-action tile and no separate jackpot banner */
.wr-lobby .player-command,
.wr-lobby .jackpot-banner { display: none !important; }
.wr-lobby { padding: 14px 0 0 !important; }
.wr-lobby .hero-wrap { padding: 0 16px; }
.wr-lobby .hero-track { animation: wr-heroslide 25s ease-in-out infinite; }
.wr-lobby .hero-track :where(.hs-glow){ animation: wr-avglow 3s ease-in-out infinite; }
.wr-lobby .hs-plane { animation: wr-avfloat 3.4s ease-in-out infinite; }
.wr-lobby .hs-ring { animation: wr-ringspin 9s linear infinite; }
.wr-lobby .hs-bob { animation: wr-bob 3.2s ease-in-out infinite; }
.wr-lobby .hero-dots > i:nth-child(1){ animation: wr-hdot1 25s ease-in-out infinite; }
.wr-lobby .hero-dots > i:nth-child(2){ animation: wr-hdot2 25s ease-in-out infinite; }
.wr-lobby .hero-dots > i:nth-child(3){ animation: wr-hdot3 25s ease-in-out infinite; }
.wr-lobby .hero-dots > i:nth-child(4){ animation: wr-hdot4 25s ease-in-out infinite; }
.wr-lobby .hero-dots > i:nth-child(5){ animation: wr-hdot5 25s ease-in-out infinite; }

/* lobby game-card: keep image in flow so name sits below (design 4a) */
.wr-lobby .game-card { position: relative; height: auto !important; }
.wr-lobby .game-card img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
}
.wr-lobby .game-card strong {
    position: relative !important;
    inset: auto !important;
    background: none !important;
    padding: 0 !important;
}

/* lobby game-card name: show fully below image */
.wr-lobby .game-card { overflow: visible !important; }
.wr-lobby .game-grid { row-gap: 16px !important; }
.wr-lobby .game-card strong {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: nowrap;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    width: 100%;
    text-overflow: ellipsis;
}
.wr-lobby .game-card em { z-index: 2; }

/* payout rows: real brand logos on clean white tiles (2a) */
.wr .wr-payout-icon.is-img {
    background: #fff !important;
    padding: 6px;
    overflow: hidden;
}
.wr .wr-payout-icon.is-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============================================================
   EXACT HOME (4a) — app bar, bottom nav, categories, game badges
   ============================================================ */
/* design app bar (home) */
.lobby-view .lobby-header.wr-appbar-x {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    background: #082310 !important;
    border-bottom: 1px solid rgba(225, 255, 235, 0.18) !important;
}
.lobby-view .wr-abx-icon {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: #0E5429;
    border: 1px solid rgba(225, 255, 235, 0.22);
    display: flex; align-items: center; justify-content: center;
    color: #E7FAEC;
    flex: none;
    padding: 0;
}
.lobby-view .wr-abx-brand { display: flex; align-items: center; gap: 6px; }
.lobby-view .wr-abx-brand span {
    width: 26px; height: 26px; border-radius: 8px;
    background: #FFD42A; color: #201800;
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.lobby-view .wr-abx-brand strong { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.lobby-view .wr-abx-icon span[data-notification-count] {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #FF5C49; color: #fff;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* design bottom nav */
.lobby-view .bottom-nav.wr-bnav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    padding: 9px 8px 12px !important;
    background: #082310 !important;
    border-top: 1px solid rgba(225, 255, 235, 0.18) !important;
}
.lobby-view .wr-bnav button {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none !important;
    border: 0 !important;
    color: #B2DFC0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}
.lobby-view .wr-bnav button span { display: flex; }
.lobby-view .wr-bnav button.is-active { color: #FFD42A !important; font-weight: 800 !important; background: none !important; }

/* categories: text-only pills (design 4a) */
.wr-lobby .category-row.emerald-categories button img { display: none !important; }
.wr-lobby .category-row.emerald-categories button {
    padding: 8px 16px !important;
    gap: 0 !important;
}

/* game-card badges — exact per-game colors (design 4a) */
.wr-lobby .game-card em {
    top: 7px; left: 7px;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
    background: rgba(8, 35, 16, .8) !important;
    color: #fff !important;
}
.wr-lobby .game-card[data-game="aviator"] em { background: #FF5C49 !important; color: #fff !important; }
.wr-lobby .game-card[data-game="chicken-road-2"] em { background: #46E58A !important; color: #0B3A1E !important; }
.wr-lobby .game-card[data-game="mines"] em,
.wr-lobby .game-card[data-game="dragon-tiger"] em,
.wr-lobby .game-card[data-game="fruit-mary"] em { background: #FFD42A !important; color: #201800 !important; }
.wr-lobby .game-card strong { color: #fff !important; text-align: center; }

/* chat FAB (design 4a) */
.lobby-view .lobby-support-fab.wr-fab {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: #FFD42A !important;
    color: #201800 !important;
    box-shadow: 0 10px 26px rgba(255, 176, 0, .5) !important;
}
.lobby-view .wr-fab span { display: flex; }
.lobby-view .wr-fab strong { color: #201800 !important; font-size: 13px; font-weight: 800; }

/* ============================================================
   EXACT HOME THEME — flat design green, spacing, section head
   ============================================================ */
/* body of the home = flat #156B36 like the design card */
.lobby-view {
    background: #156B36 !important;
}
#home-page.wr-lobby {
    background: #156B36 !important;
    padding: 14px 0 132px !important;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.lobby-view .lobby-scroll { background: #156B36 !important; }

/* hero block spacing (design: 14px top, 16px sides) */
.wr-lobby .hero-wrap { padding: 0 16px !important; margin: 0 !important; }

/* categories: text pills, Title case, 10px below hero dots */
.wr-lobby .category-row.emerald-categories {
    margin: 10px 0 0 !important;
    padding: 0 16px 2px !important;
    text-transform: none !important;
}
.wr-lobby .category-row.emerald-categories button {
    text-transform: none !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

/* section head: title + subtitle left, See all right (design 4a) */
.wr-lobby .hot-section.emerald-games { padding: 0 16px !important; margin: 18px 0 0 !important; background: transparent !important; }
.wr-lobby .wr-sec-title {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 2px 10px !important;
}
.wr-lobby .wr-sec-title h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.wr-lobby .wr-sec-title p {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #B2DFC0 !important;
}
.wr-lobby .wr-see-all { font-size: 12px; font-weight: 800; color: #FFD42A; flex: none; }

/* game grid: design gaps + name spacing */
.wr-lobby .game-grid { gap: 8px !important; row-gap: 8px !important; }
.wr-lobby .game-card { gap: 0 !important; margin: 0 0 6px !important; }
.wr-lobby .game-card img {
    height: 118px !important;
    border-radius: 14px !important;
}
.wr-lobby .game-card strong {
    margin-top: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* kill legacy dotted/gradient overlays on home */
.wr-lobby::before, .wr-lobby::after { display: none !important; }

/* game-card: kill legacy overlay + extra height (design = image + name only) */
.wr-lobby .game-card::after,
.wr-lobby .game-card::before {
    display: none !important;
    content: none !important;
}
.wr-lobby .game-card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
}
.wr-lobby .game-card small { display: none !important; }

/* category row: no sticky band, sits on green */
.wr-lobby .category-row.emerald-categories {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* ============================================================
   QA — Invite page (2e) tightening
   ============================================================ */
/* Agent summary — hide dev "audits/settlement date" row, restyle main */
.refer-page.wr .agent-summary-card > div:nth-child(2) {
    display: none !important;
}
.refer-page.wr .agent-summary-card > div:first-child {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-decoration: none !important;
}
.refer-page.wr .agent-summary-card > div:first-child > span:first-child {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    color: #D9F4E0 !important;
    text-decoration: none !important;
    border: 0 !important;
    background: none !important;
}
.refer-page.wr .agent-summary-card > div:first-child > strong {
    display: block !important;
    margin: 6px 0 10px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border: 0 !important;
    background: none !important;
    font-variant-numeric: tabular-nums;
}
.refer-page.wr .agent-summary-card > div:first-child > small {
    display: inline-block !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(225, 255, 235, .24) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #F0FCF3 !important;
    text-decoration: none !important;
}

/* QR pattern: white tile with QR-style dot mask */
.refer-page.wr .qr-box {
    width: 92px !important;
    height: 92px !important;
    background: #fff !important;
    padding: 8px !important;
    /* dotted pattern to simulate QR — dark squares on white */
    background-image:
        radial-gradient(circle at 12px 12px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 24px 12px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 36px 12px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 60px 12px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 78px 12px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 12px 24px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 36px 24px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 48px 24px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 72px 24px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 12px 36px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 24px 36px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 48px 36px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 60px 36px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 78px 36px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 12px 48px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 36px 48px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 60px 48px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 72px 48px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 12px 60px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 24px 60px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 48px 60px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 78px 60px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 12px 72px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 36px 72px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 60px 72px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 24px 78px, #141414 3px, transparent 3.5px),
        radial-gradient(circle at 78px 78px, #141414 3px, transparent 3.5px);
    background-repeat: no-repeat;
    background-color: #fff !important;
}

/* Share row: keep all 4 tiles visible */
.refer-page.wr .share-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px;
    margin-top: 12px;
}
.refer-page.wr .share-row button {
    padding: 9px 0 !important;
    font-size: 11.5px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deposit step-2 layout fixes: legacy grid override + hidden QR box */
.deposit-page.wr.is-payment-step .wr-flow-stepper:not([hidden]) {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.deposit-page.wr.is-payment-step .wr-step-head:not([hidden]) {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.deposit-page.wr .deposit-method-qr[hidden] {
    display: none !important;
}

/* step-2 heads only; keep step-1 heads hidden in payment step */
.deposit-page.wr.is-payment-step .wr-step-head:not(.deposit-step-two) {
    display: none !important;
}

/* login-device rows: wrap long values cleanly */
#login-device-page.wr .login-device-details > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
#login-device-page.wr .login-device-details > div span { flex: none; }
#login-device-page.wr .login-device-details > div strong {
    flex: 1;
    min-width: 0;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ============================================================
   ORGANIZE PASS — gutters, tabs, chips, promo, Mine modal
   ============================================================ */
/* 1) Consistent 16px gutters: remove the extra .lobby-scroll inset */
#lobby-view .lobby-scroll {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2) Withdraw tab strip: one connected segmented box, no gold tail */
.wr .mobile-tab-strip.withdraw-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 12px 16px 0 !important;
    border-radius: 13px !important;
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    overflow: visible !important;
}
.wr .mobile-tab-strip.withdraw-tabs button {
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 0 !important;
    color: #D9F4E0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.wr .mobile-tab-strip.withdraw-tabs button.is-active {
    background: #FFD42A !important;
    color: #201800 !important;
    font-weight: 800 !important;
}
.wr .mobile-tab-strip button::after,
.wr .mobile-tab-strip button::before,
.wr .mobile-tab-strip.withdraw-tabs button.is-active::after {
    display: none !important;
    content: none !important;
}

/* 3) Withdraw add-chips: brand icon + label */
.wr .wr-add-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 12px !important;
}
.wr .wr-add-chip img {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    object-fit: cover;
    background: #fff;
}
.wr .wr-add-chip span { white-space: nowrap; }

/* 4) Deposit sections: kill leftover panel boxes, tidy rhythm */
.deposit-page.wr .wallet-method-panel,
.deposit-page.wr .wallet-amount-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.deposit-page.wr .deposit-section-label,
.deposit-page.wr .deposit-section-title {
    margin: 18px 2px 9px !important;
}
.deposit-page.wr .deposit-wallet-strip { margin-bottom: 0 !important; }
.deposit-page.wr .payment-method-grid { margin-top: 0 !important; }

/* 5) Home hero: flush 16px gutters, rounded container, no bleed */
.wr-lobby .hero-wrap > div:first-child {
    border-radius: 22px;
    overflow: hidden;
}
.wr-lobby .hero-track > div { border-radius: 0 !important; }

/* 6) Promo overview card: proper 2-col layout (no inline-block hack) */
.promo-center-page.wr .promo-overview-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.promo-center-page.wr .promo-overview-card > div {
    display: block;
    width: auto !important;
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(7, 58, 27, 0.55);
    border: 1px solid rgba(225, 255, 235, 0.14);
}
.promo-center-page.wr .promo-overview-card button {
    grid-column: 1 / -1;
    margin-top: 4px !important;
}

/* promo side-rail: keep badge inside the pill */
.promo-center-page.wr .side-filter-rail button { position: relative; overflow: visible !important; }
.promo-center-page.wr .side-filter-rail .nav-badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: #FF5C49 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    transform: none !important;
}
.promo-center-page.wr .promo-panel { min-height: 0 !important; }

/* 7) Mine modal (hamburger): full wr theme */
.modal-card.mine-screen.wr {
    background: #156B36 !important;
    border: 1px solid rgba(10, 25, 16, 0.25) !important;
}
.modal-card.mine-screen.wr h2,
.modal-card.mine-screen.wr .screen-topline strong { color: #fff !important; }
.modal-card.mine-screen.wr .screen-topline span { color: #B2DFC0 !important; }
.modal-card.mine-screen.wr .mobile-tab-strip,
.modal-card.mine-screen.wr [class*="tab"] button { text-transform: none; }
.modal-card.mine-screen.wr .account-card-tabs button,
.modal-card.mine-screen.wr nav button {
    border-radius: 999px !important;
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    color: #D9F4E0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.modal-card.mine-screen.wr .account-card-tabs button.is-active,
.modal-card.mine-screen.wr nav button.is-active {
    background: #FFD42A !important;
    border-color: #FFD42A !important;
    color: #201800 !important;
    font-weight: 800 !important;
}
.modal-card.mine-screen.wr .profile-rows > div,
.modal-card.mine-screen.wr [class*="row"] > div,
.modal-card.mine-screen.wr article {
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.modal-card.mine-screen.wr span { color: #B2DFC0 !important; }
.modal-card.mine-screen.wr strong, .modal-card.mine-screen.wr b { color: #fff !important; }
.modal-card.mine-screen.wr .close-modal {
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    color: #E7FAEC !important;
    border-radius: 11px !important;
}
.modal-card.mine-screen.wr button[data-open-deposit],
.modal-card.mine-screen.wr .modal-action {
    background: #FFD42A !important;
    color: #201800 !important;
    border-radius: 13px !important;
    font-weight: 800 !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, .35) !important;
}

/* Mine modal tabs (.screen-submenu): dark pills, gold active only */
.modal-card.mine-screen.wr .screen-submenu {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto;
    scrollbar-width: none;
}
.modal-card.mine-screen.wr .screen-submenu::-webkit-scrollbar { display: none; }
.modal-card.mine-screen.wr .screen-submenu button {
    flex: none !important;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: #0E5429 !important;
    background-image: none !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    color: #D9F4E0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
.modal-card.mine-screen.wr .screen-submenu button.is-active {
    background: #FFD42A !important;
    border-color: #FFD42A !important;
    color: #201800 !important;
    font-weight: 800 !important;
}

/* Deposit step heads: exact design typography (left, white, no band) */
.deposit-page.wr .deposit-section-label,
.deposit-page.wr .deposit-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.deposit-page.wr .deposit-section-label > span,
.deposit-page.wr .deposit-section-title > span {
    flex: 0 1 auto !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.deposit-page.wr .deposit-section-label .wr-step-hint,
.deposit-page.wr .deposit-section-title .wr-step-hint,
.deposit-page.wr .deposit-section-label button,
.deposit-page.wr .deposit-section-title button {
    margin-left: auto !important;
}
.deposit-page.wr .deposit-section-label button,
.deposit-page.wr .deposit-section-title button {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #FFD42A !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.deposit-page.wr .wr-step-hint {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #B2DFC0 !important;
}

/* Amount input: single gold border on the row, clean inner input */
.deposit-page.wr .wallet-input-row.solo input {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Promo strip badge: keep inside pill (no clipping) */
.promo-center-page.wr .mobile-tab-strip .nav-badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: #FF5C49 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
}

/* Promo empty state: compact card, never stretched */
.promo-center-page.wr .promo-panel .empty-state-block {
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
    padding: 32px 18px !important;
    justify-content: flex-start !important;
}
.promo-center-page.wr .promo-panel {
    display: none !important;
}
.promo-center-page.wr .promo-panel.is-active {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

/* ============================================================
   NAV + FORM + BONUS PASS
   ============================================================ */
/* Deposit amount box: full width like the design */
.deposit-page.wr .deposit-entry-row {
    display: block !important;
    width: 100% !important;
}
.deposit-page.wr .wallet-input-row.solo {
    width: 100% !important;
    max-width: 100% !important;
}

/* Bonus tick on each preset amount */
.deposit-page.wr .amount-grid button {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 7px !important;
    line-height: 1.1;
}
.wr .wr-bonus-tag {
    display: inline-block;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: #FFD42A !important;
    background: rgba(255, 212, 42, 0.14);
    border: 1px solid rgba(255, 212, 42, 0.45);
    border-radius: 999px;
    padding: 1px 7px;
}

/* Add-wallet inline error */
.wr .wr-form-error {
    margin: 10px 0 0;
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(255, 92, 73, 0.14);
    border: 1px solid rgba(255, 92, 73, 0.5);
    font-size: 12px;
    font-weight: 700;
    color: #FF8A7A;
    line-height: 1.45;
}

/* Wallet tab strip inside modals */
.modal-card.wr .mobile-tab-strip.withdraw-tabs.wr-modal-tabs {
    margin: 12px 0 14px !important;
}

/* Pages own no side padding — inner sections carry the 16px gutters */
.lobby-page.wr,
.app-page.wr,
.mobile-flow.wr {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* wr pages: forms/sections span full width (kill legacy max-width centering) */
.lobby-page.wr .wallet-page-form,
.lobby-page.wr .withdraw-request-card,
.lobby-page.wr .wallet-account-form,
.lobby-page.wr .withdraw-pin-card,
.lobby-page.wr .receiving-account-card,
.lobby-page.wr .wallet-request-status,
.lobby-page.wr .deposit-step-stack {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Withdraw selected payout card: text column visible, button as pill */
.withdraw-page.wr .payout-account-card {
    display: flex !important;
    grid-template-columns: none !important;
}
.withdraw-page.wr .payout-account-card > div:not(.payout-slot-index) {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
.withdraw-page.wr .payout-account-card > button {
    flex: none !important;
    width: auto !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: #FFD42A !important;
    color: #201800 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.withdraw-page.wr .payout-account-card .payout-slot-index span { display: none !important; }

/* ============================================================
   FLOW MODALS — History & Support look like pages in the flow
   ============================================================ */
.modal-card.wr-flow-modal {
    padding: 0 !important;
    overflow: hidden auto;
    background: #156B36 !important;
    border-radius: 22px !important;
}
.modal-card.wr-flow-modal > .close-modal { display: none !important; }
.modal-card.wr-flow-modal .mobile-screen-head {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    background: #082310 !important;
    border-bottom: 1px solid rgba(225, 255, 235, 0.18) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.modal-card.wr-flow-modal .mobile-screen-head h1 {
    flex: 1;
    text-align: center;
    margin: 0 !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.modal-card.wr-flow-modal .mobile-screen-head .wr-balance-pill { margin-left: 0; padding: 5px 10px; }
.modal-card.wr-flow-modal .wr-modal-tabs {
    margin: 12px 16px 0 !important;
}
.modal-card.wr-flow-modal .wr-modal-body {
    padding: 12px 16px 22px;
}

/* Flow-modal empty states: compact + gold action */
.modal-card.wr-flow-modal .empty-state-block,
.modal-card.wr-flow-modal .wallet-history-empty {
    min-height: 0 !important;
    height: auto !important;
    padding: 32px 18px !important;
}
.modal-card.wr-flow-modal .empty-state-block button,
.modal-card.wr-flow-modal .wallet-history-empty button {
    padding: 9px 18px !important;
    border-radius: 999px !important;
    background: #FFD42A !important;
    color: #201800 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Flow modals: no legacy flex gap between head / strip / body */
.modal-card.wr-flow-modal {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.modal-card.wr-flow-modal .support-chat-head { margin-top: 2px; }

/* ============================================================
   INNER CARDS REDESIGN — Support chat (2d) & History (2c)
   ============================================================ */
/* Support: kill box-in-box, compact head */
.modal-card.wr-flow-modal .support-chat-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.modal-card.wr-flow-modal .support-chat-head h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.modal-card.wr-flow-modal .support-chat-head span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #B2DFC0 !important;
}
.modal-card.wr-flow-modal #support-new-chat {
    flex: none;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

.modal-card.wr-flow-modal .support-inbox-layout,
.modal-card.wr-flow-modal .support-conversation-panel {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.modal-card.wr-flow-modal .support-ticket-meta {
    margin: 0 0 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #B2DFC0 !important;
}

/* chat area: bare column of bubbles */
.modal-card.wr-flow-modal .support-chat {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-height: 300px;
    overflow-y: auto;
}
.modal-card.wr-flow-modal .support-chat p {
    max-width: 82%;
    margin: 0 !important;
    padding: 11px 13px !important;
    align-self: flex-start;
    background: #073A1B !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
    border-radius: 14px 14px 14px 5px !important;
    box-shadow: none !important;
}
.modal-card.wr-flow-modal .support-chat p strong {
    display: block;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #F0CC4C !important;
}
.modal-card.wr-flow-modal .support-chat p span {
    display: block;
    margin-top: 3px;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #F0FCF3 !important;
    line-height: 1.5;
}
.modal-card.wr-flow-modal .support-chat p small {
    display: block;
    margin-top: 4px;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #B2DFC0 !important;
}
.modal-card.wr-flow-modal .support-chat p.is-user {
    align-self: flex-end;
    background: #FFD42A !important;
    border: 0 !important;
    border-radius: 14px 14px 5px 14px !important;
}
.modal-card.wr-flow-modal .support-chat p.is-user strong { color: rgba(32, 24, 0, 0.65) !important; }
.modal-card.wr-flow-modal .support-chat p.is-user span { color: #201800 !important; font-weight: 700 !important; }
.modal-card.wr-flow-modal .support-chat p.is-user small { color: rgba(32, 24, 0, 0.6) !important; text-align: right; }
.modal-card.wr-flow-modal .support-proof-image {
    display: block;
    max-width: 100%;
    border-radius: 10px;
    margin-top: 6px;
}

/* input row: bare, pill input + ghost Proof + gold Send */
.modal-card.wr-flow-modal .support-form {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.modal-card.wr-flow-modal #support-input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    background: #073A1B !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.modal-card.wr-flow-modal #support-input::placeholder { color: #8FC7A0; }
.modal-card.wr-flow-modal .support-proof {
    flex: none;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.modal-card.wr-flow-modal .support-form button[type="submit"] {
    flex: none;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    background: #FFD42A !important;
    color: #201800 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 176, 0, 0.4) !important;
    min-height: 0 !important;
}
.modal-card.wr-flow-modal .support-safe-note {
    margin: 10px 0 0 !important;
    text-align: center;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #B2DFC0 !important;
}

/* History head: plain, no card box */
.modal-card.wr-flow-modal .history-modal-head {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.modal-card.wr-flow-modal .history-modal-head h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.modal-card.wr-flow-modal .history-modal-head span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #B2DFC0 !important;
}
.modal-card.wr-flow-modal .history-modal-head button {
    flex: none;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   HOME POLISH — hero rhythm + framed game tiles
   ============================================================ */
/* Hero: consistent inner rhythm, art never crowds the text */
.wr-lobby .hero-track > div {
    height: 184px !important;
    padding: 18px 16px !important;
}
.wr-lobby .hero-track > div > div:last-child {
    align-items: center !important;
}
.wr-lobby .hs-plane { width: 124px !important; }
.wr-lobby .hero-track > div [style*="width:116px"] {
    width: 104px !important;
    height: 104px !important;
}
.wr-lobby .hero-dots {
    margin-top: 10px !important;
    gap: 5px !important;
}
.wr-lobby .category-row.emerald-categories { margin-top: 12px !important; }
.wr-lobby .hot-section.emerald-games { margin-top: 20px !important; }

/* Game tiles: framed card look (art + name inside one tile) */
.wr-lobby .game-grid {
    gap: 10px !important;
    row-gap: 10px !important;
}
.wr-lobby .game-card {
    background: #0E5429 !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
    border-radius: 16px !important;
    padding: 6px 6px 0 !important;
    overflow: hidden !important;
    box-shadow: 0 10px 22px rgba(2, 14, 7, 0.25) !important;
    transition: transform 0.12s ease;
}
.wr-lobby .game-card:active { transform: scale(0.97); }
.wr-lobby .game-card img {
    height: 108px !important;
    border-radius: 11px !important;
    border: 0 !important;
}
.wr-lobby .game-card em {
    top: 12px !important;
    left: 12px !important;
}
.wr-lobby .game-card strong {
    margin: 0 !important;
    padding: 7px 2px 9px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    width: 100%;
}

/* HOME POLISH v2 — bigger art-only tiles, roomier hero */
/* game tiles: art only (names are already on the artwork) */
.wr-lobby .game-card strong { display: none !important; }
.wr-lobby .game-card {
    padding: 6px !important;
}
.wr-lobby .game-card img {
    height: 140px !important;
}

/* hero slides: more breathing room */
.wr-lobby .hero-track > div {
    height: 198px !important;
    padding: 20px 18px !important;
}
.wr-lobby .hero-track > div > div:last-child {
    gap: 14px !important;
}

/* CHICKEN ROAD MOBILE HOST FIX
   Keep imported games truly app-sized on phones; earlier theme blocks redefine
   the shared imported header, so this final rule must win the cascade. */
@media (max-width: 600px) {
    .imported-game-view {
        grid-template-rows: minmax(0, 1fr) !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .imported-game-view .imported-game-header {
        display: none !important;
    }

    .imported-game-view .imported-game-frame {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .imported-game-view .imported-game-frame iframe {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================================
   AVIATOR — dual bets in one row, Auto Bet pill, waiting card
   ============================================================ */
/* both bet panels side by side */
.aviator-view .game-bets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch;
}
.aviator-view .place-both-button { grid-column: 1 / -1; }
.aviator-view .bet-panel {
    min-width: 0;
    padding: 10px !important;
}
.aviator-view .bet-panel .quick-stakes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}
.aviator-view .bet-panel .quick-stakes button {
    font-size: 11.5px !important;
    padding: 6px 0 !important;
    min-width: 0;
    overflow: hidden;
}
.aviator-view .bet-panel .stake-line input { min-width: 0; width: 100%; }

/* Auto row: Auto Bet pill + auto cash out side by side */
.aviator-view .auto-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}
.aviator-view .auto-bet-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(225, 255, 235, 0.25);
    color: #D9F4E0;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.aviator-view .auto-bet-pill i {
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: #073A1B;
    border: 1px solid rgba(225, 255, 235, 0.3);
    position: relative;
    transition: background 0.15s ease;
}
.aviator-view .auto-bet-pill i::after {
    content: "";
    position: absolute;
    top: 1.5px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #8FC7A0;
    transition: transform 0.15s ease, background 0.15s ease;
}
.aviator-view .auto-bet-pill.is-on {
    background: rgba(255, 212, 42, 0.18);
    border-color: rgba(255, 212, 42, 0.6);
    color: #FFD42A;
}
.aviator-view .auto-bet-pill.is-on i { background: rgba(255, 212, 42, 0.3); }
.aviator-view .auto-bet-pill.is-on i::after { transform: translateX(11px); background: #FFD42A; }
.aviator-view .auto-cash {
    flex: 1;
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}
.aviator-view .auto-cash span { font-size: 10px !important; white-space: nowrap; }
.aviator-view .auto-cash input { width: 54px !important; min-width: 0; }

/* waiting / countdown card — clean aviator style */
.aviator-view .partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 26px !important;
    border-radius: 18px !important;
    background: rgba(4, 22, 12, 0.82) !important;
    border: 1px solid rgba(255, 212, 42, 0.35) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(6px);
    text-align: center;
}
.aviator-view .partner-card strong {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    color: #D9F4E0 !important;
    text-transform: uppercase;
}
.aviator-view .partner-card #betting-countdown,
.aviator-view .partner-card span {
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #FFD42A !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 26px rgba(255, 212, 42, 0.35);
}
.aviator-view .round-loader {
    width: 168px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    margin-top: 4px;
}
.aviator-view .round-loader span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFC400, #FFD42A);
}
.aviator-view .partner-card small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #B2DFC0 !important;
}
.aviator-view .partner-card small i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #46E58A;
    animation: wr-avglow 1.6s ease-in-out infinite;
}

/* bet-panel internals must fit the half-width column */
.aviator-view .bet-panel > * {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box;
}
.aviator-view .bet-panel .mode-toggle {
    display: flex !important;
    width: 100% !important;
}
.aviator-view .bet-panel .mode-toggle button {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 0 !important;
    font-size: 11.5px !important;
}
.aviator-view .bet-panel .stake-line {
    display: flex !important;
    width: 100% !important;
    gap: 5px !important;
    align-items: center;
}
.aviator-view .bet-panel .stake-line button {
    flex: none !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    padding: 0 !important;
}
.aviator-view .bet-panel .stake-line input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    text-align: center;
}
.aviator-view .bet-panel .quick-stakes {
    display: grid !important;
    width: 100% !important;
}
.aviator-view .bet-panel .bet-button {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 13px !important;
}
.aviator-view .bet-panel .auto-row { width: 100% !important; flex-wrap: wrap; }
.aviator-view .bet-panel [data-status] { font-size: 10.5px !important; }

/* auto controls stack inside the narrow panel */
.aviator-view .bet-panel .auto-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
}
.aviator-view .auto-bet-pill {
    width: 100% !important;
    justify-content: space-between !important;
}
.aviator-view .auto-cash {
    width: 100% !important;
    justify-content: space-between !important;
}
.aviator-view .auto-cash input {
    flex: none !important;
    width: 62px !important;
}

/* ============================================================
   DEPOSIT POLISH — compact method cards, big amounts, corner ticker
   ============================================================ */
/* payment method cards: compact */
.deposit-page.wr .payment-method-grid {
    gap: 7px !important;
}
.deposit-page.wr .payment-option {
    padding: 8px 10px 7px !important;
    border-radius: 13px !important;
}
.deposit-page.wr .payment-option .payment-method-icon {
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
}
.deposit-page.wr .payment-option strong {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}
.deposit-page.wr .payment-option small {
    margin-top: 1px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
}
.wr .wr-pop-pill {
    font-size: 8.5px;
    padding: 1.5px 6px;
}
.deposit-page.wr .payment-option:has(input:checked)::after {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 11px !important;
}

/* amount presets: bigger value, bonus as small corner ticker (top-left) */
.deposit-page.wr .amount-grid {
    row-gap: 15px !important;
    margin-top: 14px !important;
}
.deposit-page.wr .amount-grid button {
    position: relative !important;
    overflow: visible !important;
    padding: 13px 0 11px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    gap: 0 !important;
}
.wr .wr-bonus-tag {
    position: absolute !important;
    top: -8px !important;
    left: 7px !important;
    padding: 1px 6px !important;
    font-size: 8.5px !important;
    background: #FFD42A !important;
    border: 0 !important;
    color: #201800 !important;
    border-radius: 999px;
    line-height: 1.5;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Aviator 20260713: smoother flight and tighter mobile table spacing. */
@media (max-width: 920px) {
    .aviator-view {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .aviator-view .flight-main {
        display: flex !important;
        flex-direction: column !important;
        align-content: start !important;
        gap: 0 !important;
        min-height: 0 !important;
    }

    .aviator-view .round-history-wrap,
    .aviator-view .flight-stage,
    .aviator-view .game-bets {
        flex: 0 0 auto !important;
    }

    .aviator-view .flight-stage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1.5 !important;
    }

    .aviator-view .game-bets {
        align-content: start !important;
        align-items: start !important;
        min-height: 0 !important;
    }

    .aviator-view .bet-panel {
        align-content: start !important;
        align-items: stretch !important;
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .aviator-view .flight-main {
        display: flex !important;
        flex-direction: column !important;
    }

    .aviator-view .flight-stage {
        aspect-ratio: 1.3 !important;
        border-radius: 14px !important;
    }

    .aviator-view .game-bets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px 6px 10px !important;
    }

    .aviator-view .bet-panel {
        padding: 8px !important;
    }

    .aviator-view .bet-panel .mode-toggle {
        margin-bottom: 2px !important;
    }

    .aviator-view .bet-panel .quick-stakes button {
        min-height: 28px !important;
    }

    .aviator-view .bet-panel .bet-button {
        min-height: 48px !important;
    }
}

/* ============================================================
   AVIATOR SYNC + RESPONSIVE LAYOUT 14
   One hierarchy across desktop, tablet, and mobile.
   ============================================================ */
.aviator-view {
    --av-page: #0b0d10;
    --av-panel: #17191d;
    --av-panel-soft: #1d2025;
    --av-stage: #05070a;
    --av-border: #2b2e35;
    --av-muted: #969ba6;
    --av-red: #e92746;
    --av-green: #36bd1d;
    grid-template-columns: clamp(270px, 23vw, 340px) minmax(0, 1fr) !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 540px !important;
    overflow: hidden !important;
    background: var(--av-page) !important;
    color: #f5f6f8;
}

.aviator-view .game-header {
    grid-template-columns: auto minmax(104px, 1fr) auto auto 36px 40px !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 6px 10px !important;
    background: #17191c !important;
}

.aviator-view .game-brand-button {
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 13px 0 9px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

.aviator-view .mini-logo {
    min-width: 0;
    overflow: hidden;
    font-size: 22px !important;
    line-height: 1;
    letter-spacing: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aviator-view .game-wallet {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 7px 0 11px !important;
    white-space: nowrap;
}

.aviator-view .game-wallet strong {
    font-size: 17px !important;
    font-variant-numeric: tabular-nums;
}

.aviator-view .wallet-plus {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-left: 3px;
    border-radius: 50%;
    background: #ffd42a;
    color: #171300;
    font-size: 18px;
    font-weight: 900;
}

.aviator-view .game-quick-actions button {
    min-height: 34px !important;
    padding-inline: 10px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

.aviator-view .game-audio,
.aviator-view .game-menu-button {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
}

.aviator-view .bets-board {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    background: #111316 !important;
}

.aviator-view .bets-board > * { flex: 0 0 auto; }

.aviator-view .bets-board .side-list {
    flex: 1 1 auto !important;
    min-height: 120px;
}

.aviator-view .bets-tabs {
    padding: 3px !important;
}

.aviator-view .bets-tabs button {
    min-height: 32px !important;
}

.aviator-view .side-summary {
    display: grid;
    align-items: center;
    min-height: 0 !important;
    padding: 8px 5px !important;
}

.aviator-view .round-result strong {
    font-size: clamp(24px, 2.1vw, 32px) !important;
    font-variant-numeric: tabular-nums;
}

.aviator-view .table-head,
.aviator-view .bet-row {
    grid-template-columns: minmax(76px, 1fr) 76px 48px 78px !important;
    gap: 6px !important;
}

.aviator-view .table-head {
    min-height: 30px !important;
    padding-inline: 6px;
}

.aviator-view .side-list {
    min-height: 0 !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.aviator-view .bet-row {
    min-height: 36px !important;
    margin-bottom: 3px !important;
    border-radius: 6px !important;
    background: rgba(8, 10, 12, 0.72) !important;
    font-variant-numeric: tabular-nums;
}

.aviator-view .bet-row.is-win {
    background: rgba(81, 181, 49, 0.16) !important;
}

.aviator-view .flight-main {
    grid-template-rows: 34px minmax(300px, 1fr) clamp(188px, 24dvh, 218px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    background: #0b0d10 !important;
}

.aviator-view .round-history {
    min-width: 0;
    min-height: 34px;
    gap: 15px !important;
    padding-inline: 10px !important;
    white-space: nowrap;
}

.aviator-view .history-chip {
    min-width: max-content;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
}

.aviator-view .flight-stage {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border: 1px solid var(--av-border) !important;
    border-radius: 16px !important;
    background: var(--av-stage) !important;
    box-shadow: none !important;
    isolation: isolate;
}

.aviator-view .flight-stage::after {
    z-index: 3;
    opacity: 0.18;
}

.aviator-view .flight-stage[data-phase="crashed"] {
    border-color: var(--av-border) !important;
    background: var(--av-stage) !important;
    box-shadow: none !important;
}

.aviator-view .big-counter {
    top: 46% !important;
    color: #f7f8fa !important;
    font-size: clamp(76px, 6.4vw, 106px) !important;
    font-weight: 900 !important;
    line-height: 0.94 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.58) !important;
}

.aviator-view .flew-away {
    top: calc(46% - 66px) !important;
    width: max-content;
    max-width: 90%;
    font-size: clamp(22px, 2vw, 32px) !important;
    letter-spacing: 0 !important;
}

.aviator-view .flight-stage[data-phase="crashed"] .big-counter,
.aviator-view .flight-stage[data-phase="crashed"] .flew-away {
    color: #ff174f !important;
}

/* The live-player count badge sat directly on top of the "Online" connection status in
   the bottom-right corner, overlapping into a glitch ("Onli100"/"Onlin5"). Hide the number
   entirely and keep the clean "Online" status pill. */
.player-count,
.aviator-view .player-count {
    display: none !important;
}

.aviator-view .game-bets {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 8px !important;
}

.aviator-view .bet-panel {
    grid-template-columns: minmax(88px, 0.72fr) minmax(96px, 0.78fr) minmax(138px, 1.05fr) !important;
    grid-template-rows: 28px 34px 54px 28px 16px !important;
    gap: 5px 7px !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 8px !important;
    background: var(--av-panel) !important;
}

.aviator-view .bet-panel .mode-toggle {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
}

.aviator-view .bet-panel .stake-line {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
}

.aviator-view .bet-panel .quick-stakes {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    gap: 5px !important;
}

.aviator-view .bet-panel .auto-row {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
}

.aviator-view .bet-panel .bet-button {
    grid-column: 3 !important;
    grid-row: 2 / 5 !important;
    min-height: 78px !important;
    border-radius: 8px !important;
    font-size: 19px !important;
}

.aviator-view .bet-panel > p {
    grid-column: 3 !important;
    grid-row: 5 !important;
}

.aviator-view .auto-bet-pill,
.aviator-view .auto-cash {
    width: 100% !important;
    min-width: 0 !important;
}

.aviator-view .auto-row .auto-bet-pill {
    display: flex !important;
}

.aviator-view .auto-row .auto-cash {
    display: flex !important;
    flex-direction: row !important;
}

.aviator-view > .toast-line {
    display: none;
}

@media (max-width: 960px) {
    .aviator-view {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .aviator-view .game-header {
        position: sticky;
        z-index: 20;
        top: 0;
        grid-template-columns: 64px minmax(104px, 1fr) auto 36px 40px !important;
        flex: 0 0 52px;
        width: 100%;
    }

    .aviator-view .game-quick-actions {
        display: none !important;
    }

    .aviator-view .flight-main {
        order: 1;
        display: grid !important;
        grid-template-rows: 34px clamp(350px, 48dvh, 450px) auto !important;
        flex: 0 0 auto;
        width: 100% !important;
        min-height: 0 !important;
    }

    .aviator-view .flight-stage {
        height: 100% !important;
    }

    .aviator-view .bets-board {
        order: 2;
        width: 100% !important;
        height: min(460px, 58dvh) !important;
        max-height: 460px;
        border-top: 1px solid #22252b;
        border-right: 0 !important;
    }

    .aviator-view .game-bets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .aviator-view .game-header {
        grid-template-columns: auto minmax(0, 1fr) auto 38px !important;
        min-height: 50px !important;
        padding: 5px 6px !important;
    }

    .aviator-view .game-brand-button {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        height: 32px !important;
        padding: 0 10px 0 7px !important;
        font-size: 12px !important;
    }

    .aviator-view .mini-logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 20px !important;
    }

    .aviator-view .game-wallet {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-height: 34px !important;
        padding-left: 8px !important;
    }

    .aviator-view .game-wallet span {
        font-size: 11px;
    }

    .aviator-view .game-quick-actions,
    .aviator-view .game-audio {
        display: none !important;
    }

    .aviator-view .game-menu-button {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    .aviator-view .flight-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .aviator-view .round-history-wrap {
        flex: 0 0 32px !important;
        min-height: 32px !important;
    }

    .aviator-view .round-history {
        flex: 1 1 auto !important;
        min-height: 32px !important;
        gap: 14px !important;
        padding-inline: 6px !important;
    }

    .aviator-view .flight-stage {
        flex: 0 0 auto !important;
        width: calc(100% - 8px) !important;
        height: clamp(225px, 37dvh, 350px) !important;
        margin: 0 4px !important;
        border-radius: 14px !important;
    }

    .aviator-view .big-counter {
        top: 44% !important;
        font-size: clamp(44px, 14.5vw, 64px) !important;
    }

    .aviator-view .flew-away {
        top: calc(44% - 46px) !important;
        font-size: clamp(17px, 5vw, 23px) !important;
    }

    .aviator-view .partner-card {
        width: min(250px, calc(100% - 36px));
        padding: 14px 18px !important;
        border-radius: 8px !important;
    }

    .aviator-view .partner-card #betting-countdown,
    .aviator-view .partner-card span {
        font-size: 30px !important;
    }

    .aviator-view .game-bets {
        flex: 0 0 auto !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 7px 4px 9px !important;
    }

    .aviator-view .place-both-button {
        display: none;
    }

    .aviator-view .bet-panel {
        grid-template-columns: minmax(118px, 42%) minmax(0, 58%) !important;
        grid-template-rows: 28px 34px 48px 25px 14px !important;
        gap: 4px 7px !important;
        min-height: 174px !important;
        padding: 8px !important;
    }

    .aviator-view .bet-panel .mode-toggle {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .aviator-view .bet-panel .stake-line {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .aviator-view .bet-panel .quick-stakes {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .aviator-view .bet-panel .auto-row {
        grid-column: 1 !important;
        grid-row: 4 / 6 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 3px !important;
    }

    .aviator-view .bet-panel .auto-cash {
        display: flex !important;
        min-height: 18px !important;
        padding: 0 5px !important;
        gap: 4px !important;
        overflow: hidden;
    }

    .aviator-view .bet-panel .auto-bet-pill {
        min-height: 20px !important;
        padding: 0 5px !important;
    }

    .aviator-view .bet-panel .auto-cash span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .aviator-view .bet-panel .auto-cash input {
        width: 42px !important;
        font-size: 11px !important;
    }

    .aviator-view .bet-panel .bet-button {
        grid-column: 2 !important;
        grid-row: 2 / 5 !important;
        min-height: 78px !important;
        border-radius: 8px !important;
        font-size: 20px !important;
    }

    .aviator-view .bet-panel > p {
        grid-column: 2 !important;
        grid-row: 5 !important;
        font-size: 11px !important;
    }

    .aviator-view .bet-panel .stake-line button {
        width: 34px !important;
        height: 34px !important;
    }

    .aviator-view .bet-panel .quick-stakes button {
        min-height: 22px !important;
        font-size: 12px !important;
    }

    .aviator-view .bets-board {
        height: min(430px, 58dvh) !important;
        max-height: 430px;
        padding: 7px 4px !important;
    }

    .aviator-view .table-head,
    .aviator-view .bet-row {
        grid-template-columns: minmax(70px, 1fr) 62px minmax(46px, auto) minmax(70px, auto) !important;
        gap: 4px !important;
    }

    .aviator-view .x-cell .x-chip {
        padding: 1px 5px;
        font-size: 11px;
    }

    .aviator-view .win-cell {
        font-size: 11.5px;
        text-align: right;
    }
}

@media (max-width: 340px) {
    .aviator-view .game-wallet span {
        display: none;
    }

    .aviator-view .flight-stage {
        height: 225px !important;
    }

    .aviator-view .bet-panel {
        grid-template-columns: minmax(110px, 43%) minmax(0, 57%) !important;
        gap-inline: 5px !important;
    }

    .aviator-view .bet-panel .bet-button {
        font-size: 18px !important;
    }
}

@media (max-width: 760px) and (max-height: 650px) {
    .aviator-view .flight-stage {
        height: clamp(210px, 42dvh, 270px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviator-view .flight-stage,
    .aviator-view .history-chip,
    .aviator-view .bet-button {
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   AVIATOR AUTHORITATIVE LAYOUT 15
   Caps the desktop stage and removes unused manual-panel space.
   ============================================================ */
.aviator-view .side-list-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 20px;
    color: var(--av-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.round-history-leaders > .round-history-empty {
    grid-column: 1 / -1;
}

@media (min-width: 961px) {
    .aviator-view .flight-main {
        align-self: start;
        height: min(calc(100dvh - 52px), 822px) !important;
        grid-template-rows: 34px clamp(300px, calc(100dvh - 300px), 570px) clamp(188px, 24dvh, 218px) !important;
    }
}

@media (max-width: 760px) {
    .aviator-view .bet-panel:not(.is-auto-mode) {
        grid-template-rows: 28px 40px 48px 14px !important;
        min-height: 154px !important;
    }

    .aviator-view .bet-panel:not(.is-auto-mode) .stake-line {
        grid-row: 2 !important;
    }

    .aviator-view .bet-panel:not(.is-auto-mode) .quick-stakes {
        grid-row: 3 !important;
    }

    .aviator-view .bet-panel:not(.is-auto-mode) .auto-row {
        display: none !important;
    }

    .aviator-view .bet-panel:not(.is-auto-mode) .bet-button {
        grid-row: 2 / 4 !important;
        min-height: 84px !important;
    }

    .aviator-view .bet-panel:not(.is-auto-mode) > p {
        grid-row: 4 !important;
    }

    .aviator-view .bet-panel.is-auto-mode {
        min-height: 174px !important;
    }

    .aviator-view .bet-panel .stake-line button {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================================
   HOME GAME LOBBY — 52 tile catalog, full-bleed portrait art
   (game names are baked into the artwork; HTML text stays hidden)
   ============================================================ */
.wr-lobby .hot-section.emerald-games { margin-top: 18px !important; }
.wr-lobby .game-grid,
.emerald-games .game-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    row-gap: 10px !important;
    overflow: visible !important;
}
.wr-lobby .game-card,
.emerald-games .game-card {
    position: relative !important;
    aspect-ratio: 190 / 246 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(4, 18, 12, 0.35) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #0b3d20 !important;
    box-shadow: 0 8px 18px rgba(2, 14, 7, 0.34) !important;
    transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}
.wr-lobby .game-card:hover { box-shadow: 0 12px 24px rgba(2, 14, 7, 0.5) !important; }
.wr-lobby .game-card:active { transform: scale(0.965) !important; }
.wr-lobby .game-card img,
.emerald-games .game-card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 14px !important;
    transform: none !important;
}
/* keep the redundant HTML text hidden — art already carries the name */
.wr-lobby .game-card strong,
.wr-lobby .game-card small,
.emerald-games .game-card strong,
.emerald-games .game-card small { display: none !important; }

/* merchandising badge: small pill, top-left */
.wr-lobby .game-card em,
.emerald-games .game-card em {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #FFD42A, #FFB300) !important;
    color: #201800 !important;
    font-size: 8.5px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
}
/* "Live" badge reads red for realtime flavor */
.wr-lobby .game-card.aviator-card em {
    background: linear-gradient(135deg, #FF5C49, #E3392D) !important;
    color: #fff !important;
}
/* disabled/down game tile */
.wr-lobby .game-card.is-game-down { filter: grayscale(0.6) brightness(0.7); }

/* category filter must beat the earlier display:flex !important on .wr-lobby .game-card */
.wr-lobby .game-card.is-filtered-out,
.emerald-games .game-card.is-filtered-out { display: none !important; }

/* ============================================================
   FLYING TIER BADGES (Newbies / Tycoon / Hot) — top-right, 12% down
   ============================================================ */
.wr-lobby .game-card em,
.emerald-games .game-card em {
    position: absolute !important;
    top: 12% !important;
    left: auto !important;
    right: 5px !important;
    z-index: 4 !important;
    margin: 0 !important;
    padding: 3px 8px 3px 9px !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 4px 9px 9px 4px !important;
    color: #fff !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42) !important;
    transform-origin: right center;
    transform: rotate(-6deg) !important;
    animation: wr-flag-fly 2.6s ease-in-out infinite;
}
/* little flag pole notch on the left edge */
.wr-lobby .game-card em::before,
.emerald-games .game-card em::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
@keyframes wr-flag-fly {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-1.5px); }
}
.f-newbies { background: linear-gradient(135deg, #86E15C, #33A31C) !important; }
.f-tycoon { background: linear-gradient(135deg, #FFC63E, #EF8407) !important; }
.f-hot { background: linear-gradient(135deg, #FF6E50, #E11C0B) !important; }

/* ============================================================
   GAME "UNDER DEVELOPMENT" SCREEN
   ============================================================ */
.wr-dev-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wr-dev-overlay[hidden] { display: none !important; }
.wr-dev-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 14, 8, 0.84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: wr-dev-fade 0.2s ease;
}
.wr-dev-card {
    position: relative;
    z-index: 1;
    width: min(340px, 90vw);
    background: linear-gradient(180deg, #0E5429, #073a1c);
    border: 1px solid rgba(255, 212, 42, 0.3);
    border-radius: 22px;
    padding: 20px 20px 22px;
    text-align: center;
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.62);
    animation: wr-dev-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.wr-dev-back {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #DFF5E6;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.wr-dev-back:hover { background: rgba(255, 255, 255, 0.18); }
.wr-dev-art-frame {
    position: relative;
    width: 124px;
    aspect-ratio: 190 / 246;
    margin: 16px auto 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.wr-dev-art-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.8) brightness(0.72);
}
.wr-dev-cog {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.game-dev-tier {
    display: inline-block;
    margin-top: 15px;
    padding: 3px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.game-dev-tier[hidden] { display: none; }
#game-dev-name {
    margin: 9px 0 0;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0.2px;
}
.wr-dev-status {
    margin: 6px 0 0;
    color: #FFD42A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
}
.wr-dev-sub {
    margin: 9px auto 0;
    max-width: 272px;
    color: rgba(223, 245, 230, 0.76);
    font-size: 12px;
    line-height: 1.55;
}
.wr-dev-cta {
    margin-top: 19px;
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFD42A, #FFB300);
    color: #201800;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}
.wr-dev-cta:active { transform: scale(0.98); }
body.dev-overlay-open { overflow: hidden; }
@keyframes wr-dev-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wr-dev-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* tier badge colors must beat earlier .game-card em gold + .aviator-card em red */
.wr-lobby .game-card em.f-newbies,
.emerald-games .game-card em.f-newbies { background: linear-gradient(135deg, #86E15C, #33A31C) !important; }
.wr-lobby .game-card em.f-tycoon,
.emerald-games .game-card em.f-tycoon { background: linear-gradient(135deg, #FFC63E, #EF8407) !important; }
.wr-lobby .game-card em.f-hot,
.emerald-games .game-card em.f-hot { background: linear-gradient(135deg, #FF6E50, #E11C0B) !important; }

/* ============================================================
   IMAGE RIBBON TICKERS (Newbies / Tycoon / Hot) — draped over top-right corner
   ============================================================ */
/* card must not clip so the ribbon can overhang the corner ("holding" it) */
.wr-lobby .game-card,
.emerald-games .game-card { overflow: visible !important; }
/* the game artwork keeps its own rounded corners */
.wr-lobby .game-card img.wr-game-art,
.emerald-games .game-card img.wr-game-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    z-index: 1 !important;
}
/* the ribbon banner image, overhanging the top-right by 5px */
.wr-lobby .game-card img.wr-tier,
.emerald-games .game-card img.wr-tier {
    position: absolute !important;
    inset: auto !important;
    top: 7% !important;
    left: auto !important;
    bottom: auto !important;
    right: -5px !important;           /* overhang so the curl "holds" the card */
    width: 50% !important;
    height: auto !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    z-index: 6 !important;
    transform: rotate(-3deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    pointer-events: none;
    animation: none !important;
}
/* retire the old text-flag <em> styling (no <em> in cards anymore) */
.wr-lobby .game-card em,
.emerald-games .game-card em { display: none !important; }

/* BUGFIX: mobile rule ".aviator-view{display:flex!important}" was force-showing
   the Aviator game under the home lobby. Hidden views must stay hidden. */
.aviator-view.is-hidden,
#game-view.is-hidden,
.mini-game-view.is-hidden,
.imported-game-view.is-hidden { display: none !important; }

/* ============================================================
   TICKER: straight drape, -7px past the right edge
   ============================================================ */
.wr-lobby .game-card img.wr-tier,
.emerald-games .game-card img.wr-tier {
    right: -7px !important;
    transform: none !important;
}

/* ============================================================
   HERO POLISH — visible borders on rounded corners + life
   The old ".hero-track > div { border-radius: 0 }" squared the
   slides, so the 22px wrapper clip shaved their 1px border away
   at every corner. Fix: match radii and draw the border as an
   INSET ring (box-shadow follows the curve and can't be clipped).
   ============================================================ */
.wr-lobby .hero-wrap > div:first-child {
    border-radius: 22px !important;
    overflow: hidden !important;
}
.wr-lobby .hero-track > div {
    border-radius: 22px !important;
    border: 0 !important;
}
/* per-slide ring colors (1: jackpot red, 2: bonus gold, 3: invite pearl,
   4: event gold, 5: rebate mint, 6: jackpot loop) */
.wr-lobby .hero-track > div:nth-child(1),
.wr-lobby .hero-track > div:nth-child(6) {
    box-shadow: inset 0 0 0 1.5px rgba(255, 106, 90, 0.62), inset 0 0 34px rgba(255, 59, 47, 0.16) !important;
}
.wr-lobby .hero-track > div:nth-child(2),
.wr-lobby .hero-track > div:nth-child(4) {
    box-shadow: inset 0 0 0 1.5px rgba(255, 212, 42, 0.66), inset 0 0 34px rgba(255, 212, 42, 0.12) !important;
}
.wr-lobby .hero-track > div:nth-child(3) {
    box-shadow: inset 0 0 0 1.5px rgba(225, 255, 235, 0.44), inset 0 0 34px rgba(70, 229, 138, 0.1) !important;
}
.wr-lobby .hero-track > div:nth-child(5) {
    box-shadow: inset 0 0 0 1.5px rgba(70, 229, 138, 0.6), inset 0 0 34px rgba(70, 229, 138, 0.14) !important;
}

/* shine sweep: a soft light band glides across each card */
.wr-lobby .hero-track > div::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -70%;
    width: 46%;
    height: 160%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.09) 55%, transparent);
    transform: rotate(8deg);
    animation: wr-heroshine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes wr-heroshine {
    0%, 55% { left: -70%; }
    85%, 100% { left: 150%; }
}

/* CTA pills: heartbeat glow so the action reads alive & valuable */
.wr-lobby .hero-track div[data-game],
.wr-lobby .hero-track div[data-nav-page] {
    animation: wr-ctapulse 2.4s ease-in-out infinite;
    cursor: pointer;
}
@keyframes wr-ctapulse {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.045); }
    24% { transform: scale(1); }
}

/* jackpot counter: golden shimmer breathing */
.wr-lobby .hero-track div[style*="font-size:25px"] {
    animation: wr-jackglow 2.2s ease-in-out infinite;
}
@keyframes wr-jackglow {
    0%, 100% { text-shadow: 0 0 18px rgba(255, 212, 42, 0.28); }
    50% { text-shadow: 0 0 34px rgba(255, 212, 42, 0.65), 0 0 6px rgba(255, 232, 130, 0.4); }
}

/* badges: gentle attention flicker on the emoji pill row */
.wr-lobby .hero-track > div > div > div > div:first-child {
    animation: wr-badgefade 3.6s ease-in-out infinite;
}
@keyframes wr-badgefade {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.22); }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wr-lobby .hero-track > div::after,
    .wr-lobby .hero-track div[data-game],
    .wr-lobby .hero-track div[data-nav-page],
    .wr-lobby .hero-track div[style*="font-size:25px"] { animation: none !important; }
}

/* ============================================================
   SUPPORT FAB REDESIGN — crisp headset icon, tight shadow, online dot
   ============================================================ */
.lobby-view .lobby-support-fab.wr-fab {
    gap: 8px;
    padding: 7px 17px 7px 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: linear-gradient(165deg, #FFE065, #FFC400) !important;
    box-shadow: 0 6px 16px rgba(2, 14, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.lobby-view .wr-fab span {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center;
    background: #0B3D20 !important;
    color: #FFD42A !important;
    font-size: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.lobby-view .wr-fab strong {
    color: #201800 !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px;
}
/* online presence dot on the icon disc */
.wr-fab-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2EE56E;
    border: 2px solid #FFDF56;
    animation: wr-fabdot 2.2s ease-in-out infinite;
}
@keyframes wr-fabdot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 229, 110, 0.55); }
    55% { box-shadow: 0 0 0 5px rgba(46, 229, 110, 0); }
}

/* ============================================================
   GAME CARD SHADOW → LAYER-BLUR OF THE CARD'S OWN ART
   Replaces the heavy dark drop shadow with a soft blurred copy
   of the tile artwork peeking out beneath the card.
   ============================================================ */
.wr-lobby .game-card,
.emerald-games .game-card {
    box-shadow: 0 2px 6px rgba(2, 14, 7, 0.22) !important; /* faint contact shadow only */
}
.emerald-games .game-card img.wr-card-glow {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 16px !important;
    z-index: 0 !important;
    transform: translateY(10px) scale(0.94);
    filter: blur(13px) saturate(1.35) brightness(0.82);
    opacity: 0.55;
    pointer-events: none;
    animation: none !important;
}
/* extra row breathing room so the glow has space to fall into */
.wr-lobby .game-grid { row-gap: 14px !important; }

/* ============================================================
   APP BAR BALANCE CHIP (replaces support icon on home)
   ============================================================ */
.wr-abx-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 5px 4px 5px;
    border: 1px solid rgba(255, 212, 42, 0.4);
    border-radius: 999px;
    background: rgba(7, 42, 22, 0.85);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wr-abx-balance b {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #FFD42A;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-abx-bal-coin {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE477, #F2B70C 75%);
    color: #201800;
    font-size: 10.5px;
    font-weight: 900;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.wr-abx-bal-plus {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFD42A;
    color: #201800;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   LEFT MENU ("Mine" drawer) — full design pass
   ============================================================ */
#profile-modal .mine-screen.wr {
    background: linear-gradient(180deg, #0E5429, #0A3D1E 55%, #082F18) !important;
    border: 1px solid rgba(225, 255, 235, 0.16) !important;
    border-radius: 24px !important;
    padding: 20px 16px 18px !important;
    color: #E7FAEC;
}
#profile-modal .mine-screen .screen-topline { display: none !important; }
#profile-modal .mine-screen h2 {
    margin: 0 44px 12px 2px !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px;
}
#profile-modal .mine-screen .close-modal {
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(225, 255, 235, 0.22) !important;
    background: rgba(225, 255, 235, 0.08) !important;
    color: #E7FAEC !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
/* submenu chips */
#profile-modal .mine-screen .screen-submenu {
    display: flex !important;
    gap: 7px !important;
    margin: 0 0 14px !important;
    overflow-x: auto;
    scrollbar-width: none;
}
#profile-modal .mine-screen .screen-submenu button {
    flex: none;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(225, 255, 235, 0.18) !important;
    background: rgba(7, 42, 22, 0.6) !important;
    color: #CFEDD8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
#profile-modal .mine-screen .screen-submenu button.is-active {
    background: #FFD42A !important;
    border-color: #FFD42A !important;
    color: #201800 !important;
}
/* identity / status summary card */
#profile-modal .profile-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 16px;
    background: rgba(7, 42, 22, 0.55);
    border: 1px solid rgba(225, 255, 235, 0.14);
}
#profile-modal .profile-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#profile-modal .profile-summary span {
    color: #9CC7A9;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#profile-modal .profile-summary strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* quick action tiles */
#profile-modal .account-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}
#profile-modal .account-actions button,
#profile-modal .account-actions a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 4px 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(225, 255, 235, 0.14) !important;
    background: rgba(225, 255, 235, 0.06) !important;
    color: #E7FAEC !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: background 0.12s ease;
}
#profile-modal .account-actions button:active { background: rgba(225, 255, 235, 0.14) !important; }
#profile-modal .account-actions span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #1B7B40;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* report + transactions panels */
#profile-modal .account-panels { display: grid; gap: 10px; margin: 0 0 14px !important; }
#profile-modal .account-panels section {
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: rgba(7, 42, 22, 0.55) !important;
    border: 1px solid rgba(225, 255, 235, 0.14) !important;
}
#profile-modal .account-panels h3 {
    margin: 0 0 9px !important;
    color: #FFD42A !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
#profile-modal .account-panels .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
}
#profile-modal .account-panels .info-grid span { color: #9CC7A9; font-size: 10px; font-weight: 700; }
#profile-modal .account-panels .info-grid strong { color: #fff; font-size: 12.5px; font-weight: 800; }
/* menu rows */
#profile-modal .mine-menu-list { display: grid !important; gap: 7px !important; margin: 0 !important; }
#profile-modal .mine-menu-list button {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    align-items: center;
    gap: 11px !important;
    padding: 10px 30px 10px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(225, 255, 235, 0.12) !important;
    background: rgba(225, 255, 235, 0.05) !important;
    color: #E7FAEC !important;
    text-align: left !important;
}
#profile-modal .mine-menu-list button::after {
    content: "›";
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #7FB08D;
    font-size: 16px;
    font-weight: 800;
}
#profile-modal .mine-menu-list button:active { background: rgba(225, 255, 235, 0.12) !important; }
#profile-modal .mine-menu-list span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #1B7B40;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#profile-modal .mine-menu-list strong { display: block; color: #fff; font-size: 13px; font-weight: 800; }
#profile-modal .mine-menu-list small { display: block; margin-top: 1px; color: #9CC7A9; font-size: 10.5px; font-weight: 600; }
/* footer note + backend link tone down */
#profile-modal .mine-screen > p {
    margin: 12px 4px 0 !important;
    color: #7FB08D !important;
    font-size: 10px !important;
    line-height: 1.5;
}

/* drawer transactions: match theme (was a black legacy box) */
#profile-modal .transaction-list .transaction-row {
    background: rgba(7, 42, 22, 0.55) !important;
    border: 1px solid rgba(225, 255, 235, 0.12) !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    color: #E7FAEC !important;
}
#profile-modal .transaction-list .transaction-row strong {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
}
#profile-modal .transaction-list .transaction-row span,
#profile-modal .transaction-list .transaction-row small {
    color: #9CC7A9 !important;
    font-size: 11px !important;
}

/* ============================================================
   SEND MONEY — wallet-to-wallet transfer experience
   ============================================================ */
.send-money-page.wr .wr-send-body {
    padding: 14px 16px 120px;
    display: grid;
    gap: 12px;
}
/* balance banner */
.wr-send-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, #26A155, #12602F);
    border: 1px solid rgba(225, 255, 235, 0.26);
}
.wr-send-balance span {
    display: block;
    color: #D9F4E0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.wr-send-balance strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.wr-send-balance strong i {
    font-style: normal;
    font-size: 13px;
    color: #FFD42A;
}
.wr-send-bolt {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 212, 42, 0.18);
    border: 1px solid rgba(255, 212, 42, 0.55);
    color: #FFD42A;
}
/* step cards */
.wr-send-card {
    padding: 15px 14px 14px;
    border-radius: 18px;
    background: #0E5429;
    border: 1px solid rgba(225, 255, 235, 0.2);
}
.wr-send-step {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
.wr-send-step i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: #FFD42A;
    color: #201800;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
}
.wr-send-step h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.wr-send-step span {
    margin-left: auto;
    color: #9CC7A9;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* recipient lookup */
.wr-send-lookup {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.wr-send-lookup input {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 13px;
    border: 1px solid rgba(225, 255, 235, 0.22);
    background: #073A1B;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.wr-send-lookup input::placeholder { color: #7FB08D; }
.wr-send-lookup button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 13px;
    background: #FFD42A;
    color: #201800;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.wr-send-lookup button:disabled { opacity: 0.6; }
/* verified recipient card */
.wr-recipient-card {
    display: grid;
    grid-template-columns: 42px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(70, 229, 138, 0.1);
    border: 1px solid rgba(70, 229, 138, 0.5);
    animation: wr-dev-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.wr-recipient-card[hidden] { display: none !important; }
.wr-rc-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1B7B40;
    border: 2px solid rgba(70, 229, 138, 0.7);
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}
.wr-rc-info { min-width: 0; }
.wr-rc-info strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wr-rc-info small {
    display: block;
    margin-top: 1px;
    color: #9CC7A9;
    font-size: 11px;
    font-weight: 600;
}
.wr-rc-check {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #46E58A;
    color: #06280F;
    font-size: 12px;
    font-weight: 900;
}
.wr-recipient-card button {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(225, 255, 235, 0.12);
    border: 1px solid rgba(225, 255, 235, 0.25);
    color: #DFF5E6;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
/* amount */
.wr-send-amount {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 212, 42, 0.6);
    background: #073A1B;
}
.wr-send-amount span { color: #FFD42A; font-size: 14px; font-weight: 900; }
.wr-send-amount input {
    min-width: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.wr-send-amount input::placeholder { color: #4F7E5F; }
.wr-send-amount button {
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 212, 42, 0.16);
    border: 1px solid rgba(255, 212, 42, 0.55);
    color: #FFD42A;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.wr-send-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.wr-send-chips button {
    min-height: 38px;
    border-radius: 11px;
    background: rgba(225, 255, 235, 0.07);
    border: 1px solid rgba(225, 255, 235, 0.18);
    color: #E7FAEC;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.wr-send-chips button:active { background: rgba(255, 212, 42, 0.2); }
.wr-send-note {
    width: 100%;
    margin-top: 10px;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(225, 255, 235, 0.16);
    background: rgba(7, 58, 27, 0.6);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.wr-send-note::placeholder { color: #7FB08D; }
/* facts row */
.wr-send-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.wr-send-facts > div {
    padding: 9px 6px;
    border-radius: 11px;
    background: rgba(7, 42, 22, 0.55);
    border: 1px solid rgba(225, 255, 235, 0.12);
    text-align: center;
}
.wr-send-facts span {
    display: block;
    color: #9CC7A9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.wr-send-facts strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}
.wr-wallet-rule-status {
    margin-top: 12px;
    padding: 12px 2px 2px;
    border-top: 1px solid rgba(225, 255, 235, 0.14);
    color: #dff5e5;
}
.wr-wallet-rule-status:empty { display: none; }
.wr-rule-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wr-rule-top strong {
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
}
.wr-rule-top span {
    flex: none;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
}
.wr-rule-top .is-ready {
    color: #8bf1b5;
    background: rgba(70, 229, 138, 0.12);
    border: 1px solid rgba(70, 229, 138, 0.3);
}
.wr-rule-top .is-waiting {
    color: #ffd078;
    background: rgba(255, 181, 71, 0.11);
    border: 1px solid rgba(255, 181, 71, 0.3);
}
.wr-wallet-rule-status p,
.wr-wallet-rule-status small {
    display: block;
    margin: 6px 0 0;
    color: #9cc7a9;
    font-size: 10.5px;
    line-height: 1.45;
}
.wr-rule-progress {
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(225, 255, 235, 0.09);
}
.wr-rule-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #46e58a;
    transition: width 180ms ease;
}
.is-free { color: #46E58A !important; }
/* CTA */
.wr-send-cta {
    width: 100%;
    min-height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #FFD42A, #FFB300);
    color: #201800;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 176, 0, 0.35);
    transition: opacity 0.15s ease, transform 0.1s ease;
}
.wr-send-cta:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}
.wr-send-cta:not(:disabled):active { transform: scale(0.985); }
.wr-send-safe {
    margin: 2px 6px 0;
    color: #9CC7A9;
    font-size: 11px;
    text-align: center;
    line-height: 1.5;
}
/* confirm sheet */
.wr-send-confirm h2 {
    margin: 4px 0 14px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
}
.wr-sc-rows { display: grid; gap: 8px; text-align: left; }
.wr-sc-rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 11px;
    background: rgba(7, 42, 22, 0.55);
    border: 1px solid rgba(225, 255, 235, 0.12);
}
.wr-sc-rows span { color: #9CC7A9; font-size: 11px; font-weight: 700; }
.wr-sc-rows strong { color: #fff; font-size: 13px; font-weight: 800; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-sc-total { border-color: rgba(255, 212, 42, 0.5) !important; }
.wr-sc-total strong { color: #FFD42A !important; }
.wr-sc-warn {
    margin: 12px 2px 0;
    color: #FFB547;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}
.wr-sc-cancel {
    width: 100%;
    margin-top: 9px;
    min-height: 42px;
    border-radius: 13px;
    background: rgba(225, 255, 235, 0.08);
    border: 1px solid rgba(225, 255, 235, 0.2);
    color: #DFF5E6;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
/* success sheet */
.wr-send-success h2 { margin: 12px 0 4px; color: #fff; font-size: 20px; font-weight: 900; }
.wr-ss-amount { color: #46E58A; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.wr-ss-to { margin: 4px 0 0; color: #C0E8CC; font-size: 13px; font-weight: 600; }
.wr-ss-meta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    color: #9CC7A9;
    font-size: 10.5px;
    font-weight: 600;
}
.wr-ss-history {
    width: 100%;
    margin-top: 9px;
    min-height: 42px;
    border-radius: 13px;
    background: rgba(225, 255, 235, 0.08);
    border: 1px solid rgba(225, 255, 235, 0.2);
    color: #DFF5E6;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.wr-ss-check { display: grid; place-items: center; margin-top: 8px; }
.wr-ss-check svg { width: 74px; height: 74px; }
.wr-ss-check circle {
    stroke: #46E58A;
    stroke-width: 2.5;
    stroke-dasharray: 155;
    stroke-dashoffset: 155;
    animation: wr-ss-draw 0.55s ease-out forwards;
}
.wr-ss-check path {
    stroke: #46E58A;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: wr-ss-draw 0.4s ease-out 0.45s forwards;
}
@keyframes wr-ss-draw { to { stroke-dashoffset: 0; } }

/* Server-backed deposit eligibility */
.deposit-page.wr .deposit-account-policy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 10px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 212, 42, 0.34);
    border-radius: 8px;
    background: rgba(5, 61, 31, 0.82);
    text-align: left;
}
.deposit-page.wr .deposit-account-policy strong {
    color: #FFD42A;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.deposit-page.wr .deposit-account-policy span {
    color: #C6E8D0;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.35;
}
.deposit-page.wr .amount-grid button:disabled {
    cursor: not-allowed !important;
    opacity: 0.38 !important;
    filter: grayscale(0.65);
    box-shadow: none !important;
}
@media (max-width: 420px) {
    .deposit-page.wr .deposit-account-policy {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* "Sending to" strip on the amount step */
.wr-send-to {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 11px;
    padding: 8px 11px;
    border-radius: 12px;
    background: rgba(70, 229, 138, 0.09);
    border: 1px dashed rgba(70, 229, 138, 0.45);
}
.wr-send-to[hidden] { display: none !important; }
.wr-send-to i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1B7B40;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    font-style: normal;
}
.wr-send-to span { color: #9CC7A9; font-size: 11px; font-weight: 700; }
.wr-send-to b {
    color: #46E58A;
    font-size: 12.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* transfer rows in wallet history */
.history-row.is-transfer .history-row-icon {
    background: rgba(70, 229, 138, 0.14) !important;
    color: #46E58A !important;
    border-color: rgba(70, 229, 138, 0.45) !important;
}

/* app bar UID chip */
.wr-abx-uid {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(225, 255, 235, 0.22);
    background: rgba(7, 42, 22, 0.7);
    color: #B2DFC0;
    cursor: pointer;
}
.wr-abx-uid[hidden] { display: none !important; }
.wr-abx-uid b {
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #E7FAEC;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* app bar density: brand + UID + bell + balance must fit 375px */
.wr-appbar-x { gap: 6px !important; padding-inline: 10px !important; }
.wr-abx-uid { margin-left: 2px; padding: 3px 8px; min-height: 26px; }
.wr-abx-uid b { max-width: 78px; font-size: 10px; }
.wr-abx-uid svg { flex: none; }
.wr-abx-balance { gap: 4px; padding: 3px 4px; min-height: 32px; }
.wr-abx-balance b { font-size: 12px; max-width: 64px; }
.wr-abx-bal-coin { width: 22px; height: 22px; font-size: 9.5px; }
.wr-abx-bal-plus { width: 20px; height: 20px; }
@media (max-width: 392px) {
    .wr-abx-uid b { max-width: 64px; }
    .wr-abx-balance b { max-width: 52px; }
}

/* ============================================================
   APP BAR v2 — two calm rows, full UID, nothing clipped
   ============================================================ */
.wr-appbar-x {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto auto;
    row-gap: 8px;
    align-items: center;
    padding: 10px 12px 9px !important;
}
.wr-appbar-x .menu-button { grid-row: 1; grid-column: 1; }
.wr-abx-brand { grid-row: 1; grid-column: 2; }
.wr-appbar-x > div[style*="flex:1"] { grid-row: 1; grid-column: 3; }
.wr-appbar-x .notification-action { grid-row: 1; grid-column: 4; }
.wr-abx-balance { grid-row: 1; grid-column: 5; margin-left: 6px; }
.wr-abx-balance b { max-width: 96px; font-size: 12.5px; }
/* UID gets its own full-width row — complete ID, easy to read */
.wr-abx-uid {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0;
    min-height: 28px;
    padding: 5px 12px;
    gap: 6px;
}
.wr-abx-uid b {
    max-width: none;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.wr-abx-uid::after {
    content: "›";
    color: #7FB08D;
    font-size: 12px;
    font-weight: 800;
}
/* logo lockup: glossy 10x tile + bold wordmark */
.wr-abx-brand span {
    background: linear-gradient(160deg, #FFE882, #FFC400 62%, #F5A809) !important;
    box-shadow: 0 4px 12px rgba(255, 176, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.65);
    font-weight: 900 !important;
}
.wr-abx-brand strong {
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

/* app bar v2 must beat the legacy .lobby-header grid */
.lobby-header.wr-appbar-x {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto auto !important;
    grid-template-rows: none;
    row-gap: 8px !important;
    column-gap: 6px !important;
    align-items: center !important;
    padding: 10px 12px 9px !important;
    min-height: 0 !important;
}
.lobby-header.wr-appbar-x .menu-button { grid-row: 1 !important; grid-column: 1 !important; }
.lobby-header.wr-appbar-x .wr-abx-brand { grid-row: 1 !important; grid-column: 2 !important; }
.lobby-header.wr-appbar-x > div[style*="flex:1"] { grid-row: 1 !important; grid-column: 3 !important; }
.lobby-header.wr-appbar-x .notification-action { grid-row: 1 !important; grid-column: 4 !important; }
.lobby-header.wr-appbar-x .wr-abx-balance { grid-row: 1 !important; grid-column: 5 !important; margin-left: 4px !important; }
.lobby-header.wr-appbar-x .wr-abx-uid {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin: 0 !important;
}

/* app bar v2 final — outrank ".lobby-view .lobby-header.wr-appbar-x{display:flex!important}" */
.lobby-view .lobby-header.wr-appbar-x {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto auto !important;
    row-gap: 8px !important;
    column-gap: 6px !important;
    align-items: center !important;
    padding: 10px 12px 9px !important;
    min-height: 0 !important;
}
.lobby-view .lobby-header.wr-appbar-x .menu-button { grid-row: 1 !important; grid-column: 1 !important; }
.lobby-view .lobby-header.wr-appbar-x .wr-abx-brand { grid-row: 1 !important; grid-column: 2 !important; }
.lobby-view .lobby-header.wr-appbar-x > div[style*="flex:1"] { grid-row: 1 !important; grid-column: 3 !important; }
.lobby-view .lobby-header.wr-appbar-x .notification-action { grid-row: 1 !important; grid-column: 4 !important; justify-self: end; }
.lobby-view .lobby-header.wr-appbar-x .wr-abx-balance { grid-row: 1 !important; grid-column: 5 !important; margin-left: 4px !important; }
.lobby-view .lobby-header.wr-appbar-x .wr-abx-uid {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin: 0 !important;
}

/* Home chrome polish: two calm rows — top row for chrome (menu, logo, bell, wallet),
   a dedicated second row for the full player ID so nothing is cramped. */
.lobby-view .lobby-header.wr-appbar-x {
    position: sticky !important;
    z-index: 70 !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: 44px max-content minmax(0, 1fr) 44px auto !important;
    grid-template-rows: 44px auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 9px !important;
    min-height: 0 !important;
    padding: 10px 12px 11px !important;
    background: rgba(3, 22, 11, 0.98) !important;
    border-bottom: 1px solid rgba(73, 224, 139, 0.22) !important;
    box-shadow: 0 10px 28px rgba(0, 12, 6, 0.25) !important;
    backdrop-filter: blur(16px);
}

.lobby-view .lobby-header.wr-appbar-x .menu-button {
    grid-row: 1 !important;
    grid-column: 1 !important;
}

.lobby-view .lobby-header.wr-appbar-x .wr-abx-brand {
    grid-row: 1 !important;
    grid-column: 2 !important;
}

.lobby-view .lobby-header.wr-appbar-x .wr-abx-uid {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    display: inline-flex;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    color: #eaf8f0;
    background: rgba(21, 64, 43, 0.72);
    border: 1px solid rgba(121, 211, 159, 0.28);
    border-radius: 999px;
}

.lobby-view .lobby-header.wr-appbar-x .wr-abx-uid[hidden] {
    display: none !important;
}

.lobby-view .lobby-header.wr-appbar-x .wr-abx-uid::after {
    content: none !important;
}

.wr-abx-uid-profile,
.wr-abx-uid-copy {
    appearance: none;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.wr-abx-uid-profile {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 11px;
    text-align: left;
}

.wr-abx-uid-profile > svg {
    flex: 0 0 auto;
    color: #a8caba;
}

.wr-abx-uid-profile b {
    max-width: none !important;
    overflow: visible;
    color: #f7fff9;
    font-size: 11.5px !important;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.04em !important;
    font-variant-numeric: tabular-nums;
    text-overflow: clip;
    white-space: nowrap;
}

.wr-abx-uid-copy {
    display: grid;
    width: 34px;
    min-height: 34px;
    place-items: center;
    border-left: 1px solid rgba(121, 211, 159, 0.18);
    color: #c8e8d6;
}

.wr-abx-uid-profile:focus-visible,
.wr-abx-uid-copy:focus-visible {
    outline: 2px solid #ffd43b;
    outline-offset: -3px;
}

.lobby-view .lobby-header.wr-appbar-x .notification-action {
    grid-row: 1 !important;
    grid-column: 4 !important;
    justify-self: end !important;
}

.lobby-view .lobby-header.wr-appbar-x .wr-abx-balance {
    grid-row: 1 !important;
    grid-column: 5 !important;
    justify-self: end !important;
    margin: 0 !important;
}

.lobby-view .wr-abx-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border: 1px solid rgba(79, 219, 141, 0.25) !important;
    border-radius: 8px !important;
    color: #e8f7ee !important;
    background: rgba(17, 63, 40, 0.76) !important;
}

.lobby-view .wr-abx-icon svg {
    width: 20px;
    height: 20px;
}

.lobby-view .wr-abx-icon [data-notification-count] {
    top: -7px;
    right: -7px;
    display: grid;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid #04160b;
    border-radius: 12px;
    color: #fff;
    background: #ed4e4e;
    font-size: 9px;
    font-weight: 900;
}

.lobby-view .wr-abx-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
}

.lobby-view .wr-abx-brand span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px !important;
    color: #10130d;
    font-size: 18px;
    line-height: 1;
}

.lobby-view .wr-abx-brand strong {
    color: #f9fcfa;
    font-size: 21px !important;
    line-height: 1;
    letter-spacing: 0 !important;
}

.lobby-view .wr-abx-balance {
    display: grid;
    grid-template-columns: 30px minmax(35px, auto) 30px;
    min-height: 44px;
    padding: 5px;
    gap: 5px;
    align-items: center;
    border: 1px solid #f7c928;
    border-radius: 8px !important;
    color: #ffd43b;
    background: #151a13;
}

.lobby-view .wr-abx-balance b {
    max-width: 76px;
    overflow: hidden;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-overflow: ellipsis;
}

.lobby-view .wr-abx-bal-coin,
.lobby-view .wr-abx-bal-plus {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #15190f;
    background: #ffd43b;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.bottom-nav {
    position: fixed !important;
    z-index: 90 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(100vw, var(--user-screen-width)) !important;
    max-width: var(--user-screen-width) !important;
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 7px 7px calc(6px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    border-top: 1px solid rgba(83, 216, 142, 0.22) !important;
    background: rgba(3, 29, 16, 0.98) !important;
    box-shadow: 0 -12px 28px rgba(0, 15, 8, 0.34) !important;
    backdrop-filter: blur(16px);
}

.bottom-nav button {
    position: relative;
    display: grid !important;
    min-width: 0;
    min-height: 56px;
    padding: 2px 2px 3px !important;
    place-items: center;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #8db2a0 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.05;
    letter-spacing: 0 !important;
}

.bottom-nav button span {
    display: grid !important;
    width: 34px !important;
    height: 32px !important;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 7px !important;
    color: inherit;
    background: transparent;
}

.bottom-nav button svg {
    width: 21px !important;
    height: 21px !important;
}

.bottom-nav button.is-active {
    color: #ffd43b !important;
}

.bottom-nav button.is-active span {
    border-color: rgba(255, 212, 59, 0.55);
    color: #092014;
    background: #ffd43b;
    box-shadow: 0 5px 14px rgba(255, 194, 22, 0.2);
}

.bottom-nav button.is-active::after {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #ffd43b;
    content: "";
    transform: translateX(-50%);
}

.support-fab {
    right: max(14px, calc((100vw - var(--user-screen-width)) / 2 + 14px)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    z-index: 89 !important;
}

.aviator-shell .side-list-empty {
    display: grid;
    min-height: 180px;
    padding: 28px 20px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: #9299a5;
    text-align: center;
}

.aviator-shell .side-list-empty .side-empty-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #67d89a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.aviator-shell .side-list-empty .side-empty-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #45d487;
    box-shadow: 0 0 0 4px rgba(69, 212, 135, 0.12);
}

.aviator-shell .side-list-empty strong {
    color: #e3e6eb;
    font-size: 14px;
}

.aviator-shell .side-list-empty p {
    max-width: 360px;
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 400px) {
    .lobby-view .lobby-header.wr-appbar-x {
        grid-template-columns: 40px max-content minmax(0, 1fr) 40px auto !important;
        grid-template-rows: 42px auto !important;
        column-gap: 6px !important;
        row-gap: 8px !important;
        min-height: 0 !important;
        padding: 9px 10px 10px !important;
    }

    .lobby-view .wr-abx-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
    }

    .lobby-view .wr-abx-brand {
        gap: 5px;
    }

    .lobby-view .wr-abx-brand span {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .lobby-view .wr-abx-brand strong {
        font-size: 18px !important;
    }

    .wr-abx-uid-profile {
        gap: 6px;
        padding: 5px 8px 5px 11px;
    }

    .wr-abx-uid-profile small {
        display: none;
    }

    .lobby-view .wr-abx-balance {
        grid-template-columns: minmax(34px, auto) 28px;
        gap: 4px;
    }

    .lobby-view .wr-abx-bal-coin {
        display: none;
    }

    .lobby-view .wr-abx-balance b {
        max-width: 54px;
        font-size: 12px !important;
    }
}