* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            --primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --dark: #1a1a2e;
            --light: #ffffff;
            --gray: #f0f0f5;
            --shadow: rgba(0, 0, 0, 0.1);
            --text: #2d3436;
            --border-radius: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ============ DARK MODE THEME ============ */
        body.dark {
            background: linear-gradient(135deg, #0f1021 0%, #1a1a2e 100%) !important;
        }
        body.dark::before {
            background:
                radial-gradient(circle at 20% 80%, rgba(102,126,234,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(118,75,162,0.15) 0%, transparent 50%) !important;
        }
        /* Panels, cards, containers -> dark surfaces */
        body.dark .container,
        body.dark .state-card,
        body.dark .game-card,
        body.dark .contact-card,
        body.dark .feature-card,
        body.dark .stat-card,
        body.dark .saved-pick-card,
        body.dark .info-box,
        body.dark .results-section,
        body.dark .number-display,
        body.dark .tab-content,
        body.dark .modal-content {
            background: #232442 !important;
            color: #e6e6f0 !important;
        }
        /* Generic text colors */
        body.dark p,
        body.dark li,
        body.dark span:not(.logo-text):not([style*="gradient"]),
        body.dark h1,
        body.dark h2,
        body.dark h3,
        body.dark h4,
        body.dark label,
        body.dark .state-name,
        body.dark .stat-value,
        body.dark .stat-label {
            color: #e6e6f0 !important;
        }
        /* Headings that were purple -> lighter purple for contrast */
        body.dark #page-contact h2,
        body.dark #page-about h2,
        body.dark #page-terms h2,
        body.dark #page-privacy h2 {
            color: #b8a4e8 !important;
        }

        /* === Privacy Policy dark-mode fixes === */
        /* Colored info/warning/success boxes: darken background so light text reads */
        body.dark #page-privacy .info {
            background: rgba(52, 152, 219, 0.18) !important;
            border-color: rgba(52, 152, 219, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-privacy .warning {
            background: rgba(231, 76, 60, 0.18) !important;
            border-color: rgba(231, 76, 60, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-privacy .success {
            background: rgba(40, 167, 69, 0.18) !important;
            border-color: rgba(40, 167, 69, 0.5) !important;
            color: #e6e6f0 !important;
        }
        /* All text inside those boxes inherits white */
        body.dark #page-privacy .info *,
        body.dark #page-privacy .warning *,
        body.dark #page-privacy .success * {
            color: #e6e6f0 !important;
        }
        /* Keep headings inside boxes tinted with their semantic color */
        body.dark #page-privacy .info h3,
        body.dark #page-privacy .info h4 { color: #7fbfff !important; }
        body.dark #page-privacy .warning h3,
        body.dark #page-privacy .warning h4 { color: #ff9999 !important; }
        body.dark #page-privacy .success h3,
        body.dark #page-privacy .success h4 { color: #7fdb96 !important; }
        /* Tables: dark rows so white text is readable */
        body.dark #page-privacy table {
            background: #232442 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-privacy table tr,
        body.dark #page-privacy table td {
            background: transparent !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-privacy table th {
            background: #2d2f55 !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-privacy table tr:nth-child(even) td {
            background: rgba(255,255,255,0.03) !important;
        }
        /* Header sub-title and last-updated meta */
        body.dark #page-privacy .subtitle,
        body.dark #page-privacy .subtitle strong {
            color: #b8a4e8 !important;
        }
        body.dark #page-privacy .last-updated {
            color: #b0b0c0 !important;
        }
        /* Links: keep the existing accent color readable */
        body.dark #page-privacy a {
            color: #8fb4ff !important;
        }
        body.dark #page-privacy a:hover {
            color: #a8c5ff !important;
        }
        /* === End Privacy Policy dark-mode fixes === */

        /* === Privacy Policy dark-mode fixes (part 2) === */
        /* Table of Contents — replace light gradient with dark surface */
        body.dark #page-privacy .toc-container {
            background: linear-gradient(135deg, #232442 0%, #2a2c4f 100%) !important;
            border-color: #5b6cc4 !important;
        }
        body.dark #page-privacy .toc-title {
            color: #b8a4e8 !important;
        }
        body.dark #page-privacy .toc-list a {
            color: #c5b8ee !important;
        }
        body.dark #page-privacy .toc-list a:hover {
            background: rgba(102,126,234,0.18) !important;
            color: #ffffff !important;
        }
        body.dark #page-privacy .toc-number {
            color: #8fb4ff !important;
        }
        /* Section headings: lighter purple/blue for readability on dark */
        body.dark #page-privacy h3 {
            color: #8fb4ff !important;
        }
        body.dark #page-privacy h4 {
            color: #c5b8ee !important;
        }
        body.dark #page-privacy .section-number {
            color: #8fb4ff !important;
        }
        body.dark #page-privacy h2 {
            border-bottom-color: #3a3b5c !important;
        }
        /* Body paragraph text on the main dark page */
        body.dark #page-privacy p,
        body.dark #page-privacy li,
        body.dark #page-privacy strong,
        body.dark #page-privacy em {
            color: #e6e6f0;
        }
        /* Summary box at bottom of privacy page (overrides inline gradient) */
        body.dark #page-privacy .pp-summary-box {
            background: linear-gradient(135deg, #232442 0%, #2a2c4f 100%) !important;
            border-color: #5b6cc4 !important;
        }
        body.dark #page-privacy .pp-summary-box h3 {
            color: #b8a4e8 !important;
        }
        /* Document footer text */
        body.dark #page-privacy .pp-doc-footer {
            border-top-color: #3a3b5c !important;
            color: #b0b0c0 !important;
        }
        body.dark #page-privacy .pp-doc-footer p,
        body.dark #page-privacy .pp-doc-footer strong {
            color: #e6e6f0 !important;
        }
        /* === End Privacy Policy dark-mode fixes (part 2) === */

        /* === About Us dark-mode fixes === */
        /* Success box (light green) — dark green tint with light text */
        body.dark #page-about .success-box {
            background: rgba(40, 167, 69, 0.18) !important;
            border-left-color: #28a745 !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-about .success-box * {
            color: #e6e6f0 !important;
        }
        body.dark #page-about .success-box strong {
            color: #7fdb96 !important;
        }
        body.dark #page-about .success-box a {
            color: #8fb4ff !important;
        }
        /* Warning box (light yellow/cream) — dark amber tint with light text */
        body.dark #page-about .warning-box {
            background: rgba(255, 193, 7, 0.15) !important;
            border-left-color: #ffc107 !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-about .warning-box * {
            color: #e6e6f0 !important;
        }
        body.dark #page-about .warning-box strong {
            color: #ffd86b !important;
        }
        body.dark #page-about .warning-box a {
            color: #8fb4ff !important;
        }
        /* Values section (light gradient) — darken */
        body.dark #page-about .values-section {
            background: linear-gradient(135deg, #232442 0%, #2a2c4f 100%) !important;
        }
        /* Subtitle ("LottoPicksPro" under heading) */
        body.dark #page-about .subtitle {
            color: #b8a4e8 !important;
        }
        /* <strong> text that uses the dark purple */
        body.dark #page-about strong {
            color: #b8a4e8 !important;
        }
        /* General body text safety */
        body.dark #page-about p,
        body.dark #page-about li {
            color: #e6e6f0;
        }
        /* === End About Us dark-mode fixes === */

        /* === Contact Us dark-mode fixes === */
        /* Success box (light green) — dark green tint with light text */
        body.dark #page-contact .success-box {
            background: rgba(40, 167, 69, 0.18) !important;
            border-left-color: #28a745 !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-contact .success-box * {
            color: #e6e6f0 !important;
        }
        body.dark #page-contact .success-box strong {
            color: #7fdb96 !important;
        }
        body.dark #page-contact .success-box a {
            color: #8fb4ff !important;
        }
        /* Warning box (light cream/yellow) — dark amber tint with light text */
        body.dark #page-contact .warning-box {
            background: rgba(255, 193, 7, 0.15) !important;
            border-left-color: #ffc107 !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-contact .warning-box * {
            color: #e6e6f0 !important;
        }
        body.dark #page-contact .warning-box h3 {
            color: #ffd86b !important;
        }
        body.dark #page-contact .warning-box strong {
            color: #ffd86b !important;
        }
        body.dark #page-contact .warning-box a {
            color: #8fb4ff !important;
        }
        /* Subtitle ("LottoPicksPro" under heading) */
        body.dark #page-contact .subtitle {
            color: #b8a4e8 !important;
        }
        /* Bold text using the dark purple */
        body.dark #page-contact strong {
            color: #b8a4e8 !important;
        }
        /* General body text safety */
        body.dark #page-contact p,
        body.dark #page-contact li {
            color: #e6e6f0;
        }
        /* === End Contact Us dark-mode fixes === */

        /* === Terms & Conditions dark-mode fixes === */
        /* Colored info/warning/success boxes — darken with light text */
        body.dark #page-terms .info {
            background: rgba(52, 152, 219, 0.18) !important;
            border-color: rgba(52, 152, 219, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .warning {
            background: rgba(231, 76, 60, 0.18) !important;
            border-color: rgba(231, 76, 60, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .success {
            background: rgba(40, 167, 69, 0.18) !important;
            border-color: rgba(40, 167, 69, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .highlight {
            background: rgba(255, 193, 7, 0.15) !important;
            border-color: rgba(255, 193, 7, 0.5) !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .info *,
        body.dark #page-terms .warning *,
        body.dark #page-terms .success *,
        body.dark #page-terms .highlight * {
            color: #e6e6f0 !important;
        }
        /* Keep headings tinted with semantic color */
        body.dark #page-terms .info h3,
        body.dark #page-terms .info h4 { color: #7fbfff !important; }
        body.dark #page-terms .warning h3,
        body.dark #page-terms .warning h4 { color: #ff9999 !important; }
        body.dark #page-terms .success h3,
        body.dark #page-terms .success h4 { color: #7fdb96 !important; }
        body.dark #page-terms .highlight h3,
        body.dark #page-terms .highlight h4 { color: #ffd86b !important; }
        /* Definition boxes — light gray boxes used for legal term definitions */
        body.dark #page-terms .definition {
            background: rgba(255, 255, 255, 0.04) !important;
            border-color: #3a3b5c !important;
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .definition * {
            color: #e6e6f0 !important;
        }
        body.dark #page-terms .definition strong {
            color: #c5b8ee !important;
        }
        /* Table of Contents — replace light gradient with dark surface */
        body.dark #page-terms .toc-container {
            background: linear-gradient(135deg, #232442 0%, #2a2c4f 100%) !important;
            border-color: #5b6cc4 !important;
        }
        body.dark #page-terms .toc-title {
            color: #b8a4e8 !important;
        }
        body.dark #page-terms .toc-list a {
            color: #c5b8ee !important;
        }
        body.dark #page-terms .toc-list a:hover {
            background: rgba(102,126,234,0.18) !important;
            color: #ffffff !important;
        }
        body.dark #page-terms .toc-number {
            color: #8fb4ff !important;
        }
        body.dark #page-terms .toc-subsection,
        body.dark #page-terms .toc-subsection a {
            color: #b0b0c0 !important;
        }
        body.dark #page-terms .toc-subsection a:hover {
            color: #ffffff !important;
        }
        /* Tables: dark rows so white text is readable */
        body.dark #page-terms table {
            background: #232442 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-terms table tr,
        body.dark #page-terms table td {
            background: transparent !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-terms table th {
            background: #2d2f55 !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-terms table tr:nth-child(even) td {
            background: rgba(255,255,255,0.03) !important;
        }
        /* Page meta */
        body.dark #page-terms .subtitle,
        body.dark #page-terms .subtitle strong {
            color: #b8a4e8 !important;
        }
        body.dark #page-terms .last-updated {
            color: #b0b0c0 !important;
        }
        body.dark #page-terms .last-updated strong {
            color: #e6e6f0 !important;
        }
        /* Section headings */
        body.dark #page-terms h3 {
            color: #8fb4ff !important;
        }
        body.dark #page-terms h4 {
            color: #c5b8ee !important;
        }
        body.dark #page-terms .section-number {
            color: #8fb4ff !important;
        }
        body.dark #page-terms h2 {
            border-bottom-color: #3a3b5c !important;
        }
        /* Links (default black/blue look) */
        body.dark #page-terms a {
            color: #8fb4ff !important;
        }
        body.dark #page-terms a:hover {
            color: #a8c5ff !important;
        }
        /* Page-level <strong> that was solid black on light bg */
        body.dark #page-terms > * strong {
            color: #e6e6f0;
        }
        /* General body text safety */
        body.dark #page-terms p,
        body.dark #page-terms li {
            color: #e6e6f0;
        }
        /* === End Terms & Conditions dark-mode fixes === */

        /* Inputs / selects / textareas */
        body.dark input,
        body.dark select,
        body.dark textarea {
            background: #1a1b33 !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        /* Breadcrumb */
        body.dark .breadcrumb {
            background: rgba(35,36,66,0.7) !important;
        }
        body.dark .breadcrumb-item span {
            color: #e6e6f0 !important;
        }
        /* Contact hero in dark mode */
        body.dark #page-contact .hero-section {
            background: linear-gradient(135deg, #2a2b50 0%, #322a55 100%) !important;
            color: #e6e6f0 !important;
            border-color: #3a3b5c !important;
        }
        body.dark #page-contact .hero-section h2 { color: #c9b8f0 !important; }
        /* Tables */
        body.dark table, body.dark th, body.dark td {
            border-color: #3a3b5c !important;
            color: #e6e6f0 !important;
        }
        body.dark th { background: #2a2b50 !important; }

        /* Winner Check results: the result cards have their own white/colored backgrounds
           with intentional text colors set inline. Protect those from the broad body.dark
           text color overrides so they remain readable. */
        body.dark #winner-check-results h4 { color: #667eea !important; }
        body.dark #winner-check-results .wcheck-info { color: #666666 !important; }
        body.dark #winner-check-results .wcheck-label-dark { color: #2d3436 !important; }
        body.dark #winner-check-results .wcheck-label-light { color: #2d3436 !important; }
        body.dark #winner-check-results .wcheck-game-name-normal { color: #333333 !important; }
        body.dark #winner-check-results .wcheck-game-name-jackpot { color: #2d3436 !important; }
        /* No-match panel */
        body.dark #winner-check-results [data-card="no-match"] .wcheck-no-match-title { color: #2d3436 !important; }
        body.dark #winner-check-results [data-card="no-match"] .wcheck-no-match-sub { color: #666666 !important; }
        /* JACKPOT WINNER strip - now green */
        body.dark #winner-check-results .wcheck-jackpot-strip { background: #28a745 !important; color: #ffffff !important; }
        /* Number balls keep their intended colors */
        body.dark #winner-check-results .ball-match-normal { background: #4caf50 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-miss-normal { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-match-jackpot { background: #28a745 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-miss-jackpot { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-bonus-match { background: #ff9800 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-bonus-miss { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-bonus-jackpot-match { background: #ff9800 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-bonus-jackpot-miss { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-fire-match { background: #ff5722 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-fire-miss { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-fire-jackpot-match { background: #ff5722 !important; color: #ffffff !important; }
        body.dark #winner-check-results .ball-fire-jackpot-miss { background: #e0e0e0 !important; color: #666666 !important; }
        body.dark #winner-check-results .ball-name-normal { color: #999999 !important; }
        body.dark #winner-check-results .ball-name-jackpot { color: #666666 !important; }
        /* Index/match-count pills */
        body.dark #winner-check-results .wcheck-index-normal { background: #667eea !important; color: #ffffff !important; }
        body.dark #winner-check-results .wcheck-index-jackpot { background: #28a745 !important; color: #ffffff !important; }
        body.dark #winner-check-results .wcheck-count-normal { background: #4facfe !important; color: #ffffff !important; }
        body.dark #winner-check-results .wcheck-count-normal-low { background: #ffa726 !important; color: #ffffff !important; }
        body.dark #winner-check-results .wcheck-count-jackpot { background: #28a745 !important; color: #ffffff !important; }
        /* Header panel in dark mode */
        body.dark .header {
            background: linear-gradient(135deg, #2a2b50 0%, #322a55 100%) !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
        }

        /* ============ THEME TOGGLE BUTTON ============ */
        .theme-toggle {
            position: fixed;
            top: 18px;
            right: 18px;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: none;
            border-radius: 30px;
            background: #ffffff;
            color: #2d3436;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: var(--transition);
        }
        .theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
        body.dark .theme-toggle {
            background: #232442;
            color: #e6e6f0;
        }
        @media (max-width: 600px) {
            .theme-toggle { top: 12px; right: 12px; padding: 7px 11px; font-size: 13px; }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: #ffffff;
            min-height: 100vh;
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
            text-rendering: optimizeLegibility;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: transparent;
            pointer-events: none;
            z-index: 1;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        /* Header */
        .header {
            padding: 30px 20px;
            animation: slideDown 0.6s ease-out;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
        }

        .header-layout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .logo-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        /* New Center Banner 728x90 */
        .center-banner-container {
            width: 100%;
            max-width: 728px;
            margin: 20px auto;
            display: flex;
            justify-content: center;
        }

        .center-banner-slot {
            width: 728px;
            height: 90px;
            background: #ffffff;
            
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        /* Responsive center banner for tablets and smaller */
        @media (max-width: 768px) {
            .center-banner-container {
                max-width: 100%;
                padding: 0 10px;
            }
            
            .center-banner-slot {
                width: 100%;
                max-width: 100%;
                min-height: 90px;
                height: auto;
            }
            
            .center-banner-slot .banner-content {
                padding: 15px 10px;
                font-size: 0.9rem !important;
            }
        }
        
        /* Extra small screens */
        @media (max-width: 480px) {
            .center-banner-slot {
                min-height: 80px;
                border-radius: 10px;
            }
            
            .center-banner-slot .banner-content {
                padding: 10px 8px;
                font-size: 0.8rem !important;
                line-height: 1.3;
            }
        }
        
        /* Very small screens */
        @media (max-width: 360px) {
            .center-banner-slot {
                min-height: 70px;
            }
            
            .center-banner-slot .banner-content {
                padding: 8px 5px;
                font-size: 0.75rem !important;
            }
        }

        .center-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .center-banner-slot .banner-content.active {
            opacity: 1;
        }

        .center-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: transparent;
            padding: 0px 80px;
            border-radius: 100px;
            margin-bottom: 15px;
            transition: var(--transition);
        }

        .logo:hover {
            transform: translateY(-2px);
        }

        .logo-icon {
            font-size: 2rem;
            animation: bounce 2s infinite;
        }

        .logo-text {
            font-size: 1.5rem;
            font-weight: 800;
            background: transparent;
        }

        .tagline {
            color: #ffffff;
            font-size: 1rem;
            opacity: 1;
            margin-top: 10px;
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .banner-slot {
                flex: 0 0 250px;
                min-height: 80px;
            }
        }

        /* Hide empty banner slots so they don't leave gaps in the layout */
        .banner-slot:empty {
            display: none !important;
        }

        @media (max-width: 768px) {
            .header-layout {
                flex-direction: column;
            }
            
            .banner-slot {
                flex: 1;
                width: 100%;
                max-width: 500px;
            }
            
            .logo-center {
                order: -1;
            }

            /* Quick Pick Side Banners - Mobile responsive at 768px */
            .generate-with-side-banners {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }

            .quick-pick-side-banner {
                width: 100%;
                height: auto;
                max-width: 300px;
                margin: 0 auto;
            }

            .quick-pick-side-banner.left-banner {
                order: 2;
            }

            .generate-controls {
                order: 1;
            }


            .quick-pick-banner-slot {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }
        }

        /* Breadcrumb Navigation */
        .breadcrumb {
            background: #ffffff;
            padding: 20px 30px;
            border-radius: 15px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            border: 1px solid #ececf3;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
            font-size: 1rem;
            padding: 12px 24px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #2d7a2d 0%, #1b5e20 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(45, 122, 45, 0.3);
            position: relative;
            overflow: hidden;
        }

        .breadcrumb-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }

        .breadcrumb-item:hover::before {
            left: 100%;
        }

        .breadcrumb-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(45, 122, 45, 0.4);
        }

        .breadcrumb-item:active {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(45, 122, 45, 0.3);
        }

        .breadcrumb-item.inactive {
            background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
            color: #757575;
            cursor: not-allowed;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .breadcrumb-item.inactive:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .breadcrumb-item.inactive::before {
            display: none;
        }

        .breadcrumb-item span {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1rem;
            letter-spacing: 0.3px;
        }

        .breadcrumb-separator {
            color: #667eea;
            font-size: 1.3rem;
            font-weight: bold;
            opacity: 1;
        }

        /* Page Container */
        .page {
            display: none;
            animation: fadeIn 0.5s ease-out;
        }

        .page.active {
            display: block;
        }

        /* ============ HOME PAGE ============ */
        .home-hero {
            text-align: center;
            padding: 60px 24px 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            color: #ffffff;
            margin-bottom: 50px;
            box-shadow: 0 10px 40px rgba(102, 126, 234, 0.25);
        }
        .home-hero-icon {
            font-size: 4rem;
            margin-bottom: 10px;
            line-height: 1;
        }
        .home-hero-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.6rem;
            font-weight: 700;
            margin-bottom: 14px;
            letter-spacing: 0.5px;
            color: #ffffff;
        }
        .home-brand {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .home-hero-subtitle {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 18px;
            opacity: 0.95;
        }
        .home-hero-description {
            font-size: 1rem;
            max-width: 720px;
            margin: 0 auto 30px;
            line-height: 1.6;
            opacity: 0.92;
        }
        .home-cta-btn {
            background: #ffffff;
            color: #667eea;
            border: none;
            padding: 16px 42px;
            font-size: 1.15rem;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .home-cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
        }
        .home-hero-meta {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        .home-meta-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .home-meta-num {
            font-size: 2rem;
            font-weight: 800;
            font-family: 'Montserrat', sans-serif;
            color: #ffd700;
        }
        .home-meta-label {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            opacity: 0.9;
            margin-top: 4px;
        }
        .home-section {
            padding: 50px 24px;
            margin-bottom: 30px;
        }
        .home-section-alt {
            background: #f7f8fc;
            border-radius: 16px;
        }
        .home-section-title {
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: #2d3436;
            margin-bottom: 12px;
        }
        .home-section-subtitle {
            text-align: center;
            font-size: 1.05rem;
            color: #666;
            margin-bottom: 35px;
        }
        .home-steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 22px;
            max-width: 1100px;
            margin: 35px auto 0;
        }
        .home-step-card {
            position: relative;
            background: #ffffff;
            border: 2px solid #ececf3;
            border-radius: 16px;
            padding: 30px 24px 24px;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }
        .home-step-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
            border-color: #667eea;
        }
        .home-step-num {
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-step-icon {
            font-size: 2.6rem;
            margin-bottom: 12px;
        }
        .home-step-card h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #2d3436;
        }
        .home-step-card p {
            color: #555;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        .home-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
            max-width: 1100px;
            margin: 35px auto 0;
        }
        .home-feature-card {
            background: #ffffff;
            border: 1px solid #ececf3;
            border-radius: 14px;
            padding: 24px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .home-feature-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
        }
        .home-feature-icon {
            font-size: 2.2rem;
            margin-bottom: 12px;
        }
        .home-feature-card h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 8px;
        }
        .home-feature-card p {
            color: #555;
            font-size: 0.93rem;
            line-height: 1.55;
        }
        .home-games-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            max-width: 900px;
            margin: 0 auto;
        }
        .home-game-pill {
            padding: 10px 18px;
            background: #ffffff;
            border: 2px solid #667eea;
            color: #667eea;
            border-radius: 30px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: background 0.2s, color 0.2s;
        }
        .home-game-pill:hover {
            background: #667eea;
            color: #ffffff;
        }

        .home-state-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px;
            margin-top: 22px;
        }
        .home-state-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 11px 14px;
            background: #ffffff;
            border: 1px solid #d9dcf0;
            border-radius: 9px;
            color: #4a4a68;
            font-weight: 600;
            font-size: 0.92rem;
            text-decoration: none;
            transition: border-color .18s, color .18s, transform .18s;
        }
        .home-state-link:hover {
            border-color: #667eea;
            color: #667eea;
            transform: translateY(-2px);
        }
        .home-state-count {
            font-size: 0.74rem;
            font-weight: 700;
            color: #9aa0c0;
            background: #f1f2fa;
            border-radius: 20px;
            padding: 2px 8px;
        }
        .home-state-link:hover .home-state-count {
            background: #667eea;
            color: #ffffff;
        }
        body.dark .home-state-link {
            background: #23244a !important;
            border-color: #35376a !important;
            color: #c9cae8 !important;
        }
        body.dark .home-state-link:hover {
            border-color: #b8a4e8 !important;
            color: #b8a4e8 !important;
        }
        body.dark .home-state-count {
            background: #191a38 !important;
            color: #8f92bb !important;
        }
        body.dark .home-state-link:hover .home-state-count {
            background: #b8a4e8 !important;
            color: #1a1b33 !important;
        }
        @media (max-width: 480px) {
            .home-state-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
        }

        .home-state-footer {
            margin: 34px auto 0;
            max-width: 1100px;
            border-top: 1px solid #e2e4f2;
            padding-top: 18px;
        }
        .home-state-footer > summary {
            cursor: pointer;
            list-style: none;
            font-size: 0.9rem;
            font-weight: 600;
            color: #8a8fb0;
            padding: 6px 0;
            text-align: center;
        }
        .home-state-footer > summary::-webkit-details-marker { display: none; }
        .home-state-footer > summary::after { content: " ▾"; }
        .home-state-footer[open] > summary::after { content: " ▴"; }
        .home-state-footer > summary:hover { color: #667eea; }
        .home-state-footer .home-state-grid { margin-top: 14px; margin-bottom: 8px; }
        body.dark .home-state-footer { border-top-color: #35376a !important; }
        body.dark .home-state-footer > summary { color: #8f92bb !important; }
        body.dark .home-state-footer > summary:hover { color: #b8a4e8 !important; }
        .home-faq-list {
            max-width: 800px;
            margin: 35px auto 0;
        }
        .home-faq-item {
            background: #ffffff;
            border: 1px solid #ececf3;
            border-radius: 12px;
            margin-bottom: 12px;
            padding: 0;
            overflow: hidden;
        }
        .home-faq-item summary {
            padding: 18px 22px;
            font-weight: 600;
            color: #2d3436;
            cursor: pointer;
            font-size: 1rem;
            list-style: none;
            position: relative;
            padding-right: 50px;
        }
        .home-faq-item summary::-webkit-details-marker { display: none; }
        .home-faq-item summary::after {
            content: '+';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            color: #667eea;
            font-weight: 300;
            transition: transform 0.2s;
        }
        .home-faq-item[open] summary::after {
            transform: translateY(-50%) rotate(45deg);
        }
        .home-faq-item p {
            padding: 0 22px 18px;
            color: #555;
            line-height: 1.6;
            margin: 0;
        }
        .home-final-cta {
            text-align: center;
            padding: 50px 24px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-radius: 20px;
            color: #ffffff;
            margin-bottom: 50px;
        }
        .home-final-cta h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 14px;
            color: #ffffff;
        }
        .home-final-cta p {
            font-size: 1rem;
            margin-bottom: 26px;
            opacity: 0.95;
        }
        .home-final-cta .home-cta-btn {
            color: #f5576c;
        }

        /* Dark mode for home page */
        body.dark .home-section-alt {
            background: #1a1b33 !important;
        }
        body.dark .home-section-title { color: #e6e6f0 !important; }
        body.dark .home-section-subtitle { color: #cfcfe6 !important; }
        body.dark .home-step-card,
        body.dark .home-feature-card,
        body.dark .home-faq-item,
        body.dark .home-game-pill {
            background: #232442 !important;
            border-color: #3a3b5c !important;
        }
        body.dark .home-step-card h3,
        body.dark .home-step-card p,
        body.dark .home-feature-card p,
        body.dark .home-faq-item summary,
        body.dark .home-faq-item p {
            color: #e6e6f0 !important;
        }
        body.dark .home-game-pill { color: #b8a4e8 !important; border-color: #b8a4e8 !important; }
        body.dark .home-game-pill:hover { background: #b8a4e8 !important; color: #1a1b33 !important; }

        /* Home page mobile responsive */
        @media (max-width: 600px) {
            .home-hero { padding: 40px 18px 35px; }
            .home-hero-title { font-size: 1.9rem; }
            .home-hero-subtitle { font-size: 1.05rem; }
            .home-hero-description { font-size: 0.93rem; }
            .home-hero-meta { gap: 25px; margin-top: 30px; }
            .home-meta-num { font-size: 1.5rem; }
            .home-section { padding: 35px 16px; }
            .home-section-title { font-size: 1.55rem; }
            .home-final-cta { padding: 35px 18px; }
            .home-final-cta h2 { font-size: 1.4rem; }
            .home-cta-btn { padding: 14px 32px; font-size: 1rem; }
        }

        /* Page 1: State Selection */
        .state-title {
            text-align: center;
            color: #28a745;
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        /* Old search styles removed */

        .states-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }

        .state-card {
            background: #ffffff;
            border-radius: 15px;
            padding: 25px 20px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .state-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: #28a745;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .state-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(40, 167, 69, 0.45);
        }

        .state-card:hover::before {
            transform: scaleX(1);
        }

        .state-card.no-lottery {
            opacity: 0.5;
            background: rgba(200, 200, 200, 0.5);
            cursor: not-allowed;
        }

        .state-card.no-lottery:hover {
            transform: none;
        }

        .state-abbreviation {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .state-card.no-lottery .state-abbreviation {
            background: linear-gradient(135deg, #999 0%, #666 100%);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .state-name {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 8px;
            color: #ffffff;
        }

        .state-games-count {
            font-size: 0.85rem;
            color: #666;
        }

        /* Page 2: Game Selection */
        .game-header {
            background: #ffffff;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .game-header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }

        .selected-state-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .state-badge-name {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* State Side Banners (300x250) for Games Page */
        .state-side-banner-slot {
            width: 300px;
            height: 250px;
            background: #ffffff;
            
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .state-side-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .state-side-banner-slot .banner-content.active,
        .state-side-banner-slot .banner-content:first-child {
            opacity: 1;
        }

        .state-side-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* State Page Banner Slot for bottom 728x90 banner on Games page */
        .state-page-banner-slot {
            width: 100%;
            max-width: 728px;
            height: 90px;
            background: #ffffff;
            
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .state-page-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .state-page-banner-slot .banner-content.active,
        .state-page-banner-slot .banner-content:first-child {
            opacity: 1;
        }

        .state-page-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .state-badge {
            width: 70px;
            height: 70px;
            background: var(--primary);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .state-details {
            text-align: center;
        }

        .state-details h2 {
            font-size: 1.8rem;
            margin-bottom: 5px;
            color: #ff8c00;
        }

        .state-details p {
            color: #ffffff;
            font-size: 1.2rem;
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .game-card {
            background: #ffffff;
            border-radius: 15px;
            padding: 25px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        /* Arizona-Specific Game Card Styling */
        .games-grid[data-state="Arizona"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Arizona"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Arizona"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Arizona"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Arizona"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Arkansas-Specific Game Card Styling */
        .games-grid[data-state="Arkansas"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Arkansas"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Arkansas"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Arkansas"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Arkansas"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* California-Specific Game Card Styling */
        .games-grid[data-state="California"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="California"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="California"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="California"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="California"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Colorado-Specific Game Card Styling */
        .games-grid[data-state="Colorado"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Colorado"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Colorado"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Colorado"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Colorado"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Connecticut-Specific Game Card Styling */
        .games-grid[data-state="Connecticut"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Connecticut"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Connecticut"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Connecticut"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Connecticut"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Delaware-Specific Game Card Styling */
        .games-grid[data-state="Delaware"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Delaware"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Delaware"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Delaware"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Delaware"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Florida-Specific Game Card Styling */
        .games-grid[data-state="Florida"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Florida"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Florida"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        /* Universal fix: push the "DIGIT GAME / MULTI-STATE / STATE GAME" pill
           to the right of the big game number on all states with custom styling */
        .games-grid[data-state] .game-type {
            margin-left: 60px;
            position: relative;
            z-index: 1;
        }

        .games-grid[data-state="Florida"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Florida"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Georgia-Specific Game Card Styling */
        .games-grid[data-state="Georgia"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Georgia"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Georgia"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Georgia"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Georgia"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Idaho-Specific Game Card Styling */
        .games-grid[data-state="Idaho"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Idaho"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Idaho"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Idaho"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Idaho"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Illinois-Specific Game Card Styling */
        .games-grid[data-state="Illinois"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Illinois"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Illinois"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Illinois"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Illinois"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Indiana-Specific Game Card Styling */
        .games-grid[data-state="Indiana"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Indiana"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Indiana"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Indiana"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Indiana"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Iowa-Specific Game Card Styling */
        .games-grid[data-state="Iowa"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Iowa"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Iowa"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Iowa"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Iowa"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Kansas-Specific Game Card Styling */
        .games-grid[data-state="Kansas"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Kansas"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Kansas"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Kansas"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Kansas"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Kentucky-Specific Game Card Styling */
        .games-grid[data-state="Kentucky"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Kentucky"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Kentucky"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Kentucky"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Kentucky"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Louisiana-Specific Game Card Styling */
        .games-grid[data-state="Louisiana"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Louisiana"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Louisiana"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Louisiana"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Louisiana"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Maine-Specific Game Card Styling */
        .games-grid[data-state="Maine"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Maine"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Maine"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Maine"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Maine"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Maryland-Specific Game Card Styling */
        .games-grid[data-state="Maryland"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Maryland"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Maryland"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Maryland"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Maryland"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Massachusetts-Specific Game Card Styling */
        .games-grid[data-state="Massachusetts"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Massachusetts"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Massachusetts"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Massachusetts"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Massachusetts"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Michigan-Specific Game Card Styling */
        .games-grid[data-state="Michigan"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Michigan"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Michigan"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Michigan"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Michigan"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Minnesota-Specific Game Card Styling */
        .games-grid[data-state="Minnesota"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Minnesota"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Minnesota"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Minnesota"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Minnesota"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Mississippi-Specific Game Card Styling */
        .games-grid[data-state="Mississippi"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Mississippi"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Mississippi"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Mississippi"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Mississippi"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Missouri-Specific Game Card Styling */
        .games-grid[data-state="Missouri"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Missouri"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Missouri"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Missouri"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Missouri"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Montana-Specific Game Card Styling */
        .games-grid[data-state="Montana"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Montana"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Montana"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Montana"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Montana"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Nebraska-Specific Game Card Styling */
        .games-grid[data-state="Nebraska"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Nebraska"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Nebraska"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Nebraska"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Nebraska"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* New Hampshire-Specific Game Card Styling */
        .games-grid[data-state="New Hampshire"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="New Hampshire"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="New Hampshire"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="New Hampshire"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="New Hampshire"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* New Jersey-Specific Game Card Styling */
        .games-grid[data-state="New Jersey"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="New Jersey"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="New Jersey"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="New Jersey"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="New Jersey"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* New Mexico-Specific Game Card Styling */
        .games-grid[data-state="New Mexico"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="New Mexico"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="New Mexico"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="New Mexico"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="New Mexico"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* New York-Specific Game Card Styling */
        .games-grid[data-state="New York"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="New York"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="New York"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="New York"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="New York"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* North Carolina-Specific Game Card Styling */
        .games-grid[data-state="North Carolina"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="North Carolina"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="North Carolina"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="North Carolina"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="North Carolina"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* North Dakota-Specific Game Card Styling */
        .games-grid[data-state="North Dakota"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="North Dakota"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="North Dakota"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="North Dakota"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="North Dakota"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Ohio-Specific Game Card Styling */
        .games-grid[data-state="Ohio"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Ohio"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Ohio"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Ohio"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Ohio"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Oklahoma-Specific Game Card Styling */
        .games-grid[data-state="Oklahoma"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Oklahoma"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Oklahoma"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Oklahoma"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Oklahoma"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Oregon-Specific Game Card Styling */
        .games-grid[data-state="Oregon"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Oregon"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Oregon"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Oregon"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Oregon"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Pennsylvania-Specific Game Card Styling */
        .games-grid[data-state="Pennsylvania"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Pennsylvania"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Pennsylvania"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Pennsylvania"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Pennsylvania"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Rhode Island-Specific Game Card Styling */
        .games-grid[data-state="Rhode Island"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Rhode Island"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Rhode Island"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Rhode Island"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Rhode Island"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* South Carolina-Specific Game Card Styling */
        .games-grid[data-state="South Carolina"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="South Carolina"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="South Carolina"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="South Carolina"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="South Carolina"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* South Dakota-Specific Game Card Styling */
        .games-grid[data-state="South Dakota"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="South Dakota"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="South Dakota"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="South Dakota"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="South Dakota"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Tennessee-Specific Game Card Styling */
        .games-grid[data-state="Tennessee"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Tennessee"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Tennessee"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Tennessee"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Tennessee"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Texas-Specific Game Card Styling */
        .games-grid[data-state="Texas"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Texas"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Texas"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Texas"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Texas"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Vermont-Specific Game Card Styling */
        .games-grid[data-state="Vermont"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Vermont"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Vermont"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Vermont"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Vermont"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Virginia-Specific Game Card Styling */
        .games-grid[data-state="Virginia"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Virginia"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Virginia"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Virginia"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Virginia"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Washington-Specific Game Card Styling */
        .games-grid[data-state="Washington"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Washington"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Washington"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Washington"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Washington"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* West Virginia-Specific Game Card Styling */
        .games-grid[data-state="West Virginia"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="West Virginia"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="West Virginia"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="West Virginia"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="West Virginia"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Wisconsin-Specific Game Card Styling */
        .games-grid[data-state="Wisconsin"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Wisconsin"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Wisconsin"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Wisconsin"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Wisconsin"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Wyoming-Specific Game Card Styling */
        .games-grid[data-state="Wyoming"] .game-card {
            background: linear-gradient(135deg, #243447, #1a2635);
            border-radius: 15px;
            border-left: 5px solid #B7410E;
            transition: all 0.3s ease;
            position: relative;
            overflow: visible;
        }

        .games-grid[data-state="Wyoming"] .game-card:hover {
            transform: translateX(10px);
            border-left-color: #1FCECB;
            box-shadow: 0 10px 30px rgba(31,206,203,0.3);
        }

        .games-grid[data-state="Wyoming"] .game-card::before {
            content: attr(data-game-number);
            position: absolute;
            top: 15px;
            left: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: #B7410E;
            line-height: 1;
        }

        .games-grid[data-state="Wyoming"] .game-title {
            margin-top: 60px;
            font-size: 1.4rem;
            font-weight: 700;
            color: #1FCECB;
            text-align: left;
        }

        .games-grid[data-state="Wyoming"] .game-description {
            color: rgba(224,225,221,0.8);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        .game-type {
            display: inline-block;
            padding: 5px 12px;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .game-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: #ffffff;
        }

        .game-details {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
        }

        /* Page 3: Number Generator */
        .generator-header {
            background: #ffffff;
            border-radius: 20px;
            padding: 20px 25px;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .game-info-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }

        .game-info-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .game-info-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .game-info-badge-name {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .game-info-text {
            text-align: center;
        }

        .game-info-text h3 {
            font-size: 1.2rem;
            margin-bottom: 3px;
            color: #ff8c00;
        }

        .game-info-text p {
            font-size: 1.2rem;
            color: #ffffff;
        }

        /* Left and Right Side Banners (300x250) */
        .side-banner-slot {
            width: 300px;
            height: 250px;
            min-width: 300px;
            min-height: 250px;
            background: #ffffff;
            
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            overflow: hidden;
            position: relative;
        }

        .side-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .side-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .side-banner-slot .banner-content.active,
        .side-banner-slot .banner-content:first-child {
            opacity: 1;
        }

        .banner-content {
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .banner-content.active {
            display: flex;
        }

        .banner-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .game-banner-placeholder {
            text-align: center;
            color: rgba(102, 126, 234, 0.5);
            font-size: 0.85rem;
            padding: 10px;
        }

        .game-banner-placeholder-icon {
            font-size: 2rem;
            margin-bottom: 5px;
            opacity: 0.3;
        }

        /* Below Button Banner Slot */
        .below-button-banner-container {
            margin: 20px auto;
            display: flex;
            justify-content: center;
        }

        .below-button-banner-slot {
            width: 728px;
            height: 90px;
            background: #ffffff;
            
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            overflow: hidden;
            position: relative;
        }

        .below-button-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 1024px) {
            .game-info-display {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            .side-banner-slot {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }

            .below-button-banner-slot {
                width: 100%;
                max-width: 728px;
            }

            /* Quick Pick Side Banners - Same behavior as header banners */
            .generate-with-side-banners {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }

            .quick-pick-side-banner {
                width: 100%;
                height: auto;
                max-width: 300px;
                margin: 0 auto;
            }

            .quick-pick-side-banner.left-banner {
                order: 2;
            }

            .generate-controls {
                order: 1;
            }


            .quick-pick-banner-slot {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }
        }

        /* Main Navigation Tabs */
        .nav-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            
            border-radius: 15px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .nav-tab {
            flex: 1;
            min-width: 120px;
            padding: 15px 20px;
            background: #ffffff;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

        .nav-tab:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .nav-tab.active {
            background: linear-gradient(135deg, #2d7a2d 0%, #1b5e20 100%);
            color: #ffffff !important;
            box-shadow: 0 10px 30px rgba(45, 122, 45, 0.3);
        }

        /* Tab Content */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Quick Pick Tab */
        .numbers-display {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        }

        .generate-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 0 auto 30px auto;
            align-items: center;
            width: 100%;
            max-width: 700px;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            width: 100%;
            max-width: 400px;
            justify-content: center;
        }

        .control-label {
            min-width: auto;
            font-weight: 600;
            text-align: center;
        }

        .number-input {
            flex: 1;
            padding: 15px;
            border: 2px solid var(--gray);
            border-radius: 10px;
            font-size: 1.1rem;
            transition: var(--transition);
        }

        .number-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .generate-btn {
            padding: 18px 35px;
            background: var(--success);
            color: var(--light);
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 10px 25px rgba(79, 172, 254, 0.3);
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        .generate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(79, 172, 254, 0.4);
        }

        .generate-btn:active {
            transform: translateY(0);
        }

        /* Quick Pick Side Banners (300x250) */
        .generate-with-side-banners {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .quick-pick-side-banner {
            width: 300px;
            height: 250px;
        }

        .quick-pick-banner-slot {
            width: 300px;
            height: 250px;
            min-width: 300px;
            min-height: 250px;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .quick-pick-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Manual Selection Tab */
        .selection-info-with-banner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }

        .selection-info {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }

        /* Manual Select Side Banners (300x250) */
        .manual-select-side-banner-slot {
            width: 300px;
            height: 250px;
            background: #ffffff;
            
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .manual-select-side-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .manual-select-side-banner-slot .banner-content.active,
        .manual-select-side-banner-slot .banner-content:first-child {
            opacity: 1;
        }

        .manual-select-side-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .selection-center-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 100%;
            max-width: 600px;
        }

        .selection-info {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            width: 100%;
        }

        .selection-details {
            flex: 1;
        }

        .selection-count {
            font-size: 1.1rem;
            font-weight: 600;
            color: #667eea;
            margin-bottom: 5px;
        }

        .selection-hint {
            font-size: 1.2rem;
            color: #666;
        }

        .combination-preview {
            background: var(--primary);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            text-align: center;
            min-width: 150px;
        }

        .combination-count {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .combination-label {
            font-size: 0.85rem;
            opacity: 1;
        }

        .number-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 10px;
            margin-bottom: 25px;
        }

        .number-btn {
            aspect-ratio: 1;
            border: 2px solid var(--gray);
            background: var(--light);
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .number-btn:hover {
            transform: scale(1.1);
            border-color: #667eea;
        }

        .number-btn.selected {
            background: var(--primary);
            color: var(--light);
            border-color: #667eea;
            animation: selectPulse 0.3s ease;
        }

        .fireball-btn.selected {
            background: linear-gradient(135deg, #ff5722 0%, #d84315 100%) !important;
            color: white !important;
            border-color: #bf360c !important;
            box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4);
            transform: scale(1.1);
        }

        /* MyDaY Selected States */
        .myday-month.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border-color: #667eea !important;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            transform: scale(1.1);
        }

        .myday-day.selected {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
            color: white !important;
            border-color: #f093fb !important;
            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
            transform: scale(1.1);
        }

        .myday-year1.selected,
        .myday-year2.selected {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
            color: white !important;
            border-color: #11998e !important;
            box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
            transform: scale(1.1);
        }

        /* 2by2 Selected States */
        .twoby2-red.selected {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
            color: white !important;
            border-color: #c0392b !important;
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
            transform: scale(1.1);
        }

        .twoby2-white.selected {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
            color: white !important;
            border-color: #2c3e50 !important;
            box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);
            transform: scale(1.1);
        }

        .fireball-section {
            transition: all 0.3s ease;
        }

        .combination-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
            width: 100%;
        }

        .control-btn {
            padding: 12px 20px;
            border: 2px solid #667eea;
            background: white;
            color: #667eea;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .control-btn:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .control-btn-red {
            border-color: #E74C3C;
            color: #E74C3C;
        }

        .control-btn-red:hover {
            background: #E74C3C;
            color: white;
        }

        .warning-message {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
            animation: slideInLeft 0.3s ease-out;
            width: 100%;
        }

        .warning-message.show {
            display: block;
        }

        .digit-lines {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 25px;
        }

        .digit-line {
            background: var(--gray);
            padding: 20px;
            border-radius: 12px;
        }

        .digit-line-header {
            font-weight: 600;
            margin-bottom: 15px;
            color: #667eea;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .digit-line-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .position-badge {
            background: var(--primary);
            color: var(--light);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        .digit-selected-count {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        /* Generated Numbers Display */
        .picks-management-bar {
            background: transparent;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .picks-selection-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .select-all-checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .selection-label {
            font-weight: 600;
            color: #667eea;
        }

        .picks-actions-bar {
            display: flex;
            gap: 10px;
        }

        .management-btn {
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        /* All Selected-action buttons lift on hover, just like Delete Selected */
        .management-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);
        }

        .management-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .delete-selected-btn {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .delete-selected-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(240, 93, 107, 0.35);
        }

        .delete-selected-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .save-selected-btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .save-selected-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
        }

        .save-selected-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .clear-all-btn {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }

        .clear-all-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(250, 112, 154, 0.3);
        }

        .picks-container {
            max-height: 600px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px;
            scroll-behavior: smooth;
        }

        .pick-item {
            background: var(--gray);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            animation: slideInLeft 0.3s ease-out;
            transition: var(--transition);
            position: relative;
        }

        .pick-item.selected {
            background: rgba(102, 126, 234, 0.1);
            border: 2px solid #667eea;
            transform: translateX(5px);
        }

        /* "This pick is saved" visual state */
        .pick-item.saved {
            border-left: 5px solid #28a745;
            background: linear-gradient(to right, rgba(40, 167, 69, 0.08), transparent 60%);
        }
        .pick-item.saved::after {
            content: '✓ SAVED';
            position: absolute;
            top: 10px;
            right: 12px;
            background: #28a745;
            color: #ffffff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            pointer-events: none;
            z-index: 1;
        }
        .action-btn.is-saved {
            background: #28a745 !important;
            color: #ffffff !important;
        }
        .action-btn.is-saved:hover {
            background: #218838 !important;
            transform: translateY(-2px);
        }

        .pick-item:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        /* ============== SPONSORED NUMBER GENERATOR STYLES ============== */
        /* Basic tier — subtle text-only credit */
        .sponsor-credit-basic {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed #d6d8e0;
            text-align: center;
            font-size: 0.82rem;
            color: #666;
            font-style: italic;
            display: block;
            transition: all 0.2s ease;
        }
        .sponsor-credit-basic strong {
            color: #667eea;
            font-style: normal;
            font-weight: 700;
        }
        a.sponsor-credit-basic:hover {
            color: #333;
        }
        a.sponsor-credit-basic:hover strong {
            text-decoration: underline;
        }
        .sponsor-basic-arrow {
            font-style: normal;
            color: #667eea;
            font-weight: 700;
            transition: transform 0.2s ease;
            display: inline-block;
        }
        a.sponsor-credit-basic:hover .sponsor-basic-arrow {
            transform: translateX(4px);
        }

        /* Standard tier — logo + tagline + label */
        .sponsor-credit-standard {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
            padding: 10px 14px;
            background: linear-gradient(135deg, #f8f9fc 0%, #eef1ff 100%);
            border-radius: 8px;
            border: 1px solid #e0e6ff;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        a.sponsor-credit-standard:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        .sponsor-credit-standard .sponsor-icon {
            font-size: 1.6rem;
            flex-shrink: 0;
        }
        .sponsor-credit-standard .sponsor-text {
            flex: 1;
            min-width: 0;
        }
        .sponsor-credit-standard .sponsor-brand {
            font-weight: 700;
            color: #2d3436;
            font-size: 0.95rem;
            line-height: 1.2;
        }
        .sponsor-credit-standard .sponsor-tagline {
            font-size: 0.78rem;
            color: #666;
            font-style: italic;
            line-height: 1.3;
            margin-top: 2px;
        }
        .sponsor-credit-standard .sponsor-label {
            font-size: 0.68rem;
            color: #999;
            letter-spacing: 1.5px;
            font-weight: 700;
            padding: 3px 8px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
            flex-shrink: 0;
        }

        /* Premium tier — single horizontal line with inline text segments */
        .sponsor-credit-premium {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            color: #ffffff;
            text-decoration: none;
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
            transition: transform 0.2s;
        }
        a.sponsor-credit-premium:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 14px rgba(102, 126, 234, 0.35);
        }
        .sponsor-credit-premium .sponsor-icon-premium {
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .sponsor-credit-premium .sponsor-text-premium {
            flex: 1;
            min-width: 0;
            font-size: 0.78rem;
            line-height: 1.35;
        }
        .sponsor-credit-premium .sponsor-prefix {
            font-size: 0.62rem;
            color: rgba(255,255,255,0.75);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            font-weight: 600;
            margin-right: 4px;
        }
        .sponsor-credit-premium .sponsor-brand-premium {
            font-weight: 700;
            color: #ffffff;
            margin-right: 4px;
        }
        .sponsor-credit-premium .sponsor-tagline-premium {
            color: rgba(255,255,255,0.9);
            font-style: italic;
            margin-right: 4px;
        }
        .sponsor-credit-premium .sponsor-cta {
            color: rgba(255,255,255,0.85);
            font-weight: 500;
        }

        /* Premium card's bg gradient is set inline, so it stays dark in dark mode too.
           Force the inner span text colors to stay light in both modes. */
        body.dark .sponsor-credit-premium span.sponsor-prefix {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark .sponsor-credit-premium span.sponsor-brand-premium {
            color: #ffffff !important;
        }
        body.dark .sponsor-credit-premium span.sponsor-tagline-premium {
            color: rgba(255,255,255,0.9) !important;
        }
        body.dark .sponsor-credit-premium span.sponsor-cta {
            color: rgba(255,255,255,0.85) !important;
        }

        /* Dark mode adjustments */
        body.dark .sponsor-credit-basic {
            color: #b0b3c0 !important;
            border-top-color: #3a3c52;
        }
        body.dark .sponsor-credit-basic strong {
            color: #a4b3ff !important;
        }
        body.dark .sponsor-credit-standard {
            background: #2a2c45 !important;
            border-color: #3a3c52 !important;
        }
        body.dark .sponsor-credit-standard .sponsor-brand {
            color: #e6e6f0 !important;
        }
        body.dark .sponsor-credit-standard .sponsor-tagline {
            color: #b0b3c0 !important;
        }
        body.dark .sponsor-credit-standard .sponsor-label {
            background: rgba(164, 179, 255, 0.15);
            color: #a4b3ff !important;
        }
        /* ============ END SPONSORED NUMBER GENERATOR STYLES ============ */

        .pick-checkbox {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        /* Saved tab — filter button (clickable count pills) */
        .saved-filter-btn {
            display: inline-block;
            margin-left: 8px;
            padding: 4px 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            font-size: 0.82rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 5px rgba(102, 126, 234, 0.25);
        }
        .saved-filter-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 5px 14px rgba(102, 126, 234, 0.4);
        }
        .saved-filter-btn.active {
            background: linear-gradient(135deg, #28a745 0%, #1e8a37 100%);
            box-shadow: 0 3px 10px rgba(40, 167, 69, 0.35);
        }
        .saved-filter-btn.active:hover {
            box-shadow: 0 5px 14px rgba(40, 167, 69, 0.45);
        }
        .saved-filter-indicator {
            background: linear-gradient(135deg, #e0f5e8 0%, #f5fff8 100%);
            border: 2px solid #28a745;
            border-radius: 10px;
            padding: 12px 18px;
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .saved-filter-indicator .filter-text {
            color: #1e6e2b;
            font-weight: 600;
            font-size: 0.95rem;
        }
        .saved-filter-indicator .clear-filter-btn {
            background: #28a745;
            color: #ffffff;
            border: none;
            padding: 7px 16px;
            border-radius: 6px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
        }
        .saved-filter-indicator .clear-filter-btn:hover {
            background: #1e8a37;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
        }
        body.dark .saved-filter-indicator {
            background: rgba(40, 167, 69, 0.15) !important;
            border-color: #28a745;
        }
        body.dark .saved-filter-indicator .filter-text {
            color: #66dd80 !important;
        }

        .pick-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            padding-left: 35px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .pick-header > div:first-child {
            flex: 1;
        }

        .pick-number {
            font-weight: 700;
            color: #667eea;
            font-size: 1rem;
        }

        .pick-actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            border: none;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .action-btn:hover {
            background: var(--primary);
            color: var(--light);
            transform: scale(1.1);
        }

        .numbers-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding-left: 35px;
        }

        .number-ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--light);
            background: var(--primary);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
            animation: ballBounce 0.5s ease-out;
            transition: var(--transition);
        }

        .number-ball:hover {
            transform: scale(1.15) rotate(10deg);
        }

        .number-ball.special {
            background: var(--secondary);
            box-shadow: 0 5px 15px rgba(240, 147, 251, 0.3);
        }

        /* Wider pill variant for Keno SPOT label (e.g. "SPOT 5") — needs more width than a single-number ball */
        .number-ball.spot-pill {
            width: auto;
            min-width: 90px;
            height: 50px;
            border-radius: 25px;
            padding: 0 18px;
            font-size: 1rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        /* Saved Numbers Tab */
        .saved-container {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px;
            min-height: 400px;
        }

        .saved-empty {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .saved-empty-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        /* Statistics Tab */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .stat-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .stat-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            background: var(--primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1rem;
            color: #666;
        }

        .stats-top-banner-container,
        .stats-bottom-banner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
        }

        .stats-bottom-banner-container {
            margin-top: 25px;
            margin-bottom: 0;
        }

        .stats-top-banner-slot,
        .stats-bottom-banner-slot {
            width: 728px;
            height: 90px;
            background: #ffffff;
            
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stats-top-banner-slot .banner-content,
        .stats-bottom-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .stats-top-banner-slot .banner-content.active,
        .stats-top-banner-slot .banner-content:first-child,
        .stats-bottom-banner-slot .banner-content.active,
        .stats-bottom-banner-slot .banner-content:first-child {
            opacity: 1;
        }

        .stats-top-banner-slot:hover,
        .stats-bottom-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Saved Tab Bottom Banner (728x90) */
        .saved-bottom-banner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
            margin-bottom: 0;
        }

        .saved-bottom-banner-slot {
            width: 728px;
            height: 90px;
            background: #ffffff;
            
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(102, 126, 234, 0.3);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .saved-bottom-banner-slot .banner-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .saved-bottom-banner-slot .banner-content.active {
            opacity: 1;
        }

        .saved-bottom-banner-slot:hover {
            border-color: rgba(102, 126, 234, 0.6);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Floating Action Buttons */
        .fab-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 1000;
        }

        .fab {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .fab-main {
            background: var(--success);
            color: var(--light);
        }

        .fab-main:hover {
            transform: scale(1.1) rotate(90deg);
        }

        .fab-secondary {
            background: var(--light);
            color: #667eea;
            transform: scale(0);
            opacity: 0;
        }

        .fab-secondary.show {
            transform: scale(1);
            opacity: 1;
        }

        .fab-secondary:hover {
            transform: scale(1.1);
        }

        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-content {
            background: var(--light);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid var(--gray);
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        /* Animations */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes ballBounce {
            0% { transform: scale(0) rotate(0); }
            50% { transform: scale(1.2) rotate(180deg); }
            100% { transform: scale(1) rotate(360deg); }
        }

        @keyframes selectPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

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

        /* Responsive Design - Tablet */
        @media (max-width: 768px) {
            .app-container {
                padding: 10px;
            }

            .header {
                padding: 20px 10px;
            }

            .logo {
                padding: 12px 20px;
            }

            .logo-text {
                font-size: 1.1rem;
            }

            .logo-icon {
                font-size: 1.5rem;
            }

            .breadcrumb {
                padding: 12px 15px;
                gap: 8px;
                flex-wrap: wrap;
            }

            .breadcrumb-item {
                font-size: 0.85rem;
                padding: 8px 16px;
            }

            .breadcrumb-item span {
                font-size: 0.85rem;
                gap: 6px;
            }

            .breadcrumb-separator {
                font-size: 1rem;
            }

            .states-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 12px;
            }

            .state-card {
                padding: 15px 10px;
            }

            .state-abbreviation {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }

            .games-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .control-group {
                flex-direction: column;
                align-items: center;
            }

            .control-label {
                min-width: auto;
                margin-bottom: 8px;
                text-align: center;
            }

            .number-grid {
                grid-template-columns: repeat(6, 1fr);
                gap: 10px;
            }

            .number-btn {
                font-size: 1.1rem;
                min-height: 50px;
            }

            .number-ball {
                width: 42px;
                height: 42px;
                font-size: 1rem;
            }

            .generator-header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .stat-value {
                font-size: 2rem;
            }

            .picks-management-bar {
                flex-direction: column;
                gap: 15px;
            }

            .picks-actions-bar {
                flex-wrap: wrap;
                width: 100%;
                justify-content: center;
            }

            .management-btn {
                min-width: 140px;
            }

            .selection-info {
                flex-direction: column;
                gap: 15px;
            }

            .combination-preview {
                width: 100%;
            }

            .fab-container {
                bottom: 20px;
                right: 20px;
            }

            .fab {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
        }

        /* Responsive Design - Tablet and Small Laptops */
        @media (max-width: 900px) {
            .selection-info-with-banner {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            #manual-left-side-banner {
                order: 2;
            }

            .selection-center-content {
                order: 1;
            }

            .manual-select-side-banner-slot {
                width: 100%;
                max-width: 350px;
                margin: 0 auto;
            }

            /* Games page state banners responsive */
            .game-header-content {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            #state-left-side-banner {
                order: 1;
            }

            .selected-state-info {
                order: 2;
            }


            .state-side-banner-slot {
                width: 100%;
                max-width: 350px;
                margin: 0 auto;
            }
        }

        /* Responsive Design - Mobile Phone */
        @media (max-width: 480px) {
            .app-container {
                padding: 8px;
            }

            .header {
                padding: 15px 5px;
            }

            .logo {
                padding: 10px 15px;
                gap: 10px;
            }

            .logo-text {
                font-size: 0.95rem;
                line-height: 1.2;
            }

            .logo-icon {
                font-size: 1.3rem;
            }

            .tagline {
                font-size: 0.85rem;
            }

            .breadcrumb {
                padding: 15px 20px;
                font-size: 0.9rem;
                gap: 10px;
                overflow-x: auto;
                white-space: nowrap;
            }

            .breadcrumb-item {
                font-size: 0.9rem;
                padding: 10px 18px;
            }

            .breadcrumb-item span {
                font-size: 0.9rem;
            }

            .breadcrumb-separator {
                font-size: 1.1rem;
            }

            .state-title {
                font-size: 1.5rem;
                margin-bottom: 20px;
            }

            .states-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }

            .state-card {
                padding: 12px 8px;
            }

            .state-abbreviation {
                width: 40px;
                height: 40px;
                font-size: 1rem;
                margin-bottom: 10px;
            }

            .state-name {
                font-size: 0.85rem;
                margin-bottom: 5px;
            }

            .state-games-count {
                font-size: 0.75rem;
            }

            .game-header {
                padding: 15px;
            }

            .state-badge {
                width: 50px;
                height: 50px;
                font-size: 1.3rem;
            }

            .state-details h2 {
                font-size: 1.3rem;
            }

            .state-details p {
                font-size: 1rem;
            }

            .game-header-content {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            #state-left-side-banner {
                order: 1;
            }

            .selected-state-info {
                order: 2;
            }


            .state-side-banner-slot {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }

            .games-grid {
                gap: 12px;
            }

            .game-card {
                padding: 18px;
            }

            .game-type {
                font-size: 0.7rem;
                padding: 4px 10px;
            }

            .game-name {
                font-size: 1.1rem;
            }

            .game-details {
                font-size: 0.85rem;
            }

            .generator-header {
                padding: 15px;
            }

            .game-info-text h3 {
                font-size: 1rem;
            }

            .game-info-text p {
                font-size: 0.85rem;
            }

            .nav-tabs {
                gap: 3px;
                padding: 5px;
                justify-content: space-between;
            }

            .nav-tab {
                padding: 10px 8px;
                font-size: 0.8rem;
                min-width: auto;
                flex: 1;
                border-radius: 8px;
            }

            .numbers-display {
                padding: 20px 15px;
            }

            .selection-info-with-banner {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            #manual-left-side-banner {
                order: 2;
            }

            .selection-center-content {
                order: 1;
            }

            .manual-select-side-banner-slot {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }

            .number-input {
                padding: 12px;
                font-size: 1rem;
            }

            .generate-btn {
                padding: 15px 25px;
                font-size: 1rem;
                width: 100%;
                max-width: 400px;
            }

            .number-grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 8px;
            }

            .number-btn {
                font-size: 1rem;
                min-height: 45px;
            }

            .digit-line {
                padding: 15px;
            }

            .digit-line-header {
                font-size: 1.2rem;
                margin-bottom: 12px;
            }

            .position-badge {
                font-size: 0.75rem;
                padding: 4px 10px;
            }

            .combination-controls {
                flex-direction: column;
                gap: 10px;
            }

            .control-btn {
                width: 100%;
                padding: 12px 15px;
                font-size: 1.2rem;
            }

            .pick-item {
                padding: 12px;
                margin-bottom: 12px;
            }

            .pick-checkbox {
                width: 18px;
                height: 18px;
                top: 15px;
                left: 15px;
            }

            .pick-header {
                padding-left: 30px;
                margin-bottom: 12px;
            }

            .pick-number {
                font-size: 0.9rem;
            }

            .pick-actions {
                gap: 5px;
            }

            .action-btn {
                width: 30px;
                height: 30px;
                font-size: 1rem;
            }

            .numbers-row {
                gap: 8px;
                padding-left: 30px;
            }

            .number-ball {
                width: 38px;
                height: 38px;
                font-size: 0.95rem;
            }

            .picks-management-bar {
                padding: 12px 15px;
            }

            .management-btn {
                padding: 10px 15px;
                font-size: 0.85rem;
                min-width: 120px;
            }

            .select-all-checkbox {
                width: 18px;
                height: 18px;
            }

            .selection-label {
                font-size: 0.9rem;
            }

            .stats-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .stat-card {
                padding: 20px;
            }

            .stat-icon {
                font-size: 2rem;
            }

            .stat-value {
                font-size: 1.8rem;
            }

            .stat-label {
                font-size: 0.9rem;
            }

            .stats-top-banner-slot,
            .stats-bottom-banner-slot {
                width: 100%;
                max-width: 728px;
            }

            .saved-container {
                padding: 20px 15px;
            }

            .saved-empty {
                padding: 40px 15px;
            }

            .saved-empty-icon {
                font-size: 3rem;
            }

            .saved-bottom-banner-slot {
                width: 100%;
                max-width: 728px;
            }

            .saved-empty h3 {
                font-size: 1.2rem;
            }

            .saved-empty p {
                font-size: 0.9rem;
            }
            
            .disclaimer-section {
                padding: 20px;
                margin-top: 30px;
                margin-bottom: 15px;
            }

            .disclaimer-title {
                font-size: 1.1rem;
                margin-bottom: 15px;
            }

            .disclaimer-content {
                font-size: 0.85rem;
                line-height: 1.6;
            }

            .disclaimer-content p:first-child {
                font-size: 0.9rem;
            }

            .disclaimer-footer {
                font-size: 0.75rem;
            }

        /* Footer Links Styling */
        .footer-links {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 25px 0 20px 0;
            padding: 20px;
            background: #ffffff;
            border-radius: 10px;
            border: 3px solid #000000;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .footer-link,
        .footer-link:link,
        .footer-link:active,
        .footer-link:focus {
            color: #ff6600 !important;
            text-decoration: none !important;
            font-weight: 800;
            font-size: 1.05rem;
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: inline-block;
            background: #f0f0f0;
            border: 3px solid #000000;
        }

        .footer-link:hover {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: #ffffff !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
            border-color: #28a745;
        }

        .footer-link:visited {
            color: #ff6600 !important;
        }

        .footer-link:visited:hover {
            color: #ffffff !important;
        }

        .footer-separator {
            color: #000000;
            font-weight: 900;
            margin: 0 10px;
            font-size: 1.3rem;
        }

        @media (max-width: 768px) {
            .footer-links {
                flex-direction: column;
                gap: 5px;
            }

            .footer-separator {
                display: none;
            }

            .footer-link {
                width: 100%;
                text-align: center;
            }
        }


            .fab-container {
                bottom: 15px;
                right: 15px;
                gap: 10px;
            }

            .fab {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }

            .loading-content {
                padding: 30px;
            }

            .spinner {
                width: 50px;
                height: 50px;
            }

            #loading-text {
                font-size: 0.9rem;
            }

            /* Improve touch targets for mobile */
            button, .state-card, .game-card, .number-btn {
                -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
                touch-action: manipulation;
            }

            /* Ensure scrolling works smoothly on mobile */
            .picks-container {
                -webkit-overflow-scrolling: touch;
                max-height: 400px;
            }

            /* Adjust modal and notification sizes */
            .warning-message {
                font-size: 0.85rem;
                padding: 12px;
            }

            /* Ensure dropdowns and inputs are large enough for mobile */
            select, input[type="number"], input[type="text"] {
                min-height: 44px;
                font-size: 16px; /* Prevents zoom on iOS */
            }

        }

        /* Extra small phones */
        @media (max-width: 360px) {
            .logo-text {
                font-size: 0.85rem;
            }

            .states-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .nav-tab {
                padding: 10px 5px;
                font-size: 0.75rem;
            }

            .number-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .number-ball {
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }

            .management-btn {
                min-width: 100px;
                font-size: 0.8rem;
            }
        }

        /* Utility Classes */
        .hidden {
            display: none !important;
        }

        .text-center {
            text-align: center;
        }

        /* Smooth Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--gray);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #5a67d8;
        }

        /* Disclaimer Section */
        .disclaimer-section {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px;
            margin-top: 40px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 2px solid rgba(250, 112, 154, 0.3);
        }

        .disclaimer-title {
            color: #fa709a;
            font-size: 1.3rem;
            margin-bottom: 20px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .disclaimer-content {
            color: #666;
            line-height: 1.8;
        }

        .disclaimer-content p {
            margin-bottom: 12px;
        }

        .disclaimer-content p:first-child {
            color: #2d3436;
            font-size: 1.05rem;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .disclaimer-footer {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            text-align: center;
            font-size: 0.85rem;
            color: #999;
        }

        /* Dark Mode Support */
        @media (prefers-color-scheme: dark) {
            :root {
                --text: #e0e0e0;
                --gray: #2a2a3e;
                --light: #1a1a2e;
            }

            .game-header,
            .generator-header,
            .numbers-display,
            .saved-container,
            .stat-card {
                background: rgba(42, 42, 62, 0.95);
                color: var(--text);
            }

            .state-card,
            .game-card,
            .nav-tab,
            .breadcrumb {
                background: rgba(42, 42, 62, 0.95);
                color: var(--text);
            }

            .pick-item,
            .digit-line {
                background: rgba(26, 26, 46, 0.5);
            }

            .number-btn {
                background: rgba(42, 42, 62, 0.95);
                border-color: #3a3a4e;
                color: var(--text);
            }

            .state-name,
            .game-name {
                color: #ffffff;
            }

            .game-info-text h3 {
                color: #ff8c00;
            }

            .disclaimer-section {
                background: rgba(42, 42, 62, 0.95);
                border-color: rgba(250, 112, 154, 0.4);
            }

            .disclaimer-content {
                color: #b0b0b0;
            }

            .disclaimer-content p:first-child {
                color: var(--text);
                border-bottom-color: rgba(255, 255, 255, 0.1);
            }

            .disclaimer-footer {
                border-top-color: rgba(255, 255, 255, 0.1);
                color: #777;
            }
        }




        /* === Contact Page Embedded === */
        #page-contact {
            display: none;
        }
        #page-contact.active {
            display: block;
        }
        #page-contact .contact-wrapper {
            padding: 40px 20px;
        }
        #page-contact .contact-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white !important;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        #page-contact .contact-back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        #page-contact .container {
            color: #1a1a1a;
        }
        #page-contact p {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-contact li {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-contact strong {
            color: #000000;
            font-weight: 700;
        }
        #page-contact th, #page-contact td {
            color: #1a1a1a;
        }
        #page-contact .highlight,
        #page-contact .warning-box,
        #page-contact .info-box,
        #page-contact .success-box,
        #page-contact .definition {
            color: #1a1a1a;
        }
        #page-contact .important-box strong,
        #page-contact .important-box p,
        #page-contact .important-box li,
        #page-contact .important-box h3 {
            color: white;
        }
        #page-contact .contact-card {
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f0ff 100%);
            border: 2px solid #667eea;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            margin: 30px 0;
        }
        #page-contact .contact-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        #page-contact .contact-card h3 {
            color: #667eea;
            font-size: 1.4rem;
            margin-bottom: 10px;
        }



        #page-contact .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        #page-contact h1 {
            color: #667eea;
            font-size: 3rem;
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.2;
        }

        #page-contact .subtitle {
            text-align: center;
            color: #764ba2;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-contact .hero-section {
            background: linear-gradient(135deg, #eef1ff 0%, #f3effb 100%);
            color: #4a4a6a;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 50px;
            text-align: center;
            border: 1px solid #e0e0f0;
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.12);
        }

        #page-contact .hero-section h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #5a4a8a;
        }

        #page-contact .hero-section p {
            font-size: 1.2rem;
            line-height: 1.8;
            margin: 0;
        }

        #page-contact h2 {
            color: #764ba2;
            font-size: 2rem;
            margin-top: 50px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-contact h3 {
            color: #667eea;
            font-size: 1.5rem;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        #page-contact p {
            margin-bottom: 20px;
            text-align: justify;
            font-size: 1.05rem;
        }

        #page-contact ul, #page-contact ol {
            margin-left: 35px;
            margin-bottom: 25px;
        }

        #page-contact li {
            margin-bottom: 15px;
            font-size: 1.05rem;
        }

        #page-contact .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        #page-contact .feature-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #667eea;
            transition: all 0.3s ease;
        }

        #page-contact .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
            border-color: #764ba2;
        }

        #page-contact .feature-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        #page-contact .feature-card h3 {
            color: #764ba2;
            font-size: 1.3rem;
            margin-top: 0;
            margin-bottom: 15px;
        }

        #page-contact .feature-card p {
            font-size: 1rem;
            text-align: left;
            margin: 0;
        }

        #page-contact .info-box {
            background: #d1ecf1;
            padding: 25px;
            border-left: 5px solid #0dcaf0;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-contact .success-box {
            background: #d4edda;
            padding: 25px;
            border-left: 5px solid #28a745;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-contact .warning-box {
            background: #fff3cd;
            padding: 25px;
            border-left: 5px solid #ffc107;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-contact .values-section {
            background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%);
            padding: 40px;
            border-radius: 15px;
            margin: 40px 0;
        }

        #page-contact .values-section h2 {
            margin-top: 0;
            text-align: center;
        }

        #page-contact .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        #page-contact .stat-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        #page-contact .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 10px;
        }

        #page-contact .stat-label {
            color: #666;
            font-size: 1.1rem;
            font-weight: 600;
        }

        #page-contact .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        #page-contact .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }

        #page-contact .cta-section {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin: 50px 0;
            text-align: center;
        }

        #page-contact .cta-section h2 {
            color: white;
            border: none;
            margin: 0 0 20px 0;
            padding: 0;
        }

        #page-contact .cta-button {
            display: inline-block;
            background: white;
            color: #28a745;
            padding: 15px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.2rem;
            margin-top: 20px;
            transition: all 0.3s ease;
            border: 3px solid white;
        }

        #page-contact .cta-button:hover {
            background: transparent;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
        }

        #page-contact strong {
            color: #764ba2;
        }

        @media (max-width: 768px) {
        #page-contact .container {
                padding: 30px 20px;
            }

        #page-contact h1 {
                font-size: 2.2rem;
            }

        #page-contact h2 {
                font-size: 1.6rem;
            }

        #page-contact h3 {
                font-size: 1.3rem;
            }

        #page-contact .feature-grid {
                grid-template-columns: 1fr;
            }

        #page-contact .stats-grid {
                grid-template-columns: 1fr;
            }

        #page-contact .back-to-top {
                bottom: 20px;
                right: 20px;
                padding: 12px 16px;
                font-size: 0.9rem;
            }
        }

        @media print {
        #page-contact .back-to-top {
                display: none;
            }
            
            
        #page-contact .container {
                box-shadow: none;
                padding: 20px;
            }
        }


        /* === About Us Embedded Page === */
        #page-about {
            display: none;
        }
        #page-about.active {
            display: block;
        }
        #page-about .about-wrapper {
            padding: 40px 20px;
        }
        #page-about .about-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white !important;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        #page-about .about-back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        #page-about .container {
            color: #1a1a1a;
        }
        #page-about p {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-about li {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-about strong {
            color: #000000;
            font-weight: 700;
        }
        #page-about .last-updated {
            color: #333333;
        }
        #page-about th, #page-about td {
            color: #1a1a1a;
        }
        #page-about .highlight,
        #page-about .warning,
        #page-about .info,
        #page-about .success,
        #page-about .definition {
            color: #1a1a1a;
        }
        #page-about .important-box strong,
        #page-about .important-box p,
        #page-about .important-box li,
        #page-about .important-box h3 {
            color: white;
        }



        #page-about .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        #page-about h1 {
            color: #667eea;
            font-size: 3rem;
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.2;
        }

        #page-about .subtitle {
            text-align: center;
            color: #764ba2;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-about .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 50px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        #page-about .hero-section h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        #page-about .hero-section p {
            font-size: 1.2rem;
            line-height: 1.8;
            margin: 0;
        }

        #page-about h2 {
            color: #764ba2;
            font-size: 2rem;
            margin-top: 50px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-about h3 {
            color: #667eea;
            font-size: 1.5rem;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        #page-about p {
            margin-bottom: 20px;
            text-align: justify;
            font-size: 1.05rem;
        }

        #page-about ul, #page-about ol {
            margin-left: 35px;
            margin-bottom: 25px;
        }

        #page-about li {
            margin-bottom: 15px;
            font-size: 1.05rem;
        }

        #page-about .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }

        #page-about .feature-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #667eea;
            transition: all 0.3s ease;
        }

        #page-about .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
            border-color: #764ba2;
        }

        #page-about .feature-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        #page-about .feature-card h3 {
            color: #764ba2;
            font-size: 1.3rem;
            margin-top: 0;
            margin-bottom: 15px;
        }

        #page-about .feature-card p {
            font-size: 1rem;
            text-align: left;
            margin: 0;
        }

        #page-about .info-box {
            background: #d1ecf1;
            padding: 25px;
            border-left: 5px solid #0dcaf0;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-about .success-box {
            background: #d4edda;
            padding: 25px;
            border-left: 5px solid #28a745;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-about .warning-box {
            background: #fff3cd;
            padding: 25px;
            border-left: 5px solid #ffc107;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-about .values-section {
            background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%);
            padding: 40px;
            border-radius: 15px;
            margin: 40px 0;
        }

        #page-about .values-section h2 {
            margin-top: 0;
            text-align: center;
        }

        #page-about .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        #page-about .stat-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        #page-about .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 10px;
        }

        #page-about .stat-label {
            color: #666;
            font-size: 1.1rem;
            font-weight: 600;
        }

        #page-about .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        #page-about .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }

        #page-about .cta-section {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin: 50px 0;
            text-align: center;
        }

        #page-about .cta-section h2 {
            color: white;
            border: none;
            margin: 0 0 20px 0;
            padding: 0;
        }

        #page-about .cta-button {
            display: inline-block;
            background: white;
            color: #28a745;
            padding: 15px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.2rem;
            margin-top: 20px;
            transition: all 0.3s ease;
            border: 3px solid white;
        }

        #page-about .cta-button:hover {
            background: transparent;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
        }

        #page-about strong {
            color: #764ba2;
        }

        @media (max-width: 768px) {
        #page-about .container {
                padding: 30px 20px;
            }

        #page-about h1 {
                font-size: 2.2rem;
            }

        #page-about h2 {
                font-size: 1.6rem;
            }

        #page-about h3 {
                font-size: 1.3rem;
            }

        #page-about .feature-grid {
                grid-template-columns: 1fr;
            }

        #page-about .stats-grid {
                grid-template-columns: 1fr;
            }

        #page-about .back-to-top {
                bottom: 20px;
                right: 20px;
                padding: 12px 16px;
                font-size: 0.9rem;
            }
        }

        @media print {
        #page-about .back-to-top {
                display: none;
            }
            
            
        #page-about .container {
                box-shadow: none;
                padding: 20px;
            }
        }


        /* === Privacy Policy Embedded Page === */
        #page-privacy {
            display: none;
        }
        #page-privacy.active {
            display: block;
        }
        #page-privacy .pp-wrapper {
            padding: 40px 20px;
        }
        #page-privacy .pp-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white !important;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        #page-privacy .pp-back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        #page-privacy .container {
            color: #1a1a1a;
        }
        #page-privacy p {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-privacy li {
            color: #1a1a1a;
            line-height: 1.8;
        }
        #page-privacy strong {
            color: #000000;
            font-weight: 700;
        }
        #page-privacy .last-updated {
            color: #333333;
        }
        #page-privacy th, #page-privacy td {
            color: #1a1a1a;
        }
        #page-privacy .definition {
            color: #1a1a1a;
        }
        #page-privacy .highlight {
            color: #1a1a1a;
        }
        #page-privacy .warning {
            color: #1a1a1a;
        }
        #page-privacy .info {
            color: #1a1a1a;
        }
        #page-privacy .success {
            color: #1a1a1a;
        }
        #page-privacy .important-box strong,
        #page-privacy .important-box p,
        #page-privacy .important-box li,
        #page-privacy .important-box h3 {
            color: white;
        }
        #page-privacy .toc-subsection a {
            color: #444444;
        }



        #page-privacy .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        #page-privacy h1 {
            color: #667eea;
            font-size: 3rem;
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.2;
        }

        #page-privacy .subtitle {
            text-align: center;
            color: #764ba2;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        #page-privacy .last-updated {
            text-align: center;
            color: #666;
            font-style: italic;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-privacy .toc-container {
            background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 50px;
            border: 2px solid #667eea;
        }

        #page-privacy .toc-title {
            color: #667eea;
            font-size: 2rem;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 700;
        }

        #page-privacy .toc-list {
            list-style: none;
            margin-left: 0;
        }

        #page-privacy .toc-list > li {
            margin-bottom: 12px;
        }

        #page-privacy .toc-list a {
            color: #764ba2;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: baseline;
            transition: all 0.3s ease;
            padding: 8px 15px;
            border-radius: 8px;
        }

        #page-privacy .toc-list a:hover {
            background: rgba(102, 126, 234, 0.1);
            transform: translateX(10px);
            color: #667eea;
        }

        #page-privacy .toc-number {
            min-width: 40px;
            font-weight: 700;
            color: #667eea;
        }

        #page-privacy h2 {
            color: #764ba2;
            font-size: 2rem;
            margin-top: 50px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #f0f0f5;
            scroll-margin-top: 20px;
        }

        #page-privacy h3 {
            color: #667eea;
            font-size: 1.5rem;
            margin-top: 30px;
            margin-bottom: 20px;
            scroll-margin-top: 20px;
        }

        #page-privacy h4 {
            color: #764ba2;
            font-size: 1.2rem;
            margin-top: 20px;
            margin-bottom: 15px;
        }

        #page-privacy p {
            margin-bottom: 15px;
            text-align: justify;
        }

        #page-privacy ul, #page-privacy ol {
            margin-left: 35px;
            margin-bottom: 20px;
        }

        #page-privacy li {
            margin-bottom: 12px;
        }

        #page-privacy .highlight {
            background: #fff3cd;
            padding: 25px;
            border-left: 5px solid #ffc107;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-privacy .warning {
            background: #f8d7da;
            padding: 25px;
            border-left: 5px solid #dc3545;
            margin: 30px 0;
            border-radius: 8px;
            font-weight: 600;
        }

        #page-privacy .info {
            background: #d1ecf1;
            padding: 25px;
            border-left: 5px solid #0dcaf0;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-privacy .success {
            background: #d4edda;
            padding: 25px;
            border-left: 5px solid #28a745;
            margin: 30px 0;
            border-radius: 8px;
        }

        #page-privacy .important-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        #page-privacy .important-box h3 {
            color: white;
            margin-top: 0;
        }

        #page-privacy strong {
            color: #764ba2;
        }

        #page-privacy .section-number {
            color: #667eea;
            font-weight: 700;
        }

        #page-privacy table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        #page-privacy th, #page-privacy td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        #page-privacy th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 600;
        }

        #page-privacy tr:nth-child(even) {
            background: #f8f9fa;
        }

        #page-privacy .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        #page-privacy .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }

        @media (max-width: 768px) {
        #page-privacy .container {
                padding: 30px 20px;
            }

        #page-privacy h1 {
                font-size: 2.2rem;
            }

        #page-privacy h2 {
                font-size: 1.6rem;
            }

        #page-privacy h3 {
                font-size: 1.3rem;
            }

        #page-privacy .back-to-top {
                bottom: 20px;
                right: 20px;
                padding: 12px 16px;
                font-size: 0.9rem;
            }
        }

        @media print {
        #page-privacy .back-to-top {
                display: none;
            }
            
            
        #page-privacy .container {
                box-shadow: none;
                padding: 20px;
            }
        }


        /* === Terms & Conditions Embedded Page === */
        #page-terms {
            display: none;
        }
        #page-terms.active {
            display: block;
        }
        #page-terms .terms-wrapper {
            padding: 40px 20px;
        }
        #page-terms .terms-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white !important;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        #page-terms .terms-back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }



        #page-terms .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            color: #1a1a1a;
        }

        #page-terms h1 {
            color: #667eea;
            font-size: 3rem;
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.2;
        }

        #page-terms .subtitle {
            text-align: center;
            color: #764ba2;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        #page-terms .last-updated {
            text-align: center;
            color: #333333;
            font-style: italic;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 3px solid #f0f0f5;
        }

        #page-terms .toc-container {
            background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 50px;
            border: 2px solid #667eea;
        }

        #page-terms .toc-title {
            color: #667eea;
            font-size: 2rem;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 700;
        }

        #page-terms .toc-list {
            list-style: none;
            margin-left: 0;
        }

        #page-terms .toc-list > li {
            margin-bottom: 12px;
        }

        #page-terms .toc-list a {
            color: #764ba2;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: baseline;
            transition: all 0.3s ease;
            padding: 8px 15px;
            border-radius: 8px;
        }

        #page-terms .toc-list a:hover {
            background: rgba(102, 126, 234, 0.1);
            transform: translateX(10px);
            color: #667eea;
        }

        #page-terms .toc-number {
            min-width: 40px;
            font-weight: 700;
            color: #667eea;
        }

        #page-terms .toc-subsection {
            list-style: none;
            margin-left: 50px;
            margin-top: 8px;
        }

        #page-terms .toc-subsection li {
            margin-bottom: 6px;
        }

        #page-terms .toc-subsection a {
            font-size: 0.95rem;
            font-weight: 500;
            color: #444444;
        }

        #page-terms .toc-subsection a:hover {
            color: #667eea;
        }

        #page-terms h2 {
            color: #764ba2;
            font-size: 2rem;
            margin-top: 50px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #f0f0f5;
            scroll-margin-top: 20px;
        }

        #page-terms h3 {
            color: #667eea;
            font-size: 1.5rem;
            margin-top: 30px;
            margin-bottom: 20px;
            scroll-margin-top: 20px;
        }

        #page-terms h4 {
            color: #764ba2;
            font-size: 1.2rem;
            margin-top: 20px;
            margin-bottom: 15px;
        }

        #page-terms p {
            margin-bottom: 15px;
            text-align: justify;
            color: #1a1a1a;
            line-height: 1.8;
        }

        #page-terms ul, #page-terms ol {
            margin-left: 35px;
            margin-bottom: 20px;
        }

        #page-terms li {
            margin-bottom: 12px;
            color: #1a1a1a;
            line-height: 1.8;
        }

        #page-terms .highlight {
            background: #fff3cd;
            padding: 25px;
            border-left: 5px solid #ffc107;
            margin: 30px 0;
            border-radius: 8px;
            color: #1a1a1a;
        }

        #page-terms .warning {
            background: #f8d7da;
            padding: 25px;
            border-left: 5px solid #dc3545;
            margin: 30px 0;
            border-radius: 8px;
            font-weight: 600;
            color: #1a1a1a;
        }

        #page-terms .info {
            background: #d1ecf1;
            padding: 25px;
            border-left: 5px solid #0dcaf0;
            margin: 30px 0;
            border-radius: 8px;
            color: #1a1a1a;
        }

        #page-terms .success {
            background: #d4edda;
            padding: 25px;
            border-left: 5px solid #28a745;
            margin: 30px 0;
            border-radius: 8px;
            color: #1a1a1a;
        }

        #page-terms .important-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        #page-terms .important-box h3 {
            color: white;
            margin-top: 0;
        }

        #page-terms .important-box strong {
            color: white;
        }

        #page-terms .important-box p,
        #page-terms .important-box li {
            color: white;
        }

        #page-terms strong {
            color: #000000;
            font-weight: 700;
        }

        #page-terms .section-number {
            color: #667eea;
            font-weight: 700;
        }

        #page-terms .definition {
            background: #f0f0f5;
            padding: 15px 20px;
            border-radius: 8px;
            margin: 15px 0;
            color: #1a1a1a;
        }

        #page-terms table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        #page-terms th, #page-terms td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            color: #1a1a1a;
        }

        #page-terms th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 600;
        }

        tr:nth-child(even) {
            background: #f8f9fa;
        }

        #page-terms .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        #page-terms .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }

        @media (max-width: 768px) {
        #page-terms .container {
                padding: 30px 20px;
            }

        #page-terms h1 {
                font-size: 2.2rem;
            }

        #page-terms h2 {
                font-size: 1.6rem;
            }

        #page-terms h3 {
                font-size: 1.3rem;
            }

        #page-terms .toc-subsection {
                margin-left: 30px;
            }

        #page-terms .back-to-top {
                bottom: 20px;
                right: 20px;
                padding: 12px 16px;
                font-size: 0.9rem;
            }
        }

        @media print {
        #page-terms .back-to-top {
                display: none;
            }
            
            
        #page-terms .container {
                box-shadow: none;
                padding: 20px;
            }
        }

    

/* ---- */


                        body { font-family: Arial, sans-serif; padding: 40px; color: #2d3436; }
                        h1 { color: #667eea; margin-bottom: 5px; }
                        .meta { color: #666; font-size: 0.9rem; margin-bottom: 30px; }
                        .label { font-weight: bold; color: #555; margin-top: 20px; }
                        .numbers { font-size: 1.8rem; font-weight: bold; color: #2d3436; letter-spacing: 4px; margin-top: 10px; padding: 20px; border: 2px solid #667eea; border-radius: 10px; display: inline-block; }
                        .footer { margin-top: 40px; color: #999; font-size: 0.8rem; border-top: 1px solid #eee; padding-top: 15px; }
                    

/* ---- */


                        body { font-family: Arial, sans-serif; padding: 20px; }
                        h1 { color: #667eea; text-align: center; }
                        .pick-container { 
                            border: 2px solid #667eea; 
                            border-radius: 10px; 
                            padding: 15px; 
                            margin: 15px 0;
                            page-break-inside: avoid;
                        }
                        .pick-header { 
                            font-weight: bold; 
                            color: #667eea;
                            margin-bottom: 10px;
                        }
                        .pick-info {
                            font-size: 0.9rem;
                            color: #666;
                            margin-bottom: 10px;
                        }
                        .numbers { 
                            display: flex; 
                            gap: 10px;
                            flex-wrap: wrap;
                        }
                        .number {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: #667eea;
                            color: white;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: bold;
                        }
                        .number.special {
                            background: #f093fb;
                        }
                        .footer {
                            margin-top: 30px;
                            text-align: center;
                            color: #999;
                            font-size: 0.8rem;
                        }
                    

/* ---- */


                        body { font-family: Arial, sans-serif; padding: 20px; }
                        h1 { color: #667eea; text-align: center; }
                        .pick-container { border: 2px solid #667eea; border-radius: 10px; padding: 15px; margin: 15px 0; page-break-inside: avoid; }
                        .pick-header { font-weight: bold; color: #667eea; margin-bottom: 10px; }
                        .pick-info { font-size: 0.9rem; color: #666; margin-bottom: 10px; }
                        .numbers { display: flex; gap: 10px; flex-wrap: wrap; }
                        .number { width: 40px; height: 40px; border-radius: 50%; background: #667eea; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; }
                        .number.special { background: #f093fb; }
                        .footer { margin-top: 30px; text-align: center; color: #999; font-size: 0.8rem; }
                    

/* standalone legal pages */
#page-privacy,#page-terms{display:block!important}
.pp-back-btn{cursor:pointer}