:root {
    --rs-brand: #23ba66;
    --ink: #0b1020;
    --muted: #6b7280;
    --surface: #ffffff;
    --line: #e5e7eb;
    --radius-card: 12px;
    --radius-cell: 10px;
    --shadow: 0 10px 25px rgba(0,0,0,0.08);
    
    /* Theme colors - defaults */
    --theme-bg: #f5f5f5;
    --theme-bg-dark: #1a1a1a;
    --theme-surface: #ffffff;
    --theme-text: #0b1020;
    --theme-text-muted: #6b7280;
    --theme-primary: var(--rs-brand, #23ba66);
    --theme-primary-rgb: 35, 186, 102;
    --theme-control-bg: #ffffff;
    --theme-control-border: #e0e0e0;
    
    /* Default gradient (Game 1: Forest - Green: teal → green → emerald) */
    --gradient-start: #11998e;
    --gradient-mid: #23ba66;
    --gradient-end: #38ef7d;
    --gradient-error: rgba(124, 124, 124, 0.4);
}   

/* Dark mode theme */
[data-theme="dark"] {
    --theme-bg: #0f0f14;
    --theme-bg-dark: #000000;
    --theme-surface: #1a1a24;
    --theme-text: #eaeaea;
    --theme-text-muted: #a0a0a0;
    --theme-control-bg: #1a1a24;
    --theme-control-border: #2d3748;
    --line: #2d3748;
    --ink: #eaeaea;
    --surface: #1a1a24;
}

/* ===== BRAND THEMES ===== */

/* Neutral theme - for session schedule page (no colored gradient) */
[data-brand="neutral"] {
    --rs-brand: #5170ff;
    --theme-primary: #5170ff;
    --theme-primary-rgb: 81, 112, 255;
    --gradient-start: #f5f5f5;
    --gradient-mid: #ffffff;
    --gradient-end: #f5f5f5;
}

/* Game 1: Forest - Green gradient (teal → green → emerald) */
[data-brand="forest"] {
    --rs-brand: #23ba66;
    --theme-primary: #23ba66;
    --theme-primary-rgb: 35, 186, 102;
    --gradient-start: #11998e;
    --gradient-mid: #23ba66;
    --gradient-end: #38ef7d;
}

/* Game 2: Azure - Blue gradient (indigo → blue → sky) */
[data-brand="azure"] {
    --rs-brand: #0070ff;
    --theme-primary: #0070ff;
    --theme-primary-rgb: 0, 112, 255;
    --gradient-start: #667eea;
    --gradient-mid: #0070ff;
    --gradient-end: #64b5f6;
}

/* Game 3: Rose - Pink gradient (magenta → pink → coral) */
[data-brand="rose"] {
    --rs-brand: #d650b1;
    --theme-primary: #d650b1;
    --theme-primary-rgb: 214, 80, 177;
    --gradient-start: #e91e63;
    --gradient-mid: #d650b1;
    --gradient-end: #ff6b9d;
}

/* Game 4: Amber - Orange gradient (pink → orange → gold) */
[data-brand="amber"] {
    --rs-brand: #eb7a3a;
    --theme-primary: #eb7a3a;
    --theme-primary-rgb: 235, 122, 58;
    --gradient-start: #f093fb;
    --gradient-mid: #eb7a3a;
    --gradient-end: #fbbf24;
}

/* Game 5: Violet - Purple gradient (blue → purple → pink) */
[data-brand="violet"] {
    --rs-brand: #bd38ff;
    --theme-primary: #bd38ff;
    --theme-primary-rgb: 189, 56, 255;
    --gradient-start: #667eea;
    --gradient-mid: #bd38ff;
    --gradient-end: #f093fb;
}

/* Apply gradient background to html element (works with themes) */
html {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
    background-attachment: fixed;
    min-height: 100%;
}

html[data-theme="dark"] {
    background: linear-gradient(135deg, 
        var(--dark-gradient-start, #0a0a12) 0%, 
        var(--dark-gradient-mid, #0f0f18) 50%, 
        var(--dark-gradient-end, #0a0a12) 100%);
    background-attachment: fixed;
}

/* Dark gradient theme colors */
html[data-theme="dark"][data-brand="neutral"] { --dark-gradient-start: #0a0a12; --dark-gradient-mid: #0f0f18; --dark-gradient-end: #0a0a12; }
html[data-theme="dark"][data-brand="forest"] { --dark-gradient-start: #0d2018; --dark-gradient-mid: #102a1f; --dark-gradient-end: #143526; }
html[data-theme="dark"][data-brand="azure"] { --dark-gradient-start: #0d1525; --dark-gradient-mid: #101c30; --dark-gradient-end: #14243a; }
html[data-theme="dark"][data-brand="rose"] { --dark-gradient-start: #200d18; --dark-gradient-mid: #2a1020; --dark-gradient-end: #351428; }
html[data-theme="dark"][data-brand="amber"] { --dark-gradient-start: #201810; --dark-gradient-mid: #2a1f14; --dark-gradient-end: #352818; }
html[data-theme="dark"][data-brand="violet"] { --dark-gradient-start: #180d25; --dark-gradient-mid: #20102a; --dark-gradient-end: #281435; }

body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body::-webkit-scrollbar-thumb {
    background: #737373;
}

.kick-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0;
    z-index: 100;
    height: 40vh;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    gap: 12px;
}

.livestream-container {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 70%; */
}

.livestream-embed {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.livestream-embed iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hero {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    /* margin: 8px 0 0 0; */
    max-width: 70%;
    margin: auto;
}

.tabs {
    width: 250px;
    flex-shrink: 0;
    padding: 0px /*10px*/;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: fit-content;
    align-self: center;
    margin: auto !important;
    padding: 8px;
    /* border: 1px solid var(--line); */
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}


.tabs button, .game-selection select, .clear-cards button, .dl-cards button, .refresh-cards button, .buy-cards button, #yesBtn, #noBtn, #realMoneyBtn, #funBtn, .options-dropdown {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    height:36px;
    font-family: 'Poppins', sans-serif;
}

.game-selection select {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
}

.balance-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-toggle {
    display: flex; 
    align-items: center;
    /* justify-content: space-evenly; */
    width: 100%;
}

.tab-btn-tgl {
    border-radius: 10px !important;
    min-width: 100% !important;
    padding: none;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.3);
    border: none; 
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 2px;
}

.game-selection {
    margin-right: 0 !important;
}

.tabs button,#yesBtn, #noBtn, #realMoneyBtn, #funBtn {
    background-color: var(--rs-brand);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 50px;
}

#yesBtn, #noBtn, #realMoneyBtn, #funBtn {
    margin-top:5px;
    margin-bottom:5px;
}


.tabs button:hover {
    background-color: #b60515; /*#4155d1;*/
}

.clear-cards button, .dl-cards button, .refresh-cards button, .buy-cards button {
    background-color: #f0f0f0;
}

.clear-cards button:hover, .dl-cards button:hover, .refresh-cards button:hover, .buy-cards button:hover {
    /* background-color: var(--brand); */
    /* background-color: #ffd1d5; */
    color: #ffffff;
}

.dl-cards button:hover, .refresh-cards button:hover, .buy-cards button:hover {
    background-color: var(--brand);
    /* background-color: #ffd1d5; */
    color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.dl-cards button:hover, .refresh-cards button:hover, .buy-cards button:hover {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.play_button.inactive, .chat_button.inactive, .schedule_button.inactive {
    background-color: #787878;
    color: #d8d8d8;
}

.container, .tab-container, .play-container, .chat-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3px 0px 3px;
    position: relative;
    flex: 1;
    height: 100%;
}

.tab-container {
    max-width: 70%;
    height: calc(50vh - 30px) !important;
}

.top-bar {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* spacing between top bar and carousel */
}

.game-selection {
    margin-right: auto;
}

.currency-display {
    padding: 10px;
    margin-right: auto;

}
.ccy_gc, .ccy_sc {
    text-align: center;
    margin-bottom: 0;
}

.clear-cards, .dl-cards, .refresh-cards, .buy-cards {
    /* margin-left: auto; */
    margin-left:1vh;
}

.hidden {
    display:none;
}

.carousel-wrapper, .chat-wrapper {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    touch-action: manipulation;
}

.carousel-outer-wrapper {
    height: calc(100% - 50px) !important;
    /* Enable horizontal scroll by default */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    touch-action: pan-x pan-y pinch-zoom;
    will-change: scroll-position;
}

/* iOS-specific fixes for scrolling */
@supports (-webkit-touch-callout: none) {
    .carousel-outer-wrapper {
        /* iOS needs explicit height for scrolling to work */
        -webkit-overflow-scrolling: touch;
    }
    
    /* When vertical scrolling is needed (grid layout on mobile) */
    .carousel-outer-wrapper.vertical-scroll {
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-y pinch-zoom;
    }
}

/* Class for when carousel has scrollable cards */
.carousel-outer-wrapper.scrollable {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
}

.carousel-wrapper {
    display: flex;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    gap: 12px;
}

/* Static wrapper for non-scrollable content */
.carousel-wrapper.static {
    display: block;
    min-width: 100%;
}

.carousel-wrapper-msg {
    display: flex;
    min-width: 95%; 
}
.carousel-page, .carousel-chat-page {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    box-sizing: border-box;
    height: 100%;
}

.carousel-page {
    flex: 0 0 auto;
    width: auto;
    min-width: fit-content;
    padding: 8px; 
    box-sizing: border-box;
    height: auto;
    scroll-snap-align: start;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.35s ease; 
    will-change: transform; 
}

/* Specific class for loading/error states */
.carousel-page.loading-container {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
    overflow-y: auto;
    text-align: center;
    height: 95%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and legacy Edge */
}

.carousel-page.loading-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera, modern Edge */
}

.carousel-chat-page {
    padding: 0 !important;
}

.carousel-chat-embed {
    width: 100% !important;
    max-width: none !important;
    height: 95% !important;
    border-radius: 0 !important; 
    box-shadow: none !important; 
    margin: 0 !important;
    padding: 0 !important;
}

.carousel-chat-embed iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px !important; 
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container::-webkit-scrollbar {
    width: 6px;
}

.container::-webkit-scrollbar-thumb {
    background: #737373;
    border-radius: 3px;
}

.container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 0 auto;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.bingo-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 20px;
}

.bingo-card {
    display: inline-block;
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    overflow: visible;
}

[data-theme="dark"] .bingo-card {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.bingo-header-wrapper {
    background: var(--rs-brand, var(--game-color));
    color: white;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

.game-header {
    padding: 6px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.letters-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    align-items: center;
    padding: 6px;
    font-size: 20px;
    font-weight: 700;
}

.bingo-table {
    border-collapse: separate;
    border-spacing: 4px;
    margin-top: 0;
    background-color: #f8f8f8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.bingo-table td {
    width: 20%;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    padding: 6px 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--line);
    border-radius: var(--radius-cell);
    background: linear-gradient(180deg, #ffffff, #fafbff);
    color: #2d3748;
}

[data-theme="dark"] .bingo-table td {
    background: linear-gradient(180deg, var(--surface), var(--theme-bg));
    border-color: var(--line);
    color: var(--ink);
}

[data-theme="dark"] .bingo-table {
    background-color: var(--surface);
}

.bingo-table td:hover {
    background-color: #e9ecef;
    transform: scale(1.02);
}

/* Marked cells OUTSIDE the pattern (uses brand color, faded) */
.bingo-table td.marked.pattern-highlight {
    background: var(--rs-brand, var(--game-color)) !important;
    opacity: 35% !important;
    color: #fff !important;
    border-color: var(--rs-brand, var(--game-color)) !important;
    font-weight: 700;
}

/* Marked cells IN the pattern (full branded color) */
.bingo-table td.marked {
    background: var(--rs-brand, var(--game-color)) !important;
    color: #fff !important;
    border-color: var(--rs-brand, var(--game-color)) !important;
    font-weight: 700;
}

/* Unmarked cells OUTSIDE the pattern - Light Mode */
.pattern-highlight {
    background: #e9ebee !important;
    color: #9ca3ad !important;
    border-color: #d5d8dc !important;
}

/* Unmarked cells OUTSIDE the pattern - Dark Mode */
[data-theme="dark"] .pattern-highlight {
    background: #2a2d35 !important;
    color: #5a6070 !important;
    border-color: #3a3e48 !important;
}

/* Marked cells OUTSIDE the pattern - Dark Mode (clearly visible but muted) */
[data-theme="dark"] .bingo-table td.marked.pattern-highlight {
    background: color-mix(in srgb, var(--rs-brand, var(--game-color)) 70%, #1e1e26) !important;
    color: #fff !important;
    border: 2px solid var(--rs-brand, var(--game-color)) !important;
    font-weight: 700;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.bingo-table td.free {
    background-color: var(--rs-brand, var(--game-color)) !important;
    border: 2px solid var(--rs-brand, var(--game-color)) !important;
    color: white !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: default;
}

.free-space-img {
    width: 100%;
    height: 100%;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: 4px;
}

/* Rose & Violet themes: add white background behind free space image for visibility */
[data-brand="rose"] .bingo-table td.free,
[data-brand="violet"] .bingo-table td.free {
    background: radial-gradient(circle, rgba(255,255,255,0.95) 60%, var(--rs-brand) 60%) !important;
}

[data-brand="rose"][data-theme="dark"] .bingo-table td.free,
[data-brand="violet"][data-theme="dark"] .bingo-table td.free {
    background: radial-gradient(circle, rgba(255,255,255,0.9) 60%, var(--theme-primary) 60%) !important;
}

.uuid {
    margin: 0;
    padding: 0 6px 2px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-weight: 400;
}

.error {
    background-color: var(--gradient-error);
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    width: 70%;
    box-shadow: 1px 1px 4px var(--shadow);
}

.error-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px; 
}

.error-image {
    max-height: 160px;
    max-width: 160px;
    flex-shrink: 0;
    box-shadow: 0 0 15px 15px white inset;
    border-radius: 8px;
}

.error-support-link {
    text-decoration: none;
    font-size: 10px;
    text-align: center;
}

.error-title {
    color: var(--theme-bg-dark);
    font-size: 16px;
    margin: 0;
    text-align: center;
}


.error-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    font-size: 14px;
    text-align: center;
}

.error-message {
    color: #000000;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

.error-code {
    color: #000000;
    font-size: 10px;
    margin: 0;
    text-align: center;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--muted);
    font-style: italic;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

footer {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: none;
    transition: all 0.3s ease;
    max-height: 3vh;
    position: fixed;
    z-index: 999;
  }

footer .legal {
    padding: None;
    font-size: 8px;
    text-align: center;
    color: #666;
}

footer .legal p {
    color: #fff;
    margin: 0;
}

footer .legal b {
    color: #fff;
}

/* Dark mode footer */
[data-theme="dark"] footer {
    background: linear-gradient(180deg, rgba(60, 60, 75, 0.98) 0%, rgba(40, 40, 55, 0.98) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] footer .legal,
[data-theme="dark"] footer .legal p {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] footer .legal b {
    color: rgba(255, 255, 255, 0.9);
}

/* Navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 32px;
    background-color: #ffffff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-bottom:5 /*30px*/;
}
.btn-refer {
    padding: 8px 16px;
    background: var(--rs-brand);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.btn-refer:hover {
    background: #b60515;
    text-decoration: none;
}
.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.logo img {
    height: auto;
}

.nav-actions {
    display: flex;
    gap: 12px;
}

.nav-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-login {
    background: transparent;
    color: #007BFF;
}

.btn-play {
    background: #007BFF;
    color: white;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
}  

#logo {
    height: 40px;
}  

.ccy_gc, .ccy_sc {
    height:19px;
    vertical-align: middle;
    margin-top: -3px;
}
.ccy_gc_small, .ccy_sc_small {
    height:14px !important;
    vertical-align: middle;
    margin-top: -2px;
}
.optionsBlock {
    position: relative;
}

.options-button {
    margin-left: 3px !important;
    /* background-color: var(--brand);
    color: white;
    border: none; */
    border-radius: 50px;
    /* padding: 8px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .options-button:hover {
    background-color: #b60515;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.options-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} */

.options-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 6px;
    min-width: 160px;
    z-index: 1001;
    animation: slideDown 0.2s ease;
    border: 1px solid var(--line);
    height: fit-content;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: none;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.dropdown-option:last-child {
    margin-bottom: 0;
}

.dropdown-option:hover {
    background: linear-gradient(180deg, #fafbff, #f5f5f5);
    color: var(--brand);
    transform: translateX(2px);
}

.dropdown-option.enabled {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    font-weight: 600;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dropdown-option.enabled::before {
    content: "✓ ";
    margin-right: 4px;
    font-weight: 700;
}

.dropdown-option.enabled:hover {
    background: linear-gradient(135deg, #c3e6cb 0%, #b2dfc0 100%);
    transform: translateX(2px);
}

.dropdown-option.disabled {
    cursor: not-allowed;
    background-color: #e0e0e0;
    color: #999;
    opacity: 0.6;
}

.dropdown-option.disabled:hover {
    background: #e0e0e0;
    color: #999;
    transform: none;
}

.letters-header span {
  color: white; /* default color */
  transition: color 0.3s, text-shadow 0.3s;
}

.letters-header.active span {
  color: var(--bingo-color);
  text-shadow: 0 0 1px white,0 0 2px white,0 0 3px white,0 0 5px white,0 0 10px white,0 0 20px white;/*var(--bingo-color);*/
  transform: scale(1.1);
  animation: bounce 2s ease-in-out infinite;
}

.bingo-button { /* container button for the <span>s */ 
    background-color: transparent;
    min-width: 100%;
    align-items: flex-start;
    padding: 0;
    border: 0;
    cursor: pointer;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(4px);
  }
}
/* Base pill */
.tg {
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 20;
}

.tg-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 12px;
    pointer-events: none;
    color: white;
    background: gray;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    position: relative;
    z-index: 1;    
}

/* Colors on the INNER pill */
/* .tg-4plus .tg-inner { background: #4a90e2; } */
.tg-3     .tg-inner { background: #ffe100; color: #000; }
.tg-2     .tg-inner { background: #ff8c00; }
.tg-1     .tg-inner { background: #d30329; color:#fff; }

/* Flame on wrapper, behind inner */
.tg.flame::after {
    content: "";
    position: absolute;
    top: -16px;
    left: -8px;
    width: 160%;
    height: 160%;
    z-index: 0;    /* below tg-inner’s z-index:1 */

    background:
        radial-gradient(circle at 50% 80%, #ff4500 0%, rgba(255,69,0,0.0) 60%),
        radial-gradient(circle at 50% 100%, #ffa500 0%, rgba(255,165,0,0.0) 70%);
    filter: blur(6px);

    animation: flameFlicker 0.18s infinite alternate ease-in-out;
}

@keyframes flameFlicker {
    from { transform: scale(1); opacity: 0.85; }
    to   { transform: scale(1.1); opacity: 1; }
}

/* Visual styling for claimed bingo cards */
.bingo-card.bingo-claimed {
    opacity: 0.5;
    pointer-events: none; /* Prevents clicking on the card */
    position: relative;
}

.bingo-card.bingo-claimed::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;  
    height: 150px; 
    background-image: url('https://rpn-app-assets-public.s3.us-east-1.amazonaws.com/rubysweepsmvp/logos/logo_dark.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    opacity: 0.5; /* Make logo slightly transparent */
}

.bingo-card.bingo-claimed .bingo-table td {
    background-color: #cccccc !important;
    color: #666666 !important;
}

.bingo-card.bingo-claimed .letters-header {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ─── Win Overlay (gold claim button) ─── */
.overlay-win,
.overlay-success {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.overlay-win {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
}

.bingo-card.is-win .overlay-win {
    display: flex;
}

.gold-button {
    width: 170px;
    height: 170px;
    background: linear-gradient(145deg, #f5b731, #e09b1a);
    border: 5px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: goldPulse 1.2s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 40px rgba(245, 183, 49, 0.35);
    transition: transform 0.15s;
    gap: 2px;
    padding: 0;
}

.gold-button:hover {
    transform: scale(1.06);
}

.gold-button:active {
    transform: scale(0.96);
}

.gold-button-text {
    font-size: 28px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
    line-height: 1;
}

.gold-button-sub {
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 1.5px;
    line-height: 1;
}

@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 40px rgba(245, 183, 49, 0.35);
    }
    50% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 60px rgba(245, 183, 49, 0.55);
        transform: scale(1.04);
    }
}

/* ─── Success Overlay (winner celebration) ─── */
.overlay-success {
    background: linear-gradient(160deg, #2b44ff, #1a32e0);
    flex-direction: column;
}

.bingo-card.is-claimed .overlay-success {
    display: flex;
}

.success-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
    padding: 20px 16px;
    text-align: center;
}

.success-wrap .ruby-logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.waving-winner {
    font-size: 32px;
    font-weight: 900;
    color: white;
    letter-spacing: 3px;
    margin: 4px 0 0 0;
    display: flex;
    gap: 2px;
}

.waving-winner span {
    display: inline-block;
    animation: winnerWave 0.6s ease-in-out infinite alternate;
}

@keyframes winnerWave {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

.claimed-status {
    font-size: 14px;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
    margin: 2px 0 12px 0;
    opacity: 0.9;
}

.view-pattern-btn {
    background: white;
    color: #1a32e0;
    border: 2px solid white;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.view-pattern-btn:hover {
    background: transparent;
    color: white;
}

/* Confetti particles */
.rain-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.confetti-p {
    position: absolute;
    top: -12px;
    border-radius: 3px;
    animation: confettiFall linear forwards;
    opacity: 0.9;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}
.spinner-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SPINNER */
.loader {
  border: 4px solid var(--theme-control-border, #f3f3f3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite, colorcycle 4s linear infinite;
  border-top: 4px solid #3498db; /* fallback */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* colour cycle for the spinner. Uses the colours of the first 6 games in bingo. */
@keyframes colorcycle {
  0%   { border-top-color: #00BF63; } 
  20%  { border-top-color: #5170FF; } 
  40%  { border-top-color: #D40B99; }  
  60%  { border-top-color: #FF914D; } 
  80%  { border-top-color: #9733C9; }  
  100% { border-top-color: #0B3C5D; }  
}

/* Class to show the spinner */
.show-spinner {
  display: flex;
}


/* ─── Responsive overrides for overlays ─── */
@media (max-width: 600px) {
  .error-content {
    flex-direction: column; /* Stacks content vertically */
    text-align: center;      /* Centers text for better mobile aesthetics */
    width: 100%;
  }
  .error-image {
    max-width: 80%;         /* Ensures the cat doesn't bleed off-edge */
    height: auto;
  }
  .error {
    width: 100%;
  }
} 

@media (max-width: 768px) {
    .gold-button {
        width: 140px;
        height: 140px;
    }
    .gold-button-text {
        font-size: 22px;
    }
    .gold-button-sub {
        font-size: 10px;
    }
    .success-wrap .ruby-logo {
        width: 90px;
    }
    .waving-winner {
        font-size: 26px;
    }
    .claimed-status {
        font-size: 12px;
    }
    .view-pattern-btn {
        font-size: 11px;
        padding: 8px 16px;
    }
}

/* mobile */
@media (max-width: 768px) {
    .navbar {
        max-height: 5vh;
        padding: 6px 16px; /* Reduced horizontal padding */
    }

    .hero {
        max-width:100%;
    }

    #logo {
        height: 20px;
    }

    .nav-actions {
        display: flex;
        gap: 6px;
    }

    .nav-actions button {
        padding: 0;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 10px;
    }

    /* Mobile-specific refer button styling */
    .btn-refer {
        padding: 6px 8px; /* Much smaller padding */
        font-size: 10px; /* Smaller text */
        border-radius: 3px; /* Smaller border radius */
        white-space: nowrap; /* Prevent text wrapping */
    }

    .kick-container {
        flex-shrink: 0;
        height: 40vh;
        max-height: 40vh;
        overflow: visible; 
    }

    .livestream-container {
        flex: 1;
        width: 100%;
        max-width: 100%;
    }

    .tab-container {
        max-width: 100%;
        height: auto; 
        min-height: calc(56vh - 30px);
        max-height: calc(85vh - 30px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        height: auto; 
        min-height: calc(60vh - 15px);
        max-height: calc(90vh - 15px); 
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 5px 25px 5px;
    }

    /* iOS mobile fix: allow vertical scrolling for card containers */
    .carousel-outer-wrapper {
        overflow-y: auto;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    .carousel-page {
        padding: 5px;
        width: auto;
        min-width: fit-content;
        scroll-snap-align: center;
        margin-right: 8px;
    }

    .carousel-page.loading-container {
        margin-right: 0 !important;
    }

    .carousel-wrapper {
        padding: 0 15px; 
    }

    .carousel-chat-page {
        padding: 0 !important;
    }

    .bingo-table td {
        font-size: 12px;
        padding: 5px 3px;
    }

    .free-space-img {
        max-width: 38px;
        max-height: 38px;
    }

    .game-header {
        font-size: 15px;
        padding: 4px;
    }

    .letters-header {
        font-size: 15px;
        padding: 4px;
    }

    .uuid {
        font-size: 7px;
        padding: 0 4px 2px;
    }

    .loading {
        min-height: 150px;
        padding: 20px;
    }

    .legal {
        font-size: 9px;
        padding: 4px;
    }

    footer {
        max-height: 5vh;
        font-size: 6px;
        line-height: 150%;
    }

    .options-button {
        padding: 6px 16px;
        font-size: 13px;
        height: 32px;
    }

    .options-dropdown {
        min-width: 140px;
        padding: 4px;
    }

    .dropdown-option {
        padding: 8px 12px;
        font-size: 13px;
    }

    .tg {
        position: absolute;
        top: -12px;
        left: -12px;
        z-index: 20;
    }
}


@media (max-width: 480px) {
    .navbar {
        padding: 5px 12px; /* Even more reduced padding for very small screens */
    }
    /* Even smaller refer button for very small screens */
    .btn-refer {
        padding: 4px 6px; /* Even smaller padding */
        font-size: 9px; /* Even smaller text */
    }

    .kick-container {
        padding: 4px;
        height: 40vh;
        gap: 6px;
    }

    .container {
        height: auto; 
        min-height: 60vh;
        max-height: 85vh;
        overflow-y: auto;
        padding: 0 3px 25px 3px;
    }

    .bingo-table {
        border-spacing: 2px;
    }

    .bingo-table td {
        font-size: 11px;
        padding: 4px 2px;
    }

    .free-space-img {
        max-width: 32px;
        max-height: 32px;
    }

    .carousel-page {
        padding: 3px;
        width: auto;
    }

    .carousel-chat-page {
        padding: 0 !important;
    }

    .loading {
        min-height: 120px;
        padding: 15px;
    }

    .legal {
        font-size: 8px;
        padding: 3px;
    }
    footer {
        max-height: 5vh;
        font-size: 6px;
        line-height: 150%;
    }

    .options-button {
        padding: 6px 14px;
        font-size: 12px;
        height: 30px;
    }
      
    .options-dropdown {
        min-width: 130px;
    }
      
    .dropdown-option {
        padding: 7px 10px;
        font-size: 12px;
    }

    carousel-page.loading-container {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .bingo-table td {
        font-size: 10px;
        padding: 3px 2px;
    }
    
    .letters-header {
        font-size: 10px;
        padding: 3px;
    }
    
    .uuid {
        font-size: 5px;
    }
}

/* Modal backdrop */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal box */
.modal {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    position: relative;
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: #333;
}

/* Dark mode modal */
[data-theme="dark"] .modal {
    background: #1e1e2e;
    color: #e0e0e0;
}

[data-theme="dark"] .modal h1,
[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .modal_header,
[data-theme="dark"] .modal_header h1 {
    color: #fff;
}

[data-theme="dark"] .modal .purchase-panel {
    background: #2a2a3e;
    border-color: #3a3a4e;
}

/* Override for pulltab gallery - keep panels transparent so images show */
[data-theme="dark"] .pulltab-gallery .purchase-panel,
[data-theme="dark"] .pulltab-gallery .panel {
    background: transparent;
    border-color: #aaa;
}

[data-theme="dark"] .modal .purchase-btn {
    background: var(--theme-primary, #23ba66);
    color: #fff;
}

[data-theme="dark"] .modal .divider {
    background: #3a3a4e;
}

[data-theme="dark"] .modal .panel-bottom,
[data-theme="dark"] .modal .inner-top,
[data-theme="dark"] .modal .inner-bottom {
    color: #e0e0e0;
}

[data-theme="dark"] .panel-bottom.buy-cards .inner-bottom,
[data-theme="dark"] .inner-bottom-right.buy-cards,
[data-theme="dark"] .inner-bottom-left.buy-cards {
    background: #2a2a3e;
    border-color: #3a3a4e;
}

[data-theme="dark"] #gameSelect-purchase {
    background: #2a2a3e;
    border-color: #3a3a4e;
    color: #e0e0e0;
}

[data-theme="dark"] .purchase-panel .inner-top,
[data-theme="dark"] .purchase-panel .panel-bottom {
    color: #b0b0b0;
}

[data-theme="dark"] .modal .bingo-table,
[data-theme="dark"] .modal .bingo-card {
    background: #2a2a3e;
}

/* Pulltab gallery dark mode - ensure images display properly */
[data-theme="dark"] .pt-face,
[data-theme="dark"] .pt-front {
    background: transparent;
}

[data-theme="dark"] .pt {
    background: transparent;
}

[data-theme="dark"] .pulltab-gallery .item {
    background: transparent;
}

/* Ensure panel content inside pulltabs stays transparent */
[data-theme="dark"] .pull-tab .panel-content {
    background: transparent;
}

[data-theme="dark"] .modal .bingo-table td {
    background: #3a3a4e;
    color: #fff;
    border-color: #4a4a5e;
}

[data-theme="dark"] .modal .bingo-header {
    background: var(--theme-primary, #23ba66);
}

[data-theme="dark"] .modal_text_body {
    color: #e0e0e0;
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.modal h2 {
    margin-top: 0;
}

.modal button {
    font-size: 24px;
    cursor: pointer;
}

.modal-secondary-btn {
    background: none;
    border: none;
    color: gray;
    margin-top: 0px;
    font-size: 10px;
}
.hidden {
    display: none;
}

.modal_header {
    margin-top: 20px;
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 5px;
    font-weight: bold;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

[data-theme="dark"] .close-btn {
    color: #e0e0e0;
}
.no-user-list #centerWindow {
    width: 100%;
    height: 113%;
}
div#leftWindow.secondaryWindow {
    display:none;
}
/* #leftWindow {
    display:none;
} */
.chat-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    height:44vh;
}

/* Ensure Chat tab button uses Poppins */
.chat_button, .play_button, .schedule_button {
    font-family: 'Poppins', sans-serif;
}
/* Fullscreen dark overlay */
#force-login-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

/* Page blur when forced login is active */
.force-login-blur {
    /* filter: blur(5px); */
    pointer-events: none;
    z-index: 99998;
}

/* Modal box */
.force-login-box {
    background: #ffffff;
    padding: 24px 28px;
    border-radius: 12px;
    max-width: 320px;
    width: 85%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 99999;    
}

/* Title */
.force-login-box h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

/* Body text */
.force-login-box p {
    margin: 0 0 18px 0;
    font-size: 14px;
}

/* Button */
.force-login-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}

.force-login-btn:hover {
    background: #006ae0;
}

.spectator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
}

.spectator-content {
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.spectator-logo {
    width: 160px;
    max-width: 60%;
    margin-bottom: 20px;
}

/* ----------------- PULL TABS ----------------- */

.pull-tab {
    /* width: 260px; */
    width: calc((25vh + 30px) * 258 / 384);
    background: linear-gradient(to bottom, #fefefe, #f0f0f0);
    background-image: url('https://cdn.prod.website-files.com/64519aca7d6b9dc7f2f78feb/68ec857e2a0bbea7f61fec25_Bee%20Race%20BINGO_TITLEHighlight.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    padding: 20px 10px;
    /* margin: 30px 0; */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.panel {
    border-top: 2px dashed #aaa;
    border-right: 2px dashed #aaa;
    border-bottom: 2px dashed #aaa;
    margin-bottom: 12px;
    padding: 10px;
    background: transparent;   /* ✅ transparent by default */
    border-left: none;
    /* height: 364px; */
    height:25vh;
    cursor: pointer;
    box-shadow: none;          /* ✅ no inner shadow when closed */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.panel:active {
    background: rgba(255,255,255,0.2); /* light touch feedback */
}

.panel.open {
    background: rgba(255,255,255,1); /* ✅ solid-ish white when open */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.panel:last-child {
    margin-bottom: 0;
}

.panel-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* padding: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
    100% 0, 100% 0, 100% 100%, 100% 100%
    );
    transition: clip-path 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.panel.open .panel-content {
    clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%
    );
    opacity: 1;
    pointer-events: auto;
}

/* Content types */
.image-only img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-numbers {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    height: 100%;
}

.image-numbers img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    min-width: 70%;
}

.numbers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: bold;
    font-size: 22px;
    color: #444;
    flex: 1;
    overflow: hidden;
}

.image-grid {
    display: grid;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.grid-2x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.pull-tab::before,
.pull-tab::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 10px;
    background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 4px,
    #aaa 4px,
    #aaa 5px
    );
}

.pull-tab::before {
    top: 0;
}

.pull-tab::after {
    bottom: 0;
}


.btn-clear:hover {
    background-color: var(--rs-brand); /* e.g. red tint while holding */
    
}

.btn-clear:active {
    background-color: var(--rs-brand); /* e.g. red tint while holding */
    
}

.btn-clear.just-cleared {
    background-color: #2ecc71; /* green flash after clearing */
    transition: background-color 0.3s ease;
}

iframe.caller {
  pointer-events: none;
}

.ccy-icon {
    width: 25px; 
    height: 25px;
    padding: 2px;
    vertical-align: middle;
}

.balance.active {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
    width: 100%;
}

.balance.ccy-unavailable {
    opacity: 0.35;
    filter: grayscale(1);
}

#balance-toggle-btn:disabled {
    pointer-events: none;
}

/* ==================== XMAS ==================== */
  .card.free.xmas {
      position: relative;
      overflow: visible; /* required for dropdown */
      background: repeating-linear-gradient(
          -45deg,
          #ffc1c1 0 20px,
          white 20px 40px,
          #95fd95 40px 60px,
          white 60px 80px
      );
      z-index: 1;
  }

  /* Container clips the snow */
  .snow-container {
      position: absolute;
      inset: 0;           /* fills card */
      overflow: hidden;    /* snow stays inside card */
      pointer-events: none;
      z-index: 0;          /* behind text and button */
  }

  /* Heavy flakes — fastest, increased density */
  .snow-layer.heavy {
      position: absolute;
      inset: 0;
      background-image:
          radial-gradient(4px 4px at 5% 10%, white 60%, transparent 61%),
          radial-gradient(3px 3px at 20% 25%, white 60%, transparent 61%),
          radial-gradient(4px 4px at 35% 15%, white 60%, transparent 61%),
          radial-gradient(3px 3px at 50% 30%, white 60%, transparent 61%),
          radial-gradient(4px 4px at 65% 5%, white 60%, transparent 61%),
          radial-gradient(3px 3px at 80% 25%, white 60%, transparent 61%),
          radial-gradient(4px 4px at 90% 10%, white 60%, transparent 61%);
      background-size: 100% 100%;
      animation: snowHeavy 6s linear infinite;
      opacity: 0.95;
  }

  /* Medium flakes — slower, more flakes */
  .snow-layer.medium {
      position: absolute;
      inset: 0;
      background-image:
          radial-gradient(3px 3px at 10% 35%, white 60%, transparent 61%),
          radial-gradient(2px 2px at 30% 50%, white 60%, transparent 61%),
          radial-gradient(3px 3px at 50% 20%, white 60%, transparent 61%),
          radial-gradient(2px 2px at 70% 40%, white 60%, transparent 61%),
          radial-gradient(3px 3px at 90% 60%, white 60%, transparent 61%);
      background-size: 100% 100%;
      animation: snowMedium 14s linear infinite;
      opacity: 0.6;
  }

  /* Tiny flakes — very slow, more flakes for depth */
  .snow-layer.tiny {
      position: absolute;
      inset: 0;
      background-image:
          radial-gradient(1px 1px at 5% 20%, white 60%, transparent 61%),
          radial-gradient(1px 1px at 25% 50%, white 60%, transparent 61%),
          radial-gradient(1px 1px at 45% 70%, white 60%, transparent 61%),
          radial-gradient(1px 1px at 65% 30%, white 60%, transparent 61%),
          radial-gradient(1px 1px at 85% 60%, white 60%, transparent 61%);
      background-size: 100% 100%;
      animation: snowSlow 22s linear infinite;
      opacity: 0.45;
  }
  
  /* Animations */
  @keyframes snowHeavy {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
  }

  @keyframes snowMedium {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
  }

  @keyframes snowSlow {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
  }

  /* ==================== MULTIPLE ENTRY OPTIONS ==================== */

  /* Primary enter button (not yet entered) */
  .cta-btn.enter-primary {
      background: #27cb27;
      width: 100%;
      padding: 20px;
      font-weight: 700;
      font-size: 20px;
  }
  .cta-btn.enter-primary:hover {
      background: #22b822;
  }

  /* "Buy more cards?" button (already entered) */
  .cta-btn.entered-buy-more {
      background: #f0f0f0;
      color: #444;
      width: 100%;
      padding: 16px;
      font-weight: 600;
      font-size: 16px;
      border: 2px dashed #ccc;
  }
  .cta-btn.entered-buy-more:hover {
      background: #e4e4e4;
      border-color: #aaa;
      color: #222;
  }
  [data-theme="dark"] .cta-btn.entered-buy-more {
      background: rgba(255,255,255,0.08);
      color: #ccc;
      border-color: rgba(255,255,255,0.2);
  }
  [data-theme="dark"] .cta-btn.entered-buy-more:hover {
      background: rgba(255,255,255,0.14);
      color: #fff;
      border-color: rgba(255,255,255,0.35);
  }

  /* Dropdown header text */
  .dropdown-header {
      font-size: 12px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 8px 8px;
      text-align: center;
  }
  [data-theme="dark"] .dropdown-header {
      color: #999;
  }

  /* Individual option buttons */
  .entry-option {
      background: #f5f5f5;
      color: #333;
      padding: 14px 16px;
      margin: 3px 0;
      border-radius: 10px;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid #e0e0e0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.15s ease, border-color 0.15s ease;
  }

  .entry-option:hover {
      background: #e8e8e8;
      border-color: #ccc;
  }

  .entry-option .option-cards {
      font-weight: 700;
      color: #222;
      white-space: nowrap;
  }

  .entry-option .option-price {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: 600;
      color: #222;
      white-space: nowrap;
  }

  [data-theme="dark"] .entry-option {
      background: rgba(255,255,255,0.08);
      color: #ddd;
      border-color: rgba(255,255,255,0.12);
  }
  [data-theme="dark"] .entry-option:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.25);
  }
  [data-theme="dark"] .entry-option .option-cards {
      color: #fff;
  }
  [data-theme="dark"] .entry-option .option-price {
      color: #fff;
  }

  /* Smooth fade animation */
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
  }
  
  .xmas .entry {
  	display: flex;
    flex-direction: column;
    align-items: stretch;
    }
  
  @keyframes dropdownSlide {
    0% {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scaleY(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
	}

  .entry-dropdown {
    position: absolute;
    top: 93%;
    left: 5%;
    width: 90%;

    display: none;
    flex-direction: column;

    background: rgba(255,255,255,0.98);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);

    z-index: 999;

    transform: translateY(-15px);
    opacity: 0;
  }

  [data-theme="dark"] .entry-dropdown {
    background: rgba(30,30,40,0.97);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }

  .entry-dropdown.show {
      display: flex;
      animation: slideDown 0.25s ease-out forwards;
  }

  /* Slide-down animation remains the same */
   @keyframes slideDown {
      0% {
          transform: translateY(-15px);
          opacity: 0;
      }
      100% {
          transform: translateY(0);
          opacity: 1;
      }
  }
  
  @media (max-width: 768px) {
  	.entry-dropdown {
    	top: 97%;
     }
  }


  /* ======================================== CSS UPDATES FOR PURCHASING ======================================== */

  .btn-clear .material-symbols-rounded {
      font-size:20px;
    }
    .btn-clear {
      align-items: center;
      justify-content: center;
      padding: 8px 8px !important;
    }
    .clear-cards, .dl-cards, .refresh-cards, .buy-cards {
      margin-left: 3px !important;
    }
    .carousel-buy-cards {
      justify-content: center;
      display: flex !important;
      align-items: center !important;
      width: 100px;
      border-radius: 15px;
    }
    #cardsBuy_carousel {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff
    }
    #cardsBuy_carousel span {
      font-size: 30px;
      color: #bababa;
    }
    .carousel-buy-cards:hover {
      background: #f4f4f4a6;
    }
    .carousel-buy-cards:hover #cardsBuy_carousel {
      background:#ededed;
    }
    .carousel-buy-cards:hover #cardsBuy_carousel span {
      color: #8e8e8e;
    }
    .material-symbols-rounded {
      font-variation-settings:
        'OPSZ' 36,
        'wght' 400,
        'FILL' 0,
        'GRAD' 0;
    }
    .modal_text_body {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .purchase-options {
        display: flex;
        flex-wrap: wrap;          /* allows stacking */
        gap: 20px;
        justify-content: center;
        padding: 20px 0px;
    }

    .purchase-panel {
        flex: 1 1 150px;          /* <-- this controls when stacking happens */
        /* border: 3px solid #ccc; */
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        cursor:pointer;
    }

    .purchase-panel.disabled {
        pointer-events: none;
        opacity: 0.45;
        cursor: not-allowed;
    }

    .divider {
        width: 2px;
        background: #d3d3d3;
        margin: 0 10px;
    }

    .modal.purchasing {
        max-width:700px;
    }

    .modal.purchasing {
      display: flex;
      flex-direction: column;
      max-height: 80vh;
      overflow: hidden; /* critical */
    }

    .purchaseOption-top, .purchaseOption-cards {
      height:25vh;
      border-radius: 5px;
    }
    .purchaseOption-top {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      /* height: auto; */
      object-fit: contain;
    }

    .panel-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .panel-top {
        flex: 0 0 50%;   /* 75% */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .panel-bottom {
      flex: 0 0 50%;
      display: flex;
      flex-direction: column;
      gap: 1rem; /* spacing between top and bottom sections */
    }

    /* Inner-bottom default: stacked */
    .inner-bottom {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      justify-content: center;
      width: 100%;
    }

    button.btn-clear.purchase-btn {
      width: 100%;
      border-radius: 50px;
      font-size: 15px;
      font-weight: bold;
      background: #bbffb3;
      font-family: 'Poppins', sans-serif;
      display:flex;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      border: 0px;
    }

    button.btn-clear.purchase-btn:hover,
    .price-pill:hover {
      background: #00bf63;
    }

    .image-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    
    #gameSelect-purchase {
      margin: 0;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      width: 80%;
      box-sizing: border-box;
      height:36px;
    }

    .inner-top {
        display: flex;
        align-items: center;   /* vertically align text + dropdown */
        gap: 0.5rem;           /* optional spacing */
        white-space: nowrap;   /* prevents wrapping inside the container */
        justify-content: center;
        height: 50px;
    }

    .inner-top h3 {
      font-size: 1em;
    }

    .panel-bottom.buy-cards .inner-bottom {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0.2rem;
        width: 85%;
        margin: 0 auto;
    }

    .panel-bottom.buy-cards .inner-bottom, .inner-bottom-right.buy-cards, .inner-bottom-left.buy-cards {
      text-align: center;
      border: 1px solid #dedede;
      padding: 5px;
      width: 90%;
      border-radius: 10px;
      background: #f9f9f9;
      font-weight: 600;
      /* margin-left: 0 !important; */
      font-size: 14px;
    }

    .tooltip {
      font-size: 12px;
    }

    .pulltab-gallery {
        display: inline-flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 2rem;
        height: 320px; /* example height */
        padding: 15px;
        box-sizing: border-box;
        scroll-snap-type: x mandatory;
        /* border: 1px solid #ccc; */
        /* background: #fafafa; */
        flex-wrap: nowrap;
        padding-bottom:20px;
        /* padding-top: 10px; */
    }

    #modal_text {
      min-width:0;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow: hidden;
    }
    #modal_text_body {
      flex: 1 1 auto;
      overflow-x: auto;        /* enable horizontal scrolling */
      overflow-y: hidden;      /* prevent vertical scrollbar */
      /*white-space: nowrap;*/     /* prevent wrapping */
    }

    /* --- ITEM WRAPPER --- */
    .item {
        flex: 0 0 auto;
        position: relative;
        display: flex;
        flex-direction: row;
        scroll-snap-align: start;
        cursor: pointer;
        transition: all .3s ease;
        /* border: 1px solid #ddd; */
    }

    /* Vertical rectangle image: 100% height in horizontal mode */
    .item img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }

    /* Details panel (hidden by default) */
    .details {
        width: 200px;
        padding: 1rem;
        /* display: none; */
        /* background: white; */
        /* border-left: 1px solid #ccc; */
        /* border-bottom: 5px solid #516fff; */
        font-family: Poppins;
    }

    /* When expanded, show details panel */
    .item.expanded .details {
        display: block;
    }

    .item {
      perspective: 1000px; /* creates depth */
    }

    .pt {
      position: relative;
      width: 170px;          /* set explicitly */
      height: 260px;
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 8px;
      /* overflow: hidden; */
    }

    /* flipped state */
    .item.flipped .pt {
      transform: rotateY(180deg);
      /* box-shadow: inset 0 0 0 10px black; */
    }

    .pt-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      /* border-radius: 8px; */
      border-radius: inherit;
      overflow: hidden;
    }

    .pt-name {
      font-weight: 600;
      font-size: 18px;
      padding-top: 15px;
      padding-bottom: 8px;
      margin: 5px 15px;
      padding: 1px 5px;
      text-wrap: wrap;
      line-height: 18px;
    }
    .pt-horse_value,.pt-ball_value,.pt-batch_size,.pt-price {
      padding: 2px;
      border: 1px solid #a9a9a9;
      border-radius: 8px;
      background:#ffe1ba;
    }

    /* front */
    .pt-front img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* back */
    .pt-back {
      background: #fff2ca;
      color: black;
      transform: rotateY(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      box-shadow: inset 0 0 0 10px #ffd290;
    }

    /* Shared row layout */
    .pt-horse_value,
    .pt-ball_value,
    .pt-batch_size,
    .pt-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px 15px;
      padding: 1px 5px;
    }
    .pt-serial {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5px 15px;
      padding: 5px;
    }
    .pt-serial-no {
      width: 80%;
      background: white;
      font-size: 12px;
    }

    /* Left text column */
    .pt-horse_value-text,
    .pt-ball_value-text,
    .pt-batch_size-text,
    .pt-price-text {
      display: flex;
      flex-direction: column;
    }

    /* Main label */
    .pt-horse_value-text span:first-child,
    .pt-ball_value-text span:first-child,
    .pt-batch_size-text,
    .pt-price-text {
      font-size: 14px;
      font-weight: 600;
      line-height: 14px;
      text-align: left;
    }
    .pt-batch_size-text,.pt-batch_size-value,.pt-price-text,.pt-price-value {
      font-size: 10px;
    }

    /* Sub-label */
    .pt-horse_value-text span:last-child,
    .pt-ball_value-text span:last-child {
      font-size: 7px;
      opacity: 0.7;
      margin-top: 2px;
    }

    /* Right value column */
    .pt-horse_value-value,
    .pt-ball_value-value,
    .pt-batch_size-value,
    .pt-price-value {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 2px;
      min-width: 60px;
    }
    .pt-price-value {
      font-weight:600;
    }

    /* Amount */
    .pt-horse_value-value span:first-child,
    .pt-ball_value-value span:first-child {
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      align-self: flex-start;
    }

    /* Currency symbol */
    .pt-horse_value-value span:last-child,
    .pt-ball_value-value span:last-child {
      font-size: 11px;
    }

    .pt-serial-text {
      font-size: 10px;
    }

    .pill {
      position: absolute;
      background: #ffcc00;
      color: #000;
      padding: 4px 10px;
      border-radius: 999px; /* makes it pill-shaped */
      font-weight: bold;
      font-size: 0.9rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    /* Price pill: below PT, slightly overlapping */
    .price-pill {
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      background: #bbffb3
    }

    /* Bought pill: top right corner */
    .bought-pill {
      top: -12px;
      /* right: -8px; */
      font-size: 11px;
      background-color: #ffedbd;
      left: 50%;
      transform: translateX(-50%);
    }

    .price-pill .pt_play {
      display: none;
    }

    /* when item is clicked / flipped */
    .item.flipped .price-pill .pt_price {
      display: none;
    }

    .item.flipped .price-pill .pt_play {
      display: inline;
    }

    .pt_controls {
      display: inline-flex;
      gap: 1rem;
      justify-content: center;
      align-items: center;
    }

    .pt-return {
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .pt-header {
      font-size: 14px;
      line-height: 14px;
      padding: 5px 20px;
      background: #dbdbdb;
      border-radius: 50px;
    }

    .icon-circle {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 50%;
      top: 3px;
      left: 3px;
      position: absolute;
    }

    .item .pull-tab {
      height: 260px;
      width: 170px;
      border-radius: 8px;
    }

    .item .pull-tab .panel {
      height: 260px;
    }
    .playpt .price-pill {
      bottom:-15px;
    }

    .pt-front.pt--inactive {
      opacity: 0.75;
      pointer-events: none;
    }

    .pt.pt--disabled {
      filter: grayscale(100%);
      opacity: 0.75;
    }

    .pt.pt--disabled::after {
      content: "";
      position: absolute;
      inset: 0;
      cursor: not-allowed;
      pointer-events: all;      /* overlay receives the mouse */
      background: rgba(0,0,0,0.3);
      z-index: 10;
      border-radius: 8px;
    }

    .pt_price--disabled {
      background-color: #ffb3b3;
      pointer-events: none;
    }

    .pt.pt--disabled::after {
      cursor: not-allowed;
    }

    @media (max-width: 710px) {
        .divider {
            width: 100%;
            height: 2px;
            background: #b1b1b1;
            margin: 10px 0;
        }
        .purchase-panel {
            padding:0px;
        }
        .purchase-options {
            gap: 2px;
            padding: 0px;
        }
        .panel-inner {
            flex-direction: inherit;
            gap:0.5rem;
        }
        .panel-top {
            /* flex: 0 0 40%;
            text-align: left;
            display: flex;
            justify-content: center;
            align-items: flex-start; */
            display:none;
        }
        
        .panel-bottom {
            flex: 0 0 60%;   /* 75% height (or width) */
            text-align: left;
            padding-left: 5px;
        }
        .inner-top {
            white-space: normal;   /* prevents wrapping inside the container */
            /* flex-wrap: wrap; */
            justify-content: left;
        }
        .inner-bottom {
          flex-direction: column;
        }
        .inner-bottom-left,
        .inner-bottom-right {
          flex: 1; /* equal width */
        }
        h1,h2 {
            margin: 0px;
        }
        h1 {
            font-size: 1.5em;
        }
        h2 {
            font-size: 1.1em;
        }
        button.btn-clear.purchase-btn {
            width: 85%;
        }
        #gameSelect-purchase {
          width:90%;
        }
        .panel-bottom.buy-cards .inner-bottom, .inner-bottom-right.buy-cards, .inner-bottom-left.buy-cards {
          width:100%;
        }
        .pulltab-gallery {
          flex-direction: column;
          overflow-y: auto;
          overflow-x: hidden;
          height: auto;
          max-height: 80vh;
          width: 300px;
          max-height: none;
        }
        .item {
          width: 100%;
          height: 275px; /* you can adjust */
          justify-content: center;
        }
        .item img {
            /* width: 50%; */
            height: 100%;
        }
        .item.expanded .details {
            width: 50%;
        }
        .modal.purchasing {
          max-height: 80vh;
        }
        #modal_text_body {
          overflow-y: auto;
        }
        .inner-bottom-right.buy-cards, .inner-bottom-left.buy-cards {
            font-size: 16px;
        }
    }