/* --- GLOBAL RESET & SCROLL FIXES --- */
* {
    /* Ensures padding and border are included inside the element's defined width/height */
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    margin: 0;
    padding: 0;
    /* Crucial for preventing horizontal scrolling on mobile */
    overflow-x: hidden; 
    width: 100%;
}

/* --- BASE STYLES (Applies to login/register screen) --- */
body {
    font-family: 'Arial', sans-serif;
    background-color: #0d0d0d; /* Deep dark background */
    color: #e0e0e0; 
    display: block;
    flex-direction: column;
    justify-content: center; /* Center vertically on desktop */
    align-items: center;
    min-height: 100vh; /* Full viewport height for desktop */
    padding: 20px; 
}
.tx-title{ color:#000;}
.tx-meta{color: #333;}
.tx-amount{color: cadetblue;}
/* When dashboard is loaded, body aligns to top */
.app-dashboard-layout {
    /* Overrides the login screen centering for dashboard view */
    width: 100%;
    max-width: none;
    padding: 0;
}
/* Force instant scroll jumps */
html, body, .portal-wrapper, .full-screen-overlay {
    scroll-behavior: auto !important;
}

/* Fix for mobile momentum override */
.full-screen-overlay {
    -webkit-overflow-scrolling: touch;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow-y: auto;
}

/* Ensure the dashboard layout doesn't fight the scroll */
.app-dashboard-layout {
    display: block !important; /* Change from flex if it's causing centering issues */
}

/* --- LOGIN/REGISTER FORM STYLES (Unchanged) --- */

.portal-wrapper { width: 100%; max-width: 440px; }
.form-container { width: 100%; padding: 40px; background: #1a1a1a; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); transition: all 0.3s ease; }
.form-title { text-align: center; color: #00ffff; margin-bottom: 25px; font-size: 1.5em; text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-size: 0.9em; color: #a0a0a0; }
.input-group input { width: 100%; padding: 12px; background: #2b2b2b; border: 1px solid #3a3a3a; border-radius: 6px; color: #f0f0f0; transition: border-color 0.2s; }
.input-group input:focus { outline: none; border-color: #00ffff; box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
.submit-btn { width: 100%; padding: 14px; margin-top: 10px; background: #00ffff; color: #121212; border: none; border-radius: 6px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s, transform 0.1s; text-transform: uppercase; }
.submit-btn:hover { background-color: #33ffff; transform: translateY(-2px); }
.switch-link { text-align: center; margin-top: 25px; font-size: 0.9em; }
.switch-link a { color: #00ffff; text-decoration: none; font-weight: bold; transition: color 0.2s; }
.switch-link a:hover { color: #33ffff; text-decoration: underline; }

/* --- VISIBILITY CLASS for JS SWITCH --- */
.hidden { display: none; }

/* Notification Styles (Unchanged) */
#notification-container { position: absolute; top: 20px; right: 20px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; }
.custom-alert { background-color: #333; color: white; padding: 15px 25px; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); font-weight: bold; opacity: 0; transform: translateX(100%); animation: slideIn 0.3s forwards, fadeOut 0.5s 4s forwards; min-width: 250px; max-width: 90vw; }
.custom-alert.success { background-color: #008000; border-left: 5px solid #00ff00; }
.custom-alert.error { background-color: #b30000; border-left: 5px solid #ff0000; }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; margin-bottom: -50px; } }


/*======================================================
    DASHBOARD APP LAYOUT STYLES
========================================================*/

/* --- APP LAYOUT BASE --- */
.app-dashboard-layout {
    display: flex;
    flex-direction: column; 
    min-height: 100vh;
    background-color: #0c0c0c; 
    color: #fff;
    position: relative;
    overflow-x: hidden; 
}

/* 1. TOP HEADER STYLES */
.app-top-header {
    background-color: #0d1a26; 
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /* Ensure it stays fixed at the top */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.nav-toggle-btn {
    background: none;
    border: none;
    color: #00ffc8;
    font-size: 1.5em;
    cursor: pointer;
    margin-right: 15px;
}
.header-logo-area {
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.app-logo {
    font-size: 1.8em; /* Adjusted size for header */
    color: #00ffc8;
    filter: none; /* Remove filter from app-logo in dashboard view */
}
.app-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-left: 10px;
}
.header-widgets {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* ➡️ Wallet Section Fix: Removed border and background */
.wallet-icon-display {
  display: flex;
    align-items: center; 
    gap: 5px; /* Add small space between icon and number */
    padding: 0 10px;
}
.wallet-icon-display i {
    color: #00ffc8;
    margin-right: 8px; 
    font-size: 1.1em;
	line-height: 1;
}
.wallet-number {
    font-weight: bold;
    color: #fff;
}
.notification-btn, .logout-btn-header {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
}


/* 2. SIDEBAR STYLES (Sliding from Left) */
.app-sidebar {
    width: 280px;
    background-color: #1a1a1a;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed; 
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transform: translateX(-280px); /* Initially slide off-screen */
    transition: transform 0.3s ease-in-out;
}
.app-dashboard-layout.sidebar-visible .app-sidebar {
    transform: translateX(0); /* Slide into view */
}
/* Overlay for dimming content when sidebar is open */
.app-dashboard-layout.sidebar-visible:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
.sidebar-header-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
}
.sidebar-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
}
/* Sidebar Link & Alignment Fix */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    flex-grow: 1; /* Pushes the last item/button down */
}
.sidebar-nav a.nav-item {
    color: #fff;
    text-decoration: none; /* Hiding default href underlines */
    padding: 15px 20px; /* Better padding for alignment */
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}
.sidebar-nav a.nav-item i {
    margin-right: 15px; /* Better spacing between icon and text */
    width: 20px; /* Fixed width for consistent alignment */
    text-align: center;
    color: #00ffc8;
}
.sidebar-nav a.nav-item:hover, .sidebar-nav a.nav-item.active {
    background-color: #2a2a2a;
    color: #fff;
}
.logout-btn-sidebar {
    /* Style for logout button inside the sidebar */
    margin: 20px;
    background-color: #ff3366;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


/* 3. MAIN CONTENT */
.app-main-content {
    flex-grow: 1;
    padding: 10px;
    max-width: 900px; 
    margin: 0 auto; 
    width: 100%; 
    /* Padding to ensure content starts below the fixed header */
    padding-top: 90px; 
}

/* --- 4. IMAGE SLIDER STYLES (UPDATED) --- */

/* 1. Remove the wrapper that contained the scroll buttons */
.image-slider-wrapper {
    /* We are removing the buttons, so the wrapper should focus only on margins */
    display: block; 
   /* margin-bottom: 30px;
    /* Optional: If you want to use the wrapper to constrain the size, keep it, otherwise you can remove this class from the HTML */
}

/* 2. Style the scroll container */
.image-slider {
    /* Horizontal scrolling container */
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    width: 100%;
    height: 200px; /* Keep this height consistent with your image size (400px divided by 2 if needed, but 200px is common for mobile banners) */
    background-color: #1c1c1c; /* Dark background */
    border-radius: 10px;
    
    /* ➡️ FIX: REMOVE LEFT/RIGHT MARGINS */
    margin: 0; 
    
    /* Optional: Add spacing between items */
    gap: 10px; 
    padding: 0 10px; /* Add padding to the container edges if you want the first/last slide to sit off-edge slightly */
    
    /* FIX: Hide the scrollbar */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Webkit (Chrome, Safari) Scrollbar Hide */
.image-slider::-webkit-scrollbar {
    display: none;
}

/* 3. Style the individual slides for autofit */
.slider-item {
    /* ➡️ FIX: Auto-fit the image to the viewable area */
    min-width: 95%; /* Example: Makes each slide take up 95% of the screen width */
    /* You might prefer a fixed width (e.g., min-width: 300px) or 100% depending on desired mobile look. 
       If you want one image per screen with some gap, 100% is fine, but if you want partial next slide view, use 90-95% */
    
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; 
    padding: 0;
}

/* 4. Ensure images are autofit/cover the item container */
.slider-item img {
    /* ➡️ FIX: Image Autofit (Cover) */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the full 700x400 container */
    border-radius: 10px;
}

/* 5. REMOVE SCROLL BUTTONS CSS */
.scroll-btn,
.scroll-btn.left, 
.scroll-btn.right {
    display: none; /* Hides all scroll buttons entirely */
}

/* --- CONTENT BLOCKS (Unchanged) --- */
.content-section { margin-bottom: 15px; }
.section-title { color: #00ffc8; border-bottom: 2px solid #333; padding-bottom: 5px; margin-bottom: 20px; }
.quick-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.stat-card { background-color: #1c1c1c; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); border: 1px solid #333; }
.game-grid-placeholder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 10px; background-color: #1c1c1c; border-radius: 8px; }

/* --- FLOATING WHATSAPP BUTTON STYLES --- */

.whatsapp-float {
    /* Fixed position to keep it visible while scrolling */
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px; /* Distance from bottom */
    right: 20px; /* Distance from right */
    background-color: #25d366; /* WhatsApp Green */
    color: #fff;
    border-radius: 50px; /* Makes it a perfect circle */
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 10000; /* Ensure it stays above everything else */
    display: flex;
    justify-content: center;
    align-items: center; text-decoration:none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.whatsapp-float i {
    font-size: 28px;
    margin-top: 2px;
}

.whatsapp-float:hover {
    background-color: #128c7e; /* Darker green on hover */
    transform: scale(1.05); /* Subtle zoom effect */
}

/* Optional: Hide on screens that are too narrow if necessary, 
   but generally floating buttons are good for mobile */
@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    .whatsapp-float i {
        font-size: 24px;
    }
}

/* --- B. QUICK ACTIONS BLOCK STYLES (New Section) --- */

.quick-actions-wrapper {
    margin-bottom: 15px;
}

.quick-actions-card {
  
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex; /* Makes the children (buttons) align horizontally */
    gap: 15px; /* Spacing between the buttons */
    justify-content: space-between; /* Distribute space evenly */
}

.quick-action-btn {
    /* Style for both buttons */
    flex: 1; /* Makes both buttons take up equal width */
    text-align: center;
    padding: 12px 10px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1em;
    transition: transform 0.2s, opacity 0.2s;
    color: #fff; /* White text for contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Specific styling for the Deposit Button */
.deposit-btn {
background-color: #00ffc8;
  border: 2px solid #00ffc8;
}

/* Specific styling for the Withdraw Button */
.withdraw-btn {
    background-color: #ff3366; /* Red/Warning color */
    border: 2px solid #cc0033;
}

/* --- MARKET CARD STYLES --- */
.news-card-2 {
    /* 1. Core Look */
    background-color: #1a1a1a; /* Darker internal fill color */
    color: #fff;
    margin-bottom: 12px;
    padding: 15px 20px; /* Increased padding for better internal spacing */
    
    /* 2. Rounded Corners */
    border-radius: 18px; /* High rounding */
    
    /* 3. FLEX LAYOUT (Ensure content is still spaced correctly) */
    display: flex;
    align-items: center; 
    justify-content: space-between; 

    /* 4. Gradient Border Setup */
    border: 2px solid transparent; /* Required for the border to show */
    background-clip: padding-box; 
    position: relative;
    z-index: 1; 
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2); /* Subtle glow effect */
}

/* Create the Gradient Border using a Pseudo-element */
.news-card-2::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    
    /* 🔑 CRITICAL: UPDATED GRADIENT COLORS */
    background: linear-gradient(to right, #00ffc8, #ff3366); /* Cyan to Pink/Red */
    
    z-index: -1; 
    border-radius: 18px;
    padding: 3px; 
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.bg-grad-1 {
    /* Define the gradient */
    background: linear-gradient(to right, #00ffc8, #ff3366);
    /* Ensure no other background properties interfere */
	  -webkit-background-clip: text;
	   -webkit-text-fill-color: transparent;
    background-color: transparent; 
}
.text-grad-1 {
    /* 1. Define the gradient (White, Red/Pink) */
    background: linear-gradient(to right, #FFFFFF, #ff3366);
    
    /* 2. Clip the background to the text shape (for WebKit browsers) */
    -webkit-background-clip: text;
    
    /* 3. Make the foreground text color transparent */
    -webkit-text-fill-color: transparent;
    
    /* Fallback for other browsers and standard */
    background-clip: text;
    text-fill-color: transparent;
}

/* 1. Chart Icon on the Left */
.market-icon-link {
    flex-shrink: 0;
    font-size: 1.5em; /* Larger icon */
    color: #4CAF50; /* Green for chart/stats link */
    padding-right: 15px;
    text-decoration: none;
}

/* 2. Center Content Block */
.market-details-content {
    flex-grow: 1; /* Allows this block to take up maximum space */
    text-align: center;
}

.market-details-content h6 {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    margin: 0 0 2px 0;
}

.market-details-content .dark-text {
font-size: 0.85em;
    color: #aaa; 
    display: block;
}

.market-result-display {
color: #FFC107; /* Yellow/Gold for result */
    font-size: 24px; /* Slightly larger for prominence */
    font-weight: 900; /* Extra bold */
    letter-spacing: 2px; /* Adds space for better readability */
    display: block;
    margin-top: 5px;
	
}

/* 3. Action Button Wrapper (Right Side) */
.market-action-btn-wrapper {
    flex-shrink: 0;
    margin-left: 15px;
}

/* Styles for the Play and Lock Icons */
.market-action-icon {
    display: flex;
    justify-content: center;
    align-items: center;
   width: 50px;
  height: 50px;
    border-radius: 50%;
    font-size: 16px;
    background-color: #00ffc8; /* Blue for play action */
    color: #000;
    text-decoration: none; font-size:2em;
}

.closed-icon {
    /* Style for the Lock icon (when closed) */
    font-size: 2em; 
    color: #DC3545; /* Red for closed/lock */
    padding: 10px;
}
/* ===================================== */
/* DEPOSIT MODAL STYLING */
/* ===================================== */

/* Modal Backdrop */
.app-modal {
    /* Fixed position to cover the entire viewport */
    position: fixed;
    z-index: 1000; /* Ensure it's above all other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Allows scrolling if content is too large */
    background-color: rgba(0,0,0,0.8); /* Dark, semi-transparent overlay */
    padding-top: 50px;
    display: none; /* Hidden by default, controlled by JS */
}

/* Modal Content Box */
.modal-content {
    background-color: #0c0c0c; /* Dark theme background */
    margin: 5% auto; /* Center vertically and horizontally */
    padding: 25px;
    border: 1px solid #0c0c0c;
    width: 90%;
    max-width: 400px; /* Max width for mobile-friendly view */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.7);
    color: #fff; /* White text for contrast */
}

.modal-content h2 {
    color: #00ffc8; /* Gold/Yellow title color */
    text-align: center;
    margin-top: 0;
    font-size: 1.5em;
    margin-bottom: 20px;
}

/* Form inputs and selects */
.ctform .input-group input,
.ctform .input-group select {
    width: 100%;
    padding: 12px;
    margin: 8px 0 15px 0;
    display: inline-block;
    border: 1px solid #4a4a6e;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: #FFF;
    color: #000;
    font-size: 1em;
}


.ctform .input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #aaa;
}

/* Close Button */
.close-btn {
    color: #fff;
    float: right;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 15px;
}

.close-btn:hover,
.close-btn:focus {
    color: #ffd700; /* Hover effect */
    text-decoration: none;
}

.note {
    font-size: 0.85em;
    color: #999;
    text-align: center;
    margin-top: 20px;
    border-top: 1px dashed #3a3a5a;
    padding-top: 10px;
}

/* Utility Class for JS */
.hidden {
    display: none !important;
}
.theme-btn {
  background-color: #00ffc8; color:#000;
  border: 2px solid #00ffc8;
}
/* (You might already have .auth-btn and .notification styling) */
.payment-qr-code{ width:100%; }


/* Full Screen Overlay for History */
.full-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f7f7; 
    z-index: 1000; 
    display: none; 
    flex-direction: column;
}

.history-header {
    background-color: var(--primary-color, #0d1a26);
    color: white;
    justify-content: space-between;
    /* Ensure the header uses the same styling structure as the dashboard header */
}

.history-header .screen-title {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
}

.history-header #history-back-btn {
    /* Style to match nav-toggle-btn but white */
    color: white; 
    background: none;
    border: none;
    font-size: 1.2em;
    padding: 0 15px;
}

.history-main-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
	padding-top: 75px;
}

/* Transaction List Styling */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transaction-item {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.transaction-item i {
    font-size: 1.5em;
    margin-right: 15px;
    padding: 10px;
    border-radius: 50%;
    color: white;
    min-width: 30px; /* Ensure icon area is consistent */
    text-align: center;
}

.transaction-item i.deposit {
    background-color: #4CAF50; /* Green */
}

.transaction-item i.withdraw {
    background-color: #F44336; /* Red */
}

.tx-details {
    flex-grow: 1;
}

.tx-title {
    font-weight: 600;
    margin: 0 0 2px 0;
}

.tx-time {
    font-size: 0.8em;
    color: #888;
    margin: 0;
}

.tx-status-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 10px;
}

.tx-amount {
    font-weight: bold;
    font-size: 1.1em;
}

.tx-amount.text-success { color: #4CAF50; }
.tx-amount.text-danger { color: #F44336; }

.tx-status {
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.status-pending {
    background-color: #FFEB3B;
    color: #B78D00;
}

.status-approved {
    background-color: #C8E6C9;
    color: #4CAF50;
}

.status-rejected {
    background-color: #FFCDD2;
    color: #F44336;
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 30px;
    color: #888;
}

.loading-spinner i {
    margin-right: 10px;
}

/* Reuse existing styles for the full screen and header */
/* .full-screen-overlay, .history-header, .history-main-content (with margin-top fix) */

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notification-item {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 5px solid var(--accent-color, #2196F3); /* Blue accent bar */
}

.notification-item:first-child {
    border-left-color: var(--primary-color, #FF5722); /* Highlight first/newest item */
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.notif-title {
    font-weight: 700;
    font-size: 1em;
    color: #333;
    margin: 0;
    flex-grow: 1;
}

.notif-date {
    font-size: 0.75em;
    color: #999;
    white-space: nowrap;
    margin-left: 10px;
}

.notif-body {
    font-size: 0.9em;
    color: #555;
    margin: 0;
}

/* Reusing existing screen styles: 
.full-screen-overlay, .history-header, .history-main-content 
(Remember to ensure .history-main-content has padding-top/margin-top to clear the fixed header) */

/* Game Category Grid Styling */
.game-category-grid {
    display: grid;
    /* Two columns on mobile, adjust for larger screens */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    padding-bottom: 20px; /* Add space at the bottom */
}

.game-category-item {
    background-color: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.game-category-item:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.game-cat-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
    border-radius: 8px; /* If icons are square images */
}

.game-cat-title {
    font-weight: 700;
    font-size: 1em;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.game-cat-meta {
    font-size: 0.75em;
    color: #777;
    margin: 0;
}


/* ======================================= */
/* 1. Full Screen Overlay & Header Styling */
/* Reusing general full-screen styles for consistency */
/* ======================================= */

/* Basic full-screen style (Apply to #game-bet-screen) */
.full-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color, #f5f5f5); /* Light background for content */
    z-index: 1000; /* Ensure it covers everything */
    display: flex;
    flex-direction: column;
    /* Use 'none' or 'hidden' class to control visibility */
}





/* Main Content Area: IMPORTANT for spacing below the fixed header */
.history-main-content {
    flex-grow: 1;
    width: 100%;
    padding: 20px;
    padding-top: 65px; /* Adjust this value to clear the fixed header height */
    overflow-y: auto;
}

/* ======================================= */
/* 2. Betting Form Specific Styles         */
/* ======================================= */

.betting-form {
    padding: 10px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Radio Button Group (Open/Close Session) */
.radio-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px !important;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #555;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.radio-label input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--primary-color, #FF5722);
}

.radio-label:has(input[type="radio"]:checked) {
    background-color: var(--primary-color, #FF5722);
    color: white;
    border-color: var(--primary-color-dark, #e64a19);
}

/* ======================================= */
/* 3. Objects Grid Styling (.obj-grid)     */
/* ======================================= */

.obj-grid {
    display: grid;
    /* 3 columns on most mobile views */
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
}

.obj {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fafafa;
}

.objborder {
    /* The object number/pana display area */
    width: 100%;
    padding: 8px 0;
    background-color: var(--secondary-color, #00ffc8); /* Blue color for the number */
    color: #000;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1;
}

.objamt {
    /* The input field for the amount */
    width: 100%;
    padding: 8px 5px;
    border: none;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 0.9em;
    /* Optional: Remove default number input spin buttons */
    -moz-appearance: textfield;
}

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

/* Total Display */
.card-input b {
    font-size: 1.1em;
}

#sum {
    color: var(--primary-color-dark, #e64a19);
    font-weight: 900;
    font-size: 1.2em;
}

/* General button style reuse (auth-btn should be defined elsewhere) */
.auth-btn.mt-4 {
    margin-top: 1.5rem;
}

.win-icon {
    color: #f1c40f; /* Yellow/Gold for trophy */
    font-size: 1.4rem;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.3));
}

.winner-amount {
    color: #2ecc71; /* Green */
    font-weight: bold;
    font-size: 1.1rem;
}

.transaction-item.approved {
    border-left: 4px solid #2ecc71; /* Green border for winners */
    background: rgba(46, 204, 113, 0.05); /* Very light green tint */
}


.rates-list {
    padding: 15px;
}

.rate-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rate-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rate-name {
    font-weight: 600;
    color: black;
    font-size: 1rem;
}

.rate-value {
    color: black; /* Gold */
    font-weight: bold;
    font-size: 1.1rem;
}

.rate-progress-bg {
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}

.rate-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8c00, #ffd700);
}

.chart-timeline {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s;
}

.chart-card:active {
    transform: scale(0.98);
}

.chart-date {
    font-size: 0.85rem;
    color: #888;
    width: 90px;
}

.chart-numbers {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.chart-numbers .pana {
    font-size: 0.9rem;
    color: #bbb;
    letter-spacing: 1px;
}

.chart-numbers .jodi {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255,255,255,0.1);
    padding: 2px 10px;
    border-radius: 6px;
    min-width: 45px;
    text-align: center;
}

/* Logic for RED Numbers */
.chart-card.is-red {
    background: rgba(231, 76, 60, 0.1); /* Light red tint */
    border-left: 4px solid #e74c3c;
}

.chart-card.is-red .jodi {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.2);
}

.chart-market-tag {
    font-size: 0.7rem;
    background: #444;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.chart-grid-container {
    padding: 10px;
    background: #1a1a1a;
}

/* Day Headers (M T W T F S S) */
.chart-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    background: #333;
    padding: 8px 0;
    font-weight: bold;
    font-size: 0.8rem;
    color: #ffd700;
    border-radius: 8px 8px 0 0;
    margin-bottom: 2px;
}

/* Weekly Row */
.chart-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #444; /* Grid line color */
    border-bottom: 1px solid #444;
}

/* Individual Cell */
.chart-cell {
    background: #fff; /* White background for the numbers like traditional charts */
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2px;
    color: #000;
}

.chart-cell.empty { background: #f9f9f9; }

/* Panas and Jodi Layout */
.cell-pana {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.65rem;
    color: #555;
    letter-spacing: -1px;
    line-height: 1;
}

.cell-jodi {
    font-size: 1.1rem;
    font-weight: 900;
    flex: 1;
    text-align: center;
}

/* Red Highlight Logic */
.cell-red .cell-jodi { color: #d63031; }
.cell-red { background: #fff1f1; }

/* Summary Cards (The "All Markets" view) */
.market-summary-list { padding: 10px; }
.summary-card {
    background: #fff;
    color: #000;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.summary-info { flex: 1; }
.m-name { font-weight: bold; display: block; font-size: 1rem; }
.m-date { font-size: 0.75rem; color: #666; }
.summary-result { flex: 2; display: flex; gap: 10px; align-items: center; font-weight: bold; }
.summary-card.is-red .j { color: red; }

/* The Weekly Grid (The "Market Detail" view) */
.grid-chart { width: 100%; border-collapse: collapse; background: #fff; }
.grid-header { 
    display: grid; grid-template-columns: repeat(7, 1fr); 
    background: #000; color: #fff; text-align: center; padding: 5px 0; font-size: 0.8rem;
}
.grid-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #ddd; }
.grid-cell { 
    height: 80px; border-right: 1px solid #ddd; display: flex; 
    align-items: center; justify-content: center; font-size: 0.8rem;
}
.grid-cell.cell-red { background: #fff0f0; color: red; }
.grid-cell.empty { color: #ccc; }

.v-pana { writing-mode: vertical-rl; text-orientation: upright; font-size: 0.65rem; color: #777; }
.v-jodi { font-size: 1.1rem; font-weight: bold; margin: 0 2px; color:darkslategray; }

.back-to-all {
    width: 90%; margin: 20px 5%; padding: 10px; 
    background: #000; color: #fff; border: none; border-radius: 5px;
}


/* Container for the pull-to-refresh indicator */
#ptr-loader {
    position: absolute;
    top: -50px; /* Hidden above the screen */
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    z-index: 9999;
}

/* The actual spinner icon */
.ptr-spinner {
    width: 25px;
    height: 25px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #3498db; /* Your theme color */
    border-radius: 50%;
    animation: ptr-rotate 0.8s linear infinite;
}

@keyframes ptr-rotate {
    to { transform: rotate(360deg); }
}

/* Prevent the browser's default refresh/bounce (important for WebView) */
body {
    overscroll-behavior-y: auto;
    position: relative;
    transition: transform 0.2s ease;
}