/* LeagueSoftware Theme System
   Redone to carry over RDL's full theme roster (JS/themes.js + redeem.js
   THEMES) minus event/secretOnly themes — Christmas, the 1-year-anniversary
   Birthday theme, the 2026 Community Goal reward theme, the
   Blackout-exclusive Raider Bot theme, and Energy Grid (removed per
   request) all stay on RDL's side since they're tied to RDL's own event
   calendar or were simply dropped.

   Kept OCL's existing architecture (a handful of CSS custom properties —
   --accent/--accent-hover, plus --text/--text-dim/--border for the couple
   of light themes) instead of RDL's approach of hand-duplicating every
   accent color across dozens of individual component rules per theme —
   same visual result, far less to maintain, and it's what the previous
   7-theme version here already established. Each theme's decorative
   ::before texture overlay (noise/pattern SVGs) IS ported 1:1 from RDL
   though — that's the "important features" the variable-only pass
   previously missed for several themes.

   Cockpit and Synergy use RDL's actual background images (copied into
   images/themes/) per request. */

body {
    background-attachment: fixed;
    transition: background 0.3s ease;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIHg9IjAiIHk9IjAiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMDAyIiBudW1PY3RhdmVzPSIyIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIDAgMCAwIC41Ii8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InRyYW5zcGFyZW50Ii8+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
}

/* ── Magenta (default) ───────────────────────────────────────────────────── */
body, body.theme-default {
    background: linear-gradient(145deg, #1a0520, #200828);
}
/* No theme-specific ::before override needed — the base body::before
   fractal-noise texture above (opacity 0.25) already matches RDL's
   default-theme overlay exactly. */
body.theme-default nav, body.theme-default footer {
    background: linear-gradient(to bottom, rgba(60, 5, 70, 0.92), rgba(100, 15, 90, 0.85));
    box-shadow: 0 0 20px rgba(200, 50, 180, 0.25);
}
body.theme-default { --accent: #c832b4; --accent-hover: #e050d0; }

/* ── Legacy — generic rock texture, no branding ─────────────────────────── */
body.theme-legacy {
    background: url('../images/theme-legacy-rock.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.theme-legacy::before { content: none; }
body.theme-legacy nav, body.theme-legacy footer {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9));
    box-shadow: none;
}
body.theme-legacy { --accent: #9a9a9a; --accent-hover: #c4c4c4; }

/* ── Nightlight (high contrast) — matches RDL's actual look: #1f1f1f body,
   pure-black nav/footer, white accent throughout (not yellow). ─────────── */
body.theme-contrast { background: #1f1f1f; }
body.theme-contrast::before { content: none; }
body.theme-contrast nav, body.theme-contrast footer {
    background: #000;
    border-bottom: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
body.theme-contrast { --accent: #ffffff; --accent-hover: #cccccc; }

/* ── Vanilla — light theme, needs a text-color flip ─────────────────────── */
body.theme-vanilla {
    background: linear-gradient(145deg, #fdf6e3 0%, #f5ead0 50%, #fdf0d8 100%);
}
body.theme-vanilla::before { content: none; }
/* !important required: nav.css's base `nav { background: ... !important; }`
   rule otherwise always wins regardless of selector specificity, since
   !important beats specificity, not the other way round — every other
   theme's nav/footer color customization has the same footgun, but Vanilla
   is the one that actually breaks without it (white nav text/icons on a
   near-black translucent bar reads fine; on Vanilla's light nav it doesn't,
   so the light nav + dark nav-text pairing below has to actually apply). */
body.theme-vanilla nav, body.theme-vanilla footer {
    background: linear-gradient(to right, #f0dfc0, #e8d4aa) !important;
    border-bottom: 1px solid rgba(170, 125, 55, 0.30) !important;
    box-shadow: 0 2px 10px rgba(120, 80, 20, 0.10) !important;
}
body.theme-vanilla nav a,
body.theme-vanilla .nav-sidebar-header,
body.theme-vanilla .nav-username,
body.theme-vanilla .nav-site-title,
body.theme-vanilla nav a i {
    color: #2c2c2c !important;
}
body.theme-vanilla nav a:hover,
body.theme-vanilla .nav-username:hover {
    color: #7a5a00 !important;
    background-color: rgba(44, 44, 44, 0.08) !important;
}
body.theme-vanilla .hamburger span { background: #2c2c2c !important; }
body.theme-vanilla .hamburger { border-color: rgba(44, 44, 44, 0.25) !important; }
body.theme-vanilla {
    --accent: #b8860b; --accent-hover: #d4a017;
    --text: #2c2c2c; --text-dim: #6b5c3f; --border: rgba(44, 44, 44, 0.16);
}

/* ── Purple ───────────────────────────────────────────────────────────────── */
body.theme-purple {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}
body.theme-purple::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIHg9IjAiIHk9IjAiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMDAyIiBudW1PY3RhdmVzPSIyIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIDAgMCAwIC41Ii8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InRyYW5zcGFyZW50Ii8+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    opacity: 0.3;
    z-index: -1;
}
body.theme-purple nav, body.theme-purple footer {
    background: linear-gradient(to bottom, rgba(40, 0, 80, 0.9), rgba(90, 30, 140, 0.75));
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}
body.theme-purple { --accent: #9c27b0; --accent-hover: #b855c9; }

/* ── Blue (ocean) ─────────────────────────────────────────────────────────── */
body.theme-ocean {
    background: linear-gradient(to bottom, #001e3c, #00162b);
}
body.theme-ocean::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIHg9IjAiIHk9IjAiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuMDAzIiBudW1PY3RhdmVzPSIzIi8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSJTb3VyY2VHcmFwaGljIiBzY2FsZT0iMTAiLz48L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4wNCIvPjwvc3ZnPg==');
    opacity: 0.5;
    z-index: -1;
    animation: subtle-waves 30s linear infinite;
}
body.theme-ocean nav, body.theme-ocean footer {
    background: linear-gradient(to right, rgba(0, 30, 60, 0.9), rgba(0, 40, 80, 0.9));
    border-bottom: 2px solid rgba(0, 120, 215, 0.2);
    box-shadow: 0 0 15px rgba(0, 120, 215, 0.15);
}
body.theme-ocean { --accent: #0078d7; --accent-hover: #2f9ae8; }
@keyframes subtle-waves {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

/* ── Dual-Blue (slate) ────────────────────────────────────────────────────── */
body.theme-slate {
    background: linear-gradient(145deg, #141c2e, #1a2440);
}
body.theme-slate::before { content: none; }
body.theme-slate nav, body.theme-slate footer {
    background: rgba(10, 14, 26, 0.97);
    border-bottom: 1px solid rgba(107, 154, 238, 0.14);
    box-shadow: 0 0 12px rgba(107, 154, 238, 0.06);
}
body.theme-slate { --accent: #6b9aee; --accent-hover: #8fb2f2; }

/* ── Yellow Orange (cyberpunk) ────────────────────────────────────────────── */
body.theme-cyberpunk {
    background: linear-gradient(145deg, #352511, #3d2b14);
}
body.theme-cyberpunk::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjUwIiB4PSIwIiB5PSIwIiBmaWxsPSIjOTk2NjAwIiBvcGFjaXR5PSIwLjA1Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
    opacity: 0.3;
    z-index: -1;
}
body.theme-cyberpunk nav, body.theme-cyberpunk footer {
    background: linear-gradient(to right, rgba(65, 45, 10, 0.95), rgba(75, 55, 15, 0.95));
    border-bottom: 2px solid rgba(125, 95, 10, 0.3);
    box-shadow: 0 0 15px rgba(125, 95, 10, 0.2);
}
body.theme-cyberpunk {
    --accent: #c98a00; --accent-hover: #e5c87c;
    --text: #d5c3a5; --text-dim: #a8967a;
}

/* ── Red (volcanic) ───────────────────────────────────────────────────────── */
body.theme-volcanic {
    background: linear-gradient(to bottom, #1a0808, #240404);
}
body.theme-volcanic::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTEwMCAwQzY2LjY3IDAgMCAzMy4zNCAwIDUwczY2LjY3IDUwIDEwMCA1MCAxMDAtMzMuMzQgMTAwLTUwUzEzMy4zMyAwIDEwMCAweiIgZmlsbD0icmdiYSgyNTUsIDAsIDAsIDAuMDMpIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
    opacity: 0.3;
    z-index: -1;
}
body.theme-volcanic nav, body.theme-volcanic footer {
    background: linear-gradient(to right, rgba(50, 0, 0, 0.9), rgba(80, 10, 10, 0.9));
    border-bottom: 2px solid rgba(200, 30, 30, 0.2);
    box-shadow: 0 0 15px rgba(200, 30, 30, 0.1);
}
body.theme-volcanic { --accent: #c81e1e; --accent-hover: #e94b4b; }

/* ── Dreamland (pastel) — light theme, needs a text-color flip ──────────── */
body.theme-pastel {
    background: linear-gradient(135deg, #E5A8A7 0%, #B4DAD5 25%, #F5E5A8 50%, #C7BFE6 75%, #A3B9C9 100%);
    background-size: 400% 400%;
    animation: pastel-gradient 15s ease infinite;
}
body.theme-pastel::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(229, 168, 167, 0.2), transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(180, 218, 213, 0.2), transparent 50%),
                radial-gradient(circle at 50% 80%, rgba(245, 229, 168, 0.2), transparent 50%);
    opacity: 0.6;
    z-index: -1;
}
body.theme-pastel nav, body.theme-pastel footer {
    background: linear-gradient(to bottom, rgba(199, 191, 230, 0.85), rgba(163, 185, 201, 0.9));
    box-shadow: 0 0 20px rgba(199, 191, 230, 0.4);
}
body.theme-pastel {
    --accent: #8f6fc9; --accent-hover: #a98be0;
    --text: #33302e; --text-dim: #635c58; --border: rgba(51, 48, 46, 0.16);
}
@keyframes pastel-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Aurora Veil (aurora) ───────────────────────────────────────────────── */
body.theme-aurora {
    background: linear-gradient(180deg, #081420 0%, #0d1f1a 50%, #081420 100%);
}
body.theme-aurora::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 110% 35% at 50% 5%,  rgba(40, 200, 170, 0.13) 0%, transparent 65%),
        radial-gradient(ellipse  60% 25% at 20% 55%, rgba(100, 70, 200, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse  80% 28% at 75% 80%, rgba(30, 170, 150, 0.07) 0%, transparent 60%);
    z-index: -1;
}
body.theme-aurora nav, body.theme-aurora footer {
    background: linear-gradient(to right, rgba(6, 20, 28, 0.96), rgba(8, 26, 22, 0.96));
    border-bottom: 1px solid rgba(40, 200, 170, 0.15);
    box-shadow: 0 0 18px rgba(40, 200, 170, 0.07);
}
body.theme-aurora { --accent: #28c8a8; --accent-hover: #4adec6; }

/* ── Gold ─────────────────────────────────────────────────────────────────── */
body.theme-gold {
    background: linear-gradient(145deg, #1a1308, #262111);
}
body.theme-gold::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZGVmcz48cGF0dGVybiBpZD0iYSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPjxwYXRoIGZpbGw9IiMyOTIyMTEiIGQ9Ik0wIDBoMTAwdjEwMEgweiIvPjxwYXRoIGQ9Ik01MCAwdjEwMG0wLTEwMGw1MCA1MEw1MCAwbS01MCA1MEgxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q0QUYzNyIgc3Ryb2tlLXdpZHRoPSIuNSIgc3Ryb2tlLW9wYWNpdHk9Ii4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
    opacity: 0.4;
    z-index: -1;
}
body.theme-gold nav, body.theme-gold footer {
    background: linear-gradient(to right, rgba(70, 50, 10, 0.9), rgba(90, 70, 20, 0.9));
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}
body.theme-gold { --accent: #d4af37; --accent-hover: #e6c860; }

/* ── Emerald ──────────────────────────────────────────────────────────────── */
body.theme-emerald {
    background: linear-gradient(to bottom, #071f12, #0c2818);
}
body.theme-emerald::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjQwIiBmaWxsPSJyZ2JhKDgwLCAyMDAsIDEyMCwgMC4wMykiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=');
    opacity: 0.6;
    z-index: -1;
}
body.theme-emerald nav, body.theme-emerald footer {
    background: linear-gradient(to right, rgba(15, 60, 40, 0.9), rgba(25, 80, 60, 0.9));
    border-bottom: 2px solid rgba(80, 200, 120, 0.2);
    box-shadow: 0 0 15px rgba(80, 200, 120, 0.1);
}
body.theme-emerald { --accent: #50c878; --accent-hover: #74e79c; }

/* ── Arrakis (dusk) ───────────────────────────────────────────────────────── */
body.theme-dusk {
    background: linear-gradient(to bottom, #181008, #22160c);
}
body.theme-dusk::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 80% 30% at 50% 0%,  rgba(200, 100, 30, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 20% at 80% 100%, rgba(180,  80, 20, 0.06) 0%, transparent 55%);
    z-index: -1;
}
body.theme-dusk nav, body.theme-dusk footer {
    background: linear-gradient(to right, rgba(35, 18, 6, 0.96), rgba(46, 24, 8, 0.96));
    border-bottom: 1px solid rgba(210, 130, 50, 0.2);
    box-shadow: 0 0 15px rgba(210, 130, 50, 0.08);
}
body.theme-dusk { --accent: #d28032; --accent-hover: #e8a060; }

/* ── Cockpit — RDL's actual cockpit-view background image. ──────────────── */
body.theme-cockpit {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/themes/cockpit.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.theme-cockpit::before { content: none; }
body.theme-cockpit nav, body.theme-cockpit footer {
    background: rgba(255, 0, 0, 0.199);
}
body.theme-cockpit { --accent: #ff3b3b; --accent-hover: #ff6b6b; }

/* ── Synergy (cobalt) — RDL's actual FFA-arena background image. ────────── */
body.theme-cobalt {
    background-image: url('../images/themes/synergy.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.theme-cobalt::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.70);
    z-index: -1;
}
body.theme-cobalt nav, body.theme-cobalt footer {
    background: linear-gradient(to right, rgba(5, 15, 50, 0.97), rgba(10, 30, 90, 0.97));
    border-bottom: 1px solid rgba(30, 136, 229, 0.30);
    box-shadow: 0 0 20px rgba(21, 101, 192, 0.15);
}
body.theme-cobalt { --accent: #1e88e5; --accent-hover: #4aa3ed; }

/* ── Star Station (space) — generic sci-fi render, no logos/UI in it ────── */
body.theme-space {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url('../images/themes/space-station.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.theme-space::before { content: none; }
body.theme-space nav, body.theme-space footer {
    background: rgba(3, 3, 10, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
}
body.theme-space { --accent: #b0b0b0; --accent-hover: #ffffff; }