/* Main Container with Single Background */
.jackpot-container {
    position: relative; /* Needed for positioning content if required */
    width: 100%;
    max-width: 1400px; /* Max width for the component */
    /* --- Crucial Background Styles --- */
    background-image: url('/winnings.svg'); /* <== CHANGE THIS PATH */
    background-size: cover; /* Or 'cover' - Adjust as needed */
    background-repeat: no-repeat;
    background-position: center center;
    /* --- Aspect Ratio Control (Optional but Recommended) --- */
    /* Calculate aspect ratio: (height / width) * 100% */
    /* Example: If your image is 800px wide and 450px high: (450 / 800) * 100 = 56.25% */
    padding-top: 56.25%; /* <== ADJUST THIS based on your image's aspect ratio */
    height: 0; /* Required when using padding-top for aspect ratio */
    /* --- Fallback minimum height if aspect ratio isn't used --- */
    /* min-height: 450px; */
    display: flex; /* Use flexbox to center the content block */
    justify-content: center;
    align-items: center; /* Vertically center content block */
    overflow: hidden; /* Hide anything extending outside */
    /* border-radius: 10px; Optional rounding */
}

/* Content Area (Text and Amount Bar) */
.jackpot-content {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    text-align: center;
    
    /* Background box */
    background: rgba(0, 0, 0, 0.9); /* Semi-transparent black */
    padding: 20px;
    border-radius: 12px;

    /* Shadow */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

    color: #fff; /* Ensures text stands out */
    
    /* Optional glass effect */
   
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */

    /* Text color for contrast */
    color: #2B2B2B; /* Dark text for readability on gold */
    font-weight: bold;
}


/* Jackpot Text Styling (Same as before, adjust font size if needed) */
.jackpot-text {
    margin-bottom: 20px; /* Space between text and amount bar */
    line-height: 1;
}

.jackpot-text span {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    color: #f0e130;
    -webkit-text-stroke: 3px #4b8a08;
    text-stroke: 3px #4b8a08;
    paint-order: stroke fill;
    text-shadow: 4px 4px 0px #2d5205, 0 0 15px rgba(255, 255, 0, 0.3);
}

.text-big {
    /* Using vw units helps text scale with viewport width */
    /* Adjust min/max values based on the background image design */
    font-size: clamp(3rem, 10vw, 6rem);
}

.text-jackpot {
    font-size: clamp(4rem, 13vw, 8rem);
    margin-top: -1.5vw; /* Adjust overlap based on font and background */
}

/* Jackpot Amount Display (Mostly same as before) */
.jackpot-amount-display {
    background: linear-gradient(180deg, #8a2be2, #6a1a9c);
    border-radius: 50px;
    padding: 10px 30px; /* Adjust padding */
    margin: 0 auto;
    display: inline-block;
    border: 4px solid #daa520; /* Adjust border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2);
    position: relative; /* For lights */
    line-height: 1; /* Ensure elements align well vertically */
}

.currency {
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Responsive size */
    color: #ffd700;
    margin-right: 5px;
    vertical-align: middle;
    font-weight: normal;
    font-family: sans-serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.amount {
    font-size: clamp(1.8rem, 5vw, 3rem); /* Responsive size */
    color: #fff05a;
    font-weight: bold;
    vertical-align: middle;
    letter-spacing: 1px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

/* Lights on the amount bar (Same positioning logic) */
.light {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f0e68c;
    border-radius: 50%;
    box-shadow: 0 0 5px #fff, 0 0 10px #ffd700;
}
.light-1 { top: -7px; left: 15%; }
.light-2 { top: -7px; left: 35%; }
.light-3 { top: -7px; left: 65%; }
.light-4 { top: -7px; left: 85%; }
.light-5 { bottom: -7px; left: 15%; }
.light-6 { bottom: -7px; left: 35%; }
.light-7 { bottom: -7px; left: 65%; }
.light-8 { bottom: -7px; left: 85%; }


/* --- Responsiveness Adjustments --- */

@media (max-width: 768px) {
    .jackpot-content {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    text-align: center;
    
    /* Background box */
    background:transparent; /* Semi-transparent black */
    padding: 20px;
    border-radius: 12px;

   
    color: #fff; /* Ensures text stands out */
    
    
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */

    /* Text color for contrast */
    color: #2B2B2B; /* Dark text for readability on gold */
    font-weight: bold;
}
}

@media (max-width: 768px) {
    .jackpot-content {
        width: 46%;
        margin-top: -24px;
    }

    .jackpot-text span {
    display: none;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    color: #f0e130;
    -webkit-text-stroke: 3px #4b8a08;
    text-stroke: 3px #4b8a08;
    paint-order: stroke fill;
    text-shadow: 4px 4px 0px #2d5205, 0 0 15px rgba(255, 255, 0, 0.3);
}
    .jackpot-amount-display {
        padding: 8px 25px;
        border-width: 3px;
    }
    .light { width: 8px; height: 8px; }
    .light-1, .light-5 { left: 12%; }
    .light-4, .light-8 { left: 88%; }
}

@media (max-width: 480px) {
     .jackpot-amount-display {
        padding: 3px 6px;
        border-width: 3px;
        border-radius: 30px;
    }
    .currency { margin-right: 3px;}
    .light { width: 6px; height: 6px; }
    .light-1, .light-5 { left: 10%; }
    .light-4, .light-8 { left: 90%; }
}
.auto-scroll-container {
  background-color: #3c7c3c;
  padding: 10px 0; /* No horizontal padding needed if overflow is hidden */
  overflow: hidden; /* Hide anything outside the container */
  white-space: nowrap; /* Keep items on one line */
  position: relative; /* Needed for positioning */
  width: 100%; /* Or a specific width */
}

.scroll-content-wrapper {
  display: inline-block; /* Treat the wrapper as one long inline block */
  /* Animation */
  animation: marquee 30s linear infinite; /* Adjust duration (30s) as needed */
}

/* Pause animation on hover */
.auto-scroll-container:hover .scroll-content-wrapper {
  animation-play-state: paused;
}

/* Keyframes for the marquee animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* Move left by the width of the ORIGINAL set of items */
    /* You'll need to calculate or estimate this value */
    transform: translateX(-50%); /* If you duplicated EXACTLY once */
    /* Example: If original items total 660px width, use translateX(-660px) */
  }
}

/* Item styling (same as before) */
.scroll-item {
  display: inline-block;
  vertical-align: top;
  background-color: #444;
  border-radius: 15px;
  border: 1px solid #555;
  width: 100px;
  padding: 15px 5px;
  margin: 0 5px;
  text-align: center;
  color: white;
  white-space: normal; /* Allow text wrap inside item */
  /* Add other styles: img, p */
}

.scroll-item img {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px auto;
  object-fit: contain;
}

.scroll-item p {
  margin: 0;
  font-size: 14px;
  font-family: 'YourBengaliFont', sans-serif;
}

/* Add aria-hidden="true" to the duplicated items for accessibility */
[aria-hidden="true"] {
   /* Optional: you might not need specific styles if visually identical */
}

.grid-bg {
padding: 10px;
}
.game-grid {
    display: grid;
    /* Creates responsive columns: min 150px, max 1fr (fills space) */
    grid-template-columns: repeat(auto-fit, minmax(140px, 2fr));
    gap: 20px; /* Space between grid items */
    max-width: 1200px; /* Optional: max width for the grid */
    margin: 0 auto; /* Center the grid */
}

.game-card {
    background-color: #3a4c40; /* Slightly lighter card background */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Clips content like image corners and positioned elements */
    position: relative; /* Needed for absolute positioning of children */
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    display: flex;
    flex-direction: column; /* Stack image and title vertically */
    text-decoration: none; /* Remove underline if cards are links */
}

.game-card:hover {
    transform: translateY(-3px); /* Slight lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-image {
    display: block;
    width: 100%;
    height: 150px; /* Adjust height as needed */
    object-fit: cover; /* Scales image to cover area without distortion */
    border-bottom: 1px solid #4a5c50; /* Optional separator line */
}

.favorite-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    border: none;
    border-radius: 50%; /* Circular */
    width: 32px;
    height: 32px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Heart icon size */
    padding: 0;
    transition: background-color 0.2s ease;
}

.favorite-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Style for the filled heart state */
.favorite-button .fa-solid {
    color: #ff6b6b; /* Red color for favorited heart */
}


.game-label {
    position: absolute;
    bottom: 40px; /* Position above the title area */
    left: 0; /* Aligned to the left edge */
    padding: 4px 15px 4px 10px; /* top right bottom left padding */
    font-size: 12px;
    font-weight: bold;
    color: #222; /* Dark text on label */
    border-top-right-radius: 12px; /* Curve top-right */
    border-bottom-right-radius: 12px; /* Curve bottom-right */
    z-index: 1; /* Ensure it's above the image if needed */
}

/* Specific label styles */
.label-jl {
    background-color: #f0c04a; /* Gold color for JL */
}

.label-spribe {
    background-color: #e9af50; /* Slightly different gold/brown for Spribe */
    /* The exact scooped shape for Spribe is complex - often done with clip-path or SVG */
}

.game-title {
    padding: 12px 10px;
    text-align: center;
    font-size: 14px;
    margin: 0; /* Remove default paragraph margin */
    min-height: 30px; /* Ensure space even for short titles */
    line-height: 1.3;
    background-color: #3a4c40; /* Ensure background covers bottom */
}

/* Use Bengali font for titles marked with lang-bn */
.lang-bn {
    font-family: 'Hind Siliguri', sans-serif;
    font-weight: 700; /* Often Bengali titles look better bold */
}


.game-categories-container {
    display: flex;
    gap: 15px; /* Space between sections */
    width: 100%;
    padding: 20px;
    background-color: #3c7c3c;
    /* max-width: 900px; Max width for larger screens */
}

.game-section {
    flex: 1; /* Each section takes equal space */
    aspect-ratio: 16 / 7; /* Maintain aspect ratio similar to image */
    border-radius: 12px;
    position: relative;
    overflow: hidden; /* Keep content and corners neat */
    cursor: pointer; /* Indicate interactivity */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

.game-section:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Specific Section Backgrounds (using gradients) */
.slots {
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%); /* Green gradient */
}

.live-casino {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Blue/Cyan gradient */
}

.fish {
    background: linear-gradient(135deg, #ffb75e 0%, #ed8f03 100%); /* Orange gradient */
}

.section-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Push title left, image right */
}


.section-title {
    font-size: clamp(1.1rem, 3vw, 2rem); /* Responsive font size */
    font-weight: bold;
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Specific Title Colors */
.slots .section-title {
    color: #FFD700; /* Gold */
}

.live-casino .section-title {
    color: #90EE90; /* Light Green / Lime */
}

.fish .section-title {
    color: #40E0D0; /* Turquoise / Cyan */
}

.section-image {
    max-height: 85%;
    max-width: 50%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image fits well */
    z-index: 1;
    /* Prevent image from shrinking too much */
    min-width: 50px;
}

/* Optional Decorative Cubes */
.deco-cube {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    border-radius: 3px;
    opacity: 0.7;
    z-index: 0; /* Behind content */
}
.slots .deco-cube { background-color: rgba(200, 255, 200, 0.25); }
.live-casino .deco-cube { background-color: rgba(180, 220, 255, 0.25); }
.fish .deco-cube { background-color: rgba(255, 220, 180, 0.25); }

/* Cube Positions (Example - adjust as needed) */
.deco-cube.cube1 { top: 15%; left: 8%; transform: rotate(20deg); width: 12px; height: 12px;}
.deco-cube.cube2 { bottom: 10%; left: 25%; transform: rotate(-15deg); width: 18px; height: 18px;}
.deco-cube.cube3 { top: 30%; right: 5%; transform: rotate(30deg); width: 10px; height: 10px; opacity: 0.5;}
/* Add more cubes or adjust positions/sizes/rotations for each section if desired */
.live-casino .deco-cube.cube1 { top: 20%; left: 55%; }
.fish .deco-cube.cube2 { bottom: 15%; left: 5%; }


/* --- Responsive Design --- */

/* Mobile Styles (e.g., screens below 768px) */
@media (max-width: 768px) {
    .game-categories-container {
        flex-direction: column; /* Stack sections vertically */
        gap: 10px; /* Adjust gap for vertical layout */
        max-width: 450px; /* Adjust max width for mobile */
        padding: 0 10px; /* Add horizontal padding */
    }

    .game-section {
         /* Adjust aspect ratio or use min-height for mobile */
        /* aspect-ratio: 2 / 1;  */
         min-height: 100px;
    }

    .section-content {
        padding: 10px;
    }

    .section-title {
        /* Font size already responsive with clamp() */
        /* Adjust position slightly if needed */
    }

    .section-image {
        max-height: 80%;
        max-width: 45%;
    }

    /* Adjust cube positions or hide them on mobile if too cluttered */
    .deco-cube {
        /* Example: Make cubes smaller on mobile */
        /* width: 10px; */
        /* height: 10px; */
        /* Or hide them: display: none; */
    }
}

/* Smaller Mobile Styles (e.g., screens below 480px) */
@media (max-width: 480px) {
     .game-categories-container {
        max-width: 100%; /* Use full width */
    }
     .game-section {
        min-height: 90px;
    }
     .section-image {
        max-width: 40%; /* Make image slightly smaller */
        min-width: 40px;
    }
     .deco-cube {
        display: none; /* Hide cubes on very small screens */
     }
}

/* Section Container */
.play-with-celebrity {
    max-width: 1267px; /* Optional: Limit max width on very large screens */
    background-color: #2a3a2a;
    padding: 15px;
    margin: 0 auto;   /* Center the section */
}

/* Header Styling */
.celebrity-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.dealer-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Make it circular */
    margin-right: 15px;
    object-fit: cover; /* Ensure image covers the area */
    background-color: #445544; /* Placeholder background */
    border: 1px solid #667766;
}

.celebrity-header h2 {
    font-size: 1.5em; /* Adjust size as needed */
    font-weight: normal;
    color: #ffffff;
    margin-right: auto; /* Pushes the 'More' button to the right */
}

.more-button {
    background-color: #445544; /* Button background */
    color: #ffffff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid #667766;
    transition: background-color 0.2s ease;
}

.more-button:hover {
    background-color: #556655;
}


/* Game List - Mobile First (Horizontal Scroll) */
.game-list {
    display: flex; /* Lays out items in a row */
    overflow-x: auto; /* Enables horizontal scrolling */
    overflow-y: hidden; /* Hides vertical scrollbar */
    padding-bottom: 15px; /* Space for scrollbar if it appears */
    gap: 15px; /* Space between game items */
    /* Improve scrolling experience on touch devices */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #556655 #2a3a2a; /* For Firefox */
}
/* Style scrollbar for Webkit browsers (Chrome, Safari) */
.game-list::-webkit-scrollbar {
  height: 8px;
}
.game-list::-webkit-scrollbar-track {
  background: #2a3a2a;
  border-radius: 4px;
}
.game-list::-webkit-scrollbar-thumb {
  background-color: #556655;
  border-radius: 4px;
}


/* Individual Game Item Styling */
.game-item {
    flex: 0 0 auto; /* Prevents items from shrinking */
    width: 150px; /* Fixed width for items in the scrolling row */
    text-align: left; /* Align text to the left */
}

.game-thumbnail-container {
    position: relative; /* Needed for absolute positioning of the overlay */
    border-radius: 8px; /* Rounded corners for the thumbnail area */
    overflow: hidden; /* Clips the image to the rounded corners */
    margin-bottom: 8px; /* Space below image */
    background-color: #444; /* Background while image loads */
}

.game-thumbnail {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    aspect-ratio: 3 / 2; /* Enforce an aspect ratio (optional but good) */
    object-fit: cover; /* Cover the area, cropping if needed */
}

.play-now-overlay {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px; /* Pill shape */
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping */
}

.game-info {
    display: flex;
    align-items: center; /* Vertically align icon and title */
}

.favorite-icon {
    fill: #e74c3c; /* Red color for the heart */
    margin-right: 5px; /* Space between icon and title */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.game-title {
    font-size: 0.9em;
    color: #e0e0e0;
    /* Optional: handle long titles */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}


/* Desktop Responsiveness (using a media query) */
/* Adjust breakpoint (768px) as needed */
@media (min-width: 768px) {
    .game-list {
        /* Switch to a wrapping grid layout on larger screens */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Create responsive columns */
        gap: 20px; /* Adjust gap for grid */
        overflow-x: visible; /* Disable horizontal scrolling */
        padding-bottom: 0; /* No need for scrollbar padding */
    }

    .game-item {
        width: auto; /* Let the grid control the width */
         /* Reset flex property if previously set */
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 1;
    }

    .celebrity-header h2 {
        font-size: 1.8em; /* Slightly larger title on desktop */
    }
}

/* Section Container */
.all-other-lottery {
    background-color: #3c7c3c;
    max-width: 1300px;
    padding: 20px;
    margin: 0 auto;
}

/* Header Styling */
.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.category-icon {
    width: 40px;
    height: 40px;
    /* Using clip-path for the slight triangular cut-out effect */
    /* Adjust polygon points as needed for exact shape */
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
    margin-right: 15px;
    object-fit: cover;
    background-color: #445544; /* Placeholder background */
}

.category-header h2 {
    font-size: 1.5em;
    font-weight: normal;
    color: #ffffff;
    margin-right: auto; /* Pushes 'More' button right */
}

.more-button {
    background-color: transparent; /* Transparent background */
    color: #ffffff;
    padding: 6px 15px; /* Slightly smaller padding */
    text-decoration: none;
    border-radius: 15px; /* More rounded corners for the button */
    font-size: 0.9em;
    border: 1px solid #889988; /* Lighter border */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.more-button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
    border-color: #ffffff;
}


/* Game List - Mobile First (Horizontal Scroll) */
.game-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    gap: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #556655 #2a3a2a;
}
.game-list::-webkit-scrollbar { height: 8px; }
.game-list::-webkit-scrollbar-track { background: #2a3a2a; border-radius: 4px; }
.game-list::-webkit-scrollbar-thumb { background-color: #556655; border-radius: 4px; }


/* Individual Game Item Styling */
.game-item {
    flex: 0 0 auto;
    width: 150px; /* Adjust width as needed for mobile */
    text-align: left;
}

.game-thumbnail-container {
    position: relative; /* Crucial for positioning overlays */
    border-radius: 12px; /* More rounded corners like the image */
    overflow: hidden;
    margin-bottom: 8px;
    background-color: #444;
    display: block; /* Needed for aspect-ratio to work reliably */
    /* Adjust aspect ratio if needed, 300/250 is 6/5 */
    aspect-ratio: 6 / 5;
}

.game-thumbnail {
    display: block;
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover;
}

/* Provider Logo Overlay (Top Right) */
.provider-logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px; /* Adjust size */
    height: 30px; /* Adjust size */
    border-radius: 4px; /* Slightly rounded */
    object-fit: contain; /* Or cover, depending on logo aspect ratio */
    background-color: rgba(255, 0, 0, 0.8); /* Example red background */
    padding: 2px; /* Small padding within the logo background */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Action Icons Container (Bottom Right, Stacked) */
.action-icons {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column; /* Stack icons vertically */
    gap: 6px; /* Space between stacked icons */
    align-items: center; /* Center icons if they have different widths */
}

.action-icon {
    width: 32px; /* Adjust size */
    height: 32px; /* Adjust size */
    border-radius: 8px; /* Rounded corners for icons */
    background-color: rgba(154, 205, 50, 0.9); /* Example greenish background */
    display: flex; /* To potentially center content inside if needed */
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    /* Add styles for the actual icon image/font inside if needed */
    object-fit: contain; /* Or remove if using text placeholders */
    font-size: 10px; /* For text placeholders */
    color: #000;
}

.game-info {
    display: flex;
    align-items: center;
}

.favorite-icon {
    fill: #e74c3c;
    margin-right: 5px;
    flex-shrink: 0;
}

.game-title {
    font-size: 0.9em;
    color: #e0e0e0;
    /* Handle long titles */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow title to take remaining space */
}


/* Desktop Responsiveness */
@media (min-width: 768px) {
    .game-list {
        display: grid;
        /* Adjust minmax for desired desktop item size */
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .game-item {
        width: auto;
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 1;
    }

    .category-header h2 {
        font-size: 1.8em;
    }

     /* Optional: Slightly larger items on desktop */
    .provider-logo {
        width: 35px;
        height: 35px;
    }
    .action-icon {
        width: 35px;
        height: 35px;
    }
}


/* Section Styles */
.sports-section {
    max-width: auto; /* Adjust max-width as needed */
    margin: 0 auto;
    background-color: #3c7c3c;

    padding: 20px 10px;
}

.sports-section h2 {
    font-size: 2em;
    color: white;
    margin-bottom: 25px;
    padding-left: 10px; /* Align with cards */
    /* You can add the green icon using a ::before pseudo-element if desired */
}

/* Cards Container - Flexbox */
.sports-cards-container {
    display: flex;
    flex-wrap: wrap; /* Important for responsiveness */
    justify-content: center; /* Center cards horizontally */
    gap: 25px; /* Space between cards */
}

/* Individual Card Styles */
.sports-card {
    background-color: #282828; /* Dark background for the card */
    border-radius: 8px;
    width: 200px; /* Base width for desktop */
    overflow: hidden; /* Hide overflow from image area if needed */
    position: relative; /* Needed for absolute positioning of player image */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    /* Subtle perspective effect (optional) */
    /* transform: perspective(1000px) rotateY(-1deg); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack image area and info vertically */
}

.sports-card:hover {
    transform: scale(1.03) /* perspective(1000px) rotateY(0) */; /* Adjust hover effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Card Image Area (Frame & Background) */
.card-image-area {
    height: 160px; /* Adjust height as needed */
    position: relative; /* Context for the absolute positioned player */
    background-color: #333; /* Fallback */
    /* Add frame styling here (borders, box-shadow, or background image) */
    border: 5px solid #444; /* Simple border frame */
    border-bottom: none; /* Remove bottom border */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* Inset shadow for depth */
    border-radius: 8px 8px 0 0; /* Match top corners */
    margin: 5px 5px 0 5px; /* Spacing to fake the outer metallic border */
}

.card-frame-background {
    /* You could add a background image here for the stadium/sky effect */
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)), url('placeholder-stadium-bg.jpg') center center / cover no-repeat;
    /* Make sure this div covers the image area */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* Behind the player image */
}

/* Player Image Styles */
.player-image {
    display: block;
    height: 190px; /* Taller than the image area to 'pop out' */
    width: auto;
    max-width: 90%; /* Prevent image from getting too wide */
    position: absolute;
    bottom: -15px; /* Position relative to the bottom of card-image-area */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* Above the frame background */
    object-fit: contain; /* Adjust as needed (contain or cover) */
    /* Optional: drop shadow for the player */
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.6));
}


/* Card Info Area (Label & Logo) */
.card-info {
    background-color: #1e1e1e; /* Slightly different dark shade */
    padding: 15px 10px 10px 10px; /* Top padding more to accommodate label */
    text-align: center;
    position: relative; /* To position label */
    border: 5px solid #444; /* Simple border frame */
    border-top: none;
    margin: 0 5px 5px 5px; /* Spacing to fake the outer metallic border */
    border-radius: 0 0 8px 8px; /* Match bottom corners */
    min-height: 60px; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Under the player image pop-out */
}

/* Sports Label */
.sports-label {
    background-color: #0a7cff; /* Blue label */
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block; /* Allows margin */
    position: absolute;
    top: -10px; /* Position it slightly above the info area */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Above the card info area */
    white-space: nowrap;
}

/* Provider Logo */
.provider-logo {
    margin-top: 15px; /* Space below the label */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.provider-logo img {
    height: 20px; /* Adjust logo size */
    max-width: 100px; /* Prevent oversized logos */
    vertical-align: middle; /* Align if text is next to it */
}
.provider-logo span {
    font-size: 0.9em;
    font-weight: bold;
    color: #ccc;
}


/* --- Responsiveness --- */

/* Tablet */
@media (max-width: 768px) {
    .sports-card {
        width: calc(50% - 30px); /* 2 cards per row, considering gap */
        /* Adjust width calc based on exact gap */
    }
    .sports-section h2 {
        font-size: 1.8em;
        text-align: center;
        padding-left: 0;
    }
}

.media-box {
  width: 100%;
  height: 349px; /* Set desired height */
  overflow: hidden;
  position: relative;
}

.media-box img,
.media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures content fills the box without distortion */
  display: block;
}
/* Mobile */
@media (max-width: 576px) {
    /* body {
        padding: 10px;
    } */
    .sports-card {
        width: calc(100% - 20px); /* 1 card per row */
        max-width: 300px; /* Optional: prevent card from getting too wide */
    }

    .sports-section h2 {
        font-size: 1.5em;
    }

    .card-image-area {
        height: 140px;
    }

    .player-image {
        height: 160px;
    }

    .provider-logo img {
        height: 18px;
    }
     .provider-logo span {
        font-size: 0.8em;
    }

    .media-box img,
.media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures content fills the box without distortion */
  display: block;
}

.media-box {
    width: 100%;
    height: 137px;
    overflow: hidden;
    position: relative;
}
}

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader img {
  width: 120px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.6; }
}