/* ── UK Lottery Predictions Dashboard — Styles ── */
:root {
    --bg: #0f0f1a;
    --surface: #1a1a2e;
    --surface-hover: #22223a;
    --card-bg: #16213e;
    --text: #e0e0e8;
    --text-muted: #8888a0;
    --accent: #f5a623;
    --accent-glow: rgba(245, 166, 35, 0.35);
    --hot-green: #4caf50;
    --hot-green-glow: rgba(76, 175, 80, 0.35);
    --low-red: #ef4444;
    --mod-yellow: #fbbf24;
    --low-orange: #f97316;
    --good-teal: #14b8a6;
    --good-teal-glow: rgba(20, 184, 166, 0.35);
    --lotto-pink: #dc2626;
    --lotto-pink-glow: rgba(220, 38, 38, 0.4);
    --lotto-red: #dc2626;
    --lotto-red-glow: rgba(220, 38, 38, 0.4);
    --lotto-text: #7f1d1d;
    --gold: #f5c842;
    --gold-glow: rgba(245, 200, 66, 0.3);
    --blue: #4fc3f7;
    --blue-glow: rgba(79, 195, 247, 0.25);
    --green: #66bb6a;
    --purple: #ab47bc;
    --purple-glow: rgba(171, 71, 188, 0.3);
    --lavender: #d8b4fe;
    --lavender-glow: rgba(216, 180, 254, 0.4);
    --thunder-purple: #9333ea;
    --thunder-purple-glow: rgba(147, 51, 234, 0.4);
    --thunder-pink: #e879f9;
    --thunder-pink-glow: rgba(232, 121, 249, 0.35);
    --gold: #f5c842;
    --gold-glow: rgba(245, 200, 66, 0.3);
    --star-gold: #ff8c00;
    --star-gold-glow: rgba(255, 140, 0, 0.35);
    --teal: #00d6da;
    --teal-glow: rgba(0, 214, 218, 0.35);
    --navy: #000080;
    --radius: 12px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; } /* prevent horizontal scroll bounce on mobile */

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100dvh; /* dvh avoids iOS Safari address-bar bounce causing sticky-header jump */
    overflow-x: hidden; /* prevent horizontal scroll bounce */
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    text-align: center;
    padding: 48px 24px 32px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}
.site-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.accent { color: var(--accent); }
.subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-top: 6px;
}
.header-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover {
    background: #d63a54;
    box-shadow: 0 0 24px var(--accent-glow);
    transform: scale(1.03);
}
.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #333;
}
.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: #f5a623;
    box-shadow: 0 0 16px rgba(245,166,35,0.15);
    transform: scale(1.03);
}
.spin-icon {
    display: none;
    animation: none;
}
.btn-primary.loading .spin-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* New Prediction animated glow */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(245, 166, 35, 0.3),
                    0 0 14px rgba(245, 166, 35, 0.15);
    }
    50% {
        box-shadow: 0 0 12px rgba(245, 166, 35, 0.55),
                    0 0 32px rgba(245, 166, 35, 0.3),
                    0 0 56px rgba(245, 166, 35, 0.12);
    }
}

/* Pulsating orange glow for landing page prediction balls */
@keyframes ball-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.1));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.35))
                drop-shadow(0 0 16px rgba(245, 166, 35, 0.15))
                drop-shadow(0 0 30px rgba(245, 166, 35, 0.08));
    }
}

/* ── Game Cards ──
.game-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin: 20px 0;
    box-shadow: var(--shadow);
    border: 3px solid #222;
    transition: all 0.25s ease;
}
.game-card:hover {
    transform: translateY(-2px);
}
.game-card[data-game="lotto"] { border-color: #dc2626; box-shadow: 0 8px 40px rgba(220,38,38,0.12); }
.game-card[data-game="euro_millions"] { border-color: #f5c842; box-shadow: 0 8px 40px rgba(245,200,66,0.12); }
.game-card[data-game="thunderball"] { border-color: #d8b4fe; box-shadow: 0 8px 40px rgba(216,180,254,0.12); }
.game-card[data-game="set_for_life"] { border-color: #66bb6a; box-shadow: 0 8px 40px rgba(102,187,106,0.12); }

.predictions-section { margin-top: 20px; }

.game-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.game-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-header h2 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.format-badge {
    font-size: 0.8rem;
    background: var(--surface);
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}

/* ── Prediction Balls ── */
.predictions-section { margin-bottom: 28px; }
.predictions-section h3, .results-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--gold);
}
.prediction-balls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
    padding-top: 8px;
    margin-bottom: 16px;
}
.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}
.ball:hover {
    transform: translateY(-3px) scale(1.08);
}
.prediction-ball {
    background: linear-gradient(135deg, var(--lotto-pink), #fda4af); /* Lotto / Health — matches official */
    color: var(--lotto-text);
    box-shadow: 0 3px 12px var(--lotto-pink-glow);
}
/* Game-specific prediction ball colours (match game icon SVG) */
/* Thunderball — lavender main balls (matches official) */
.game-card[data-game="thunderball"] .prediction-ball {
    background: linear-gradient(135deg, var(--lavender), #c084fc);
    color: #4c1d95;
    box-shadow: 0 3px 12px var(--lavender-glow);
}
/* Thunderball thunderball — purple (matches official) */
.game-card[data-game="thunderball"] .bonus-ball {
    background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
    color: #fff;
    box-shadow: 0 3px 12px var(--thunder-purple-glow);
}
.game-card[data-game="set_for_life"] .prediction-ball {
    background: linear-gradient(135deg, var(--green), #388e3c);
    color: #1a1a2e;
    box-shadow: 0 3px 12px rgba(102, 187, 106, 0.4);
}
/* EuroMillions prediction — gold (matches official) */
.game-card[data-game="euro_millions"] .prediction-ball {
    background: linear-gradient(135deg, var(--gold), #d4a017);
    color: #1a1a2e;
    box-shadow: 0 3px 12px var(--gold-glow);
}
.bonus-ball {
    background: linear-gradient(135deg, var(--lotto-red), #991b1b);
    color: #fff;
    box-shadow: 0 3px 12px var(--lotto-red-glow);
}
/* Set For Life life ball — matches official site (teal) */
.game-card[data-game="set_for_life"] .bonus-ball {
    background: linear-gradient(135deg, var(--teal), #049ba3);
    color: #fff;
    box-shadow: 0 3px 12px var(--teal-glow);
}
.star-ball {
    background: linear-gradient(135deg, var(--purple), #7b1fa2);
    color: #fff;
    box-shadow: 0 3px 12px var(--purple-glow);
}
/* EuroMillions prediction lucky stars — orange-gold (matches official) */
.game-card[data-game="euro_millions"] .star-ball {
    background: linear-gradient(135deg, var(--star-gold), #e6a800);
    color: #fff;
    box-shadow: 0 3px 12px var(--star-gold-glow);
}

/* ── Lotto ball colour ranges — official colours (lottery.co.uk/lotto/colours) ── */
/* All !important to override default .ball, .prediction-ball, .result-ball rules */

/* 1–9 White */
.ball-range-1-9 { background: linear-gradient(135deg, #ffffff, #e8e8e8) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.result-ball.ball-range-1-9 { background: linear-gradient(135deg, #ffffff, #e8e8e8) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.ball.ball-range-1-9 { background: linear-gradient(135deg, #ffffff, #e8e8e8) !important; color: #1a1a2e !important; box-shadow: 0 3px 12px rgba(0,0,0,0.3), inset 0 -2px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.5) !important; }
.mini-ball.ball-range-1-9 { background: linear-gradient(135deg, #ffffff, #e8e8e8) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }

/* 10–19 Blue */
.ball-range-10-19 { background: linear-gradient(135deg, #2196f3, #1565c0) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(33,150,243,0.4) !important; }
.result-ball.ball-range-10-19 { background: linear-gradient(135deg, #2196f3, #1565c0) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(33,150,243,0.4) !important; }
.ball.ball-range-10-19 { background: linear-gradient(135deg, #2196f3, #1565c0) !important; color: #ffffff !important; box-shadow: 0 3px 12px rgba(33,150,243,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.25) !important; }
.mini-ball.ball-range-10-19 { background: linear-gradient(135deg, #2196f3, #1565c0) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(33,150,243,0.4) !important; }

/* 20–29 Pink (original Lotto pink) */
.ball-range-20-29 { background: linear-gradient(135deg, #fecdd3, #fda4af) !important; color: #7f1d1d !important; box-shadow: 0 2px 8px var(--lotto-pink-glow) !important; }
.result-ball.ball-range-20-29 { background: linear-gradient(135deg, #fecdd3, #fda4af) !important; color: #7f1d1d !important; box-shadow: 0 2px 8px var(--lotto-pink-glow) !important; }
.ball.ball-range-20-29 { background: linear-gradient(135deg, #fecdd3, #fda4af) !important; color: #7f1d1d !important; box-shadow: 0 3px 12px var(--lotto-pink-glow), inset 0 -2px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.4) !important; }
.mini-ball.ball-range-20-29 { background: linear-gradient(135deg, #fecdd3, #fda4af) !important; color: #7f1d1d !important; box-shadow: 0 2px 8px var(--lotto-pink-glow) !important; }

/* 30–39 Green */
.ball-range-30-39 { background: linear-gradient(135deg, #66bb6a, #388e3c) !important; color: #1b5e20 !important; box-shadow: 0 2px 8px rgba(102,187,106,0.4) !important; }
.result-ball.ball-range-30-39 { background: linear-gradient(135deg, #66bb6a, #388e3c) !important; color: #1b5e20 !important; box-shadow: 0 2px 8px rgba(102,187,106,0.4) !important; }
.ball.ball-range-30-39 { background: linear-gradient(135deg, #66bb6a, #388e3c) !important; color: #1b5e20 !important; box-shadow: 0 3px 12px rgba(102,187,106,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3) !important; }
.mini-ball.ball-range-30-39 { background: linear-gradient(135deg, #66bb6a, #388e3c) !important; color: #1b5e20 !important; box-shadow: 0 2px 8px rgba(102,187,106,0.4) !important; }

/* 40–49 Yellow */
.ball-range-40-49 { background: linear-gradient(135deg, #f5c842, #d4a017) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px var(--gold-glow) !important; }
.result-ball.ball-range-40-49 { background: linear-gradient(135deg, #f5c842, #d4a017) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px var(--gold-glow) !important; }
.ball.ball-range-40-49 { background: linear-gradient(135deg, #f5c842, #d4a017) !important; color: #1a1a2e !important; box-shadow: 0 3px 12px var(--gold-glow), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.35) !important; }
.mini-ball.ball-range-40-49 { background: linear-gradient(135deg, #f5c842, #d4a017) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px var(--gold-glow) !important; }

/* 50–59 Purple */
.ball-range-50-59 { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; color: #ffffff !important; box-shadow: 0 2px 8px var(--purple-glow) !important; }
.result-ball.ball-range-50-59 { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; color: #ffffff !important; box-shadow: 0 2px 8px var(--purple-glow) !important; }
.ball.ball-range-50-59 { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; color: #ffffff !important; box-shadow: 0 3px 12px var(--purple-glow), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.25) !important; }
.mini-ball.ball-range-50-59 { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; color: #ffffff !important; box-shadow: 0 2px 8px var(--purple-glow) !important; }

/* ── Stats Grid ── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}
.stats-block h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Confidence Breakdown — desktop */
.conf-breakdown {
    margin: 16px 0 8px;
    padding: 14px 18px;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid #1e1e30;
}
.conf-breakdown h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.conf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #1a1a2e;
}
.conf-row:last-child {
    border-bottom: none;
}
.conf-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
}
.conf-bar-bg {
    flex: 1;
    height: 10px;
    background: #1e293b;
    border-radius: 5px;
    overflow: hidden;
}
.conf-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}
.conf-values {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 110px;
}
.conf-score {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    width: 48px;
    text-align: right;
    flex-shrink: 0;
}
.conf-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    width: 62px;
    text-align: left;
    flex-shrink: 0;
}
.conf-row.bonus-row .conf-num {
    background: var(--accent);
    color: #fff;
}
/* Game-specific bonus ball colors */
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num {
    background: var(--lotto-red) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.4) !important;
}
.game-card[data-game="thunderball"] .conf-row.bonus-row .conf-num {
    background: var(--thunder-purple);
    color: #fff;
}
.game-card[data-game="set_for_life"] .conf-row.bonus-row .conf-num {
    background: var(--teal);
    color: #fff;
}
.conf-row.star-row .conf-num {
    background: var(--star-gold);
    color: #1a1a2e;
}
/* EuroMillions confidence breakdown stars — match predictions (with !important to override global) */
.game-card[data-game="euro_millions"] .conf-row.star-row .conf-num {
    background: linear-gradient(135deg, var(--star-gold), #e6a800) !important;
    color: #fff;
}

/* Confidence breakdown — game-specific ball colors (number-range coloured for Lotto) */
.game-card[data-game="lotto"] .conf-num {
    background: linear-gradient(135deg, #fecdd3, #fda4af);
    color: #7f1d1d;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(254, 205, 211, 0.4);
}
/* Lotto confidence breakdown — number range colours (override .bonus-row base rule) */
.game-card[data-game="lotto"] .conf-num-1-9 {
    background: linear-gradient(135deg, #f5c842, #d4a017) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(245, 200, 66, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-1-9 {
    background: linear-gradient(135deg, #f5c842, #d4a017) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(245, 200, 66, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-num-10-19 {
    background: linear-gradient(135deg, #2196f3, #1565c0) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(33, 150, 243, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-10-19 {
    background: linear-gradient(135deg, #2196f3, #1565c0) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(33, 150, 243, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-num-20-29 {
    background: linear-gradient(135deg, #fecdd3, #fda4af) !important;
    color: #7f1d1d !important;
    box-shadow: 0 1px 4px rgba(254, 205, 211, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-20-29 {
    background: linear-gradient(135deg, #fecdd3, #fda4af) !important;
    color: #7f1d1d !important;
    box-shadow: 0 1px 4px rgba(254, 205, 211, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-num-30-39 {
    background: linear-gradient(135deg, #66bb6a, #388e3c) !important;
    color: #1b5e20 !important;
    box-shadow: 0 1px 4px rgba(102, 187, 106, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-30-39 {
    background: linear-gradient(135deg, #66bb6a, #388e3c) !important;
    color: #1b5e20 !important;
    box-shadow: 0 1px 4px rgba(102, 187, 106, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-num-40-49 {
    background: linear-gradient(135deg, #f5c842, #d4a017) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(245, 200, 66, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-40-49 {
    background: linear-gradient(135deg, #f5c842, #d4a017) !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(245, 200, 66, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-num-50-59 {
    background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(171, 71, 188, 0.4) !important;
}
.game-card[data-game="lotto"] .conf-row.bonus-row .conf-num-50-59 {
    background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(171, 71, 188, 0.4) !important;
}
.game-card[data-game="euro_millions"] .conf-num {
    background: var(--gold);
    color: #1a1a2e;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px var(--gold-glow);
}
.game-card[data-game="thunderball"] .conf-num {
    background: var(--lavender);
    color: #4c1d95;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px var(--lavender-glow);
}
.game-card[data-game="set_for_life"] .conf-num {
    background: var(--green);
    color: #1a1a2e;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px var(--green-glow);
}

/* Mobile — confidence breakdown game-specific balls */
.game-card[data-game="lotto"] .conf-breakdown .conf-num {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}
.game-card[data-game="euro_millions"] .conf-breakdown .conf-num {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}
.game-card[data-game="thunderball"] .conf-breakdown .conf-num {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}
.game-card[data-game="set_for_life"] .conf-breakdown .conf-num {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
}

.stat-number {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--surface);
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}
.stat-number:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Confidence breakdown number balls — game-specific colors */
.conf-range-1-9 { background: linear-gradient(135deg, #ffffff, #e8e8e8) !important; color: #1a1a2e !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.5) !important; }
.conf-range-10-19 { background: linear-gradient(135deg, #2196f3, #1565c0) !important; color: #ffffff !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(33,150,243,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.25) !important; }
.conf-range-20-29 { background: linear-gradient(135deg, #fecdd3, #fda4af) !important; color: #7f1d1d !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(254,205,211,0.4), inset 0 -2px 6px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.4) !important; }
.conf-range-30-39 { background: linear-gradient(135deg, #66bb6a, #388e3c) !important; color: #1b5e20 !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(102,187,106,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3) !important; }
.conf-range-40-49 { background: linear-gradient(135deg, #f5c842, #d4a017) !important; color: #1a1a2e !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(245,200,66,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.35) !important; }
.conf-range-50-59 { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; color: #ffffff !important; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(171,71,188,0.4), inset 0 -2px 6px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.25) !important; }
.stat-number small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.stat-number.cold {
    border: 1px solid #444;
}
.stat-hot {
    color: #ff4444;
}
.stat-hot small {
    color: var(--text-muted);
}
.stat-cold {
    color: #7dd3fc;
}
.stat-cold small {
    color: var(--text-muted);
}

/* ── Results Table ── */
.results-section { margin-top: 100px !important; }
.results-section h3 { margin-top: 12px; }
.results-table-wrap {
    overflow-x: auto;
}
.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.results-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}
.results-table th:first-child { border-radius: 8px 0 0 0; }
.results-table th:last-child { border-radius: 0 8px 0 0; }
.results-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #1e1e30;
    vertical-align: middle;
}
.results-table tr:hover td { background: rgba(255,255,255,0.02); }
.results-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}
.results-table th:first-child { border-radius: 8px 0 0 0; }
.results-table th:last-child { border-radius: 0 8px 0 0; }
.results-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #1e1e30;
    vertical-align: middle;
}
.date-cell {
    white-space: nowrap;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.draw-ref {
    display: none;
}
.jackpot-cell { color: #fff !important; font-weight: 600; }
/* Jackpot badge — colored pill (immune to text-color overrides) */
    .jackpot-badge {
        display: inline-block;
        padding: 3px 10px;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 6px;
    }
    .jackpot-badge--lotto      { background: var(--lotto-pink);  color: #fff; }
    .jackpot-badge--euro_millions { background: var(--gold);      color: #1a1a2e; }
    .jackpot-badge--thunderball { background: var(--thunder-purple); color: #fff; }
    .jackpot-badge--set_for_life {
        background: var(--teal);
        color: #fff;
    }
    .jackpot-badge--health_lottery { background: var(--lotto-red); color: #fff; }
    .results-table .jackpot-col { width: 110px; }
.results-table .winners-col { width: 80px; text-align: center; }
.results-table th.winners-col {
    text-align: center;
}
.results-table th:first-child,
.results-table .date-cell {
    text-align: center;
}
.results-table th:nth-child(2),
.results-table .numbers-cell {
    text-align: center;
    padding-left: 24px;
}
.results-table th:nth-child(3),
.results-table .bonus-cell {
    text-align: center;
}
.results-table th.jackpot-col,
.results-table .jackpot-col {
    text-align: center;
}
/* Desktop: centre balls inside cell-inner */
.numbers-cell .cell-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: -20px;
}
.bonus-cell .cell-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.date-cell .cell-inner {
    display: flex;
    justify-content: center;
}
.bonus-cell .result-ball.bonus {
    background: linear-gradient(135deg, var(--lotto-red), #991b1b); /* Lotto / Health bonus — matches official */
    color: #fff;
    box-shadow: 0 2px 8px var(--lotto-red-glow);
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
        text-decoration: none;
    }
/* Thunderball thunderball in results — purple (matches official) */
.game-card[data-game="thunderball"] .bonus-cell .result-ball.bonus {
    background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
    color: #fff;
    box-shadow: 0 2px 8px var(--thunder-purple-glow);
        text-decoration: none;
    }
/* Set For Life life ball in results — teal (matches official site) */
.game-card[data-game="set_for_life"] .bonus-cell .result-ball.bonus {
    background: linear-gradient(135deg, var(--teal), #049ba3);
    color: #fff;
    box-shadow: 0 2px 8px var(--teal-glow);
        text-decoration: none;
    }
/* EuroMillions lucky stars in results — orange-gold (matches official) */
.game-card[data-game="euro_millions"] .bonus-cell .result-ball.bonus {
    background: linear-gradient(135deg, var(--star-gold), #e6a800);
    color: #fff;
    box-shadow: 0 2px 8px var(--star-gold-glow);
        text-decoration: none;
    }
.numbers-cell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.result-ball {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--lotto-pink), #fda4af); /* Lotto / Health — matches official */
    color: var(--lotto-text);
    box-shadow: 0 2px 8px var(--lotto-pink-glow);
        text-decoration: none;
    }
/* Game-specific result ball colours (match game icon SVG) */
/* Thunderball — lavender main balls (matches official) */
.game-card[data-game="thunderball"] .result-ball {
    background: linear-gradient(135deg, var(--lavender), #c084fc);
    color: #4c1d95;
    box-shadow: 0 2px 8px var(--lavender-glow);
        text-decoration: none;
    }
.game-card[data-game="set_for_life"] .result-ball {
    background: linear-gradient(135deg, var(--green), #388e3c);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.35);
        text-decoration: none;
    }
/* EuroMillions result — gold (matches official) */
.game-card[data-game="euro_millions"] .result-ball {
    background: linear-gradient(135deg, var(--gold), #d4a017);
    color: #1a1a2e;
    box-shadow: 0 2px 8px var(--gold-glow);
        text-decoration: none;
    }

/* ── Brave Mobile / browser link injection guard ──
   Some mobile browsers (Brave, etc.) inject <a> tags into
   page content after paint. These rules override injected
   link styles so balls stay blue-underlined-free. ── */
.result-ball a,
.result-ball > a {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}
.jackpot-cell a,
.jackpot-cell > a {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none;
}

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
    font-size: 1.1rem;
}
.empty-state strong { color: var(--accent); }
.no-data {
    color: var(--text-muted);
    font-style: italic;
    padding: 16px 0;
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-muted);
    font-size: 0.82rem;
    border-top: 1px solid #222;
    margin-top: 40px;
}

/* ── Toast Notification ── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--green);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--accent); }

/* ── Responsive / Mobile ── */

/* ── Large phones / small tablets (≤768px) ── */
@media (max-width: 768px) {
    .site-header {
        padding: 32px 16px 24px;
    }
    .site-header h1 {
        font-size: 1.5rem;
    }
    .compuwin-logo {
        font-size: 1.15rem !important;
        padding: 1px 8px !important;
        border-radius: 14px !important;
        border-width: 3px !important;
    }
    .front-logo {
        max-width: 160px !important;
    }
    .subtitle {
        font-size: 0.95rem;
    }
    .container {
        padding: 0 16px;
    }
    .game-card {
        padding: 20px 18px;
        margin: 14px 0;
    }
    .game-header {
        margin-bottom: 18px;
    }
    .game-icon {
        width: 36px;
        height: 36px;
        padding: 5px;
    }
    .game-header h2 {
        font-size: 1.7rem;
    }
    .prediction-balls {
        gap: 8px;
    }
    .ball {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
        text-decoration: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .stat-number {
        padding: 4px 10px;
        font-size: 0.85rem;
    }
    .stats-block h4 {
        font-size: 0.8rem;
    }
    .result-ball {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--lotto-pink), #fda4af);
        color: var(--lotto-text);
        box-shadow: 0 2px 8px var(--lotto-pink-glow);
    }
    /* Game-specific result balls — responsive */
    /* Thunderball — lavender (responsive) */
    .game-card[data-game="thunderball"] .result-ball {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--lavender), #c084fc);
        color: #4c1d95;
        box-shadow: 0 2px 8px var(--lavender-glow);
    }
    .game-card[data-game="set_for_life"] .result-ball {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--green), #388e3c);
        color: #1a1a2e;
        box-shadow: 0 2px 8px rgba(102, 187, 106, 0.35);
    }
    .game-card[data-game="euro_millions"] .result-ball {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--gold), #d4a017);
        color: #1a1a2e;
        box-shadow: 0 2px 8px var(--gold-glow);
    }
    .numbers-cell {
        display: table-cell;
        gap: 0;
    }

    .results-table {
        font-size: 0.82rem;
    }
    .results-table th,
    .results-table td {
        padding: 8px 10px;
    }
    .results-table td.numbers-cell,
    .results-table td.bonus-cell {
        border-bottom: none;
    }
    .date-cell {
        font-size: 0.78rem;
        line-height: 32px;
    }
    .date-cell .draw-ref {
        line-height: inherit;
    }
    .draw-ref {
        display: none;
    }
    /* Jackpot column — white text (desktop) */
    .jackpot-cell {
        color: #fff !important;
        font-weight: 600;
    }
    /* Jackpot display — brave-mobile-safe (no inline styles, no id) */
    .jackpot-value {
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
    }
    .bonus-cell .result-ball.bonus {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--lotto-red), #991b1b);
        color: #fff;
        box-shadow: 0 2px 8px var(--lotto-red-glow);
        text-decoration: none;
    }
    /* Thunderball thunderball — purple (responsive, centred) */
    .game-card[data-game="thunderball"] .bonus-cell .result-ball.bonus {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
        color: #fff;
        box-shadow: 0 2px 8px var(--thunder-purple-glow);
        text-decoration: none;
    }
    /* EuroMillions lucky stars — orange-gold (responsive, centred) */
    .game-card[data-game="euro_millions"] .bonus-cell .result-ball.bonus {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--star-gold), #e6a800);
        color: #fff;
        box-shadow: 0 2px 8px var(--star-gold-glow);
        text-decoration: none;
    }
    /* Set For Life life ball — teal (responsive, centred) */
    .game-card[data-game="set_for_life"] .bonus-cell .result-ball.bonus {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--teal), #049ba3);
        color: #fff;
        box-shadow: 0 2px 8px var(--teal-glow);
        text-decoration: none;
    }
    .site-footer {
        padding: 32px 16px;
        font-size: 0.78rem;
        margin-top: 32px;
    }
    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        text-align: center;
        justify-content: center;
    }
    .predictions-section h3,
    .results-section h3 {
        font-size: 1rem;
    }
    /* Predictions section: nudge up on mobile */
    .predictions-section {
        padding-top: 16px !important;
    }
    /* Hide low-priority columns on mobile to save space */
    .jackpot-col { width: 48px; }
    /* Set For Life: wider jackpot column so £1k x 30yrs stays on one line */
    .game-card[data-game="set_for_life"] .jackpot-col { width: 80px; }
    .game-card[data-game="set_for_life"] .jackpot-badge {
        white-space: nowrap;
    }
    .winners-col {
        display: table-cell;
        font-size: 0.62rem;
        color: var(--text);
        white-space: nowrap;
        text-align: center;
    }
    .date-cell { white-space: nowrap; }
    .numbers-cell {
        min-width: 0;
        white-space: nowrap;
        border-bottom: none;
    }
    .numbers-cell .cell-inner {
        display: block;
        gap: 0;
        flex-wrap: nowrap;
    }
    .bonus-cell .cell-inner {
        display: block;
        gap: 0;
        flex-wrap: nowrap;
    }
    /* EuroMillions: keep lucky stars on same line on mobile */
    .game-card[data-game="euro_millions"] .bonus-cell .cell-inner {
        display: flex;
        gap: 6px;
        justify-content: center;
    }
    .bonus-cell { min-width: 0; border-bottom: none; }
    .bonus-cell .result-ball.bonus {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    /* Lotto results — centred on mobile */
    .game-card[data-game="lotto"] .date-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .numbers-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .bonus-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .jackpot-col {
        text-align: center;
    }
}

/* New Prediction button — desktop defaults */
.regen-btn {
    margin-top: 10px !important;
    animation: glow-pulse 2.5s ease-in-out infinite;
}

/* Front page — New Predictions header button */
#regenerate-btn {
    animation: glow-pulse 2.5s ease-in-out infinite;
}

/* Mobile — regen button — small */
@media (max-width: 768px) {
    .regen-btn {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        border-radius: 999px !important;
        border-width: 2px !important;
        margin-top: 0 !important;
    }
}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {
    /* Predictions section: nudge up on small phones */
    .predictions-section {
        padding-top: 16px !important;
    }
    .site-header {
        padding: 24px 12px 18px;
    }
    .site-header h1 {
        font-size: 1.25rem;
    }
    .subtitle {
        font-size: 0.85rem;
        margin-top: 4px;
    }
    .container {
        padding: 0 12px;
    }
    .game-card {
        padding: 16px 14px;
        margin: 10px 0;
        border-radius: 10px;
    }
    .game-icon {
        width: 32px;
        height: 32px;
        padding: 4px;
    }
    .game-header h2 {
        font-size: 1.5rem;
    }
    .format-badge {
        font-size: 0.72rem;
        padding: 2px 8px;
    }
    /* Front page: stack format-badge below title, keep compact width */
    .card-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* Front page: nudge badge up on mobile */
    .card-title .format-badge {
        margin-top: -14px !important;
    }

    /* Side-by-side buttons on mobile — original size */
    .header-controls {
        flex-direction: row;
        gap: 10px;
    }
    .btn {
        justify-content: center;
        padding: 10px 22px;
        font-size: 0.95rem;
        border-radius: 8px;
    }
    /* Predictions — compact ball row */
    .prediction-balls {
        gap: 6px;
    }
    .ball {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
        border-radius: 50%;
    text-decoration: none;
    }
    /* Lotto/Health — pink (small screens) */
    .prediction-ball {
        background: linear-gradient(135deg, var(--lotto-pink), #fda4af);
        color: var(--lotto-text);
        box-shadow: 0 3px 12px var(--lotto-pink-glow);
        border-radius: 50%;
    }
    /* Game-specific prediction balls — small screens */
    /* Thunderball — lavender (small screens) */
    .game-card[data-game="thunderball"] .prediction-ball {
        background: linear-gradient(135deg, var(--lavender), #c084fc);
        color: #4c1d95;
        box-shadow: 0 3px 12px var(--lavender-glow);
        border-radius: 50%;
    }
    .game-card[data-game="set_for_life"] .prediction-ball {
        background: linear-gradient(135deg, var(--green), #388e3c);
        color: #1a1a2e;
        box-shadow: 0 3px 12px rgba(102, 187, 106, 0.4);
        border-radius: 50%;
    }
    /* EuroMillions prediction — gold (small screens) */
    .game-card[data-game="euro_millions"] .prediction-ball {
        background: linear-gradient(135deg, var(--gold), #d4a017);
        color: #1a1a2e;
        box-shadow: 0 3px 12px var(--gold-glow);
        border-radius: 50%;
    }
    /* EuroMillions prediction lucky stars — orange-gold (small screens) */
    .game-card[data-game="euro_millions"] .star-ball {
        background: linear-gradient(135deg, var(--star-gold), #e6a800);
        color: #fff;
        box-shadow: 0 3px 12px var(--star-gold-glow);
        border-radius: 50%;
    }
    /* Bonus and star balls inherit .ball size (40px on small screens) */
    .bonus-ball {
        border-radius: 50%;
        background: linear-gradient(135deg, var(--lotto-red), #991b1b);
        color: #fff;
        box-shadow: 0 3px 12px var(--lotto-red-glow);
    }
    .star-ball {
        border-radius: 50%;
    }
    /* Stats */
    .stat-number {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    .stat-number small {
        font-size: 0.7rem;
    }
    /* Results table — compact */
    .results-table {
        font-size: 0.78rem;
    }
    .results-table th {
        padding: 4px 6px;
        font-size: 0.65rem;
    }
    .results-table td {
        padding: 8px 6px;
    }
    .date-cell {
        padding: 8px 2px;
        font-size: 0.72rem;
        white-space: nowrap;
        text-align: center;
        line-height: 18px;
    }
    .date-cell .draw-ref {
        line-height: inherit;
    }
    .results-table td.numbers-cell,
    .results-table td.bonus-cell {
        border-bottom: none;
    }
    .numbers-cell {
        padding: 8px 2px;
        min-width: 0;
        white-space: nowrap;
    }
    .numbers-cell .cell-inner {
        display: block;
        gap: 0;
        flex-wrap: nowrap;
    }
    .bonus-cell .cell-inner {
        display: block;
        gap: 0;
        flex-wrap: nowrap;
    }
    /* EuroMillions: keep lucky stars on same line on small screens */
    .game-card[data-game="euro_millions"] .bonus-cell .cell-inner {
        display: flex;
        gap: 4px;
        justify-content: center;
    }
    /* Jackpot column */
    .jackpot-col {
        width: 42px;
    }
    /* Jackpot display — mobile */
    .jackpot-value {
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        font-size: 0.58rem;
    }
    /* Set For Life: wider jackpot column so £1k x 30yrs stays on one line */
    .game-card[data-game="set_for_life"] .jackpot-col { width: 80px; }
    .game-card[data-game="set_for_life"] .jackpot-badge {
        white-space: nowrap;
    }
    .bonus-cell { min-width: 0; border-bottom: none; }
    .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    /* Lotto results — centred on mobile */
    .game-card[data-game="lotto"] .date-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .numbers-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .bonus-cell .cell-inner {
        justify-content: center;
    }
    .game-card[data-game="lotto"] .jackpot-col {
        text-align: center;
    }
    .result-ball {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--lotto-pink), #fda4af);
        color: var(--lotto-text);
        box-shadow: 0 1px 4px var(--lotto-pink-glow);
    }
    /* Game-specific result balls — small screens */
    /* Thunderball — lavender (small screens) */
    .game-card[data-game="thunderball"] .result-ball {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--lavender), #c084fc);
        color: #4c1d95;
        box-shadow: 0 1px 4px var(--lavender-glow);
    }
    .game-card[data-game="set_for_life"] .result-ball {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--green), #388e3c);
        color: #1a1a2e;
        box-shadow: 0 1px 4px rgba(102, 187, 106, 0.35);
    }
    .game-card[data-game="euro_millions"] .result-ball {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--gold), #d4a017);
        color: #1a1a2e;
        box-shadow: 0 1px 4px var(--gold-glow);
    }
    /* EuroMillions lucky stars (small screens) */
    .game-card[data-game="euro_millions"] .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--star-gold), #e6a800);
        color: #fff;
        box-shadow: 0 1px 4px var(--star-gold-glow);
    }
    /* Thunderball thunderball (small screens) */
    .game-card[data-game="thunderball"] .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
        color: #fff;
        box-shadow: 0 1px 4px var(--thunder-purple-glow);
    }
    /* Set For Life life ball (small screens) */
    .game-card[data-game="set_for_life"] .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--teal), #049ba3);
        color: #fff;
        box-shadow: 0 1px 4px var(--teal-glow);
    }
    /* Lotto/Health bonus ball (small screens) */
    .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--lotto-red), #991b1b);
        color: #fff;
        box-shadow: 0 1px 4px var(--lotto-red-glow);
        text-decoration: none;
    }
    /* Thunderball thunderball (small screens) */
    .game-card[data-game="thunderball"] .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
        color: #fff;
        box-shadow: 0 1px 4px var(--thunder-purple-glow);
    }
    /* EuroMillions lucky stars (small screens) */
    .game-card[data-game="euro_millions"] .bonus-cell .result-ball.bonus {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 0.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: linear-gradient(135deg, var(--star-gold), #e6a800);
        color: #fff;
        box-shadow: 0 1px 4px var(--star-gold-glow);
    }
    /* Footer */
    .site-footer {
        padding: 24px 12px;
        font-size: 0.72rem;
        margin-top: 24px;
    }
    /* Toast */
    .toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        font-size: 0.85rem;
        padding: 10px 16px;
    }

    /* ── Game-page header: single row — confidence right ── */
    .game-page-nav .container {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 0;
    }
    .game-page-title {
        font-size: 1rem;
        order: 2;
        width: 100%;
        text-align: center;
        margin: 0;
    }
    .back-btn {
        order: 1;
        padding: 5px 10px;
        font-size: 0.78rem;
    }
    .game-page-subtitle {
        display: none;
    }
    /* Mobile: countdown badges match front page — compact */
    .countdown-today {
        font-size: 0.68rem;
        padding: 2px 10px;
    }
    .countdown-badge {
        font-size: 0.68rem;
        padding: 2px 10px;
    }
    .countdown-full {
        display: none;
    }
    .countdown-mobile-date {
        display: inline;
        font-size: 0.68rem;
        padding: 2px 10px;
    }
    /* Show countdown-row below header */
    .countdown-row {
        padding: 6px 0 8px 0;
    }
    /* Full-width confidence bar — tiny */
    .confidence-bar-wrap {
        gap: 4px !important;
        padding: 4px 0 !important;
        margin-top: 4px !important;
    }
    .confidence-bar-wrap .confidence-text {
        font-size: 0.7rem !important;
        color: #f5a623 !important;
    }
    .confidence-bar-wrap .conf-pct {
        font-size: 0.75rem !important;
    }
    .confidence-bar-wrap .conf-pill {
        font-size: 0.68rem !important;
        padding: 2px 10px !important;
        border-radius: 12px !important;
    }
    .confidence-bar {
        min-width: 30px !important;
        height: 5px !important;
    }

    /* Confidence Breakdown — per number */
    .conf-breakdown {
        margin: 10px 0 4px;
        padding: 8px 10px;
        background: var(--surface);
        border-radius: 8px;
        border: 1px solid #1e1e30;
    }
    .conf-breakdown h4 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin: 0 0 8px;
    }
    .conf-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1px solid #1a1a2e;
    }
    .conf-row:last-child {
        border-bottom: none;
    }
    .conf-num {
        font-size: 0.82rem;
        font-weight: 700;
        color: #fff;
        min-width: 22px;
        text-align: center;
    }
    .conf-bar-bg {
        flex: 1;
        height: 8px;
        background: #1e293b;
        border-radius: 4px;
        overflow: hidden;
    }
    .conf-bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.4s ease;
    }
    .conf-values {
        width: 110px;
    }
    .conf-score {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--text);
        width: 48px;
        text-align: right;
        flex-shrink: 0;
    }
    .conf-label {
        font-size: 0.55rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        width: 62px;
        text-align: left;
        flex-shrink: 0;
    }
    .conf-row.bonus-row .conf-num {
        background: var(--accent);
        color: #fff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Mobile — game-specific bonus ball colors */
    .game-card[data-game="lotto"] .conf-row.bonus-row .conf-num {
        background: var(--lotto-red) !important;
        color: #fff !important;
    }
    .game-card[data-game="thunderball"] .conf-row.bonus-row .conf-num {
        background: var(--thunder-purple);
        color: #fff;
    }
    .game-card[data-game="set_for_life"] .conf-row.bonus-row .conf-num {
        background: var(--teal);
        color: #fff;
    }
    .conf-row.star-row .conf-num {
        background: var(--star-gold);
        color: #1a1a2e;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Page header: compact */
    .page-header {
        padding: 10px 12px 4px;
    }
    .page-header h1 {
        font-size: 1.2rem;
    }
    /* Quick nav: smaller */
    .quick-nav {
        gap: 4px;
        padding: 6px 10px 10px;
    }
    .quick-nav-btn {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    /* Predictions header: compact button on mobile */
    .predictions-header {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .predictions-header h3 {
        font-size: 0.9rem;
        margin: 0;
    }
    /* Space below prediction balls */
    .prediction-balls {
        margin-bottom: 16px !important;
    }
    /* Mobile: no extra space above compact predictions */
    .card-predictions {
        margin-top: 0;
    }
    /* Hot/cold numbers: single line on mobile */
    .stat-list {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
    }
    .stat-number {
        white-space: nowrap !important;
        font-size: 0.62rem !important;
        padding: 2px 6px !important;
    }
    .stat-number small {
        font-size: 0.55rem !important;
    }
    .stat-hot {
        color: #ff4444 !important;
    }
    .stat-hot small {
        color: var(--text-muted) !important;
    }
    .stat-cold {
        color: #7dd3fc !important;
    }
    .stat-cold small {
        color: var(--text-muted) !important;
    }
    /* Stats grid: single column on mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Desktop: pill-shaped regeneration button ── */
@media (min-width: 769px) {
    .game-emoji {
        margin-top: -4px !important;
    }
    .predictions-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .predictions-header h3 {
        margin: 0;
    }
    .regen-btn {
        border-radius: 999px !important;
        margin-bottom: 16px !important;
        margin-top: -10px !important;
    }
}

/* ── Notched phones (safe area insets) ── */
@media (max-width: 768px) {
    .site-header {
        position: static; /* sticky causes Brave mobile to re-render on viewport changes */
        padding-top: max(32px, calc(env(safe-area-inset-top) + 24px));
    }
    .site-footer {
        padding-bottom: max(32px, calc(24px + env(safe-area-inset-bottom)));
    }
    .toast {
        bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    }
}

/* ── Desktop: countdown-row styling ── */
@media (min-width: 769px) {
    .countdown-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    .countdown-mobile-date {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text);
        background: var(--surface);
        padding: 4px 14px;
        border-radius: 8px;
        border: 1px solid #2a2a3e;
    }
    /* Lotto: nudge today's countdown badge down */
    .game-card[data-game="lotto"] .countdown-today {
        position: relative !important;
        top: 24px !important;
        margin-bottom: 48px !important;
    }
    /* Thunderball: nudge today's countdown badge down */
    .game-card[data-game="thunderball"] .countdown-today {
        position: relative !important;
        top: 24px !important;
        margin-bottom: 48px !important;
    }
    /* EuroMillions & Set For Life: nudge upcoming countdown up */
    .game-card[data-game="euro_millions"] .countdown-badge {
        position: relative !important;
        top: -26px !important;
    }
    .game-card[data-game="set_for_life"] .countdown-badge {
        position: relative !important;
        top: -26px !important;
    }
}

/* ── Landscape phones ── */
@media (max-height: 500px) {
    .site-header {
        padding: 16px 16px 12px;
    }
    .site-header h1 {
        font-size: 1.2rem;
    }
    .subtitle {
        display: none;
    }
    .game-card {
        padding: 14px 16px;
        margin: 8px 0;
    }
}

/* ── Landing Page — Game Cards with View Buttons (Feature: navigation) ── */

/* Desktop: larger card labels */
@media (min-width: 769px) {
    .card-label {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
    }
}

/* Game card link wrapper */
.landing-game-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 14px 0;
    box-shadow: var(--shadow), 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    border: 2px solid #333;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
@media (min-width: 769px) {
    .landing-game-card[data-game="lotto"] { border-color: #dc2626; border-width: 1px; }
    .landing-game-card[data-game="euro_millions"] { border-color: #f5c842; border-width: 1px; }
    .landing-game-card[data-game="thunderball"] { border-color: #d8b4fe; border-width: 1px; }
    .landing-game-card[data-game="set_for_life"] { border-color: #66bb6a; border-width: 1px; }
}
.landing-game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}
.landing-game-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow), 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    border-color: #444;
}
/* Game-specific border colours on hover — uniform thickness all round */
.landing-game-card[data-game="lotto"]:hover {
    border-color: #dc2626;
    border-width: 3px;
    box-shadow: 0 8px 40px rgba(220, 38, 38, 0.15);
}
.landing-game-card[data-game="euro_millions"]:hover {
    border-color: #f5c842;
    border-width: 3px;
    box-shadow: 0 8px 40px rgba(245, 200, 66, 0.15);
}
.landing-game-card[data-game="thunderball"]:hover {
    border-color: #d8b4fe;
    border-width: 3px;
    box-shadow: 0 8px 40px rgba(216, 180, 254, 0.15);
}
.landing-game-card[data-game="set_for_life"]:hover {
    border-color: #66bb6a;
    border-width: 3px;
    box-shadow: 0 8px 40px rgba(102, 187, 106, 0.15);
}

/* Card header row */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.card-icon {
    flex-shrink: 0;
    background: var(--surface);
    border-radius: 10px;
    padding: 6px;
    border: 1px solid #333;
}
.card-icon svg {
    width: 40px;
    height: 40px;
}
.card-title-block {
    flex: 1;
    min-width: 0;
}
.card-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0;
}
.card-format {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

/* Compact predictions preview */
.card-predictions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 0;
    margin-top: 20px !important;
}
.card-predictions > span {
    font-size: 1.05rem !important;
}
.card-predictions .prediction-ball {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.1));
    animation: ball-glow-pulse 2.5s ease-in-out infinite;
}
/* Bonus and stars same size as main prediction balls */
.card-predictions .bonus-ball {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.85rem !important;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.1));
    animation: ball-glow-pulse 2.5s ease-in-out infinite;
}
.card-predictions .star-ball {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.85rem !important;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.1));
    animation: ball-glow-pulse 2.5s ease-in-out infinite;
}

/* Compact last draw row */
.card-last-draw {
    background: #0c1220;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border: 1px solid #1e1e30;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}
.card-last-draw .date {
    color: #fff;
    white-space: nowrap;
    min-width: 70px;
}
.card-last-draw .balls {
    display: flex;
    gap: 4px;
    flex: 1;
}
.card-last-draw .mini-ball {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.65rem;
}

/* View Game Button (button action for navigation) */
.view-game-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #fff;
}
.view-game-btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.2);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.view-game-btn:active {
    transform: translateY(0);
}
.view-game-btn--lotto {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 16px var(--lotto-red-glow);
    color: #fff;
}
.view-game-btn--euro {
    background: linear-gradient(135deg, #f5c842, #d4a017);
    box-shadow: 0 4px 16px var(--gold-glow);
    color: #1a1a2e;
}
.view-game-btn--thunderball {
    background: linear-gradient(135deg, #d8b4fe, #c084fc);
    box-shadow: 0 4px 16px var(--lavender-glow);
    color: #4c1d95;
}
.view-game-btn--sfl {
    background: #66bb6a !important;
    box-shadow: 0 4px 16px rgba(102, 187, 106, 0.35) !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Header controls on landing page */
.header-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Mobile — landing page cards */
@media (max-width: 768px) {
    .landing-game-card {
        padding: 16px 14px;
        margin: 10px 0;
    }
    .card-title {
        font-size: 1.2rem;
    }
    .card-badges {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }
    .card-icon svg {
        width: 32px;
        height: 32px;
    }
    .card-predictions .prediction-ball {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    .card-predictions .bonus-ball,
    .card-predictions .star-ball {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }
    .card-last-draw {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .card-last-draw .balls {
        margin-left: 0;
    }
    /* View Game Button — short & compact on mobile */
    .view-game-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
        text-transform: none;
        letter-spacing: 0;
        gap: 5px;
    }
    .view-game-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* ── Landing Page — Game-specific ball colors (mirror game-card rules) ── */

/* EuroMillions prediction — gold */
.landing-game-card[data-game="euro_millions"] .prediction-ball {
    background: linear-gradient(135deg, var(--gold), #d4a017);
    color: #1a1a2e;
    box-shadow: 0 3px 12px var(--gold-glow);
}
/* EuroMillions stars — orange-gold */
.landing-game-card[data-game="euro_millions"] .star-ball {
    background: linear-gradient(135deg, var(--star-gold), #e6a800);
    color: #fff;
    box-shadow: 0 3px 12px var(--star-gold-glow);
}
/* EuroMillions bonus (lucky stars in results) — orange-gold */
.landing-game-card[data-game="euro_millions"] .bonus-ball {
    background: linear-gradient(135deg, var(--star-gold), #e6a800);
    color: #fff;
    box-shadow: 0 2px 8px var(--star-gold-glow);
}
/* Thunderball prediction — lavender */
.landing-game-card[data-game="thunderball"] .prediction-ball {
    background: linear-gradient(135deg, var(--lavender), #c084fc);
    color: #4c1d95;
    box-shadow: 0 3px 12px var(--lavender-glow);
}
/* Thunderball bonus (thunderball) — purple */
.landing-game-card[data-game="thunderball"] .bonus-ball {
    background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
    color: #fff;
    box-shadow: 0 2px 8px var(--thunder-purple-glow);
}
/* Set For Life prediction — green */
.landing-game-card[data-game="set_for_life"] .prediction-ball {
    background: linear-gradient(135deg, var(--green), #388e3c);
    color: #1a1a2e;
    box-shadow: 0 3px 12px rgba(102, 187, 106, 0.4);
}
/* Set For Life bonus (life ball) — teal */
.landing-game-card[data-game="set_for_life"] .bonus-ball {
    background: linear-gradient(135deg, var(--teal), #049ba3);
    color: #fff;
    box-shadow: 0 2px 8px var(--teal-glow);
}
/* Set For Life stars — green (fallback) */
.landing-game-card[data-game="set_for_life"] .star-ball {
    background: linear-gradient(135deg, var(--green), #388e3c);
    color: #fff;
    box-shadow: 0 3px 12px rgba(102, 187, 106, 0.4);
}
/* Result balls in card-last-draw — game specific colors */
/* Lotto — pink (default, already correct) */
/* EuroMillions — gold */
.landing-game-card[data-game="euro_millions"] .result-ball {
    background: linear-gradient(135deg, var(--gold), #d4a017);
    color: #1a1a2e;
    box-shadow: 0 2px 8px var(--gold-glow);
}
/* Thunderball — lavender */
.landing-game-card[data-game="thunderball"] .result-ball {
    background: linear-gradient(135deg, var(--lavender), #c084fc);
    color: #4c1d95;
    box-shadow: 0 2px 8px var(--lavender-glow);
}
/* Set For Life — green */
.landing-game-card[data-game="set_for_life"] .result-ball {
    background: linear-gradient(135deg, var(--green), #388e3c);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.35);
}
/* All mini-balls same size (match draw balls) */
.landing-game-card[data-game] .mini-ball.result-ball {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
}
/* Lotto bonus — dark red (matches official site) */
.landing-game-card[data-game="lotto"] .mini-ball.result-ball.bonus {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
    background: linear-gradient(135deg, var(--lotto-red), #991b1b);
    color: #fff;
    box-shadow: 0 1px 4px var(--lotto-red-glow);
}
/* Game-specific result balls — bonus (stars) */
.landing-game-card[data-game="euro_millions"] .mini-ball.result-ball.bonus {
    background: linear-gradient(135deg, var(--star-gold), #e6a800);
    color: #fff;
    box-shadow: 0 1px 4px var(--star-gold-glow);
}
.landing-game-card[data-game="thunderball"] .mini-ball.result-ball.bonus {
    background: linear-gradient(135deg, var(--thunder-purple), #7e22ce);
    color: #fff;
    box-shadow: 0 1px 4px var(--thunder-purple-glow);
}
.landing-game-card[data-game="set_for_life"] .mini-ball.result-ball.bonus {
    background: linear-gradient(135deg, var(--teal), #049ba3);
    color: #fff;
    box-shadow: 0 1px 4px var(--teal-glow);
}

/* Pulsating orange glow — game page prediction, bonus, and star balls */
.prediction-balls .prediction-ball,
.prediction-balls .bonus-ball,
.prediction-balls .star-ball {
    filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.18));
    animation: ball-glow-pulse 2.5s ease-in-out infinite;
}