/* ==========================================================================
   themes.css
   --------------------------------------------------------------------------
   Loaded on index.php, faq.php and blog.php AFTER style.css (and after any
   page-specific <style> block), so its selectors only need to be as
   specific as necessary to win the cascade — no !important required except
   where we're overriding a true inline style="" attribute written by hand
   in the PHP markup (those get very high specificity for free).

   How it works: <body data-theme="default|dark|snow|autumn|sand|end"> is
   set server-side from the site_settings table (see theme_config.php).
   Since almost all of style.css is built on CSS custom properties defined
   in :root, redefining those same variables on body[data-theme="..."]
   re-themes the vast majority of the site automatically (nav, buttons,
   cards, sections, text). The rest of this file handles the handful of
   hardcoded colors that don't go through a variable, plus the decorative
   per-theme flourishes (particles / snow / leaves / sand / void).

   Themes: dark (Enderman), snow (Snow Biome), autumn (Fall foliage),
   sand (Desert Biome), end (The End dimension).
   ========================================================================== */

/* --------------------------------------------------------------------
   1. THEME PALETTES
   -------------------------------------------------------------------- */

/* --- DARK — "Enderman": obsidian black & deep purple, Enderman-eye accent --- */
body[data-theme="dark"] {
    --primary-green: #2d1b4e;
    --secondary-green: #4a2c73;
    --accent-green: #9d4edd;
    --light-green: #c9a0ff;

    --brown-dark: #12081f;
    --brown-medium: #2a1a3d;
    --brown-light: #5a4570;

    --stone-dark: #1a1025;
    --stone-medium: #3d2a52;
    --stone-light: #6b4d8f;

    --gold: #b026ff;
    --diamond: #d4a5ff;
    --redstone: #ff2e88;

    --text-white: #f3e8ff;
    --text-dark: #1a0f2e;
    --text-gray: #a78bc4;

    --bg-dark: #0a0512;
    --bg-medium: #150a22;
    --bg-light: #1f1030;

    --theme-accent: #b026ff;
    --theme-accent-bg: rgba(176, 38, 255, 0.12);
    --theme-accent-border: rgba(176, 38, 255, 0.3);

    background-color: var(--bg-dark);
    position: relative;
}

/* --- SNOW — "Snow Biome": frosted white & ice blue --- */
body[data-theme="snow"] {
    --primary-green: #4a90c2;
    --secondary-green: #6fb3e0;
    --accent-green: #7ec8e3;
    --light-green: #e0f7fa;

    --brown-dark: #3a5068;
    --brown-medium: #5c7c99;
    --brown-light: #9fc1d9;

    --stone-dark: #2b3a4a;
    --stone-medium: #4d6b85;
    --stone-light: #b8d4e3;

    --gold: #6fd3f7;
    --diamond: #4fc3f7;
    --redstone: #e63950;

    --text-white: #ffffff;
    --text-dark: #1b2a38;
    --text-gray: #b0c4d4;

    --bg-dark: #101d27;
    --bg-medium: #17293a;
    --bg-light: #20374a;

    --theme-accent: #7ec8e3;
    --theme-accent-bg: rgba(126, 200, 227, 0.12);
    --theme-accent-border: rgba(126, 200, 227, 0.3);

    background-color: var(--bg-dark);
    position: relative;
}

/* --- AUTUMN — fall foliage: burnt orange, maple red, warm brown --- */
body[data-theme="autumn"] {
    --primary-green: #8b3a0f;
    --secondary-green: #c1440e;
    --accent-green: #e8862b;
    --light-green: #f4c77b;

    --brown-dark: #3b2412;
    --brown-medium: #6b4226;
    --brown-light: #a9744f;

    --stone-dark: #4a2e1d;
    --stone-medium: #6e4a30;
    --stone-light: #b08a63;

    --gold: #e8862b;
    --diamond: #f2a65a;
    --redstone: #c1272d;

    --text-white: #fff3e0;
    --text-dark: #2b1608;
    --text-gray: #c9a27a;

    --bg-dark: #1c0f08;
    --bg-medium: #2a1810;
    --bg-light: #3a2317;

    --theme-accent: #e8862b;
    --theme-accent-bg: rgba(232, 134, 43, 0.12);
    --theme-accent-border: rgba(232, 134, 43, 0.3);

    background-color: var(--bg-dark);
    position: relative;
}

/* --- SAND — Minecraft desert biome: sun-baked tan, sandstone, oasis teal --- */
body[data-theme="sand"] {
    --primary-green: #a9744f;
    --secondary-green: #c9a66b;
    --accent-green: #e8a73c;
    --light-green: #f5deb3;

    --brown-dark: #5c4025;
    --brown-medium: #8b5e34;
    --brown-light: #c9a66b;

    --stone-dark: #6b5637;
    --stone-medium: #9c8257;
    --stone-light: #d9c39a;

    --gold: #e8a73c;
    --diamond: #3fbfb0;
    --redstone: #b5541a;

    --text-white: #fff8e7;
    --text-dark: #3a2a15;
    --text-gray: #cbb48a;

    --bg-dark: #2b1f0f;
    --bg-medium: #40301a;
    --bg-light: #55401f;

    --theme-accent: #e8a73c;
    --theme-accent-bg: rgba(232, 167, 60, 0.12);
    --theme-accent-border: rgba(232, 167, 60, 0.3);

    background-color: var(--bg-dark);
    position: relative;
}

/* --- END — The End dimension: void black-purple, endstone yellow-green, chorus purple --- */
body[data-theme="end"] {
    --primary-green: #1b1330;
    --secondary-green: #2f2350;
    --accent-green: #d9e86b;
    --light-green: #f1f0c4;

    --brown-dark: #0d0a16;
    --brown-medium: #241a38;
    --brown-light: #4a3865;

    --stone-dark: #4a4a2f;
    --stone-medium: #8a8a5c;
    --stone-light: #d8d6a0;

    --gold: #d9e86b;
    --diamond: #b490ca;
    --redstone: #e668c7;

    --text-white: #f5f3d9;
    --text-dark: #14101f;
    --text-gray: #9a93b0;

    --bg-dark: #08060f;
    --bg-medium: #120d1f;
    --bg-light: #1c1430;

    --theme-accent: #d9e86b;
    --theme-accent-bg: rgba(217, 232, 107, 0.12);
    --theme-accent-border: rgba(217, 232, 107, 0.3);

    background-color: var(--bg-dark);
    position: relative;
}

/* --------------------------------------------------------------------
   2. DECORATIVE OVERLAYS — fixed, click-through, sit above the page
   background but below the navbar content (z-index: 1).
   -------------------------------------------------------------------- */

/* --- Enderman: slow-drifting purple teleport particles --- */
body[data-theme="dark"]::before,
body[data-theme="dark"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
    opacity: 0.55;
}
body[data-theme="dark"]::before {
    background-image:
        radial-gradient(2px 2px at 15% 20%, #d29bff 0%, transparent 60%),
        radial-gradient(2px 2px at 65% 70%, #b026ff 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 35%, #e6c9ff 0%, transparent 60%),
        radial-gradient(2px 2px at 35% 85%, #b026ff 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 50%, #d29bff 0%, transparent 60%);
    background-size: 340px 340px;
    animation: endermanParticlesDrift 18s linear infinite;
}
body[data-theme="dark"]::after {
    background-image:
        radial-gradient(1.5px 1.5px at 25% 55%, #c084fc 0%, transparent 60%),
        radial-gradient(2px 2px at 75% 15%, #a020f0 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 90%, #c084fc 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 10% 65%, #a020f0 0%, transparent 60%);
    background-size: 260px 260px;
    animation: endermanParticlesDrift 26s linear infinite reverse;
    opacity: 0.35;
}
@keyframes endermanParticlesDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 200px -600px; }
}

/* --- Snow: layered falling snowflakes --- */
body[data-theme="snow"]::before,
body[data-theme="snow"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
}
body[data-theme="snow"]::before {
    background-image:
        radial-gradient(2px 2px at 10% 10%, #ffffff 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 40% 40%, #ffffff 0%, transparent 60%),
        radial-gradient(2px 2px at 70% 20%, #ffffff 0%, transparent 60%),
        radial-gradient(2px 2px at 90% 60%, #ffffff 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 25% 80%, #ffffff 0%, transparent 60%),
        radial-gradient(2px 2px at 55% 65%, #ffffff 0%, transparent 60%);
    background-size: 300px 300px;
    opacity: 0.7;
    animation: snowfallDrift 14s linear infinite;
}
body[data-theme="snow"]::after {
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, #eaf6fb 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 60% 10%, #eaf6fb 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 80%, #eaf6fb 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 35% 60%, #eaf6fb 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 5% 90%, #eaf6fb 0%, transparent 60%);
    background-size: 220px 220px;
    opacity: 0.5;
    animation: snowfallDrift 22s linear infinite;
}
@keyframes snowfallDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 800px; }
}

/* --- Autumn: drifting fall leaves (orange / maple red / warm brown) --- */
body[data-theme="autumn"]::before,
body[data-theme="autumn"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
}
body[data-theme="autumn"]::before {
    background-image:
        radial-gradient(3px 3px at 12% 15%, #e8862b 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 45% 45%, #c1272d 0%, transparent 60%),
        radial-gradient(3px 3px at 70% 25%, #f4c77b 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 88% 65%, #a9744f 0%, transparent 60%),
        radial-gradient(3px 3px at 30% 80%, #e8862b 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 58% 90%, #c1272d 0%, transparent 60%);
    background-size: 320px 320px;
    opacity: 0.6;
    animation: autumnLeavesDrift 16s linear infinite;
}
body[data-theme="autumn"]::after {
    background-image:
        radial-gradient(2px 2px at 20% 35%, #f4c77b 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 65% 10%, #e8862b 0%, transparent 60%),
        radial-gradient(2px 2px at 80% 55%, #a9744f 0%, transparent 60%),
        radial-gradient(2.5px 2.5px at 40% 70%, #c1272d 0%, transparent 60%);
    background-size: 240px 240px;
    opacity: 0.4;
    animation: autumnLeavesDrift 24s linear infinite reverse;
}
@keyframes autumnLeavesDrift {
    0%   { background-position: 0 0; }
    50%  { background-position: 60px 400px; }
    100% { background-position: 0px 800px; }
}

/* --- Sand: slow, hazy windblown dust drifting mostly sideways --- */
body[data-theme="sand"]::before,
body[data-theme="sand"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
}
body[data-theme="sand"]::before {
    background-image:
        radial-gradient(2px 2px at 10% 20%, #f5deb3 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 40% 55%, #e8a73c 0%, transparent 60%),
        radial-gradient(2px 2px at 65% 30%, #d9c39a 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 70%, #f5deb3 0%, transparent 60%),
        radial-gradient(2px 2px at 25% 85%, #e8a73c 0%, transparent 60%);
    background-size: 360px 200px;
    opacity: 0.45;
    animation: sandDustDrift 30s linear infinite;
}
body[data-theme="sand"]::after {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 45%, #d9c39a 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 15%, #f5deb3 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 75% 60%, #e8a73c 0%, transparent 60%);
    background-size: 260px 160px;
    opacity: 0.3;
    animation: sandDustDrift 45s linear infinite reverse;
}
@keyframes sandDustDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 700px 40px; }
}

/* --- End: faint void starfield + rising pale endstone/chorus sparks --- */
body[data-theme="end"]::before,
body[data-theme="end"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
}
body[data-theme="end"]::before {
    /* distant stars — mostly static, gentle twinkle */
    background-image:
        radial-gradient(1px 1px at 8% 12%, #f5f3d9 0%, transparent 60%),
        radial-gradient(1px 1px at 30% 65%, #b490ca 0%, transparent 60%),
        radial-gradient(1px 1px at 52% 28%, #f5f3d9 0%, transparent 60%),
        radial-gradient(1px 1px at 74% 82%, #b490ca 0%, transparent 60%),
        radial-gradient(1px 1px at 90% 40%, #f5f3d9 0%, transparent 60%),
        radial-gradient(1px 1px at 20% 90%, #f5f3d9 0%, transparent 60%);
    background-size: 260px 260px;
    opacity: 0.5;
    animation: endStarsTwinkle 5s ease-in-out infinite;
}
body[data-theme="end"]::after {
    /* pale endstone-green sparks slowly rising, like dragon breath */
    background-image:
        radial-gradient(2px 2px at 20% 90%, #d9e86b 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 70%, #d9e86b 0%, transparent 60%),
        radial-gradient(2px 2px at 80% 95%, #f1f0c4 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 40% 60%, #d9e86b 0%, transparent 60%);
    background-size: 300px 500px;
    opacity: 0.4;
    animation: endVoidRise 20s linear infinite;
}
@keyframes endStarsTwinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}
@keyframes endVoidRise {
    0%   { background-position: 0 0; }
    100% { background-position: 40px -900px; }
}

/* --------------------------------------------------------------------
   3. STACKING — keep real page content above the decorative overlays.
   NOTE: .navbar is deliberately excluded here — it already has its own
   position: fixed; z-index: 1000; from style.css, which is already well
   above the overlay's z-index: 1. Overriding it (as an earlier version of
   this file did) breaks the fixed nav bar and drags any dropdown menus
   inside it down with it.
   -------------------------------------------------------------------- */
body[data-theme="dark"] main,       body[data-theme="dark"] .container,
body[data-theme="dark"] section,    body[data-theme="dark"] footer,
body[data-theme="snow"] main,       body[data-theme="snow"] .container,
body[data-theme="snow"] section,    body[data-theme="snow"] footer,
body[data-theme="autumn"] main,     body[data-theme="autumn"] .container,
body[data-theme="autumn"] section,  body[data-theme="autumn"] footer,
body[data-theme="sand"] main,       body[data-theme="sand"] .container,
body[data-theme="sand"] section,    body[data-theme="sand"] footer,
body[data-theme="end"] main,        body[data-theme="end"] .container,
body[data-theme="end"] section,     body[data-theme="end"] footer {
    position: relative;
    z-index: 2;
}

/* Extra safety margin so the "Other" nav dropdown always wins against the
   overlay and any themed section, regardless of where it's nested. */
body[data-theme="dark"] .dropdown-menu,
body[data-theme="snow"] .dropdown-menu,
body[data-theme="autumn"] .dropdown-menu,
body[data-theme="sand"] .dropdown-menu,
body[data-theme="end"] .dropdown-menu {
    z-index: 2001;
}

/* --------------------------------------------------------------------
   4. HARDCODED (non-variable) selectors from style.css that reference
   the literal green rgb(124,179,66) instead of var(--accent-green).
   Shared across every theme — each just pulls its own --theme-accent*.
   -------------------------------------------------------------------- */
body[data-theme="dark"]   .nav-link:hover, body[data-theme="dark"]   .stat-item,
body[data-theme="dark"]   .winner-card::before, body[data-theme="dark"]   .winners-section::before,
body[data-theme="dark"]   .dropdown-item:hover,
body[data-theme="snow"]   .nav-link:hover, body[data-theme="snow"]   .stat-item,
body[data-theme="snow"]   .winner-card::before, body[data-theme="snow"]   .winners-section::before,
body[data-theme="snow"]   .dropdown-item:hover,
body[data-theme="autumn"] .nav-link:hover, body[data-theme="autumn"] .stat-item,
body[data-theme="autumn"] .winner-card::before, body[data-theme="autumn"] .winners-section::before,
body[data-theme="autumn"] .dropdown-item:hover,
body[data-theme="sand"]   .nav-link:hover, body[data-theme="sand"]   .stat-item,
body[data-theme="sand"]   .winner-card::before, body[data-theme="sand"]   .winners-section::before,
body[data-theme="sand"]   .dropdown-item:hover,
body[data-theme="end"]    .nav-link:hover, body[data-theme="end"]    .stat-item,
body[data-theme="end"]    .winner-card::before, body[data-theme="end"]    .winners-section::before,
body[data-theme="end"]    .dropdown-item:hover {
    background: var(--theme-accent-bg);
}
body[data-theme="dark"] .stat-item,   body[data-theme="snow"] .stat-item,
body[data-theme="autumn"] .stat-item, body[data-theme="sand"] .stat-item,
body[data-theme="end"] .stat-item {
    border: 1px solid var(--theme-accent-border);
}
body[data-theme="dark"] .dropdown-item:hover,   body[data-theme="snow"] .dropdown-item:hover,
body[data-theme="autumn"] .dropdown-item:hover, body[data-theme="sand"] .dropdown-item:hover,
body[data-theme="end"] .dropdown-item:hover {
    color: var(--theme-accent);
}

/* Hero background — each theme gets its own tint over a photo. The photo
   itself comes from --hero-bg-image, a custom property set inline on
   <body style="..."> by index.php / faq.php from the admin's per-theme
   "Hero Background Image" setting (see theme_config.php). If the admin
   hasn't set one for the active theme, --hero-bg-image is simply absent
   and the var() fallback below (the site's original photo) is used. */
body[data-theme="default"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(45, 80, 22, 0.8) 0%, rgba(74, 124, 58, 0.6) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}
body[data-theme="dark"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(45, 27, 78, 0.88) 0%, rgba(10, 5, 18, 0.82) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}
body[data-theme="snow"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(23, 41, 58, 0.85) 0%, rgba(16, 29, 39, 0.8) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}
body[data-theme="autumn"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(139, 58, 15, 0.85) 0%, rgba(28, 15, 8, 0.85) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}
body[data-theme="sand"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(140, 100, 50, 0.55) 0%, rgba(43, 31, 15, 0.85) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}
body[data-theme="end"] .hero-bg {
    background-image:
        linear-gradient(135deg, rgba(27, 19, 48, 0.9) 0%, rgba(8, 6, 15, 0.92) 100%),
        var(--hero-bg-image, url('https://cdn.wallpapersafari.com/24/38/P1BtjKO.jpg'));
    background-size: cover;
    background-position: center;
}

/* Vote Now buttons — color is admin-configurable per theme via
   --vote-btn-color, also set inline on <body style="..."> in index.php.
   Falls back to the original two-tone green gradient (which itself is
   already theme-aware, since --primary-green/--secondary-green are
   redefined per theme above) when the admin hasn't picked a custom color.
   Deliberately NOT scoped to a specific [data-theme="..."] so it applies
   the same way regardless of which theme is active, default included. */
.vote-btn {
    background: var(--vote-btn-color, linear-gradient(135deg, var(--primary-green), var(--secondary-green)));
}
.vote-btn.voted {
    /* Always red regardless of theme/custom color — this is a status
       indicator ("you already voted today"), not a brand accent. */
    background: linear-gradient(135deg, #d32f2f, #f44336);
}

/* --------------------------------------------------------------------
   5. True inline style="" attributes hand-written in the PHP files
   (e.g. style="color:#ffd700;") need !important to win over the
   inline attribute's own specificity. Shared across every theme.
   -------------------------------------------------------------------- */
body[data-theme="dark"]   [style*="#ffd700" i],
body[data-theme="snow"]   [style*="#ffd700" i],
body[data-theme="autumn"] [style*="#ffd700" i],
body[data-theme="sand"]   [style*="#ffd700" i],
body[data-theme="end"]    [style*="#ffd700" i] {
    color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    background: var(--theme-accent-bg) !important;
}

/* Page-level classes (badge-cat, blog-meta, btn-back, etc.) declared in
   each file's own <style> block also key off #ffd700 — these are real
   class selectors so no !important is needed, just higher specificity. */
body[data-theme="dark"]   .badge-cat, body[data-theme="dark"]   .blog-meta, body[data-theme="dark"]   .btn-back,
body[data-theme="snow"]   .badge-cat, body[data-theme="snow"]   .blog-meta, body[data-theme="snow"]   .btn-back,
body[data-theme="autumn"] .badge-cat, body[data-theme="autumn"] .blog-meta, body[data-theme="autumn"] .btn-back,
body[data-theme="sand"]   .badge-cat, body[data-theme="sand"]   .blog-meta, body[data-theme="sand"]   .btn-back,
body[data-theme="end"]    .badge-cat, body[data-theme="end"]    .blog-meta, body[data-theme="end"]    .btn-back {
    color: var(--theme-accent);
    background: var(--theme-accent-bg);
    border-color: var(--theme-accent-border);
}
body[data-theme="dark"] .archive-card:hover,   body[data-theme="snow"] .archive-card:hover,
body[data-theme="autumn"] .archive-card:hover, body[data-theme="sand"] .archive-card:hover,
body[data-theme="end"] .archive-card:hover {
    border-color: var(--theme-accent) !important;
}

/* --------------------------------------------------------------------
   6. Small text/heading glow so each theme feels distinct on titles.
   -------------------------------------------------------------------- */
body[data-theme="dark"] .section-title, body[data-theme="dark"] .title-main {
    text-shadow: 0 0 18px rgba(176, 38, 255, 0.45), 2px 2px 4px rgba(0,0,0,0.4);
}
body[data-theme="snow"] .section-title, body[data-theme="snow"] .title-main {
    text-shadow: 0 0 16px rgba(126, 200, 227, 0.5), 2px 2px 4px rgba(0,0,0,0.25);
}
body[data-theme="autumn"] .section-title, body[data-theme="autumn"] .title-main {
    text-shadow: 0 0 16px rgba(232, 134, 43, 0.5), 2px 2px 4px rgba(0,0,0,0.35);
}
body[data-theme="sand"] .section-title, body[data-theme="sand"] .title-main {
    text-shadow: 0 0 14px rgba(232, 167, 60, 0.45), 2px 2px 4px rgba(0,0,0,0.3);
}
body[data-theme="end"] .section-title, body[data-theme="end"] .title-main {
    text-shadow: 0 0 18px rgba(217, 232, 107, 0.5), 2px 2px 4px rgba(0,0,0,0.5);
}
