/* ============================================================
   LANESTATS.COM — Custom 80s Bowling Alley Themes
   Switch by changing data-theme in base.html:
     "lanestats"       — Dark, neon pink primary (original)
     "lanestats-amber"  — Dark, warm amber/orange primary
     "lanestats-teal"   — Dark, retro teal/cyan primary
     "lanestats-gold"   — Mid-dark, gold primary, warmer base
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Chakra+Petch:wght@400;500;600;700&display=swap');

/* ===== ORIGINAL — Dark + Neon Pink ===== */
[data-theme="lanestats"] {
    color-scheme: dark;
    --p: 0.65 0.25 350;           /* Neon pink */
    --pf: 0.55 0.25 350;
    --pc: 0.98 0.01 350;
    --s: 0.65 0.12 185;           /* Retro teal */
    --sf: 0.55 0.12 185;
    --sc: 0.98 0.01 185;
    --a: 0.7 0.18 55;             /* Warm amber */
    --af: 0.6 0.18 55;
    --ac: 0.15 0.02 55;
    --n: 0.28 0.02 50;
    --nf: 0.22 0.02 50;
    --nc: 0.85 0.03 80;
    --b1: 0.25 0.02 50;
    --b2: 0.20 0.02 45;
    --b3: 0.16 0.02 40;
    --bc: 0.88 0.03 80;
    --su: 0.65 0.17 155;
    --suc: 0.98 0.01 155;
    --wa: 0.75 0.15 85;
    --wac: 0.20 0.03 85;
    --er: 0.60 0.20 25;
    --erc: 0.98 0.01 25;
    --in: 0.65 0.12 230;
    --inc: 0.98 0.01 230;
    --rounded-box: 4px; --rounded-btn: 3px; --rounded-badge: 3px;
    --animation-btn: 0.12s; --animation-input: 0.15s; --btn-focus-scale: 0.97;
    --border-btn: 2px; --tab-border: 2px; --tab-radius: 3px;
}

/* ===== AMBER — Dark + Warm Orange ===== */
[data-theme="lanestats-amber"] {
    color-scheme: dark;
    --p: 0.70 0.17 50;            /* Warm amber-orange */
    --pf: 0.60 0.17 50;
    --pc: 0.15 0.02 50;
    --s: 0.60 0.12 185;           /* Teal */
    --sf: 0.50 0.12 185;
    --sc: 0.98 0.01 185;
    --a: 0.65 0.20 25;            /* Red-orange accent */
    --af: 0.55 0.20 25;
    --ac: 0.98 0.01 25;
    --n: 0.26 0.015 45;
    --nf: 0.20 0.015 45;
    --nc: 0.85 0.03 75;
    --b1: 0.23 0.015 45;
    --b2: 0.18 0.015 40;
    --b3: 0.14 0.015 35;
    --bc: 0.87 0.025 75;
    --su: 0.65 0.17 155;
    --suc: 0.98 0.01 155;
    --wa: 0.75 0.15 90;
    --wac: 0.20 0.03 90;
    --er: 0.58 0.22 20;
    --erc: 0.98 0.01 20;
    --in: 0.60 0.12 230;
    --inc: 0.98 0.01 230;
    --rounded-box: 4px; --rounded-btn: 3px; --rounded-badge: 3px;
    --animation-btn: 0.12s; --animation-input: 0.15s; --btn-focus-scale: 0.97;
    --border-btn: 2px; --tab-border: 2px; --tab-radius: 3px;
}

/* ===== TEAL — Dark + Retro Cyan ===== */
[data-theme="lanestats-teal"] {
    color-scheme: dark;
    --p: 0.68 0.14 185;           /* Retro teal-cyan */
    --pf: 0.58 0.14 185;
    --pc: 0.12 0.02 185;
    --s: 0.68 0.16 55;            /* Amber secondary */
    --sf: 0.58 0.16 55;
    --sc: 0.12 0.02 55;
    --a: 0.62 0.22 340;           /* Pink accent */
    --af: 0.52 0.22 340;
    --ac: 0.98 0.01 340;
    --n: 0.27 0.015 200;
    --nf: 0.21 0.015 200;
    --nc: 0.85 0.02 200;
    --b1: 0.24 0.015 200;
    --b2: 0.19 0.015 195;
    --b3: 0.15 0.015 190;
    --bc: 0.88 0.02 195;
    --su: 0.65 0.17 150;
    --suc: 0.98 0.01 150;
    --wa: 0.75 0.15 85;
    --wac: 0.20 0.03 85;
    --er: 0.60 0.20 25;
    --erc: 0.98 0.01 25;
    --in: 0.65 0.12 260;
    --inc: 0.98 0.01 260;
    --rounded-box: 4px; --rounded-btn: 3px; --rounded-badge: 3px;
    --animation-btn: 0.12s; --animation-input: 0.15s; --btn-focus-scale: 0.97;
    --border-btn: 2px; --tab-border: 2px; --tab-radius: 3px;
}

/* ===== GOLD — Mid-Dark + Gold Primary ===== */
[data-theme="lanestats-gold"] {
    color-scheme: dark;
    --p: 0.72 0.14 85;            /* Gold */
    --pf: 0.62 0.14 85;
    --pc: 0.15 0.03 85;
    --s: 0.62 0.10 185;           /* Muted teal */
    --sf: 0.52 0.10 185;
    --sc: 0.98 0.01 185;
    --a: 0.60 0.15 25;            /* Rust accent */
    --af: 0.50 0.15 25;
    --ac: 0.98 0.01 25;
    --n: 0.30 0.015 55;
    --nf: 0.24 0.015 55;
    --nc: 0.85 0.025 75;
    --b1: 0.28 0.015 55;          /* Slightly lighter base */
    --b2: 0.23 0.015 50;
    --b3: 0.18 0.015 45;
    --bc: 0.88 0.025 80;
    --su: 0.65 0.17 155;
    --suc: 0.98 0.01 155;
    --wa: 0.78 0.14 90;
    --wac: 0.18 0.03 90;
    --er: 0.58 0.20 20;
    --erc: 0.98 0.01 20;
    --in: 0.62 0.10 230;
    --inc: 0.98 0.01 230;
    --rounded-box: 4px; --rounded-btn: 3px; --rounded-badge: 3px;
    --animation-btn: 0.12s; --animation-input: 0.15s; --btn-focus-scale: 0.97;
    --border-btn: 2px; --tab-border: 2px; --tab-radius: 3px;
}

.htmx-swapping { opacity: 0; transition: opacity .1s ease-out; }

/* ===== Font ===== */
.ls-body { font-family: 'Chakra Petch', sans-serif; }
body, .font-\[\'Outfit\'\] { font-family: 'Chakra Petch', sans-serif !important; }

/* ===== CRT Scanlines ===== */
.ls-body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.02;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px);
}

/* ===== Navbar ===== */
.ls-nav {
    background: oklch(0.22 0.02 50);
    border-bottom: 3px solid oklch(var(--p));
    box-shadow: 0 3px 0 oklch(var(--pf));
}

.ls-brand {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em;
    color: oklch(var(--p)) !important;
    -webkit-text-fill-color: oklch(var(--p));
    text-shadow: 0 0 12px oklch(var(--p) / 0.5), 0 0 30px oklch(var(--p) / 0.15);
    background: none !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
}

.menu a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}
.menu .active {
    background: oklch(var(--p)) !important;
    color: oklch(var(--pc)) !important;
    box-shadow: 0 2px 0 oklch(var(--pf));
}

/* ===== Cards ===== */
.card {
    border-radius: 4px !important;
    border: 2px solid oklch(var(--bc) / 0.1);
    box-shadow: 4px 4px 0 oklch(0.1 0.01 40 / 0.5);
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.15s;
}
.card:hover {
    border-color: oklch(var(--p) / 0.4);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 oklch(0.1 0.01 40 / 0.5);
}

/* ===== Stat boxes ===== */
.stat {
    border-radius: 4px !important;
    border: 2px solid oklch(var(--bc) / 0.08);
    box-shadow: 3px 3px 0 oklch(0.1 0.01 40 / 0.4);
}
.stat-title {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
}
.stat-value {
    text-shadow: 0 0 6px currentColor;
}

/* ===== Buttons ===== */
.btn {
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    box-shadow: 3px 3px 0 oklch(0.1 0.01 40 / 0.4);
    transition: all 0.08s;
}
.btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 oklch(0.1 0.01 40 / 0.4) !important;
}
.btn-primary {
    box-shadow: 3px 3px 0 oklch(var(--pf) / 0.7);
}
.btn-primary:hover {
    box-shadow: 4px 4px 0 oklch(var(--pf) / 0.7);
    transform: translate(-1px, -1px);
}
.btn-ghost { box-shadow: none; }

/* ===== Inputs ===== */
.input, .select {
    border-radius: 3px !important;
    box-shadow: inset 2px 2px 0 oklch(0.1 0.01 40 / 0.15);
}
.input:focus, .select:focus {
    box-shadow: inset 2px 2px 0 oklch(0.1 0.01 40 / 0.15), 0 0 0 2px oklch(var(--p) / 0.3);
    outline: none;
}

/* ===== Badges ===== */
.badge { border-radius: 3px !important; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.04em; font-weight: 700; }

/* ===== Progress ===== */
.progress { border-radius: 2px !important; height: 0.6rem; }
.progress::-webkit-progress-value { border-radius: 1px; }

/* ===== Pin glow ===== */
button.bg-success {
    box-shadow: 0 0 15px oklch(var(--su) / 0.5), 0 0 30px oklch(var(--su) / 0.12) !important;
}
td.ring-2.ring-primary { box-shadow: 0 0 8px oklch(var(--p) / 0.3); }

/* ===== Tabs ===== */
.tabs-boxed {
    border: 2px solid oklch(var(--bc) / 0.1);
    border-radius: 4px !important;
    box-shadow: 3px 3px 0 oklch(0.1 0.01 40 / 0.3);
}
.tab { font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; border-radius: 2px !important; }
.tab-active { background: oklch(var(--p)) !important; color: oklch(var(--pc)) !important; }

/* ===== Collapse ===== */
.collapse {
    border-radius: 4px !important;
    border: 2px solid oklch(var(--bc) / 0.1);
    box-shadow: 3px 3px 0 oklch(0.1 0.01 40 / 0.3);
}
.collapse-title { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

/* ===== Dropdown / Modal ===== */
.dropdown-content { border-radius: 4px !important; border: 2px solid oklch(var(--bc) / 0.12); box-shadow: 4px 4px 0 oklch(0.1 0.01 40 / 0.4); }
.modal-box { border-radius: 4px !important; border: 3px solid oklch(var(--p)); box-shadow: 6px 6px 0 oklch(0.1 0.01 40 / 0.4); }
.modal-backdrop { backdrop-filter: blur(3px); }

/* ===== Share card ===== */
#share-card { border: 2px solid oklch(var(--bc) / 0.1); border-radius: 4px !important; box-shadow: 4px 4px 0 oklch(0.1 0.01 40 / 0.3); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: oklch(var(--b3)); }
::-webkit-scrollbar-thumb { background: oklch(var(--p) / 0.4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--p) / 0.6); }

/* ===== Misc ===== */
.divider::before, .divider::after { background: oklch(var(--bc) / 0.1) !important; }
.alert { border-radius: 4px !important; box-shadow: 3px 3px 0 oklch(0.1 0.01 40 / 0.2); }
.table th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; font-weight: 700; }
h1, h2, h3 { letter-spacing: 0.02em; }
.rounded-box, .rounded-lg { border-radius: 4px !important; }
.text-warning { text-shadow: 0 0 8px oklch(var(--wa) / 0.4); }

/* ===== Page fade ===== */
main { animation: retroIn 0.12s ease-out; }
@keyframes retroIn { from { opacity: 0; } to { opacity: 1; } }