/* ============================================================
   The Order — seasonal themes (2026-10-15)
   Loaded by header.php ONLY while a theme is active (owner dashboard
   → Site Theme). Every rule is scoped to html[data-site-theme], so with no
   theme the site looks exactly as before.

   A theme re-tints the existing design system:
     --gold* / --text-gold*  the accent that site.css uses for text, borders, buttons
     --blue-gem / --th-gem-dark  the corner gems on panels and dividers
     --th-rgb      accent as "r, g, b" for the borders site.css hard-codes in gold
     --th-glow     title glow
     --th-ink      text on the primary (filled) buttons
     --th-tint     colour wash laid over the cloud backdrop
   ============================================================ */

html[data-site-theme] {
    --th-rgb: 212, 163, 71;
    --th-glow: rgba(100, 160, 255, 0.45);
    --th-ink: #2a1d05;
    --th-gem-dark: #0a2f6a;
    --th-tint: none;
    --th-banner: linear-gradient(90deg, rgba(var(--th-rgb), 0.05), rgba(var(--th-rgb), 0.22), rgba(var(--th-rgb), 0.05));
}

/* ---------- palettes ---------- */
html[data-site-theme="halloween"] {
    --gold-dark: #7a3510; --gold: #ff8a1f; --gold-lt: #ffc46b;
    --text-gold: #ffb35c; --text-gold-lt: #ffd08a;
    --blue-gem: #b06cff; --th-gem-dark: #3a1250;
    --th-rgb: 255, 138, 31; --th-glow: rgba(176, 108, 255, 0.6); --th-ink: #2a1004;
    --th-tint: radial-gradient(ellipse 120% 60% at 50% 110%, rgba(255, 110, 20, 0.22), transparent 70%),
               linear-gradient(180deg, rgba(48, 12, 70, 0.45), rgba(20, 6, 28, 0.35));
    --th-banner: linear-gradient(90deg, rgba(58, 18, 80, 0.75), rgba(255, 138, 31, 0.28), rgba(58, 18, 80, 0.75));
}
html[data-site-theme="christmas"] {
    --gold-dark: #6E4F1D; --gold: #e0b04a; --gold-lt: #f7dc8a;
    --text-gold: #f0cf74; --text-gold-lt: #f9e3a0;
    --blue-gem: #ff4d5e; --th-gem-dark: #6b0d17;
    --th-rgb: 232, 57, 74; --th-glow: rgba(255, 77, 94, 0.45);
    --th-tint: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
               linear-gradient(180deg, rgba(6, 46, 28, 0.42), rgba(4, 24, 16, 0.35));
    --th-banner: linear-gradient(90deg, rgba(15, 81, 50, 0.85), rgba(232, 57, 74, 0.55), rgba(15, 81, 50, 0.85));
}
html[data-site-theme="newyear"] {
    --gold-dark: #7a5a1c; --gold: #f5c94a; --gold-lt: #fff0b8;
    --text-gold: #f7d77e; --text-gold-lt: #fff2c4;
    --blue-gem: #d8d8ff; --th-gem-dark: #2b1d5c;
    --th-rgb: 245, 201, 74; --th-glow: rgba(255, 228, 140, 0.65);
    --th-tint: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(140, 110, 255, 0.18), transparent 70%),
               linear-gradient(180deg, rgba(20, 12, 54, 0.45), rgba(8, 6, 26, 0.35));
    --th-banner: linear-gradient(90deg, rgba(43, 29, 92, 0.85), rgba(245, 201, 74, 0.35), rgba(43, 29, 92, 0.85));
}
html[data-site-theme="winter"] {
    --gold-dark: #3c6e96; --gold: #8fd3ff; --gold-lt: #e2f5ff;
    --text-gold: #bfe6ff; --text-gold-lt: #e8f7ff;
    --blue-gem: #c8f2ff; --th-gem-dark: #173a63;
    --th-rgb: 143, 211, 255; --th-glow: rgba(170, 225, 255, 0.65); --th-ink: #0b2238;
    --th-tint: radial-gradient(ellipse 110% 55% at 50% 0%, rgba(200, 235, 255, 0.14), transparent 70%),
               linear-gradient(180deg, rgba(40, 80, 130, 0.25), rgba(10, 24, 48, 0.3));
    --th-banner: linear-gradient(90deg, rgba(23, 58, 99, 0.85), rgba(143, 211, 255, 0.3), rgba(23, 58, 99, 0.85));
}
html[data-site-theme="valentine"] {
    --gold-dark: #8a1d45; --gold: #ff6f9c; --gold-lt: #ffc2d6;
    --text-gold: #ff9fbf; --text-gold-lt: #ffd0e0;
    --blue-gem: #ff3b6b; --th-gem-dark: #5a1030;
    --th-rgb: 255, 111, 156; --th-glow: rgba(255, 90, 140, 0.55); --th-ink: #3a0718;
    --th-tint: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255, 60, 120, 0.16), transparent 70%),
               linear-gradient(180deg, rgba(80, 10, 40, 0.38), rgba(30, 4, 16, 0.3));
    --th-banner: linear-gradient(90deg, rgba(90, 16, 48, 0.85), rgba(255, 111, 156, 0.35), rgba(90, 16, 48, 0.85));
}
html[data-site-theme="spring"] {
    --gold-dark: #8c3a5c; --gold: #f7a8c8; --gold-lt: #ffe0ec;
    --text-gold: #ffc0d8; --text-gold-lt: #ffe2ee;
    --blue-gem: #8fe39b; --th-gem-dark: #1f4d2a;
    --th-rgb: 247, 168, 200; --th-glow: rgba(255, 170, 205, 0.5); --th-ink: #3b0f22;
    --th-tint: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 190, 215, 0.14), transparent 70%),
               linear-gradient(180deg, rgba(30, 70, 45, 0.25), rgba(10, 26, 20, 0.3));
    --th-banner: linear-gradient(90deg, rgba(31, 77, 42, 0.85), rgba(247, 168, 200, 0.35), rgba(31, 77, 42, 0.85));
}
html[data-site-theme="easter"] {
    --gold-dark: #5b4a8f; --gold: #c9b6ff; --gold-lt: #efe8ff;
    --text-gold: #d8cbff; --text-gold-lt: #f1ebff;
    --blue-gem: #9df0c8; --th-gem-dark: #2c5e4c;
    --th-rgb: 201, 182, 255; --th-glow: rgba(200, 180, 255, 0.55); --th-ink: #22184a;
    --th-tint: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(255, 240, 180, 0.12), transparent 70%),
               linear-gradient(180deg, rgba(60, 50, 110, 0.3), rgba(20, 30, 40, 0.3));
    --th-banner: linear-gradient(90deg, rgba(61, 107, 90, 0.85), rgba(201, 182, 255, 0.38), rgba(61, 107, 90, 0.85));
}
html[data-site-theme="summer"] {
    --gold-dark: #8a5a00; --gold: #ffc94a; --gold-lt: #ffe9a3;
    --text-gold: #ffd36b; --text-gold-lt: #ffe8a8;
    --blue-gem: #3fe0d0; --th-gem-dark: #0f5a6e;
    --th-rgb: 255, 201, 74; --th-glow: rgba(63, 224, 208, 0.5); --th-ink: #3a2400;
    --th-tint: radial-gradient(ellipse 80% 50% at 80% 0%, rgba(255, 190, 70, 0.2), transparent 70%),
               linear-gradient(180deg, rgba(10, 80, 100, 0.22), rgba(6, 30, 40, 0.28));
    --th-banner: linear-gradient(90deg, rgba(15, 90, 110, 0.85), rgba(255, 201, 74, 0.35), rgba(15, 90, 110, 0.85));
}
html[data-site-theme="fall"] {
    --gold-dark: #6e2f0e; --gold: #e8893a; --gold-lt: #ffc78a;
    --text-gold: #f0a65c; --text-gold-lt: #ffd2a0;
    --blue-gem: #e0602e; --th-gem-dark: #4a2412;
    --th-rgb: 232, 137, 58; --th-glow: rgba(232, 137, 58, 0.5); --th-ink: #2e1204;
    --th-tint: radial-gradient(ellipse 110% 60% at 50% 100%, rgba(200, 90, 30, 0.16), transparent 70%),
               linear-gradient(180deg, rgba(60, 26, 10, 0.35), rgba(24, 10, 4, 0.3));
    --th-banner: linear-gradient(90deg, rgba(74, 36, 18, 0.85), rgba(232, 137, 58, 0.32), rgba(74, 36, 18, 0.85));
}

/* ---------- colour wash over the cloud backdrop ---------- */
html[data-site-theme] body::before {
    content: '';
    position: fixed; inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--th-tint);
}

/* ---------- borders / glows site.css hard-codes in gold ---------- */
html[data-site-theme] .nav,
html[data-site-theme] .side-title,
html[data-site-theme] .dl-tabs,
html[data-site-theme] .dl-spec-head,
html[data-site-theme] footer.site-footer { border-color: rgba(var(--th-rgb), 0.3); }
html[data-site-theme] .stat,
html[data-site-theme] .news-card,
html[data-site-theme] .feature,
html[data-site-theme] .side-panel,
html[data-site-theme] .dl-card,
html[data-site-theme] .dl-spec-col,
html[data-site-theme] .panel,
html[data-site-theme] .dashboard-card,
html[data-site-theme] .info-item,
html[data-site-theme] .ig-accounts-list li,
html[data-site-theme] .rank-panel,
html[data-site-theme] .rank-card,
html[data-site-theme] .nav-burger { border-color: rgba(var(--th-rgb), 0.45); }
html[data-site-theme] .news-img,
html[data-site-theme] .news-modal-head,
html[data-site-theme] .cta-band,
html[data-site-theme] .auth-links,
html[data-site-theme] .feature-list,
html[data-site-theme] .rank-table th { border-color: rgba(var(--th-rgb), 0.32); }
html[data-site-theme] .side-panel:hover { border-color: rgba(var(--th-rgb), 0.75); }
html[data-site-theme] .feature:hover,
html[data-site-theme] .dl-card:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 18px rgba(var(--th-rgb), 0.2); }
html[data-site-theme] .btn.primary,
html[data-site-theme] .portal-button-primary,
html[data-site-theme] .cta-primary {
    color: var(--th-ink);
    background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    box-shadow: 0 0 18px rgba(var(--th-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-site-theme] .panel::before,
html[data-site-theme] .panel::after { background: radial-gradient(circle, var(--blue-gem), var(--th-gem-dark)); box-shadow: 0 0 6px var(--th-glow); }
html[data-site-theme] .section-title .rule::after { box-shadow: 0 0 10px rgba(var(--th-rgb), 0.7); }
html[data-site-theme] .hero h1 { animation-name: themeShine; }
@keyframes themeShine {
    0%, 100% { text-shadow: 0 0 30px var(--th-glow), 0 4px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.35); }
    50%      { text-shadow: 0 0 52px var(--th-glow), 0 4px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.45); }
}

/* ---------- greeting banner under the nav ---------- */
.theme-banner {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 9px 46px;
    background: var(--th-banner);
    border-bottom: 1px solid rgba(var(--th-rgb), 0.4);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--text-gold-lt);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.theme-banner .tb-emoji { font-size: 17px; letter-spacing: 0; }
.theme-banner .tb-close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(var(--th-rgb), 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-gold-lt);
    font-size: 14px; line-height: 1; cursor: pointer;
}
.theme-banner .tb-close:hover { background: rgba(var(--th-rgb), 0.25); }
.theme-banner.is-preview { letter-spacing: 1px; }
.theme-banner .tb-tag {
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff;
}
.theme-banner.tb-hidden { display: none; }
@media (max-width: 720px) {
    .theme-banner { font-size: 11px; letter-spacing: 1px; padding: 8px 40px; }
}

/* ---------- corner decorations (assets/img/themes/<theme>-tl|tr|bl|br.svg) ----------
   They frame the page: sized to the side margins next to the 1180px content
   (bigger on wide screens), the top pair hangs just under the nav, and they never
   take clicks. A theme without its own -tr piece shows its -tl piece mirrored. */
.theme-deco i {
    position: fixed;
    z-index: 40;                         /* over the content, under the effects (45) and the nav (50) */
    width: var(--td-size); height: var(--td-size);
    background: no-repeat center / contain;
    pointer-events: none;
}
html[data-site-theme] {
    --td-size: clamp(120px, calc((100vw - 1180px) / 2 + 150px), 340px);
    --td-top: 136px;                     /* nav height */
    --td-flip: -1;
}
.theme-deco .td-tl { top: var(--td-top); left: 0;  background-image: var(--td-tl); }
.theme-deco .td-tr { top: var(--td-top); right: 0; background-image: var(--td-tr); transform: scaleX(var(--td-flip)); }
.theme-deco .td-bl { bottom: 0; left: 0;  background-image: var(--td-bl); }
.theme-deco .td-br { bottom: 0; right: 0; background-image: var(--td-br); }
.theme-banner { z-index: 41; }           /* the greeting stays readable over the top corners */
@media (max-width: 1024px) {
    html[data-site-theme] { --td-top: 105px; }
}
/* the top pair hangs under the greeting while it shows (browsers without :has() just overlap it) */
html[data-site-theme]:has(.theme-banner:not(.tb-hidden)) { --td-top: 174px; }
@media (max-width: 1024px) {
    html[data-site-theme]:has(.theme-banner:not(.tb-hidden)) { --td-top: 146px; }
}
@media (max-width: 720px) {
    .theme-deco .td-tl, .theme-deco .td-tr { display: none; }   /* phones: only the two small bottom pieces */
    html[data-site-theme] { --td-size: 84px; }
}

html[data-site-theme="halloween"] {
    --td-tl: url('/assets/img/themes/halloween-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/halloween-tr.svg?v=20261015'); --td-flip: 1;
    --td-bl: url('/assets/img/themes/halloween-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/halloween-br.svg?v=20261015');
}
html[data-site-theme="christmas"] {
    --td-tl: url('/assets/img/themes/christmas-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/christmas-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/christmas-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/christmas-br.svg?v=20261015');
}
html[data-site-theme="newyear"] {
    --td-tl: url('/assets/img/themes/newyear-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/newyear-tr.svg?v=20261015'); --td-flip: 1;
    --td-bl: url('/assets/img/themes/newyear-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/newyear-br.svg?v=20261015');
}
html[data-site-theme="winter"] {
    --td-tl: url('/assets/img/themes/winter-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/winter-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/winter-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/winter-br.svg?v=20261015');
}
html[data-site-theme="valentine"] {
    --td-tl: url('/assets/img/themes/valentine-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/valentine-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/valentine-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/valentine-br.svg?v=20261015');
}
html[data-site-theme="spring"] {
    --td-tl: url('/assets/img/themes/spring-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/spring-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/spring-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/spring-br.svg?v=20261015');
}
html[data-site-theme="easter"] {
    --td-tl: url('/assets/img/themes/easter-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/easter-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/easter-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/easter-br.svg?v=20261015');
}
html[data-site-theme="summer"] {
    --td-tl: url('/assets/img/themes/summer-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/summer-tr.svg?v=20261015'); --td-flip: 1;
    --td-bl: url('/assets/img/themes/summer-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/summer-br.svg?v=20261015');
}
html[data-site-theme="fall"] {
    --td-tl: url('/assets/img/themes/fall-tl.svg?v=20261015'); --td-tr: url('/assets/img/themes/fall-tl.svg?v=20261015');
    --td-bl: url('/assets/img/themes/fall-bl.svg?v=20261015'); --td-br: url('/assets/img/themes/fall-br.svg?v=20261015');
}

/* ---------- falling-particle layer (assets/js/theme-fx.js) ---------- */
#theme-fx {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 45;             /* over the content, under the sticky nav (50) */
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    #theme-fx { display: none; }
}