/**
 * Game Specific Styles: Win Go, K3, 5D, Crash, Slots
 */

/* Theme-Based Luxury Custom Scrollbar (Sidebar) */
* {
    scrollbar-width: thin;
    scrollbar-color: #9c7128 #13151c;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #13151c;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d49a37 0%, #8c5d1e 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f5bc5c 0%, #b87c24 100%);
    box-shadow: 0 0 6px rgba(245, 188, 92, 0.4);
}

::-webkit-scrollbar-corner {
    background: #13151c;
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Room Selector Bar - Mobile Aligned */
.room-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #141722;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
    margin-bottom: 12px;
}

.room-tab {
    text-align: center;
    padding: 8px 2px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    user-select: none;
    -webkit-user-select: none;
}

.room-tab .tab-icon {
    font-size: 14px;
    line-height: 1;
}

.room-tab .tab-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.room-tab.active {
    background: linear-gradient(135deg, #e52d43 0%, #b81729 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(229, 45, 67, 0.45);
    transform: translateY(-1px);
}

/* Win Go Top Wallet & Action Bar */
.wingo-top-bar {
    background: linear-gradient(135deg, #1b1e2a 0%, #151722 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.wingo-wallet-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wingo-wallet-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.wingo-wallet-val {
    font-size: 16px;
    font-weight: 900;
    color: var(--gold-light);
    letter-spacing: 0.3px;
    font-family: var(--font-bahnschrift);
}

.wingo-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wingo-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    height: 30px;
    padding: 0 10px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.wingo-action-btn:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.16);
}

.wingo-action-btn.btn-refill {
    background: linear-gradient(135deg, #f5a623 0%, #d48806 100%);
    color: #121212;
    border: none;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}

/* Win Go Timer Display Card */
.wingo-timer-card {
    background: radial-gradient(circle at 85% 20%, rgba(229, 45, 67, 0.15) 0%, transparent 60%),
                linear-gradient(140deg, #1d212f 0%, #11131c 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.wingo-timer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wingo-room-badge {
    background: rgba(229, 45, 67, 0.18);
    border: 1px solid rgba(229, 45, 67, 0.4);
    color: #ff5268;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.wingo-guide-trigger {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.wingo-guide-trigger:hover {
    color: var(--gold-light);
}

.wingo-timer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timer-round-info {
    display: flex;
    flex-direction: column;
}

.timer-round-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 700;
}

.timer-round-num-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.timer-round-num {
    font-size: 16px;
    font-weight: 900;
    color: var(--gold-light);
    font-family: monospace;
    letter-spacing: 0.5px;
}

.btn-copy-period {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
}

.btn-copy-period:active {
    background: var(--gold);
    color: #000;
}

/* Digital LED Clock Boxes */
.timer-countdown {
    display: flex;
    gap: 4px;
    align-items: center;
}

.time-digit-group {
    display: flex;
    gap: 2px;
}

.time-box {
    background: linear-gradient(180deg, #07090e 0%, #121520 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    width: 32px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-align: center;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.4);
    font-family: var(--font-bahnschrift);
    position: relative;
}

.time-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.6);
}

.time-colon {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 0 1px;
}

/* Mini Preview of Last 5 Winning Balls */
.wingo-recent-balls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wingo-recent-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.wingo-recent-items {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mini-ball {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Lock Overlay with Big Pulsating Countdown */
.wingo-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 18, 0.94);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 25;
    flex-direction: column;
    gap: 8px;
    animation: fadeIn 0.2s ease;
}

.lock-countdown-circle {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    border: 3px solid rgba(229, 45, 67, 0.85);
    background: radial-gradient(circle, rgba(229, 45, 67, 0.3) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseRing 1s infinite alternate;
}

.lock-countdown-num {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-bahnschrift);
    text-shadow: 0 0 14px rgba(229, 45, 67, 0.8);
}

.lock-countdown-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold-light);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

@keyframes pulseRing {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 45, 67, 0.4); }
    100% { transform: scale(1.05); box-shadow: 0 0 18px 4px rgba(229, 45, 67, 0.6); }
}

/* Prediction Board Container */
.wingo-bet-card {
    background: #181a24;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wingo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.wingo-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wingo-card-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Color Betting Buttons */
.color-bets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.color-btn {
    padding: 12px 6px;
    border-radius: var(--radius-md);
    border: none;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, filter 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    overflow: hidden;
}

.color-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.color-btn:active {
    transform: scale(0.96);
    filter: brightness(0.92);
}

.color-btn .odds-badge {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

.btn-bet-green {
    background: linear-gradient(135deg, #00d284 0%, #00995b 100%);
    box-shadow: 0 4px 14px rgba(0, 210, 132, 0.35);
}

.btn-bet-violet {
    background: linear-gradient(135deg, #b038cb 0%, #7b1fa2 100%);
    box-shadow: 0 4px 14px rgba(176, 56, 203, 0.35);
}

.btn-bet-red {
    background: linear-gradient(135deg, #ff4d64 0%, #d81b36 100%);
    box-shadow: 0 4px 14px rgba(255, 77, 100, 0.35);
}

/* Number 0-9 Buttons (2 rows of 5) */
.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.num-btn {
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    user-select: none;
    -webkit-user-select: none;
}

.num-btn .num-label {
    line-height: 1;
    font-family: var(--font-bahnschrift);
}

.num-btn .num-odds {
    font-size: 8px;
    opacity: 0.85;
    font-weight: 700;
    margin-top: 1px;
}

.num-btn:active {
    transform: scale(0.92);
}

.num-btn.green {
    background: radial-gradient(circle at 35% 35%, #22e697 0%, #00a86b 100%);
    box-shadow: 0 4px 12px rgba(0, 168, 107, 0.4);
}

.num-btn.red {
    background: radial-gradient(circle at 35% 35%, #ff5e74 0%, #d81b36 100%);
    box-shadow: 0 4px 12px rgba(216, 27, 54, 0.4);
}

.num-btn.violet-red {
    background: linear-gradient(135deg, #d81b36 50%, #8e24aa 50%);
    box-shadow: 0 4px 12px rgba(142, 36, 170, 0.4);
}

.num-btn.violet-green {
    background: linear-gradient(135deg, #00a86b 50%, #8e24aa 50%);
    box-shadow: 0 4px 12px rgba(0, 168, 107, 0.4);
}

/* Big / Small Choice (2 columns) */
.size-bets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.size-btn {
    padding: 13px 8px;
    border-radius: var(--radius-md);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, filter 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    overflow: hidden;
}

.size-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
}

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

.size-btn.big {
    background: linear-gradient(135deg, #f5a623 0%, #d48806 100%);
    color: #121212;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}

.size-btn.small {
    background: linear-gradient(135deg, #2979ff 0%, #1565c0 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(41, 121, 255, 0.35);
}

/* Multiplier Quick Chips */
.wingo-multiplier-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    padding: 2px 0 4px 0;
    scrollbar-width: none;
}

.wingo-multiplier-bar::-webkit-scrollbar {
    display: none;
}

.wingo-x-chip {
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-card-light);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.wingo-x-chip.active {
    background: var(--gold);
    color: #121212;
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}

.wingo-random-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Mobile Bottom-Sheet Bet Modal */
.bottom-sheet-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999 !important;
    display: none;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.bottom-sheet-content {
    width: 100%;
    max-width: var(--app-max-width, 440px);
    background: #181a24;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px 20px 0 0;
    padding: 16px 18px 24px 18px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7);
    animation: slideUpBottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 auto 12px auto;
}

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

.sheet-title-badge {
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.sheet-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-full);
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chip Selector in Modal */
.chip-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    scrollbar-width: none;
}

.chip-grid::-webkit-scrollbar {
    display: none;
}

.chip-btn {
    flex: 1;
    min-width: 58px;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-card-light);
    border: 1px solid var(--border-color);
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.chip-btn.active {
    background: var(--gold);
    color: #121212;
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.35);
}

/* Multiplier Stepper */
.stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #11131c;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    margin-bottom: 12px;
}

.stepper-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-card-light);
    border: 1px solid var(--border-color);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:active {
    background: var(--gold);
    color: #121212;
}

.stepper-val {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-bahnschrift);
}

.sheet-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    margin-bottom: 14px;
}

.sheet-total-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.sheet-total-val {
    font-size: 18px;
    font-weight: 900;
    color: var(--gold-light);
    font-family: var(--font-bahnschrift);
}

.sheet-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
}

.sheet-btn-cancel {
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-card-light);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
}

.sheet-btn-confirm {
    padding: 12px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #e52d43 0%, #b81729 100%);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(229, 45, 67, 0.45);
}

.sheet-btn-confirm:active {
    transform: scale(0.98);
}

/* Result Announcement Modal (Winning / Settled Draw) */
/* BDG Game Authentic Win / Loss Result Modal */
/* Result Announcement Modal (Winning / Settled Draw) */
/* BDG Game Authentic Win / Loss Result Modal */
.result-dialog-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.78) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.result-confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100000;
}

.bdg-result-wrapper {
    position: relative;
    z-index: 100001;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bdgPopIn 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bdgPopIn {
    0% { transform: scale(0.68) translateY(30px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.bdg-result-crest {
    width: 250px;
    height: 110px;
    margin-bottom: -56px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42));
}

.bdg-result-card {
    width: 100%;
    border-radius: 28px;
    padding: 62px 18px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: background 0.25s ease;
}

/* Win Card (Warm Coral/Peach Gradient matching Image 1) */
.bdg-result-card.is-win {
    background: linear-gradient(180deg, #ff7e65 0%, #ff624c 50%, #fa4735 100%);
    box-shadow: 0 16px 45px rgba(250, 71, 52, 0.5), 0 25px 65px rgba(0, 0, 0, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

/* Loss Card (Ice Blue/Silver Gradient matching Image 2) */
.bdg-result-card.is-loss {
    background: linear-gradient(180deg, #d8e8fe 0%, #bddbfa 45%, #9ec5f7 100%);
    box-shadow: 0 16px 45px rgba(130, 180, 245, 0.4), 0 25px 65px rgba(0, 0, 0, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}

.bdg-result-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bdg-result-card.is-win .bdg-result-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.bdg-result-card.is-loss .bdg-result-title {
    color: #486581;
}

.bdg-result-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
}

.bdg-result-card.is-win .bdg-result-label {
    color: rgba(255, 255, 255, 0.95);
}

.bdg-result-card.is-loss .bdg-result-label {
    color: #5b7a99;
}

.bdg-result-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bdg-result-pill {
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.2px;
}

.bdg-result-ball-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.bdg-receipt-dispenser {
    position: relative;
    margin: 0 2px 18px;
    text-align: center;
}

.bdg-dispenser-slit {
    height: 16px;
    border-radius: 20px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.bdg-result-card.is-win .bdg-dispenser-slit {
    background: #d73b28;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

.bdg-result-card.is-loss .bdg-dispenser-slit {
    background: #81a7cf;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.bdg-dispensed-receipt {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 15%, #ffffff 85%, #f1f3f5 100%);
    border-radius: 4px 4px 18px 18px;
    padding: 12px 14px 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24), inset 0 2px 4px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 2;
    margin-top: -8px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    transform: perspective(300px) rotateX(-4deg);
    transform-origin: top center;
}

.bdg-receipt-type {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 2px;
}

.bdg-result-card.is-win .bdg-receipt-type {
    color: #ff5341;
}

.bdg-result-card.is-loss .bdg-receipt-type {
    color: #8795a8;
    font-size: 26px;
    font-weight: 800;
    margin: 4px 0 10px;
}

.bdg-receipt-amount {
    font-size: 28px;
    font-weight: 900;
    color: #ff3b30;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin-bottom: 6px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.bdg-receipt-period {
    font-size: 11.5px;
    color: #8e94a5;
    font-weight: 600;
    line-height: 1.35;
}

.bdg-receipt-roundnum {
    font-size: 11.5px;
    color: #8e94a5;
    font-family: monospace;
    font-weight: 600;
}

.bdg-autoclose-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.bdg-result-card.is-win .bdg-autoclose-row {
    color: rgba(255, 255, 255, 0.95);
}

.bdg-result-card.is-loss .bdg-autoclose-row {
    color: #ffffff;
}

.bdg-check-icon {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bdg-floating-close-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px auto 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease;
}

.bdg-floating-close-btn:active {
    transform: scale(0.9);
}

/* Results & Records Table */
.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.results-table th {
    padding: 9px 4px;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    text-transform: uppercase;
}

.results-table td {
    padding: 10px 4px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-ball {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    color: #fff;
    font-family: var(--font-bahnschrift);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.badge-green { background: #00b977; }
.badge-red { background: #f83a52; }
.badge-violet { background: #9c27b0; }
.badge-mixed-red { background: linear-gradient(135deg, #f83a52 50%, #9c27b0 50%); }
.badge-mixed-green { background: linear-gradient(135deg, #00b977 50%, #9c27b0 50%); }
.badge-gold { background: linear-gradient(135deg, #f5a623 0%, #d48806 100%); color: #121212 !important; }
.badge-blue { background: #2979ff; }

.badge-pill-size {
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-pill-size.big {
    background: rgba(245, 166, 35, 0.18);
    color: var(--gold-light);
    border: 1px solid rgba(245, 166, 35, 0.35);
}

.badge-pill-size.small {
    background: rgba(41, 121, 255, 0.18);
    color: #82b1ff;
    border: 1px solid rgba(41, 121, 255, 0.35);
}

/* Color dot indicator */
.color-dot {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-full);
    display: inline-block;
}

/* Crash / Aviator Canvas Container */
.crash-canvas-wrap {
    width: 100%;
    height: 220px;
    background: #090a0f;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

#crash-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.crash-overlay-mult {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 44px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px var(--primary-glow);
    font-family: monospace;
}

.crash-overlay-mult.crashed {
    color: var(--color-red);
    text-shadow: 0 0 20px rgba(248, 58, 82, 0.6);
}

/* Slots UI */
.slots-machine {
    background: linear-gradient(180deg, #241c2c 0%, #151722 100%);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
    margin-bottom: 14px;
}

.slots-reels-wrap {
    display: flex;
    justify-content: space-around;
    background: #0b0c12;
    border-radius: var(--radius-md);
    padding: 14px 8px;
    border: 1px solid var(--border-light);
    margin-bottom: 14px;
}

.slot-reel {
    width: 72px;
    height: 90px;
    background: #171924;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
    transition: transform 0.1s ease;
}

.slots-spin-btn {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    padding: 14px;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 6px 20px rgba(255, 65, 108, 0.4);
}

/* ========================================================
   BDG-STYLE ULTRA-ACCURATE LOTTERY DESIGN (WinGo & TRX)
   ======================================================== */

/* 1. Header Bar */
.lottery-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #1b1e28;
    margin-bottom: 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.lottery-nav-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-decoration: none;
}
.lottery-brand-title {
    font-size: 19px;
    font-weight: 900;
    color: #f7d57a;
    letter-spacing: 1.2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    position: relative;
}
.lottery-brand-line {
    width: 85px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #f7d57a 50%, transparent 100%);
    margin-top: 3px;
}
.lottery-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 2. Top Wallet Card */
.lottery-wallet-card {
    background: linear-gradient(135deg, #2c3240 0%, #1e222d 100%);
    border-radius: 14px;
    padding: 16px 14px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.lottery-wallet-balance-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}
.lottery-wallet-amount {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    font-family: var(--font-bahnschrift, -apple-system, sans-serif);
    letter-spacing: -0.3px;
}
.lottery-wallet-refresh {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: transform 0.2s ease;
}
.lottery-wallet-refresh:active {
    transform: rotate(180deg);
}
.lottery-wallet-label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 700;
    margin-bottom: 14px;
}
.lottery-wallet-icon {
    font-size: 15px;
}
.lottery-wallet-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.btn-lottery-withdraw {
    background: linear-gradient(180deg, #ff4d4f 0%, #d92438 100%);
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(217, 36, 56, 0.4);
    transition: transform 0.12s;
}
.btn-lottery-withdraw:active {
    transform: scale(0.96);
}
.btn-lottery-deposit {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
    transition: transform 0.12s;
}
.btn-lottery-deposit:active {
    transform: scale(0.96);
}

/* 3. Audio & Detail Pill Bar */
.lottery-sound-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}
.lottery-speaker-btn {
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.lottery-detail-btn {
    background: linear-gradient(180deg, #f7d57a 0%, #e5b045 100%);
    color: #4a2c00;
    border: none;
    border-radius: 18px;
    padding: 4px 14px;
    font-size: 11.5px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 4. Timer Room Tabs (Clock Tabs) */
.lottery-timer-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}
.lottery-timer-tab {
    background: #2b303d;
    border-radius: 12px;
    padding: 10px 4px 8px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.tab-stopwatch-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, #4a5160 0%, #20242d 100%);
    border: 2px solid #5a6273;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #cbd5e1;
    font-size: 15px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.lottery-timer-tab .tab-timer-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #94a3b8;
    line-height: 1.25;
}
.lottery-timer-tab.active {
    background: linear-gradient(180deg, #f7d479 0%, #e8b244 100%);
    border-color: #ffd77a;
    box-shadow: 0 4px 12px rgba(232, 178, 68, 0.4);
    transform: translateY(-1px);
}
.lottery-timer-tab.active .tab-stopwatch-icon {
    background: radial-gradient(circle, #ffea9f 0%, #c48b1d 100%);
    border-color: #ffffff;
    color: #6b4000;
    box-shadow: 0 0 8px rgba(255, 234, 159, 0.6);
}
.lottery-timer-tab.active .tab-timer-title {
    color: #5c3500;
}

/* 5. Golden Parchment Ticket Card */
.lottery-ticket-card {
    background: linear-gradient(180deg, #e4aa4e 0%, #d89b3d 100%);
    border-radius: 14px;
    padding: 12px 14px 16px;
    position: relative;
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.ticket-punch-hole {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #141722;
    z-index: 5;
}
.ticket-punch-left {
    left: -10px;
}
.ticket-punch-right {
    right: -10px;
}
.ticket-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.ticket-period-badge {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #523100;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
}
.ticket-rule-btn {
    background: rgba(20, 23, 34, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ticket-query-btn {
    background: rgba(20, 23, 34, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffd680;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ticket-mid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}
.ticket-period-val {
    font-size: 16.5px;
    font-weight: 900;
    color: #4a2a00;
    letter-spacing: 0.3px;
    font-family: var(--font-bahnschrift, monospace);
}
.ticket-draw-time-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ticket-draw-label {
    font-size: 11px;
    font-weight: 800;
    color: #593300;
    margin-right: 2px;
}
.ticket-timer-boxes {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ticket-timer-box {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #3b2100;
    font-size: 16px;
    font-weight: 900;
    width: 22px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-bahnschrift, monospace);
}
.ticket-timer-colon {
    font-size: 16px;
    font-weight: 900;
    color: #4a2a00;
    margin: 0 1px;
}
/* 5. Golden Parchment Ticket Card with Scalloped Edge */
.lottery-ticket-card {
    background: linear-gradient(180deg, #ecc56d 0%, #dca243 100%);
    border-radius: 12px;
    padding: 10px 12px 16px;
    position: relative;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.ticket-punch-hole {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #141722;
    z-index: 5;
}
.ticket-punch-left {
    left: -9px;
}
.ticket-punch-right {
    right: -9px;
}
/* Scalloped teeth cutout border along ticket bottom */
.ticket-scallop-border {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 9px;
    background: radial-gradient(circle at 8px 9px, #141722 4.5px, transparent 5px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    z-index: 6;
    pointer-events: none;
}
.ticket-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}
.ticket-period-badge {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #4a2900;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}
.ticket-rule-btn {
    background: rgba(20, 23, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ticket-query-btn {
    background: rgba(20, 23, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffd680;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ticket-mid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}
.ticket-period-val {
    font-size: 15px;
    font-weight: 900;
    color: #422500;
    letter-spacing: 0.2px;
    font-family: var(--font-bahnschrift, monospace);
}
.ticket-draw-time-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ticket-draw-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #4a2900;
    margin-right: 2px;
}
.ticket-timer-boxes {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ticket-timer-box {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #3b2100;
    font-size: 15px;
    font-weight: 900;
    width: 20px;
    height: 25px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-bahnschrift, monospace);
}
.ticket-timer-colon {
    font-size: 15px;
    font-weight: 900;
    color: #4a2a00;
    margin: 0 1px;
}
.ticket-dash-divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.45);
    margin: 4px 0 8px 0;
    position: relative;
    z-index: 2;
}
.ticket-balls-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 2px;
}

/* 3D Authentic BDG Lottery Balls (Ticket Balls) */
.ticket-glossy-ball {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.4);
    background: 
        radial-gradient(circle at 50% 0%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 0% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 100% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 35% 30%, #ff6b7e 0%, #e11d48 65%, #9f1239 100%);
    overflow: hidden;
    user-select: none;
}
.ticket-glossy-ball::after {
    content: '';
    position: absolute;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 35%, #ffffff 0%, #f8fafc 75%, #cbd5e1 100%);
    box-shadow: inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.ticket-glossy-ball-text {
    position: relative;
    z-index: 2;
    font-size: 19px;
    font-weight: 900;
    color: #e11d48;
    line-height: 1;
    font-family: var(--font-bahnschrift, Arial, sans-serif);
}
.ticket-glossy-ball.ball-last-gold .ticket-glossy-ball-text,
.ticket-glossy-ball:last-child .ticket-glossy-ball-text {
    color: #f59e0b;
}

/* Unified Betting Area Card (Compact) */
.lottery-betting-container {
    background: #23262f;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    width: 100%;
    box-sizing: border-box;
}

/* 6. Color Betting Buttons (Green / Violet / Red) */
.lottery-color-bets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 7px;
}
.btn-color-pill {
    padding: 7px 4px;
    border-radius: 6px;
    border: none;
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.12s, filter 0.15s;
    user-select: none;
}
.btn-color-pill:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}
.btn-pill-green {
    background: #00b96b;
}
.btn-pill-violet {
    background: #9254de;
}
.btn-pill-red {
    background: #f83a52;
}

/* 7. Number Balls Grid (0 to 9) in Dark Inset Container */
.lottery-number-card {
    background: #18191f;
    border-radius: 8px;
    padding: 8px 6px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 7px;
}
.lottery-number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px 4px;
    justify-items: center;
}
.lottery-ball-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.35);
    transition: transform 0.12s ease;
    user-select: none;
    overflow: hidden;
}
.lottery-ball-btn:active {
    transform: scale(0.92);
}
.lottery-ball-btn::after {
    content: '';
    position: absolute;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 35%, #ffffff 0%, #f8fafc 75%, #cbd5e1 100%);
    box-shadow: inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.lottery-ball-num {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 900;
    font-family: var(--font-bahnschrift, Arial, sans-serif);
    line-height: 1;
}

/* 3D Bingo Ball Colors */
.ball-red {
    background: 
        radial-gradient(circle at 50% 0%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 0% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 100% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 35% 30%, #ff6b7e 0%, #e11d48 65%, #9f1239 100%);
}
.ball-red .lottery-ball-num {
    color: #e11d48;
}

.ball-green {
    background: 
        radial-gradient(circle at 50% 0%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 0% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 100% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 35% 30%, #34d399 0%, #059669 65%, #064e3b 100%);
}
.ball-green .lottery-ball-num {
    color: #059669;
}

.ball-dual-red-violet {
    background: 
        radial-gradient(circle at 50% 0%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 0% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 100% 50%, #ffffff 15%, transparent 16%),
        linear-gradient(135deg, #e11d48 50%, #9333ea 50%);
}
.ball-dual-red-violet .lottery-ball-num {
    color: #9333ea;
}

.ball-dual-green-violet {
    background: 
        radial-gradient(circle at 50% 0%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 0% 50%, #ffffff 15%, transparent 16%),
        radial-gradient(circle at 100% 50%, #ffffff 15%, transparent 16%),
        linear-gradient(135deg, #059669 50%, #9333ea 50%);
}
.ball-dual-green-violet .lottery-ball-num {
    color: #9333ea;
}

/* 8. Multipliers & Random Bar */
.lottery-multiplier-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    overflow-x: auto;
    padding-bottom: 1px;
}
.btn-random-pick {
    background: #1f2127;
    border: 1.5px solid #ef4444;
    color: #ef4444;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.btn-random-pick:active {
    background: #ef4444;
    color: #ffffff;
}
.lottery-x-chip {
    background: #1f2127;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.lottery-x-chip.active {
    background: #e5a93b;
    border-color: #ffd27a;
    color: #422500;
    box-shadow: 0 2px 6px rgba(229, 169, 59, 0.35);
}

/* 9. Big / Small Betting Buttons */
.lottery-size-bets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 2px;
}
.btn-size-pill {
    padding: 8px 6px;
    border-radius: 18px;
    border: none;
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s;
    user-select: none;
}
.btn-size-pill:active {
    transform: scale(0.96);
}
.btn-size-big {
    background: linear-gradient(180deg, #f5a623 0%, #e08709 100%);
}
.btn-size-small {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 10. Record Navigation Tabs */
.lottery-record-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
}
.lottery-tab-pill {
    background: #2b303d;
    border: none;
    border-radius: 8px;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}
.lottery-tab-pill.active {
    background: linear-gradient(180deg, #f8d57e 0%, #e8b348 100%);
    color: #593300;
    box-shadow: 0 3px 10px rgba(232, 179, 72, 0.35);
}

/* 11. Trend Chart Section & SVG Polyline (Image 1 BDG Reference) */
.trend-chart-card {
    background: #1e2025;
    border-radius: 8px;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
}
.trend-stats-header {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    padding-left: 2px;
}
.trend-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 11px;
}
.trend-stats-table th, .trend-stats-table td {
    padding: 8px 4px;
    text-align: center;
    color: #8c96a4;
    font-weight: 500;
}
.trend-stats-table td:first-child {
    text-align: left;
    color: #cbd5e1;
    font-weight: 600;
    padding-left: 8px;
    white-space: nowrap;
}
.trend-rows-container {
    position: relative;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 4px;
}
.trend-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}
.trend-row-item {
    display: flex;
    align-items: center;
    padding: 7px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.trend-period-col {
    font-size: 11.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    color: #a0aec0;
    width: 126px;
    flex-shrink: 0;
    letter-spacing: -0.2px;
}
.trend-slots-grid {
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 0 4px;
    align-items: center;
}
.trend-num-slot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #7b8594;
    font-weight: 600;
    background: transparent;
}
.trend-num-slot.is-winner {
    color: #ffffff !important;
    font-weight: 800;
    border: none;
    box-shadow: none;
    z-index: 12;
}

/* Exact Image 1 Solid Clean Badge Colors for Winner Balls (No 3D polka dots) */
.trend-ball-red {
    background: #f83a52 !important;
    color: #ffffff !important;
}
.trend-ball-green {
    background: #00b96b !important;
    color: #ffffff !important;
}
.trend-ball-red-violet {
    background: linear-gradient(135deg, #f83a52 50%, #9254de 50%) !important;
    color: #ffffff !important;
}
.trend-ball-green-violet {
    background: linear-gradient(135deg, #00b96b 50%, #9254de 50%) !important;
    color: #ffffff !important;
}

.trend-size-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    margin-left: 6px;
    flex-shrink: 0;
}
.trend-size-big {
    background: #f59e0b;
}
.trend-size-small {
    background: #3b82f6;
}

/* 12. Game History Table (TRX & WinGo) */
/* Each record panel needs its own air at the base, below the last row */
.lottery-panel {
    margin-bottom: 14px;
}
.lottery-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.lottery-history-table th {
    background: #252b38;
    color: #94a3b8;
    font-weight: 800;
    padding: 12px 8px;
    text-align: center;
}
.lottery-history-table td {
    padding: 14px 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}
.badge-block-question {
    display: inline-flex;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ff4d64;
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    vertical-align: middle;
}

/* 13. Pagination Bar (Exact Image 1 match: Left < button, 1/50, Right > golden button) */
.lottery-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 10px;
    background: #18191f;
    border-radius: 8px;
    margin-top: 10px;
}
.btn-pager {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #333742;
    border: none;
    color: #8c96a4;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.btn-pager.active-next {
    background: #e5a93b;
    color: #3f2200;
}
.btn-pager:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#trend-page-indicator, #history-page-indicator {
    color: #8c96a4;
    font-size: 13px;
    font-weight: 600;
    min-width: 45px;
    text-align: center;
}