/* ------------------------------
   Updated Color Scheme
------------------------------ */
:root {
    --primary-color: #ffab10; /* Halka orange jo yellow ki taraf hai */
    --secondary-color: #fffb10; /* Yellow */
    --dark-color: #000000; /* Kala text */
    --light-gray: #f5f5f5;
    --background-color: #FFFFFF; /* Safed background */
    --font-size-small: 0.875rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
    --navbar-height: 60px; /* Navbar ki unchai */
    --gradient-color: linear-gradient(to right, #ffab10, #fffb10, #ffab10); /* Orange-Yellow-Orange gradient */
    
    /* Reusability ke liye aur variables */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --border-radius: 0.3125rem; /* 5px */
    --box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    --hover-color: #ffd700; /* Gold color for hover */
}

/* ------------------------------
   Global Reset
------------------------------ */
/* Sare elements ke liye margin aur padding reset karo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------
   Prevent Horizontal Overflow
------------------------------ */
html, body {
    overflow-x: hidden;
}

/* ------------------------------
   Body Styling
------------------------------ */
body {
    background-color: var(--background-color); /* Safed background */
    color: var(--dark-color); /* Kala text */
    font-family: var(--font-family);
    font-weight: bold; /* Bold font */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 8rem; /* Fixed navbar + fixed-header height */
    padding-bottom: 70px; /* Fixed bottom nav ke peeche content na chhupe */
    overflow-x: hidden; /* Horizontal overflow hide karo */
}

/* ------------------------------
   Blinking Website Name Styling
   ------------------------------ */
/* Fixed Header Styling */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001; /* Ensure it's above other elements */
    background: #ffffff; /* White background for the header */
    border-bottom: 1px solid #ddd; /* Optional border for separation */
}

/* Scrolling Information Line Styling */
.info-line {
    background: #ffffff; /* White background for information line */
    color: #000; /* Black text */
    padding: 0.5rem 0; /* Inner spacing */
    overflow: hidden; /* Hide overflow for scrolling effect */
    border-bottom: 1px solid #ddd; /* Optional border below */
}

.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
    align-items: center; /* Vertically center the text */
}

.marquee p {
    display: inline-block;
    animation: marquee-scroll 60s linear infinite; /* Slower scroll duration */
    margin: 0; /* Remove default margin */
    padding-left: 100%; /* Ensure smooth scrolling starts outside the view */
    font-size: 1.2rem; /* Adjust font size for better readability */
    color: #000; /* Black text for better contrast */
}

/* Scrolling Animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(100%); /* Start off-screen */
    }
    100% {
        transform: translateX(-100%); /* End off-screen */
    }
}


/* "SATTA KING" Blinking Header Styling */
.blinking-website-name {
    text-align: center;
    padding: 1.5rem; /* Larger padding for a bigger box */
    background: var(--gradient-color); /* Gradient background */
    color: #000; /* Black text */
}

.blinking-text {
    animation: blink 2s ease-in-out infinite; /* Blinking animation */
    color: #000; /* Black text */
    text-decoration: none; /* Remove underline */
    font-size: 2rem; /* Increase text size */
    font-weight: bold; /* Make text bold for better visibility */
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .blinking-website-name {
        padding: 5rem; /* Ensure the box still looks large */
    }

    .blinking-text {
        font-size: 6rem; /* Slightly smaller text for mobile */
    }
}

@media (max-width: 480px) {
    .blinking-website-name {
        padding: 2rem; /* Adjust box padding for smaller devices */
    }

    .blinking-text {
        font-size: 5.5rem; /* Adjust text size for phones */
    }
}


/* Prevent Content Overlap with Fixed Header */
body {
    padding-top: 8rem; /* Adjust based on total height of fixed header */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .info-line p {
        font-size: 1rem; /* Smaller font on mobile */
    }

    .blinking-website-name {
        font-size: 5.5rem; /* Smaller font size on mobile */
    }
}

/* Accessibility: Respect User's Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .info-line p, .blinking-text {
        animation: none;
        transform: translateX(0); /* Static content */
    }
}
/* ------------------------------
   Container Styling
------------------------------ */
/* Full Width for Container */
.container,
.container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}

/* ------------------------------
   Hero Section Styling
------------------------------ */
.hero {
    background-color: var(--background-color); /* Safed background */
    color: var(--dark-color); /* Kala text */
    padding: calc(1.5rem + var(--navbar-height)) 0 1.5rem 0; /* Top padding navbar height ke hisaab se adjust karo */
    text-align: center;
    width: 100%;
    font-weight: bold;
    flex: 1; /* Main content ko grow karne do */
}

.hero-content {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    width: 100%;
}

/* Current Time Section */
#current-time {
    color: var(--primary-color); /* Halka orange text */
    font-size: var(--font-size-large);
    margin-bottom: 1rem;
}

/* Game Name in Hero Section */
.hero .game-name {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.0rem;
}

/* Result Value in Hero Section */
.hero .hero-result {
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--dark-color) !important; /* Black color */
    text-align: center; /* Center text */
}

/* Promotional Hindi Text */
.hero h2 {
    color: var(--dark-color); /* Kala text */
    margin-bottom: 1.5rem; /* Heading ke neeche space */
}

/* ------------------------------
   Games Results Table Styling
------------------------------ */
/* Games Results Section */
.games-results-table .highlight {
    color: black !important;
    font-weight: bold;
    text-align: center; /* Text center karo */
    display: block; /* Full width lene ke liye */
}

.games-results-table {
    table-layout: auto;
    margin-bottom: 0;
    border-collapse: collapse;
    width: 100%;
    color: var(--dark-color);
    border: 0.125rem solid var(--dark-color); /* 2px */
}

.games-results-table th,
.games-results-table td {
    padding: 0.75rem; /* 12px */
    border: 0.0625rem solid var(--dark-color); /* 1px */
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    vertical-align: middle; /* Ensure vertical alignment */
}

.games-results-table th {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

.games-results-table td {
    color: var(--dark-color);
}

/* Hover effect on table rows */
.games-results-table tbody tr {
    background-color: var(--background-color);
}

.games-results-table tbody tr:hover {
    background-color: var(--light-gray);
}

/* Centering content within result cells */
.result-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Highlight the First Column Data Cells */
.games-results-table td:first-child {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    vertical-align: top;
    border: 0.0625rem solid var(--dark-color); /* 1px */
}

/* Customized "Record Chart" Link */
.record-chart-link {
    font-size: 0.75rem; /* 12px */
    color: var(--dark-color);
    text-decoration: underline;
}

.record-chart-link i {
    margin-right: 0.125rem; /* 2px */
}

/* Star Image Centering */
.star-image {
    max-width: 100%;
    height: auto;
}

/* ------------------------------
   Gradient Box Utility Class
------------------------------ */
.gradient-box {
    background: var(--gradient-color); /* Apply the defined gradient */
    padding: 2rem; /* Inner spacing */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--box-shadow); /* Subtle shadow for depth */
    margin-bottom: 2.5rem; /* Space below the box */
    color: var(--dark-color); /* Text color */
}

.gradient-box h3 {
    font-size: var(--font-size-large);
    margin-bottom: 1.5rem; /* Space below the heading */
}

.gradient-box a.btn-link {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    color: var(--dark-color); /* Button text color */
    padding: 0.5rem 1rem; /* Button padding */
    border-radius: var(--border-radius); /* Rounded buttons */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    margin: 0.25rem; /* Space between buttons */
}

.gradient-box a.btn-link:hover {
    background-color: var(--hover-color); /* Hover background color */
    color: #ffffff; /* Hover text color */
    text-decoration: none; /* Remove underline on hover */
}

.gradient-box p.no-record-charts {
    font-size: var(--font-size-medium);
    color: var(--dark-color);
    margin-top: 1rem;
}


/* ------------------------------
   Yearly Record Chart Heading Styling
------------------------------ */
.result-chart-heading {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    padding: 0.9375rem; /* 15px */
    border-radius: var(--border-radius);
    text-align: center;
    font-size: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 1.25rem; /* 20px */
    white-space: normal;
}

/* ------------------------------
   Accordion Adjustments
------------------------------ */
.accordion-button {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

.accordion-button:not(.collapsed) {
    background-color: #e6c200;
    color: var(--dark-color);
}

.accordion-body {
    background-color: var(--light-gray);
    color: var(--dark-color);
}

/* ------------------------------
   Responsive Images
------------------------------ */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ensure tables are responsive and do not break layout */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Hide overflow for marquee */
.marquee-container {
    overflow: hidden;
}

/* ------------------------------
   Smooth Scroll Behavior
------------------------------ */
html {
    scroll-behavior: smooth;
}

/* ------------------------------
   Fixed-Bottom Navigation Buttons Styling
------------------------------ */

/* Fixed-Bottom Navigation Styles */
.fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: row; /* Ensure row direction */
    justify-content: space-around; /* Evenly distribute buttons */
    align-items: center;
    white-space: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
    
    /* Scrollbar Hiding */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.fixed-bottom-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

/* Navigation Button Styling */
.fixed-bottom-nav .nav-btn {
    color: #ffffff; /* Text color white */
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #007bff; /* Default button color */
    border-radius: 8px; /* Rounded corners */
    padding: 8px 12px; /* Adjust padding */
    flex-shrink: 0; /* Prevent shrinking */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Home Button Specific Styling */
.fixed-bottom-nav .home-btn {
    background-color: #28a745; /* Green color for Home button */
    padding: 10px 12px; /* Increased padding */
    font-size: 0.85rem; /* Increased font size */
}

.fixed-bottom-nav .home-btn i {
    font-size: 1.75rem; /* Increased icon size */
}

.fixed-bottom-nav .home-btn .btn-label {
    font-size: 0.85rem; /* Increased label size */
}

/* Hover Effect for All Buttons */
.fixed-bottom-nav .nav-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color: #ffffff; /* Ensure text remains white */
}

/* Hover Effect for Home Button */
.fixed-bottom-nav .home-btn:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Active Button Styling */
.fixed-bottom-nav .nav-btn.active {
    color: #ffffff; /* Active button text color */
    border-bottom: 2px solid #ffffff; /* Active button underline */
}

/* Responsive Adjustments for Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .fixed-bottom-nav {
        padding: 8px 0;
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Reduce icon size */
    }

    .fixed-bottom-nav .btn-label {
        font-size: 0.7rem; /* Reduce label size */
    }

    .fixed-bottom-nav .home-btn {
        padding: 19px 19px; /* Slightly reduce padding */
        font-size: 0.8rem; /* Slightly reduce font size */
    }

    .fixed-bottom-nav .home-btn i {
        font-size: 1.5rem; /* Slightly reduce icon size */
    }

    .fixed-bottom-nav .home-btn .btn-label {
        font-size: 0.8rem; /* Slightly reduce label size */
    }
}

/* Responsive Adjustments for Very Small Screens */
@media (max-width: 426px) {
    .fixed-bottom-nav .btn-label {
        display: none; /* Hide labels on very small screens */
    }

    .fixed-bottom-nav .nav-btn i {
        font-size: 1.25rem; /* Reduce icon size */
    }
}

/* Optional: Additional Button Styling */
.fixed-bottom-nav .nav-btn {
    min-width: 50px; /* Set a smaller minimum width */
}

/* Optional: Icon Hover Animation */
.fixed-bottom-nav .nav-btn i {
    transition: transform 0.3s ease;
}

.fixed-bottom-nav .nav-btn:hover i {
    transform: scale(1.2); /* Scale up on hover */
}

/* ------------------------------
   Additional Section Styling
------------------------------ */

/* Agents' Cards Styling */
#agents .service-card,
#agents2 .service-card {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
}

/* Additional Styles for Headings */
.heading-box {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    border-radius: 0.5rem;
    border: 0.125rem solid var(--dark-color);
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}

.heading-box h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
}

/* ------------------------------
   Responsive Text Adjustments
------------------------------ */

/* Base font size for desktop and tablet */
.result-chart-heading,
.games-results-table th,
.games-results-table td {
    font-size: 1.25rem;
}

/* For mobile devices (less than 768px) */
@media (max-width: 767px) {
    /* Adjust Navbar Brand Font Size */
    .blinking-website-name {
        font-size: 2rem; /* Reduce font size for mobile */
        padding: 0.3rem 0.6rem; /* Adjust padding */
    }

    .blinking-text {
        font-size: clamp(1.5rem, 3vw, 2.5rem); /* Responsive font size */
    }

    /* Result chart heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1.1rem;
    }

    /* Table headers ki font size adjust karo */
    .games-results-table th {
        font-size: 0.9rem;
    }

    /* Table cells ki font size adjust karo */
    .games-results-table td {
        font-size: 0.9rem;
    }

    /* Optional: Mobile par button ki font size adjust karo */
    .btn {
        font-size: 0.9rem;
    }

    /* Blogs section mein heading ki font size adjust karo */
    .result-chart-heading {
        font-size: 1rem;
    }
}

/* ------------------------------
   Blinking Text Hover Pause
------------------------------ */
.blinking-website-name:hover .blinking-text {
    animation-play-state: paused;
}

/* ------------------------------
   Accessibility: Focus States
------------------------------ */
.navbar-brand:focus .blinking-text,
.fixed-bottom-nav .nav-btn:focus .btn-label,
.language-menu .lang-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ------------------------------
   Footer Styling
------------------------------ */
footer {
    background: var(--gradient-color); /* Updated gradient */
    color: var(--dark-color);
    padding: 1.25rem 0; /* 20px 0 */
    text-align: center;
    margin-top: 2.5rem; /* 40px */
    width: 100%;
    font-size: 0.9rem;
}

footer p {
    font-size: 0.9rem;
}

/* ------------------------------
   Highlight Class
------------------------------ */
.highlight {
    color: var(--primary-color); /* Halka orange */
}

/* ------------------------------
   Responsive Images
------------------------------ */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ------------------------------
   Ensure tables are responsive and do not break layout
------------------------------ */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* ------------------------------
   Additional Utilities
------------------------------ */
/* Hide overflow for marquee */
.marquee-container {
    overflow: hidden;
}

/* Optional: Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* ------------------------------
   End of record_chart.css
------------------------------ */

/* ------------------------------
   Organized Record Chart Page
   Matches the cleaner index.php structure without touching DB logic.
------------------------------ */
:root {
    --record-bg: #fffdf1;
    --record-panel: #ffffff;
    --record-ink: #17140b;
    --record-muted: #6f664d;
    --record-border: rgba(176, 121, 17, 0.22);
    --record-gold: #ffc928;
    --record-gold-dark: #b46b00;
    --record-soft: #fff5c9;
    --record-shadow: 0 16px 36px rgba(73, 48, 6, 0.12);
    --record-radius: 16px;
}

html,
body {
    background:
        radial-gradient(circle at top left, rgba(255, 218, 93, 0.22), transparent 34rem),
        linear-gradient(180deg, #fffdf3 0%, #ffffff 46%, #fff8df 100%) !important;
    color: var(--record-ink);
}

body {
    font-weight: 700;
}

.fixed-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(176, 121, 17, 0.18) !important;
    box-shadow: 0 8px 24px rgba(69, 45, 7, 0.08);
}

.fixed-header .info-line {
    background: #11100c !important;
    color: #ffe68c !important;
    border-bottom: 0 !important;
    font-size: clamp(0.78rem, 2.5vw, 0.98rem);
}

.fixed-header marquee {
    display: block;
    padding: 0.25rem var(--page-pad, 16px);
}

.fixed-header .blinking-website-name {
    background: linear-gradient(90deg, #221706, #ffc928 18%, #fff6bc 52%, #ffc928 82%, #221706) !important;
    color: #090703 !important;
    padding: clamp(0.62rem, 2vw, 1rem) var(--page-pad, 16px) !important;
}

.fixed-header .blinking-text {
    color: #11100c !important;
    font-size: clamp(1.45rem, 5vw, 2.2rem) !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

.hero {
    background: transparent !important;
    padding-top: clamp(1rem, 3vw, 2rem) !important;
    padding-bottom: clamp(1rem, 3vw, 2rem) !important;
}

.hero-content {
    width: min(100%, 1180px) !important;
}

#current-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--record-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--record-gold-dark) !important;
    box-shadow: 0 8px 18px rgba(73, 48, 6, 0.08);
}

.hero h2 {
    max-width: 980px;
    margin-inline: auto;
    color: #201604 !important;
    font-size: clamp(1rem, 3.5vw, 1.45rem);
    line-height: 1.35;
}

.active-games .row {
    gap: 0;
}

.active-games .card {
    height: 100%;
    border: 1px solid var(--record-border) !important;
    border-radius: var(--record-radius) !important;
    background: linear-gradient(180deg, #ffffff, #fff8df) !important;
    box-shadow: var(--record-shadow) !important;
}

.active-games .card-body {
    display: grid;
    gap: 0.55rem;
}

.active-games .game-name {
    color: #2b2009;
    font-size: clamp(1rem, 3.4vw, 1.28rem) !important;
}

.active-games .hero-result {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 48px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff2a6, #ffbf1b);
    color: #120e03 !important;
    border: 1px solid rgba(130, 83, 4, 0.25);
}

main.py-5 {
    padding-top: clamp(1rem, 3vw, 2rem) !important;
    padding-bottom: clamp(2rem, 5vw, 4rem) !important;
}

main > .container-fluid {
    display: flex;
    flex-direction: column;
    width: min(100%, 1220px);
    margin-inline: auto;
    gap: clamp(1rem, 2.4vw, 1.65rem);
}

.record-chart-title {
    order: 1;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: clamp(0.9rem, 3vw, 1.35rem);
    border: 1px solid var(--record-border);
    border-radius: var(--record-radius);
    background:
        linear-gradient(135deg, rgba(255, 245, 183, 0.88), rgba(255, 255, 255, 0.96)),
        radial-gradient(circle at top right, rgba(255, 201, 40, 0.24), transparent 18rem);
    box-shadow: var(--record-shadow);
    color: #150f03;
    font-size: clamp(1.18rem, 5vw, 2.15rem) !important;
    line-height: 1.18;
    text-align: center;
    overflow-wrap: anywhere;
}

.record-chart-title::before {
    content: "♛";
    display: inline-flex;
    margin-right: 0.45rem;
    color: var(--record-gold-dark);
}

.table-responsive {
    order: 2;
}

.record-chart-links {
    order: 3;
}

.complete-record-chart {
    order: 4;
}

#agents,
#agents2 {
    order: 5;
}

#owners {
    order: 6;
}

#blogs {
    order: 7;
}

#questions {
    order: 8;
}

#faqs {
    order: 9;
}

.table-responsive {
    border-radius: var(--record-radius);
    box-shadow: var(--record-shadow);
    background: var(--record-panel);
    border: 1px solid var(--record-border);
}

.chart-table {
    margin: 0 !important;
    border-color: rgba(95, 63, 6, 0.2) !important;
    color: var(--record-ink);
}

.chart-table th,
.chart-table td {
    border-color: rgba(95, 63, 6, 0.16) !important;
    text-align: center;
    vertical-align: middle;
    padding: clamp(0.42rem, 1.4vw, 0.72rem) !important;
    font-size: clamp(0.82rem, 2.5vw, 1.05rem) !important;
    white-space: nowrap;
}

.chart-table thead th,
.chart-table tbody th {
    background: linear-gradient(180deg, #ffe88d, #ffc928) !important;
    color: #171006 !important;
}

.chart-table tbody td {
    background: #fffef8;
}

.chart-table tbody tr:nth-child(even) td {
    background: #fff7dc;
}

.chart-table strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2rem;
    border-radius: 10px;
    background: #11100c;
    color: #ffd73d;
}

.record-chart-links {
    margin-bottom: 0 !important;
    padding: clamp(0.9rem, 3vw, 1.35rem);
    border-radius: var(--record-radius);
    border: 1px solid var(--record-border);
    background: linear-gradient(180deg, #ffffff, #fff8df);
    box-shadow: var(--record-shadow);
}

.record-chart-links h3,
#blogs h2,
#owners h2,
#questions h2,
#faqs h2,
.heading-box h2 {
    margin-bottom: clamp(0.85rem, 2.4vw, 1.25rem) !important;
    color: #1c1506;
    font-size: clamp(1.18rem, 4.4vw, 1.9rem) !important;
    line-height: 1.22;
}

.record-chart-links .d-flex {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0.7rem;
}

.record-chart-links a.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 !important;
    padding: 0.72rem 0.9rem !important;
    border: 1px solid rgba(128, 84, 6, 0.24);
    border-radius: 12px;
    background: #11100c;
    color: #ffe483 !important;
    font-size: clamp(0.86rem, 2.8vw, 1rem) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 16px rgba(39, 26, 4, 0.1);
}

.record-chart-links a.btn-link:hover,
.record-chart-links a.btn-link:focus {
    background: linear-gradient(180deg, #ffe889, #ffc928);
    color: #151006 !important;
}

.complete-record-chart,
#owners,
#blogs,
#questions,
#faqs,
#agents,
#agents2 {
    padding-top: clamp(1rem, 3vw, 1.5rem) !important;
    padding-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    border-radius: var(--record-radius);
}

.complete-record-chart {
    background: transparent !important;
}

.complete-record-chart .card,
#owners .card,
#blogs .card,
#questions .card,
#faqs .accordion-item,
#agents .card,
#agents2 .card {
    border: 1px solid var(--record-border) !important;
    border-radius: var(--record-radius) !important;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #fffaf0) !important;
    box-shadow: var(--record-shadow) !important;
}

.heading-box {
    border: 1px solid var(--record-border) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, #11100c, #392504, #11100c) !important;
    color: #ffe68c !important;
    box-shadow: none !important;
}

.heading-box h2 {
    color: inherit !important;
}

.record-chart-form .form-label {
    color: var(--record-muted);
    font-size: 0.95rem;
}

.record-chart-form .form-select,
.record-chart-form .btn {
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
}

.record-chart-form .form-select {
    border-color: rgba(128, 84, 6, 0.28);
    background-color: #fffef9;
}

.btn-primary,
.record-chart-form .btn-primary {
    border: 0 !important;
    background: linear-gradient(180deg, #ffe889, #ffc928) !important;
    color: #151006 !important;
    box-shadow: 0 8px 16px rgba(155, 101, 6, 0.16);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, #ffd54c, #f2a900) !important;
    color: #080601 !important;
}

.gradient-header,
#questions .card-header {
    background: linear-gradient(90deg, #11100c, #3b2604) !important;
    color: #ffe68c !important;
    border-bottom: 1px solid rgba(255, 201, 40, 0.28) !important;
}

#questions .card-text,
#faqs .accordion-body,
#blogs .card-text,
#owners p {
    color: #43371e;
    font-weight: 650;
}

#faqs h2.bg-dark {
    border-radius: 14px;
    background: #11100c !important;
    color: #ffe68c !important;
}

#faqs .accordion-button {
    background: #fff5c9 !important;
    color: #1b1304 !important;
    font-weight: 800;
}

#faqs .accordion-button:not(.collapsed) {
    background: #11100c !important;
    color: #ffe68c !important;
}

#blogs .card-img-top {
    width: calc(100% - 16px) !important;
    margin: 8px !important;
    border-radius: 14px !important;
    border: 4px solid #11100c !important;
    background: #090703 !important;
}

#blogs .card-title {
    color: #181103;
    font-size: clamp(1rem, 3.4vw, 1.2rem) !important;
    line-height: 1.25;
}

footer {
    margin-top: 0 !important;
    background: linear-gradient(90deg, #11100c, #ffc928, #11100c) !important;
    color: #080601 !important;
}

.fixed-bottom-nav {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--record-border) !important;
    border-radius: 18px 18px 0 0;
    backdrop-filter: blur(14px);
}

.fixed-bottom-nav .nav-btn {
    border-radius: 12px !important;
    background: #11100c !important;
    color: #ffe68c !important;
}

.fixed-bottom-nav .home-btn {
    background: linear-gradient(180deg, #ffe889, #ffc928) !important;
    color: #11100c !important;
}

@media (max-width: 768px) {
    body {
        padding-top: calc(var(--header-base-height, 92px) + var(--safe-top, 0px) + 6px) !important;
    }

    main > .container-fluid {
        gap: 0.9rem;
    }

    .hero-game {
        margin-bottom: 0.85rem !important;
    }

    .chart-table {
        min-width: 720px;
    }

    .record-chart-links .d-flex {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fixed-bottom-nav .btn-label {
        display: none;
    }

    .fixed-bottom-nav .nav-btn i {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .record-chart-links .d-flex {
        grid-template-columns: 1fr;
    }

    .record-chart-title {
        padding-inline: 0.75rem;
    }

    .chart-table {
        min-width: 660px;
    }

    .chart-table th,
    .chart-table td {
        padding: 0.36rem 0.42rem !important;
    }
}

/* ------------------------------
   Premium Aurum alignment for record chart pages
   Keep this last so record pages follow the index.php premium theme.
------------------------------ */
:root {
    --record-bg: #fff8e5;
    --record-panel: rgba(20, 14, 6, 0.92);
    --record-ink: #fff7d6;
    --record-muted: #e9d491;
    --record-border: rgba(244, 211, 106, 0.55);
    --record-gold: #f4d36a;
    --record-gold-dark: #d9a321;
    --record-soft: #fff3c4;
    --record-shadow: 0 18px 40px rgba(50, 33, 4, 0.18);
}

html,
body {
    background:
        linear-gradient(180deg, rgba(255, 248, 229, 0.96) 0%, rgba(248, 235, 202, 0.92) 44%, rgba(255, 252, 242, 0.98) 100%),
        radial-gradient(circle at 12% 0%, rgba(244, 211, 106, 0.2), transparent 32%),
        radial-gradient(circle at 88% 8%, rgba(13, 93, 73, 0.12), transparent 28%) !important;
}

.fixed-header {
    background: linear-gradient(180deg, rgba(16, 13, 8, 0.98), rgba(38, 25, 5, 0.96)) !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.55) !important;
    box-shadow: 0 10px 30px rgba(38, 25, 5, 0.24) !important;
}

.fixed-header .info-line {
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: var(--record-soft) !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.38) !important;
}

.fixed-header .blinking-website-name {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.9) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.5) !important;
}

.fixed-header .blinking-text {
    color: #170f02 !important;
    text-shadow: 0 1px 0 rgba(255, 247, 190, 0.9), 0 4px 16px rgba(69, 42, 3, 0.18) !important;
}

.hero {
    background:
        linear-gradient(135deg, rgba(16, 13, 8, 0.92), rgba(68, 19, 26, 0.86)),
        linear-gradient(45deg, rgba(217, 163, 33, 0.18), rgba(13, 93, 73, 0.22)) !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.55) !important;
}

.hero h2,
.hero #current-time {
    color: var(--record-soft) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42) !important;
}

#current-time {
    border-color: rgba(255, 224, 128, 0.42) !important;
    background: rgba(255, 243, 190, 0.1) !important;
    color: #fff2b7 !important;
    min-width: min(100%, 25ch) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px rgba(20, 12, 2, 0.22) !important;
}

.fixed-header > .language-switcher--header {
    display: none !important;
}

.active-games .card,
.record-chart-title,
.record-chart-links,
.complete-record-chart .card,
#owners .card,
#blogs .card,
#questions .card,
#faqs .accordion-item,
#agents .card,
#agents2 .card,
.table-responsive {
    border: 1px solid rgba(244, 211, 106, 0.5) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(20, 14, 6, 0.94), rgba(61, 38, 6, 0.9) 54%, rgba(13, 93, 73, 0.74)) !important;
    color: var(--record-ink) !important;
    box-shadow: 0 18px 40px rgba(20, 12, 2, 0.22) !important;
}

.active-games .game-name,
.record-chart-title,
.record-chart-links h3,
#blogs h2,
#owners h2,
#questions h2,
#faqs h2,
.heading-box h2,
#blogs .card-title,
.record-chart-form .form-label {
    color: var(--record-soft) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
}

.chart-table {
    background: rgba(16, 13, 8, 0.94) !important;
}

.chart-table thead th,
.chart-table tbody th {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 34%, #fff0a7 58%, #3d2703 100%) !important;
    color: #130d02 !important;
}

.chart-table tbody td,
.chart-table tbody tr:nth-child(even) td {
    background: rgba(19, 14, 8, 0.92) !important;
    color: #fff4c4 !important;
}

.chart-table strong {
    background: linear-gradient(180deg, #fff3b6, #d9a321) !important;
    color: #100d08 !important;
    border: 1px solid rgba(255, 237, 156, 0.62);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.record-chart-form .form-select {
    border-color: rgba(255, 231, 135, 0.65) !important;
    background-color: rgba(255, 248, 229, 0.96) !important;
    color: #161005 !important;
}

#questions .card-text,
#faqs .accordion-body,
#blogs .card-text,
#owners p {
    color: #fff6d0 !important;
}

#faqs .accordion-button {
    background: linear-gradient(180deg, rgba(255, 243, 190, 0.98), rgba(217, 163, 33, 0.92)) !important;
    color: #161005 !important;
}

#faqs .accordion-button:not(.collapsed),
.gradient-header,
#questions .card-header,
#faqs h2.bg-dark,
.heading-box {
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: var(--record-soft) !important;
}

.record-chart-links a.btn-link,
.fixed-bottom-nav .nav-btn {
    background: linear-gradient(180deg, #171108, #3d2908) !important;
    color: #fff4c4 !important;
    border-color: rgba(255, 231, 135, 0.75) !important;
}

.record-chart-links a.btn-link:hover,
.record-chart-links a.btn-link:focus,
.fixed-bottom-nav .home-btn,
.btn-primary,
.record-chart-form .btn-primary {
    background: linear-gradient(180deg, #fff5bd, #d39b16) !important;
    color: #161005 !important;
}

footer {
    background: linear-gradient(90deg, #0f0d08, #d9a321 48%, #0f0d08) !important;
    color: #120f08 !important;
}

/* Floating actions and centered Home button for record chart pages. */
.record-chart-floating-whatsapp {
    border-color: rgba(255, 231, 135, 0.8) !important;
    bottom: calc(82px + var(--safe-bottom, 0px)) !important;
}

.language-switcher--floating {
    bottom: calc(144px + var(--safe-bottom, 0px)) !important;
}

.hero-game .card:has(.live-wait-badge),
.active-games .card:has(.live-wait-badge) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(20, 14, 6, 0.94), rgba(61, 38, 6, 0.9) 54%, rgba(13, 93, 73, 0.74)) !important;
}

.record-chart-home-fab {
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--safe-bottom, 0px));
    z-index: 4802;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 118px;
    min-height: 48px;
    padding: 0.62rem 1rem;
    border: 1px solid rgba(255, 231, 135, 0.88);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #fff5bd, #d39b16) !important;
    color: #161005 !important;
    text-decoration: none !important;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(24, 15, 2, 0.32);
    transform: translateX(-50%);
}

.record-chart-home-fab i,
.fixed-bottom-nav .record-chart-home-btn i {
    font-size: 1.15rem;
}

.record-chart-home-fab:hover,
.record-chart-home-fab:focus {
    color: #161005 !important;
    filter: brightness(1.04);
}

.fixed-bottom-nav .record-chart-home-btn {
    flex: 1.35 1 0 !important;
    min-height: 54px !important;
    border: 1px solid rgba(255, 231, 135, 0.88) !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 28px rgba(24, 15, 2, 0.22) !important;
    transform: translateY(-5px);
}

.fixed-bottom-nav .record-chart-home-btn .btn-label {
    display: inline !important;
    font-size: 0.76rem;
    font-weight: 950;
}

.fixed-bottom-nav {
    display: flex !important;
}

@media (max-width: 480px) {
    .record-chart-floating-whatsapp {
        bottom: calc(80px + var(--safe-bottom, 0px)) !important;
    }

    .language-switcher--floating {
        bottom: calc(136px + var(--safe-bottom, 0px)) !important;
    }

    .fixed-bottom-nav .record-chart-home-btn {
        min-height: 50px !important;
    }

    .fixed-bottom-nav .record-chart-home-btn .btn-label {
        display: inline !important;
        font-size: 0.68rem;
    }

    .record-chart-home-fab span {
        display: none;
    }

    .record-chart-home-fab {
        min-width: 52px;
        width: 52px;
        padding-inline: 0;
    }
}

/* Final record-chart polish: sticky day/year column, compact date, labelled language switcher. */
.chart-container .table-responsive,
#complete-record-chart .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.chart-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.chart-table thead th:first-child,
.chart-table tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: clamp(46px, 12vw, 68px);
    width: clamp(46px, 12vw, 68px);
    max-width: clamp(46px, 12vw, 68px);
    background:
        linear-gradient(180deg, rgba(255, 232, 134, 0.2), rgba(255, 185, 38, 0.06)),
        #141008 !important;
    color: #ffdf67 !important;
    box-shadow: 10px 0 18px rgba(0, 0, 0, 0.32);
}

.chart-table thead th:first-child {
    z-index: 7;
}

.chart-table tbody th:first-child {
    font-size: clamp(0.76rem, 2vw, 0.98rem);
    font-weight: 950;
}

.hero #current-time,
#current-time {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    min-height: 30px !important;
    margin: 0 auto 0.58rem !important;
    padding: 0.28rem 0.78rem !important;
    border-radius: 999px !important;
    font-size: clamp(0.7rem, 2.2vw, 0.86rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center;
    word-break: normal;
    overflow-wrap: anywhere;
}

.language-switcher--floating .language-switcher__link span {
    display: inline !important;
    white-space: nowrap;
}

.language-switcher--floating .language-switcher__link {
    min-width: 132px !important;
    max-width: calc(100vw - 18px);
    padding-inline: 0.72rem !important;
    gap: 0.38rem !important;
    font-size: clamp(0.66rem, 2.7vw, 0.82rem) !important;
}

.fixed-bottom-nav .record-chart-home-btn {
    order: 3;
    justify-content: center !important;
}

.fixed-bottom-nav .record-chart-home-btn i {
    font-size: 1.28rem !important;
}

#questions h2 {
    display: block;
    width: fit-content;
    max-width: calc(100vw - 28px);
    margin-inline: auto;
    padding: 0.56rem 1rem;
    border: 1px solid rgba(255, 222, 106, 0.55);
    border-radius: 999px;
    background: rgba(12, 10, 7, 0.9);
    color: #ffdf67;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    font-size: clamp(1.05rem, 4.5vw, 1.55rem);
    font-weight: 950;
}

#questions .row {
    row-gap: 0.95rem;
}

#questions .service-card {
    max-width: min(980px, 100%);
    margin-inline: auto;
}

#questions .card-header,
#questions .card-body {
    text-align: center;
}

#questions .card {
    overflow: hidden;
    border-color: rgba(191, 139, 31, 0.35) !important;
    background: linear-gradient(180deg, rgba(255, 250, 229, 0.98), rgba(255, 244, 204, 0.94)) !important;
}

#questions .card-body {
    background: linear-gradient(180deg, rgba(255, 251, 236, 0.98), rgba(255, 245, 211, 0.94)) !important;
}

#questions .card-text,
#questions .answer-text-small {
    color: #3f3216 !important;
    font-size: clamp(0.88rem, 2.9vw, 1rem);
    line-height: 1.55;
    font-weight: 750;
}

@media (max-width: 480px) {
    .chart-table thead th,
    .chart-table tbody td,
    .chart-table tbody th {
        padding: 0.48rem 0.38rem !important;
        font-size: 0.74rem;
    }

    .hero #current-time,
    #current-time {
        max-width: calc(100vw - 18px) !important;
        padding: 0.24rem 0.56rem !important;
        font-size: 0.7rem !important;
    }

    .language-switcher--floating .language-switcher__link {
        min-width: 118px !important;
        padding-inline: 0.58rem !important;
    }
}

/* Screenshot-aligned aurum theme: index-style dark hero with cream result cards. */
:root {
    --rc-shot-dark: #120d06;
    --rc-shot-olive: #10231c;
    --rc-shot-brown: #3a2107;
    --rc-shot-cream: #fff9df;
    --rc-shot-cream-2: #fff1b8;
    --rc-shot-gold: #d6a11f;
    --rc-shot-gold-light: #fff2a4;
    --rc-shot-gold-dark: #84570b;
    --rc-shot-text: #0a0804;
}

html,
body {
    background:
        linear-gradient(180deg, #fffdf1 0%, #fff8df 46%, #ffffff 100%) !important;
    color: var(--rc-shot-text) !important;
}

body {
    font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif) !important;
}

.fixed-header {
    background: #130f08 !important;
    border-bottom: 1px solid rgba(255, 221, 105, 0.58) !important;
    box-shadow: 0 10px 22px rgba(34, 21, 3, 0.22) !important;
}

.fixed-header .info-line {
    background: #0c0905 !important;
    color: #fff4c4 !important;
    border-bottom: 1px solid rgba(255, 232, 141, 0.36) !important;
}

.fixed-header .blinking-website-name {
    background:
        radial-gradient(circle at 48% 0%, rgba(255, 255, 214, 0.84), transparent 26%),
        linear-gradient(180deg, #7b520a 0%, #d8aa36 32%, #fff0a7 52%, #8f5f0b 100%) !important;
    border-top: 1px solid rgba(255, 248, 190, 0.92) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.55) !important;
    padding-block: clamp(0.58rem, 2vw, 1.05rem) !important;
}

.fixed-header .blinking-text {
    color: #070501 !important;
    font-size: clamp(2rem, 6vw, 4.15rem) !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 rgba(255, 255, 221, 0.56), 0 5px 13px rgba(0, 0, 0, 0.24) !important;
}

.hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(2rem, 5vw, 5.2rem) !important;
    padding-bottom: clamp(2.4rem, 5.4vw, 4.8rem) !important;
    background:
        radial-gradient(circle at 50% 14%, rgba(255, 237, 172, 0.18), transparent 23rem),
        radial-gradient(circle at 22% 72%, rgba(98, 43, 8, 0.62), transparent 28rem),
        radial-gradient(circle at 82% 56%, rgba(21, 61, 48, 0.58), transparent 30rem),
        linear-gradient(135deg, #1d1407 0%, #3b2108 35%, #111f19 100%) !important;
    border-bottom: 2px solid rgba(255, 229, 142, 0.74) !important;
}

.hero-content {
    width: min(100%, 1260px) !important;
    margin-inline: auto !important;
}

.hero #current-time,
#current-time {
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 0 !important;
    margin: 0 auto clamp(0.7rem, 2vw, 1.1rem) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff2c0 !important;
    box-shadow: none !important;
    font-size: clamp(0.94rem, 2.9vw, 1.28rem) !important;
    font-weight: 1000 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
    white-space: normal !important;
}

.hero h2 {
    max-width: min(820px, 96vw) !important;
    margin: 0 auto clamp(1.4rem, 3.6vw, 2rem) !important;
    color: #fff2c0 !important;
    font-size: clamp(1.04rem, 3.6vw, 1.55rem) !important;
    line-height: 1.35 !important;
    font-weight: 1000 !important;
    text-align: center !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

.active-games .row {
    justify-content: center !important;
    row-gap: clamp(1rem, 2vw, 1.3rem) !important;
}

.active-games .hero-game {
    display: flex;
}

.active-games .card {
    width: 100%;
    min-height: clamp(220px, 26vw, 300px);
    border: 1px solid rgba(197, 151, 49, 0.7) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 226, 111, 0.2), transparent 48%),
        linear-gradient(180deg, #fffef8 0%, #fff8dd 100%) !important;
    color: #080602 !important;
    box-shadow: 0 14px 28px rgba(8, 4, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.hero-game .card:has(.live-wait-badge),
.active-games .card:has(.live-wait-badge) {
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 226, 111, 0.2), transparent 48%),
        linear-gradient(180deg, #fffef8 0%, #fff8dd 100%) !important;
    color: #080602 !important;
}

.active-games .card-body {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    gap: clamp(0.75rem, 2.3vw, 1.2rem);
    padding: clamp(1rem, 3vw, 1.5rem) !important;
}

.active-games .game-name {
    color: #070602 !important;
    font-size: clamp(1.5rem, 4.3vw, 2.12rem) !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-shadow: none !important;
}

.active-games .game-result {
    min-height: clamp(58px, 9vw, 94px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-games .hero-result,
.active-games .game-result .hero-result {
    display: inline-block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #070602 !important;
    box-shadow: none !important;
    font-size: clamp(3rem, 11vw, 6.4rem) !important;
    font-weight: 1000 !important;
    line-height: 0.95 !important;
    text-shadow: 0 7px 0 rgba(181, 147, 59, 0.24) !important;
}

.hero-game .btn-primary,
.active-games .btn-primary,
.record-chart-form .btn-primary,
.btn-primary {
    border: 1px solid rgba(105, 67, 4, 0.42) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, #fff3b5 0%, #e0ae35 56%, #aa7110 100%) !important;
    color: #080602 !important;
    font-weight: 1000 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 220, 0.86), 0 8px 16px rgba(37, 22, 2, 0.2) !important;
}

main.py-5,
main {
    background:
        linear-gradient(180deg, #fffdf2 0%, #fff8dd 38%, #ffffff 100%) !important;
}

.record-chart-title,
.record-chart-links,
.complete-record-chart .card,
#owners .card,
#blogs .card,
#questions .card,
#faqs .accordion-item,
#agents .card,
#agents2 .card,
.table-responsive {
    border: 1px solid rgba(212, 169, 72, 0.45) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, #fffdf4 0%, #fff4c6 100%) !important;
    color: #150f04 !important;
    box-shadow: 0 14px 28px rgba(76, 48, 5, 0.1) !important;
}

.record-chart-title,
.record-chart-links h3,
#blogs h2,
#owners h2,
#questions h2,
#faqs h2,
.heading-box h2,
#blogs .card-title,
.record-chart-form .form-label {
    color: #1a1305 !important;
    text-shadow: none !important;
}

.record-chart-title,
.heading-box,
#questions h2,
#faqs h2.bg-dark {
    background:
        linear-gradient(180deg, #fff2ae 0%, #d6a11f 54%, #8f5e09 100%) !important;
    color: #090601 !important;
    border: 1px solid rgba(122, 78, 6, 0.38) !important;
}

.chart-table {
    background: #fff8df !important;
    color: #120d04 !important;
}

.chart-table thead th,
.chart-table tbody th,
.chart-table thead th:first-child,
.chart-table tbody th:first-child {
    background:
        linear-gradient(180deg, #fff0a6 0%, #d6a11f 58%, #8c5c08 100%) !important;
    color: #080602 !important;
    border-color: rgba(112, 72, 6, 0.36) !important;
    text-shadow: none !important;
}

.chart-table tbody td,
.chart-table tbody tr:nth-child(even) td {
    background: #fffdf5 !important;
    color: #140f05 !important;
}

.chart-table strong {
    background: transparent !important;
    color: #080602 !important;
    border: 0 !important;
    box-shadow: none !important;
}

#questions .card,
#questions .card-body,
#blogs .card,
#blogs .card-body,
#owners .card,
#owners .card-body,
#agents .card,
#agents2 .card {
    background:
        linear-gradient(180deg, #fffef8 0%, #fff4c6 100%) !important;
    color: #160f04 !important;
}

.gradient-header,
#questions .card-header,
#faqs .accordion-button,
#faqs .accordion-button:not(.collapsed) {
    background:
        linear-gradient(180deg, #1a1207 0%, #3b2606 100%) !important;
    color: #fff2bb !important;
}

#questions .card-text,
#questions .answer-text-small,
#faqs .accordion-body,
#blogs .card-text,
#owners p {
    color: #3b2b0b !important;
}

footer {
    background:
        linear-gradient(90deg, #120d06 0%, #d6a11f 52%, #120d06 100%) !important;
    color: #0b0802 !important;
}

@media (max-width: 768px) {
    .hero {
        padding-top: clamp(1.6rem, 6vw, 2.5rem) !important;
    }

    .active-games .card {
        min-height: 210px;
    }
}

/* Record-chart final controls: index-style ticker, language button, and Home-only bottom action. */
.fixed-header .info-line {
    width: 100%;
    overflow: hidden !important;
    position: relative;
    white-space: nowrap !important;
}

.fixed-header .info-marquee {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 0;
    width: max-content !important;
    min-width: 100%;
    white-space: nowrap !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: recordChartInfoTicker 150s linear infinite !important;
}

.fixed-header .info-marquee-item {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap !important;
    padding-right: 48px;
}

@keyframes recordChartInfoTicker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.hero-info-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(920px, 96vw);
    margin: 0 auto clamp(1.3rem, 3vw, 2rem);
}

.fixed-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(12px + var(--safe-bottom, 0px)) !important;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    pointer-events: none;
    z-index: 4806;
}

.fixed-bottom-nav::before,
.fixed-bottom-nav::after {
    display: none !important;
    content: none !important;
}

.fixed-bottom-nav .nav-btn:not(.record-chart-home-btn) {
    display: none !important;
}

.fixed-bottom-nav .record-chart-home-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 232, 141, 0.92) !important;
    background:
        radial-gradient(circle at 38% 16%, rgba(255, 255, 232, 0.8), transparent 25%),
        linear-gradient(180deg, #fff0a7 0%, #d6a11f 58%, #8f5f0b 100%) !important;
    color: #090601 !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 14px 28px rgba(22, 13, 2, 0.3), inset 0 1px 0 rgba(255, 255, 220, 0.9) !important;
    pointer-events: auto;
    opacity: 1 !important;
    visibility: visible !important;
}

.fixed-bottom-nav .record-chart-home-btn i {
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

.fixed-bottom-nav .record-chart-home-btn .btn-label {
    display: none !important;
}

.language-switcher--floating {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
}

.language-switcher--floating .language-switcher__link {
    min-width: 92px !important;
    max-width: 118px !important;
    justify-content: center !important;
}

.record-chart-floating-whatsapp {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

.hero-game .btn-primary i,
.active-games .btn-primary i,
.record-chart-link i {
    color: #080602 !important;
}

.hero-game .btn-primary,
.active-games .btn-primary,
.record-chart-link,
.record-chart-links a.btn-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.36rem !important;
}

.hero-game .btn-primary i,
.active-games .btn-primary i,
.record-chart-link i,
.record-chart-links a.btn-link i {
    display: inline-block !important;
    flex: 0 0 auto !important;
    font-size: 0.94em !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .fixed-header .info-marquee {
        animation-duration: 185s !important;
    }

    .fixed-header .info-marquee-item {
        padding-right: 32px;
    }

    .fixed-bottom-nav .record-chart-home-btn {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }
}

/* Match index header visibility and add a subtle mobile chart-scroll hint. */
.fixed-header .blinking-website-name {
    min-height: clamp(74px, 12vw, 112px) !important;
    padding: clamp(0.9rem, 3vw, 1.35rem) 0.75rem !important;
    overflow: visible !important;
}

.fixed-header .blinking-text {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    color: #080602 !important;
    text-shadow: 0 2px 0 rgba(255, 244, 184, 0.8), 0 8px 18px rgba(31, 19, 3, 0.28) !important;
}

body {
    padding-top: clamp(74px, 12vw, 112px) !important;
}

.chart-scroll-hint {
    animation: recordChartScrollHint 1.28s ease-in-out 0.5s 1;
}

@keyframes recordChartScrollHint {
    0%, 100% {
        scroll-behavior: smooth;
    }
}

@media (max-width: 560px) {
    .fixed-header .blinking-website-name {
        min-height: clamp(68px, 18vw, 90px) !important;
        padding: clamp(0.78rem, 4vw, 1rem) 0.6rem !important;
    }

    .fixed-header .blinking-text {
        font-size: clamp(2.35rem, 12vw, 3.6rem) !important;
    }

    body {
        padding-top: clamp(68px, 18vw, 90px) !important;
    }
}

/* Final index-style top area for record chart pages. */
body {
    padding-top: clamp(138px, 23vw, 214px) !important;
}

.fixed-header {
    background: transparent !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fixed-header .info-line {
    display: block !important;
    height: auto !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: #fff1b8 !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.42) !important;
    box-shadow: 0 1px 0 rgba(255, 236, 154, 0.28) !important;
}

.fixed-header .info-marquee {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    gap: 0 !important;
    animation: record-chart-marquee 92s linear infinite !important;
    will-change: transform;
}

.fixed-header .info-marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 1.4rem !important;
    margin: 0 !important;
    color: #fff1b8 !important;
    font-weight: 950 !important;
    font-size: clamp(0.9rem, 2.7vw, 1.18rem) !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.fixed-header .blinking-website-name {
    min-height: clamp(108px, 18vw, 148px) !important;
    padding: clamp(1rem, 2.8vw, 1.45rem) 0.65rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.9) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(72, 44, 3, 0.18), 0 12px 28px rgba(82, 53, 4, 0.2) !important;
}

.fixed-header .blinking-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    max-width: calc(100vw - 18px) !important;
    color: #0d0903 !important;
    font-size: clamp(2.45rem, 10.5vw, 5.25rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-shadow:
        0 1px 0 rgba(255, 231, 137, 0.72),
        0 3px 0 rgba(97, 59, 3, 0.28),
        0 8px 18px rgba(27, 17, 3, 0.42) !important;
    animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
    transform: none !important;
}

@keyframes record-chart-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 560px) {
    body {
        padding-top: clamp(140px, 43vw, 176px) !important;
    }

    .fixed-header .info-line,
    .fixed-header .info-marquee,
    .fixed-header .info-marquee-item {
        min-height: 36px !important;
    }

    .fixed-header .info-marquee-item {
        font-size: clamp(0.9rem, 4vw, 1.05rem) !important;
        padding: 0 1rem !important;
    }

    .fixed-header .blinking-website-name {
        min-height: clamp(98px, 31vw, 136px) !important;
        padding-block: 0.78rem !important;
    }

    .fixed-header .blinking-text {
        max-width: calc(100vw - 16px) !important;
        font-size: clamp(2.28rem, 11.8vw, 3.3rem) !important;
    }
}

/* Final index-style top area for record chart pages. */
body {
    padding-top: clamp(138px, 23vw, 214px) !important;
}

.fixed-header {
    background: transparent !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fixed-header .info-line {
    display: block !important;
    height: auto !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: #fff1b8 !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.42) !important;
    box-shadow: 0 1px 0 rgba(255, 236, 154, 0.28) !important;
}

.fixed-header .info-marquee {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    gap: 0 !important;
    animation: aurum-marquee 92s linear infinite !important;
    will-change: transform;
}

.fixed-header .info-marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 1.4rem !important;
    margin: 0 !important;
    color: #fff1b8 !important;
    font-weight: 950 !important;
    font-size: clamp(0.9rem, 2.7vw, 1.18rem) !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.fixed-header .blinking-website-name {
    min-height: clamp(108px, 18vw, 148px) !important;
    padding: clamp(1rem, 2.8vw, 1.45rem) 0.65rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.9) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(72, 44, 3, 0.18), 0 12px 28px rgba(82, 53, 4, 0.2) !important;
}

.fixed-header .blinking-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    max-width: calc(100vw - 18px) !important;
    color: #0d0903 !important;
    font-size: clamp(2.45rem, 10.5vw, 5.25rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-shadow:
        0 1px 0 rgba(255, 231, 137, 0.72),
        0 3px 0 rgba(97, 59, 3, 0.28),
        0 8px 18px rgba(27, 17, 3, 0.42) !important;
    animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
    transform: none !important;
}

@media (max-width: 560px) {
    body {
        padding-top: clamp(140px, 43vw, 176px) !important;
    }

    .fixed-header .info-line,
    .fixed-header .info-marquee,
    .fixed-header .info-marquee-item {
        min-height: 36px !important;
    }

    .fixed-header .info-marquee-item {
        font-size: clamp(0.9rem, 4vw, 1.05rem) !important;
        padding: 0 1rem !important;
    }

    .fixed-header .blinking-website-name {
        min-height: clamp(98px, 31vw, 136px) !important;
        padding-block: 0.78rem !important;
    }

    .fixed-header .blinking-text {
        max-width: calc(100vw - 16px) !important;
        font-size: clamp(2.28rem, 11.8vw, 3.3rem) !important;
    }
}

/* 2026-05-11 record-chart readability polish. */
.active-games > .text-danger,
.active-games > p.text-danger {
    display: none !important;
}

.chart-table {
    border-spacing: 0 !important;
}

.chart-table tbody tr {
    background:
        linear-gradient(90deg, rgba(214, 161, 31, 0.08), transparent 45%) !important;
}

.chart-table tbody tr:nth-child(odd) td {
    background: #fffdf6 !important;
}

.chart-table tbody tr:nth-child(even) td {
    background: #fff4cf !important;
}

.chart-table tbody tr:hover td,
.chart-table tbody tr:hover th {
    background:
        linear-gradient(180deg, #fff0a6 0%, #e7b643 100%) !important;
    color: #080602 !important;
}

.chart-table th,
.chart-table td {
    border-right: 1px solid rgba(118, 72, 6, 0.22) !important;
    border-bottom: 1px solid rgba(118, 72, 6, 0.24) !important;
}

.chart-table tbody th:first-child {
    font-size: clamp(0.88rem, 2.7vw, 1.02rem) !important;
    font-weight: 1000 !important;
    text-align: center !important;
    border-right: 2px solid rgba(97, 60, 4, 0.42) !important;
}

.chart-table tbody tr:nth-child(5n) th:first-child,
.chart-table tbody tr:nth-child(5n) td {
    border-bottom: 2px solid rgba(112, 72, 6, 0.5) !important;
}

.language-switcher--floating {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

.language-switcher--floating .language-switcher__link {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    gap: 0 !important;
}

.language-switcher--floating .language-switcher__icon {
    margin: 0 !important;
    font-size: 1.18rem !important;
}

.language-switcher--floating .language-switcher__link span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 560px) {
    .language-switcher--floating .language-switcher__link {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* Visual verification fixes: standalone Home button and sticky chart date column. */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.record-chart-home-fab {
    position: fixed !important;
    right: calc(86px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10020 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;
    min-width: 94px !important;
    height: 52px !important;
    padding: 0 0.9rem !important;
    border: 1px solid rgba(255, 239, 162, 0.95) !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 36% 16%, rgba(255, 255, 232, 0.9), transparent 26%),
        linear-gradient(180deg, #fff2ad 0%, #d6a11f 58%, #8e5d08 100%) !important;
    color: #090601 !important;
    text-decoration: none !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    box-shadow: 0 14px 28px rgba(22, 13, 2, 0.32), inset 0 1px 0 rgba(255, 255, 220, 0.9) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.record-chart-home-fab i {
    display: inline-block !important;
    color: #090601 !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
}

.record-chart-home-fab span {
    display: inline !important;
    color: #090601 !important;
    font-size: 0.78rem !important;
}

.fixed-bottom-nav .record-chart-home-btn {
    display: none !important;
}

#complete-record-chart .table-responsive,
.chart-container .table-responsive,
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
}

.chart-table {
    min-width: 860px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
}

.chart-table tr > th:first-child,
.chart-table tr > td:first-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    min-width: 58px !important;
    max-width: 72px !important;
    background:
        linear-gradient(180deg, #fff0a6 0%, #d6a11f 58%, #8c5c08 100%) !important;
    color: #080602 !important;
    box-shadow: 8px 0 14px rgba(40, 23, 2, 0.18) !important;
    background-clip: padding-box !important;
}

.chart-table thead tr > th:first-child {
    z-index: 45 !important;
}

@media (max-width: 560px) {
    .record-chart-home-fab {
        right: calc(78px + env(safe-area-inset-right, 0px)) !important;
        min-width: 50px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
    }

    .record-chart-home-fab span {
        display: none !important;
    }

    .chart-table {
        min-width: 780px !important;
    }

    .chart-table tr > th:first-child,
    .chart-table tr > td:first-child {
        min-width: 48px !important;
        max-width: 56px !important;
    }
}

/* Clean record-chart header: keep only the gold SATTA KING bar and the centered Home action. */
body {
    padding-top: clamp(68px, 9vw, 104px) !important;
}

.fixed-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fixed-header .info-line,
.fixed-header .info-marquee,
.fixed-header .info-marquee-item {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.fixed-header .blinking-website-name {
    margin: 0 !important;
    padding: clamp(0.72rem, 2.5vw, 1.05rem) 1rem !important;
    min-height: clamp(64px, 9vw, 96px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 38%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.78) !important;
    border-bottom: 1px solid rgba(255, 224, 128, 0.48) !important;
    box-shadow: 0 8px 18px rgba(41, 25, 3, 0.14) !important;
}

.fixed-header .blinking-text {
    font-size: clamp(2.35rem, 7vw, 4.65rem) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

.fixed-bottom-nav .nav-btn:not(.record-chart-home-btn) {
    display: none !important;
}

.fixed-bottom-nav .record-chart-home-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Final record chart page alignment requested from the live view. */
html,
body {
    min-height: 100%;
    background:
        linear-gradient(135deg, #281702 0%, #120d06 42%, #061811 100%) !important;
}

body {
    padding-top: clamp(62px, 8.4vw, 98px) !important;
    padding-bottom: 0 !important;
}

.fixed-header {
    background: #120d06 !important;
    overflow: hidden !important;
}

.fixed-header .blinking-website-name {
    min-height: clamp(62px, 8.4vw, 98px) !important;
    border-bottom: 0 !important;
}

.fixed-header + .hero,
.hero {
    margin-top: 0 !important;
    border-top: 0 !important;
}

main.py-5,
main {
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

#complete-record-chart .table-responsive,
.chart-container .table-responsive,
.table-responsive {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

.chart-table {
    min-width: 860px;
}

.chart-table thead th:first-child,
.chart-table tbody th:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 8 !important;
    min-width: 58px !important;
    box-shadow: 8px 0 14px rgba(40, 23, 2, 0.16) !important;
}

.chart-table thead th:first-child {
    z-index: 12 !important;
}

.fixed-bottom-nav .record-chart-home-btn {
    left: auto !important;
    right: max(122px, calc(122px + env(safe-area-inset-right, 0px))) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 96px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 0.92rem !important;
    gap: 0.4rem !important;
    transform: none !important;
}

.fixed-bottom-nav .record-chart-home-btn .btn-label {
    display: inline !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
}

.record-chart-floating-whatsapp {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

footer {
    margin: 0 !important;
    padding: clamp(1rem, 2.5vw, 1.5rem) 1rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(90deg, #100b04 0%, #d6a11f 50%, #100b04 100%) !important;
}

footer p:first-child {
    display: inline-block !important;
    margin: 0 auto 0.8rem !important;
    padding: 0.55rem 1.1rem !important;
    border: 1px solid rgba(255, 239, 162, 0.85) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff4bd, #d6a11f) !important;
    color: #0a0601 !important;
    font-weight: 1000 !important;
    box-shadow: 0 10px 22px rgba(30, 18, 2, 0.22) !important;
}

footer p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 560px) {
    body {
        padding-top: clamp(58px, 15vw, 76px) !important;
    }

    .fixed-header .blinking-website-name {
        min-height: clamp(58px, 15vw, 76px) !important;
    }

    .fixed-bottom-nav .record-chart-home-btn {
        right: max(106px, calc(106px + env(safe-area-inset-right, 0px))) !important;
        min-width: 50px !important;
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
    }

    .fixed-bottom-nav .record-chart-home-btn .btn-label {
        display: none !important;
    }

    .chart-table {
        min-width: 760px;
    }

    .chart-table thead th:first-child,
    .chart-table tbody th:first-child {
        min-width: 48px !important;
    }
}

/* Index-match polish: keep the top SATTA KING strip fully visible and give
   mobile users a clear first hint that the chart can scroll sideways. */
body {
    padding-top: clamp(76px, 9.6vw, 116px) !important;
}

.fixed-header {
    overflow: visible !important;
}

.fixed-header .blinking-website-name {
    min-height: clamp(76px, 9.6vw, 116px) !important;
    padding-block: clamp(0.82rem, 2.2vw, 1.15rem) !important;
    overflow: visible !important;
}

.fixed-header .blinking-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    max-width: calc(100vw - 20px) !important;
    line-height: 1.04 !important;
    overflow: visible !important;
    animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
    transform: none !important;
    filter: brightness(0.92) saturate(0.96) !important;
}

.chart-scroll-hint {
    scroll-behavior: smooth;
}

@keyframes satta-record-title-soft-blink {
    0%, 100% {
        opacity: 0.84;
        filter: brightness(0.9) saturate(0.94);
    }
    50% {
        opacity: 1;
        filter: brightness(1.06) saturate(1.04);
    }
}

@media (max-width: 560px) {
    body {
        padding-top: clamp(76px, 18vw, 96px) !important;
    }

    .fixed-header .blinking-website-name {
        min-height: clamp(76px, 18vw, 96px) !important;
        padding-block: 0.62rem !important;
    }

    .fixed-header .blinking-text {
        position: static !important;
        left: auto !important;
        right: auto !important;
        max-width: calc(100vw - 20px) !important;
        font-size: clamp(1.65rem, 8.2vw, 2.75rem) !important;
        white-space: nowrap !important;
        text-align: center !important;
        animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
        transform: none !important;
        filter: brightness(0.92) saturate(0.96) !important;
    }
}

/* Final index-style top area for record chart pages. */
body {
    padding-top: clamp(138px, 23vw, 214px) !important;
}

.fixed-header {
    background: transparent !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fixed-header .info-line {
    display: block !important;
    height: auto !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: #fff1b8 !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.42) !important;
    box-shadow: 0 1px 0 rgba(255, 236, 154, 0.28) !important;
}

.fixed-header .info-marquee {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    gap: 0 !important;
    animation: record-chart-marquee 92s linear infinite !important;
    will-change: transform;
}

.fixed-header .info-marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: clamp(30px, 5vw, 42px) !important;
    padding: 0 1.4rem !important;
    margin: 0 !important;
    color: #fff1b8 !important;
    font-weight: 950 !important;
    font-size: clamp(0.9rem, 2.7vw, 1.18rem) !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.fixed-header .blinking-website-name {
    min-height: clamp(108px, 18vw, 148px) !important;
    padding: clamp(1rem, 2.8vw, 1.45rem) 0.65rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.9) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(72, 44, 3, 0.18), 0 12px 28px rgba(82, 53, 4, 0.2) !important;
}

.fixed-header .blinking-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    max-width: calc(100vw - 18px) !important;
    color: #0d0903 !important;
    font-size: clamp(2.45rem, 10.5vw, 5.25rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-shadow:
        0 1px 0 rgba(255, 231, 137, 0.72),
        0 3px 0 rgba(97, 59, 3, 0.28),
        0 8px 18px rgba(27, 17, 3, 0.42) !important;
    animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
    transform: none !important;
}

@keyframes record-chart-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
    body {
        padding-top: clamp(140px, 43vw, 176px) !important;
    }

    .fixed-header .info-line,
    .fixed-header .info-marquee,
    .fixed-header .info-marquee-item {
        min-height: 36px !important;
    }

    .fixed-header .info-marquee-item {
        font-size: clamp(0.9rem, 4vw, 1.05rem) !important;
        padding: 0 1rem !important;
    }

    .fixed-header .blinking-website-name {
        min-height: clamp(98px, 31vw, 136px) !important;
        padding-block: 0.78rem !important;
    }

    .fixed-header .blinking-text {
        max-width: calc(100vw - 16px) !important;
        font-size: clamp(2.28rem, 11.8vw, 3.3rem) !important;
    }
}

/* Match index.php top header sizing exactly on record chart pages. */
body {
    padding-top: 104px !important;
}

.fixed-header {
    background: transparent !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fixed-header .info-line {
    display: block !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: linear-gradient(90deg, #0f0d08, #3a2707 48%, #0f0d08) !important;
    color: #fff1b8 !important;
    border-bottom: 1px solid rgba(244, 211, 106, 0.42) !important;
}

.fixed-header .info-marquee {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    min-height: 38px !important;
    gap: 0 !important;
    animation: record-chart-marquee 92s linear infinite !important;
    will-change: transform;
}

.fixed-header .info-marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 1.2rem !important;
    margin: 0 !important;
    color: #fff1b8 !important;
    font-weight: 950 !important;
    font-size: clamp(0.9rem, 3.2vw, 1.08rem) !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.fixed-header .blinking-website-name {
    min-height: 68px !important;
    padding: 0.72rem 0.72rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #6c4806 0%, #d6a11f 24%, #fff0a7 48%, #bb8111 72%, #3d2703 100%) !important;
    border-top: 1px solid rgba(255, 247, 191, 0.9) !important;
    border-bottom: 1px solid rgba(74, 47, 3, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(72, 44, 3, 0.18), 0 12px 28px rgba(82, 53, 4, 0.2) !important;
}

.fixed-header .blinking-text {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    max-width: min(96vw, 620px) !important;
    color: #0d0903 !important;
    font-size: clamp(1.95rem, 7.2vw, 4.05rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-shadow:
        0 1px 0 rgba(255, 231, 137, 0.72),
        0 3px 0 rgba(97, 59, 3, 0.28),
        0 8px 18px rgba(27, 17, 3, 0.42) !important;
    animation: satta-record-title-soft-blink 2.8s ease-in-out infinite !important;
    transform: none !important;
}

@keyframes record-chart-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
    body {
        padding-top: 104px !important;
    }

    .fixed-header .blinking-website-name {
        min-height: 68px !important;
        padding-inline: 0.28rem !important;
    }

    .fixed-header .blinking-text {
        max-width: 98vw !important;
        font-size: clamp(1.78rem, 10.2vw, 2.78rem) !important;
    }
}